rooty/fab-manager
1
0
Fork 0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-01-30 19:52:20 +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 { useTranslation } from 'react-i18next';
import { Loader } from '../base/loader'; import { Loader } from '../base/loader';
import _ from 'lodash'; import _ from 'lodash';
@ -11,6 +11,8 @@ import {
import FormatLib from '../../lib/format'; import FormatLib from '../../lib/format';
import { PaymentScheduleItemActions, TypeOnce } from './payment-schedule-item-actions'; import { PaymentScheduleItemActions, TypeOnce } from './payment-schedule-item-actions';
import { StripeElements } from '../payment/stripe/stripe-elements'; import { StripeElements } from '../payment/stripe/stripe-elements';
import SettingAPI from '../../api/setting';
import { Setting, SettingName } from '../../models/setting';
interface PaymentSchedulesTableProps { interface PaymentSchedulesTableProps {
paymentSchedules: Array<PaymentSchedule>, paymentSchedules: Array<PaymentSchedule>,
@ -35,6 +37,13 @@ const PaymentSchedulesTableComponent: React.FC<PaymentSchedulesTableProps> = ({
[TypeOnce.CardUpdate, new Map()], [TypeOnce.CardUpdate, new Map()],
[TypeOnce.UpdatePaymentMean, 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 * 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(); refreshList();
}; };
return ( const renderPaymentSchedulesTable = (): ReactElement => {
<div> return (
<StripeElements> <table className="schedules-table">
<table className="schedules-table"> <thead>
<thead> <tr>
<tr> <th className="w-35" />
<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.schedule_num')}</th> <th className="w-200">{t('app.shared.schedules_table.date')}</th>
<th className="w-200">{t('app.shared.schedules_table.date')}</th> <th className="w-120">{t('app.shared.schedules_table.price')}</th>
<th className="w-120">{t('app.shared.schedules_table.price')}</th> {showCustomer && <th className="w-200">{t('app.shared.schedules_table.customer')}</th>}
{showCustomer && <th className="w-200">{t('app.shared.schedules_table.customer')}</th>} <th className="w-200"/>
<th className="w-200"/> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> {paymentSchedules.map(p => <tr key={p.id}>
{paymentSchedules.map(p => <tr key={p.id}> <td colSpan={showCustomer ? 6 : 5}>
<td colSpan={showCustomer ? 6 : 5}> <table className="schedules-table-body">
<table className="schedules-table-body"> <tbody>
<tbody> <tr>
<tr> <td className="w-35 row-header" onClick={togglePaymentScheduleDetails(p.id)}>{expandCollapseIcon(p.id)}</td>
<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">{p.reference}</td> <td className="w-200">{FormatLib.date(_.minBy(p.items, 'due_date').due_date)}</td>
<td className="w-200">{FormatLib.date(_.minBy(p.items, 'due_date').due_date)}</td> <td className="w-120">{FormatLib.price(p.total)}</td>
<td className="w-120">{FormatLib.price(p.total)}</td> {showCustomer && <td className="w-200">{p.user.name}</td>}
{showCustomer && <td className="w-200">{p.user.name}</td>} <td className="w-200">{downloadScheduleButton(p.id)}</td>
<td className="w-200">{downloadScheduleButton(p.id)}</td> </tr>
</tr> <tr style={{ display: statusDisplay(p.id) }}>
<tr style={{ display: statusDisplay(p.id) }}> <td className="w-35" />
<td className="w-35" /> <td colSpan={showCustomer ? 5 : 4}>
<td colSpan={showCustomer ? 5 : 4}> <div>
<div> <table className="schedule-items-table">
<table className="schedule-items-table"> <thead>
<thead> <tr>
<tr> <th className="w-120">{t('app.shared.schedules_table.deadline')}</th>
<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-120">{t('app.shared.schedules_table.amount')}</th> <th className="w-200">{t('app.shared.schedules_table.state')}</th>
<th className="w-200">{t('app.shared.schedules_table.state')}</th> <th className="w-200" />
<th className="w-200" /> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> {_.orderBy(p.items, 'due_date').map(item => <tr key={item.id}>
{_.orderBy(p.items, 'due_date').map(item => <tr key={item.id}> <td>{FormatLib.date(item.due_date)}</td>
<td>{FormatLib.date(item.due_date)}</td> <td>{FormatLib.price(item.amount)}</td>
<td>{FormatLib.price(item.amount)}</td> <td>{formatState(item, p)}</td>
<td>{formatState(item, p)}</td> <td>
<td> <PaymentScheduleItemActions paymentScheduleItem={item}
<PaymentScheduleItemActions paymentScheduleItem={item} paymentSchedule={p}
paymentSchedule={p} onError={onError}
onError={onError} onSuccess={refreshSchedulesTable}
onSuccess={refreshSchedulesTable} onCardUpdateSuccess={onCardUpdateSuccess}
onCardUpdateSuccess={onCardUpdateSuccess} operator={operator}
operator={operator} displayOnceMap={displayOnceMap}
displayOnceMap={displayOnceMap} show={isExpanded(p.id)}/>
show={isExpanded(p.id)}/> </td>
</td> </tr>)}
</tr>)} </tbody>
</tbody> </table>
</table> </div>
</div> </td>
</td> </tr>
</tr> </tbody>
</tbody> </table>
</table> </td>
</td> </tr>)}
</tr>)} </tbody>
</tbody> </table>
</table> );
</StripeElements> };
</div>
); /**
* 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 }; 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}> {stripe && <Elements stripe={stripe}>
{children} {children}
</Elements>} </Elements>}
{!stripe && children}
</div> </div>
); );
}); });