integrate payzen logo and other fixes

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

@@ -165,14 +165,14 @@ export const PaymentModal: React.FC<PaymentModalProps> = ({ isOpen, toggleModal,
               width={ModalSize.medium}
               closeButton={false}
               customFooter={logoFooter}
-              className={`payment-modal ${className}`}>
+              className={`payment-modal ${className ? className : ''}`}>
       {ready && <div>
         <WalletInfo cartItems={cartItems} currentUser={currentUser} wallet={wallet} price={price?.price} />
         <GatewayForm onSubmit={handleSubmit}
                      onSuccess={handleFormSuccess}
                      onError={handleFormError}
                      operator={currentUser}
-                     className={`gateway-form ${formClassName}`}
+                     className={`gateway-form ${formClassName ? formClassName : ''}`}
                      formId={formId}
                      cartItems={cartItems}
                      customer={customer}

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

@@ -1,6 +1,5 @@
 import React, { FunctionComponent, ReactNode } from 'react';
 import { react2angular } from 'react2angular';
-import { useTranslation } from 'react-i18next';
 import { Loader } from '../base/loader';
 import { IApplication } from '../../models/application';
 import { CartItems, PaymentConfirmation } from '../../models/payment';
@@ -35,7 +34,6 @@ const PayZenModal: React.FC<PayZenModalProps> = ({ isOpen, toggleModal, afterSuc
   const logoFooter = (): ReactNode => {
     return (
       <div className="payzen-modal-icons">
-        <i className="fa fa-lock fa-2x m-r-sm pos-rlt" />
         <img src={payzenLogo} alt="powered by PayZen" />
         <img src={mastercardLogo} alt="mastercard" />
         <img src={visaLogo} alt="visa" />
@@ -62,7 +60,9 @@ const PayZenModal: React.FC<PayZenModalProps> = ({ isOpen, toggleModal, afterSuc
     <PaymentModal isOpen={isOpen}
                   toggleModal={toggleModal}
                   logoFooter={logoFooter()}
-                  formId="payzen-modal"
+                  formId="payzen-form"
+                  formClassName="payzen-form"
+                  className="payzen-modal"
                   currentUser={currentUser}
                   cartItems={cartItems}
                   customer={customer}
@@ -80,4 +80,4 @@ const PayZenModalWrapper: React.FC<PayZenModalProps> = ({ isOpen, toggleModal, a
   );
 }
 
-Application.Components.component('payZenModal', react2angular(PayZenModalWrapper, ['isOpen', 'toggleModal', 'afterSuccess','currentUser', 'schedule', 'cartItems', 'customer']));
+Application.Components.component('payzenModal', react2angular(PayZenModalWrapper, ['isOpen', 'toggleModal', 'afterSuccess','currentUser', 'schedule', 'cartItems', 'customer']));

app/frontend/src/stylesheets/application.scss

@@ -39,5 +39,6 @@
 @import "modules/payzen-keys-form";
 @import "modules/payzen-settings";
 @import "modules/payment-modal";
+@import "modules/payzen-modal";
 
 @import "app.responsive";

app/frontend/src/stylesheets/modules/payzen-modal.scss

@@ -0,0 +1,9 @@
+.payzen-modal {
+  .payzen-modal-icons {
+    text-align: center;
+
+    img {
+      margin-right: 10px;
+    }
+  }
+}

app/frontend/templates/shared/_cart.html

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

lib/pay_zen/helper.rb

@@ -7,6 +7,7 @@ module PayZen; end
 class PayZen::Helper
   class << self
     def enabled?
+      return false unless Setting.get('online_payment_module')
       return false unless Setting.get('payment_gateway') == 'payzen'
 
       res = true