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

Fix bug: unable to show payment modal for stripe

Browse Source
This commit is contained in:
Du Peng 2022-04-01 16:16:32 +02:00
parent 3fa3e58d8e
commit 97f7a0aac8
2 changed files with 102 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
app/frontend/src/javascript/components/payment-schedule/payment-schedules-table.tsx
View File

@ -1,4 +1,4 @@
import React, { ReactEventHandler, useState } from 'react';
import React, { ReactEventHandler, useState, useEffect, ReactElement } from 'react';
import { useTranslation } from 'react-i18next';
import { Loader } from '../base/loader';
import _ from 'lodash';
@ -11,6 +11,8 @@ import {
import FormatLib from '../../lib/format';
import { PaymentScheduleItemActions, TypeOnce } from './payment-schedule-item-actions';
import { StripeElements } from '../payment/stripe/stripe-elements';
import SettingAPI from '../../api/setting';
import { Setting, SettingName } from '../../models/setting';
interface PaymentSchedulesTableProps {
paymentSchedules: Array<PaymentSchedule>,
@ -35,6 +37,13 @@ const PaymentSchedulesTableComponent: React.FC<PaymentSchedulesTableProps> = ({
[TypeOnce.CardUpdate, new Map()],
[TypeOnce.UpdatePaymentMean, new Map()]
]));
const [gateway, setGateway] = useState<Setting>(null);
useEffect(() => {
SettingAPI.get(SettingName.PaymentGateway)
.then(setting => setGateway(setting))
.catch(error => onError(error));
}, []);
/**
* Check if the requested payment schedule is displayed with its deadlines (PaymentScheduleItem) or without them
@ -110,76 +119,98 @@ const PaymentSchedulesTableComponent: React.FC<PaymentSchedulesTableProps> = ({
refreshList();
};
return (
<div>
<StripeElements>
<table className="schedules-table">
<thead>
<tr>
<th className="w-35" />
<th className="w-200">{t('app.shared.schedules_table.schedule_num')}</th>
<th className="w-200">{t('app.shared.schedules_table.date')}</th>
<th className="w-120">{t('app.shared.schedules_table.price')}</th>
{showCustomer && <th className="w-200">{t('app.shared.schedules_table.customer')}</th>}
<th className="w-200"/>
</tr>
</thead>
<tbody>
{paymentSchedules.map(p => <tr key={p.id}>
<td colSpan={showCustomer ? 6 : 5}>
<table className="schedules-table-body">
<tbody>
<tr>
<td className="w-35 row-header" onClick={togglePaymentScheduleDetails(p.id)}>{expandCollapseIcon(p.id)}</td>
<td className="w-200">{p.reference}</td>
<td className="w-200">{FormatLib.date(_.minBy(p.items, 'due_date').due_date)}</td>
<td className="w-120">{FormatLib.price(p.total)}</td>
{showCustomer && <td className="w-200">{p.user.name}</td>}
<td className="w-200">{downloadScheduleButton(p.id)}</td>
</tr>
<tr style={{ display: statusDisplay(p.id) }}>
<td className="w-35" />
<td colSpan={showCustomer ? 5 : 4}>
<div>
<table className="schedule-items-table">
<thead>
<tr>
<th className="w-120">{t('app.shared.schedules_table.deadline')}</th>
<th className="w-120">{t('app.shared.schedules_table.amount')}</th>
<th className="w-200">{t('app.shared.schedules_table.state')}</th>
<th className="w-200" />
</tr>
</thead>
<tbody>
{_.orderBy(p.items, 'due_date').map(item => <tr key={item.id}>
<td>{FormatLib.date(item.due_date)}</td>
<td>{FormatLib.price(item.amount)}</td>
<td>{formatState(item, p)}</td>
<td>
<PaymentScheduleItemActions paymentScheduleItem={item}
paymentSchedule={p}
onError={onError}
onSuccess={refreshSchedulesTable}
onCardUpdateSuccess={onCardUpdateSuccess}
operator={operator}
displayOnceMap={displayOnceMap}
show={isExpanded(p.id)}/>
</td>
</tr>)}
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>)}
</tbody>
</table>
</StripeElements>
</div>
);
const renderPaymentSchedulesTable = (): ReactElement => {
return (
<table className="schedules-table">
<thead>
<tr>
<th className="w-35" />
<th className="w-200">{t('app.shared.schedules_table.schedule_num')}</th>
<th className="w-200">{t('app.shared.schedules_table.date')}</th>
<th className="w-120">{t('app.shared.schedules_table.price')}</th>
{showCustomer && <th className="w-200">{t('app.shared.schedules_table.customer')}</th>}
<th className="w-200"/>
</tr>
</thead>
<tbody>
{paymentSchedules.map(p => <tr key={p.id}>
<td colSpan={showCustomer ? 6 : 5}>
<table className="schedules-table-body">
<tbody>
<tr>
<td className="w-35 row-header" onClick={togglePaymentScheduleDetails(p.id)}>{expandCollapseIcon(p.id)}</td>
<td className="w-200">{p.reference}</td>
<td className="w-200">{FormatLib.date(_.minBy(p.items, 'due_date').due_date)}</td>
<td className="w-120">{FormatLib.price(p.total)}</td>
{showCustomer && <td className="w-200">{p.user.name}</td>}
<td className="w-200">{downloadScheduleButton(p.id)}</td>
</tr>
<tr style={{ display: statusDisplay(p.id) }}>
<td className="w-35" />
<td colSpan={showCustomer ? 5 : 4}>
<div>
<table className="schedule-items-table">
<thead>
<tr>
<th className="w-120">{t('app.shared.schedules_table.deadline')}</th>
<th className="w-120">{t('app.shared.schedules_table.amount')}</th>
<th className="w-200">{t('app.shared.schedules_table.state')}</th>
<th className="w-200" />
</tr>
</thead>
<tbody>
{_.orderBy(p.items, 'due_date').map(item => <tr key={item.id}>
<td>{FormatLib.date(item.due_date)}</td>
<td>{FormatLib.price(item.amount)}</td>
<td>{formatState(item, p)}</td>
<td>
<PaymentScheduleItemActions paymentScheduleItem={item}
paymentSchedule={p}
onError={onError}
onSuccess={refreshSchedulesTable}
onCardUpdateSuccess={onCardUpdateSuccess}
operator={operator}
displayOnceMap={displayOnceMap}
show={isExpanded(p.id)}/>
</td>
</tr>)}
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>)}
</tbody>
</table>
);
};
/**
* Determine which gateway is enabled and return the appropriate payment schedules
*/
if (gateway === null) return <div/>;
switch (gateway.value) {
case 'stripe':
return (
<StripeElements>
{renderPaymentSchedulesTable()}
</StripeElements>
);
case 'payzen':
return (
<div>
{renderPaymentSchedulesTable()}
</div>
);
case null:
default:
console.error(`[PaymentSchedulesTable] Unimplemented gateway: ${gateway.value}`);
return <div />;
}
};
PaymentSchedulesTableComponent.defaultProps = { showCustomer: false };

1
app/frontend/src/javascript/components/payment/stripe/stripe-elements.tsx
View File

@ -27,7 +27,6 @@ export const StripeElements: React.FC = memo(({ children }) => {
{stripe && <Elements stripe={stripe}>
{children}
</Elements>}
{!stripe && children}
</div>
);
});