diff options
author | Sebastian <sebasjm@gmail.com> | 2023-01-04 11:24:58 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-01-04 11:38:00 -0300 |
commit | 24cac493dded00ef40e0e30a0d2263e4f35c3e29 (patch) | |
tree | 1bbd1fb4f9149af349358491c3720750d031d255 /packages/taler-wallet-webextension/src/cta | |
parent | 7d02e4212346b7b7b88197259a7e74554e1b10a3 (diff) | |
download | wallet-core-24cac493dded00ef40e0e30a0d2263e4f35c3e29.tar.xz |
fix #7522
Diffstat (limited to 'packages/taler-wallet-webextension/src/cta')
4 files changed, 11 insertions, 262 deletions
diff --git a/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx b/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx index 8484680bf..a53fa881a 100644 --- a/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx +++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx @@ -23,7 +23,7 @@ import { Part } from "../../components/Part.js"; import { Link, SubTitle, WalletAction } from "../../components/styled/index.js"; import { Time } from "../../components/Time.js"; import { useTranslationContext } from "../../context/translation.js"; -import { ButtonsSection } from "../Payment/views.js"; +import { PaymentButtons } from "../../components/PaymentButtons"; import { State } from "./index.js"; export function LoadingUriView({ error }: State.LoadingUriError): VNode { @@ -83,7 +83,7 @@ export function ReadyView( kind="neutral" /> </section> - <ButtonsSection + <PaymentButtons amount={amount} balance={balance} payStatus={payStatus} diff --git a/packages/taler-wallet-webextension/src/cta/Payment/views.tsx b/packages/taler-wallet-webextension/src/cta/Payment/views.tsx index 0f6cb5c28..efc8bcfc4 100644 --- a/packages/taler-wallet-webextension/src/cta/Payment/views.tsx +++ b/packages/taler-wallet-webextension/src/cta/Payment/views.tsx @@ -16,35 +16,17 @@ import { AbsoluteTime, - AmountJson, Amounts, MerchantContractTerms as ContractTerms, - PreparePayResult, PreparePayResultType, - Product, } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; -import { useState } from "preact/hooks"; -import { Amount } from "../../components/Amount.js"; -import { ErrorMessage } from "../../components/ErrorMessage.js"; import { LoadingError } from "../../components/LoadingError.js"; -import { LogoHeader } from "../../components/LogoHeader.js"; import { Part } from "../../components/Part.js"; -import { QR } from "../../components/QR.js"; -import { - Link, - LinkSuccess, - SmallLightText, - SubTitle, - SuccessBox, - WalletAction, - WarningBox, -} from "../../components/styled/index.js"; +import { PaymentButtons } from "../../components/PaymentButtons.js"; +import { Link, SuccessBox, WarningBox } from "../../components/styled/index.js"; import { Time } from "../../components/Time.js"; import { useTranslationContext } from "../../context/translation.js"; -import { Button } from "../../mui/Button.js"; -import { ButtonHandler } from "../../mui/handlers.js"; -import { assertUnreachable } from "../../utils/index.js"; import { MerchantDetails, PurchaseDetails } from "../../wallet/Transaction.js"; import { State } from "./index.js"; @@ -77,44 +59,12 @@ export function BaseView(state: SupportedStates): VNode { ? Amounts.parseOrThrow(state.payStatus.amountEffective) : state.amount, }; - // const totalFees = Amounts.sub(price.effective, price.raw).amount; return ( - <WalletAction> - <LogoHeader /> - - <SubTitle> - <i18n.Translate>Digital cash payment</i18n.Translate> - </SubTitle> - + <Fragment> <ShowImportantMessage state={state} /> <section style={{ textAlign: "left" }}> - {/* {state.payStatus.status !== PreparePayResultType.InsufficientBalance && - Amounts.isNonZero(totalFees) && ( - <Part - big - title={<i18n.Translate>Total to pay</i18n.Translate>} - text={<Amount value={state.payStatus.amountEffective} />} - kind="negative" - /> - )} - <Part - big - title={<i18n.Translate>Purchase amount</i18n.Translate>} - text={<Amount value={state.payStatus.amountRaw} />} - kind="neutral" - /> - {Amounts.isNonZero(totalFees) && ( - <Fragment> - <Part - big - title={<i18n.Translate>Fee</i18n.Translate>} - text={<Amount value={totalFees} />} - kind="negative" - /> - </Fragment> - )} */} <Part title={<i18n.Translate>Purchase</i18n.Translate>} text={contractTerms.summary} @@ -125,9 +75,6 @@ export function BaseView(state: SupportedStates): VNode { text={<MerchantDetails merchant={contractTerms.merchant} />} kind="neutral" /> - {/* <pre>{JSON.stringify(price)}</pre> - <hr /> - <pre>{JSON.stringify(state.payStatus, undefined, 2)}</pre> */} <Part title={<i18n.Translate>Details</i18n.Translate>} text={ @@ -166,7 +113,7 @@ export function BaseView(state: SupportedStates): VNode { /> )} </section> - <ButtonsSection + <PaymentButtons amount={state.amount} balance={state.balance} payStatus={state.payStatus} @@ -179,75 +126,6 @@ export function BaseView(state: SupportedStates): VNode { <i18n.Translate>Cancel</i18n.Translate> </Link> </section> - </WalletAction> - ); -} - -export function ProductList({ products }: { products: Product[] }): VNode { - const { i18n } = useTranslationContext(); - return ( - <Fragment> - <SmallLightText style={{ margin: ".5em" }}> - <i18n.Translate>List of products</i18n.Translate> - </SmallLightText> - <dl> - {products.map((p, i) => { - if (p.price) { - const pPrice = Amounts.parseOrThrow(p.price); - return ( - <div key={i} style={{ display: "flex", textAlign: "left" }}> - <div> - <img - src={p.image ? p.image : undefined} - style={{ width: 32, height: 32 }} - /> - </div> - <div> - <dt> - {p.quantity ?? 1} x {p.description}{" "} - <span style={{ color: "gray" }}> - {Amounts.stringify(pPrice)} - </span> - </dt> - <dd> - <b> - {Amounts.stringify( - Amounts.mult(pPrice, p.quantity ?? 1).amount, - )} - </b> - </dd> - </div> - </div> - ); - } - return ( - <div key={i} style={{ display: "flex", textAlign: "left" }}> - <div> - <img src={p.image} style={{ width: 32, height: 32 }} /> - </div> - <div> - <dt> - {p.quantity ?? 1} x {p.description} - </dt> - <dd> - <i18n.Translate>Total</i18n.Translate> - {` `} - {p.price ? ( - `${Amounts.stringifyValue( - Amounts.mult( - Amounts.parseOrThrow(p.price), - p.quantity ?? 1, - ).amount, - )} ${p}` - ) : ( - <i18n.Translate>free</i18n.Translate> - )} - </dd> - </div> - </div> - ); - })} - </dl> </Fragment> ); } @@ -284,124 +162,3 @@ function ShowImportantMessage({ state }: { state: SupportedStates }): VNode { return <Fragment />; } - -export function PayWithMobile({ uri }: { uri: string }): VNode { - const { i18n } = useTranslationContext(); - - const [showQR, setShowQR] = useState<boolean>(false); - - return ( - <section> - <LinkSuccess upperCased onClick={() => setShowQR((qr) => !qr)}> - {!showQR ? ( - <i18n.Translate>Pay with a mobile phone</i18n.Translate> - ) : ( - <i18n.Translate>Hide QR</i18n.Translate> - )} - </LinkSuccess> - {showQR && ( - <div> - <QR text={uri} /> - <i18n.Translate> - Scan the QR code or - <a href={uri}> - <i18n.Translate>click here</i18n.Translate> - </a> - </i18n.Translate> - </div> - )} - </section> - ); -} - -interface ButtonSectionProps { - payStatus: PreparePayResult; - payHandler: ButtonHandler | undefined; - balance: AmountJson | undefined; - uri: string; - amount: AmountJson; - goToWalletManualWithdraw: (currency: string) => Promise<void>; -} - -export function ButtonsSection({ - payStatus, - uri, - payHandler, - balance, - amount, - goToWalletManualWithdraw, -}: ButtonSectionProps): VNode { - const { i18n } = useTranslationContext(); - if (payStatus.status === PreparePayResultType.PaymentPossible) { - const privateUri = `${uri}&n=${payStatus.noncePriv}`; - - return ( - <Fragment> - <section> - <Button - variant="contained" - color="success" - onClick={payHandler?.onClick} - > - <i18n.Translate> - Pay - {<Amount value={amount} />} - </i18n.Translate> - </Button> - </section> - <PayWithMobile uri={privateUri} /> - </Fragment> - ); - } - - if (payStatus.status === PreparePayResultType.InsufficientBalance) { - let BalanceMessage = ""; - if (!balance) { - BalanceMessage = i18n.str`You have no balance for this currency. Withdraw digital cash first.`; - } else { - const balanceShouldBeEnough = Amounts.cmp(balance, amount) !== -1; - if (balanceShouldBeEnough) { - BalanceMessage = i18n.str`Could not find enough coins to pay. Even if you have enough ${balance.currency} some restriction may apply.`; - } else { - BalanceMessage = i18n.str`Your current balance is not enough.`; - } - } - const uriPrivate = `${uri}&n=${payStatus.noncePriv}`; - - return ( - <Fragment> - <section> - <WarningBox>{BalanceMessage}</WarningBox> - </section> - <section> - <Button - variant="contained" - color="success" - onClick={() => goToWalletManualWithdraw(Amounts.stringify(amount))} - > - <i18n.Translate>Get digital cash</i18n.Translate> - </Button> - </section> - <PayWithMobile uri={uriPrivate} /> - </Fragment> - ); - } - if (payStatus.status === PreparePayResultType.AlreadyConfirmed) { - return ( - <Fragment> - <section> - {payStatus.paid && payStatus.contractTerms.fulfillment_message && ( - <Part - title={<i18n.Translate>Merchant message</i18n.Translate>} - text={payStatus.contractTerms.fulfillment_message} - kind="neutral" - /> - )} - </section> - {!payStatus.paid && <PayWithMobile uri={uri} />} - </Fragment> - ); - } - - assertUnreachable(payStatus); -} diff --git a/packages/taler-wallet-webextension/src/cta/Refund/views.tsx b/packages/taler-wallet-webextension/src/cta/Refund/views.tsx index 4b5ff70dd..a55bc43dd 100644 --- a/packages/taler-wallet-webextension/src/cta/Refund/views.tsx +++ b/packages/taler-wallet-webextension/src/cta/Refund/views.tsx @@ -23,7 +23,7 @@ import { Part } from "../../components/Part.js"; import { Link, SubTitle, WalletAction } from "../../components/styled/index.js"; import { useTranslationContext } from "../../context/translation.js"; import { Button } from "../../mui/Button.js"; -import { ProductList } from "../Payment/views.js"; +import { ProductList } from "../../components/ProductList.js"; import { State } from "./index.js"; export function LoadingUriView({ error }: State.LoadingUriError): VNode { diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx index 5c35151c8..9dbe24b7e 100644 --- a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx +++ b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx @@ -14,12 +14,12 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ +import { ExchangeTosStatus } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { Amount } from "../../components/Amount.js"; import { ErrorTalerOperation } from "../../components/ErrorTalerOperation.js"; import { LoadingError } from "../../components/LoadingError.js"; -import { LogoHeader } from "../../components/LogoHeader.js"; import { Part } from "../../components/Part.js"; import { QR } from "../../components/QR.js"; import { SelectList } from "../../components/SelectList.js"; @@ -27,17 +27,14 @@ import { Input, Link, LinkSuccess, - SubTitle, SvgIcon, - WalletAction, } from "../../components/styled/index.js"; +import { TermsOfService } from "../../components/TermsOfService/index.js"; import { useTranslationContext } from "../../context/translation.js"; import { Button } from "../../mui/Button.js"; import editIcon from "../../svg/edit_24px.svg"; import { ExchangeDetails, WithdrawDetails } from "../../wallet/Transaction.js"; -import { TermsOfService } from "../../components/TermsOfService/index.js"; import { State } from "./index.js"; -import { ExchangeTosStatus } from "@gnu-taler/taler-util"; export function LoadingUriView({ error }: State.LoadingUriError): VNode { const { i18n } = useTranslationContext(); @@ -68,12 +65,7 @@ export function SuccessView(state: State.Success): VNode { const currentTosVersionIsAccepted = state.currentExchange.tosStatus === ExchangeTosStatus.Accepted; return ( - <WalletAction> - <LogoHeader /> - <SubTitle> - <i18n.Translate>Digital cash withdrawal</i18n.Translate> - </SubTitle> - + <Fragment> {state.doWithdrawal.error && ( <ErrorTalerOperation title={ @@ -161,7 +153,7 @@ export function SuccessView(state: State.Success): VNode { <i18n.Translate>Cancel</i18n.Translate> </Link> </section> - </WalletAction> + </Fragment> ); } |