add storybook

8 files changed, 155 insertions, 47 deletions

diff --git a/packages/taler-wallet-webextension/src/i18n.tsx b/packages/taler-wallet-webextension/src/i18n.tsx
index 83de768c4..4d5f83416 100644
--- a/packages/taler-wallet-webextension/src/i18n.tsx
+++ b/packages/taler-wallet-webextension/src/i18n.tsx
@@ -72,6 +72,11 @@ interface TranslateProps {
    * Props to give to the wrapped component.
    */
   wrapProps?: any;
+
+  /**
+   * Translated elements
+   */
+  children: ComponentChildren;
 }
 
 function getTranslatedChildren(
@@ -117,16 +122,14 @@ function getTranslatedChildren(
  * </Translate>
  * ```
  */
-export class Translate extends Component<TranslateProps, any> {
-  render() {
-    const s = stringifyChildren(this.props.children);
+export function Translate({children, wrap, wrapProps}: TranslateProps): VNode {
+    const s = stringifyChildren(children);
     const translation: string = i18nCore.jed.ngettext(s, s, 1);
-    const result = getTranslatedChildren(translation, this.props.children);
-    if (!this.props.wrap) {
+    const result = getTranslatedChildren(translation, children);
+    if (!wrap) {
       return <div>{result}</div>;
     }
-    return h(this.props.wrap, this.props.wrapProps, result);
-  }
+    return h(wrap, wrapProps, result);
 }
 
 /**
diff --git a/packages/taler-wallet-webextension/src/pages/pay.tsx b/packages/taler-wallet-webextension/src/pages/pay.tsx
index 10f83165d..fd8b0f3ae 100644
--- a/packages/taler-wallet-webextension/src/pages/pay.tsx
+++ b/packages/taler-wallet-webextension/src/pages/pay.tsx
@@ -222,6 +222,9 @@ export function TalerPayDialog({ talerPayUri }: Props): JSX.Element {
   );
 }
 
+/**
+ * @deprecated to be removed
+ */
 export function createPayPage(): JSX.Element {
   const url = new URL(document.location.href);
   const talerPayUri = url.searchParams.get("talerPayUri");
diff --git a/packages/taler-wallet-webextension/src/pages/refund.tsx b/packages/taler-wallet-webextension/src/pages/refund.tsx
index 49b78160e..1991bc9d8 100644
--- a/packages/taler-wallet-webextension/src/pages/refund.tsx
+++ b/packages/taler-wallet-webextension/src/pages/refund.tsx
@@ -88,6 +88,9 @@ export function RefundStatusView({ talerRefundUri }: Props): JSX.Element {
   );
 }
 
+/**
+ * @deprecated to be removed
+ */
 export function createRefundPage(): JSX.Element {
   const url = new URL(document.location.href);
 
diff --git a/packages/taler-wallet-webextension/src/pages/reset-required.tsx b/packages/taler-wallet-webextension/src/pages/reset-required.tsx
index 7f2676263..0be7c09c5 100644
--- a/packages/taler-wallet-webextension/src/pages/reset-required.tsx
+++ b/packages/taler-wallet-webextension/src/pages/reset-required.tsx
@@ -89,6 +89,9 @@ class ResetNotification extends Component<any, State> {
   }
 }
 
+/**
+ * @deprecated to be removed
+ */
 export function createResetRequiredPage(): JSX.Element {
   return <ResetNotification />;
 }
diff --git a/packages/taler-wallet-webextension/src/pages/tip.tsx b/packages/taler-wallet-webextension/src/pages/tip.tsx
index 8528a5511..d832976d8 100644
--- a/packages/taler-wallet-webextension/src/pages/tip.tsx
+++ b/packages/taler-wallet-webextension/src/pages/tip.tsx
@@ -96,6 +96,9 @@ export function TalerTipDialog({ talerTipUri }: Props): JSX.Element {
   }
 }
 
+/**
+ * @deprecated to be removed
+ */
 export function createTipPage(): JSX.Element {
   const url = new URL(document.location.href);
   const talerTipUri = url.searchParams.get("talerTipUri");
diff --git a/packages/taler-wallet-webextension/src/pages/welcome.tsx b/packages/taler-wallet-webextension/src/pages/welcome.tsx
index 1ea0f6a04..cdc4913e4 100644
--- a/packages/taler-wallet-webextension/src/pages/welcome.tsx
+++ b/packages/taler-wallet-webextension/src/pages/welcome.tsx
@@ -194,6 +194,9 @@ export function Welcome(): JSX.Element {
   );
 }
 
+/**
+ * @deprecated to be removed
+ */
 export function createWelcomePage(): JSX.Element {
   return <Welcome />;
 }
diff --git a/packages/taler-wallet-webextension/src/pages/withdraw.stories.tsx b/packages/taler-wallet-webextension/src/pages/withdraw.stories.tsx
new file mode 100644
index 000000000..86f0eec90
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/pages/withdraw.stories.tsx
@@ -0,0 +1,66 @@
+/*
+ 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 { h } from 'preact';
+import { View, ViewProps } from './withdraw';
+
+
+export default {
+  title: 'wallet/withdraw',
+  component: View,
+  argTypes: {
+  },
+};
+
+export const WithoutURI = (a: any) => <View {...a} />;
+WithoutURI.args = {
+} as ViewProps
+
+export const WithoutDetails = (a: any) => <View {...a} />;
+WithoutDetails.args = {
+  talerWithdrawUri: 'http://something'
+} as ViewProps
+
+export const Cancelled = (a: any) => <View {...a} />;
+Cancelled.args = {
+  talerWithdrawUri: 'http://something',
+  details: {
+    amount: 'USD:2',
+  },
+  cancelled: true
+} as ViewProps
+
+export const CompleteWithExchange = (a: any) => <View {...a} />;
+CompleteWithExchange.args = {
+  talerWithdrawUri: 'http://something',
+  details: {
+    amount: 'USD:2',
+  },
+  selectedExchange: 'Some exchange'
+} as ViewProps
+
+export const CompleteWithoutExchange = (a: any) => <View {...a} />;
+CompleteWithoutExchange.args = {
+  talerWithdrawUri: 'http://something',
+  details: {
+    amount: 'USD:2',
+  },
+} as ViewProps
diff --git a/packages/taler-wallet-webextension/src/pages/withdraw.tsx b/packages/taler-wallet-webextension/src/pages/withdraw.tsx
index d99bcf9c0..7b6a06d20 100644
--- a/packages/taler-wallet-webextension/src/pages/withdraw.tsx
+++ b/packages/taler-wallet-webextension/src/pages/withdraw.tsx
@@ -37,34 +37,18 @@ import { JSX } from "preact/jsx-runtime";
 interface Props {
   talerWithdrawUri?: string;
 }
-export function WithdrawalDialog({ talerWithdrawUri }: Props): JSX.Element {
-  const [details, setDetails] = useState<WithdrawUriInfoResponse | undefined>(undefined);
-  const [selectedExchange, setSelectedExchange] = useState<
-    string | undefined
-  >(undefined);
-  const [cancelled, setCancelled] = useState(false);
-  const [selecting, setSelecting] = useState(false);
-  const [errMsg, setErrMsg] = useState<string | undefined>("");
-  const [updateCounter, setUpdateCounter] = useState(1);
-
-  useEffect(() => {
-    return onUpdateNotification(() => {
-      setUpdateCounter(updateCounter + 1);
-    });
-  }, []);
-
-  useEffect(() => {
-    if (!talerWithdrawUri) return
-    const fetchData = async (): Promise<void> => {
-      const res = await getWithdrawalDetailsForUri({ talerWithdrawUri });
-      setDetails(res);
-      if (res.defaultExchangeBaseUrl) {
-        setSelectedExchange(res.defaultExchangeBaseUrl);
-      }
-    };
-    fetchData();
-  }, [selectedExchange, errMsg, selecting, talerWithdrawUri, updateCounter]);
 
+export interface ViewProps {
+  talerWithdrawUri?: string;
+  details?: WithdrawUriInfoResponse;
+  cancelled?: boolean;
+  selectedExchange?: string;
+  accept: () => Promise<void>;
+  setCancelled: (b: boolean) => void;
+  setSelecting: (b: boolean) => void;
+};
+
+export function View({ talerWithdrawUri, details, cancelled, selectedExchange, accept, setCancelled, setSelecting }: ViewProps) {
   if (!talerWithdrawUri) {
     return <span>missing withdraw uri</span>;
   }
@@ -77,18 +61,6 @@ export function WithdrawalDialog({ talerWithdrawUri }: Props): JSX.Element {
     return <span>Withdraw operation has been cancelled.</span>;
   }
 
-  const accept = async (): Promise<void> => {
-    if (!selectedExchange) {
-      throw Error("can't accept, no exchange selected");
-    }
-    console.log("accepting exchange", selectedExchange);
-    const res = await acceptWithdrawal(talerWithdrawUri, selectedExchange);
-    console.log("accept withdrawal response", res);
-    if (res.confirmTransferUrl) {
-      document.location.href = res.confirmTransferUrl;
-    }
-  };
-
   return (
     <div>
       <h1>Digital Cash Withdrawal</h1>
@@ -133,9 +105,61 @@ export function WithdrawalDialog({ talerWithdrawUri }: Props): JSX.Element {
         </p>
       </div>
     </div>
-  );
+  )
+}
+
+export function WithdrawalDialog({ talerWithdrawUri }: Props): JSX.Element {
+  const [details, setDetails] = useState<WithdrawUriInfoResponse | undefined>(undefined);
+  const [selectedExchange, setSelectedExchange] = useState<
+    string | undefined
+  >(undefined);
+  const [cancelled, setCancelled] = useState(false);
+  const [selecting, setSelecting] = useState(false);
+  const [errMsg, setErrMsg] = useState<string | undefined>("");
+  const [updateCounter, setUpdateCounter] = useState(1);
+
+  useEffect(() => {
+    return onUpdateNotification(() => {
+      setUpdateCounter(updateCounter + 1);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!talerWithdrawUri) return
+    const fetchData = async (): Promise<void> => {
+      const res = await getWithdrawalDetailsForUri({ talerWithdrawUri });
+      setDetails(res);
+      if (res.defaultExchangeBaseUrl) {
+        setSelectedExchange(res.defaultExchangeBaseUrl);
+      }
+    };
+    fetchData();
+  }, [selectedExchange, errMsg, selecting, talerWithdrawUri, updateCounter]);
+
+  const accept = async (): Promise<void> => {
+    if (!talerWithdrawUri) return
+    if (!selectedExchange) {
+      throw Error("can't accept, no exchange selected");
+    }
+    console.log("accepting exchange", selectedExchange);
+    const res = await acceptWithdrawal(talerWithdrawUri, selectedExchange);
+    console.log("accept withdrawal response", res);
+    if (res.confirmTransferUrl) {
+      document.location.href = res.confirmTransferUrl;
+    }
+  };
+
+  return <View accept={accept}
+    setCancelled={setCancelled} setSelecting={setSelecting}
+    cancelled={cancelled} details={details} selectedExchange={selectedExchange}
+    talerWithdrawUri={talerWithdrawUri}
+  />
 }
 
+
+/**
+ * @deprecated to be removed
+ */
 export function createWithdrawPage(): JSX.Element {
   const url = new URL(document.location.href);
   const talerWithdrawUri = url.searchParams.get("talerWithdrawUri");