diff options
author | Sebastian <sebasjm@gmail.com> | 2022-06-01 15:47:47 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-06-01 15:47:47 -0300 |
commit | af7b107f455b01e136db2211c357cc59a506139a (patch) | |
tree | d1a4596fba17b9db06d50a76f7ecfa403449faca /packages/taler-wallet-webextension/src/cta | |
parent | 2aade8e7aed485577576f91e61474f69b4366060 (diff) | |
download | wallet-core-af7b107f455b01e136db2211c357cc59a506139a.tar.xz |
mui button impl
Diffstat (limited to 'packages/taler-wallet-webextension/src/cta')
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> ) : ( |