From 7d1621767cec57e9e7217f620844655279ab1af5 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 7 Aug 2023 06:51:10 -0300 Subject: ui settings view --- .../src/paths/instance/orders/list/ListPage.tsx | 4 +-- .../paths/instance/templates/create/CreatePage.tsx | 38 +++++++++++----------- 2 files changed, 21 insertions(+), 21 deletions(-) (limited to 'packages/merchant-backoffice-ui/src/paths/instance') 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 56d9dda74..37770d273 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 @@ -164,7 +164,7 @@ export function ListPage({
{jumpToDate && (
- onSelectDate(undefined)}> + onSelectDate(undefined)}> { setPickDate(true); }} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx index 4dde202c4..e20b9bc27 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx @@ -85,34 +85,34 @@ export function CreatePage({ onCreate, onBack }: Props): VNode { template_contract: !state.template_contract ? undefined : undefinedIfEmpty({ - amount: !state.template_contract?.amount - ? undefined - : !parsedPrice + amount: !state.template_contract?.amount + ? undefined + : !parsedPrice ? i18n.str`not valid` : Amounts.isZero(parsedPrice) - ? i18n.str`must be greater than 0` - : undefined, - minimum_age: - state.template_contract.minimum_age < 0 - ? i18n.str`should be greater that 0` + ? i18n.str`must be greater than 0` : undefined, - pay_duration: !state.template_contract.pay_duration - ? i18n.str`can't be empty` - : state.template_contract.pay_duration.d_us === "forever" + minimum_age: + state.template_contract.minimum_age < 0 + ? i18n.str`should be greater that 0` + : undefined, + pay_duration: !state.template_contract.pay_duration + ? i18n.str`can't be empty` + : state.template_contract.pay_duration.d_us === "forever" ? undefined : state.template_contract.pay_duration.d_us < 1000 * 1000 //less than one second - ? i18n.str`to short` - : undefined, - } as Partial), + ? i18n.str`to short` + : undefined, + } as Partial), pos_key: !state.pos_key ? !state.pos_algorithm ? undefined : i18n.str`required` : !isBase32RFC3548Charset(state.pos_key) - ? i18n.str`just letters and numbers from 2 to 7` - : state.pos_key.length !== 32 - ? i18n.str`size of the key should be 32` - : undefined, + ? i18n.str`just letters and numbers from 2 to 7` + : state.pos_key.length !== 32 + ? i18n.str`size of the key should be 32` + : undefined, }; const hasErrors = Object.keys(errors).some( @@ -139,7 +139,7 @@ export function CreatePage({ onCreate, onBack }: Props): VNode { > name="template_id" - addonBefore={`${backend.url}/instances/templates/`} + help={`${backend.url}/instances/templates/${state.template_id ?? ""}`} label={i18n.str`Identifier`} tooltip={i18n.str`Name of the template in URLs.`} /> -- cgit v1.2.3 From ef148b1501e6820a75e4e5c8b29ce88d54fd2783 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 7 Aug 2023 06:51:45 -0300 Subject: use stringify taler util --- .../src/paths/instance/templates/qr/QrPage.tsx | 40 ++++++++++++---------- 1 file changed, 21 insertions(+), 19 deletions(-) (limited to 'packages/merchant-backoffice-ui/src/paths/instance') diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/qr/QrPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/qr/QrPage.tsx index 90084f113..0f30efafd 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/templates/qr/QrPage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/qr/QrPage.tsx @@ -34,6 +34,7 @@ import { useBackendContext } from "../../../../context/backend.js"; import { useConfigContext } from "../../../../context/config.js"; import { useInstanceContext } from "../../../../context/instance.js"; import { MerchantBackend } from "../../../../declaration.js"; +import { stringifyPayTemplateUri } from "@gnu-taler/taler-util"; type Entity = MerchantBackend.Template.UsingTemplateDetails; @@ -64,46 +65,47 @@ export function QrPage({ template, id: templateId, onBack }: Props): VNode { const fixedAmount = !!template.template_contract.amount; const fixedSummary = !!template.template_contract.summary; - const params = new URLSearchParams(); + const templateParams: Record = {} if (!fixedAmount) { if (state.amount) { - params.append("amount", state.amount); + templateParams.amount = state.amount } else { - params.append("amount", config.currency); + templateParams.amount = config.currency } } + if (!fixedSummary) { - params.append("summary", state.summary ?? ""); + templateParams.summary = state.summary ?? "" } - const paramsStr = fixedAmount && fixedSummary ? "" : "?" + params.toString(); - const merchantURL = new URL(backendUrl); - - const talerProto = - merchantURL.protocol === "http:" ? "taler+http:" : "taler:"; + const merchantBaseUrl = new URL(backendUrl).href; - const payTemplateUri = `${talerProto}//pay-template/${merchantURL.hostname}/${templateId}${paramsStr}`; + const payTemplateUri = stringifyPayTemplateUri({ + merchantBaseUrl, + templateId, + templateParams + }) const issuer = encodeURIComponent( - `${new URL(backendUrl).hostname}/${instanceId}`, + `${new URL(backendUrl).host}/${instanceId}`, ); const oauthUri = !template.pos_algorithm ? undefined : template.pos_algorithm === 1 - ? `otpauth://totp/${issuer}:${templateId}?secret=${template.pos_key}&issuer=${issuer}&algorithm=SHA1&digits=8&period=30` - : template.pos_algorithm === 2 - ? `otpauth://totp/${issuer}:${templateId}?secret=${template.pos_key}&issuer=${issuer}&algorithm=SHA1&digits=8&period=30` - : undefined; + ? `otpauth://totp/${issuer}:${templateId}?secret=${template.pos_key}&issuer=${issuer}&algorithm=SHA1&digits=8&period=30` + : template.pos_algorithm === 2 + ? `otpauth://totp/${issuer}:${templateId}?secret=${template.pos_key}&issuer=${issuer}&algorithm=SHA1&digits=8&period=30` + : undefined; const keySlice = template.pos_key?.substring(0, 4); const oauthUriWithoutSecret = !template.pos_algorithm ? undefined : template.pos_algorithm === 1 - ? `otpauth://totp/${issuer}:${templateId}?secret=${keySlice}...&issuer=${issuer}&algorithm=SHA1&digits=8&period=30` - : template.pos_algorithm === 2 - ? `otpauth://totp/${issuer}:${templateId}?secret=${keySlice}...&issuer=${issuer}&algorithm=SHA1&digits=8&period=30` - : undefined; + ? `otpauth://totp/${issuer}:${templateId}?secret=${keySlice}...&issuer=${issuer}&algorithm=SHA1&digits=8&period=30` + : template.pos_algorithm === 2 + ? `otpauth://totp/${issuer}:${templateId}?secret=${keySlice}...&issuer=${issuer}&algorithm=SHA1&digits=8&period=30` + : undefined; return (
{oauthUri && ( -- cgit v1.2.3 From 7d53aa2755386ef43d3cb17032b502c9faf2b4e7 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 7 Aug 2023 08:13:29 -0300 Subject: show simple order creation unless advance mode is selected --- .../src/components/form/InputToggle.tsx | 91 ++++++ packages/merchant-backoffice-ui/src/hooks/index.ts | 10 +- .../src/hooks/useSettings.ts | 59 ++++ .../paths/instance/orders/create/CreatePage.tsx | 309 +++++++++++---------- 4 files changed, 315 insertions(+), 154 deletions(-) create mode 100644 packages/merchant-backoffice-ui/src/components/form/InputToggle.tsx create mode 100644 packages/merchant-backoffice-ui/src/hooks/useSettings.ts (limited to 'packages/merchant-backoffice-ui/src/paths/instance') diff --git a/packages/merchant-backoffice-ui/src/components/form/InputToggle.tsx b/packages/merchant-backoffice-ui/src/components/form/InputToggle.tsx new file mode 100644 index 000000000..61ddf3c84 --- /dev/null +++ b/packages/merchant-backoffice-ui/src/components/form/InputToggle.tsx @@ -0,0 +1,91 @@ +/* + This file is part of GNU Taler + (C) 2021-2023 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ +import { h, VNode } from "preact"; +import { InputProps, useField } from "./useField.js"; + +interface Props extends InputProps { + name: T; + readonly?: boolean; + expand?: boolean; + threeState?: boolean; + toBoolean?: (v?: any) => boolean | undefined; + fromBoolean?: (s: boolean | undefined) => any; +} + +const defaultToBoolean = (f?: any): boolean | undefined => f || ""; +const defaultFromBoolean = (v: boolean | undefined): any => v as any; + +export function InputToggle({ + name, + readonly, + placeholder, + tooltip, + label, + help, + threeState, + expand, + fromBoolean = defaultFromBoolean, + toBoolean = defaultToBoolean, +}: Props): VNode { + const { error, value, onChange } = useField(name); + + const onCheckboxClick = (): void => { + const c = toBoolean(value); + if (c === false && threeState) return onChange(undefined as any); + return onChange(fromBoolean(!c)); + }; + + return ( +
+
+ +
+
+
+

+

+ + {help} +

+ {error &&

{error}

} +
+
+
+ ); +} diff --git a/packages/merchant-backoffice-ui/src/hooks/index.ts b/packages/merchant-backoffice-ui/src/hooks/index.ts index 10e77716e..b77b9dea8 100644 --- a/packages/merchant-backoffice-ui/src/hooks/index.ts +++ b/packages/merchant-backoffice-ui/src/hooks/index.ts @@ -53,15 +53,17 @@ export function useBackendURL( export function useBackendDefaultToken( initialValue?: string, -): [string | undefined, ((d:string | undefined) => void)] { - const {update, value} = useMemoryStorage(`backend-token`, initialValue) +): [string | undefined, ((d: string | undefined) => void)] { + // uncomment for testing + initialValue = "secret-token:secret" as string | undefined + const { update, value } = useMemoryStorage(`backend-token`, initialValue) return [value, update]; } export function useBackendInstanceToken( id: string, -): [string | undefined, ((d:string | undefined) => void)] { - const {update:setToken, value:token, reset} = useMemoryStorage(`backend-token-${id}`) +): [string | undefined, ((d: string | undefined) => void)] { + const { update: setToken, value: token, reset } = useMemoryStorage(`backend-token-${id}`) const [defaultToken, defaultSetToken] = useBackendDefaultToken(); // instance named 'default' use the default token diff --git a/packages/merchant-backoffice-ui/src/hooks/useSettings.ts b/packages/merchant-backoffice-ui/src/hooks/useSettings.ts new file mode 100644 index 000000000..5c0932f27 --- /dev/null +++ b/packages/merchant-backoffice-ui/src/hooks/useSettings.ts @@ -0,0 +1,59 @@ +/* + This file is part of GNU Taler + (C) 2022 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see + */ + +import { buildStorageKey, useLocalStorage } from "@gnu-taler/web-util/browser"; +import { + Codec, + buildCodecForObject, + codecForBoolean, +} from "@gnu-taler/taler-util"; + +function parse_json_or_undefined(str: string | undefined): T | undefined { + if (str === undefined) return undefined; + try { + return JSON.parse(str); + } catch { + return undefined; + } +} + +export interface Settings { + advanceOrderMode: boolean +} + +const defaultSettings: Settings = { + advanceOrderMode: false, +} + +export const codecForSettings = (): Codec => + buildCodecForObject() + .property("advanceOrderMode", codecForBoolean()) + .build("Settings"); + +const SETTINGS_KEY = buildStorageKey("merchant-settings", codecForSettings()); + +export function useSettings(): [ + Readonly, + (key: T, value: Settings[T]) => void, +] { + const { value, update } = useLocalStorage(SETTINGS_KEY); + + const parsed: Settings = value ?? defaultSettings; + function updateField(k: T, v: Settings[T]) { + update({ ...parsed, [k]: v }); + } + return [parsed, updateField]; +} 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 c8cc20ae0..fa9347c6e 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 @@ -43,6 +43,7 @@ import { Duration, MerchantBackend, WithId } from "../../../../declaration.js"; import { OrderCreateSchema as schema } from "../../../../schemas/index.js"; import { rate } from "../../../../utils/amount.js"; import { undefinedIfEmpty } from "../../../../utils/table.js"; +import { useSettings } from "../../../../hooks/useSettings.js"; interface Props { onCreate: (d: MerchantBackend.Orders.PostOrderRequest) => void; @@ -62,8 +63,8 @@ function with_defaults(config: InstanceConfig): Partial { !config.default_pay_delay || config.default_pay_delay.d_us === "forever" ? undefined : add(new Date(), { - seconds: config.default_pay_delay.d_us / (1000 * 1000), - }); + seconds: config.default_pay_delay.d_us / (1000 * 1000), + }); return { inventoryProducts: {}, @@ -138,7 +139,7 @@ export function CreatePage({ const [value, valueHandler] = useState(with_defaults(instanceConfig)); const config = useConfigContext(); const zero = Amounts.zeroOfCurrency(config.currency); - + const [settings] = useSettings() const inventoryList = Object.values(value.inventoryProducts || {}); const productList = Object.values(value.products || {}); @@ -154,10 +155,10 @@ export function CreatePage({ order_price: !value.pricing?.order_price ? i18n.str`required` : !parsedPrice - ? i18n.str`not valid` - : Amounts.isZero(parsedPrice) - ? i18n.str`must be greater than 0` - : undefined, + ? i18n.str`not valid` + : Amounts.isZero(parsedPrice) + ? i18n.str`must be greater than 0` + : undefined, }), extra: value.extra && !stringIsValidJSON(value.extra) @@ -167,47 +168,47 @@ export function CreatePage({ refund_deadline: !value.payments?.refund_deadline ? undefined : !isFuture(value.payments.refund_deadline) - ? i18n.str`should be in the future` - : value.payments.pay_deadline && - isBefore(value.payments.refund_deadline, value.payments.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.str`wire transfer deadline cannot be before refund deadline` - : undefined, + ? i18n.str`should be in the future` + : value.payments.pay_deadline && + isBefore(value.payments.refund_deadline, value.payments.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.str`wire transfer deadline cannot be before refund deadline` + : undefined, pay_deadline: !value.payments?.pay_deadline ? undefined : !isFuture(value.payments.pay_deadline) - ? i18n.str`should be in the future` - : value.payments.wire_transfer_deadline && - isBefore( - value.payments.wire_transfer_deadline, - value.payments.pay_deadline, - ) - ? i18n.str`wire transfer deadline cannot be before pay deadline` - : undefined, + ? i18n.str`should be in the future` + : value.payments.wire_transfer_deadline && + isBefore( + value.payments.wire_transfer_deadline, + value.payments.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.str`should be in the future` - : !value.payments?.refund_deadline - ? i18n.str`should have a refund deadline` - : !isAfter( - value.payments.refund_deadline, - value.payments.auto_refund_deadline, - ) - ? i18n.str`auto refund cannot be after refund deadline` - : undefined, + ? i18n.str`should be in the future` + : !value.payments?.refund_deadline + ? i18n.str`should have a refund deadline` + : !isAfter( + value.payments.refund_deadline, + value.payments.auto_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.str`should be in the future` - : undefined, + ? i18n.str`should be in the future` + : undefined, }), }; const hasErrors = Object.keys(errors).some( @@ -227,27 +228,27 @@ export function CreatePage({ extra: value.extra, pay_deadline: value.payments.pay_deadline ? { - t_s: Math.floor(value.payments.pay_deadline.getTime() / 1000), - } + t_s: Math.floor(value.payments.pay_deadline.getTime() / 1000), + } : undefined, wire_transfer_deadline: value.payments.wire_transfer_deadline ? { - t_s: Math.floor( - value.payments.wire_transfer_deadline.getTime() / 1000, - ), - } + t_s: Math.floor( + value.payments.wire_transfer_deadline.getTime() / 1000, + ), + } : undefined, refund_deadline: value.payments.refund_deadline ? { - t_s: Math.floor(value.payments.refund_deadline.getTime() / 1000), - } + t_s: Math.floor(value.payments.refund_deadline.getTime() / 1000), + } : undefined, auto_refund: value.payments.auto_refund_deadline ? { - d_us: Math.floor( - value.payments.auto_refund_deadline.getTime() * 1000, - ), - } + d_us: Math.floor( + value.payments.auto_refund_deadline.getTime() * 1000, + ), + } : undefined, wire_fee_amortization: value.payments.wire_fee_amortization as number, max_fee: value.payments.max_fee as string, @@ -374,13 +375,15 @@ export function CreatePage({ inventory={instanceInventory} /> - { - setEditingProduct(undefined); - return addNewProduct(p); - }} - /> + {settings.advanceOrderMode && + { + setEditingProduct(undefined); + return addNewProduct(p); + }} + /> + } {allProducts.length > 0 && ( 0 && (discountOrRise < 1 ? `discount of %${Math.round( - (1 - discountOrRise) * 100, - )}` + (1 - discountOrRise) * 100, + )}` : `rise of %${Math.round((discountOrRise - 1) * 100)}`) } tooltip={i18n.str`Amount to be paid by the customer`} @@ -445,102 +448,108 @@ export function CreatePage({ tooltip={i18n.str`Title of the order to be shown to the customer`} /> - - - {value.shipping?.delivery_date && ( - - - - )} - - + {settings.advanceOrderMode && + + + {value.shipping?.delivery_date && ( + + + + )} + + + } - - - - - + {settings.advanceOrderMode && + + + + + - - - - - 0 - ? i18n.str`Min age defined by the producs is ${minAgeByProducts}` - : undefined - } - /> - + + + + + 0 + ? i18n.str`Min age defined by the producs is ${minAgeByProducts}` + : undefined + } + /> + + } - - - + label={i18n.str`Additional information`} + tooltip={i18n.str`Custom information to be included in the contract for this order.`} + > + + + }
-- cgit v1.2.3 From b1cea84ca8aa346b3fb0ca479244b21f4fb1a771 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 7 Aug 2023 08:13:47 -0300 Subject: show next expiration --- .../paths/instance/orders/details/DetailPage.tsx | 31 ++++++++++------------ .../src/paths/instance/orders/details/Timeline.tsx | 20 +++++++------- 2 files changed, 24 insertions(+), 27 deletions(-) (limited to 'packages/merchant-backoffice-ui/src/paths/instance') 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 8dabfbe12..8965d41c9 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 @@ -21,7 +21,7 @@ import { AmountJson, Amounts } from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { format } from "date-fns"; +import { format, formatDistance } from "date-fns"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { FormProvider } from "../../../../components/form/FormProvider.js"; @@ -223,6 +223,7 @@ function ClaimedPage({
+
@@ -668,9 +665,9 @@ function UnpaidPage({ {order.creation_time.t_s === "never" ? "never" : format( - new Date(order.creation_time.t_s * 1000), - "yyyy-MM-dd HH:mm:ss", - )} + new Date(order.creation_time.t_s * 1000), + "yyyy-MM-dd HH:mm:ss", + )}

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Timeline.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Timeline.tsx index d73ba3acc..e68889a92 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Timeline.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Timeline.tsx @@ -67,7 +67,7 @@ export function Timeline({ events: e }: Props) { ); case "start": return ( -
+
); @@ -104,7 +104,7 @@ export function Timeline({ events: e }: Props) { } })()}
-

{format(e.when, "yyyy/MM/dd HH:mm:ss")}

+ {e.description !== "now" &&

{format(e.when, "yyyy/MM/dd HH:mm:ss")}

}

{e.description}

@@ -117,12 +117,12 @@ export interface Event { when: Date; description: string; type: - | "start" - | "refund" - | "refund-taken" - | "wired" - | "wired-range" - | "deadline" - | "delivery" - | "now"; + | "start" + | "refund" + | "refund-taken" + | "wired" + | "wired-range" + | "deadline" + | "delivery" + | "now"; } -- cgit v1.2.3