select gateway modal

app/frontend/src/javascript/components/select-gateway-modal.tsx

@@ -2,7 +2,7 @@
  * This component ...
  */
 
-import React from 'react';
+import React, { BaseSyntheticEvent, SyntheticEvent, useState } from 'react';
 import { react2angular } from 'react2angular';
 import { Loader } from './loader';
 import { IApplication } from '../models/application';
@@ -20,23 +20,50 @@ interface SelectGatewayModalModalProps {
 }
 
 const SelectGatewayModal: React.FC<SelectGatewayModalModalProps> = ({ isOpen, toggleModal }) => {
-
   const { t } = useTranslation('admin');
 
+  const [preventConfirmGateway, setPreventConfirmGateway] = useState<boolean>(true);
+  const [selectedGateway, setSelectedGateway] = useState<string>('');
+
+
+  /**
+   * Callback triggered when the user has filled and confirmed the settings of his gateway
+   */
+  const onGatewayConfirmed = () => {
+    setPreventConfirmGateway(true);
+    toggleModal();
+  }
+
+  const setGateway = (event: BaseSyntheticEvent) => {
+    const gateway = event.target.value;
+    setSelectedGateway(gateway);
+    setPreventConfirmGateway(!gateway);
+  }
 
   return (
-    <FabModal title={t('app.shared.stripe.online_payment')}
+    <FabModal title={t('app.admin.invoices.payment.gateway_modal.select_gateway_title')}
               isOpen={isOpen}
               toggleModal={toggleModal}
               width={ModalSize.medium}
               closeButton={false}
-              className="stripe-modal">
+              className="gateway-modal"
-
+              confirmButton={t('app.admin.invoices.payment.gateway_modal.confirm_button')}
+              onConfirm={onGatewayConfirmed}
+              preventConfirm={preventConfirmGateway}>
+      <p className="info-gateway">
+        {t('app.admin.invoices.payment.gateway_modal.gateway_info')}
+      </p>
+      <label htmlFor="gateway">{t('app.admin.invoices.payment.gateway_modal.select_gateway')}</label>
+      <select id="gateway" className="select-gateway" onChange={setGateway} value={selectedGateway}>
+        <option />
+        <option value="stripe">{t('app.admin.invoices.payment.gateway_modal.stripe')}</option>
+        <option value="payzen">{t('app.admin.invoices.payment.gateway_modal.payzen')}</option>
+      </select>
     </FabModal>
   );
 }
 
-const StripeModalWrapper: React.FC<SelectGatewayModalModalProps> = ({ isOpen, toggleModal,currentUser }) => {
+const SelectGatewayModalWrapper: React.FC<SelectGatewayModalModalProps> = ({ isOpen, toggleModal, currentUser }) => {
   return (
     <Loader>
       <SelectGatewayModal isOpen={isOpen} toggleModal={toggleModal} currentUser={currentUser} />
@@ -44,4 +71,4 @@ const StripeModalWrapper: React.FC<SelectGatewayModalModalProps> = ({ isOpen, to
   );
 }
 
-Application.Components.component('stripeModal', react2angular(StripeModalWrapper, ['isOpen', 'toggleModal', 'currentUser']));
+Application.Components.component('selectGatewayModal', react2angular(SelectGatewayModalWrapper, ['isOpen', 'toggleModal', 'currentUser']));

app/frontend/src/javascript/controllers/admin/invoices.js

@@ -198,6 +198,9 @@ Application.Controllers.controller('InvoicesController', ['$scope', '$state', 'I
     // Placeholding date for the reservation end
     $scope.inOneWeekAndOneHour = moment().add(1, 'week').add(1, 'hour').startOf('hour');
 
+    // Is shown the modal dialog to select a payment gateway
+    $scope.openSelectGatewayModal = false;
+
     /**
      * Change the invoices ordering criterion to the one provided
      * @param orderBy {string} ordering criterion
@@ -644,6 +647,9 @@ Application.Controllers.controller('InvoicesController', ['$scope', '$state', 'I
     $scope.selectPaymentGateway = function (onlinePaymentModule) {
       // if the online payment is about to be disabled, accept the change without any further question
       if (onlinePaymentModule.value === false) return true;
+
+      // otherwise, open a modal to ask for the selection of a payment gateway
+      $scope.openSelectGatewayModal = true;
     };
 
     /**
@@ -682,6 +688,16 @@ Application.Controllers.controller('InvoicesController', ['$scope', '$state', 'I
       return modalInstance.result;
     };
 
+    /**
+     * This will open/close the gateway selection modal
+     */
+    $scope.toggleSelectGatewayModal = function () {
+      setTimeout(() => {
+        $scope.openSelectGatewayModal = !$scope.openSelectGatewayModal;
+        $scope.$apply();
+      }, 50);
+    };
+
     /**
      * Setup the feature-tour for the admin/invoices page.
      * This is intended as a contextual help (when pressing F1)

app/frontend/src/stylesheets/application.scss

@@ -32,5 +32,6 @@
 @import "modules/payment-schedules-list";
 @import "modules/stripe-confirm";
 @import "modules/payment-schedule-dashboard";
+@import "modules/select-gateway-modal";
 
 @import "app.responsive";

app/frontend/src/stylesheets/modules/select-gateway-modal.scss

@@ -0,0 +1,25 @@
+.gateway-modal {
+  .info-gateway {
+    border: 1px solid #bce8f1;
+    border-radius: 4px;
+    color: #31708f;
+    background-color: #d9edf7;
+    padding: 15px;
+  }
+
+  .select-gateway {
+    display: block;
+    width: 100%;
+    height: 38px;
+    padding: 6px 12px;
+    font-size: 16px;
+    line-height: 1.5;
+    color: #555555;
+    background-color: #fff;
+    background-image: none;
+    border: 1px solid #c4c4c4;
+    border-radius: 4px;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .08);
+    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  }
+}

app/frontend/templates/admin/invoices/payment.html

@@ -13,6 +13,7 @@
                        on-before-save="selectPaymentGateway"
                        fa-icon="fa-font">
       </boolean-setting>
+      <select-gateway-modal is-open="openSelectGatewayModal" toggle-modal="toggleSelectGatewayModal" current-user="currentUser" />
     </div>
     <div class="row m-t" ng-show="allSettings.online_payment_module === 'true'">
       <h3 class="m-l" translate>{{ 'app.admin.invoices.payment.stripe_keys' }}</h3>

config/locales/app.admin.en.yml

@@ -640,6 +640,14 @@ en:
           currency_info_html: "Please specify below the currency used for online payment. You should provide a three-letter ISO code, from the list of <a href='https://stripe.com/docs/currencies' target='_blank'>Stripe supported currencies</a>."
           currency_alert_html: "<strong>Warning</strong>: the currency cannot be changed after the first online payment was made. Please define this setting carefully before opening Fab-manager to your members."
           stripe_currency: "Stripe currency"
+          # select a payment gateway
+          gateway_modal:
+            select_gateway_title: "Select a payment gateway"
+            gateway_info: "To securely collect and process payments online, Fab-manager needs to use an third-party service authorized by the financial institutions, called a payment gateway."
+            select_gateway: "Please select an available gateway"
+            stripe: "Stripe"
+            payzen: "PayZen"
+            confirm_button: "Validate the gateway"
         payment_schedules:
           filter_schedules: "Filter schedules"
           no_payment_schedules: "No payment schedules to display"

config/locales/app.admin.fr.yml

@@ -640,6 +640,14 @@ fr:
           currency_info_html: "Veuillez indiquer la devise à utiliser lors des paiements en ligne. Vous devez fournir un code ISO à trois lettres, issu de la liste des <a href='https://stripe.com/docs/currencies' target='_blank'>devises supportées par Stripe</a>."
           currency_alert_html: "<strong>Attention</strong> : la devise ne peut pas être modifiée après que le premier paiement en ligne ait été effectué. Veuillez définir attentivement ce paramètre avant d'ouvrir Fab-manager à vos membres."
           stripe_currency: "Devise Stripe"
+          # select a payment gateway
+          gateway_modal:
+            select_gateway_title: "Sélectionnez une passerelle de paiement"
+            gateway_info: "Pour collecter et traiter les paiements en ligne en toute sécurité, Fab-manager a besoin d'utiliser un service tiers autorisé par les institutions financières, appelé une passerelle de paiement."
+            select_gateway: "Veuillez choisir une des passerelles disponibles"
+            stripe: "Stripe"
+            payzen: "PayZen"
+            confirm_button: "Valider la passerelle"
         payment_schedules:
           filter_schedules: "Filtrer les échéanciers"
           no_payment_schedules: "Pas d'échéancier à afficher"