diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.tsx')
| -rw-r--r-- | packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.tsx | 106 |
1 files changed, 39 insertions, 67 deletions
diff --git a/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.tsx b/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.tsx index 6461f76e3..e655def39 100644 --- a/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.tsx +++ b/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.tsx @@ -13,24 +13,28 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { AbsoluteTime, Duration, Location } from "@gnu-taler/taler-util"; import { - WalletApiOperation, + AbsoluteTime, + Duration, + Location, + TransactionIdStr, WalletContractData, -} from "@gnu-taler/taler-wallet-core"; +} from "@gnu-taler/taler-util"; +import { WalletApiOperation } 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 { alertFromError, useAlertContext } from "../context/alert.js"; +import { useBackendContext } from "../context/backend.js"; +import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { HookError, useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; import { ButtonHandler } from "../mui/handlers.js"; import { compose, StateViewMap } from "../utils/index.js"; -import { wxApi } from "../wxApi.js"; import { Amount } from "./Amount.js"; +import { ErrorAlertView } from "./CurrentAlerts.js"; import { Link } from "./styled/index.js"; const ContractTermsTable = styled.table` @@ -41,6 +45,7 @@ const ContractTermsTable = styled.table` } & > tr > td:nth-child(2n) { text-align: right; + overflow-wrap: anywhere; } & > tr:nth-child(2n) { background: #ebebeb; @@ -72,14 +77,14 @@ function locationAsText(l: Location | undefined): VNode { type State = States.Loading | States.Error | States.Hidden | States.Show; -namespace States { +export namespace States { export interface Loading { status: "loading"; hideHandler: ButtonHandler; } export interface Error { status: "error"; - proposalId: string; + transactionId: string; error: HookError; hideHandler: ButtonHandler; } @@ -95,23 +100,25 @@ namespace States { } interface Props { - proposalId: string; + transactionId: TransactionIdStr; } -function useComponentState({ proposalId }: Props, api: typeof wxApi): State { +function useComponentState({ transactionId }: Props): State { + const api = useBackendContext(); const [show, setShow] = useState(false); + const { pushAlertOnError } = useAlertContext(); const hook = useAsyncAsHook(async () => { if (!show) return undefined; return await api.wallet.call(WalletApiOperation.GetContractTermsDetails, { - proposalId, + transactionId, }); }, [show]); const hideHandler = { - onClick: async () => setShow(false), + onClick: pushAlertOnError(async () => setShow(false)), }; const showHandler = { - onClick: async () => setShow(true), + onClick: pushAlertOnError(async () => setShow(true)), }; if (!show) { return { @@ -121,7 +128,7 @@ function useComponentState({ proposalId }: Props, api: typeof wxApi): State { } if (!hook) return { status: "loading", hideHandler }; if (hook.hasError) - return { status: "error", proposalId, error: hook, hideHandler }; + return { status: "error", transactionId, error: hook, hideHandler }; if (!hook.response) return { status: "loading", hideHandler }; return { status: "show", @@ -139,7 +146,7 @@ const viewMapping: StateViewMap<State> = { export const ShowFullContractTermPopup = compose( "ShowFullContractTermPopup", - (p: Props) => useComponentState(p, wxApi), + (p: Props) => useComponentState(p), viewMapping, ); @@ -154,18 +161,18 @@ export function LoadingView({ hideHandler }: States.Loading): VNode { export function ErrorView({ hideHandler, error, - proposalId, + transactionId, }: States.Error): VNode { const { i18n } = useTranslationContext(); return ( <Modal title="Full detail" onClose={hideHandler}> - <LoadingError - title={ - <i18n.Translate> - Could not load purchase proposal details - </i18n.Translate> - } - error={error} + <ErrorAlertView + error={alertFromError( + i18n, + i18n.str`Could not load purchase proposal details`, + error, + { transactionId }, + )} /> </Modal> ); @@ -176,7 +183,7 @@ export function HiddenView({ showHandler }: States.Hidden): VNode { } export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { - const createdAt = AbsoluteTime.fromTimestamp(contractTerms.timestamp); + const createdAt = AbsoluteTime.fromProtocolTimestamp(contractTerms.timestamp); const { i18n } = useTranslationContext(); return ( @@ -256,14 +263,14 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { </span> </td> </tr> - <tr> + {/* <tr> <td> <i18n.Translate>Delivery date</i18n.Translate> </td> <td> {contractTerms.deliveryDate && ( <Time - timestamp={AbsoluteTime.fromTimestamp( + timestamp={AbsoluteTime.fromProtocolTimestamp( contractTerms.deliveryDate, )} format="dd MMMM yyyy, HH:mm" @@ -288,7 +295,7 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { .map((p) => `${p.description} x ${p.quantity}`) .join(", ")} </td> - </tr> + </tr> */} <tr> <td> <i18n.Translate>Created at</i18n.Translate> @@ -296,7 +303,7 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { <td> {contractTerms.timestamp && ( <Time - timestamp={AbsoluteTime.fromTimestamp( + timestamp={AbsoluteTime.fromProtocolTimestamp( contractTerms.timestamp, )} format="dd MMMM yyyy, HH:mm" @@ -311,7 +318,7 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { <td> { <Time - timestamp={AbsoluteTime.fromTimestamp( + timestamp={AbsoluteTime.fromProtocolTimestamp( contractTerms.refundDeadline, )} format="dd MMMM yyyy, HH:mm" @@ -331,8 +338,8 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { !contractTerms.autoRefund ? Duration.getZero() : Duration.fromTalerProtocolDuration( - contractTerms.autoRefund, - ), + contractTerms.autoRefund, + ), )} format="dd MMMM yyyy, HH:mm" /> @@ -346,7 +353,7 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { <td> { <Time - timestamp={AbsoluteTime.fromTimestamp( + timestamp={AbsoluteTime.fromProtocolTimestamp( contractTerms.payDeadline, )} format="dd MMMM yyyy, HH:mm" @@ -378,20 +385,6 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { <Amount value={contractTerms.maxDepositFee} /> </td> </tr> - <tr> - <td> - <i18n.Translate>Max fee</i18n.Translate> - </td> - <td> - <Amount value={contractTerms.maxWireFee} /> - </td> - </tr> - <tr> - <td> - <i18n.Translate>Minimum age</i18n.Translate> - </td> - <td>{contractTerms.minimumAge}</td> - </tr> {/* <tr> <td>Extra</td> <td> @@ -400,27 +393,6 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { </tr> */} <tr> <td> - <i18n.Translate>Wire fee amortization</i18n.Translate> - </td> - <td>{contractTerms.wireFeeAmortization}</td> - </tr> - <tr> - <td> - <i18n.Translate>Auditors</i18n.Translate> - </td> - <td> - {(contractTerms.allowedAuditors || []).map((e) => ( - <Fragment key={e.auditorPub}> - <a href={e.auditorBaseUrl} title={e.auditorPub}> - {e.auditorPub.substring(0, 6)}... - </a> - - </Fragment> - ))} - </td> - </tr> - <tr> - <td> <i18n.Translate>Exchanges</i18n.Translate> </td> <td> |