PaymentModal : automatically determines the payment modal to used based on the configured payment gateway

app/frontend/src/javascript/components/payment/payment-modal.tsx

@@ -0,0 +1,80 @@
+import React, { ReactElement, ReactNode } from 'react';
+import { IApplication } from '../../models/application';
+import { CartItems } from '../../models/payment';
+import { User } from '../../models/user';
+import { PaymentSchedule } from '../../models/payment-schedule';
+import { Loader } from '../base/loader';
+import { react2angular } from 'react2angular';
+import SettingAPI from '../../api/setting';
+import { SettingName } from '../../models/setting';
+import { StripeModal } from './stripe/stripe-modal';
+import { PayZenModal } from './payzen/payzen-modal';
+
+declare var Application: IApplication;
+
+interface PaymentModalProps {
+  isOpen: boolean,
+  toggleModal: () => void,
+  afterSuccess: (result: any) => void,
+  cartItems: CartItems,
+  currentUser: User,
+  schedule: PaymentSchedule,
+  customer: User
+}
+
+// initial request to the API
+const paymentGateway = SettingAPI.get(SettingName.PaymentGateway);
+
+const PaymentModal: React.FC<PaymentModalProps> = ({ isOpen, toggleModal, afterSuccess, currentUser, schedule , cartItems, customer }) => {
+  const gateway = paymentGateway.read();
+
+  /**
+   * Render the Stripe payment modal
+   */
+  const renderStripeModal = (): ReactElement => {
+    return <StripeModal isOpen={isOpen}
+                        toggleModal={toggleModal}
+                        afterSuccess={afterSuccess}
+                        cartItems={cartItems}
+                        currentUser={currentUser}
+                        schedule={schedule}
+                        customer={customer} />
+  }
+
+  /**
+   * Render the PayZen payment modal
+   */
+  const renderPayZenModal = (): ReactElement => {
+    return <PayZenModal isOpen={isOpen}
+                        toggleModal={toggleModal}
+                        afterSuccess={afterSuccess}
+                        cartItems={cartItems}
+                        currentUser={currentUser}
+                        schedule={schedule}
+                        customer={customer} />
+  }
+
+  /**
+   * Determine which gateway is enabled and return the appropriate payment modal
+   */
+  switch (gateway.value) {
+    case 'stripe':
+      return renderStripeModal();
+    case 'payzen':
+      return renderPayZenModal();
+    default:
+      console.error(`[PaymentModal] Unimplemented gateway: ${gateway.value}`);
+      return <div />
+  }
+}
+
+
+const PaymentModalWrapper: React.FC<PaymentModalProps> = ({ isOpen, toggleModal, afterSuccess, currentUser, schedule , cartItems, customer }) => {
+  return (
+    <Loader>
+      <PaymentModal isOpen={isOpen} toggleModal={toggleModal} afterSuccess={afterSuccess} currentUser={currentUser} schedule={schedule} cartItems={cartItems} customer={customer} />
+    </Loader>
+  );
+}
+
+Application.Components.component('paymentModal', react2angular(PaymentModalWrapper, ['isOpen', 'toggleModal', 'afterSuccess','currentUser', 'schedule', 'cartItems', 'customer']));

app/frontend/src/javascript/components/payment/payzen/payzen-modal.tsx

@@ -27,7 +27,7 @@ interface PayZenModalProps {
  * This component enables the user to input his card data or process payments, using the PayZen gateway.
  * Supports Strong-Customer Authentication (SCA).
  */
-const PayZenModal: React.FC<PayZenModalProps> = ({ isOpen, toggleModal, afterSuccess, cartItems, currentUser, schedule, customer }) => {
+export const PayZenModal: React.FC<PayZenModalProps> = ({ isOpen, toggleModal, afterSuccess, cartItems, currentUser, schedule, customer }) => {
   /**
    * Return the logos, shown in the modal footer.
    */
@@ -71,13 +71,3 @@ const PayZenModal: React.FC<PayZenModalProps> = ({ isOpen, toggleModal, afterSuc
                           GatewayForm={renderForm} />
   );
 }
-
-const PayZenModalWrapper: React.FC<PayZenModalProps> = ({ isOpen, toggleModal, afterSuccess, currentUser, schedule , cartItems, customer }) => {
-  return (
-    <Loader>
-      <PayZenModal isOpen={isOpen} toggleModal={toggleModal} afterSuccess={afterSuccess} currentUser={currentUser} schedule={schedule} cartItems={cartItems} customer={customer} />
-    </Loader>
-  );
-}
-
-Application.Components.component('payzenModal', react2angular(PayZenModalWrapper, ['isOpen', 'toggleModal', 'afterSuccess','currentUser', 'schedule', 'cartItems', 'customer']));

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

@@ -30,7 +30,7 @@ interface StripeModalProps {
  * This component enables the user to input his card data or process payments, using the Stripe gateway.
  * Supports Strong-Customer Authentication (SCA).
  */
-const StripeModal: React.FC<StripeModalProps> = ({ isOpen, toggleModal, afterSuccess, cartItems, currentUser, schedule, customer }) => {
+export const StripeModal: React.FC<StripeModalProps> = ({ isOpen, toggleModal, afterSuccess, cartItems, currentUser, schedule, customer }) => {
   /**
    * Return the logos, shown in the modal footer.
    */
@@ -81,13 +81,3 @@ const StripeModal: React.FC<StripeModalProps> = ({ isOpen, toggleModal, afterSuc
                           GatewayForm={renderForm} />
   );
 }
-
-const StripeModalWrapper: React.FC<StripeModalProps> = ({ isOpen, toggleModal, afterSuccess, currentUser, schedule , cartItems, customer }) => {
-  return (
-    <Loader>
-      <StripeModal isOpen={isOpen} toggleModal={toggleModal} afterSuccess={afterSuccess} currentUser={currentUser} schedule={schedule} cartItems={cartItems} customer={customer} />
-    </Loader>
-  );
-}
-
-Application.Components.component('stripeModal', react2angular(StripeModalWrapper, ['isOpen', 'toggleModal', 'afterSuccess','currentUser', 'schedule', 'cartItems', 'customer']));

app/frontend/templates/shared/_cart.html

@@ -200,7 +200,7 @@
 
 </div>
 <div ng-if="stripe.showModal">
-  <payzen-modal is-open="stripe.showModal"
+  <payment-modal is-open="stripe.showModal"
                  toggle-modal="toggleStripeModal"
                  after-success="afterStripeSuccess"
                  cart-items="stripe.cartItems"

app/frontend/templates/shared/valid_reservation_modal.html

@@ -49,7 +49,7 @@
 <div class="modal-footer">
   <button class="btn btn-info" ng-click="ok()" ng-disabled="attempting" ng-bind-html="validButtonName"></button>
   <button class="btn btn-default" ng-click="cancel()" translate>{{ 'app.shared.buttons.cancel' }}</button>
-  <stripe-modal is-open="isOpenStripeModal"
+  <payment-modal is-open="isOpenStripeModal"
                  toggle-modal="toggleStripeModal"
                  after-success="afterCreatePaymentSchedule"
                  cart-items="cartItems"