use logo, website and emai in purchase details

3 files changed, 40 insertions, 2 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
index 83848d005..89b42706f 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
@@ -58,7 +58,7 @@ const commonTransaction = {
   transactionId: "12",
 } as TransactionCommon;
 
-import merchantIcon from "../../static-dev/merchant-icon-11.jpeg";
+import merchantIcon from "../../static-dev/merchant-icon.jpeg";
 
 const exampleData = {
   withdraw: {
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index 8165953ab..1170c9222 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -396,7 +396,45 @@ export function TransactionView({
         )}
         <Part
           title={<i18n.Translate>Merchant</i18n.Translate>}
-          text={transaction.info.merchant.name}
+          text={
+            <Fragment>
+              <div style={{ display: "flex", flexDirection: "row" }}>
+                {transaction.info.merchant.logo && (
+                  <div>
+                    <img
+                      src={transaction.info.merchant.logo}
+                      style={{ width: 64, height: 64, margin: 4 }}
+                    />
+                  </div>
+                )}
+                <div>
+                  <p>{transaction.info.merchant.name}</p>
+                  {transaction.info.merchant.website && (
+                    <a
+                      href={transaction.info.merchant.website}
+                      target="_blank"
+                      style={{ textDecorationColor: "gray" }}
+                      rel="noreferrer"
+                    >
+                      <SmallLightText>
+                        {transaction.info.merchant.website}
+                      </SmallLightText>
+                    </a>
+                  )}
+                  {transaction.info.merchant.email && (
+                    <a
+                      href={`mailto:${transaction.info.merchant.email}`}
+                      style={{ textDecorationColor: "gray" }}
+                    >
+                      <SmallLightText>
+                        {transaction.info.merchant.email}
+                      </SmallLightText>
+                    </a>
+                  )}
+                </div>
+              </div>
+            </Fragment>
+          }
           kind="neutral"
         />
         <Part
diff --git a/packages/taler-wallet-webextension/static-dev/merchant-icon-11.jpeg b/packages/taler-wallet-webextension/static-dev/merchant-icon.jpeg
index 1777936c8..1777936c8 100644
--- a/packages/taler-wallet-webextension/static-dev/merchant-icon-11.jpeg
+++ b/packages/taler-wallet-webextension/static-dev/merchant-icon.jpeg