Rework the checkout modal

[artpi]

We use thickbox library to display the modal iframe: https://github.com/Automattic/jetpack/blob/b313bd253afdf919adf7a71a866d0ab85b3a7bda/projects/plugins/jetpack/extensions/shared/memberships.js#L19

That has a dependancy on jQuery, which is less than ideal. We want to remove that dependency and switch to another modal system. Suposedly, navigation modal has a good library:

https://make.wordpress.org/core/2022/01/07/the-new-navigation-block/

Remember that checkout modal displays for the site visitor, not in Gutenberg editor. This means view.js in gutenberg components.

Goal of this task:

1. Figure out how to use the navigation block modal to display an iframe. If that is not possible, research other Gutenberg components and see if there is a modal that fits.
2. Reimplement checkout using that new modal.

Watch out for:

• Mobile layouts
• Cross browser compatibilities

iOS safari MUST WORK FLAWLESSLY.

CC @mtias

[n3f]

I don't see any sort of modal support with the navigation block linked above, so I'm not sure if I'm looking in the wrong spot or if we should be looking at something else (e.g. the modal component). (Also not sure if jetpack loads react in the front end either...). Another option might be the carousel, but I haven't found a good way to use that either.

Either way, I've found the code paths that (probably) need to be modified and I'm looking at hooking in the modal component.

• projects/plugins/jetpack/extensions/blocks/donations/donations.php
• projects/plugins/jetpack/extensions/shared/memberships.js
• projects/plugins/jetpack/modules/memberships/class-jetpack-memberships.php

Also, I created a test post (using both a recurring payments button & a menu -- it could be that the submenu uses some sort of modal code we should use?)

[n3f]

Update

I got the modal working for a simple component, tomorrow I'll try and get it with an iframe...

[n3f]

This can be taken by anyone. All the previous work can be scrapped (within reason I guess) as it was decided to move away from re-using Gutenberg components and use HTML ones (i.e. <dialog>).