fix #4880

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