diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx index 0537621bf..e77e7d542 100644 --- a/packages/taler-wallet-webextension/src/components/styled/index.tsx +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -27,13 +27,12 @@ export const PaymentStatus = styled.div<{ color: string }>` background-color: ${p => p.color}; ` -export const WalletAction = styled.section` +export const WalletAction = styled.div` display: flex; text-align: center; flex-direction: column; justify-content: space-between; align-items: center; - /* max-width: 50%; */ margin: auto; height: 100%; diff --git a/packages/taler-wallet-webextension/src/cta/Pay.tsx b/packages/taler-wallet-webextension/src/cta/Pay.tsx index e7a3415ac..8e02cf6bb 100644 --- a/packages/taler-wallet-webextension/src/cta/Pay.tsx +++ b/packages/taler-wallet-webextension/src/cta/Pay.tsx @@ -30,7 +30,7 @@ import { useEffect, useState } from "preact/hooks"; import { LogoHeader } from "../components/LogoHeader"; import { Part } from "../components/Part"; import { QR } from "../components/QR"; -import { ButtonSuccess, LinkSuccess, SuccessBox, WalletAction, WarningBox } from "../components/styled"; +import { ButtonSuccess, ErrorBox, LinkSuccess, SuccessBox, WalletAction, WarningBox } from "../components/styled"; import { useBalances } from "../hooks/useBalances"; import * as wxApi from "../wxApi"; @@ -85,7 +85,7 @@ const doPayment = async (payStatus: PreparePayResult): Promise(undefined); const [payResult, setPayResult] = useState(undefined); - const [payErrMsg, setPayErrMsg] = useState(""); + const [payErrMsg, setPayErrMsg] = useState(undefined); const balance = useBalances() const balanceWithoutError = balance?.error ? [] : (balance?.response.balances || []) @@ -96,8 +96,14 @@ export function PayPage({ talerPayUri }: Props): JSX.Element { useEffect(() => { if (!talerPayUri) return; const doFetch = async (): Promise => { - const p = await wxApi.preparePay(talerPayUri); - setPayStatus(p); + try { + const p = await wxApi.preparePay(talerPayUri); + setPayStatus(p); + } catch (e) { + if (e instanceof Error) { + setPayErrMsg(e.message) + } + } }; doFetch(); }, [talerPayUri]); @@ -107,28 +113,23 @@ export function PayPage({ talerPayUri }: Props): JSX.Element { } if (!payStatus) { + if (payErrMsg) { + return + +

+ {i18n.str`Digital cash payment`} +

+
+

Could not get the payment information for this order

+ + {payErrMsg} + +
+
+ } return Loading payment information ...; } - // if (payResult && payResult.type === ConfirmPayResultType.Done) { - // if (payResult.contractTerms.fulfillment_message) { - // const obj = { - // fulfillment_message: payResult.contractTerms.fulfillment_message, - // fulfillment_message_i18n: - // payResult.contractTerms.fulfillment_message_i18n, - // }; - // const msg = getJsonI18n(obj, "fulfillment_message"); - // return ( - //
- //

Payment succeeded.

- //

{msg}

- //
- // ); - // } else { - // return Redirecting ...; - // } - // } - const onClick = async () => { try { const res = await doPayment(payStatus) @@ -249,7 +250,7 @@ export function PaymentRequestView({ uri, payStatus, onClick, payErrMsg, balance {i18n.str`Digital cash payment`} {payStatus.status === PreparePayResultType.AlreadyConfirmed && - (payStatus.paid ? Already paid : Already confirmed ) + (payStatus.paid ? Already paid : Already claimed ) }
{payStatus.status !== PreparePayResultType.InsufficientBalance && Amounts.isNonZero(totalFees) &&