From b0610d24571593909cd6683b340fa266de046e31 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 8 Jan 2024 14:24:07 -0300 Subject: order config using relative time --- .../src/components/form/InputDuration.tsx | 126 ++++++++------- .../src/components/picker/DurationPicker.tsx | 2 +- .../merchant-backoffice-ui/src/declaration.d.ts | 7 +- .../src/paths/admin/create/CreatePage.tsx | 116 +++++++------- .../paths/instance/orders/create/CreatePage.tsx | 178 ++++++++++----------- .../src/paths/instance/update/UpdatePage.tsx | 73 +++------ 6 files changed, 240 insertions(+), 262 deletions(-) (limited to 'packages/merchant-backoffice-ui') diff --git a/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx b/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx index ef4df1df4..8b6b5636d 100644 --- a/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx +++ b/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx @@ -20,16 +20,19 @@ */ import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { formatDuration, intervalToDuration } from "date-fns"; -import { h, VNode } from "preact"; +import { ComponentChildren, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { SimpleModal } from "../modal/index.js"; import { DurationPicker } from "../picker/DurationPicker.js"; import { InputProps, useField } from "./useField.js"; +import { Duration } from "@gnu-taler/taler-util"; export interface Props extends InputProps { expand?: boolean; readonly?: boolean; withForever?: boolean; + side?: ComponentChildren; + withoutClear?: boolean; } export function InputDuration({ @@ -41,19 +44,22 @@ export function InputDuration({ help, readonly, withForever, + withoutClear, + side, }: Props): VNode { const [opened, setOpened] = useState(false); const { i18n } = useTranslationContext(); - const { error, required, value, onChange } = useField(name); + const { error, required, value: anyValue, onChange } = useField(name); let strValue = ""; + const value: Duration = anyValue if (!value) { strValue = ""; - } else if (value.d_us === "forever") { + } else if (value.d_ms === "forever") { strValue = i18n.str`forever`; } else { strValue = formatDuration( - intervalToDuration({ start: 0, end: value.d_us / 1000 }), + intervalToDuration({ start: 0, end: value.d_ms }), { locale: { formatDistance: (name, value) => { @@ -97,72 +103,80 @@ export function InputDuration({ )} -
-
-
-

- +

+
+
+

+ { + if (!readonly) setOpened(true); + }} + /> + {required && ( + + + + )} +

+
{ if (!readonly) setOpened(true); }} - /> - {required && ( - - - - )} - {help} -

-
{ - if (!readonly) setOpened(true); - }} - > - - - - - + > + + + + + +
+ {error &&

{error}

}
- {error &&

{error}

} + {withForever && ( + + + + )} + {!readonly && !withoutClear && ( + + + + )} + {side}
- {withForever && ( - - - - )} - {!readonly && ( - - - - )} + + {help} +
+ + {opened && ( setOpened(false)}> { - onChange({ d_us: v } as any); + onChange({ d_ms: v } as any); }} /> diff --git a/packages/merchant-backoffice-ui/src/components/picker/DurationPicker.tsx b/packages/merchant-backoffice-ui/src/components/picker/DurationPicker.tsx index 0968b0a17..ba003cce5 100644 --- a/packages/merchant-backoffice-ui/src/components/picker/DurationPicker.tsx +++ b/packages/merchant-backoffice-ui/src/components/picker/DurationPicker.tsx @@ -42,7 +42,7 @@ export function DurationPicker({ onChange, value, }: Props): VNode { - const ss = 1000 * 1000; + const ss = 1000; const ms = ss * 60; const hs = ms * 60; const ds = hs * 24; diff --git a/packages/merchant-backoffice-ui/src/declaration.d.ts b/packages/merchant-backoffice-ui/src/declaration.d.ts index dc53e3e83..f99dd1867 100644 --- a/packages/merchant-backoffice-ui/src/declaration.d.ts +++ b/packages/merchant-backoffice-ui/src/declaration.d.ts @@ -23,7 +23,7 @@ type HashCode = string; type EddsaPublicKey = string; type EddsaSignature = string; type WireTransferIdentifierRawP = string; -type RelativeTime = Duration; +type RelativeTime = TalerProtocolDuration; type ImageDataUrl = string; type MerchantUserType = "business" | "individual"; @@ -38,9 +38,12 @@ interface Timestamp { // never happen. t_s: number | "never"; } -interface Duration { +interface TalerProtocolDuration { d_us: number | "forever"; } +interface Duration { + d_ms: number | "forever"; +} interface WithId { id: string; diff --git a/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx index 093c24c3d..d13b7e929 100644 --- a/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx @@ -32,13 +32,16 @@ import { MerchantBackend } from "../../../declaration.js"; import { INSTANCE_ID_REGEX } from "../../../utils/constants.js"; import { undefinedIfEmpty } from "../../../utils/table.js"; import { SetTokenNewInstanceModal } from "../../../components/modal/index.js"; +import { Duration } from "@gnu-taler/taler-util"; -export type Entity = MerchantBackend.Instances.InstanceConfigurationMessage & { +export type Entity = Omit, "default_wire_transfer_delay"> & { auth_token?: string; + default_pay_delay: Duration, + default_wire_transfer_delay: Duration, }; interface Props { - onCreate: (d: Entity) => Promise; + onCreate: (d: MerchantBackend.Instances.InstanceConfigurationMessage) => Promise; onBack?: () => void; forceId?: string; } @@ -49,8 +52,8 @@ function with_defaults(id?: string): Partial { // accounts: [], user_type: "business", use_stefan: true, - default_pay_delay: { d_us: 2 * 1000 * 60 * 60 * 1000 }, // two hours - default_wire_transfer_delay: { d_us: 1000 * 2 * 60 * 60 * 24 * 1000 }, // two days + default_pay_delay: { d_ms: 2 * 60 * 60 * 1000 }, // two hours + default_wire_transfer_delay: { d_ms: 2 * 60 * 60 * 24 * 1000 }, // two days }; } @@ -88,9 +91,9 @@ export function CreatePage({ onCreate, onBack, forceId }: Props): VNode { default_pay_delay: !value.default_pay_delay ? i18n.str`required` : !!value.default_wire_transfer_delay && - value.default_wire_transfer_delay.d_us !== "forever" && - value.default_pay_delay.d_us !== "forever" && - value.default_pay_delay.d_us > value.default_wire_transfer_delay.d_us ? + value.default_wire_transfer_delay.d_ms !== "forever" && + value.default_pay_delay.d_ms !== "forever" && + value.default_pay_delay.d_ms > value.default_wire_transfer_delay.d_ms ? i18n.str`pay delay can't be greater than wire transfer delay` : undefined, default_wire_transfer_delay: !value.default_wire_transfer_delay ? i18n.str`required` @@ -124,7 +127,12 @@ export function CreatePage({ onCreate, onBack, forceId }: Props): VNode { if (!value.jurisdiction) value.jurisdiction = {}; // remove above use conversion // schema.validateSync(value, { abortEarly: false }) - return onCreate(value as Entity); + value.default_pay_delay = Duration.toTalerProtocolDuration(value.default_pay_delay!) as any + value.default_wire_transfer_delay = Duration.toTalerProtocolDuration(value.default_wire_transfer_delay!) as any + // delete value.default_pay_delay; + // delete value.default_wire_transfer_delay; + + return onCreate(value as any as MerchantBackend.Instances.InstanceConfigurationMessage); }; function updateToken(token: string | null) { @@ -174,54 +182,54 @@ export function CreatePage({ onCreate, onBack, forceId }: Props): VNode {
-
-

- -

+
+

+ +

+
-
-
-
- {!isTokenSet ? ( -

- - Access token is not yet configured. This instance can't be - created. - -

- ) : value.auth_token === undefined ? ( -

- - No access token. Authorization must be handled externally. - -

- ) : ( -

- - Access token is set. Authorization is handled by the - merchant backend. - -

- )} +
+
+ {!isTokenSet ? ( +

+ + Access token is not yet configured. This instance can't be + created. + +

+ ) : value.auth_token === undefined ? ( +

+ + No access token. Authorization must be handled externally. + +

+ ) : ( +

+ + Access token is set. Authorization is handled by the + merchant backend. + +

+ )} +
-
{onBack && (
- {/*
-
-

- -

-
-
*/}
-- cgit v1.2.3