Refactor: Update Terms & Conditions block showInForm display

src/DonationForms/Actions/SanitizeDonationFormPreviewRequest.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace Give\DonationForms\Actions;
+
+class SanitizeDonationFormPreviewRequest
+{
+    /**
+     * @unreleased
+     */
+    public function __invoke($var)
+    {
+        if (is_array($var)) {
+            return array_map($this, $var);
+        } else {
+            return is_string($var) ? wp_kses_post(wp_unslash($var)) : $var;
+        }
+    }
+}

src/DonationForms/ServiceProvider.php

@@ -5,6 +5,7 @@
 use Exception;
 use Give\DonationForms\Actions\DispatchDonateControllerDonationCreatedListeners;
 use Give\DonationForms\Actions\DispatchDonateControllerSubscriptionCreatedListeners;
+use Give\DonationForms\Actions\SanitizeDonationFormPreviewRequest;
 use Give\DonationForms\Actions\StoreBackwardsCompatibleFormMeta;
 use Give\DonationForms\Blocks\DonationFormBlock\Block as DonationFormBlock;
 use Give\DonationForms\Controllers\DonationConfirmationReceiptViewController;
@@ -110,8 +111,9 @@ private function registerRoutes()
         /**
          * @since 0.1.0
          */
-        Route::post('donation-form-view-preview', static function (array $request) {
-            $routeData = DonationFormPreviewRouteData::fromRequest($request);
+        Route::post('donation-form-view-preview', static function () {
+            $requestData = (new SanitizeDonationFormPreviewRequest())($_REQUEST);
+            $routeData = DonationFormPreviewRouteData::fromRequest($requestData);
 
             return give(DonationFormViewController::class)->preview($routeData);
         });

src/DonationForms/resources/registrars/templates/fields/Consent/ConsentModal.tsx

@@ -1,6 +1,6 @@
 import {__} from '@wordpress/i18n';
 import {createPortal} from 'react-dom';
-import {Interweave} from 'interweave';
+import {Markup} from 'interweave';
 import {Button} from '@wordpress/components';
 
 export default function ConsentModal({setShowModal, modalHeading, modalAcceptanceText, agreementText, acceptTerms}) {
@@ -41,7 +41,7 @@ export default function ConsentModal({setShowModal, modalHeading, modalAcceptanc
                 <h2 style={{fontSize: '1.25rem', color: 'var(--givewp-primary-color)'}}>{modalHeading}</h2>
 
                 <div style={{maxHeight: '24rem', marginBottom: '1.5rem', overflowY: 'scroll'}}>
-                    <Interweave content={agreementText} />
+                    <Markup content={agreementText} />
                 </div>
 
                 <div

src/DonationForms/resources/registrars/templates/fields/Consent/index.tsx

@@ -3,14 +3,13 @@ import type {ConsentProps} from '@givewp/forms/propTypes';
 import Checkbox from '../Checkbox';
 import ShowTerms from './ShowTerms';
 import ConsentModal from './ConsentModal';
-import {Interweave} from 'interweave';
+import {Markup} from 'interweave';
 
 export default function ConsentField({
     name,
     ErrorMessage,
     fieldError,
     inputProps,
-    useGlobalSettings,
     checkboxLabel,
     displayType,
     linkText,
@@ -20,7 +19,6 @@ export default function ConsentField({
     agreementText,
 }: ConsentProps) {
     const [showModal, setShowModal] = useState<boolean>(false);
-    const [revealTerms, setRevealTerms] = useState<boolean>(false);
     const {useFormContext} = window.givewp.form.hooks;
     const {setValue} = useFormContext();
 
@@ -29,12 +27,7 @@ export default function ConsentField({
 
     const openTerms = (event) => {
         event.preventDefault();
-
-        if (isModalDisplay) {
-            setShowModal(true);
-        } else if (isFormDisplay) {
-            setRevealTerms(!revealTerms);
-        }
+        setShowModal(true);
     };
 
     const acceptTerms = (event) => {
@@ -46,7 +39,7 @@ export default function ConsentField({
     const Label = () => (
         <>
             <span>{checkboxLabel}</span>&nbsp;
-            {(!isFormDisplay || !revealTerms) && (
+            {!isFormDisplay && (
                 <ShowTerms openTerms={openTerms} displayType={displayType} linkText={linkText} linkUrl={linkUrl} />
             )}
         </>
@@ -59,19 +52,22 @@ export default function ConsentField({
             {isModalDisplay && showModal && (
                 <ConsentModal {...{setShowModal, modalHeading, modalAcceptanceText, agreementText, acceptTerms}} />
             )}
-            {isFormDisplay && revealTerms && (
+
+            {isFormDisplay && (
                 <div
                     style={{
-                        fontSize: '1rem',
+                        marginTop: '1rem',
                         lineHeight: '150%',
-                        maxHeight: '16rem',
+                        maxHeight: '17.5rem',
+                        minHeight: '6.5rem',
                         overflowY: 'scroll',
-                        border: '1px solid #BFBFBF',
+                        border: '1px solid var(--givewp-grey-200, #BFBFBF)',
                         borderRadius: 5,
-                        padding: '8px 12px',
+                        padding: '.5rem 1rem',
+                        background: 'var(--givewp-shades-white, #fff)',
                     }}
                 >
-                    <Interweave content={agreementText} />
+                    <Markup content={agreementText} />
                 </div>
             )}
         </>

src/FormBuilder/ViewModels/FormBuilderViewModel.php

@@ -61,6 +61,10 @@ public function storageData(int $donationFormId): array
             }, apply_filters('give_email_notification_options_metabox_fields', array(), $donationFormId)),
             'emailPreviewURL' => rest_url('givewp/form-builder/email-preview'),
             'emailDefaultAddress' => get_option('admin_email'),
+            'termsAndConditions' => [
+                'checkboxLabel' => give_get_option('agree_to_terms_label'),
+                'agreementText' => give_get_option('agreement_text')
+            ],
         ];
     }
 

src/FormBuilder/resources/js/form-builder/src/blocks/fields/terms-and-conditions/Edit.tsx

@@ -2,19 +2,29 @@ import {
     BaseControl,
     Button,
     CheckboxControl,
+    Icon,
     Modal,
     PanelBody,
     PanelRow,
     SelectControl,
     TextControl,
 } from '@wordpress/components';
+import {moreVertical} from '@wordpress/icons';
 import {useState} from '@wordpress/element';
 import {__} from '@wordpress/i18n';
 import {BlockEditProps} from '@wordpress/blocks';
 import {InspectorControls} from '@wordpress/block-editor';
+import {Markup} from 'interweave';
 
-import {MenuIcon} from '@givewp/form-builder/blocks/fields/terms-and-conditions/Icon';
 import Editor from '@givewp/form-builder/settings/email/template-options/components/editor';
+import GlobalSettingsLink from '@givewp/form-builder/blocks/fields/terms-and-conditions/GlobalSettingsLink';
+import {getFormBuilderData} from '@givewp/form-builder/common/getWindowData';
+
+const DisplayTypeEnum = {
+    SHOW_MODAL_TERMS: 'showModalTerms',
+    SHOW_FORM_TERMS: 'showFormTerms',
+    SHOW_LINK_TERMS: 'showLinkTerms',
+};
 
 export default function Edit({
     attributes: {
@@ -30,29 +40,49 @@ export default function Edit({
     setAttributes,
 }: BlockEditProps<any>) {
     const [showAgreementTextModal, setShowAgreementTextModal] = useState(false);
-    const isModalDisplay = displayType === 'showModalTerms';
-    const isLinkDisplay = displayType === 'showLinkTerms';
+    const globalSettings = getFormBuilderData().termsAndConditions;
+
+    if (useGlobalSettings) {
+        checkboxLabel = globalSettings.checkboxLabel;
+        agreementText = globalSettings.agreementText;
+    }
+
+    const isModalDisplay = displayType === DisplayTypeEnum.SHOW_MODAL_TERMS;
+    const isFormDisplay = displayType === DisplayTypeEnum.SHOW_FORM_TERMS;
+    const isLinkDisplay = displayType === DisplayTypeEnum.SHOW_LINK_TERMS;
 
     return (
         <>
-            <Checkbox label={checkboxLabel} linkText={linkText} />
+            <CheckboxPlaceholder
+                label={checkboxLabel}
+                linkText={linkText}
+                isFormDisplay={isFormDisplay}
+                agreementText={agreementText}
+            />
 
             <InspectorControls>
                 <PanelBody title={__('Field Options', 'give')} initialOpen={true}>
                     <PanelRow>
                         <SelectControl
                             label={__('TERMS AND CONDITIONS', 'give')}
-                            onChange={(value) => setAttributes({useGlobalSettings: !value})}
+                            onChange={() => setAttributes({useGlobalSettings: !useGlobalSettings})}
                             value={useGlobalSettings}
                             options={[
                                 {label: __('Global', 'give'), value: 'true'},
                                 {label: __('Customize', 'give'), value: 'false'},
                             ]}
-                            help={''}
                         />
                     </PanelRow>
 
-                    {useGlobalSettings === false && (
+                    {useGlobalSettings && (
+                        <GlobalSettingsLink
+                            href={
+                                '/wp-admin/edit.php?post_type=give_forms&page=give-settings&tab=display&section=terms-and-conditions'
+                            }
+                        />
+                    )}
+
+                    {!useGlobalSettings && (
                         <>
                             <PanelRow>
                                 <TextControl
@@ -67,21 +97,28 @@ export default function Edit({
                                     onChange={(value) => setAttributes({displayType: value})}
                                     value={displayType}
                                     options={[
-                                        {label: __('Show terms in modal', 'give'), value: 'showModalTerms'},
-                                        {label: __('Show terms in form', 'give'), value: 'showFormTerms'},
-                                        {label: __('Link to terms', 'give'), value: 'showLinkTerms'},
+                                        {
+                                            label: __('Show terms in modal', 'give'),
+                                            value: DisplayTypeEnum.SHOW_MODAL_TERMS,
+                                        },
+                                        {
+                                            label: __('Show terms in form', 'give'),
+                                            value: DisplayTypeEnum.SHOW_FORM_TERMS,
+                                        },
+                                        {label: __('Link to terms', 'give'), value: DisplayTypeEnum.SHOW_LINK_TERMS},
                                     ]}
-                                    help={''}
                                 />
                             </PanelRow>
 
-                            <PanelRow>
-                                <TextControl
-                                    label={__('Link Text', 'give')}
-                                    value={linkText}
-                                    onChange={(value) => setAttributes({linkText: value})}
-                                />
-                            </PanelRow>
+                            {isLinkDisplay && (
+                                <PanelRow>
+                                    <TextControl
+                                        label={__('Link Text', 'give')}
+                                        value={linkText}
+                                        onChange={(value) => setAttributes({linkText: value})}
+                                    />
+                                </PanelRow>
+                            )}
 
                             {isLinkDisplay && (
                                 <PanelRow>
@@ -109,13 +146,17 @@ export default function Edit({
                                                 justifyContent: 'space-between',
                                             }}
                                         >
-                                            {__('Agreement text')}
+                                            <span>{__('Agreement text')}</span>
                                             <Button
-                                                style={{background: 'transparent', verticalAlign: 'center'}}
+                                                style={{
+                                                    color: showAgreementTextModal ? '#ffffff' : ' #1e1e1e',
+                                                    background: showAgreementTextModal ? '#3D5A66' : 'transparent',
+                                                    verticalAlign: 'center',
+                                                }}
                                                 variant={'primary'}
                                                 onClick={() => setShowAgreementTextModal(true)}
                                             >
-                                                <MenuIcon />
+                                                <Icon icon={moreVertical} />
                                             </Button>
                                         </div>
                                     </BaseControl>
@@ -161,29 +202,58 @@ export default function Edit({
     );
 }
 
-function Checkbox({label, linkText}) {
+type CheckboxPlaceholderProps = {
+    label: string;
+    linkText: string;
+    isFormDisplay: boolean;
+    agreementText: string;
+};
+
+function CheckboxPlaceholder({label, linkText, isFormDisplay, agreementText}: CheckboxPlaceholderProps) {
     return (
-        <div
-            style={{
-                display: 'flex',
-                justifyContent: 'flex-start',
-                alignItems: 'center',
-                gap: 5,
-                width: 'fit-content',
-                border: 'none',
-            }}
-        >
-            <CheckboxControl label={label} onChange={null} disabled={true} />
-
-            <span
+        <div style={{display: 'block'}}>
+            <div
                 style={{
-                    minWidth: 'fit-content',
-                    color: 'var(--givewp-grey-80)',
-                    fontSize: '1rem',
+                    display: isFormDisplay ? 'block' : 'inline-flex',
+                    justifyContent: 'flex-start',
+                    alignItems: 'center',
+                    gap: 5,
+                    border: 'none',
                 }}
             >
-                {linkText}
-            </span>
+                <CheckboxControl label={label} onChange={null} disabled={true} />
+
+                {isFormDisplay && (
+                    <div
+                        style={{
+                            marginTop: '1rem',
+                            lineHeight: '150%',
+                            maxHeight: '17.5rem',
+                            minHeight: '6.5rem',
+                            overflowY: 'scroll',
+                            border: '1px solid var(--givewp-grey-200, #BFBFBF)',
+                            borderRadius: 5,
+                            padding: '0 1rem',
+                            background: 'var(--givewp-shades-white, #fff)',
+                        }}
+                    >
+                        <Markup content={agreementText} />
+                    </div>
+                )}
+
+                {!isFormDisplay && (
+                    <div
+                        style={{
+                            display: 'inline-block',
+                            minWidth: 'fit-content',
+                            color: 'var(--givewp-grey-80), #595959',
+                            fontSize: '1rem',
+                        }}
+                    >
+                        {linkText}
+                    </div>
+                )}
+            </div>
         </div>
     );
 }

src/FormBuilder/resources/js/form-builder/src/blocks/fields/terms-and-conditions/GlobalSettingsLink.tsx

@@ -0,0 +1,22 @@
+import {__} from '@wordpress/i18n';
+
+type GlobalSettingsLinkProps = {
+    href: string;
+};
+
+export default function GlobalSettingsLink({href}: GlobalSettingsLinkProps) {
+    return (
+        <p
+            style={{
+                color: '#595959',
+                fontStyle: 'SF Pro Text',
+                fontSize: '0.75rem',
+                lineHeight: '140%',
+                fontWeight: 400,
+            }}
+        >
+            {__(' Go to the settings to change the ')}
+            <a href={href}>{__('global options.')}</a>
+        </p>
+    );
+}