feature: add notice with link to settings

impress-org · Aug 23, 2023 · b35aeba · b35aeba
1 parent 638f7a2
commit b35aeba
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 8 deletions.
diff --git a/src/FormBuilder/resources/js/form-builder/src/blocks/fields/payment-gateways/Edit.tsx b/src/FormBuilder/resources/js/form-builder/src/blocks/fields/payment-gateways/Edit.tsx
@@ -32,9 +32,7 @@ export default function Edit(props: BlockEditProps<any>) {
     return (
         <>
             {gateways.some((gateway) => gateway.id === 'stripe_payment_element' && gateway.enabled) &&
-                attributes.stripeAccounts && (
-                    <StripeAccounts attributes={attributes} setAttributes={setAttributes} gateways={gateways} />
-                )}
+                attributes.stripeAccounts && <StripeAccounts {...props} />}
 
             <div
                 style={{

diff --git a/...rmBuilder/resources/js/form-builder/src/blocks/fields/payment-gateways/StripeAccounts.tsx b/...rmBuilder/resources/js/form-builder/src/blocks/fields/payment-gateways/StripeAccounts.tsx
@@ -1,6 +1,7 @@
 import {__} from '@wordpress/i18n';
 import {InspectorControls} from '@wordpress/block-editor';
-import {PanelBody, ToggleControl} from '@wordpress/components';
+import {Notice, PanelBody, ToggleControl} from '@wordpress/components';
+import {getFormBuilderWindowData} from '@givewp/form-builder/common/getWindowData';
 
 const MOCK = {
     default: null,
@@ -9,14 +10,16 @@ const MOCK = {
         2: __('Account 2', 'give'),
     },
 };
-export default function StripeAccounts({attributes, setAttributes, gateways}) {
-    const {stripeAccounts} = attributes;
+
+export default function StripeAccounts({attributes: {stripeAccounts}, setAttributes}) {
+    const {gatewaySettingsUrl} = getFormBuilderWindowData();
+
     const handleSetAttributes = (newAttributes: any) => {
         setAttributes({
             stripeAccounts: {
                 ...stripeAccounts,
-                ...newAttributes
-            }
+                ...newAttributes,
+            },
         });
     };
 
@@ -28,6 +31,22 @@ export default function StripeAccounts({attributes, setAttributes, gateways}) {
                     checked={stripeAccounts.useGlobalDefault}
                     onChange={(value) => handleSetAttributes({useGlobalDefault: value})}
                 />
+                {!MOCK.default && (
+                    <Notice
+                        isDismissible={false}
+                        status="warning"
+                        actions={[
+                            {
+                                label: __('Connect a Stripe account', 'give'),
+                                url: `${gatewaySettingsUrl}&section=stripe-settings&group=accounts`,
+                                variant: 'link',
+                            },
+                        ]}
+                    >
+                        <h4>{__('No default account set', 'give')}</h4>
+                        <p>{__('All donations are processed through the default Stripe account.', 'give')}</p>
+                    </Notice>
+                )}
             </PanelBody>
         </InspectorControls>
     );

diff --git a/src/FormBuilder/resources/js/form-builder/src/styles/_components.scss b/src/FormBuilder/resources/js/form-builder/src/styles/_components.scss
@@ -155,6 +155,29 @@ This creates a consistent separator between the tabs and the rest of the sidebar
     padding-right: 16px;
 }
 
+.components-panel__body .components-notice {
+    color: var(--givewp-grey-700);
+    font-size: 0.75rem;
+    line-height: 1rem;
+    margin-left: 0;
+    margin-right: 0;
+    padding: var(--givewp-spacing-3) var(--givewp-spacing-4);
+
+    .components-notice__content {
+        margin: 0;
+    }
+
+    h4 {
+        color: var(--givewp-grey-900);
+        margin: 0 0 var(--givewp-spacing-2);
+    }
+
+    .components-notice__action.is-link {
+        color: var(--givewp-grey-900);
+        margin-left: 0;
+    }
+}
+
 .givewp-donation-level-control .components-base-control,
 .givewp-donation-level-control .components-base-control__field {
     margin-bottom: 0;