diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/orders')
7 files changed, 218 insertions, 208 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx index 145df717d..0c2e92418 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx @@ -19,29 +19,29 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { add, isAfter, isBefore, isFuture } from "date-fns"; import { Amounts } from "@gnu-taler/taler-util"; +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; +import { add, isAfter, isBefore, isFuture } from "date-fns"; import { Fragment, h, VNode } from "preact"; import { useEffect, useState } from "preact/hooks"; import { - FormProvider, FormErrors, + FormProvider, } from "../../../../components/form/FormProvider.js"; import { Input } from "../../../../components/form/Input.js"; +import { InputBoolean } from "../../../../components/form/InputBoolean.js"; import { InputCurrency } from "../../../../components/form/InputCurrency.js"; import { InputDate } from "../../../../components/form/InputDate.js"; import { InputGroup } from "../../../../components/form/InputGroup.js"; import { InputLocation } from "../../../../components/form/InputLocation.js"; +import { InputNumber } from "../../../../components/form/InputNumber.js"; +import { InventoryProductForm } from "../../../../components/product/InventoryProductForm.js"; +import { NonInventoryProductFrom } from "../../../../components/product/NonInventoryProductForm.js"; import { ProductList } from "../../../../components/product/ProductList.js"; import { useConfigContext } from "../../../../context/config.js"; import { Duration, MerchantBackend, WithId } from "../../../../declaration.js"; -import { Translate, useTranslator } from "../../../../i18n/index.js"; import { OrderCreateSchema as schema } from "../../../../schemas/index.js"; import { rate } from "../../../../utils/amount.js"; -import { InventoryProductForm } from "../../../../components/product/InventoryProductForm.js"; -import { NonInventoryProductFrom } from "../../../../components/product/NonInventoryProductForm.js"; -import { InputNumber } from "../../../../components/form/InputNumber.js"; -import { InputBoolean } from "../../../../components/form/InputBoolean.js"; import { undefinedIfEmpty } from "../../../../utils/table.js"; interface Props { @@ -140,65 +140,65 @@ export function CreatePage({ const inventoryList = Object.values(value.inventoryProducts || {}); const productList = Object.values(value.products || {}); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const errors: FormErrors<Entity> = { pricing: undefinedIfEmpty({ - summary: !value.pricing?.summary ? i18n`required` : undefined, + summary: !value.pricing?.summary ? i18n.str`required` : undefined, order_price: !value.pricing?.order_price - ? i18n`required` + ? i18n.str`required` : Amounts.isZero(value.pricing.order_price) - ? i18n`must be greater than 0` + ? i18n.str`must be greater than 0` : undefined, }), extra: value.extra && !stringIsValidJSON(value.extra) - ? i18n`not a valid json` + ? i18n.str`not a valid json` : undefined, payments: undefinedIfEmpty({ refund_deadline: !value.payments?.refund_deadline ? undefined : !isFuture(value.payments.refund_deadline) - ? i18n`should be in the future` + ? i18n.str`should be in the future` : value.payments.pay_deadline && isBefore(value.payments.refund_deadline, value.payments.pay_deadline) - ? i18n`refund deadline cannot be before pay deadline` + ? i18n.str`refund deadline cannot be before pay deadline` : value.payments.wire_transfer_deadline && isBefore( value.payments.wire_transfer_deadline, value.payments.refund_deadline, ) - ? i18n`wire transfer deadline cannot be before refund deadline` + ? i18n.str`wire transfer deadline cannot be before refund deadline` : undefined, pay_deadline: !value.payments?.pay_deadline ? undefined : !isFuture(value.payments.pay_deadline) - ? i18n`should be in the future` + ? i18n.str`should be in the future` : value.payments.wire_transfer_deadline && isBefore( value.payments.wire_transfer_deadline, value.payments.pay_deadline, ) - ? i18n`wire transfer deadline cannot be before pay deadline` + ? i18n.str`wire transfer deadline cannot be before pay deadline` : undefined, auto_refund_deadline: !value.payments?.auto_refund_deadline ? undefined : !isFuture(value.payments.auto_refund_deadline) - ? i18n`should be in the future` + ? i18n.str`should be in the future` : !value.payments?.refund_deadline - ? i18n`should have a refund deadline` + ? i18n.str`should have a refund deadline` : !isAfter( value.payments.refund_deadline, value.payments.auto_refund_deadline, ) - ? i18n`auto refund cannot be after refund deadline` + ? i18n.str`auto refund cannot be after refund deadline` : undefined, }), shipping: undefinedIfEmpty({ delivery_date: !value.shipping?.delivery_date ? undefined : !isFuture(value.shipping.delivery_date) - ? i18n`should be in the future` + ? i18n.str`should be in the future` : undefined, }), }; @@ -349,7 +349,7 @@ export function CreatePage({ {/* // FIXME: translating plural singular */} <InputGroup name="inventory_products" - label={i18n`Manage products in order`} + label={i18n.str`Manage products in order`} alternative={ allProducts.length > 0 && ( <p> @@ -358,7 +358,7 @@ export function CreatePage({ </p> ) } - tooltip={i18n`Manage list of products in the order.`} + tooltip={i18n.str`Manage list of products in the order.`} > <InventoryProductForm currentProducts={value.inventoryProducts || {}} @@ -379,8 +379,8 @@ export function CreatePage({ list={allProducts} actions={[ { - name: i18n`Remove`, - tooltip: i18n`Remove this product from the order.`, + name: i18n.str`Remove`, + tooltip: i18n.str`Remove this product from the order.`, handler: (e, index) => { if (e.product_id) { removeProductFromTheInventoryList(e.product_id); @@ -404,13 +404,13 @@ export function CreatePage({ <Fragment> <InputCurrency name="pricing.products_price" - label={i18n`Total price`} + label={i18n.str`Total price`} readonly - tooltip={i18n`total product price added up`} + tooltip={i18n.str`total product price added up`} /> <InputCurrency name="pricing.order_price" - label={i18n`Total price`} + label={i18n.str`Total price`} addonAfter={ discountOrRise > 0 && (discountOrRise < 1 @@ -419,103 +419,103 @@ export function CreatePage({ )}` : `rise of %${Math.round((discountOrRise - 1) * 100)}`) } - tooltip={i18n`Amount to be paid by the customer`} + tooltip={i18n.str`Amount to be paid by the customer`} /> </Fragment> ) : ( <InputCurrency name="pricing.order_price" - label={i18n`Order price`} - tooltip={i18n`final order price`} + label={i18n.str`Order price`} + tooltip={i18n.str`final order price`} /> )} <Input name="pricing.summary" inputType="multiline" - label={i18n`Summary`} - tooltip={i18n`Title of the order to be shown to the customer`} + label={i18n.str`Summary`} + tooltip={i18n.str`Title of the order to be shown to the customer`} /> <InputGroup name="shipping" - label={i18n`Shipping and Fulfillment`} + label={i18n.str`Shipping and Fulfillment`} initialActive > <InputDate name="shipping.delivery_date" - label={i18n`Delivery date`} - tooltip={i18n`Deadline for physical delivery assured by the merchant.`} + label={i18n.str`Delivery date`} + tooltip={i18n.str`Deadline for physical delivery assured by the merchant.`} /> {value.shipping?.delivery_date && ( <InputGroup name="shipping.delivery_location" - label={i18n`Location`} - tooltip={i18n`address where the products will be delivered`} + label={i18n.str`Location`} + tooltip={i18n.str`address where the products will be delivered`} > <InputLocation name="shipping.delivery_location" /> </InputGroup> )} <Input name="shipping.fullfilment_url" - label={i18n`Fulfillment URL`} - tooltip={i18n`URL to which the user will be redirected after successful payment.`} + label={i18n.str`Fulfillment URL`} + tooltip={i18n.str`URL to which the user will be redirected after successful payment.`} /> </InputGroup> <InputGroup name="payments" - label={i18n`Taler payment options`} - tooltip={i18n`Override default Taler payment settings for this order`} + label={i18n.str`Taler payment options`} + tooltip={i18n.str`Override default Taler payment settings for this order`} > <InputDate name="payments.pay_deadline" - label={i18n`Payment deadline`} - tooltip={i18n`Deadline for the customer to pay for the offer before it expires. Inventory products will be reserved until this deadline.`} + label={i18n.str`Payment deadline`} + tooltip={i18n.str`Deadline for the customer to pay for the offer before it expires. Inventory products will be reserved until this deadline.`} /> <InputDate name="payments.refund_deadline" - label={i18n`Refund deadline`} - tooltip={i18n`Time until which the order can be refunded by the merchant.`} + label={i18n.str`Refund deadline`} + tooltip={i18n.str`Time until which the order can be refunded by the merchant.`} /> <InputDate name="payments.wire_transfer_deadline" - label={i18n`Wire transfer deadline`} - tooltip={i18n`Deadline for the exchange to make the wire transfer.`} + label={i18n.str`Wire transfer deadline`} + tooltip={i18n.str`Deadline for the exchange to make the wire transfer.`} /> <InputDate name="payments.auto_refund_deadline" - label={i18n`Auto-refund deadline`} - tooltip={i18n`Time until which the wallet will automatically check for refunds without user interaction.`} + label={i18n.str`Auto-refund deadline`} + tooltip={i18n.str`Time until which the wallet will automatically check for refunds without user interaction.`} /> <InputCurrency name="payments.max_fee" - label={i18n`Maximum deposit fee`} - tooltip={i18n`Maximum deposit fees the merchant is willing to cover for this order. Higher deposit fees must be covered in full by the consumer.`} + label={i18n.str`Maximum deposit fee`} + tooltip={i18n.str`Maximum deposit fees the merchant is willing to cover for this order. Higher deposit fees must be covered in full by the consumer.`} /> <InputCurrency name="payments.max_wire_fee" - label={i18n`Maximum wire fee`} - tooltip={i18n`Maximum aggregate wire fees the merchant is willing to cover for this order. Wire fees exceeding this amount are to be covered by the customers.`} + label={i18n.str`Maximum wire fee`} + tooltip={i18n.str`Maximum aggregate wire fees the merchant is willing to cover for this order. Wire fees exceeding this amount are to be covered by the customers.`} /> <InputNumber name="payments.wire_fee_amortization" - label={i18n`Wire fee amortization`} - tooltip={i18n`Factor by which wire fees exceeding the above threshold are divided to determine the share of excess wire fees to be paid explicitly by the consumer.`} + label={i18n.str`Wire fee amortization`} + tooltip={i18n.str`Factor by which wire fees exceeding the above threshold are divided to determine the share of excess wire fees to be paid explicitly by the consumer.`} /> <InputBoolean name="payments.createToken" - label={i18n`Create token`} - tooltip={i18n`Uncheck this option if the merchant backend generated an order ID with enough entropy to prevent adversarial claims.`} + label={i18n.str`Create token`} + tooltip={i18n.str`Uncheck this option if the merchant backend generated an order ID with enough entropy to prevent adversarial claims.`} /> <InputNumber name="payments.minimum_age" - label={i18n`Minimum age required`} - tooltip={i18n`Any value greater than 0 will limit the coins able be used to pay this contract. If empty the age restriction will be defined by the products`} + label={i18n.str`Minimum age required`} + tooltip={i18n.str`Any value greater than 0 will limit the coins able be used to pay this contract. If empty the age restriction will be defined by the products`} help={ minAgeByProducts > 0 - ? i18n`Min age defined by the producs is ${minAgeByProducts}` + ? i18n.str`Min age defined by the producs is ${minAgeByProducts}` : undefined } /> @@ -523,14 +523,14 @@ export function CreatePage({ <InputGroup name="extra" - label={i18n`Additional information`} - tooltip={i18n`Custom information to be included in the contract for this order.`} + label={i18n.str`Additional information`} + tooltip={i18n.str`Custom information to be included in the contract for this order.`} > <Input name="extra" inputType="multiline" label={`Value`} - tooltip={i18n`You must enter a value in JavaScript Object Notation (JSON).`} + tooltip={i18n.str`You must enter a value in JavaScript Object Notation (JSON).`} /> </InputGroup> </FormProvider> @@ -538,7 +538,7 @@ export function CreatePage({ <div class="buttons is-right mt-5"> {onBack && ( <button class="button" onClick={onBack}> - <Translate>Cancel</Translate> + <i18n.Translate>Cancel</i18n.Translate> </button> )} <button @@ -546,7 +546,7 @@ export function CreatePage({ onClick={submit} disabled={hasErrors} > - <Translate>Confirm</Translate> + <i18n.Translate>Confirm</i18n.Translate> </button> </div> </div> diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx index 6d3ac311a..88c33e2f8 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx @@ -13,11 +13,11 @@ 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 { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { h, VNode } from "preact"; import { useEffect, useState } from "preact/hooks"; import { CreatedSuccessfully } from "../../../../components/notifications/CreatedSuccessfully.js"; import { useOrderAPI } from "../../../../hooks/order.js"; -import { Translate } from "../../../../i18n/index.js"; import { Entity } from "./index.js"; interface Props { @@ -33,7 +33,7 @@ export function OrderCreatedSuccessfully({ }: Props): VNode { const { getPaymentURL } = useOrderAPI(); const [url, setURL] = useState<string | undefined>(undefined); - + const { i18n } = useTranslationContext(); useEffect(() => { getPaymentURL(entity.response.order_id).then((response) => { setURL(response.data); @@ -48,7 +48,7 @@ export function OrderCreatedSuccessfully({ <div class="field is-horizontal"> <div class="field-label is-normal"> <label class="label"> - <Translate>Amount</Translate> + <i18n.Translate>Amount</i18n.Translate> </label> </div> <div class="field-body is-flex-grow-3"> @@ -66,7 +66,7 @@ export function OrderCreatedSuccessfully({ <div class="field is-horizontal"> <div class="field-label is-normal"> <label class="label"> - <Translate>Summary</Translate> + <i18n.Translate>Summary</i18n.Translate> </label> </div> <div class="field-body is-flex-grow-3"> @@ -84,7 +84,7 @@ export function OrderCreatedSuccessfully({ <div class="field is-horizontal"> <div class="field-label is-normal"> <label class="label"> - <Translate>Order ID</Translate> + <i18n.Translate>Order ID</i18n.Translate> </label> </div> <div class="field-body is-flex-grow-3"> @@ -98,7 +98,7 @@ export function OrderCreatedSuccessfully({ <div class="field is-horizontal"> <div class="field-label is-normal"> <label class="label"> - <Translate>Payment URL</Translate> + <i18n.Translate>Payment URL</i18n.Translate> </label> </div> <div class="field-body is-flex-grow-3"> 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> diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/index.tsx index 4633688ba..bb0240982 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/index.tsx @@ -13,13 +13,13 @@ 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 { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { Loading } from "../../../../components/exception/loading.js"; import { NotificationCard } from "../../../../components/menu/index.js"; import { HttpError } from "../../../../hooks/backend.js"; -import { useOrderDetails, useOrderAPI } from "../../../../hooks/order.js"; -import { useTranslator } from "../../../../i18n/index.js"; +import { useOrderAPI, useOrderDetails } from "../../../../hooks/order.js"; import { Notification } from "../../../../utils/types.js"; import { DetailPage } from "./DetailPage.js"; @@ -43,7 +43,7 @@ export default function Update({ const result = useOrderDetails(oid); const [notif, setNotif] = useState<Notification | undefined>(undefined); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); if (result.clientError && result.isUnauthorized) return onUnauthorized(); if (result.clientError && result.isNotfound) return onNotFound(); @@ -61,13 +61,13 @@ export default function Update({ refundOrder(id, value) .then(() => setNotif({ - message: i18n`refund created successfully`, + message: i18n.str`refund created successfully`, type: "SUCCESS", }), ) .catch((error) => setNotif({ - message: i18n`could not create the refund`, + message: i18n.str`could not create the refund`, type: "ERROR", description: error.message, }), diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx index bca90e352..3639ae912 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx @@ -19,12 +19,12 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { format } from "date-fns"; import { h, VNode } from "preact"; import { useState } from "preact/hooks"; import { DatePicker } from "../../../../components/picker/DatePicker.js"; import { MerchantBackend, WithId } from "../../../../declaration.js"; -import { Translate, useTranslator } from "../../../../i18n/index.js"; import { CardTable } from "./Table.js"; export interface ListPageProps { @@ -74,8 +74,8 @@ export function ListPage({ isNotWiredActive, onCreate, }: ListPageProps): VNode { - const i18n = useTranslator(); - const dateTooltip = i18n`select date to show nearby orders`; + const { i18n } = useTranslationContext(); + const dateTooltip = i18n.str`select date to show nearby orders`; const [pickDate, setPickDate] = useState(false); const [orderId, setOrderId] = useState<string>(""); @@ -91,13 +91,13 @@ export function ListPage({ type="text" value={orderId} onChange={(e) => setOrderId(e.currentTarget.value)} - placeholder={i18n`order id`} + placeholder={i18n.str`order id`} /> {errorOrderId && <p class="help is-danger">{errorOrderId}</p>} </div> <span class="has-tooltip-bottom" - data-tooltip={i18n`jump to order with the given order ID`} + data-tooltip={i18n.str`jump to order with the given order ID`} > <button class="button" @@ -119,40 +119,40 @@ export function ListPage({ <li class={isAllActive}> <div class="has-tooltip-right" - data-tooltip={i18n`remove all filters`} + data-tooltip={i18n.str`remove all filters`} > <a onClick={onShowAll}> - <Translate>All</Translate> + <i18n.Translate>All</i18n.Translate> </a> </div> </li> <li class={isPaidActive}> <div class="has-tooltip-right" - data-tooltip={i18n`only show paid orders`} + data-tooltip={i18n.str`only show paid orders`} > <a onClick={onShowPaid}> - <Translate>Paid</Translate> + <i18n.Translate>Paid</i18n.Translate> </a> </div> </li> <li class={isRefundedActive}> <div class="has-tooltip-right" - data-tooltip={i18n`only show orders with refunds`} + data-tooltip={i18n.str`only show orders with refunds`} > <a onClick={onShowRefunded}> - <Translate>Refunded</Translate> + <i18n.Translate>Refunded</i18n.Translate> </a> </div> </li> <li class={isNotWiredActive}> <div class="has-tooltip-left" - data-tooltip={i18n`only show orders where customers paid, but wire payments from payment provider are still pending`} + data-tooltip={i18n.str`only show orders where customers paid, but wire payments from payment provider are still pending`} > <a onClick={onShowNotWired}> - <Translate>Not wired</Translate> + <i18n.Translate>Not wired</i18n.Translate> </a> </div> </li> @@ -165,7 +165,10 @@ export function ListPage({ {jumpToDate && ( <div class="control"> <a class="button" onClick={() => onSelectDate(undefined)}> - <span class="icon" data-tooltip={i18n`clear date filter`}> + <span + class="icon" + data-tooltip={i18n.str`clear date filter`} + > <i class="mdi mdi-close" /> </span> </a> @@ -178,7 +181,7 @@ export function ListPage({ type="text" readonly value={!jumpToDate ? "" : format(jumpToDate, "yyyy/MM/dd")} - placeholder={i18n`date (YYYY/MM/DD)`} + placeholder={i18n.str`date (YYYY/MM/DD)`} onClick={() => { setPickDate(true); }} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx index a1ec8d291..b0a836f81 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx @@ -20,6 +20,7 @@ */ import { Amounts } from "@gnu-taler/taler-util"; +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { format } from "date-fns"; import { h, VNode } from "preact"; import { StateUpdater, useState } from "preact/hooks"; @@ -34,7 +35,6 @@ import { InputSelector } from "../../../../components/form/InputSelector.js"; import { ConfirmModal } from "../../../../components/modal/index.js"; import { useConfigContext } from "../../../../context/config.js"; import { MerchantBackend, WithId } from "../../../../declaration.js"; -import { Translate, useTranslator } from "../../../../i18n/index.js"; import { mergeRefunds } from "../../../../utils/amount.js"; type Entity = MerchantBackend.Orders.OrderHistoryEntry & WithId; @@ -63,7 +63,7 @@ export function CardTable({ }: Props): VNode { const [rowSelection, rowSelectionHandler] = useState<string[]>([]); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( <div class="card has-table"> @@ -72,13 +72,13 @@ export function CardTable({ <span class="icon"> <i class="mdi mdi-cash-register" /> </span> - <Translate>Orders</Translate> + <i18n.Translate>Orders</i18n.Translate> </p> <div class="card-header-icon" aria-label="more options" /> <div class="card-header-icon" aria-label="more options"> - <span class="has-tooltip-left" data-tooltip={i18n`create order`}> + <span class="has-tooltip-left" data-tooltip={i18n.str`create order`}> <button class="button is-info" type="button" onClick={onCreate}> <span class="icon is-small"> <i class="mdi mdi-plus mdi-36px" /> @@ -135,6 +135,7 @@ function Table({ hasMoreAfter, hasMoreBefore, }: TableProps): VNode { + const { i18n } = useTranslationContext(); return ( <div class="table-container"> {onLoadMoreBefore && ( @@ -143,20 +144,20 @@ function Table({ disabled={!hasMoreBefore} onClick={onLoadMoreBefore} > - <Translate>load newer orders</Translate> + <i18n.Translate>load newer orders</i18n.Translate> </button> )} <table class="table is-striped is-hoverable is-fullwidth"> <thead> <tr> <th style={{ minWidth: 100 }}> - <Translate>Date</Translate> + <i18n.Translate>Date</i18n.Translate> </th> <th style={{ minWidth: 100 }}> - <Translate>Amount</Translate> + <i18n.Translate>Amount</i18n.Translate> </th> <th style={{ minWidth: 400 }}> - <Translate>Summary</Translate> + <i18n.Translate>Summary</i18n.Translate> </th> <th style={{ minWidth: 50 }} /> </tr> @@ -196,7 +197,7 @@ function Table({ type="button" onClick={(): void => onRefund(i)} > - <Translate>Refund</Translate> + <i18n.Translate>Refund</i18n.Translate> </button> )} {!i.paid && ( @@ -205,7 +206,7 @@ function Table({ type="button" onClick={(): void => onCopyURL(i)} > - <Translate>copy url</Translate> + <i18n.Translate>copy url</i18n.Translate> </button> )} </div> @@ -221,7 +222,7 @@ function Table({ disabled={!hasMoreAfter} onClick={onLoadMoreAfter} > - <Translate>load older orders</Translate> + <i18n.Translate>load older orders</i18n.Translate> </button> )} </div> @@ -229,6 +230,7 @@ function Table({ } function EmptyTable(): VNode { + const { i18n } = useTranslationContext(); return ( <div class="content has-text-grey has-text-centered"> <p> @@ -237,7 +239,9 @@ function EmptyTable(): VNode { </span> </p> <p> - <Translate>No orders have been found matching your query!</Translate> + <i18n.Translate> + No orders have been found matching your query! + </i18n.Translate> </p> </div> ); @@ -256,7 +260,7 @@ export function RefundModal({ }: RefundModalProps): VNode { type State = { mainReason?: string; description?: string; refund?: string }; const [form, setValue] = useState<State>({}); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); // const [errors, setErrors] = useState<FormErrors<State>>({}); const refunds = ( @@ -281,20 +285,20 @@ export function RefundModal({ : orderPrice; const isRefundable = Amounts.isNonZero(totalRefundable); - const duplicatedText = i18n`duplicated`; + const duplicatedText = i18n.str`duplicated`; const errors: FormErrors<State> = { - mainReason: !form.mainReason ? i18n`required` : undefined, + mainReason: !form.mainReason ? i18n.str`required` : undefined, description: !form.description && form.mainReason !== duplicatedText - ? i18n`required` + ? i18n.str`required` : undefined, refund: !form.refund - ? i18n`required` + ? i18n.str`required` : !Amounts.parse(form.refund) - ? i18n`invalid format` + ? i18n.str`invalid format` : Amounts.cmp(totalRefundable, Amounts.parse(form.refund)!) === -1 - ? i18n`this value exceed the refundable amount` + ? i18n.str`this value exceed the refundable amount` : undefined, }; const hasErrors = Object.keys(errors).some( @@ -339,13 +343,13 @@ export function RefundModal({ <thead> <tr> <th> - <Translate>date</Translate> + <i18n.Translate>date</i18n.Translate> </th> <th> - <Translate>amount</Translate> + <i18n.Translate>amount</i18n.Translate> </th> <th> - <Translate>reason</Translate> + <i18n.Translate>reason</i18n.Translate> </th> </tr> </thead> @@ -381,28 +385,28 @@ export function RefundModal({ > <InputCurrency<State> name="refund" - label={i18n`Refund`} - tooltip={i18n`amount to be refunded`} + label={i18n.str`Refund`} + tooltip={i18n.str`amount to be refunded`} > - <Translate>Max refundable:</Translate>{" "} + <i18n.Translate>Max refundable:</i18n.Translate>{" "} {Amounts.stringify(totalRefundable)} </InputCurrency> <InputSelector name="mainReason" - label={i18n`Reason`} + label={i18n.str`Reason`} values={[ - i18n`Choose one...`, + i18n.str`Choose one...`, duplicatedText, - i18n`requested by the customer`, - i18n`other`, + i18n.str`requested by the customer`, + i18n.str`other`, ]} - tooltip={i18n`why this order is being refunded`} + tooltip={i18n.str`why this order is being refunded`} /> {form.mainReason && form.mainReason !== duplicatedText ? ( <Input<State> - label={i18n`Description`} + label={i18n.str`Description`} name="description" - tooltip={i18n`more information to give context`} + tooltip={i18n.str`more information to give context`} /> ) : undefined} </FormProvider> diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx index 315d78c63..e29c57a7c 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx @@ -19,7 +19,8 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { h, VNode, Fragment } from "preact"; +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; +import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { Loading } from "../../../../components/exception/loading.js"; import { NotificationCard } from "../../../../components/menu/index.js"; @@ -31,10 +32,9 @@ import { useOrderAPI, useOrderDetails, } from "../../../../hooks/order.js"; -import { useTranslator } from "../../../../i18n/index.js"; import { Notification } from "../../../../utils/types.js"; -import { RefundModal } from "./Table.js"; import { ListPage } from "./ListPage.js"; +import { RefundModal } from "./Table.js"; interface Props { onUnauthorized: () => VNode; @@ -64,7 +64,7 @@ export default function OrderList({ const [notif, setNotif] = useState<Notification | undefined>(undefined); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const [errorOrderId, setErrorOrderId] = useState<string | undefined>( undefined, ); @@ -86,7 +86,7 @@ export default function OrderList({ async function testIfOrderExistAndSelect(orderId: string): Promise<void> { if (!orderId) { - setErrorOrderId(i18n`Enter an order id`); + setErrorOrderId(i18n.str`Enter an order id`); return; } try { @@ -94,7 +94,7 @@ export default function OrderList({ onSelect(orderId); setErrorOrderId(undefined); } catch { - setErrorOrderId(i18n`order not found`); + setErrorOrderId(i18n.str`order not found`); } } @@ -136,13 +136,13 @@ export default function OrderList({ refundOrder(orderToBeRefunded.order_id, value) .then(() => setNotif({ - message: i18n`refund created successfully`, + message: i18n.str`refund created successfully`, type: "SUCCESS", }), ) .catch((error) => setNotif({ - message: i18n`could not create the refund`, + message: i18n.str`could not create the refund`, type: "ERROR", description: error.message, }), @@ -151,7 +151,7 @@ export default function OrderList({ } onLoadError={(error) => { setNotif({ - message: i18n`could not create the refund`, + message: i18n.str`could not create the refund`, type: "ERROR", description: error.message, }); @@ -161,7 +161,7 @@ export default function OrderList({ onUnauthorized={onUnauthorized} onNotFound={() => { setNotif({ - message: i18n`could not get the order to refund`, + message: i18n.str`could not get the order to refund`, type: "ERROR", // description: error.message }); |