From f03c57029cf783d35d9d42e9f7a278a859de6f4b Mon Sep 17 00:00:00 2001 From: Joshua Dinh <75056371+JoshuaHungDinh@users.noreply.github.com> Date: Thu, 24 Aug 2023 13:55:08 -0700 Subject: [PATCH] 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 | 15 +++++++++--- .../MultiStepForm/components/SubmitButton.tsx | 10 ++++---- .../app/store/form-settings/index.tsx | 7 ++---- .../registrars/templates/layouts/Form.tsx | 4 +++- .../src/components/sidebar/Primary/index.tsx | 2 ++ .../src/settings/donate-button/index.tsx | 23 +++++++++++++++++++ .../js/form-builder/src/settings/index.ts | 2 ++ .../js/form-builder/src/types/formSettings.ts | 5 ++-- 8 files changed, 51 insertions(+), 17 deletions(-) create mode 100644 src/FormBuilder/resources/js/form-builder/src/settings/donate-button/index.tsx diff --git a/src/DonationForms/Properties/FormSettings.php b/src/DonationForms/Properties/FormSettings.php index f56e8c3523..345b774e55 100644 --- a/src/DonationForms/Properties/FormSettings.php +++ b/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, ] ) ); diff --git a/src/DonationForms/resources/app/form/MultiStepForm/components/SubmitButton.tsx b/src/DonationForms/resources/app/form/MultiStepForm/components/SubmitButton.tsx index 1339e47a6c..1cc35a7938 100644 --- a/src/DonationForms/resources/app/form/MultiStepForm/components/SubmitButton.tsx +++ b/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 ( ); } diff --git a/src/DonationForms/resources/app/store/form-settings/index.tsx b/src/DonationForms/resources/app/store/form-settings/index.tsx index f0f02751c1..c09d7aacf4 100644 --- a/src/DonationForms/resources/app/store/form-settings/index.tsx +++ b/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 ( - - {children} - - ); + return {children}; }; const useDonationFormSettings = () => useContext(StoreContext); diff --git a/src/DonationForms/resources/registrars/templates/layouts/Form.tsx b/src/DonationForms/resources/registrars/templates/layouts/Form.tsx index 7aa815c639..904c6f8fb3 100644 --- a/src/DonationForms/resources/registrars/templates/layouts/Form.tsx +++ b/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 (
{children} @@ -13,7 +15,7 @@ export default function Form({children, formProps, formError, isSubmitting}: For )}
diff --git a/src/FormBuilder/resources/js/form-builder/src/components/sidebar/Primary/index.tsx b/src/FormBuilder/resources/js/form-builder/src/components/sidebar/Primary/index.tsx index de2eae920b..82124c43e0 100644 --- a/src/FormBuilder/resources/js/form-builder/src/components/sidebar/Primary/index.tsx +++ b/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 = [ )} /> + diff --git a/src/FormBuilder/resources/js/form-builder/src/settings/donate-button/index.tsx b/src/FormBuilder/resources/js/form-builder/src/settings/donate-button/index.tsx new file mode 100644 index 0000000000..ed646ae7b3 --- /dev/null +++ b/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 ( + + + dispatch(setFormSettings({donateButtonCaption: value}))} + /> + + + ); +} diff --git a/src/FormBuilder/resources/js/form-builder/src/settings/index.ts b/src/FormBuilder/resources/js/form-builder/src/settings/index.ts index 68ccb3c9a0..5f545eed0a 100644 --- a/src/FormBuilder/resources/js/form-builder/src/settings/index.ts +++ b/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, diff --git a/src/FormBuilder/resources/js/form-builder/src/types/formSettings.ts b/src/FormBuilder/resources/js/form-builder/src/types/formSettings.ts index 72b97c7182..0b9e86861c 100644 --- a/src/FormBuilder/resources/js/form-builder/src/types/formSettings.ts +++ b/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; };