From 69c01bce321e3fd5e9a450d3609fad476f0aff97 Mon Sep 17 00:00:00 2001 From: Joshua Dinh <75056371+JoshuaHungDinh@users.noreply.github.com> Date: Thu, 14 Mar 2024 05:32:47 +0900 Subject: [PATCH] Refactor: replace donation form block modal (#7288) Co-authored-by: Jon Waldstein Co-authored-by: Jon Waldstein Co-authored-by: Paulo Iankoski Co-authored-by: Jon Waldstein --- .../resources/app/Components/ModalForm.tsx | 81 +++++-------------- .../DonationFormBlock/resources/app/index.tsx | 21 ++++- .../resources/common/FormModal/ModalClose.tsx | 21 +++++ .../resources/common/FormModal/index.tsx | 31 +++++++ .../resources/common/FormModal/styles.scss | 48 +++++++++++ .../components/DonationFormBlockPreview.tsx | 15 +++- .../editor/components/ModalPreview.tsx | 46 ----------- .../resources/editor/styles/index.scss | 50 +----------- 8 files changed, 152 insertions(+), 161 deletions(-) create mode 100644 src/DonationForms/Blocks/DonationFormBlock/resources/common/FormModal/ModalClose.tsx create mode 100644 src/DonationForms/Blocks/DonationFormBlock/resources/common/FormModal/index.tsx create mode 100644 src/DonationForms/Blocks/DonationFormBlock/resources/common/FormModal/styles.scss delete mode 100644 src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/ModalPreview.tsx diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/app/Components/ModalForm.tsx b/src/DonationForms/Blocks/DonationFormBlock/resources/app/Components/ModalForm.tsx index 2784867b9e..41b8964b83 100644 --- 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(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 ( -
- - {isOpen && - createPortal( - - - - , - document.body - )} -
+ + + ); } diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/app/index.tsx b/src/DonationForms/Blocks/DonationFormBlock/resources/app/index.tsx index 55a83dfcf7..3ae0e8b8cc 100644 --- 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 ; + return ( + + ); } return ( diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/common/FormModal/ModalClose.tsx b/src/DonationForms/Blocks/DonationFormBlock/resources/common/FormModal/ModalClose.tsx new file mode 100644 index 0000000000..d954c23981 --- /dev/null +++ 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 ( + + ); +} diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/common/FormModal/index.tsx b/src/DonationForms/Blocks/DonationFormBlock/resources/common/FormModal/index.tsx new file mode 100644 index 0000000000..882ac62fdb --- /dev/null +++ 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 ( + <> + + + + {children} + + + + + ); +} diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/common/FormModal/styles.scss b/src/DonationForms/Blocks/DonationFormBlock/resources/common/FormModal/styles.scss new file mode 100644 index 0000000000..314bc8f51a --- /dev/null +++ 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/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockPreview.tsx b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockPreview.tsx index 6d514d3d80..d7a266f92f 100644 --- a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockPreview.tsx +++ b/src/DonationForms/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(false); const isBlockSelected = selectedBlock?.clientId === clientId; const enableIframe = isBlockSelected ? 'auto' : 'none'; @@ -42,7 +44,16 @@ export default function DonationFormBlockPreview({ {openFormButton} ) : isModalDisplay ? ( - + setIsOpen(!isOpen)}> + + ) : ( { - setIsOpen(!isOpen); - }; - - return ( -
- - {isOpen && ( - - - - )} -
- ); -} diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/styles/index.scss b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/styles/index.scss index aabd833904..ae1ab4d555 100644 --- a/src/DonationForms/Blocks/DonationFormBlock/resources/editor/styles/index.scss +++ b/src/DonationForms/Blocks/DonationFormBlock/resources/editor/styles/index.scss @@ -1,3 +1,4 @@ + .givewp-donation-form-selector { display: flex; flex-direction: column; @@ -66,55 +67,6 @@ sans-serif; } -.givewp-donation-form-modal { - border: none; - - &__dialog { - position: fixed; - padding: 0 !important; - border: none !important; - background-color: transparent; - overflow: visible; - - &::backdrop { - background-color: rgba(0, 0, 0, 0.6); - } - } - - &__close { - position: absolute; - right: 0; - top: 0.5rem; - margin-right: -2rem; - padding: 0.5rem 0.5rem 0.25rem 0.5rem; - background-color: #ccc; - cursor: pointer; - border: none !important; - border-radius: 50%; - transition: background-color 0.2s; - - &__icon { - width: 1rem; - height: 1rem; - } - - &:hover { - background-color: #bbb; - } - } -} - -.components-modal__header { - padding-top: 0 !important; - padding-right: 1.5rem !important; - border-bottom: none !important; -} - -.components-modal__content { - margin-top: 0 !important; - padding: 0 !important; -} - .components-input-control__label { width: 100%; }