cta stories and input filled mui

4 files changed, 73 insertions, 43 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx b/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx
index 3804ab3d3..7dbb7723d 100644
--- a/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx
@@ -147,7 +147,7 @@ export const TicketWithAProductList = createExample(TestedComponent, {
   },
 });
 
-export const AlreadyConfirmedWithFullfilment = createExample(TestedComponent, {
+export const AlreadyConfirmedByOther = createExample(TestedComponent, {
   payStatus: {
     status: PreparePayResultType.AlreadyConfirmed,
     amountEffective: "USD:10",
@@ -156,8 +156,6 @@ export const AlreadyConfirmedWithFullfilment = createExample(TestedComponent, {
       merchant: {
         name: "someone",
       },
-      fulfillment_message:
-        "congratulations! you are looking at the fulfillment message! ",
       summary: "some beers",
       amount: "USD:10",
     } as Partial<ContractTerms> as any,
@@ -167,28 +165,25 @@ export const AlreadyConfirmedWithFullfilment = createExample(TestedComponent, {
   },
 });
 
-export const AlreadyConfirmedWithoutFullfilment = createExample(
-  TestedComponent,
-  {
-    payStatus: {
-      status: PreparePayResultType.AlreadyConfirmed,
-      amountEffective: "USD:10",
-      amountRaw: "USD:10",
-      contractTerms: {
-        merchant: {
-          name: "someone",
-        },
-        summary: "some beers",
-        amount: "USD:10",
-      } as Partial<ContractTerms> as any,
-      contractTermsHash: "123456",
-      proposalId: "proposal1234",
-      paid: false,
-    },
+export const AlreadyPaidWithoutFulfillment = createExample(TestedComponent, {
+  payStatus: {
+    status: PreparePayResultType.AlreadyConfirmed,
+    amountEffective: "USD:10",
+    amountRaw: "USD:10",
+    contractTerms: {
+      merchant: {
+        name: "someone",
+      },
+      summary: "some beers",
+      amount: "USD:10",
+    } as Partial<ContractTerms> as any,
+    contractTermsHash: "123456",
+    proposalId: "proposal1234",
+    paid: true,
   },
-);
+});
 
-export const AlreadyPaid = createExample(TestedComponent, {
+export const AlreadyPaidWithFulfillment = createExample(TestedComponent, {
   payStatus: {
     status: PreparePayResultType.AlreadyConfirmed,
     amountEffective: "USD:10",
diff --git a/packages/taler-wallet-webextension/src/cta/Pay.tsx b/packages/taler-wallet-webextension/src/cta/Pay.tsx
index 13fb69853..359625999 100644
--- a/packages/taler-wallet-webextension/src/cta/Pay.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Pay.tsx
@@ -105,6 +105,23 @@ export function PayPage({
     return { payStatus, balance };
   }, [NotificationType.CoinWithdrawn]);
 
+  useEffect(() => {
+    const payStatus =
+      hook && !hook.hasError ? hook.response.payStatus : undefined;
+    if (
+      payStatus &&
+      payStatus.status === PreparePayResultType.AlreadyConfirmed &&
+      payStatus.paid
+    ) {
+      const fu = payStatus.contractTerms.fulfillment_url;
+      if (fu) {
+        setTimeout(() => {
+          document.location.href = fu;
+        }, 3000);
+      }
+    }
+  }, []);
+
   if (!hook) {
     return <Loading />;
   }
@@ -172,20 +189,6 @@ export function PaymentRequestView({
   let totalFees: AmountJson = Amounts.getZero(payStatus.amountRaw);
   const contractTerms: ContractTerms = payStatus.contractTerms;
 
-  useEffect(() => {
-    if (
-      payStatus.status === PreparePayResultType.AlreadyConfirmed &&
-      payStatus.paid
-    ) {
-      const fu = payStatus.contractTerms.fulfillment_url;
-      if (fu) {
-        setTimeout(() => {
-          document.location.href = fu;
-        }, 3000);
-      }
-    }
-  });
-
   if (!contractTerms) {
     return (
       <ErrorMessage
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.stories.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw.stories.tsx
index dee063637..eb18251fd 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw.stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw.stories.tsx
@@ -136,9 +136,7 @@ export const TermsReviewingHTML = createExample(TestedComponent, {
   terms: {
     content: {
       type: "html",
-      href: new URL(
-        `data:text/html;base64,${Buffer.from(termsHtml).toString("base64")}`,
-      ),
+      href: new URL(`data:text/html;base64,${toBase64(termsHtml)}`),
     },
     version: "",
     status: "new",
@@ -146,6 +144,14 @@ export const TermsReviewingHTML = createExample(TestedComponent, {
   reviewing: true,
 });
 
+function toBase64(str: string): string {
+  return btoa(
+    encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
+      return String.fromCharCode(parseInt(p1, 16));
+    }),
+  );
+}
+
 export const TermsReviewingPDF = createExample(TestedComponent, {
   knownExchanges: exchangeList,
   exchangeBaseUrl: "exchange.demo.taler.net",
@@ -166,9 +172,7 @@ export const TermsReviewingPDF = createExample(TestedComponent, {
   terms: {
     content: {
       type: "pdf",
-      location: new URL(
-        `data:text/html;base64,${Buffer.from(termsPdf).toString("base64")}`,
-      ),
+      location: new URL(`data:text/html;base64,${toBase64(termsPdf)}`),
     },
     status: "new",
     version: "",
diff --git a/packages/taler-wallet-webextension/src/cta/index.stories.ts b/packages/taler-wallet-webextension/src/cta/index.stories.ts
new file mode 100644
index 000000000..225b784a6
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/cta/index.stories.ts
@@ -0,0 +1,28 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import * as a1 from "./Deposit.stories.jsx";
+import * as a3 from "./Pay.stories.jsx";
+import * as a4 from "./Refund.stories.jsx";
+import * as a5 from "./Tip.stories.jsx";
+import * as a6 from "./Withdraw.stories.jsx";
+
+export default [a1, a3, a4, a5, a6];