diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx')
-rw-r--r-- | packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx | 151 |
1 files changed, 77 insertions, 74 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx index e8927dd70..1fba3c3e9 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx @@ -20,6 +20,7 @@ */ import { AmountJson, Amounts } from "@gnu-taler/taler-util"; +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { format } from "date-fns"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; @@ -34,7 +35,6 @@ import { TextField } from "../../../../components/form/TextField.js"; import { ProductList } from "../../../../components/product/ProductList.js"; import { useBackendContext } from "../../../../context/backend.js"; import { MerchantBackend } from "../../../../declaration.js"; -import { Translate, useTranslator } from "../../../../i18n/index.js"; import { mergeRefunds } from "../../../../utils/amount.js"; import { RefundModal } from "../list/Table.js"; import { Event, Timeline } from "./Timeline.js"; @@ -56,84 +56,84 @@ type Unpaid = MerchantBackend.Orders.CheckPaymentUnpaidResponse; type Claimed = MerchantBackend.Orders.CheckPaymentClaimedResponse; function ContractTerms({ value }: { value: CT }) { - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( - <InputGroup name="contract_terms" label={i18n`Contract Terms`}> + <InputGroup name="contract_terms" label={i18n.str`Contract Terms`}> <FormProvider<CT> object={value} valueHandler={null}> <Input<CT> readonly name="summary" - label={i18n`Summary`} - tooltip={i18n`human-readable description of the whole purchase`} + label={i18n.str`Summary`} + tooltip={i18n.str`human-readable description of the whole purchase`} /> <InputCurrency<CT> readonly name="amount" - label={i18n`Amount`} - tooltip={i18n`total price for the transaction`} + label={i18n.str`Amount`} + tooltip={i18n.str`total price for the transaction`} /> {value.fulfillment_url && ( <Input<CT> readonly name="fulfillment_url" - label={i18n`Fulfillment URL`} - tooltip={i18n`URL for this purchase`} + label={i18n.str`Fulfillment URL`} + tooltip={i18n.str`URL for this purchase`} /> )} <Input<CT> readonly name="max_fee" - label={i18n`Max fee`} - tooltip={i18n`maximum total deposit fee accepted by the merchant for this contract`} + label={i18n.str`Max fee`} + tooltip={i18n.str`maximum total deposit fee accepted by the merchant for this contract`} /> <Input<CT> readonly name="max_wire_fee" - label={i18n`Max wire fee`} - tooltip={i18n`maximum wire fee accepted by the merchant`} + label={i18n.str`Max wire fee`} + tooltip={i18n.str`maximum wire fee accepted by the merchant`} /> <Input<CT> readonly name="wire_fee_amortization" - label={i18n`Wire fee amortization`} - tooltip={i18n`over how many customer transactions does the merchant expect to amortize wire fees on average`} + label={i18n.str`Wire fee amortization`} + tooltip={i18n.str`over how many customer transactions does the merchant expect to amortize wire fees on average`} /> <InputDate<CT> readonly name="timestamp" - label={i18n`Created at`} - tooltip={i18n`time when this contract was generated`} + label={i18n.str`Created at`} + tooltip={i18n.str`time when this contract was generated`} /> <InputDate<CT> readonly name="refund_deadline" - label={i18n`Refund deadline`} - tooltip={i18n`after this deadline has passed no refunds will be accepted`} + label={i18n.str`Refund deadline`} + tooltip={i18n.str`after this deadline has passed no refunds will be accepted`} /> <InputDate<CT> readonly name="pay_deadline" - label={i18n`Payment deadline`} - tooltip={i18n`after this deadline, the merchant won't accept payments for the contract`} + label={i18n.str`Payment deadline`} + tooltip={i18n.str`after this deadline, the merchant won't accept payments for the contract`} /> <InputDate<CT> readonly name="wire_transfer_deadline" - label={i18n`Wire transfer deadline`} - tooltip={i18n`transfer deadline for the exchange`} + label={i18n.str`Wire transfer deadline`} + tooltip={i18n.str`transfer deadline for the exchange`} /> <InputDate<CT> readonly name="delivery_date" - label={i18n`Delivery date`} - tooltip={i18n`time indicating when the order should be delivered`} + label={i18n.str`Delivery date`} + tooltip={i18n.str`time indicating when the order should be delivered`} /> {value.delivery_date && ( <InputGroup name="delivery_location" - label={i18n`Location`} - tooltip={i18n`where the order will be delivered`} + label={i18n.str`Location`} + tooltip={i18n.str`where the order will be delivered`} > <InputLocation name="payments.delivery_location" /> </InputGroup> @@ -141,14 +141,14 @@ function ContractTerms({ value }: { value: CT }) { <InputDuration<CT> readonly name="auto_refund" - label={i18n`Auto-refund delay`} - tooltip={i18n`how long the wallet should try to get an automatic refund for the purchase`} + label={i18n.str`Auto-refund delay`} + tooltip={i18n.str`how long the wallet should try to get an automatic refund for the purchase`} /> <Input<CT> readonly name="extra" - label={i18n`Extra info`} - tooltip={i18n`extra data that is only interpreted by the merchant frontend`} + label={i18n.str`Extra info`} + tooltip={i18n.str`extra data that is only interpreted by the merchant frontend`} /> </FormProvider> </InputGroup> @@ -203,7 +203,7 @@ function ClaimedPage({ } const [value, valueHandler] = useState<Partial<Claimed>>(order); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( <div> @@ -216,9 +216,9 @@ function ClaimedPage({ <div class="level"> <div class="level-left"> <div class="level-item"> - <Translate>Order</Translate> #{id} + <i18n.Translate>Order</i18n.Translate> #{id} <div class="tag is-info ml-4"> - <Translate>claimed</Translate> + <i18n.Translate>claimed</i18n.Translate> </div> </div> </div> @@ -244,7 +244,7 @@ function ClaimedPage({ > <p> <b> - <Translate>claimed at</Translate>: + <i18n.Translate>claimed at</i18n.Translate>: </b>{" "} {format( new Date(order.contract_terms.timestamp.t_s * 1000), @@ -262,13 +262,13 @@ function ClaimedPage({ <div class="columns"> <div class="column is-4"> <div class="title"> - <Translate>Timeline</Translate> + <i18n.Translate>Timeline</i18n.Translate> </div> <Timeline events={events} /> </div> <div class="column is-8"> <div class="title"> - <Translate>Payment details</Translate> + <i18n.Translate>Payment details</i18n.Translate> </div> <FormProvider<Claimed> object={value} @@ -278,17 +278,17 @@ function ClaimedPage({ name="contract_terms.summary" readonly inputType="multiline" - label={i18n`Summary`} + label={i18n.str`Summary`} /> <InputCurrency name="contract_terms.amount" readonly - label={i18n`Amount`} + label={i18n.str`Amount`} /> <Input<Claimed> name="order_status" readonly - label={i18n`Order status`} + label={i18n.str`Order status`} /> </FormProvider> </div> @@ -298,7 +298,7 @@ function ClaimedPage({ {order.contract_terms.products.length ? ( <Fragment> <div class="title"> - <Translate>Product list</Translate> + <i18n.Translate>Product list</i18n.Translate> </div> <ProductList list={order.contract_terms.products} /> </Fragment> @@ -426,7 +426,7 @@ function PaidPage({ const refundurl = `${proto}://refund/${refundHost}/${order.contract_terms.order_id}/`; const refundable = new Date().getTime() < order.contract_terms.refund_deadline.t_s * 1000; - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const amount = Amounts.parseOrThrow(order.contract_terms.amount); const refund_taken = order.refund_details.reduce((prev, cur) => { @@ -446,18 +446,18 @@ function PaidPage({ <div class="level"> <div class="level-left"> <div class="level-item"> - <Translate>Order</Translate> #{id} + <i18n.Translate>Order</i18n.Translate> #{id} <div class="tag is-success ml-4"> - <Translate>paid</Translate> + <i18n.Translate>paid</i18n.Translate> </div> {order.wired ? ( <div class="tag is-success ml-4"> - <Translate>wired</Translate> + <i18n.Translate>wired</i18n.Translate> </div> ) : null} {order.refunded ? ( <div class="tag is-danger ml-4"> - <Translate>refunded</Translate> + <i18n.Translate>refunded</i18n.Translate> </div> ) : null} </div> @@ -477,8 +477,8 @@ function PaidPage({ class="has-tooltip-left" data-tooltip={ refundable - ? i18n`refund order` - : i18n`not refundable` + ? i18n.str`refund order` + : i18n.str`not refundable` } > <button @@ -486,7 +486,7 @@ function PaidPage({ disabled={!refundable} onClick={() => onRefund(id)} > - <Translate>refund</Translate> + <i18n.Translate>refund</i18n.Translate> </button> </span> </div> @@ -533,41 +533,41 @@ function PaidPage({ <div class="columns"> <div class="column is-4"> <div class="title"> - <Translate>Timeline</Translate> + <i18n.Translate>Timeline</i18n.Translate> </div> <Timeline events={events} /> </div> <div class="column is-8"> <div class="title"> - <Translate>Payment details</Translate> + <i18n.Translate>Payment details</i18n.Translate> </div> <FormProvider<Paid> object={value} valueHandler={valueHandler} > - {/* <InputCurrency<Paid> name="deposit_total" readonly label={i18n`Deposit total`} /> */} + {/* <InputCurrency<Paid> name="deposit_total" readonly label={i18n.str`Deposit total`} /> */} {order.refunded && ( <InputCurrency<Paid> name="refund_amount" readonly - label={i18n`Refunded amount`} + label={i18n.str`Refunded amount`} /> )} {order.refunded && ( <InputCurrency<Paid> name="refund_taken" readonly - label={i18n`Refund taken`} + label={i18n.str`Refund taken`} /> )} <Input<Paid> name="order_status" readonly - label={i18n`Order status`} + label={i18n.str`Order status`} /> <TextField<Paid> name="order_status_url" - label={i18n`Status URL`} + label={i18n.str`Status URL`} > <a target="_blank" @@ -580,7 +580,7 @@ function PaidPage({ {order.refunded && ( <TextField<Paid> name="order_status_url" - label={i18n`Refund URI`} + label={i18n.str`Refund URI`} > <a target="_blank" rel="noreferrer" href={refundurl}> {refundurl} @@ -595,7 +595,7 @@ function PaidPage({ {order.contract_terms.products.length ? ( <Fragment> <div class="title"> - <Translate>Product list</Translate> + <i18n.Translate>Product list</i18n.Translate> </div> <ProductList list={order.contract_terms.products} /> </Fragment> @@ -620,7 +620,7 @@ function UnpaidPage({ order: MerchantBackend.Orders.CheckPaymentUnpaidResponse; }) { const [value, valueHandler] = useState<Partial<Unpaid>>(order); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( <div> <section class="hero is-hero-bar"> @@ -629,11 +629,11 @@ function UnpaidPage({ <div class="level-left"> <div class="level-item"> <h1 class="title"> - <Translate>Order</Translate> #{id} + <i18n.Translate>Order</i18n.Translate> #{id} </h1> </div> <div class="tag is-dark"> - <Translate>unpaid</Translate> + <i18n.Translate>unpaid</i18n.Translate> </div> </div> </div> @@ -651,7 +651,7 @@ function UnpaidPage({ > <p> <b> - <Translate>pay at</Translate>: + <i18n.Translate>pay at</i18n.Translate>: </b>{" "} <a href={order.order_status_url} @@ -663,7 +663,7 @@ function UnpaidPage({ </p> <p> <b> - <Translate>created at</Translate>: + <i18n.Translate>created at</i18n.Translate>: </b>{" "} {order.creation_time.t_s === "never" ? "never" @@ -687,26 +687,29 @@ function UnpaidPage({ <Input<Unpaid> readonly name="summary" - label={i18n`Summary`} - tooltip={i18n`human-readable description of the whole purchase`} + label={i18n.str`Summary`} + tooltip={i18n.str`human-readable description of the whole purchase`} /> <InputCurrency<Unpaid> readonly name="total_amount" - label={i18n`Amount`} - tooltip={i18n`total price for the transaction`} + label={i18n.str`Amount`} + tooltip={i18n.str`total price for the transaction`} /> <Input<Unpaid> name="order_status" readonly - label={i18n`Order status`} + label={i18n.str`Order status`} /> <Input<Unpaid> name="order_status_url" readonly - label={i18n`Order status URL`} + label={i18n.str`Order status URL`} /> - <TextField<Unpaid> name="taler_pay_uri" label={i18n`Payment URI`}> + <TextField<Unpaid> + name="taler_pay_uri" + label={i18n.str`Payment URI`} + > <a target="_blank" rel="noreferrer" href={value.taler_pay_uri}> {value.taler_pay_uri} </a> @@ -722,7 +725,7 @@ function UnpaidPage({ export function DetailPage({ id, selected, onRefund, onBack }: Props): VNode { const [showRefund, setShowRefund] = useState<string | undefined>(undefined); - + const { i18n } = useTranslationContext(); const DetailByStatus = function () { switch (selected.order_status) { case "claimed": @@ -734,10 +737,10 @@ export function DetailPage({ id, selected, onRefund, onBack }: Props): VNode { default: return ( <div> - <Translate> + <i18n.Translate> Unknown order status. This is an error, please contact the administrator. - </Translate> + </i18n.Translate> </div> ); } @@ -761,7 +764,7 @@ export function DetailPage({ id, selected, onRefund, onBack }: Props): VNode { <div class="column is-four-fifths"> <div class="buttons is-right mt-5"> <button class="button" onClick={onBack}> - <Translate>Back</Translate> + <i18n.Translate>Back</i18n.Translate> </button> </div> </div> |