[feature]: Display "no payment method available" message if no allowed or configured payment methods are present

packages/venia-ui/i18n/en_US.json

@@ -74,6 +74,8 @@
     "checkoutPage.paymentInformationStep": "3. Payment Information",
     "checkoutPage.paymentMethodStatus": "{selectedPaymentMethod} is not supported for editing.",
     "checkoutPage.paymentSummary": "{cardType} ending in {lastFour}",
+    "checkoutPage.paymentLoadingError": "There was an error loading payments.",
+    "checkoutPage.refreshOrTryAgainLater": "Please refresh or try again later.",
     "checkoutPage.placeOrder": "Place Order",
     "checkoutPage.quantity": "Qty : {quantity}",
     "checkoutPage.quickCheckout": "Quick Checkout When You Return",

packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethods.css

@@ -1,9 +1,9 @@
 .root {
     display: grid;
+    padding: 2rem;
 }
 
 .payment_method {
-    padding: 1.5rem;
     border-bottom: 1px solid rgb(var(--venia-global-color-border));
 }
 
@@ -15,3 +15,9 @@
     font-weight: 600;
     justify-self: start;
 }
+
+.payment_errors {
+    display: grid;
+    gap: 0.5em;
+    color: rgb(var(--venia-global-color-error));
+}

packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethods.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { shape, string, bool, func } from 'prop-types';
 import { RadioGroup } from 'informed';
+import { useIntl } from 'react-intl';
 
 import { usePaymentMethods } from '@magento/peregrine/lib/talons/CheckoutPage/PaymentInformation/usePaymentMethods';
 
@@ -19,6 +20,8 @@ const PaymentMethods = props => {
         shouldSubmit
     } = props;
 
+    const { formatMessage } = useIntl();
+
     const classes = mergeClasses(defaultClasses, propClasses);
 
     const talonProps = usePaymentMethods({
@@ -36,37 +39,56 @@ const PaymentMethods = props => {
         return null;
     }
 
-    const radios = availablePaymentMethods.map(({ code, title }) => {
-        // If we don't have an implementation for a method type, ignore it.
-        if (!Object.keys(payments).includes(code)) {
-            return;
-        }
-
-        const isSelected = currentSelectedPaymentMethod === code;
-        const PaymentMethodComponent = payments[code];
-        const renderedComponent = isSelected ? (
-            <PaymentMethodComponent
-                onPaymentSuccess={onPaymentSuccess}
-                onPaymentError={onPaymentError}
-                resetShouldSubmit={resetShouldSubmit}
-                shouldSubmit={shouldSubmit}
-            />
-        ) : null;
+    const radios = availablePaymentMethods
+        .map(({ code, title }) => {
+            // If we don't have an implementation for a method type, ignore it.
+            if (!Object.keys(payments).includes(code)) {
+                return;
+            }
 
-        return (
-            <div key={code} className={classes.payment_method}>
-                <Radio
-                    label={title}
-                    value={code}
-                    classes={{
-                        label: classes.radio_label
-                    }}
-                    checked={isSelected}
+            const isSelected = currentSelectedPaymentMethod === code;
+            const PaymentMethodComponent = payments[code];
+            const renderedComponent = isSelected ? (
+                <PaymentMethodComponent
+                    onPaymentSuccess={onPaymentSuccess}
+                    onPaymentError={onPaymentError}
+                    resetShouldSubmit={resetShouldSubmit}
+                    shouldSubmit={shouldSubmit}
                 />
-                {renderedComponent}
-            </div>
-        );
-    });
+            ) : null;
+
+            return (
+                <div key={code} className={classes.payment_method}>
+                    <Radio
+                        label={title}
+                        value={code}
+                        classes={{
+                            label: classes.radio_label
+                        }}
+                        checked={isSelected}
+                    />
+                    {renderedComponent}
+                </div>
+            );
+        })
+        .filter(paymentMethod => !!paymentMethod);
+
+    const noPaymentMethodMessage = !radios.length ? (
+        <div className={classes.payment_errors}>
+            <span>
+                {formatMessage({
+                    id: 'checkoutPage.paymentLoadingError',
+                    defaultMessage: 'There was an error loading payments.'
+                })}
+            </span>
+            <span>
+                {formatMessage({
+                    id: 'checkoutPage.refreshOrTryAgainLater',
+                    defaultMessage: 'Please refresh or try again later.'
+                })}
+            </span>
+        </div>
+    ) : null;
 
     return (
         <div className={classes.root}>
@@ -76,6 +98,7 @@ const PaymentMethods = props => {
             >
                 {radios}
             </RadioGroup>
+            {noPaymentMethodMessage}
         </div>
     );
 };