Feature: Add additional gateway notice (#7477)

src/FormBuilder/Routes/RegisterFormBuilderPageRoute.php

@@ -157,6 +157,14 @@ public function renderPage()
             'isDismissed' => get_user_meta(get_current_user_id(), 'givewp-goal-notice-dismissed', true),
         ]);
 
+        /**
+         * @unreleased
+         */
+        wp_localize_script('@givewp/form-builder/script', 'additionalPaymentGatewaysNotificationData', [
+            'actionUrl' => admin_url('admin-ajax.php?action=givewp_additional_payment_gateways_hide_notice'),
+            'isDismissed' => get_user_meta(get_current_user_id(), 'givewp-additional-payment-gateways-notice-dismissed', true),
+        ]);
+
         View::render('FormBuilder.admin-form-builder');
     }
 

src/FormBuilder/ServiceProvider.php

@@ -88,5 +88,12 @@ protected function setupOnboardingTour()
         add_action('wp_ajax_givewp_goal_hide_notice', static function () {
             add_user_meta(get_current_user_id(), 'givewp-goal-notice-dismissed', time(), true);
         });
+
+        /**
+         * @unreleased
+         */
+        add_action('wp_ajax_givewp_additional_payment_gateways_hide_notice', static function () {
+            add_user_meta(get_current_user_id(), 'givewp-additional-payment-gateways-notice-dismissed', time(), true);
+        });
     }
 }

src/FormBuilder/resources/js/form-builder/src/blocks/fields/payment-gateways/Edit.tsx

@@ -2,6 +2,10 @@ import {ReactNode} from 'react';
 import {BlockEditProps} from '@wordpress/blocks';
 import {getFormBuilderWindowData} from '@givewp/form-builder/common/getWindowData';
 import {applyFilters} from '@wordpress/hooks';
+import {InspectorControls} from "@wordpress/block-editor";
+import {__} from "@wordpress/i18n";
+import {Icon} from '@wordpress/components';
+import {external} from "@wordpress/icons";
 
 const GatewayItem = ({label, icon}: {label: string; icon: ReactNode}) => {
     return (
@@ -62,6 +66,20 @@ export default function Edit(props: BlockEditProps<any>) {
                         />
                     ))}
             </div>
+            <InspectorControls>
+                <div style={{
+                    marginTop: '-8px', // Adjust spacing between block card and link.
+                    borderBottom: '1px solid #e0e0e0', // Emulate the border between block card and inspector controls.
+                    padding: '0 0 var(--givewp-spacing-4) var(--givewp-spacing-13)' // Align with block card padding.
+                }}>
+                    <a
+                        href={'/wp-admin/edit.php?post_type=give_forms&page=give-settings&tab=gateways&section=gateways-settings&group=v3'}
+                        target="_blank">
+                        <Icon style={{marginRight: '4px'}} icon={external} className='givewp-inspector-notice__externalIcon' />
+                        {__('Enable more payment gateways', 'give')}
+                    </a>
+                </div>
+            </InspectorControls>
         </div>
     );
 }

src/FormBuilder/resources/js/form-builder/src/blocks/fields/payment-gateways/index.tsx

@@ -1,9 +1,13 @@
 import settings from './settings';
 import {FieldBlock} from '@givewp/form-builder/types';
+import {addFilter} from "@wordpress/hooks";
+import withAdditionalPaymentGatewayNotice from './withAdditionalPaymentGatewayNotice';
 
 const paymentGateways: FieldBlock = {
     name: 'givewp/payment-gateways',
     settings,
 };
 
+addFilter('editor.BlockEdit', 'givewp/stripe-payment-element', withAdditionalPaymentGatewayNotice, 999);
+
 export default paymentGateways;

src/FormBuilder/resources/js/form-builder/src/blocks/fields/payment-gateways/withAdditionalPaymentGatewayNotice.tsx

@@ -0,0 +1,51 @@
+import {createHigherOrderComponent} from "@wordpress/compose";
+import {PanelRow} from "@wordpress/components";
+import InspectorNotice from "@givewp/form-builder/components/settings/InspectorNotice";
+import {__} from "@wordpress/i18n";
+import {InspectorControls} from "@wordpress/block-editor";
+import {useState} from "react";
+
+declare const window: {
+    additionalPaymentGatewaysNotificationData: {
+        actionUrl: string;
+        isDismissed: boolean;
+    };
+} & Window;
+
+const AdditionalPaymentGatewaysNotice = () => {
+    const {actionUrl, isDismissed} = window.additionalPaymentGatewaysNotificationData;
+    const [showNotification, setShowNotification] = useState(!window.additionalPaymentGatewaysNotificationData.isDismissed);
+    const onDismissNotification = () => fetch(actionUrl, {method: 'POST'}).then(() => setShowNotification(false))
+
+    return (
+        <InspectorControls>
+            {showNotification && (
+                <PanelRow>
+                    <InspectorNotice
+                        title={__('Additional Payment Gateways', 'give')}
+                        description={__('Enable multiple payment gateways on your forms via the global settings.', 'give')}
+                        helpText={__('Go to payment gateway settings', 'give')}
+                        helpUrl={'/wp-admin/edit.php?post_type=give_forms&page=give-settings&tab=gateways&section=gateways-settings&group=v3'}
+                        onDismiss={onDismissNotification}
+                    />
+                </PanelRow>
+            )}
+        </InspectorControls>
+    )
+}
+
+const withAdditionalPaymentGatewayNotice = createHigherOrderComponent((BlockEdit) => {
+    return (props) => {
+        if (props.name === 'givewp/payment-gateways') {
+            return (
+                <>
+                    <BlockEdit {...props} />
+                    <AdditionalPaymentGatewaysNotice {...props} />
+                </>
+            );
+        }
+        return <BlockEdit {...props} />;
+    };
+}, 'withAdditionalPaymentGatewayNotice');
+
+export default withAdditionalPaymentGatewayNotice;

src/FormBuilder/resources/js/form-builder/src/components/settings/InspectorNotice/index.tsx

@@ -0,0 +1,29 @@
+import {Icon} from "@wordpress/components";
+import {close, external} from "@wordpress/icons";
+import './styles.scss'
+
+/**
+ * @unreleased
+ */
+const InspectorNotice = ({title, description, helpText, helpUrl, onDismiss}) => {
+
+    return (
+        <div className='givewp-inspector-notice__container'>
+            <span className='givewp-inspector-notice__title'>
+                {title}
+                <Icon icon={close} className='givewp-inspector-notice__closeIcon' onClick={onDismiss} />
+            </span>
+            <span>
+                {description}
+            </span>
+            <span>
+                <a href={helpUrl} target="_blank">
+                    <Icon icon={external} className='givewp-inspector-notice__externalIcon' />
+                    {helpText}
+                </a>
+            </span>
+        </div>
+    )
+}
+
+export default InspectorNotice;

src/FormBuilder/resources/js/form-builder/src/components/settings/InspectorNotice/styles.scss

@@ -0,0 +1,36 @@
+.givewp-inspector-notice {
+    &__container {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        padding: 12px;
+        border-radius: 2px;
+        background-color: #f2f2f2;
+        color: #0e0e0e;
+        font-size: 12px;
+        margin: var(--givewp-spacing-4)
+    }
+
+    &__title {
+        font-weight: 600;
+    }
+
+    &__closeIcon {
+        cursor: pointer;
+        height: 16px;
+        width: 16px;
+        position: absolute;
+        right: 12px;
+        top: 12px;
+    }
+
+    &__externalIcon {
+        height: 18px;
+        width: 18px;
+        fill: #2271b1;
+        float: left;
+        margin-top: 2px;
+        margin-right: 8px;
+    }
+}

tests/Unit/FormBuilder/ServiceProviderTest.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace Give\Tests\Unit\FormBuilder;
+
+use Give\Tests\TestCase;
+use Give\Tests\TestTraits\RefreshDatabase;
+
+/**
+ * @unreleased
+ */
+class ServiceProviderTest extends TestCase
+{
+    use RefreshDatabase;
+
+    /**
+     * @unreleased
+     */
+    public function testItDismissesTheAdditionalPaymentGatewaysNotice() {
+
+        $userId = $this->factory()->user->create();
+        wp_set_current_user($userId);
+
+        do_action('wp_ajax_givewp_additional_payment_gateways_hide_notice');
+
+        $this->assertTrue(
+            (bool) get_user_meta($userId, 'givewp-additional-payment-gateways-notice-dismissed', true)
+        );
+    }
+}