give / src / Campaigns / Blocks / shared / components / ModalForm / index.tsx

index.tsx in GiveWP – Donation Plugin and Fundraising Platform 4.16.9, at src/Campaigns/Blocks/shared/components/ModalForm/index.tsx

174 lines 5.9 KB

Raw Download Zip

1	import {useEffect, useState} from '@wordpress/element';
2	import {__} from '@wordpress/i18n';
3	import IframeResizer from 'iframe-resizer-react';
4	import {Button, Dialog, Modal, ModalOverlay} from 'react-aria-components';
5	import ModalCloseIcon from './ModalClose';
6	import {Spinner} from '@wordpress/components';
7	import './styles.scss';
8	import '../EntitySelector/styles/index.scss';
9	import {FocusScope} from 'react-aria';
10
11	/**
12	* @unreleasaed
13	*/
14	type ModalFormProps = {
15	dataSrc: string;
16	embedId: string;
17	buttonText: string;
18	isFormRedirect: boolean;
19	formViewUrl: string;
20	};
21
22	/**
23	* @unreleasaed
24	*/
25	export default function ModalForm({dataSrc, embedId, buttonText, isFormRedirect, formViewUrl}: ModalFormProps) {
26	const [dataSrcUrl, setDataSrcUrl] = useState(dataSrc);
27	const [isOpen, setIsOpen] = useState<boolean>(isFormRedirect);
28	const [isLoading, setLoading] = useState<boolean>(false);
29	const [isEntering, setEntering] = useState<boolean>(false);
30
31	useEffect(() => {
32	const handleEscape = (event: KeyboardEvent) => {
33	if (event.key === 'Escape' && isOpen) {
34	closeModal();
35	}
36	};
37
38	document.addEventListener('keydown', handleEscape);
39	return () => {
40	document.removeEventListener('keydown', handleEscape);
41	};
42	}, [isOpen]);
43
44	// Preload the iframe document
45	useEffect(() => {
46	const selector = `link[rel="preload"][href="${dataSrcUrl}"][as="document"]`;
47
48	const existingLink = document.querySelector(selector);
49
50	if (!existingLink) {
51	const link = document.createElement('link');
52	link.rel = 'preload';
53	link.href = dataSrcUrl;
54	link.as = 'document';
55	document.head.appendChild(link);
56	}
57
58	return () => {
59	const addedLink = document.querySelector(selector);
60	if (addedLink) {
61	document.head.removeChild(addedLink);
62	}
63	};
64	}, [dataSrcUrl]);
65
66	useEffect(() => {
67	if (isEntering && !isLoading) {
68	resetEntering();
69	}
70	}, [isEntering, isLoading]);
71
72	// Offline gateways like Stripe refresh the page and need to programmatically
73	// open the confirmation page from the modal.
74	const resetDataSrcUrl = () => {
75	if (!isOpen && isFormRedirect) {
76	setDataSrcUrl(formViewUrl);
77	}
78	};
79
80	const openModal = () => {
81	setEntering(true);
82	setIsOpen(true);
83	setLoading(true);
84	resetDataSrcUrl();
85	};
86
87	const closeModal = () => {
88	setIsOpen(false);
89	setLoading(false);
90	resetDataSrcUrl();
91	};
92
93	const resetEntering = () => {
94	setTimeout(() => {
95	setEntering(false);
96	}, 2000);
97	};
98
99	return (
100	<>
101	<Button
102	type="button"
103	className="givewp-donation-form-modal__open"
104	onPress={openModal}
105	isPending={isLoading}
106	aria-label={isLoading ? __('Loading donation form', 'give') : __('Open donation form', 'give')}
107	>
108	{isLoading && (
109	<span className="givewp-donation-form-modal__open__spinner">
110	<Spinner
111	style={{margin: '0 auto', verticalAlign: 'middle'}}
112	aria-label={__('In progress', 'give')}
113	/>
114	</span>
115	)}
116
117	<span style={{margin: '0', visibility: isLoading ? 'hidden' : 'visible'}} aria-hidden={isLoading}>
118	{buttonText}
119	</span>
120	</Button>
121
122	<ModalOverlay
123	className="givewp-donation-form-modal__overlay"
124	data-loading={isLoading}
125	isOpen={isOpen}
126	onOpenChange={setIsOpen}
127	isDismissable
128	isEntering={isEntering}
129	>
130	<Modal
131	className="givewp-donation-form-modal"
132	data-loading={isLoading}
133	>
134	<FocusScope contain restoreFocus autoFocus>
135	<Dialog
136	className="givewp-donation-form-modal__dialog"
137	aria-label={__('Donation Form', 'give')}
138	role="dialog"
139	aria-modal="true"
140	>
141	<button
142	aria-label={__('Close donation form', 'give')}
143	type="button"
144	className="givewp-donation-form-modal__close"
145	onClick={closeModal}
146	tabIndex={0}
147	>
148	<ModalCloseIcon />
149	</button>
150	<div className="givewp-donation-form-modal__dialog__content">
151	<IframeResizer
152	title={__('Donation Form', 'give')}
153	id={embedId}
154	src={dataSrcUrl}
155	checkOrigin={false}
156	heightCalculationMethod="taggedElement"
157	style={{
158	minWidth: '100%',
159	border: 'none',
160	}}
161	onInit={(iframe) => {
162	iframe.iFrameResizer.resize();
163	setLoading(false);
164	}}
165	/>
166	</div>
167	</Dialog>
168	</FocusScope>
169	</Modal>
170	</ModalOverlay>
171	</>
172	);
173	}
174