From 2ce51baa15f299a3bdb86a4c4426b9fb92897c0c Mon Sep 17 00:00:00 2001
From: Jon Waldstein <jon@givewp.com>
Date: Fri, 24 Jan 2025 13:38:37 -0500
Subject: [PATCH] Feature: hide gateways when donation amount is zero (#7599)

Co-authored-by: Jon Waldstein <jonwaldstein@jwaldstein-mbp.mynetworksettings.com>
Co-authored-by: Jon Waldstein <jonwaldstein@jwaldstein-MacBook-Pro.local>
---
 .../registrars/templates/fields/Gateways.tsx  | 66 ++++++++++++++-----
 .../styles/components/_gateways.scss          | 18 +++++
 2 files changed, 69 insertions(+), 15 deletions(-)

diff --git a/src/DonationForms/resources/registrars/templates/fields/Gateways.tsx b/src/DonationForms/resources/registrars/templates/fields/Gateways.tsx
index 8c4bd460f2..f8ef1da5f5 100644
--- a/src/DonationForms/resources/registrars/templates/fields/Gateways.tsx
+++ b/src/DonationForms/resources/registrars/templates/fields/Gateways.tsx
@@ -6,24 +6,50 @@ import {createInterpolateElement, useEffect, useMemo} from '@wordpress/element';
 import cx from 'classnames';
 
 /**
- * @since 3.0.0
+ * @unreleased
  */
-function GatewayMissingMessage({currencyNotSupported}: {currencyNotSupported?: boolean}) {
+function EmptyMessage({message}: {message: string}) {
     return (
-        <em>
-            {currencyNotSupported
-                ? __(
-                      'The selected currency is not supported by any of the available payment gateways.  Please select a different currency or contact the site administrator for assistance.',
-                      'give'
-                  )
-                : __(
-                      'No gateways have been enabled yet.  To get started accepting donations, enable a compatible payment gateway in your settings.',
-                      'give'
-                  )}
-        </em>
+        <div className="givewp-fields-gateways__gateway--empty">
+            <p>
+                <b>{__('Payment options are not available:', 'give')}</b>
+            </p>
+
+            <p>
+                <em>{message}</em>
+            </p>
+        </div>
     );
 }
 
+/**
+ * @unreleased updated message to account for minimum donation amount
+ * @since 3.0.0
+ */
+function GatewayMissingMessage({
+    donationAmountMinimumNotReached,
+    currencyNotSupported,
+}: {
+    donationAmountMinimumNotReached?: boolean;
+    currencyNotSupported?: boolean;
+}) {
+    let message = __(
+        'No gateways have been enabled yet.  To get started accepting donations, enable a compatible payment gateway in your settings.',
+        'give'
+    );
+
+    if (donationAmountMinimumNotReached) {
+        message = __('Donation amount must be greater than zero.', 'give');
+    } else if (currencyNotSupported) {
+        message = __(
+            'The selected currency is not supported by any of the available payment gateways.  Please select a different currency or contact the site administrator for assistance.',
+            'give'
+        );
+    }
+
+    return <EmptyMessage message={message} />;
+}
+
 /**
  * @since 3.0.0
  */
@@ -82,11 +108,14 @@ export default function Gateways({isTestMode, defaultValue, inputProps, gateways
     const {setValue} = useFormContext();
     const {currencySwitcherSettings} = useDonationFormSettings();
 
+    const donationAmount = useWatch({name: 'amount'});
     const currency = useWatch({name: 'currency'});
     const activeGatewayId = useWatch({name: 'gatewayId'});
 
+    const donationAmountMinimumNotReached = donationAmount === 0;
+
     // filter gateway options if currency switcher settings are present
-    const gatewayOptions = useMemo(() => {
+    const gatewayOptionsWithCurrencySettings = useMemo(() => {
         if (currencySwitcherSettings.length <= 1) {
             return gateways;
         }
@@ -100,6 +129,10 @@ export default function Gateways({isTestMode, defaultValue, inputProps, gateways
         return gateways.filter(({id}) => currencySwitcherSetting.gateways.includes(id));
     }, [currency]);
 
+    const gatewayOptions = useMemo(() => {
+        return donationAmountMinimumNotReached ? [] : gatewayOptionsWithCurrencySettings;
+    }, [donationAmountMinimumNotReached, gatewayOptionsWithCurrencySettings]);
+
     // reset the default /selected gateway based on the gateway options available
     useEffect(() => {
         if (gatewayOptions.length > 0) {
@@ -129,7 +162,10 @@ export default function Gateways({isTestMode, defaultValue, inputProps, gateways
                     </ul>
                 </>
             ) : (
-                <GatewayMissingMessage currencyNotSupported={currencySwitcherSettings.length > 1} />
+                <GatewayMissingMessage
+                    donationAmountMinimumNotReached={donationAmountMinimumNotReached}
+                    currencyNotSupported={gatewayOptionsWithCurrencySettings.length > 1}
+                />
             )}
 
             <ErrorMessage
diff --git a/src/DonationForms/resources/styles/components/_gateways.scss b/src/DonationForms/resources/styles/components/_gateways.scss
index 48128995ce..401fc00efe 100644
--- a/src/DonationForms/resources/styles/components/_gateways.scss
+++ b/src/DonationForms/resources/styles/components/_gateways.scss
@@ -64,6 +64,24 @@
             display: block;
         }
 
+        &--empty {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            border-style: solid;
+            border-width: 1px;
+            border-color: var(--givewp-red-500);
+            padding: var(--givewp-spacing-8) var(--givewp-spacing-12);
+            border-radius: var(--givewp-rounded-4);
+            font-size: var(--givewp-font-weight-paragraph-md);
+            min-height: 100px;
+            p {
+                text-align: center;
+                margin-bottom: 0;
+            }
+        }
+
         &--test-gateway {
             .no-fields {
                 display: flex;