rooty/fab-manager
1
0
Fork 0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-02-20 14:54:15 +01:00
Code Issues Releases Activity

display correct gateway name in payment schedule confirmation modal

Browse Source
This commit is contained in:
Sylvain 2021-06-01 11:24:43 +02:00
parent 81bc22c494
commit d6a6d34105
6 changed files with 29 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/frontend/src/javascript/api/setting.ts
View File

@ -5,7 +5,7 @@ import wrapPromise, { IWrapPromise } from '../lib/wrap-promise';
export default class SettingAPI {
async get (name: SettingName): Promise<Setting> {
const res: AxiosResponse = await apiClient.get(`/api/settings/${name}`);
const res: AxiosResponse<{setting: Setting}> = await apiClient.get(`/api/settings/${name}`);
return res?.data?.setting;
}

33
app/frontend/src/javascript/components/payment/abstract-payment-modal.tsx
View File

@ -13,6 +13,10 @@ import CustomAssetAPI from '../../api/custom-asset';
import PriceAPI from '../../api/price';
import WalletAPI from '../../api/wallet';
import { Invoice } from '../../models/invoice';
import SettingAPI from '../../api/setting';
import { SettingName } from '../../models/setting';
import { ComputePriceResult } from '../../models/price';
import { Wallet } from '../../models/wallet';
declare var Fablab: IFablab;
@ -56,24 +60,37 @@ const cgvFile = CustomAssetAPI.get(CustomAssetName.CgvFile);
*/
export const AbstractPaymentModal: React.FC<AbstractPaymentModalProps> = ({ isOpen, toggleModal, afterSuccess, cart, currentUser, schedule, customer, logoFooter, GatewayForm, formId, className, formClassName }) => {
// customer's wallet
const [wallet, setWallet] = useState(null);
const [wallet, setWallet] = useState<Wallet>(null);
// server-computed price with all details
const [price, setPrice] = useState(null);
const [price, setPrice] = useState<ComputePriceResult>(null);
// remaining price = total price - wallet amount
const [remainingPrice, setRemainingPrice] = useState(0);
const [remainingPrice, setRemainingPrice] = useState<number>(0);
// is the component ready to display?
const [ready, setReady] = useState(false);
const [ready, setReady] = useState<boolean>(false);
// errors to display in the UI (gateway errors mainly)
const [errors, setErrors] = useState(null);
const [errors, setErrors] = useState<string>(null);
// are we currently processing the payment (ie. the form was submit, but the process is still running)?
const [submitState, setSubmitState] = useState(false);
const [submitState, setSubmitState] = useState<boolean>(false);
// did the user accepts the terms of services (CGV)?
const [tos, setTos] = useState(false);
const [tos, setTos] = useState<boolean>(false);
// currently active payment gateway
const [gateway, setGateway] = useState<string>(null);
const { t } = useTranslation('shared');
const cgv = cgvFile.read();
/**
* When the component is loaded first, get the name of the currently active payment modal
*/
useEffect(() => {
const api = new SettingAPI();
api.get(SettingName.PaymentGateway).then((setting) => {
// we capitalize the first letter of the name
setGateway(setting.value.replace(/^\w/, (c) => c.toUpperCase()));
})
}, []);
/**
* On each display:
* - Refresh the wallet
@ -185,7 +202,7 @@ export const AbstractPaymentModal: React.FC<AbstractPaymentModalProps> = ({ isOp
{errors}
</div>}
{isPaymentSchedule() && <div className="payment-schedule-info">
<HtmlTranslate trKey="app.shared.payment.payment_schedule_html" options={{ DEADLINES: schedule.items.length }} />
<HtmlTranslate trKey="app.shared.payment.payment_schedule_html" options={{ DEADLINES: schedule.items.length, GATEWAY: gateway }} />
</div>}
{hasCgv() && <div className="terms-of-sales">
<input type="checkbox" id="acceptToS" name="acceptCondition" checked={tos} onChange={toggleTos} required />

2
app/frontend/src/javascript/components/wallet-info.tsx
View File

@ -9,8 +9,6 @@ import { Wallet } from '../models/wallet';
import { IFablab } from '../models/fablab';
import WalletLib from '../lib/wallet';
import { ShoppingCart } from '../models/payment';
import { Reservation } from '../models/reservation';
import { SubscriptionRequest } from '../models/subscription';
declare var Application: IApplication;
declare var Fablab: IFablab;

2
config/locales/app.shared.de.yml
View File

@ -119,7 +119,7 @@ de:
online_payment: "Online-Bezahlung"
i_have_read_and_accept_: "Ich habe gelesen und akzeptiere "
_the_general_terms_and_conditions: "die allgemeinen Nutzungs- und Geschäftsbedingungen."
payment_schedule_html: "<p>You're about to subscribe to a payment schedule of {DEADLINES} months.</p><p>By paying this bill, you agree to send instructions to the financial institution that issue your card, to take payments from your card account, for the whole duration of this subscription. This imply that your card data are saved by Stripe and a series of payments will be initiated on your behalf, conforming to the payment schedule previously shown.</p>"
payment_schedule_html: "<p>You're about to subscribe to a payment schedule of {DEADLINES} months.</p><p>By paying this bill, you agree to send instructions to the financial institution that issue your card, to take payments from your card account, for the whole duration of this subscription. This imply that your card data are saved by {GATEWAY} and a series of payments will be initiated on your behalf, conforming to the payment schedule previously shown.</p>"
confirm_payment_of_: "Bezahlen: {AMOUNT}"
#dialog of on site payment for reservations
valid_reservation_modal:

2
config/locales/app.shared.en.yml
View File

@ -119,7 +119,7 @@ en:
online_payment: "Online payment"
i_have_read_and_accept_: "I have read, and accept "
_the_general_terms_and_conditions: "the general terms and conditions."
payment_schedule_html: "<p>You're about to subscribe to a payment schedule of {DEADLINES} months.</p><p>By paying this bill, you agree to send instructions to the financial institution that issue your card, to take payments from your card account, for the whole duration of this subscription. This imply that your card data are saved by Stripe and a series of payments will be initiated on your behalf, conforming to the payment schedule previously shown.</p>"
payment_schedule_html: "<p>You're about to subscribe to a payment schedule of {DEADLINES} months.</p><p>By paying this bill, you agree to send instructions to the financial institution that issue your card, to take payments from your card account, for the whole duration of this subscription. This imply that your card data are saved by {GATEWAY} and a series of payments will be initiated on your behalf, conforming to the payment schedule previously shown.</p>"
confirm_payment_of_: "Pay: {AMOUNT}"
#dialog of on site payment for reservations
valid_reservation_modal:

2
config/locales/app.shared.fr.yml
View File

@ -119,7 +119,7 @@ fr:
online_payment: "Paiement en ligne"
i_have_read_and_accept_: "J'ai bien pris connaissance, et accepte "
_the_general_terms_and_conditions: "les conditions générales de vente."
payment_schedule_html: "<p>Vous êtes sur le point de souscrire à un échéancier de paiement de {DEADLINES} mois.</p><p>En payant cette facture, vous vous engagez à l'envoi d'instructions vers l'institution financière émettrice de votre carte, afin de prélever des paiements sur votre compte, pendant toute la durée de cet abonnement. Cela implique que les données de votre carte soient enregistrées par Stripe et qu'une série de paiements sera initiée en votre nom, conformément à l'échéancier de paiement précédemment affiché.</p>"
payment_schedule_html: "<p>Vous êtes sur le point de souscrire à un échéancier de paiement de {DEADLINES} mois.</p><p>En payant cette facture, vous vous engagez à l'envoi d'instructions vers l'institution financière émettrice de votre carte, afin de prélever des paiements sur votre compte, pendant toute la durée de cet abonnement. Cela implique que les données de votre carte soient enregistrées par {GATEWAY} et qu'une série de paiements sera initiée en votre nom, conformément à l'échéancier de paiement précédemment affiché.</p>"
confirm_payment_of_: "Payer : {AMOUNT}"
#dialog of on site payment for reservations
valid_reservation_modal: