diff --git a/packages/taler-wallet-webextension/src/components/Modal.tsx b/packages/taler-wallet-webextension/src/components/Modal.tsx new file mode 100644 index 000000000..3fea063d3 --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/Modal.tsx @@ -0,0 +1,91 @@ +/* + This file is part of GNU Taler + (C) 2022 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 + */ + +import { styled } from "@linaria/react"; +import { ComponentChildren, h, VNode } from "preact"; +import { ButtonHandler } from "../mui/handlers.js"; +import closeIcon from "../svg/close_24px.svg"; +import { Link, LinkPrimary, LinkWarning } from "./styled/index.js"; + +interface Props { + children: ComponentChildren; + onClose: ButtonHandler; + title: string; +} + +const FullSize = styled.div` + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + z-index: 10; +`; + +const Header = styled.div` + display: flex; + justify-content: space-between; + height: 5%; + vertical-align: center; + align-items: center; +`; + +const Body = styled.div` + height: 95%; +`; + +export function Modal({ title, children, onClose }: Props): VNode { + return ( + +
e.stopPropagation()} + style={{ + background: "white", + width: 600, + height: "80%", + margin: "auto", + borderRadius: 8, + padding: 8, + // overflow: "scroll", + }} + > +
+
+

{title}

+
+ +
+ +
+
+ + e.stopPropagation()}>{children} +
+ + ); +} diff --git a/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.stories.tsx b/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.stories.tsx new file mode 100644 index 000000000..6f71b9d2e --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.stories.tsx @@ -0,0 +1,116 @@ +/* + This file is part of GNU Taler + (C) 2022 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 + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +import { WalletContractData } from "@gnu-taler/taler-wallet-core"; +import { createExample } from "../test-utils.js"; +import { + ErrorView, + HiddenView, + LoadingView, + ShowView, +} from "./ShowFullContractTermPopup.js"; + +export default { + title: "component/ShowFullContractTermPopup", +}; + +const cd: WalletContractData = { + amount: { + currency: "ARS", + fraction: 0, + value: 2, + }, + contractTermsHash: + "92X0KSJPZ8XS2XECCGFWTCGW8XMFCXTT2S6WHZDP6H9Y3TSKMTHY94WXEWDERTNN5XWCYGW4VN5CF2D4846HXTW7P06J4CZMHCWKC9G", + fulfillmentUrl: "", + merchantBaseUrl: "https://merchant-backend.taler.ar/", + merchantPub: "JZYHJ13M91GMSQMT75J8Q6ZN0QP8XF8CRHR7K5MMWYE8JQB6AAPG", + merchantSig: + "0YA1WETV15R6K8QKS79QA3QMT16010F42Q49VSKYQ71HVQKAG0A4ZJCA4YTKHE9EA5SP156TJSKZEJJJ87305N6PS80PC48RNKYZE08", + orderId: "2022.220-0281XKKB8W7YE", + summary: "w", + maxWireFee: { + currency: "ARS", + fraction: 0, + value: 1, + }, + payDeadline: { + t_s: 1660002673, + }, + refundDeadline: { + t_s: 1660002673, + }, + wireFeeAmortization: 1, + allowedAuditors: [ + { + auditorBaseUrl: "https://auditor.taler.ar/", + auditorPub: "0000000000000000000000000000000000000000000000000000", + }, + ], + allowedExchanges: [ + { + exchangeBaseUrl: "https://exchange.taler.ar/", + exchangePub: "1C2EYE90PYDNVRTQ25A3PA0KW5W4WPAJNNQHVHV49PT6W5CERFV0", + }, + ], + timestamp: { + t_s: 1659972710, + }, + wireMethod: "x-taler-bank", + wireInfoHash: + "QDT28374ZHYJ59WQFZ3TW1D5WKJVDYHQT86VHED3TNMB15ANJSKXDYPPNX01348KDYCX6T4WXA5A8FJJ8YWNEB1JW726C1JPKHM89DR", + maxDepositFee: { + currency: "ARS", + fraction: 0, + value: 1, + }, + merchant: { + name: "Default", + address: { + country: "ar", + }, + jurisdiction: { + country: "ar", + }, + }, + products: [], + autoRefund: undefined, + summaryI18n: undefined, + deliveryDate: undefined, + deliveryLocation: undefined, +}; + +export const ShowingSimpleOrder = createExample(ShowView, { + contractTerms: cd, +}); +export const Error = createExample(ErrorView, { + proposalId: "asd", + error: { + hasError: true, + message: "message", + operational: false, + // details: { + // code: 123, + // }, + }, +}); +export const Loading = createExample(LoadingView, {}); +export const Hidden = createExample(HiddenView, {}); diff --git a/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.tsx b/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.tsx new file mode 100644 index 000000000..b7d8376bd --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.tsx @@ -0,0 +1,385 @@ +/* + This file is part of GNU Taler + (C) 2022 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 + */ +import { AbsoluteTime, Duration, Location } from "@gnu-taler/taler-util"; +import { WalletContractData } from "@gnu-taler/taler-wallet-core"; +import { styled } from "@linaria/react"; +import { Fragment, h, VNode } from "preact"; +import { useState } from "preact/hooks"; +import { Loading } from "../components/Loading.js"; +import { LoadingError } from "../components/LoadingError.js"; +import { Modal } from "../components/Modal.js"; +import { Time } from "../components/Time.js"; +import { useTranslationContext } from "../context/translation.js"; +import { HookError, useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; +import { ButtonHandler } from "../mui/handlers.js"; +import { compose, StateViewMap } from "../utils/index.js"; +import * as wxApi from "../wxApi.js"; +import { Amount } from "./Amount.js"; +import { Link, LinkPrimary } from "./styled/index.js"; + +const ContractTermsTable = styled.table` + width: 100%; + border-spacing: 0px; + & > tr > td { + padding: 5px; + } + & > tr > td:nth-child(2n) { + text-align: right; + } + & > tr:nth-child(2n) { + background: #ebebeb; + } +`; + +function locationAsText(l: Location | undefined): VNode { + if (!l) return ; + const lines = [ + ...(l.address_lines || []).map((e) => [e]), + [l.town_location, l.town, l.street], + [l.building_name, l.building_number], + [l.country, l.country_subdivision], + [l.district, l.post_code], + ]; + //remove all missing value + //then remove all empty lines + const curated = lines + .map((l) => l.filter((v) => !!v)) + .filter((l) => l.length > 0); + return ( + + {curated.map((c, i) => ( +
{c.join(",")}
+ ))} + + ); +} + +type State = States.Loading | States.Error | States.Hidden | States.Show; + +namespace States { + export interface Loading { + status: "loading"; + hideHandler: ButtonHandler; + } + export interface Error { + status: "error"; + proposalId: string; + error: HookError; + hideHandler: ButtonHandler; + } + export interface Hidden { + status: "hidden"; + showHandler: ButtonHandler; + } + export interface Show { + status: "show"; + hideHandler: ButtonHandler; + contractTerms: WalletContractData; + } +} + +interface Props { + proposalId: string; +} + +function useComponentState({ proposalId }: Props, api: typeof wxApi): State { + const [show, setShow] = useState(false); + const hook = useAsyncAsHook(async () => { + if (!show) return undefined; + return await api.getContractTermsDetails(proposalId); + }, [show]); + + const hideHandler = { + onClick: async () => setShow(false), + }; + const showHandler = { + onClick: async () => setShow(true), + }; + if (!show) { + return { + status: "hidden", + showHandler, + }; + } + if (!hook) return { status: "loading", hideHandler }; + if (hook.hasError) + return { status: "error", proposalId, error: hook, hideHandler }; + if (!hook.response) return { status: "loading", hideHandler }; + return { + status: "show", + contractTerms: hook.response, + hideHandler, + }; +} + +const viewMapping: StateViewMap = { + loading: LoadingView, + error: ErrorView, + show: ShowView, + hidden: HiddenView, +}; + +export const ShowFullContractTermPopup = compose( + "ShowFullContractTermPopup", + (p: Props) => useComponentState(p, wxApi), + viewMapping, +); + +export function LoadingView({ hideHandler }: States.Loading): VNode { + return ( + + + + ); +} + +export function ErrorView({ + hideHandler, + error, + proposalId, +}: States.Error): VNode { + const { i18n } = useTranslationContext(); + return ( + + + Could not load purchase proposal details + + } + error={error} + /> + + ); +} + +export function HiddenView({ showHandler }: States.Hidden): VNode { + return Show full details; +} + +export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { + const createdAt = AbsoluteTime.fromTimestamp(contractTerms.timestamp); + + return ( + +
+ + + Order Id + {contractTerms.orderId} + + + Summary + {contractTerms.summary} + + + Amount + + + + + + Merchant name + {contractTerms.merchant.name} + + + Merchant jurisdiction + {locationAsText(contractTerms.merchant.jurisdiction)} + + + Merchant address + {locationAsText(contractTerms.merchant.address)} + + + Merchant logo + +
+ +
+ + + + Merchant website + {contractTerms.merchant.website} + + + Merchant email + {contractTerms.merchant.email} + + + Merchant public key + + + {contractTerms.merchantPub.substring(0, 6)}... + + + + + Delivery date + + {contractTerms.deliveryDate && ( + +
+ + ); +} diff --git a/packages/taler-wallet-webextension/src/components/index.stories.tsx b/packages/taler-wallet-webextension/src/components/index.stories.tsx index 053b27f79..901347e4f 100644 --- a/packages/taler-wallet-webextension/src/components/index.stories.tsx +++ b/packages/taler-wallet-webextension/src/components/index.stories.tsx @@ -19,8 +19,9 @@ * @author Sebastian Javier Marchano (sebasjm) */ - import * as a1 from "./Banner.stories.js"; +import * as a1 from "./Banner.stories.js"; import * as a2 from "./PendingTransactions.stories.js"; import * as a3 from "./Amount.stories.js"; +import * as a4 from "./ShowFullContractTermPopup.stories.js"; -export default [a1, a2, a3]; +export default [a1, a2, a3, a4]; diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx index 928562fb6..ff4a5b4d5 100644 --- a/packages/taler-wallet-webextension/src/components/styled/index.tsx +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -40,8 +40,18 @@ export const WalletAction = styled.div` & h1:first-child { margin-top: 0; } + & > * { + width: 600px; + } section { margin-bottom: 2em; + table td { + padding: 5px 5px; + } + table tr { + border-bottom: 1px solid black; + border-top: 1px solid black; + } button { margin-right: 8px; margin-left: 8px; diff --git a/packages/taler-wallet-webextension/src/cta/Payment/index.ts b/packages/taler-wallet-webextension/src/cta/Payment/index.ts index 0e67a4991..5c0f6f0d6 100644 --- a/packages/taler-wallet-webextension/src/cta/Payment/index.ts +++ b/packages/taler-wallet-webextension/src/cta/Payment/index.ts @@ -14,7 +14,7 @@ GNU Taler; see the file COPYING. If not, see */ -import { AmountJson, ConfirmPayResult, PreparePayResult } from "@gnu-taler/taler-util"; +import { AmountJson, ConfirmPayResult, PreparePayResult, PreparePayResultAlreadyConfirmed, PreparePayResultInsufficientBalance, PreparePayResultPaymentPossible } from "@gnu-taler/taler-util"; import { Loading } from "../../components/Loading.js"; import { HookError } from "../../hooks/useAsyncAsHook.js"; import { ButtonHandler } from "../../mui/handlers.js"; @@ -37,6 +37,7 @@ export type State = | State.Ready | State.NoEnoughBalance | State.NoBalanceForCurrency + | State.Completed | State.Confirmed; export namespace State { @@ -52,8 +53,6 @@ export namespace State { interface BaseInfo { amount: AmountJson; - totalFees: AmountJson; - payStatus: PreparePayResult; uri: string; error: undefined; goToWalletManualWithdraw: (currency?: string) => Promise; @@ -61,20 +60,30 @@ export namespace State { } export interface NoBalanceForCurrency extends BaseInfo { status: "no-balance-for-currency" + payStatus: PreparePayResult; balance: undefined; } export interface NoEnoughBalance extends BaseInfo { status: "no-enough-balance" + payStatus: PreparePayResult; balance: AmountJson; } export interface Ready extends BaseInfo { status: "ready"; + payStatus: PreparePayResultPaymentPossible; payHandler: ButtonHandler; balance: AmountJson; } export interface Confirmed extends BaseInfo { status: "confirmed"; + payStatus: PreparePayResultAlreadyConfirmed; + balance: AmountJson; + } + + export interface Completed extends BaseInfo { + status: "completed"; + payStatus: PreparePayResult; payResult: ConfirmPayResult; payHandler: ButtonHandler; balance: AmountJson; @@ -87,6 +96,7 @@ const viewMapping: StateViewMap = { "no-balance-for-currency": BaseView, "no-enough-balance": BaseView, confirmed: BaseView, + completed: BaseView, ready: BaseView, }; diff --git a/packages/taler-wallet-webextension/src/cta/Payment/state.ts b/packages/taler-wallet-webextension/src/cta/Payment/state.ts index 3c819ec8f..f75cef06f 100644 --- a/packages/taler-wallet-webextension/src/cta/Payment/state.ts +++ b/packages/taler-wallet-webextension/src/cta/Payment/state.ts @@ -78,20 +78,9 @@ export function useComponentState( (b) => Amounts.parseOrThrow(b.available).currency === amount.currency, ); - - let totalFees = Amounts.getZero(amount.currency); - if (payStatus.status === PreparePayResultType.PaymentPossible) { - const amountEffective: AmountJson = Amounts.parseOrThrow( - payStatus.amountEffective, - ); - totalFees = Amounts.sub(amountEffective, amount).amount; - } - const baseResult = { uri: hook.response.uri, amount, - totalFees, - payStatus, error: undefined, goBack, goToWalletManualWithdraw } @@ -100,12 +89,45 @@ export function useComponentState( return { status: "no-balance-for-currency", balance: undefined, + payStatus, ...baseResult, } } const foundAmount = Amounts.parseOrThrow(foundBalance.available); + if (payResult) { + return { + status: "completed", + balance: foundAmount, + payStatus, + payHandler: { + error: payErrMsg, + }, + payResult, + ...baseResult, + }; + } + + if (payStatus.status === PreparePayResultType.InsufficientBalance) { + return { + status: 'no-enough-balance', + balance: foundAmount, + payStatus, + ...baseResult, + } + } + + if (payStatus.status === PreparePayResultType.AlreadyConfirmed) { + return { + status: "confirmed", + balance: foundAmount, + payStatus, + ...baseResult, + }; + } + + async function doPayment(): Promise { try { if (payStatus.status !== "payment-possible") { @@ -138,34 +160,19 @@ export function useComponentState( } } - if (payStatus.status === PreparePayResultType.InsufficientBalance) { - return { - status: 'no-enough-balance', - balance: foundAmount, - ...baseResult, - } - } - const payHandler: ButtonHandler = { onClick: payErrMsg ? undefined : doPayment, error: payErrMsg, }; - if (!payResult) { - return { - status: "ready", - payHandler, - ...baseResult, - balance: foundAmount - }; - } - + // (payStatus.status === PreparePayResultType.PaymentPossible) return { - status: "confirmed", - balance: foundAmount, - payResult, - payHandler: {}, + status: "ready", + payHandler, + payStatus, ...baseResult, + balance: foundAmount }; + } diff --git a/packages/taler-wallet-webextension/src/cta/Payment/stories.tsx b/packages/taler-wallet-webextension/src/cta/Payment/stories.tsx index 603a9cb33..877c1996a 100644 --- a/packages/taler-wallet-webextension/src/cta/Payment/stories.tsx +++ b/packages/taler-wallet-webextension/src/cta/Payment/stories.tsx @@ -21,11 +21,14 @@ import { Amounts, + ConfirmPayResultType, ContractTerms, PreparePayResultType, } from "@gnu-taler/taler-util"; +import merchantIcon from "../../../static-dev/merchant-icon.jpeg"; import { createExample } from "../../test-utils.js"; import { BaseView } from "./views.js"; +import beer from "../../../static-dev/beer.png"; export default { title: "cta/payment", @@ -34,25 +37,22 @@ export default { }; export const NoBalance = createExample(BaseView, { - status: "ready", + status: "no-balance-for-currency", error: undefined, amount: Amounts.parseOrThrow("USD:10"), balance: undefined, - payHandler: { - onClick: async () => { - null; - }, - }, - totalFees: Amounts.parseOrThrow("USD:0"), uri: "", payStatus: { status: PreparePayResultType.InsufficientBalance, noncePriv: "", - proposalId: "proposal1234", + proposalId: "96YY92RQZGF3V7TJSPN4SF9549QX7BRF88Q5PYFCSBNQ0YK4RPK0", contractTerms: { merchant: { - name: "someone", + name: "the merchant", + logo: merchantIcon, + website: "https://www.themerchant.taler", + email: "contact@merchant.taler", }, summary: "some beers", amount: "USD:10", @@ -62,7 +62,7 @@ export const NoBalance = createExample(BaseView, { }); export const NoEnoughBalance = createExample(BaseView, { - status: "ready", + status: "no-enough-balance", error: undefined, amount: Amounts.parseOrThrow("USD:10"), balance: { @@ -70,21 +70,18 @@ export const NoEnoughBalance = createExample(BaseView, { fraction: 40000000, value: 9, }, - payHandler: { - onClick: async () => { - null; - }, - }, - totalFees: Amounts.parseOrThrow("USD:0"), uri: "", payStatus: { status: PreparePayResultType.InsufficientBalance, noncePriv: "", - proposalId: "proposal1234", + proposalId: "96YY92RQZGF3V7TJSPN4SF9549QX7BRF88Q5PYFCSBNQ0YK4RPK0", contractTerms: { merchant: { - name: "someone", + name: "the merchant", + logo: merchantIcon, + website: "https://www.themerchant.taler", + email: "contact@merchant.taler", }, summary: "some beers", amount: "USD:10", @@ -94,7 +91,7 @@ export const NoEnoughBalance = createExample(BaseView, { }); export const EnoughBalanceButRestricted = createExample(BaseView, { - status: "ready", + status: "no-enough-balance", error: undefined, amount: Amounts.parseOrThrow("USD:10"), balance: { @@ -102,21 +99,18 @@ export const EnoughBalanceButRestricted = createExample(BaseView, { fraction: 40000000, value: 19, }, - payHandler: { - onClick: async () => { - null; - }, - }, - totalFees: Amounts.parseOrThrow("USD:0"), uri: "", payStatus: { status: PreparePayResultType.InsufficientBalance, noncePriv: "", - proposalId: "proposal1234", + proposalId: "96YY92RQZGF3V7TJSPN4SF9549QX7BRF88Q5PYFCSBNQ0YK4RPK0", contractTerms: { merchant: { - name: "someone", + name: "the merchant", + logo: merchantIcon, + website: "https://www.themerchant.taler", + email: "contact@merchant.taler", }, summary: "some beers", amount: "USD:10", @@ -139,7 +133,6 @@ export const PaymentPossible = createExample(BaseView, { null; }, }, - totalFees: Amounts.parseOrThrow("USD:0"), uri: "taler://pay/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0", payStatus: { @@ -150,13 +143,19 @@ export const PaymentPossible = createExample(BaseView, { contractTerms: { nonce: "123213123", merchant: { - name: "someone", + name: "the merchant", + logo: merchantIcon, + website: "https://www.themerchant.taler", + email: "contact@merchant.taler", + }, + pay_deadline: { + t_s: new Date().getTime() / 1000 + 60 * 60 * 3, }, amount: "USD:10", summary: "some beers", } as Partial as any, contractTermsHash: "123456", - proposalId: "proposal1234", + proposalId: "96YY92RQZGF3V7TJSPN4SF9549QX7BRF88Q5PYFCSBNQ0YK4RPK0", }, }); @@ -174,7 +173,6 @@ export const PaymentPossibleWithFee = createExample(BaseView, { null; }, }, - totalFees: Amounts.parseOrThrow("USD:0.20"), uri: "taler://pay/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0", payStatus: { @@ -185,18 +183,19 @@ export const PaymentPossibleWithFee = createExample(BaseView, { contractTerms: { nonce: "123213123", merchant: { - name: "someone", + name: "the merchant", + logo: merchantIcon, + website: "https://www.themerchant.taler", + email: "contact@merchant.taler", }, amount: "USD:10", summary: "some beers", } as Partial as any, contractTermsHash: "123456", - proposalId: "proposal1234", + proposalId: "96YY92RQZGF3V7TJSPN4SF9549QX7BRF88Q5PYFCSBNQ0YK4RPK0", }, }); -import beer from "../../../static-dev/beer.png"; - export const TicketWithAProductList = createExample(BaseView, { status: "ready", error: undefined, @@ -211,7 +210,6 @@ export const TicketWithAProductList = createExample(BaseView, { null; }, }, - totalFees: Amounts.parseOrThrow("USD:0.20"), uri: "taler://pay/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0", payStatus: { @@ -222,7 +220,10 @@ export const TicketWithAProductList = createExample(BaseView, { contractTerms: { nonce: "123213123", merchant: { - name: "someone", + name: "the merchant", + logo: merchantIcon, + website: "https://www.themerchant.taler", + email: "contact@merchant.taler", }, amount: "USD:10", summary: "some beers", @@ -247,11 +248,11 @@ export const TicketWithAProductList = createExample(BaseView, { ], } as Partial as any, contractTermsHash: "123456", - proposalId: "proposal1234", + proposalId: "96YY92RQZGF3V7TJSPN4SF9549QX7BRF88Q5PYFCSBNQ0YK4RPK0", }, }); -export const AlreadyConfirmedByOther = createExample(BaseView, { +export const TicketWithShipping = createExample(BaseView, { status: "ready", error: undefined, amount: Amounts.parseOrThrow("USD:10"), @@ -265,7 +266,52 @@ export const AlreadyConfirmedByOther = createExample(BaseView, { null; }, }, - totalFees: Amounts.parseOrThrow("USD:0.20"), + + uri: "taler://pay/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0", + payStatus: { + status: PreparePayResultType.PaymentPossible, + amountEffective: "USD:10.20", + amountRaw: "USD:10", + noncePriv: "", + contractTerms: { + nonce: "123213123", + merchant: { + name: "the merchant", + logo: merchantIcon, + website: "https://www.themerchant.taler", + email: "contact@merchant.taler", + }, + amount: "USD:10", + summary: "banana pi set", + products: [ + { + description: "banana pi", + price: "USD:2", + quantity: 1, + }, + ], + delivery_date: { + t_s: new Date().getTime() / 1000 + 30 * 24 * 60 * 60, + }, + delivery_location: { + town: "Liverpool", + street: "Down st 1234", + }, + } as Partial as any, + contractTermsHash: "123456", + proposalId: "96YY92RQZGF3V7TJSPN4SF9549QX7BRF88Q5PYFCSBNQ0YK4RPK0", + }, +}); + +export const AlreadyConfirmedByOther = createExample(BaseView, { + status: "confirmed", + error: undefined, + amount: Amounts.parseOrThrow("USD:10"), + balance: { + currency: "USD", + fraction: 40000000, + value: 11, + }, uri: "taler://pay/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0", payStatus: { @@ -274,19 +320,22 @@ export const AlreadyConfirmedByOther = createExample(BaseView, { amountRaw: "USD:10", contractTerms: { merchant: { - name: "someone", + name: "the merchant", + logo: merchantIcon, + website: "https://www.themerchant.taler", + email: "contact@merchant.taler", }, summary: "some beers", amount: "USD:10", } as Partial as any, contractTermsHash: "123456", - proposalId: "proposal1234", + proposalId: "96YY92RQZGF3V7TJSPN4SF9549QX7BRF88Q5PYFCSBNQ0YK4RPK0", paid: false, }, }); export const AlreadyPaidWithoutFulfillment = createExample(BaseView, { - status: "ready", + status: "completed", error: undefined, amount: Amounts.parseOrThrow("USD:10"), balance: { @@ -294,33 +343,34 @@ export const AlreadyPaidWithoutFulfillment = createExample(BaseView, { fraction: 40000000, value: 11, }, - payHandler: { - onClick: async () => { - null; - }, - }, - totalFees: Amounts.parseOrThrow("USD:0.20"), uri: "taler://pay/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0", + payResult: { + type: ConfirmPayResultType.Done, + contractTerms: {} as any, + }, payStatus: { status: PreparePayResultType.AlreadyConfirmed, amountEffective: "USD:10", amountRaw: "USD:10", contractTerms: { merchant: { - name: "someone", + name: "the merchant", + logo: merchantIcon, + website: "https://www.themerchant.taler", + email: "contact@merchant.taler", }, summary: "some beers", amount: "USD:10", } as Partial as any, contractTermsHash: "123456", - proposalId: "proposal1234", + proposalId: "96YY92RQZGF3V7TJSPN4SF9549QX7BRF88Q5PYFCSBNQ0YK4RPK0", paid: true, }, }); export const AlreadyPaidWithFulfillment = createExample(BaseView, { - status: "ready", + status: "completed", error: undefined, amount: Amounts.parseOrThrow("USD:10"), balance: { @@ -328,29 +378,34 @@ export const AlreadyPaidWithFulfillment = createExample(BaseView, { fraction: 40000000, value: 11, }, - payHandler: { - onClick: async () => { - null; - }, - }, - totalFees: Amounts.parseOrThrow("USD:0.20"), uri: "taler://pay/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0", + payResult: { + type: ConfirmPayResultType.Done, + contractTerms: { + fulfillment_message: "thanks for buying!", + fulfillment_url: "https://demo.taler.net", + } as Partial as any, + }, payStatus: { status: PreparePayResultType.AlreadyConfirmed, amountEffective: "USD:10", amountRaw: "USD:10", contractTerms: { merchant: { - name: "someone", + name: "the merchant", + logo: merchantIcon, + website: "https://www.themerchant.taler", + email: "contact@merchant.taler", }, + fulfillment_url: "https://demo.taler.net", fulfillment_message: "congratulations! you are looking at the fulfillment message! ", summary: "some beers", amount: "USD:10", } as Partial as any, contractTermsHash: "123456", - proposalId: "proposal1234", + proposalId: "96YY92RQZGF3V7TJSPN4SF9549QX7BRF88Q5PYFCSBNQ0YK4RPK0", paid: true, }, }); diff --git a/packages/taler-wallet-webextension/src/cta/Payment/test.ts b/packages/taler-wallet-webextension/src/cta/Payment/test.ts index aea70b7ca..afd881a72 100644 --- a/packages/taler-wallet-webextension/src/cta/Payment/test.ts +++ b/packages/taler-wallet-webextension/src/cta/Payment/test.ts @@ -204,7 +204,7 @@ describe("Payment CTA states", () => { if (r.status !== "ready") expect.fail(); expect(r.balance).deep.equal(Amounts.parseOrThrow("USD:15")); expect(r.amount).deep.equal(Amounts.parseOrThrow("USD:10")); - expect(r.totalFees).deep.equal(Amounts.parseOrThrow("USD:0")); + // expect(r.totalFees).deep.equal(Amounts.parseOrThrow("USD:0")); expect(r.payHandler.onClick).not.undefined; } @@ -246,7 +246,7 @@ describe("Payment CTA states", () => { if (r.status !== "ready") expect.fail(); expect(r.balance).deep.equal(Amounts.parseOrThrow("USD:15")); expect(r.amount).deep.equal(Amounts.parseOrThrow("USD:9")); - expect(r.totalFees).deep.equal(Amounts.parseOrThrow("USD:1")); + // expect(r.totalFees).deep.equal(Amounts.parseOrThrow("USD:1")); expect(r.payHandler.onClick).not.undefined; } @@ -293,7 +293,7 @@ describe("Payment CTA states", () => { if (r.status !== "ready") expect.fail(); expect(r.balance).deep.equal(Amounts.parseOrThrow("USD:15")); expect(r.amount).deep.equal(Amounts.parseOrThrow("USD:9")); - expect(r.totalFees).deep.equal(Amounts.parseOrThrow("USD:1")); + // expect(r.totalFees).deep.equal(Amounts.parseOrThrow("USD:1")); if (r.payHandler.onClick === undefined) expect.fail(); r.payHandler.onClick(); } @@ -302,13 +302,13 @@ describe("Payment CTA states", () => { { const r = getLastResultOrThrow(); - if (r.status !== "confirmed") expect.fail(); + if (r.status !== "completed") expect.fail(); expect(r.balance).deep.equal(Amounts.parseOrThrow("USD:15")); expect(r.amount).deep.equal(Amounts.parseOrThrow("USD:9")); - expect(r.totalFees).deep.equal(Amounts.parseOrThrow("USD:1")); - if (r.payResult.type !== ConfirmPayResultType.Done) expect.fail(); - expect(r.payResult.contractTerms).not.undefined; - expect(r.payHandler.onClick).undefined; + // expect(r.totalFees).deep.equal(Amounts.parseOrThrow("USD:1")); + // if (r.payResult.type !== ConfirmPayResultType.Done) expect.fail(); + // expect(r.payResult.contractTerms).not.undefined; + // expect(r.payHandler.onClick).undefined; } await assertNoPendingUpdate(); @@ -354,7 +354,7 @@ describe("Payment CTA states", () => { if (r.status !== "ready") expect.fail(); expect(r.balance).deep.equal(Amounts.parseOrThrow("USD:15")); expect(r.amount).deep.equal(Amounts.parseOrThrow("USD:9")); - expect(r.totalFees).deep.equal(Amounts.parseOrThrow("USD:1")); + // expect(r.totalFees).deep.equal(Amounts.parseOrThrow("USD:1")); if (r.payHandler.onClick === undefined) expect.fail(); r.payHandler.onClick(); } @@ -366,7 +366,7 @@ describe("Payment CTA states", () => { if (r.status !== "ready") expect.fail(); expect(r.balance).deep.equal(Amounts.parseOrThrow("USD:15")); expect(r.amount).deep.equal(Amounts.parseOrThrow("USD:9")); - expect(r.totalFees).deep.equal(Amounts.parseOrThrow("USD:1")); + // expect(r.totalFees).deep.equal(Amounts.parseOrThrow("USD:1")); expect(r.payHandler.onClick).undefined; if (r.payHandler.error === undefined) expect.fail(); //FIXME: error message here is bad @@ -425,7 +425,7 @@ describe("Payment CTA states", () => { if (r.status !== "ready") expect.fail(); expect(r.balance).deep.equal(Amounts.parseOrThrow("USD:10")); expect(r.amount).deep.equal(Amounts.parseOrThrow("USD:9")); - expect(r.totalFees).deep.equal(Amounts.parseOrThrow("USD:1")); + // expect(r.totalFees).deep.equal(Amounts.parseOrThrow("USD:1")); expect(r.payHandler.onClick).not.undefined; notifyCoinWithdrawn(Amounts.parseOrThrow("USD:5")); @@ -438,7 +438,7 @@ describe("Payment CTA states", () => { if (r.status !== "ready") expect.fail(); expect(r.balance).deep.equal(Amounts.parseOrThrow("USD:15")); expect(r.amount).deep.equal(Amounts.parseOrThrow("USD:9")); - expect(r.totalFees).deep.equal(Amounts.parseOrThrow("USD:1")); + // expect(r.totalFees).deep.equal(Amounts.parseOrThrow("USD:1")); expect(r.payHandler.onClick).not.undefined; } diff --git a/packages/taler-wallet-webextension/src/cta/Payment/views.tsx b/packages/taler-wallet-webextension/src/cta/Payment/views.tsx index a8c9a640a..4c2ddc0f2 100644 --- a/packages/taler-wallet-webextension/src/cta/Payment/views.tsx +++ b/packages/taler-wallet-webextension/src/cta/Payment/views.tsx @@ -15,6 +15,7 @@ */ import { + AbsoluteTime, Amounts, ConfirmPayResultType, ContractTerms, @@ -38,8 +39,10 @@ import { WalletAction, 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 { MerchantDetails, PurchaseDetails } from "../../wallet/Transaction.js"; import { State } from "./index.js"; export function LoadingUriView({ error }: State.LoadingUriError): VNode { @@ -56,6 +59,7 @@ export function LoadingUriView({ error }: State.LoadingUriError): VNode { type SupportedStates = | State.Ready | State.Confirmed + | State.Completed | State.NoBalanceForCurrency | State.NoEnoughBalance; @@ -63,6 +67,15 @@ export function BaseView(state: SupportedStates): VNode { const { i18n } = useTranslationContext(); const contractTerms: ContractTerms = state.payStatus.contractTerms; + const price = { + raw: state.amount, + effective: + "amountEffective" in state.payStatus + ? Amounts.parseOrThrow(state.payStatus.amountEffective) + : state.amount, + }; + const totalFees = Amounts.sub(price.effective, price.raw).amount; + return ( @@ -73,9 +86,9 @@ export function BaseView(state: SupportedStates): VNode { -
- {state.payStatus.status !== PreparePayResultType.InsufficientBalance && - Amounts.isNonZero(state.totalFees) && ( +
+ {/* {state.payStatus.status !== PreparePayResultType.InsufficientBalance && + Amounts.isNonZero(totalFees) && ( Total to pay} @@ -89,26 +102,45 @@ export function BaseView(state: SupportedStates): VNode { text={} kind="neutral" /> - {Amounts.isNonZero(state.totalFees) && ( + {Amounts.isNonZero(totalFees) && ( Fee} - text={} + text={} kind="negative" /> - )} - Merchant} - text={contractTerms.merchant.name} - kind="neutral" - /> + )} */} Purchase} text={contractTerms.summary} kind="neutral" /> + Merchant} + text={} + kind="neutral" + /> + {/* 
{JSON.stringify(price)}
+
+ 
{JSON.stringify(state.payStatus, undefined, 2)}
*/} + Details} + text={ + + } + kind="neutral" + /> {contractTerms.order_id && ( Receipt} @@ -116,8 +148,19 @@ export function BaseView(state: SupportedStates): VNode { kind="neutral" /> )} - {contractTerms.products && contractTerms.products.length > 0 && ( - + {contractTerms.pay_deadline && ( + Valid until} + text={ +
; @@ -264,7 +307,7 @@ function ShowImportantMessage({ state }: { state: SupportedStates }): VNode { return ; } -function PayWithMobile({ state }: { state: State.Ready }): VNode { +function PayWithMobile({ state }: { state: SupportedStates }): VNode { const { i18n } = useTranslationContext(); const [showQR, setShowQR] = useState(false); @@ -286,7 +329,7 @@ function PayWithMobile({ state }: { state: State.Ready }): VNode {
- Scan the QR code or + Scan the QR code or   click here @@ -306,61 +349,66 @@ function ButtonsSection({ }): VNode { const { i18n } = useTranslationContext(); if (state.status === "ready") { - const { payStatus } = state; - if (payStatus.status === PreparePayResultType.PaymentPossible) { - return ( - -
- -
- - - ); - } - if (payStatus.status === PreparePayResultType.InsufficientBalance) { - let BalanceMessage = ""; - if (!state.balance) { - BalanceMessage = i18n.str`You have no balance for this currency. Withdraw digital cash first.`; + return ( + +
+ +
+ + + ); + } + if ( + state.status === "no-enough-balance" || + state.status === "no-balance-for-currency" + ) { + // if (state.payStatus.status === PreparePayResultType.InsufficientBalance) { + let BalanceMessage = ""; + if (!state.balance) { + BalanceMessage = i18n.str`You have no balance for this currency. Withdraw digital cash first.`; + } else { + const balanceShouldBeEnough = + Amounts.cmp(state.balance, state.amount) !== -1; + if (balanceShouldBeEnough) { + BalanceMessage = i18n.str`Could not find enough coins to pay this order. Even if you have enough ${state.balance.currency} some restriction may apply.`; } else { - const balanceShouldBeEnough = - Amounts.cmp(state.balance, state.amount) !== -1; - if (balanceShouldBeEnough) { - BalanceMessage = i18n.str`Could not find enough coins to pay this order. Even if you have enough ${state.balance.currency} some restriction may apply.`; - } else { - BalanceMessage = i18n.str`Your current balance is not enough for this order.`; - } + BalanceMessage = i18n.str`Your current balance is not enough for this order.`; } - return ( - -
- {BalanceMessage} -
-
- -
- - - ); } - if (payStatus.status === PreparePayResultType.AlreadyConfirmed) { + return ( + +
+ {BalanceMessage} +
+
+ +
+ + + ); + // } + } + if (state.status === "confirmed") { + if (state.payStatus.status === PreparePayResultType.AlreadyConfirmed) { return (
- {payStatus.paid && + {state.payStatus.paid && state.payStatus.contractTerms.fulfillment_message && ( Merchant message} @@ -369,13 +417,13 @@ function ButtonsSection({ /> )}
- {!payStatus.paid && } + {!state.payStatus.paid && } ); } } - if (state.status === "confirmed") { + if (state.status === "completed") { if (state.payResult.type === ConfirmPayResultType.Pending) { return (
diff --git a/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx b/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx index 89a7cace8..87cc98ea0 100644 --- a/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx +++ b/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx @@ -30,6 +30,7 @@ export default { export const EmptyBalance = createExample(TestedComponent, { balances: [], + goToWalletManualWithdraw: {}, }); export const SomeCoins = createExample(TestedComponent, { @@ -42,6 +43,8 @@ export const SomeCoins = createExample(TestedComponent, { requiresUserInput: false, }, ], + addAction: {}, + goToWalletManualWithdraw: {}, }); export const SomeCoinsInTreeCurrencies = createExample(TestedComponent, { @@ -68,6 +71,8 @@ export const SomeCoinsInTreeCurrencies = createExample(TestedComponent, { requiresUserInput: false, }, ], + goToWalletManualWithdraw: {}, + addAction: {}, }); export const NoCoinsInTreeCurrencies = createExample(TestedComponent, { @@ -94,6 +99,8 @@ export const NoCoinsInTreeCurrencies = createExample(TestedComponent, { requiresUserInput: false, }, ], + goToWalletManualWithdraw: {}, + addAction: {}, }); export const SomeCoinsInFiveCurrencies = createExample(TestedComponent, { @@ -148,4 +155,6 @@ export const SomeCoinsInFiveCurrencies = createExample(TestedComponent, { requiresUserInput: false, }, ], + goToWalletManualWithdraw: {}, + addAction: {}, }); diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx index cdf507cb5..3275a0a07 100644 --- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx +++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx @@ -23,8 +23,10 @@ import { Loading } from "../components/Loading.js"; import { LoadingError } from "../components/LoadingError.js"; import { MultiActionButton } from "../components/MultiActionButton.js"; import { useTranslationContext } from "../context/translation.js"; -import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; +import { HookError, useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; import { Button } from "../mui/Button.js"; +import { ButtonHandler } from "../mui/handlers.js"; +import { compose, StateViewMap } from "../utils/index.js"; import { AddNewActionView } from "../wallet/AddNewActionView.js"; import * as wxApi from "../wxApi.js"; import { NoBalanceHelp } from "./NoBalanceHelp.js"; @@ -34,17 +36,46 @@ export interface Props { goToWalletHistory: (currency: string) => Promise; goToWalletManualWithdraw: () => Promise; } -export function BalancePage({ - goToWalletManualWithdraw, - goToWalletDeposit, - goToWalletHistory, -}: Props): VNode { - const { i18n } = useTranslationContext(); + +export type State = State.Loading | State.Error | State.Action | State.Balances; + +export namespace State { + export interface Loading { + status: "loading"; + error: undefined; + } + + export interface Error { + status: "error"; + error: HookError; + } + + export interface Action { + status: "action"; + error: undefined; + cancel: ButtonHandler; + } + + export interface Balances { + status: "balance"; + error: undefined; + balances: Balance[]; + addAction: ButtonHandler; + goToWalletDeposit: (currency: string) => Promise; + goToWalletHistory: (currency: string) => Promise; + goToWalletManualWithdraw: ButtonHandler; + } +} + +function useComponentState( + { goToWalletDeposit, goToWalletHistory, goToWalletManualWithdraw }: Props, + api: typeof wxApi, +): State { const [addingAction, setAddingAction] = useState(false); - const state = useAsyncAsHook(wxApi.getBalance); + const state = useAsyncAsHook(api.getBalance); useEffect(() => { - return wxApi.onUpdateNotification( + return api.onUpdateNotification( [NotificationType.WithdrawGroupFinished], () => { state?.retry(); @@ -52,58 +83,80 @@ export function BalancePage({ ); }); - const balances = !state || state.hasError ? [] : state.response.balances; - if (!state) { - return ; + return { + status: "loading", + error: undefined, + }; } - if (state.hasError) { - return ( - Could not load balance page} - error={state} - /> - ); + return { + status: "error", + error: state, + }; } - if (addingAction) { - return setAddingAction(false)} />; + return { + status: "action", + error: undefined, + cancel: { + onClick: async () => setAddingAction(false), + }, + }; } + return { + status: "balance", + error: undefined, + balances: state.response.balances, + addAction: { + onClick: async () => setAddingAction(true), + }, + goToWalletManualWithdraw: { + onClick: goToWalletManualWithdraw, + }, + goToWalletDeposit, + goToWalletHistory, + }; +} +const viewMapping: StateViewMap = { + loading: Loading, + error: ErrorView, + action: ActionView, + balance: BalanceView, +}; + +export const BalancePage = compose( + "BalancePage", + (p: Props) => useComponentState(p, wxApi), + viewMapping, +); + +function ErrorView({ error }: State.Error): VNode { + const { i18n } = useTranslationContext(); return ( - setAddingAction(true)} + Could not load balance page} + error={error} /> ); } -export interface BalanceViewProps { - balances: Balance[]; - goToWalletManualWithdraw: () => Promise; - goToAddAction: () => Promise; - goToWalletDeposit: (currency: string) => Promise; - goToWalletHistory: (currency: string) => Promise; + +function ActionView({ cancel }: State.Action): VNode { + return ; } -export function BalanceView({ - balances, - goToWalletManualWithdraw, - goToWalletDeposit, - goToWalletHistory, - goToAddAction, -}: BalanceViewProps): VNode { +export function BalanceView(state: State.Balances): VNode { const { i18n } = useTranslationContext(); - const currencyWithNonZeroAmount = balances + const currencyWithNonZeroAmount = state.balances .filter((b) => !Amounts.isZero(b.available)) .map((b) => b.available.split(":")[0]); - if (balances.length === 0) { + if (state.balances.length === 0) { return ( - + ); } @@ -111,23 +164,26 @@ export function BalanceView({