Refactor: Update offline donation setting

* replace control because of button not showing up, update form setting key because of using wrong key, update default value conditional because it was empty (#250)
impress-org · Aug 14, 2023 · b35d296 · b35d296
1 parent ec0d85f
commit b35d296
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 43 deletions.
diff --git a/...mBuilder/resources/js/form-builder/src/settings/offline-donation/donation-instructions.js b/...mBuilder/resources/js/form-builder/src/settings/offline-donation/donation-instructions.js
@@ -1,13 +1,11 @@
-import {useState} from 'react';
 import {useToggleState} from '../../hooks';
-import {BaseControl, Button, Modal, PanelRow} from '@wordpress/components';
-import {__} from "@wordpress/i18n";
-import Editor from "@givewp/form-builder/settings/email/template-options/components/editor";
-import {MenuIcon} from "@givewp/form-builder/blocks/fields/terms-and-conditions/Icon";
-import {setFormSettings, useFormState, useFormStateDispatch} from "@givewp/form-builder/stores/form-state";
+import {Modal, PanelRow} from '@wordpress/components';
+import {__} from '@wordpress/i18n';
+import Editor from '@givewp/form-builder/settings/email/template-options/components/editor';
+import {setFormSettings, useFormState, useFormStateDispatch} from '@givewp/form-builder/stores/form-state';
+import ControlForPopover from '@givewp/form-builder/components/settings/ControlForPopover';
 
 const DonationInstructions = () => {
-
     const {
         settings: {offlineDonationsInstructions},
     } = useFormState();
@@ -18,44 +16,37 @@ const DonationInstructions = () => {
     return (
         <>
             <PanelRow>
-                <BaseControl
-                    id={'offline-donation-instructions-text'}
+                <ControlForPopover
+                    id="offline-donation-instructions-text"
                     help={__('This is the actual text which the user will follow to make a donation.', 'give')}
+                    heading={__('Donation Instructions', 'give')}
+                    onButtonClick={toggleShowPopout}
+                    isButtonActive={showPopout}
                 >
-                    <div
-                        style={{
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'space-between',
-                        }}
-                    >
-                        {__('Donation Instructions', 'give')}
-                        <Button
-                            style={{background: 'transparent', verticalAlign: 'center'}}
-                            variant={'primary'}
-                            onClick={toggleShowPopout}
+                    {showPopout && (
+                        <Modal
+                            title={__('Donation Instructions', 'give')}
+                            onRequestClose={toggleShowPopout}
+                            style={{maxWidth: '35rem'}}
                         >
-                            <MenuIcon />
-                        </Button>
-                    </div>
-                </BaseControl>
-            </PanelRow>
-            {showPopout && (
-                <Modal
-                    title={__('Donation Instructions', 'give')}
-                    onRequestClose={toggleShowPopout}
-                    style={{maxWidth: '35rem'}}
-                >
-                    <Editor
-                        value={offlineDonationsInstructions ?? `
+                            <Editor
+                                value={
+                                    offlineDonationsInstructions?.length > 0
+                                        ? offlineDonationsInstructions
+                                        : `
                             <p>You can customize instructions in the form settings.</p>
                             <p>Please make checks payable to <strong>"{sitename}"</strong>.</p>
                             <p>Your donation is greatly appreciated!</p>
-                        `}
-                        onChange={(offlineDonationsInstructions) => dispatch(setFormSettings({offlineDonationsInstructions}))}
-                    />
-                </Modal>
-            )}
+                        `
+                                }
+                                onChange={(offlineDonationsInstructions) =>
+                                    dispatch(setFormSettings({offlineDonationsInstructions}))
+                                }
+                            />
+                        </Modal>
+                    )}
+                </ControlForPopover>
+            </PanelRow>
         </>
     );
 };

diff --git a/src/FormBuilder/resources/js/form-builder/src/settings/offline-donation/index.js b/src/FormBuilder/resources/js/form-builder/src/settings/offline-donation/index.js
@@ -5,7 +5,7 @@ import DonationInstructions from './donation-instructions';
 
 const OfflineDonationsSettings = () => {
     const {
-        settings: {enableOfflineDonations},
+        settings: {offlineDonationsCustomize},
     } = useFormState();
     const dispatch = useFormStateDispatch();
 
@@ -15,11 +15,11 @@ const OfflineDonationsSettings = () => {
                 <ToggleControl
                     label={__('Enable Offline Donations', 'give')}
                     help={__('Do you want to customize the donation instructions for this form?', 'give')}
-                    checked={enableOfflineDonations}
-                    onChange={() => dispatch(setFormSettings({enableOfflineDonations: !enableOfflineDonations}))}
+                    checked={offlineDonationsCustomize}
+                    onChange={() => dispatch(setFormSettings({offlineDonationsCustomize: !offlineDonationsCustomize}))}
                 />
             </PanelRow>
-            {enableOfflineDonations && (
+            {offlineDonationsCustomize && (
                 <>
                     <PanelRow>
                         <DonationInstructions />

diff --git a/src/FormBuilder/resources/js/form-builder/src/types/formSettings.ts b/src/FormBuilder/resources/js/form-builder/src/types/formSettings.ts
@@ -35,4 +35,5 @@ export type FormSettings = {
     formGridDonateButtonText: string;
     formGridHideDocumentationLink: boolean;
     offlineDonationsCustomize: boolean;
+    offlineDonationsInstructions: string;
 };