From 97f7a0aac89121990972b26ae999195b127266ff Mon Sep 17 00:00:00 2001
From: Du Peng <gnepud@gmail.com>
Date: Fri, 1 Apr 2022 16:16:32 +0200
Subject: [PATCH] Fix bug: unable to show payment modal for stripe

---
 .../payment-schedules-table.tsx               | 173 +++++++++++-------
 .../payment/stripe/stripe-elements.tsx        |   1 -
 2 files changed, 102 insertions(+), 72 deletions(-)

diff --git a/app/frontend/src/javascript/components/payment-schedule/payment-schedules-table.tsx b/app/frontend/src/javascript/components/payment-schedule/payment-schedules-table.tsx
index b36a40335..9164c9555 100644
--- a/app/frontend/src/javascript/components/payment-schedule/payment-schedules-table.tsx
+++ b/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,76 +119,98 @@ const PaymentSchedulesTableComponent: React.FC<PaymentSchedulesTableProps> = ({
     refreshList();
   };
 
-  return (
-    <div>
-      <StripeElements>
-        <table className="schedules-table">
-          <thead>
-            <tr>
-              <th className="w-35" />
-              <th className="w-200">{t('app.shared.schedules_table.schedule_num')}</th>
-              <th className="w-200">{t('app.shared.schedules_table.date')}</th>
-              <th className="w-120">{t('app.shared.schedules_table.price')}</th>
-              {showCustomer && <th className="w-200">{t('app.shared.schedules_table.customer')}</th>}
-              <th className="w-200"/>
-            </tr>
-          </thead>
-          <tbody>
-            {paymentSchedules.map(p => <tr key={p.id}>
-              <td colSpan={showCustomer ? 6 : 5}>
-                <table className="schedules-table-body">
-                  <tbody>
-                    <tr>
-                      <td className="w-35 row-header" onClick={togglePaymentScheduleDetails(p.id)}>{expandCollapseIcon(p.id)}</td>
-                      <td className="w-200">{p.reference}</td>
-                      <td className="w-200">{FormatLib.date(_.minBy(p.items, 'due_date').due_date)}</td>
-                      <td className="w-120">{FormatLib.price(p.total)}</td>
-                      {showCustomer && <td className="w-200">{p.user.name}</td>}
-                      <td className="w-200">{downloadScheduleButton(p.id)}</td>
-                    </tr>
-                    <tr style={{ display: statusDisplay(p.id) }}>
-                      <td className="w-35" />
-                      <td colSpan={showCustomer ? 5 : 4}>
-                        <div>
-                          <table className="schedule-items-table">
-                            <thead>
-                              <tr>
-                                <th className="w-120">{t('app.shared.schedules_table.deadline')}</th>
-                                <th className="w-120">{t('app.shared.schedules_table.amount')}</th>
-                                <th className="w-200">{t('app.shared.schedules_table.state')}</th>
-                                <th className="w-200" />
-                              </tr>
-                            </thead>
-                            <tbody>
-                              {_.orderBy(p.items, 'due_date').map(item => <tr key={item.id}>
-                                <td>{FormatLib.date(item.due_date)}</td>
-                                <td>{FormatLib.price(item.amount)}</td>
-                                <td>{formatState(item, p)}</td>
-                                <td>
-                                  <PaymentScheduleItemActions paymentScheduleItem={item}
-                                    paymentSchedule={p}
-                                    onError={onError}
-                                    onSuccess={refreshSchedulesTable}
-                                    onCardUpdateSuccess={onCardUpdateSuccess}
-                                    operator={operator}
-                                    displayOnceMap={displayOnceMap}
-                                    show={isExpanded(p.id)}/>
-                                </td>
-                              </tr>)}
-                            </tbody>
-                          </table>
-                        </div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </td>
-            </tr>)}
-          </tbody>
-        </table>
-      </StripeElements>
-    </div>
-  );
+  const renderPaymentSchedulesTable = (): ReactElement => {
+    return (
+      <table className="schedules-table">
+        <thead>
+          <tr>
+            <th className="w-35" />
+            <th className="w-200">{t('app.shared.schedules_table.schedule_num')}</th>
+            <th className="w-200">{t('app.shared.schedules_table.date')}</th>
+            <th className="w-120">{t('app.shared.schedules_table.price')}</th>
+            {showCustomer && <th className="w-200">{t('app.shared.schedules_table.customer')}</th>}
+            <th className="w-200"/>
+          </tr>
+        </thead>
+        <tbody>
+          {paymentSchedules.map(p => <tr key={p.id}>
+            <td colSpan={showCustomer ? 6 : 5}>
+              <table className="schedules-table-body">
+                <tbody>
+                  <tr>
+                    <td className="w-35 row-header" onClick={togglePaymentScheduleDetails(p.id)}>{expandCollapseIcon(p.id)}</td>
+                    <td className="w-200">{p.reference}</td>
+                    <td className="w-200">{FormatLib.date(_.minBy(p.items, 'due_date').due_date)}</td>
+                    <td className="w-120">{FormatLib.price(p.total)}</td>
+                    {showCustomer && <td className="w-200">{p.user.name}</td>}
+                    <td className="w-200">{downloadScheduleButton(p.id)}</td>
+                  </tr>
+                  <tr style={{ display: statusDisplay(p.id) }}>
+                    <td className="w-35" />
+                    <td colSpan={showCustomer ? 5 : 4}>
+                      <div>
+                        <table className="schedule-items-table">
+                          <thead>
+                            <tr>
+                              <th className="w-120">{t('app.shared.schedules_table.deadline')}</th>
+                              <th className="w-120">{t('app.shared.schedules_table.amount')}</th>
+                              <th className="w-200">{t('app.shared.schedules_table.state')}</th>
+                              <th className="w-200" />
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {_.orderBy(p.items, 'due_date').map(item => <tr key={item.id}>
+                              <td>{FormatLib.date(item.due_date)}</td>
+                              <td>{FormatLib.price(item.amount)}</td>
+                              <td>{formatState(item, p)}</td>
+                              <td>
+                                <PaymentScheduleItemActions paymentScheduleItem={item}
+                                  paymentSchedule={p}
+                                  onError={onError}
+                                  onSuccess={refreshSchedulesTable}
+                                  onCardUpdateSuccess={onCardUpdateSuccess}
+                                  operator={operator}
+                                  displayOnceMap={displayOnceMap}
+                                  show={isExpanded(p.id)}/>
+                              </td>
+                            </tr>)}
+                          </tbody>
+                        </table>
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </td>
+          </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 };
 
diff --git a/app/frontend/src/javascript/components/payment/stripe/stripe-elements.tsx b/app/frontend/src/javascript/components/payment/stripe/stripe-elements.tsx
index 7d6f1f07b..68a912733 100644
--- a/app/frontend/src/javascript/components/payment/stripe/stripe-elements.tsx
+++ b/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>
   );
 });