diff --git a/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx b/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx index a1288c337..20c3b7178 100644 --- a/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx +++ b/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx @@ -106,6 +106,42 @@ export const PaymentPossibleWithFee = createExample(TestedComponent, { }, }); +import beer from "../../static-dev/beer.png"; + +export const TicketWithAProductList = createExample(TestedComponent, { + uri: "taler://pay/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0", + payStatus: { + status: PreparePayResultType.PaymentPossible, + amountEffective: "USD:10", + amountRaw: "USD:10", + noncePriv: "", + contractTerms: { + nonce: "123213123", + merchant: { + name: "someone", + }, + amount: "USD:10", + products: [ + { + description: "beer", + price: "USD:1", + quantity: 10, + image: beer, + }, + { + description: "brown beer", + price: "USD:2", + quantity: 10, + image: beer, + }, + ], + summary: "some beers", + } as Partial as any, + contractTermsHash: "123456", + proposalId: "proposal1234", + }, +}); + export const AlreadyConfirmedWithFullfilment = createExample(TestedComponent, { payStatus: { status: PreparePayResultType.AlreadyConfirmed, 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 ; return (
setShowQR((qr) => !qr)}> @@ -383,12 +386,40 @@ export function PaymentRequestView({ kind="neutral" /> )} + {contractTerms.products && ( + + )}
); } +function ProductList({ products }: { products: Product[] }): VNode { + return ( + + + List of products + +
+ {products.map((p, i) => ( +
+
+ +
+
+
{p.description}
+
+ {p.price} x {p.quantity} {p.unit ? `(${p.unit})` : ``} +
+
+
+ ))} +
+
+ ); +} + function amountToString(text: AmountLike): string { const aj = Amounts.jsonifyAmount(text); const amount = Amounts.stringifyValue(aj, 2); diff --git a/packages/taler-wallet-webextension/static-dev/beer.png b/packages/taler-wallet-webextension/static-dev/beer.png new file mode 100644 index 000000000..1116db7e6 Binary files /dev/null and b/packages/taler-wallet-webextension/static-dev/beer.png differ