Feature: Add support for integrating Blink Payment with the Donor Das…

…hboard (#7632) Co-authored-by: Jon Waldstein <[email protected]>
impress-org · Dec 2, 2024 · a20c9d8 · a20c9d8
1 parent 9f915d2
commit a20c9d8
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 19 deletions.
diff --git a/src/DonorDashboards/App.php b/src/DonorDashboards/App.php
@@ -129,8 +129,9 @@ public function getLoaderTemplatePath()
     /**
      * Enqueue assets for front-end donor dashboards
      *
+     * @unreleased Add action to allow enqueueing additional assets.
+     * @since      2.11.0 Set script translations.
      * @since 2.10.0
-     * @since 2.11.0 Set script translations.
      *
      * @return void
      */
@@ -175,6 +176,8 @@ public function loadAssets()
             [],
             null
         );
+
+        do_action('give_donor_dashboard_enqueue_assets');
     }
 
     /**

diff --git a/src/DonorDashboards/resources/js/app/components/subscription-manager/index.tsx b/src/DonorDashboards/resources/js/app/components/subscription-manager/index.tsx
@@ -23,6 +23,9 @@ import SubscriptionCancelModal from '../subscription-cancel-modal';
  */
 const normalizeAmount = (float, decimals) => Number.parseFloat(float).toFixed(decimals);
 
+/**
+ * @unreleased Add support for hiding amount controls via filter
+ */
 const SubscriptionManager = ({id, subscription}) => {
     const gatewayRef = useRef();
     const [isPauseModalOpen, setIsPauseModalOpen] = useState(false);
@@ -37,6 +40,8 @@ const SubscriptionManager = ({id, subscription}) => {
 
     const subscriptionStatus = subscription.payment.status?.id || subscription.payment.status.label.toLowerCase();
 
+    const showAmountControls = subscription.gateway.can_update;
+    const showPaymentMethodControls = subscription.gateway.can_update_payment_method ?? showAmountControls;
     const showPausingControls =
         subscription.gateway.can_pause && !['Quarterly', 'Yearly'].includes(subscription.payment.frequency);
 
@@ -95,19 +100,23 @@ const SubscriptionManager = ({id, subscription}) => {
 
     return (
         <div className={'give-donor-dashboard__subscription-manager'}>
-            <AmountControl
-                currency={subscription.payment.currency}
-                options={options}
-                max={max}
-                min={min}
-                value={amount}
-                onChange={setAmount}
-            />
-            <PaymentMethodControl
-                forwardedRef={gatewayRef}
-                label={__('Payment Method', 'give')}
-                gateway={subscription.gateway}
-            />
+            {showAmountControls && (
+                <AmountControl
+                    currency={subscription.payment.currency}
+                    options={options}
+                    max={max}
+                    min={min}
+                    value={amount}
+                    onChange={setAmount}
+                />
+            )}
+            {showPaymentMethodControls && (
+                <PaymentMethodControl
+                    forwardedRef={gatewayRef}
+                    label={__('Payment Method', 'give')}
+                    gateway={subscription.gateway}
+                />
+            )}
 
             {loading && <DashboardLoadingSpinner />}
 
@@ -135,7 +144,11 @@ const SubscriptionManager = ({id, subscription}) => {
                     </>
                 )}
 
-                <Button disabled={subscriptionStatus !== 'active'} classnames={subscriptionStatus !== 'active' && 'disabled'} onClick={handleUpdate}>
+                <Button
+                    disabled={subscriptionStatus !== 'active'}
+                    classnames={subscriptionStatus !== 'active' && 'disabled'}
+                    onClick={handleUpdate}
+                >
                     {updated ? (
                         <Fragment>
                             {__('Updated', 'give')} <FontAwesomeIcon icon="check" fixedWidth />

diff --git a/...shboards/resources/js/app/components/subscription-manager/payment-method-control/index.js b/...shboards/resources/js/app/components/subscription-manager/payment-method-control/index.js
@@ -1,10 +1,15 @@
+import React from 'react';
+
 import AuthorizeControl from './authorize-control';
 import SquareControl from './square-control';
 import StripeControl from './stripe-control';
 import CardControl from './card-control';
 
 import './style.scss';
 
+/**
+ * @unreleased Add controller for Blink payment method.
+ */
 const PaymentMethodControl = (props) => {
     switch (props.gateway.id) {
         case 'stripe':
@@ -23,6 +28,11 @@ const PaymentMethodControl = (props) => {
         case 'paypalpro': {
             return <CardControl {...props} />;
         }
+        case 'blink': {
+            // Donor Dashboard currently loads its own version of React so we need to pass it to the component
+            const Element = wp.hooks.applyFilters('give_donor_dashboard_blink_payment_method_control', null, props);
+            return Element && <Element {...props} React={React} />;
+        }
         default: {
             return null;
         }

diff --git a/src/DonorDashboards/resources/js/app/components/subscription-row/index.tsx b/src/DonorDashboards/resources/js/app/components/subscription-row/index.tsx
@@ -6,14 +6,16 @@ import {__} from '@wordpress/i18n';
 import {useWindowSize} from '../../hooks';
 import SubscriptionCancelModal from '../subscription-cancel-modal';
 
-import "./style.scss";
+import './style.scss';
 
 const SubscriptionRow = ({subscription}) => {
     const [isCancelModalOpen, setIsCancelModalOpen] = useState<boolean>(false);
 
     const {width} = useWindowSize();
     const {id, payment, form, gateway} = subscription;
 
+    const gatewayCanUpdateSubscription = gateway.can_update || gateway.can_update_payment_method;
+
     return (
         <div className="give-donor-dashboard-table__row">
             <div className="give-donor-dashboard-table__column">
@@ -52,14 +54,14 @@ const SubscriptionRow = ({subscription}) => {
                         {__('View Subscription', 'give')} <FontAwesomeIcon icon="arrow-right" />
                     </Link>
                 </div>
-                {gateway.can_update && (
+                {gatewayCanUpdateSubscription && (
                     <div className="give-donor-dashboard-table__donation-receipt">
                         <Link to={`/recurring-donations/manage/${id}`}>
                             {__('Manage Subscription', 'give')} <FontAwesomeIcon icon="arrow-right" />
                         </Link>
                     </div>
                 )}
-                {gateway.can_cancel && !gateway.can_update && (
+                {gateway.can_cancel && !gatewayCanUpdateSubscription && (
                     <>
                         {isCancelModalOpen && (
                             <SubscriptionCancelModal
@@ -69,7 +71,12 @@ const SubscriptionRow = ({subscription}) => {
                             />
                         )}
                         <div className="give-donor-dashboard-table__donation-receipt">
-                            <a className={'give-donor-dashboard-table__donation-receipt__cancel'} onClick={() => setIsCancelModalOpen(true)}>{__('Cancel Subscription', 'give')}</a>
+                            <a
+                                className={'give-donor-dashboard-table__donation-receipt__cancel'}
+                                onClick={() => setIsCancelModalOpen(true)}
+                            >
+                                {__('Cancel Subscription', 'give')}
+                            </a>
                         </div>
                     </>
                 )}