withdraw design

1 files changed, 133 insertions, 19 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
index 9719b8f5e..6263285fd 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
@@ -24,10 +24,11 @@
 import { AmountLike, Amounts, i18n, WithdrawUriInfoResponse } from '@gnu-taler/taler-util';
 import { ExchangeWithdrawDetails } from '@gnu-taler/taler-wallet-core/src/operations/withdraw';
 import { useEffect, useState } from "preact/hooks";
-import { JSX } from "preact/jsx-runtime";
+import { CheckboxOutlined } from '../components/CheckboxOutlined';
+import { ExchangeXmlTos } from '../components/ExchangeToS';
 import { LogoHeader } from '../components/LogoHeader';
 import { Part } from '../components/Part';
-import { ButtonSuccess, WalletAction } from '../components/styled';
+import { ButtonDestructive, ButtonSuccess, ButtonWarning, LinkSuccess, TermsOfService, WalletAction } from '../components/styled';
 import {
   acceptWithdrawal, getExchangeWithdrawalInfo, getWithdrawalDetailsForUri, onUpdateNotification
 } from "../wxApi";
@@ -40,19 +41,42 @@ interface Props {
 export interface ViewProps {
   details: ExchangeWithdrawDetails;
   amount: string;
-  accept: () => Promise<void>;
-  setCancelled: (b: boolean) => void;
-  setSelecting: (b: boolean) => void;
+  onWithdraw: () => Promise<void>;
+  // setCancelled: (b: boolean) => void;
+  // setSelecting: (b: boolean) => void;
+  onReview: (b: boolean) => void;
+  onAccept: (b: boolean) => void;
+  reviewing: boolean;
+  accepted: boolean;
+  terms: {
+    value?: TermsDocument;
+    status: TermsStatus;
+  }
+
 };
 
+type TermsStatus = 'new' | 'accepted' | 'changed' | 'notfound';
+
+type TermsDocument = TermsDocumentXml | TermsDocumentHtml;
+
+interface TermsDocumentXml {
+  type: 'xml',
+  document: Document,
+}
+
+interface TermsDocumentHtml {
+  type: 'html',
+  href: string,
+}
+
 function amountToString(text: AmountLike) {
   const aj = Amounts.jsonifyAmount(text)
   const amount = Amounts.stringifyValue(aj)
   return `${amount} ${aj.currency}`
 }
 
-
-export function View({ details, amount, accept, setCancelled, setSelecting }: ViewProps) {
+export function View({ details, amount, onWithdraw, terms, reviewing, onReview, onAccept, accepted }: ViewProps) {
+  const needsReview = terms.status === 'changed' || terms.status === 'new'
 
   return (
     <WalletAction style={{ textAlign: 'center' }}>
@@ -70,17 +94,101 @@ export function View({ details, amount, accept, setCancelled, setSelecting }: Vi
           <Part title="Exchange" text={details.exchangeInfo.baseUrl} kind='neutral' big />
         </div>
       </section>
-      <section>
-
-        <div>
-          <ButtonSuccess
+      {!reviewing &&
+        <section>
+          <LinkSuccess
             upperCased
-            disabled={!details.exchangeInfo.baseUrl}
-            onClick={accept}
           >
-            {i18n.str`Accept fees and withdraw`}
-          </ButtonSuccess>
-        </div>
+            {i18n.str`Edit exchange`}
+          </LinkSuccess>
+        </section>
+      }
+      {!reviewing && accepted &&
+        <section>
+          <LinkSuccess
+            upperCased
+            onClick={() => onReview(true)}
+          >
+            {i18n.str`Show terms of service`}
+          </LinkSuccess>
+        </section>
+      }
+      {reviewing &&
+        <section>
+          <TermsOfService>
+            {terms.status !== 'accepted' && terms.value && terms.value.type === 'xml' && <ExchangeXmlTos doc={terms.value.document} />}
+          </TermsOfService>
+        </section>}
+      {reviewing && accepted &&
+        <section>
+          <LinkSuccess
+            upperCased
+            onClick={() => onReview(false)}
+          >
+            {i18n.str`Hide terms of service`}
+          </LinkSuccess>
+        </section>
+      }
+      {(reviewing || accepted) &&
+        <section>
+          <div>
+            <CheckboxOutlined
+              name="terms"
+              enabled={accepted}
+              label={i18n.str`I accept the exchange terms of service`}
+              onToggle={() => {
+                onAccept(!accepted)
+                onReview(false)
+              }}
+            />
+          </div>
+        </section>
+      }
+
+      <section>
+        {terms.status === 'new' && !accepted &&
+          <div>
+            <ButtonSuccess
+              upperCased
+              disabled={!details.exchangeInfo.baseUrl}
+              onClick={() => onReview(true)}
+            >
+              {i18n.str`Review exchange terms of service`}
+            </ButtonSuccess>
+          </div>
+        }
+        {terms.status === 'changed' && !accepted &&
+          <div>
+            <ButtonWarning
+              upperCased
+              disabled={!details.exchangeInfo.baseUrl}
+              onClick={() => onReview(true)}
+            >
+              {i18n.str`Review new version of terms of service`}
+            </ButtonWarning>
+          </div>
+        }
+        {(terms.status === 'accepted' || (needsReview && accepted)) &&
+          <div>
+            <ButtonSuccess
+              upperCased
+              disabled={!details.exchangeInfo.baseUrl}
+              onClick={onWithdraw}
+            >
+              {i18n.str`Confirm withdrawal`}
+            </ButtonSuccess>
+          </div>
+        }
+        {terms.status === 'notfound' &&
+          <div>
+            <ButtonDestructive
+              upperCased
+              disabled={true}
+            >
+              {i18n.str`Exchange doesn't have terms of service`}
+            </ButtonDestructive>
+          </div>
+        }
       </section>
     </WalletAction>
   )
@@ -93,6 +201,8 @@ export function WithdrawPage({ talerWithdrawUri, ...rest }: Props): JSX.Element
   const [selecting, setSelecting] = useState(false);
   const [error, setError] = useState<boolean>(false);
   const [updateCounter, setUpdateCounter] = useState(1);
+  const [reviewing, setReviewing] = useState<boolean>(false)
+  const [accepted, setAccepted] = useState<boolean>(false)
 
   useEffect(() => {
     return onUpdateNotification(() => {
@@ -132,7 +242,7 @@ export function WithdrawPage({ talerWithdrawUri, ...rest }: Props): JSX.Element
     return <span><i18n.Translate>missing withdraw uri</i18n.Translate></span>;
   }
 
-  const accept = async (): Promise<void> => {
+  const onWithdraw = async (): Promise<void> => {
     if (!details) {
       throw Error("can't accept, no exchange selected");
     }
@@ -157,9 +267,13 @@ export function WithdrawPage({ talerWithdrawUri, ...rest }: Props): JSX.Element
     return <span><i18n.Translate>Getting withdrawal details.</i18n.Translate></span>;
   }
 
-  return <View accept={accept}
-    setCancelled={setCancelled} setSelecting={setSelecting}
+  return <View onWithdraw={onWithdraw}
+    // setCancelled={setCancelled} setSelecting={setSelecting}
     details={details} amount={uriInfo.amount}
+    terms={{} as any}
+    accepted={accepted} onAccept={setAccepted}
+    reviewing={reviewing} onReview={setReviewing}
+  // terms={[]}
   />
 }