diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/orders/list')
3 files changed, 64 insertions, 57 deletions
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 }); |