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

reactored payment-schedules-table to extract buttons to payment-schedule-item-actions

Browse Source
This commit is contained in:
Sylvain 2022-01-17 10:48:23 +01:00
parent a189190a8e
commit d8f27f0b1a
4 changed files with 125 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
app/frontend/src/javascript/components/payment-schedule/payment-schedule-item-actions.tsx
View File

@ -4,14 +4,13 @@ import {
PaymentScheduleItem,
PaymentScheduleItemState
} from '../../models/payment-schedule';
import React, { ReactElement, useEffect, useState } from 'react';
import React, { ReactElement, useState } from 'react';
import { FabButton } from '../base/fab-button';
import { useTranslation } from 'react-i18next';
import { User, UserRole } from '../../models/user';
import PaymentScheduleAPI from '../../api/payment-schedule';
import { FabModal } from '../base/fab-modal';
import FormatLib from '../../lib/format';
import { StripeElements } from '../payment/stripe/stripe-elements';
import { StripeConfirmModal } from '../payment/stripe/stripe-confirm-modal';
import { UpdateCardModal } from '../payment/update-card-modal';
@ -28,13 +27,14 @@ interface PaymentScheduleItemActionsProps {
onSuccess: () => void,
onCardUpdateSuccess: () => void
operator: User,
displayOnceMap: Map<TypeOnce, Map<number, boolean>>,
displayOnceMap: Map<TypeOnce, Map<number, number>>,
show: boolean,
}
/**
* This component is responsible for rendering the actions buttons for a payment schedule item.
*/
export const PaymentScheduleItemActions: React.FC<PaymentScheduleItemActionsProps> = ({ paymentScheduleItem, paymentSchedule, onError, onSuccess, onCardUpdateSuccess, displayOnceMap, operator }) => {
export const PaymentScheduleItemActions: React.FC<PaymentScheduleItemActionsProps> = ({ paymentScheduleItem, paymentSchedule, onError, onSuccess, onCardUpdateSuccess, displayOnceMap, operator, show }) => {
const { t } = useTranslation('shared');
// is open, the modal dialog to cancel the associated subscription?
@ -50,14 +50,6 @@ export const PaymentScheduleItemActions: React.FC<PaymentScheduleItemActionsProp
// the user cannot confirm the action modal (3D secure), unless he has resolved the pending action
const [isConfirmActionDisabled, setConfirmActionDisabled] = useState<boolean>(true);
useEffect(() => {
Object.keys(TypeOnce).forEach((type) => {
if (!displayOnceMap.has(type as TypeOnce)) {
displayOnceMap.set(type as TypeOnce, new Map<number, boolean>());
}
});
}, []);
/**
* Check if the current operator has administrative rights or is a normal member
*/
@ -82,10 +74,12 @@ export const PaymentScheduleItemActions: React.FC<PaymentScheduleItemActionsProp
* Return a button to cancel the given subscription, if the user is privileged enough
*/
const cancelSubscriptionButton = (): ReactElement => {
if (isPrivileged() && !displayOnceMap.get(TypeOnce.SubscriptionCancel).get(paymentSchedule.id)) {
displayOnceMap.get(TypeOnce.SubscriptionCancel).set(paymentSchedule.id, true);
const displayOnceStatus = displayOnceMap.get(TypeOnce.SubscriptionCancel).get(paymentSchedule.id);
if (isPrivileged() && (!displayOnceStatus || displayOnceStatus === paymentScheduleItem.id)) {
displayOnceMap.get(TypeOnce.SubscriptionCancel).set(paymentSchedule.id, paymentScheduleItem.id);
return (
<FabButton onClick={toggleCancelSubscriptionModal}
<FabButton key={`cancel-subscription-${paymentSchedule.id}`}
onClick={toggleCancelSubscriptionModal}
icon={<i className="fas fa-times" />}>
{t('app.shared.payment_schedule_item_actions.cancel_subscription')}
</FabButton>
@ -99,7 +93,8 @@ export const PaymentScheduleItemActions: React.FC<PaymentScheduleItemActionsProp
const confirmTransferButton = (): ReactElement => {
if (isPrivileged()) {
return (
<FabButton onClick={toggleConfirmTransferModal}
<FabButton key={`confirm-transfer-${paymentScheduleItem.id}`}
onClick={toggleConfirmTransferModal}
icon={<i className="fas fa-university"/>}>
{t('app.shared.payment_schedule_item_actions.confirm_payment')}
</FabButton>
@ -113,7 +108,8 @@ export const PaymentScheduleItemActions: React.FC<PaymentScheduleItemActionsProp
const confirmCheckButton = (): ReactElement => {
if (isPrivileged()) {
return (
<FabButton onClick={toggleConfirmCashingModal}
<FabButton key={`confirm-check-${paymentScheduleItem.id}`}
onClick={toggleConfirmCashingModal}
icon={<i className="fas fa-check"/>}>
{t('app.shared.payment_schedule_item_actions.confirm_check')}
</FabButton>
@ -126,7 +122,8 @@ export const PaymentScheduleItemActions: React.FC<PaymentScheduleItemActionsProp
*/
const solveActionButton = (): ReactElement => {
return (
<FabButton onClick={toggleResolveActionModal}
<FabButton key={`solve-action-${paymentScheduleItem.id}`}
onClick={toggleResolveActionModal}
icon={<i className="fas fa-wrench"/>}>
{t('app.shared.payment_schedule_item_actions.resolve_action')}
</FabButton>
@ -137,10 +134,12 @@ export const PaymentScheduleItemActions: React.FC<PaymentScheduleItemActionsProp
* Return a button to update the credit card associated with the payment schedule
*/
const updateCardButton = (): ReactElement => {
if (!displayOnceMap.get(TypeOnce.CardUpdate).get(paymentSchedule.id)) {
displayOnceMap.get(TypeOnce.CardUpdate).set(paymentSchedule.id, true);
const displayOnceStatus = displayOnceMap.get(TypeOnce.SubscriptionCancel).get(paymentSchedule.id);
if (isPrivileged() && (!displayOnceStatus || displayOnceStatus === paymentScheduleItem.id)) {
displayOnceMap.get(TypeOnce.CardUpdate).set(paymentSchedule.id, paymentScheduleItem.id);
return (
<FabButton onClick={toggleUpdateCardModal}
<FabButton key={`update-card-${paymentSchedule.id}`}
onClick={toggleUpdateCardModal}
icon={<i className="fas fa-credit-card"/>}>
{t('app.shared.payment_schedule_item_actions.update_card')}
</FabButton>
@ -169,7 +168,7 @@ export const PaymentScheduleItemActions: React.FC<PaymentScheduleItemActionsProp
*/
const errorActions = (): ReactElement => {
// if the payment schedule is canceled/in error, the schedule is over, and we can't update the card
displayOnceMap.get(TypeOnce.CardUpdate).set(paymentSchedule.id, true);
displayOnceMap.get(TypeOnce.CardUpdate).set(paymentSchedule.id, paymentScheduleItem.id);
if (isPrivileged()) {
return cancelSubscriptionButton();
} else {
@ -298,7 +297,7 @@ export const PaymentScheduleItemActions: React.FC<PaymentScheduleItemActionsProp
});
};
if (!displayOnceMap.get(TypeOnce.CardUpdate) || !displayOnceMap.get(TypeOnce.SubscriptionCancel)) return null;
if (!show) return null;
return (
<span className="payment-schedule-item-actions">
@ -311,58 +310,58 @@ export const PaymentScheduleItemActions: React.FC<PaymentScheduleItemActionsProp
{paymentScheduleItem.state === PaymentScheduleItemState.New && newActions()}
<div className="modals">
{/* Confirm the cashing of the current deadline by check */}
<FabModal title={t('app.shared.schedules_table.confirm_check_cashing')}
<FabModal title={t('app.shared.payment_schedule_item_actions.confirm_check_cashing')}
isOpen={showConfirmCashing}
toggleModal={toggleConfirmCashingModal}
onConfirm={onCheckCashingConfirmed}
closeButton={true}
confirmButton={t('app.shared.schedules_table.confirm_button')}>
confirmButton={t('app.shared.payment_schedule_item_actions.confirm_button')}>
<span>
{t('app.shared.schedules_table.confirm_check_cashing_body', {
{t('app.shared.payment_schedule_item_actions.confirm_check_cashing_body', {
AMOUNT: FormatLib.price(paymentScheduleItem.amount),
DATE: FormatLib.date(paymentScheduleItem.due_date)
})}
</span>
</FabModal>
{/* Confirm the bank transfer for the current deadline */}
<FabModal title={t('app.shared.schedules_table.confirm_bank_transfer')}
<FabModal title={t('app.shared.payment_schedule_item_actions.confirm_bank_transfer')}
isOpen={showConfirmTransfer}
toggleModal={toggleConfirmTransferModal}
onConfirm={onTransferConfirmed}
closeButton={true}
confirmButton={t('app.shared.schedules_table.confirm_button')}>
confirmButton={t('app.shared.payment_schedule_item_actions.confirm_button')}>
<span>
{t('app.shared.schedules_table.confirm_bank_transfer_body', {
{t('app.shared.payment_schedule_item_actions.confirm_bank_transfer_body', {
AMOUNT: FormatLib.price(paymentScheduleItem.amount),
DATE: FormatLib.date(paymentScheduleItem.due_date)
})}
</span>
</FabModal>
{/* Cancel the subscription */}
<FabModal title={t('app.shared.schedules_table.cancel_subscription')}
<FabModal title={t('app.shared.payment_schedule_item_actions.cancel_subscription')}
isOpen={showCancelSubscription}
toggleModal={toggleCancelSubscriptionModal}
onConfirm={onCancelSubscriptionConfirmed}
closeButton={true}
confirmButton={t('app.shared.schedules_table.confirm_button')}>
{t('app.shared.schedules_table.confirm_cancel_subscription')}
confirmButton={t('app.shared.payment_schedule_item_actions.confirm_button')}>
{t('app.shared.payment_schedule_item_actions.confirm_cancel_subscription')}
</FabModal>
<StripeElements>
{/* 3D secure confirmation */}
<StripeConfirmModal isOpen={showResolveAction}
toggleModal={toggleResolveActionModal}
onSuccess={afterConfirmAction}
paymentScheduleItemId={paymentScheduleItem.id} />
{/* Update credit card */}
<UpdateCardModal isOpen={showUpdateCard}
toggleModal={toggleUpdateCardModal}
operator={operator}
afterSuccess={handleCardUpdateSuccess}
onError={onError}
schedule={paymentSchedule}>
</UpdateCardModal>
</StripeElements>
{/* 3D secure confirmation */}
<StripeConfirmModal isOpen={showResolveAction}
toggleModal={toggleResolveActionModal}
onSuccess={afterConfirmAction}
paymentScheduleItemId={paymentScheduleItem.id} />
{/* Update credit card */}
<UpdateCardModal isOpen={showUpdateCard}
toggleModal={toggleUpdateCardModal}
operator={operator}
afterSuccess={handleCardUpdateSuccess}
onError={onError}
schedule={paymentSchedule}>
</UpdateCardModal>
</div>
</span>
);
};
PaymentScheduleItemActions.defaultProps = { show: false };

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

@ -10,6 +10,7 @@ import {
} from '../../models/payment-schedule';
import FormatLib from '../../lib/format';
import { PaymentScheduleItemActions, TypeOnce } from './payment-schedule-item-actions';
import { StripeElements } from '../payment/stripe/stripe-elements';
interface PaymentSchedulesTableProps {
paymentSchedules: Array<PaymentSchedule>,
@ -29,7 +30,10 @@ const PaymentSchedulesTableComponent: React.FC<PaymentSchedulesTableProps> = ({
// for each payment schedule: are the details (all deadlines) shown or hidden?
const [showExpanded, setShowExpanded] = useState<Map<number, boolean>>(new Map());
// we want to display some buttons only once. This map keep track of the buttons that have been displayed.
const [displayOnceMap] = useState<Map<TypeOnce, Map<number, boolean>>>(new Map());
const [displayOnceMap] = useState<Map<TypeOnce, Map<number, number>>>(new Map([
[TypeOnce.SubscriptionCancel, new Map()],
[TypeOnce.CardUpdate, new Map()]
]));
/**
* Check if the requested payment schedule is displayed with its deadlines (PaymentScheduleItem) or without them
@ -107,69 +111,72 @@ const PaymentSchedulesTableComponent: React.FC<PaymentSchedulesTableProps> = ({
return (
<div>
<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} />
</td>
</tr>)}
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>)}
</tbody>
</table>
<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>
);
};

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

@ -498,19 +498,20 @@ en:
method_card: "by card"
method_check: "by check"
method_transfer: "by transfer"
payment_schedule_item_actions:
download: "Download"
cancel_subscription: "Cancel the subscription"
confirm_payment: "Confirm payment"
solve: "Solve"
confirm_check: "Confirm cashing"
resolve_action: "Resolve the action"
update_card: "Update the card"
please_ask_reception: "For any questions, please contact the FabLab's reception."
confirm_button: "Confirm"
confirm_check_cashing: "Confirm the cashing of the check"
confirm_check_cashing_body: "You must cash a check of {AMOUNT} for the deadline of {DATE}. By confirming the cashing of the check, an invoice will be generated for this due date."
confirm_bank_transfer: "Confirm the bank transfer"
confirm_bank_transfer_body: "You must confirm the receipt of {AMOUNT} for the deadline of {DATE}. By confirming the bank transfer, an invoice will be generated for this due date."
confirm_button: "Confirm"
resolve_action: "Resolve the action"
ok_button: "OK"
cancel_subscription: "Cancel the subscription"
confirm_cancel_subscription: "You're about to cancel this payment schedule and the related subscription. Are you sure?"
please_ask_reception: "For any questions, please contact the FabLab's reception."
payment_modal:
online_payment_disabled: "Online payment is not available. Please contact the FabLab's reception directly."
unexpected_error: "An error occurred. Please report this issue to the Fab-Manager's team."

2
tsconfig.json
View File

@ -4,7 +4,7 @@
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom", "es2015.collection", "es2015.iterable"],
"module": "es6",
"module": "ES2020",
"moduleResolution": "node",
"sourceMap": true,
"target": "es5",