aboutsummaryrefslogtreecommitdiff
path: root/packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx')
-rw-r--r--packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx190
1 files changed, 122 insertions, 68 deletions
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 947f3572c..a2c0c9dfb 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
@@ -20,8 +20,11 @@
*/
import {
+ AmountString,
Amounts,
+ Duration,
MerchantTemplateContractDetails,
+ assertUnreachable,
} from "@gnu-taler/taler-util";
import { useTranslationContext } from "@gnu-taler/web-util/browser";
import { Fragment, VNode, h } from "preact";
@@ -50,10 +53,20 @@ enum Steps {
NON_FIXED,
}
-type Entity = MerchantBackend.Template.TemplateAddDetails & { type: Steps };
+// type Entity = MerchantBackend.Template.TemplateAddDetails & { type: Steps };
+type Entity = {
+ id?: string,
+ description?: string,
+ otpId?: string,
+ summary?: string,
+ amount?: AmountString,
+ minimum_age?: number,
+ pay_duration?: Duration,
+ type: Steps,
+};
interface Props {
- onCreate: (d: Entity) => Promise<void>;
+ onCreate: (d: MerchantBackend.Template.TemplateAddDetails) => Promise<void>;
onBack?: () => void;
}
@@ -63,57 +76,51 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
const devices = useInstanceOtpDevices()
const [state, setState] = useState<Partial<Entity>>({
- template_contract: {
- minimum_age: 0,
- pay_duration: {
- d_us: 1000 * 1000 * 60 * 30, //30 min
- },
+ minimum_age: 0,
+ pay_duration: {
+ d_ms: 1000 * 60 * 30, //30 min
},
type: Steps.NON_FIXED,
});
- const parsedPrice = !state.template_contract?.amount
+ const parsedPrice = !state.amount
? undefined
- : Amounts.parse(state.template_contract?.amount);
+ : Amounts.parse(state.amount);
const errors: FormErrors<Entity> = {
- template_id: !state.template_id
+ id: !state.id
? i18n.str`should not be empty`
- : !/[a-zA-Z0-9]*/.test(state.template_id)
+ : !/[a-zA-Z0-9]*/.test(state.id)
? i18n.str`no valid. only characters and numbers`
: undefined,
- template_description: !state.template_description
+ description: !state.description
? i18n.str`should not be empty`
: undefined,
- template_contract: !state.template_contract
+ amount: !(state.type === Steps.FIXED_PRICE || state.type === Steps.BOTH_FIXED)
? undefined
- : undefinedIfEmpty({
- amount: !(state.type === Steps.FIXED_PRICE || state.type === Steps.BOTH_FIXED)
- ? undefined
- : !state.template_contract?.amount
- ? i18n.str`required`
- : !parsedPrice
- ? i18n.str`not valid`
- : Amounts.isZero(parsedPrice)
- ? i18n.str`must be greater than 0`
- : undefined,
- summary: !(state.type === Steps.FIXED_SUMMARY || state.type === Steps.BOTH_FIXED)
- ? undefined
- : !state.template_contract?.summary
- ? i18n.str`required`
+ : !state.amount
+ ? i18n.str`required`
+ : !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`
- : 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<MerchantTemplateContractDetails>),
+ summary: !(state.type === Steps.FIXED_SUMMARY || state.type === Steps.BOTH_FIXED)
+ ? undefined
+ : !state.summary
+ ? i18n.str`required`
+ : undefined,
+ minimum_age:
+ state.minimum_age && state.minimum_age < 0
+ ? i18n.str`should be greater that 0`
+ : undefined,
+ pay_duration: !state.pay_duration
+ ? i18n.str`can't be empty`
+ : state.pay_duration.d_ms === "forever"
+ ? undefined
+ : state.pay_duration.d_ms < 1000 //less than one second
+ ? i18n.str`to short`
+ : undefined,
};
const hasErrors = Object.keys(errors).some(
@@ -121,21 +128,56 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
);
const submitForm = () => {
- if (hasErrors) return Promise.reject();
- if (state.template_contract) {
- if (state.type === Steps.NON_FIXED) {
- delete state.template_contract.amount;
- delete state.template_contract.summary;
- } else if (state.type === Steps.FIXED_SUMMARY) {
- delete state.template_contract.amount;
- } else if (state.type === Steps.FIXED_PRICE) {
- delete state.template_contract.summary;
- }
- }
- delete state.type
- return onCreate(state as any);
- };
-
+ if (hasErrors || state.type === undefined) return Promise.reject();
+ switch (state.type) {
+ case Steps.FIXED_PRICE: return onCreate({
+ template_id: state.id!,
+ template_description: state.description!,
+ template_contract: {
+ minimum_age: state.minimum_age!,
+ pay_duration: Duration.toTalerProtocolDuration(state.pay_duration!),
+ amount: state.amount!,
+ // summary: state.summary,
+ },
+ otp_id: state.otpId!
+ })
+ case Steps.FIXED_SUMMARY: return onCreate({
+ template_id: state.id!,
+ template_description: state.description!,
+ template_contract: {
+ minimum_age: state.minimum_age!,
+ pay_duration: Duration.toTalerProtocolDuration(state.pay_duration!),
+ // amount: state.amount!,
+ summary: state.summary,
+ },
+ otp_id: state.otpId!,
+ })
+ case Steps.NON_FIXED: return onCreate({
+ template_id: state.id!,
+ template_description: state.description!,
+ template_contract: {
+ minimum_age: state.minimum_age!,
+ pay_duration: Duration.toTalerProtocolDuration(state.pay_duration!),
+ // amount: state.amount!,
+ // summary: state.summary,
+ },
+ otp_id: state.otpId!,
+ })
+ case Steps.BOTH_FIXED: return onCreate({
+ template_id: state.id!,
+ template_description: state.description!,
+ template_contract: {
+ minimum_age: state.minimum_age!,
+ pay_duration: Duration.toTalerProtocolDuration(state.pay_duration!),
+ amount: state.amount!,
+ summary: state.summary,
+ },
+ otp_id: state.otpId!,
+ })
+ default: assertUnreachable(state.type)
+ // return onCreate(state);
+ };
+ }
const deviceList = !devices.ok ? [] : devices.data.otp_devices
return (
@@ -150,21 +192,22 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
errors={errors}
>
<InputWithAddon<Entity>
- name="template_id"
- help={`${backendURL}/templates/${state.template_id ?? ""}`}
+ name="id"
+ help={`${backendURL}/templates/${state.id ?? ""}`}
label={i18n.str`Identifier`}
tooltip={i18n.str`Name of the template in URLs.`}
/>
<Input<Entity>
- name="template_description"
+ name="description"
label={i18n.str`Description`}
help=""
tooltip={i18n.str`Describe what this template stands for`}
/>
- <InputTab
+ <InputTab<Entity>
name="type"
label={i18n.str`Type`}
help={(() => {
+ if (state.type === undefined) return ""
switch (state.type) {
case Steps.NON_FIXED: return i18n.str`User will be able to input price and summary before payment.`
case Steps.FIXED_PRICE: return i18n.str`User will be able to add a summary before payment.`
@@ -189,41 +232,52 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
}}
/>
{state.type === Steps.BOTH_FIXED || state.type === Steps.FIXED_SUMMARY ?
- <Input
- name="template_contract.summary"
+ <Input<Entity>
+ name="summary"
inputType="multiline"
label={i18n.str`Fixed summary`}
tooltip={i18n.str`If specified, this template will create order with the same summary`}
/>
: undefined}
{state.type === Steps.BOTH_FIXED || state.type === Steps.FIXED_PRICE ?
- <InputCurrency
- name="template_contract.amount"
+ <InputCurrency<Entity>
+ name="amount"
label={i18n.str`Fixed price`}
tooltip={i18n.str`If specified, this template will create order with the same price`}
/>
: undefined}
- <InputNumber
- name="template_contract.minimum_age"
+ <InputNumber<Entity>
+ name="minimum_age"
label={i18n.str`Minimum age`}
help=""
tooltip={i18n.str`Is this contract restricted to some age?`}
/>
- <InputDuration
- name="template_contract.pay_duration"
+ <InputDuration<Entity>
+ name="pay_duration"
label={i18n.str`Payment timeout`}
help=""
tooltip={i18n.str`How much time has the customer to complete the payment once the order was created.`}
/>
<Input<Entity>
- name="otp_id"
+ name="otpId"
label={i18n.str`OTP device`}
readonly
+ side={<button
+ class="button is-danger"
+ data-tooltip={i18n.str`without otp device`}
+ onClick={(): void => {
+ setState((v) => ({ ...v, otpId: undefined }));
+ }}
+ >
+ <span>
+ <i18n.Translate>remove</i18n.Translate>
+ </span>
+ </button>}
tooltip={i18n.str`Use to verify transaction in offline mode.`}
/>
<InputSearchOnList
label={i18n.str`Search device`}
- onChange={(p) => setState((v) => ({ ...v, otp_id: p?.id }))}
+ onChange={(p) => setState((v) => ({ ...v, otpId: p?.id }))}
list={deviceList.map(e => ({
description: e.device_description,
id: e.otp_device_id
generated by cgit v1.2.3 (git 2.26.2) at 2024-07-07 14:54:21 +0000