fix #4880

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<ContractTerms> as any,
+    contractTermsHash: "123456",
+    proposalId: "proposal1234",
+  },
+});
+
 export const AlreadyConfirmedWithFullfilment = createExample(TestedComponent, {
   payStatus: {
     status: PreparePayResultType.AlreadyConfirmed,

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);