Merge branch 'develop' into release/3.6.0

impress-org · Mar 13, 2024 · af2e48f · af2e48f
2 parents 676a853 + 69c01bc
commit af2e48f
Show file tree

Hide file tree

Showing 8 changed files with 152 additions and 161 deletions.
diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/app/Components/ModalForm.tsx b/src/DonationForms/Blocks/DonationFormBlock/resources/app/Components/ModalForm.tsx
@@ -1,93 +1,52 @@
-import {useEffect, useRef, useState} from '@wordpress/element';
+import {useState} from '@wordpress/element';
 import IframeResizer from 'iframe-resizer-react';
-import {createPortal} from 'react-dom';
 
 import '../../editor/styles/index.scss';
-import {useCallback} from 'react';
+import FormModal from '../../common/FormModal';
 
 type ModalFormProps = {
     dataSrc: string;
     embedId: string;
     openFormButton: string;
-    openByDefault?: boolean;
     isFormRedirect: boolean;
     formViewUrl: string;
 };
 
 /**
+ * @unreleased
  * @since 3.4.0
  * @since 3.2.0 include types. update BEM classnames.
  * @since 3.0.0
  */
-export default function ModalForm({dataSrc, embedId, openFormButton, openByDefault, isFormRedirect, formViewUrl}: ModalFormProps) {
-    const [isOpen, setIsOpen] = useState(openByDefault || isFormRedirect);
-    const modalRef = useRef(null);
+export default function ModalForm({dataSrc, embedId, openFormButton, isFormRedirect, formViewUrl}: ModalFormProps) {
     const [dataSrcUrl, setDataSrcUrl] = useState(dataSrc);
+    const [isOpen, setIsOpen] = useState<boolean>(isFormRedirect);
+
+    // Offline gateways like Stripe refresh the page and need to programmatically
+    // open the confirmation page from the modal.
 
     const resetDataSrcUrl = () => {
-         if (!isOpen && isFormRedirect) {
+        if (!isOpen && isFormRedirect) {
             setDataSrcUrl(formViewUrl);
         }
     };
 
     const toggleModal = () => {
         setIsOpen(!isOpen);
-
         resetDataSrcUrl();
     };
 
-    useEffect(() => {
-        const {current: el} = modalRef;
-        if (isOpen) {
-            el.showModal();
-        }
-    }, [isOpen]);
-
     return (
-        <div className={'givewp-donation-form-modal'}>
-            <button className={'givewp-donation-form-modal__open'} onClick={toggleModal}>
-                {openFormButton}
-            </button>
-            {isOpen &&
-                createPortal(
-                    <dialog className={'givewp-donation-form-modal__dialog'} ref={modalRef}>
-                        <button
-                            className="givewp-donation-form-modal__close"
-                            type="button"
-                            aria-label="Close"
-                            onClick={toggleModal}
-                        >
-                            <svg
-                                className="givewp-donation-form-modal__close__icon"
-                                xmlns="http://www.w3.org/2000/svg"
-                                viewBox="0 0 24 24"
-                                width="24"
-                                height="24"
-                                aria-hidden="true"
-                                focusable="false"
-                            >
-                                <path
-                                    stroke="black"
-                                    strokeWidth="2"
-                                    d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"
-                                ></path>
-                            </svg>
-                        </button>
-                        <IframeResizer
-                            id={embedId}
-                            src={dataSrcUrl}
-                            checkOrigin={false}
-                            style={{
-                                width: '32.5rem',
-                                minWidth: '100%',
-                                border: 'none',
-                                overflowY: 'scroll',
-                                background: 'none !important',
-                            }}
-                        />
-                    </dialog>,
-                    document.body
-                )}
-        </div>
+        <FormModal isOpen={isOpen} onChange={toggleModal} openFormButton={openFormButton}>
+            <IframeResizer
+                id={embedId}
+                src={dataSrcUrl}
+                checkOrigin={false}
+                style={{
+                    minWidth: '100%',
+                    border: 'none',
+                }}
+            />
+        </FormModal>
     );
 }
diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/app/index.tsx b/src/DonationForms/Blocks/DonationFormBlock/resources/app/index.tsx
@@ -31,14 +31,21 @@ const isRedirect = (url: string) => {
     const redirectUrlParams = new URLSearchParams(redirectUrl.search);
 
     return isRouteInlineRedirect(redirectUrlParams, inlineRedirectRoutes);
-}
+};
 
 /**
  * @since 3.4.0 add logic for inline redirects.
  * @since 3.2.0 replace form format reveal with new tab.
  * @since 3.0.0
  */
-function DonationFormBlockApp({formFormat, dataSrc, embedId, openFormButton, formUrl, formViewUrl}: DonationFormBlockAppProps) {
+function DonationFormBlockApp({
+    formFormat,
+    dataSrc,
+    embedId,
+    openFormButton,
+    formUrl,
+    formViewUrl,
+}: DonationFormBlockAppProps) {
     const isFormRedirect = isRedirect(dataSrc);
 
     if (formFormat === 'newTab') {
@@ -50,7 +57,15 @@ function DonationFormBlockApp({formFormat, dataSrc, embedId, openFormButton, for
     }
 
     if (formFormat === 'modal' || formFormat === 'reveal') {
-        return <ModalForm openFormButton={openFormButton} dataSrc={dataSrc} embedId={embedId} openByDefault={isFormRedirect} isFormRedirect={isFormRedirect} formViewUrl={formViewUrl} />;
+        return (
+            <ModalForm
+                openFormButton={openFormButton}
+                dataSrc={dataSrc}
+                embedId={embedId}
+                isFormRedirect={isFormRedirect}
+                formViewUrl={formViewUrl}
+            />
+        );
     }
 
     return (

diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/common/FormModal/ModalClose.tsx b/src/DonationForms/Blocks/DonationFormBlock/resources/common/FormModal/ModalClose.tsx
@@ -0,0 +1,21 @@
+import {Path, SVG} from '@wordpress/components';
+
+export default function ModalCloseIcon() {
+    return (
+        <SVG
+            className="givewp-donation-form-modal__close__icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"
+            aria-hidden="true"
+            focusable="false"
+        >
+            <Path
+                stroke="black"
+                strokeWidth="2"
+                d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"
+            ></Path>
+        </SVG>
+    );
+}
diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/common/FormModal/index.tsx b/src/DonationForms/Blocks/DonationFormBlock/resources/common/FormModal/index.tsx
@@ -0,0 +1,31 @@
+import {Button, Dialog, Modal} from 'react-aria-components';
+import './styles.scss';
+import ModalCloseIcon from './ModalClose';
+
+type FormModalProps = {
+    children: any;
+    openFormButton: string;
+    isOpen: boolean;
+    onChange?: () => void;
+};
+
+/**
+ * @unreleased
+ */
+export default function FormModal({openFormButton, children, onChange, isOpen}: FormModalProps) {
+    return (
+        <>
+            <Button className={'givewp-donation-form-modal__open'} onPress={onChange}>
+                {openFormButton}
+            </Button>
+            <Modal className={'givewp-donation-form-modal__overlay'} isOpen={isOpen}>
+                <Dialog className={'givewp-donation-form-modal__dialog'}>
+                    {children}
+                    <Button className="givewp-donation-form-modal__close" onPress={onChange}>
+                        <ModalCloseIcon />
+                    </Button>
+                </Dialog>
+            </Modal>
+        </>
+    );
+}
diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/common/FormModal/styles.scss b/src/DonationForms/Blocks/DonationFormBlock/resources/common/FormModal/styles.scss
@@ -0,0 +1,48 @@
+.givewp-donation-form-modal {
+    &__overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        display: flex;
+        background-color: rgba(0, 0, 0, 0.35);
+    }
+
+    &__dialog {
+        position: relative;
+        margin: auto;
+        max-height: 85%;
+        width: 100%;
+        padding-right: 3rem;
+        padding-top: 4rem;
+        overflow-y: scroll;
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    &__close {
+        display: flex;
+        position: absolute;
+        top: .25rem;
+        right: 50%;
+        padding: .75rem;
+        width: fit-content;
+        background: #fff;
+        cursor: pointer;
+        border: 1px solid transparent;
+        border-radius: 50%;
+        z-index: 999;
+
+        svg {
+            height: 1rem;
+            width: 1rem;
+        }
+
+        &:hover {
+            border: 1px solid grey;
+        }
+    }
+}
diff --git a/...onForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockPreview.tsx b/...onForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockPreview.tsx
@@ -1,8 +1,9 @@
-import ModalPreview from './ModalPreview';
 import IframeResizer from 'iframe-resizer-react';
 import {useSelect} from '@wordpress/data';
 
 import '../styles/index.scss';
+import FormModal from '../../common/FormModal';
+import {useState} from '@wordpress/element';
 
 /**
  * @since 3.2.1 Revert the display style value of "fullForm" to "onpage"
@@ -30,6 +31,7 @@ export default function DonationFormBlockPreview({
 }: BlockPreviewProps) {
     // @ts-ignore
     const selectedBlock = useSelect((select) => select('core/block-editor').getSelectedBlock(), []);
+    const [isOpen, setIsOpen] = useState<boolean>(false);
     const isBlockSelected = selectedBlock?.clientId === clientId;
 
     const enableIframe = isBlockSelected ? 'auto' : 'none';
@@ -42,7 +44,16 @@ export default function DonationFormBlockPreview({
             {openFormButton}
         </a>
     ) : isModalDisplay ? (
-        <ModalPreview enableIframe={enableIframe} formId={formId} openFormButton={openFormButton} />
+        <FormModal openFormButton={openFormButton} isOpen={isOpen} onChange={() => setIsOpen(!isOpen)}>
+            <IframeResizer
+                src={`/?givewp-route=donation-form-view&form-id=${formId}`}
+                checkOrigin={false}
+                style={{
+                    minWidth: '100%',
+                    pointerEvents: enableIframe,
+                }}
+            />
+        </FormModal>
     ) : (
         <IframeResizer
             src={`/?givewp-route=donation-form-view&form-id=${formId}`}

diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/ModalPreview.tsx b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/ModalPreview.tsx