diff --git a/react/lib/components/PaymentDialog/PaymentDialog.tsx b/react/lib/components/PaymentDialog/PaymentDialog.tsx index c7b533d1..ec1c634c 100644 --- a/react/lib/components/PaymentDialog/PaymentDialog.tsx +++ b/react/lib/components/PaymentDialog/PaymentDialog.tsx @@ -67,6 +67,7 @@ export interface PaymentDialogProps extends ButtonProps { transactionText?: string convertedCurrencyObj?: CurrencyObject; setConvertedCurrencyObj?: Function; + sendAnotherText?: string; } export const PaymentDialog = ({ @@ -129,10 +130,12 @@ export const PaymentDialog = ({ setConvertedCurrencyObj, theme: themeProp, donationAddress, - donationRate + donationRate, + sendAnotherText = 'Send Another Payment' }: PaymentDialogProps): React.ReactElement => { const [success, setSuccess] = useState(false); const [internalDisabled, setInternalDisabled] = useState(false); + const [resetKey, setResetKey] = useState(0); // Compute auto-close delay (ms) using shared util @@ -152,6 +155,12 @@ export const PaymentDialog = ({ setSuccess(false); }; + const handleSendAnother = (): void => { + clearAutoCloseTimer(); + setSuccess(false); + setResetKey(prev => prev + 1); + }; + const handleSuccess = (transaction: Transaction): void => { if (dialogOpen === false) { setDialogOpen(true); @@ -259,11 +268,12 @@ export const PaymentDialog = ({ donationRate={donationRate} convertedCurrencyObj={convertedCurrencyObj} setConvertedCurrencyObj={setConvertedCurrencyObj} + resetKey={resetKey} foot={success && ( )} /> diff --git a/react/lib/components/Widget/WidgetContainer.tsx b/react/lib/components/Widget/WidgetContainer.tsx index e0836d23..e24ec8ef 100644 --- a/react/lib/components/Widget/WidgetContainer.tsx +++ b/react/lib/components/Widget/WidgetContainer.tsx @@ -54,6 +54,7 @@ export interface WidgetContainerProps donationAddress?: string donationRate?: number convertedCurrencyObj?: CurrencyObject; + resetKey?: number; } const snackbarOptionsSuccess: OptionsObject = { @@ -138,6 +139,7 @@ export const WidgetContainer: React.FunctionComponent = donationRate, convertedCurrencyObj, setConvertedCurrencyObj, + resetKey, ...widgetProps } = props; const [internalCurrencyObj, setInternalCurrencyObj] = useState(); @@ -161,6 +163,13 @@ export const WidgetContainer: React.FunctionComponent = const [shiftCompleted, setShiftCompleted] = useState(false); + useEffect(() => { + if (resetKey !== undefined && resetKey > 0) { + setSuccess(false); + setShiftCompleted(false); + } + }, [resetKey]); + const paymentClient = getAltpaymentClient() const addrType = getCurrencyTypeFromAddress(to);