Feature: Add donate button caption to form settings (#6883)

* feature: add donate button setting

* feature: include submit button in multistep

* refactor: update help messages

* chore: include period in sentance

* chore: update default Donate now text

* refactor: update DonateButton import name to match the other form settings:

* fix: use correct import

* fix: add prop type to multstep forms

src/DonationForms/Properties/FormSettings.php

@@ -156,6 +156,12 @@ class FormSettings implements Arrayable, Jsonable
      */
     public $offlineDonationsInstructions;
 
+    /**
+     * @var string
+     */
+    public $donateButtonCaption;
+
+
     /**
      * @since 3.0.0
      */
@@ -172,9 +178,10 @@ public static function fromArray(array $array): self
             'give'
         );
         $self->formTitle = $array['formTitle'] ?? __('Donation Form', 'give');
+        $self->donateButtonCaption = $array['donateButtonCaption'] ?? __('Donate now', 'give');
         $self->enableDonationGoal = $array['enableDonationGoal'] ?? false;
         $self->enableAutoClose = $array['enableAutoClose'] ?? false;
-        $self->goalType = !empty($array['goalType']) ? new GoalType($array['goalType']) : GoalType::AMOUNT();
+        $self->goalType = ! empty($array['goalType']) ? new GoalType($array['goalType']) : GoalType::AMOUNT();
         $self->designId = $array['designId'] ?? ClassicFormDesign::id();
         $self->primaryColor = $array['primaryColor'] ?? '#69b86b';
         $self->secondaryColor = $array['secondaryColor'] ?? '#f49420';
@@ -194,7 +201,9 @@ public static function fromArray(array $array): self
             '{first_name}, your contribution means a lot and will be put to good use in making a difference. We’ve sent your donation receipt to {email}.',
             'give'
         );
-        $self->formStatus = !empty($array['formStatus']) ? new DonationFormStatus($array['formStatus']) : DonationFormStatus::DRAFT();
+        $self->formStatus = ! empty($array['formStatus']) ? new DonationFormStatus(
+            $array['formStatus']
+        ) : DonationFormStatus::DRAFT();
 
         $self->formGridCustomize = $array['formGridCustomize'] ?? false;
         $self->formGridRedirectUrl = $array['formGridRedirectUrl'] ?? '';
@@ -248,7 +257,7 @@ public function toJson($options = 0): string
             array_merge(
                 $this->toArray(),
                 [
-                    'goalType' => $this->goalType ? $this->goalType->getValue() : null
+                    'goalType' => $this->goalType ? $this->goalType->getValue() : null,
                 ]
             )
         );

src/DonationForms/resources/app/form/MultiStepForm/components/SubmitButton.tsx

@@ -3,14 +3,12 @@ import {__} from '@wordpress/i18n';
 /**
  * @since 3.0.0
  */
-export default function SubmitButton({
-    isSubmitting,
-    submittingText = __('Submitting…', 'give'),
-    buttonText = __('Donate Now', 'give'),
-}) {
+export default function SubmitButton({isSubmitting, submittingText = __('Submitting…', 'give')}) {
+    const {donateButtonCaption} = window.givewp.form.hooks.useDonationFormSettings();
+
     return (
         <button type="submit" disabled={isSubmitting} aria-busy={isSubmitting}>
-            {isSubmitting ? submittingText : buttonText}
+            {isSubmitting ? submittingText : donateButtonCaption}
         </button>
     );
 }

src/DonationForms/resources/app/store/form-settings/index.tsx

@@ -9,6 +9,7 @@ type PropTypes = {
         [key: string]: unknown;
         currencySwitcherSettings?: CurrencySwitcherSetting[];
         currencySwitcherMessage?: string;
+        donateButtonCaption: string;
     };
     children: ReactNode;
 };
@@ -17,11 +18,7 @@ type PropTypes = {
  * @since 3.0.0
  */
 const DonationFormSettingsProvider = ({value, children}: PropTypes) => {
-    return (
-        <StoreContext.Provider value={value}>
-            {children}
-        </StoreContext.Provider>
-    );
+    return <StoreContext.Provider value={value}>{children}</StoreContext.Provider>;
 };
 
 const useDonationFormSettings = () => useContext<PropTypes['value']>(StoreContext);

src/DonationForms/resources/registrars/templates/layouts/Form.tsx

@@ -2,6 +2,8 @@ import type {FormProps} from '@givewp/forms/propTypes';
 import {__} from '@wordpress/i18n';
 
 export default function Form({children, formProps, formError, isSubmitting}: FormProps) {
+    const {donateButtonCaption} = window.givewp.form.hooks.useDonationFormSettings();
+
     return (
         <form {...formProps}>
             {children}
@@ -13,7 +15,7 @@ export default function Form({children, formProps, formError, isSubmitting}: For
             )}
             <section className="givewp-layouts givewp-layouts-section">
                 <button type="submit" disabled={isSubmitting} aria-busy={isSubmitting}>
-                    {isSubmitting ? __('Submitting…', 'give') : __('Donate', 'give')}
+                    {isSubmitting ? __('Submitting…', 'give') : donateButtonCaption}
                 </button>
             </section>
         </form>

src/FormBuilder/resources/js/form-builder/src/components/sidebar/Primary/index.tsx

@@ -5,6 +5,7 @@ import TabPanel from '../TabPanel';
 
 import {
     CustomStyleSettings,
+    DonateButtonSettings,
     DonationConfirmation,
     DonationGoalSettings,
     EmailSettings,
@@ -38,6 +39,7 @@ const tabs = [
                     )}
                 />
                 <FormSummarySettings />
+                <DonateButtonSettings />
                 <DonationGoalSettings />
                 <RegistrationSettings />
                 <DonationConfirmation />

src/FormBuilder/resources/js/form-builder/src/settings/donate-button/index.tsx

@@ -0,0 +1,23 @@
+import {__} from '@wordpress/i18n';
+import {PanelBody, PanelRow, TextControl} from '@wordpress/components';
+import {setFormSettings, useFormState, useFormStateDispatch} from '@givewp/form-builder/stores/form-state';
+
+export default function DonateButton() {
+    const {
+        settings: {donateButtonCaption},
+    } = useFormState();
+    const dispatch = useFormStateDispatch();
+
+    return (
+        <PanelBody title={__('Donate Button', 'give')} initialOpen={false}>
+            <PanelRow>
+                <TextControl
+                    label={__('Button caption', 'give')}
+                    help={__('Enter the text you want to display on the donation button.', 'give')}
+                    value={donateButtonCaption}
+                    onChange={(value) => dispatch(setFormSettings({donateButtonCaption: value}))}
+                />
+            </PanelRow>
+        </PanelBody>
+    );
+}

src/FormBuilder/resources/js/form-builder/src/settings/index.ts

@@ -7,8 +7,10 @@ import CustomStyleSettings from './styles';
 import DonationConfirmation from './donation-confirmation';
 import FormGridSettings from './form-grid';
 import EmailSettings from './email';
+import DonateButtonSettings from './donate-button';
 
 export {
+    DonateButtonSettings,
     DonationGoalSettings,
     RegistrationSettings,
     FormSummarySettings,

src/FormBuilder/resources/js/form-builder/src/types/formSettings.ts

@@ -1,5 +1,5 @@
-import {FormStatus} from "@givewp/form-builder/types/formStatus";
-import {EmailTemplateOption} from "@givewp/form-builder/types/emailTemplateOption";
+import {FormStatus} from '@givewp/form-builder/types/formStatus';
+import {EmailTemplateOption} from '@givewp/form-builder/types/emailTemplateOption';
 
 /**
  * @since 3.0.0
@@ -36,4 +36,5 @@ export type FormSettings = {
     formGridHideDocumentationLink: boolean;
     offlineDonationsCustomize: boolean;
     offlineDonationsInstructions: string;
+    donateButtonCaption: string;
 };