diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/cta/Pay.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/cta/Pay.tsx | 31 |
1 files changed, 31 insertions, 0 deletions
diff --git a/packages/taler-wallet-webextension/src/cta/Pay.tsx b/packages/taler-wallet-webextension/src/cta/Pay.tsx index e61d3a9d6..6e73b5566 100644 --- a/packages/taler-wallet-webextension/src/cta/Pay.tsx +++ b/packages/taler-wallet-webextension/src/cta/Pay.tsx @@ -36,6 +36,7 @@ import { NotificationType, PreparePayResult, PreparePayResultType, + Product, } from "@gnu-taler/taler-util"; import { OperationFailedError } from "@gnu-taler/taler-wallet-core"; import { Fragment, h, VNode } from "preact"; @@ -48,6 +49,7 @@ import { ButtonSuccess, ErrorBox, LinkSuccess, + SmallLightText, SuccessBox, WalletAction, WarningBox, @@ -240,6 +242,7 @@ export function PaymentRequestView({ payStatus.status !== PreparePayResultType.AlreadyConfirmed ? `${uri}&n=${payStatus.noncePriv}` : uri; + if (!uri) return <Fragment />; return ( <section> <LinkSuccess upperCased onClick={() => setShowQR((qr) => !qr)}> @@ -383,12 +386,40 @@ export function PaymentRequestView({ kind="neutral" /> )} + {contractTerms.products && ( + <ProductList products={contractTerms.products} /> + )} </section> <ButtonsSection /> </WalletAction> ); } +function ProductList({ products }: { products: Product[] }): VNode { + return ( + <Fragment> + <SmallLightText style={{ margin: ".5em" }}> + List of products + </SmallLightText> + <dl> + {products.map((p, i) => ( + <div key={i} style={{ display: "flex", textAlign: "left" }}> + <div> + <img src={p.image} style={{ width: 32, height: 32 }} /> + </div> + <div> + <dt>{p.description}</dt> + <dd> + {p.price} x {p.quantity} {p.unit ? `(${p.unit})` : ``} + </dd> + </div> + </div> + ))} + </dl> + </Fragment> + ); +} + function amountToString(text: AmountLike): string { const aj = Amounts.jsonifyAmount(text); const amount = Amounts.stringifyValue(aj, 2); |