Fix bug: unable to show payment modal for stripe

app/frontend/src/javascript/components/payment-schedule/payment-schedules-table.tsx

@@ -1,4 +1,4 @@
-import React, { ReactEventHandler, useState } from 'react';
+import React, { ReactEventHandler, useState, useEffect, ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Loader } from '../base/loader';
 import _ from 'lodash';
@@ -11,6 +11,8 @@ import {
 import FormatLib from '../../lib/format';
 import { PaymentScheduleItemActions, TypeOnce } from './payment-schedule-item-actions';
 import { StripeElements } from '../payment/stripe/stripe-elements';
+import SettingAPI from '../../api/setting';
+import { Setting, SettingName } from '../../models/setting';
 
 interface PaymentSchedulesTableProps {
   paymentSchedules: Array<PaymentSchedule>,
@@ -35,6 +37,13 @@ const PaymentSchedulesTableComponent: React.FC<PaymentSchedulesTableProps> = ({
     [TypeOnce.CardUpdate, new Map()],
     [TypeOnce.UpdatePaymentMean, new Map()]
   ]));
+  const [gateway, setGateway] = useState<Setting>(null);
+
+  useEffect(() => {
+    SettingAPI.get(SettingName.PaymentGateway)
+      .then(setting => setGateway(setting))
+      .catch(error => onError(error));
+  }, []);
 
   /**
    * Check if the requested payment schedule is displayed with its deadlines (PaymentScheduleItem) or without them
@@ -110,9 +119,8 @@ const PaymentSchedulesTableComponent: React.FC<PaymentSchedulesTableProps> = ({
     refreshList();
   };
 
+  const renderPaymentSchedulesTable = (): ReactElement => {
     return (
-    <div>
-      <StripeElements>
       <table className="schedules-table">
         <thead>
           <tr>
@@ -177,9 +185,32 @@ const PaymentSchedulesTableComponent: React.FC<PaymentSchedulesTableProps> = ({
           </tr>)}
         </tbody>
       </table>
+    );
+  };
+
+  /**
+   * Determine which gateway is enabled and return the appropriate payment schedules
+   */
+  if (gateway === null) return <div/>;
+
+  switch (gateway.value) {
+    case 'stripe':
+      return (
+        <StripeElements>
+          {renderPaymentSchedulesTable()}
         </StripeElements>
+      );
+    case 'payzen':
+      return (
+        <div>
+          {renderPaymentSchedulesTable()}
         </div>
       );
+    case null:
+    default:
+      console.error(`[PaymentSchedulesTable] Unimplemented gateway: ${gateway.value}`);
+      return <div />;
+  }
 };
 PaymentSchedulesTableComponent.defaultProps = { showCustomer: false };
 

app/frontend/src/javascript/components/payment/stripe/stripe-elements.tsx

@@ -27,7 +27,6 @@ export const StripeElements: React.FC = memo(({ children }) => {
       {stripe && <Elements stripe={stripe}>
         {children}
       </Elements>}
-      {!stripe && children}
     </div>
   );
 });