aboutsummaryrefslogtreecommitdiff
path: root/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx
diff options
context:
space:
mode:
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.tsx151
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>
generated by cgit v1.2.3 (git 2.26.2) at 2024-07-07 20:14:53 +0000