rooty/fab-manager
1
0
Fork 0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-01-17 06:52:27 +01:00
Code Issues Releases Activity

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

Browse Source
This commit is contained in:
Sylvain 2021-04-09 09:03:59 +02:00
parent 4d0dc808e8
commit 5e2c50a85f
5 changed files with 97 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
app/frontend/src/javascript/components/payment/payment-modal.tsx Normal file
View File

@ -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']));

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

@ -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']));

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

@ -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']));

14
app/frontend/templates/shared/_cart.html
View File

@ -200,11 +200,11 @@
</div>
<div ng-if="stripe.showModal">
<payzen-modal is-open="stripe.showModal"
toggle-modal="toggleStripeModal"
after-success="afterStripeSuccess"
cart-items="stripe.cartItems"
current-user="currentUser"
customer="user"
schedule="schedule.payment_schedule"/>
<payment-modal is-open="stripe.showModal"
toggle-modal="toggleStripeModal"
after-success="afterStripeSuccess"
cart-items="stripe.cartItems"
current-user="currentUser"
customer="user"
schedule="schedule.payment_schedule"/>
</div>

16
app/frontend/templates/shared/valid_reservation_modal.html
View File

@ -49,12 +49,12 @@
<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"
toggle-modal="toggleStripeModal"
after-success="afterCreatePaymentSchedule"
cart-items="cartItems"
current-user="currentUser"
schedule="schedule"
customer="user"
processPayment="false"/>
<payment-modal is-open="isOpenStripeModal"
toggle-modal="toggleStripeModal"
after-success="afterCreatePaymentSchedule"
cart-items="cartItems"
current-user="currentUser"
schedule="schedule"
customer="user"
processPayment="false"/>
</div>