Feature: Add receipt settings to the form builder

packages/form-builder/src/App.tsx

@@ -9,30 +9,13 @@ import type {Block} from '@givewp/form-builder/types';
 import './App.scss';
 
 import defaultBlocks from './blocks.json';
-import {__} from '@wordpress/i18n';
-import Feedback from "@givewp/form-builder/feedback";
+import Feedback from '@givewp/form-builder/feedback';
 
 const {blocks: initialBlocks, formSettings: initialFormSettings} = Storage.load();
 
 const initialState = {
     blocks: initialBlocks || (defaultBlocks as Block[]),
     settings: {
-        formTitle: __('My Default Donation Form Title', 'give'),
-        enableDonationGoal: false,
-        enableAutoClose: false,
-        registration: 'none',
-        goalType: 'amount',
-        goalAchievedMessage: __('Thank you to all our donors, we have met our fundraising goal.', 'give'),
-        designId: 'classic',
-        showHeading: true,
-        showDescription: true,
-        heading: __('Support Our Cause', 'give'),
-        description: __(
-            'Help our organization by donating today! Donations go to making a difference for our cause.',
-            'give'
-        ),
-        primaryColor: '#69b86b',
-        secondaryColor: '#f49420',
         ...initialFormSettings,
     },
 };

packages/form-builder/src/components/sidebar/primary.js

@@ -1,4 +1,4 @@
-import {createSlotFill} from '@wordpress/components';
+import {createSlotFill, PanelBody} from '@wordpress/components';
 import {__} from '@wordpress/i18n';
 
 import './styles.scss';
@@ -11,6 +11,7 @@ import {
     FormTitleSettings,
     OfflineDonationsSettings,
     CustomStyleSettings,
+    ReceiptSettings,
 } from '../../settings/index.ts';
 import FormFields from '../../settings/form-fields';
 import {PopoutSlot} from './popout';
@@ -51,6 +52,7 @@ const tabs = [
             <>
                 <FormDesignSettings />
                 <DonationGoalSettings />
+                <ReceiptSettings />
                 <CustomStyleSettings />
             </>
         )

packages/form-builder/src/settings/index.ts

@@ -3,7 +3,8 @@ import FormFieldSettings from './form-fields';
 import FormTitleSettings from './form-title';
 import OfflineDonationsSettings from './offline-donation';
 import FormDesignSettings from './design';
-import CustomStyleSettings from "./styles";
+import CustomStyleSettings from './styles';
+import ReceiptSettings from './receipt';
 
 export {
     DonationGoalSettings,
@@ -12,4 +13,5 @@ export {
     OfflineDonationsSettings,
     FormDesignSettings,
     CustomStyleSettings,
+    ReceiptSettings,
 };

packages/form-builder/src/settings/receipt/index.tsx

@@ -0,0 +1,32 @@
+import {PanelBody, PanelRow, TextareaControl, TextControl} from "@wordpress/components";
+import {__} from "@wordpress/i18n";
+import {setFormSettings, useFormState, useFormStateDispatch} from "@givewp/form-builder/stores/form-state";
+
+const ReceiptSettings = () => {
+
+    const {
+        settings: {receiptHeading, receiptDescription},
+    } = useFormState();
+    const dispatch = useFormStateDispatch();
+
+    return (
+        <PanelBody title={__('Receipt and Thank You')} initialOpen={false}>
+            <PanelRow>
+                <TextControl
+                    label={__('Heading', 'give')}
+                    value={receiptHeading}
+                    onChange={(receiptHeading) => dispatch(setFormSettings({receiptHeading}))}
+                />
+            </PanelRow>
+            <PanelRow>
+                <TextareaControl
+                    label={__('Description', 'give')}
+                    value={receiptDescription}
+                    onChange={(receiptDescription) => dispatch(setFormSettings({receiptDescription}))}
+                />
+            </PanelRow>
+        </PanelBody>
+    )
+}
+
+export default ReceiptSettings;

packages/form-builder/src/types/formSettings.ts

@@ -16,4 +16,8 @@ export type FormSettings = {
     primaryColor: string;
     secondaryColor: string;
     customCss: string;
+
+    receiptHeading: string;
+
+    receiptDescription: string;
 };

src/FormBuilder/Routes/CreateFormRoute.php

@@ -7,7 +7,6 @@
 use Give\NextGen\DonationForm\Models\DonationForm;
 use Give\NextGen\DonationForm\Properties\FormSettings;
 use Give\NextGen\DonationForm\ValueObjects\DonationFormStatus;
-use Give\NextGen\DonationForm\ValueObjects\GoalType;
 use Give\NextGen\Framework\Blocks\BlockCollection;
 
 /**
@@ -36,19 +35,7 @@ public function __invoke()
                     'title' => __('GiveWP Donation Form', 'give'),
                     'status' => DonationFormStatus::PUBLISHED(),
                     'settings' => FormSettings::fromArray([
-                        'enableDonationGoal' => false,
                         'goalAmount' => 1000,
-                        'enableAutoClose' => false,
-                        'registration' => 'none',
-                        'goalType' => GoalType::AMOUNT(),
-                        'designId' => 'classic',
-                        'showHeading' => true,
-                        'showDescription' => true,
-                        'heading' => __('Support Our Cause', 'give'),
-                        'description' => __(
-                            'Help our organization by donating today! All donations go directly to making a difference for our cause.',
-                            'give'
-                        )
                     ]),
                     'blocks' => BlockCollection::fromJson($blocksJson)
                 ]);

src/NextGen/DonationForm/Properties/FormSettings.php

@@ -69,6 +69,16 @@ class FormSettings implements Arrayable, Jsonable {
      */
     public $goalAchievedMessage;
 
+    /**
+     * @var string
+     */
+    public $receiptHeading;
+
+    /**
+     * @var string
+     */
+    public $receiptDescription;
+
     /**
      * @unreleased
      */
@@ -79,11 +89,11 @@ public static function fromArray(array $array): self
         $self->showHeading = $array['showHeading'] ?? true;
         $self->heading = $array['heading'] ?? __('Support Our Cause', 'give');
         $self->showDescription = $array['showDescription'] ?? true;
-         $self->description = $array['description'] ?? __(
+        $self->description = $array['description'] ?? __(
             'Help our organization by donating today! Donations go to making a difference for our cause.',
             'give'
         );
-        $self->formTitle =  $array['formTitle'] ?? __('Donation Form', 'give');
+        $self->formTitle = $array['formTitle'] ?? __('Donation Form', 'give');
         $self->enableDonationGoal = $array['enableDonationGoal'] ?? false;
         $self->enableAutoClose = $array['enableAutoClose'] ?? false;
         $self->goalType = !empty($array['goalType']) ? new GoalType($array['goalType']) : GoalType::AMOUNT();
@@ -93,7 +103,18 @@ public static function fromArray(array $array): self
         $self->goalAmount = $array['goalAmount'] ?? 0;
         $self->registration = $array['registration'] ?? 'none';
         $self->customCss = $array['customCss'] ?? '';
-        $self->goalAchievedMessage = $array['goalAchievedMessage'] ?? '';
+        $self->goalAchievedMessage = $array['goalAchievedMessage'] ?? __(
+            'Thank you to all our donors, we have met our fundraising goal.',
+            'give'
+        );
+        $self->receiptHeading = $array['receiptHeading'] ?? __(
+            'Hey {donor.firstName}, thanks for your donation!',
+            'give'
+        );
+        $self->receiptDescription = $array['receiptDescription'] ?? __(
+            '{donor.firstName}, your contribution means a lot and will be put to good use in making a difference. We’ve sent your donation receipt to {donor.email}.',
+            'give'
+        );
 
         return $self;
     }