diff options
author | Sebastian <sebasjm@gmail.com> | 2022-12-20 17:45:24 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-12-20 17:45:24 -0300 |
commit | c59f9a2556731ad95ab8bd7eefe7fa8a41629834 (patch) | |
tree | 5cb60195d66cebbee0ba99e05eafe22f369a46a8 /packages/merchant-backoffice-ui/src/paths/instance/orders/create | |
parent | 382e66b179d6fda2598936196b2ae1b97bfab8ef (diff) | |
download | wallet-core-c59f9a2556731ad95ab8bd7eefe7fa8a41629834.tar.xz |
use translation context from web-utils, don't use match react-router since is broken
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/orders/create')
-rw-r--r-- | packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx | 132 | ||||
-rw-r--r-- | packages/merchant-backoffice-ui/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx | 12 |
2 files changed, 72 insertions, 72 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"> |