1 files changed, 27 insertions, 21 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/Refund.tsx b/packages/taler-wallet-webextension/src/wallet/Refund.tsx
index 702217415..bb26d933b 100644
--- a/packages/taler-wallet-webextension/src/wallet/Refund.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Refund.tsx
@@ -32,7 +32,32 @@ import { JSX } from "preact/jsx-runtime";
 interface Props {
   talerRefundUri?: string
 }
-
+export interface ViewProps {
+  applyResult: ApplyRefundResponse;
+}
+export function View({ applyResult }: ViewProps) {
+  return <section class="main">
+    <h1>GNU Taler Wallet</h1>
+    <article class="fade">
+      <h2>Refund Status</h2>
+      <p>
+        The product <em>{applyResult.info.summary}</em> has received a total
+        effective refund of{" "}
+        <AmountView amount={applyResult.amountRefundGranted} />.
+      </p>
+      {applyResult.pendingAtExchange ? (
+        <p>Refund processing is still in progress.</p>
+      ) : null}
+      {!Amounts.isZero(applyResult.amountRefundGone) ? (
+        <p>
+          The refund amount of{" "}
+          <AmountView amount={applyResult.amountRefundGone} />{" "}
+          could not be applied.
+        </p>
+      ) : null}
+    </article>
+  </section>
+}
 export function RefundPage({ talerRefundUri }: Props): JSX.Element {
   const [applyResult, setApplyResult] = useState<ApplyRefundResponse | undefined>(undefined);
   const [errMsg, setErrMsg] = useState<string | undefined>(undefined);
@@ -66,24 +91,5 @@ export function RefundPage({ talerRefundUri }: Props): JSX.Element {
     return <span>Updating refund status</span>;
   }
 
-  return (
-    <>
-      <h2>Refund Status</h2>
-      <p>
-        The product <em>{applyResult.info.summary}</em> has received a total
-        effective refund of{" "}
-        <AmountView amount={applyResult.amountRefundGranted} />.
-      </p>
-      {applyResult.pendingAtExchange ? (
-        <p>Refund processing is still in progress.</p>
-      ) : null}
-      {!Amounts.isZero(applyResult.amountRefundGone) ? (
-        <p>
-          The refund amount of{" "}
-          <AmountView amount={applyResult.amountRefundGone} />
-          could not be applied.
-        </p>
-      ) : null}
-    </>
-  );
+  return <View applyResult={applyResult} />;
 }