mui button impl

7 files changed, 80 insertions, 58 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/Deposit.tsx b/packages/taler-wallet-webextension/src/cta/Deposit.tsx
index 2fc7cbc41..3cbd46e30 100644
--- a/packages/taler-wallet-webextension/src/cta/Deposit.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Deposit.tsx
@@ -44,13 +44,14 @@ import {
 } from "../components/styled/index.js";
 import { useTranslationContext } from "../context/translation.js";
 import { HookError, useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
+import { Button } from "../mui/Button.js";
 import { ButtonHandler } from "../mui/handlers.js";
 import * as wxApi from "../wxApi.js";
 
 interface Props {
   talerDepositUri?: string;
   amount: AmountString;
-  goBack: () => void;
+  goBack: () => Promise<void>;
 }
 
 type State = Loading | Ready | Completed;
@@ -206,11 +207,15 @@ export function View({ state }: ViewProps): VNode {
         />
       </section>
       <section>
-        <ButtonSuccess upperCased onClick={state.confirm.onClick}>
+        <Button
+          variant="contained"
+          color="success"
+          onClick={state.confirm.onClick}
+        >
           <i18n.Translate>
             Deposit {<Amount value={state.effective} />}
           </i18n.Translate>
-        </ButtonSuccess>
+        </Button>
       </section>
     </WalletAction>
   );
diff --git a/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx b/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx
index 76bfa3ab3..04b44fcda 100644
--- a/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx
@@ -33,6 +33,10 @@ export default {
   argTypes: {},
 };
 
+const noop = async (): Promise<void> => {
+  return;
+};
+
 export const NoBalance = createExample(TestedComponent, {
   state: {
     status: "ready",
@@ -61,8 +65,8 @@ export const NoBalance = createExample(TestedComponent, {
       amountRaw: "USD:10",
     },
   },
-  goBack: () => null,
-  goToWalletManualWithdraw: () => null,
+  goBack: noop,
+  goToWalletManualWithdraw: noop,
 });
 
 export const NoEnoughBalance = createExample(TestedComponent, {
@@ -97,8 +101,8 @@ export const NoEnoughBalance = createExample(TestedComponent, {
       amountRaw: "USD:10",
     },
   },
-  goBack: () => null,
-  goToWalletManualWithdraw: () => null,
+  goBack: noop,
+  goToWalletManualWithdraw: noop,
 });
 
 export const EnoughBalanceButRestricted = createExample(TestedComponent, {
@@ -133,8 +137,8 @@ export const EnoughBalanceButRestricted = createExample(TestedComponent, {
       amountRaw: "USD:10",
     },
   },
-  goBack: () => null,
-  goToWalletManualWithdraw: () => null,
+  goBack: noop,
+  goToWalletManualWithdraw: noop,
 });
 
 export const PaymentPossible = createExample(TestedComponent, {
@@ -172,8 +176,8 @@ export const PaymentPossible = createExample(TestedComponent, {
       proposalId: "proposal1234",
     },
   },
-  goBack: () => null,
-  goToWalletManualWithdraw: () => null,
+  goBack: noop,
+  goToWalletManualWithdraw: noop,
 });
 
 export const PaymentPossibleWithFee = createExample(TestedComponent, {
@@ -211,8 +215,8 @@ export const PaymentPossibleWithFee = createExample(TestedComponent, {
       proposalId: "proposal1234",
     },
   },
-  goBack: () => null,
-  goToWalletManualWithdraw: () => null,
+  goBack: noop,
+  goToWalletManualWithdraw: noop,
 });
 
 import beer from "../../static-dev/beer.png";
@@ -271,8 +275,8 @@ export const TicketWithAProductList = createExample(TestedComponent, {
       proposalId: "proposal1234",
     },
   },
-  goBack: () => null,
-  goToWalletManualWithdraw: () => null,
+  goBack: noop,
+  goToWalletManualWithdraw: noop,
 });
 
 export const AlreadyConfirmedByOther = createExample(TestedComponent, {
@@ -309,8 +313,8 @@ export const AlreadyConfirmedByOther = createExample(TestedComponent, {
       paid: false,
     },
   },
-  goBack: () => null,
-  goToWalletManualWithdraw: () => null,
+  goBack: noop,
+  goToWalletManualWithdraw: noop,
 });
 
 export const AlreadyPaidWithoutFulfillment = createExample(TestedComponent, {
@@ -347,8 +351,8 @@ export const AlreadyPaidWithoutFulfillment = createExample(TestedComponent, {
       paid: true,
     },
   },
-  goBack: () => null,
-  goToWalletManualWithdraw: () => null,
+  goBack: noop,
+  goToWalletManualWithdraw: noop,
 });
 
 export const AlreadyPaidWithFulfillment = createExample(TestedComponent, {
@@ -387,6 +391,6 @@ export const AlreadyPaidWithFulfillment = createExample(TestedComponent, {
       paid: true,
     },
   },
-  goBack: () => null,
-  goToWalletManualWithdraw: () => null,
+  goBack: noop,
+  goToWalletManualWithdraw: noop,
 });
diff --git a/packages/taler-wallet-webextension/src/cta/Pay.tsx b/packages/taler-wallet-webextension/src/cta/Pay.tsx
index 4f44ebab2..59e26c40e 100644
--- a/packages/taler-wallet-webextension/src/cta/Pay.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Pay.tsx
@@ -60,13 +60,14 @@ import {
 } from "../components/styled/index.js";
 import { useTranslationContext } from "../context/translation.js";
 import { HookError, useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
+import { Button } from "../mui/Button.js";
 import { ButtonHandler } from "../mui/handlers.js";
 import * as wxApi from "../wxApi.js";
 
 interface Props {
   talerPayUri?: string;
-  goToWalletManualWithdraw: (currency?: string) => void;
-  goBack: () => void;
+  goToWalletManualWithdraw: (currency?: string) => Promise<void>;
+  goBack: () => Promise<void>;
 }
 
 type State = Loading | Ready | Confirmed;
@@ -265,8 +266,8 @@ export function View({
   goToWalletManualWithdraw,
 }: {
   state: Ready | Confirmed;
-  goToWalletManualWithdraw: (currency?: string) => void;
-  goBack: () => void;
+  goToWalletManualWithdraw: (currency?: string) => Promise<void>;
+  goBack: () => Promise<void>;
 }): VNode {
   const { i18n } = useTranslationContext();
   const contractTerms: ContractTerms = state.payStatus.contractTerms;
@@ -522,7 +523,7 @@ function ButtonsSection({
   goToWalletManualWithdraw,
 }: {
   state: Ready | Confirmed;
-  goToWalletManualWithdraw: (currency: string) => void;
+  goToWalletManualWithdraw: (currency: string) => Promise<void>;
 }): VNode {
   const { i18n } = useTranslationContext();
   if (state.status === "ready") {
@@ -531,11 +532,15 @@ function ButtonsSection({
       return (
         <Fragment>
           <section>
-            <ButtonSuccess upperCased onClick={state.payHandler.onClick}>
+            <Button
+              variant="contained"
+              color="success"
+              onClick={state.payHandler.onClick}
+            >
               <i18n.Translate>
                 Pay {<Amount value={payStatus.amountEffective} />}
               </i18n.Translate>
-            </ButtonSuccess>
+            </Button>
           </section>
           <PayWithMobile state={state} />
         </Fragment>
@@ -560,12 +565,13 @@ function ButtonsSection({
             <WarningBox>{BalanceMessage}</WarningBox>
           </section>
           <section>
-            <ButtonSuccess
-              upperCased
+            <Button
+              variant="contained"
+              color="success"
               onClick={() => goToWalletManualWithdraw(state.amount.currency)}
             >
               <i18n.Translate>Withdraw digital cash</i18n.Translate>
-            </ButtonSuccess>
+            </Button>
           </section>
           <PayWithMobile state={state} />
         </Fragment>
diff --git a/packages/taler-wallet-webextension/src/cta/Refund.tsx b/packages/taler-wallet-webextension/src/cta/Refund.tsx
index 5387a1782..004a8604b 100644
--- a/packages/taler-wallet-webextension/src/cta/Refund.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Refund.tsx
@@ -40,6 +40,7 @@ import {
 } from "../components/styled/index.js";
 import { useTranslationContext } from "../context/translation.js";
 import { HookError, useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
+import { Button } from "../mui/Button.js";
 import { ButtonHandler } from "../mui/handlers.js";
 import * as wxApi from "../wxApi.js";
 import { ProductList } from "./Pay.js";
@@ -188,9 +189,9 @@ export function View({ state }: ViewProps): VNode {
         </section>
       ) : undefined}
       <section>
-        <ButtonSuccess onClick={state.accept.onClick}>
+        <Button variant="contained" onClick={state.accept.onClick}>
           <i18n.Translate>Confirm refund</i18n.Translate>
-        </ButtonSuccess>
+        </Button>
       </section>
     </WalletAction>
   );
diff --git a/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx b/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx
index 057144866..7092468cd 100644
--- a/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx
+++ b/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx
@@ -2,14 +2,13 @@ import { Fragment, h, VNode } from "preact";
 import { CheckboxOutlined } from "../components/CheckboxOutlined.js";
 import { ExchangeXmlTos } from "../components/ExchangeToS.js";
 import {
-  ButtonSuccess,
-  ButtonWarning,
   LinkSuccess,
   TermsOfService,
   WarningBox,
   WarningText,
 } from "../components/styled/index.js";
 import { useTranslationContext } from "../context/translation.js";
+import { Button } from "../mui/Button.js";
 import { TermsState } from "../utils/index.js";
 
 export interface Props {
@@ -58,20 +57,28 @@ export function TermsOfServiceSection({
           )}
           {terms.status === "new" && (
             <section>
-              <ButtonSuccess upperCased onClick={() => onReview(true)}>
+              <Button
+                variant="contained"
+                color="success"
+                onClick={async () => onReview(true)}
+              >
                 <i18n.Translate>
                   Review exchange terms of service
                 </i18n.Translate>
-              </ButtonSuccess>
+              </Button>
             </section>
           )}
           {terms.status === "changed" && (
             <section>
-              <ButtonWarning upperCased onClick={() => onReview(true)}>
+              <Button
+                variant="contained"
+                color="success"
+                onClick={async () => onReview(true)}
+              >
                 <i18n.Translate>
                   Review new version of terms of service
                 </i18n.Translate>
-              </ButtonWarning>
+              </Button>
             </section>
           )}
         </Fragment>
@@ -95,7 +102,7 @@ export function TermsOfServiceSection({
                 I accept the exchange terms of service
               </i18n.Translate>
             }
-            onToggle={() => {
+            onToggle={async () => {
               onAccept(!reviewed);
               if (ableToReviewTermsOfService) onReview(false);
             }}
@@ -154,7 +161,7 @@ export function TermsOfServiceSection({
                 I accept the exchange terms of service
               </i18n.Translate>
             }
-            onToggle={() => {
+            onToggle={async () => {
               onAccept(!reviewed);
               if (ableToReviewTermsOfService) onReview(false);
             }}
diff --git a/packages/taler-wallet-webextension/src/cta/Tip.tsx b/packages/taler-wallet-webextension/src/cta/Tip.tsx
index dc4757b33..156d4f5a3 100644
--- a/packages/taler-wallet-webextension/src/cta/Tip.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Tip.tsx
@@ -210,9 +210,13 @@ export function View({ state }: { state: State }): VNode {
         />
       </section>
       <section>
-        <ButtonSuccess onClick={state.accept.onClick}>
+        <Button
+          variant="contained"
+          color="success"
+          onClick={state.accept.onClick}
+        >
           <i18n.Translate>Accept tip</i18n.Translate>
-        </ButtonSuccess>
+        </Button>
         <Button onClick={state.ignore.onClick}>
           <i18n.Translate>Ignore</i18n.Translate>
         </Button>
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
index c4bc3457a..4b8aeccd0 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
@@ -33,8 +33,6 @@ import { LogoHeader } from "../components/LogoHeader.js";
 import { Part } from "../components/Part.js";
 import { SelectList } from "../components/SelectList.js";
 import {
-  ButtonSuccess,
-  ButtonWarning,
   Input,
   LinkSuccess,
   SubTitle,
@@ -43,19 +41,14 @@ import {
 } from "../components/styled/index.js";
 import { useTranslationContext } from "../context/translation.js";
 import { HookError, useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
+import { Button } from "../mui/Button.js";
+import { ButtonHandler, SelectFieldHandler } from "../mui/handlers.js";
 import { buildTermsOfServiceState } from "../utils/index.js";
-import {
-  ButtonHandler,
-  SelectFieldHandler,
-  ToggleHandler,
-} from "../mui/handlers.js";
 import * as wxApi from "../wxApi.js";
 import {
   Props as TermsOfServiceSectionProps,
   TermsOfServiceSection,
 } from "./TermsOfServiceSection.js";
-import { startOfWeekYear } from "date-fns/esm";
-import { Checkbox } from "../components/Checkbox.js";
 
 interface Props {
   talerWithdrawUri?: string;
@@ -527,22 +520,24 @@ export function View({ state }: { state: State }): VNode {
         <section>
           {(state.tosProps.terms.status === "accepted" ||
             (state.mustAcceptFirst && state.tosProps.reviewed)) && (
-            <ButtonSuccess
-              upperCased
+            <Button
+              variant="contained"
+              color="success"
               disabled={!state.doWithdrawal.onClick}
               onClick={state.doWithdrawal.onClick}
             >
               <i18n.Translate>Confirm withdrawal</i18n.Translate>
-            </ButtonSuccess>
+            </Button>
           )}
           {state.tosProps.terms.status === "notfound" && (
-            <ButtonWarning
-              upperCased
+            <Button
+              variant="contained"
+              color="warning"
               disabled={!state.doWithdrawal.onClick}
               onClick={state.doWithdrawal.onClick}
             >
               <i18n.Translate>Withdraw anyway</i18n.Translate>
-            </ButtonWarning>
+            </Button>
           )}
         </section>
       ) : (