give / src / DonationForms / V2 / resources / components / Onboarding / Dialogs / FeatureNoticeDialog.tsx

FeatureNoticeDialog.tsx in GiveWP – Donation Plugin and Fundraising Platform 4.17.0, at src/DonationForms/V2/resources/components/Onboarding/Dialogs/FeatureNoticeDialog.tsx

115 lines 4.6 KB

Raw Download Zip

1	import {__, sprintf} from '@wordpress/i18n';
2	import ModalDialog from '@givewp/components/AdminUI/ModalDialog';
3	import {CheckVerified, StarsIcon} from '@givewp/components/AdminUI/Icons';
4	import Button from '@givewp/components/AdminUI/Button';
5	import styles from '../style.module.scss';
6	import {createInterpolateElement} from '@wordpress/element';
7
8	export default function FeatureNoticeDialog({isUpgrading, isEditing, handleClose}) {
9	const {supportedAddons, supportedGateways, migrationApiRoot, apiNonce} = window.GiveDonationForms;
10	const handleUpgrade = async () => {
11	// @ts-ignore
12	const response = await fetch(migrationApiRoot + '/' + window.give_vars.post_id, {
13	method: 'post',
14	headers: {
15	'Content-Type': 'application/json',
16	'X-WP-Nonce': apiNonce,
17	},
18	});
19
20	const data = await response.json();
21
22	if (response.ok) {
23	window.location = data.redirect;
24	} else {
25	alert('Error migrating form');
26	}
27	};
28
29	// @note the <Button/> component does not support the `className` prop.
30	const upgradeButtonStyles = {
31	width: '100%',
32	marginTop: 'var(--givewp-spacing-6)',
33	marginBottom: 'var(--givewp-spacing-4)',
34	backgroundColor: 'var(--wp-blue-blue-50)',
35	};
36
37	return (
38	<ModalDialog isOpen={true} title={__('Feature notice', 'give')} handleClose={handleClose}>
39	<>
40	<div className={styles.title}>
41	<StarsIcon /> {__("What's new", 'give')}
42	</div>
43
44	<p className={styles.message}>
45	{createInterpolateElement(
46	sprintf(
47	__(
48	'GiveWP 3.0 introduces an enhanced forms experience powered by the new Visual Donation Form Builder. The team is still working on add-on and gateway compatibility. If you need to use an add-on or gateway that isn\'t listed, use the "%sAdd form%s" option for now.',
49	'give'
50	),
51	'<b>',
52	'</b>'
53	),
54	{
55	b: <strong />,
56	}
57	)}
58	</p>
59
60	{supportedAddons.length > 0 && (
61	<>
62	<div className={styles.title}>{__('Supported add-ons', 'give')}</div>
63
64	<div className={styles.itemsContainer}>
65	{supportedAddons.map((addon) => (
66	<div className={styles.item} key={addon}>
67	<CheckVerified />
68	{addon}
69	</div>
70	))}
71	</div>
72	</>
73	)}
74
75	{supportedGateways.length > 0 && (
76	<>
77	<div className={styles.title}>{__('Supported gateways', 'give')}</div>
78
79	<div className={styles.itemsContainer}>
80	{supportedGateways.map((gateway) => (
81	<div className={styles.item} key={gateway}>
82	<CheckVerified />
83	{gateway}
84	</div>
85	))}
86	</div>
87	</>
88	)}
89
90	{isUpgrading \|\| isEditing ? (
91	<Button size="large" onClick={handleUpgrade} className={styles.proceedButton}>
92	{isUpgrading ? __('Proceed with upgrade', 'give') : __('Proceed with the new form builder', 'give')}
93	</Button>
94	) : (
95	<Button
96	size="large"
97	onClick={() => {
98	window.location.href = 'edit.php?post_type=give_forms&page=give-campaigns&new=campaign';
99	}}
100	className={styles.proceedButton}
101	>
102	{__('Proceed with the new form builder', 'give')}
103	</Button>
104	)}
105
106	<div className={styles.link}>
107	<a href="https://docs.givewp.com/compat-guide" rel="noopener noreferrer" target="_blank">
108	{__('Read more on Add-ons and Gateways compatibility', 'give')}
109	</a>
110	</div>
111	</>
112	</ModalDialog>
113	);
114	}
115