summaryrefslogtreecommitdiff
path: root/packages/merchant-backoffice-ui/src/paths/instance/templates/update/UpdatePage.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/templates/update/UpdatePage.tsx')
-rw-r--r--packages/merchant-backoffice-ui/src/paths/instance/templates/update/UpdatePage.tsx205
1 files changed, 135 insertions, 70 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/update/UpdatePage.tsx
index b578d4664..cfb521c73 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/templates/update/UpdatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/update/UpdatePage.tsx
@@ -20,8 +20,10 @@
*/
import {
+ AmountString,
Amounts,
- MerchantTemplateContractDetails,
+ Duration,
+ assertUnreachable
} from "@gnu-taler/taler-util";
import { useTranslationContext } from "@gnu-taler/web-util/browser";
import { Fragment, VNode, h } from "preact";
@@ -35,11 +37,12 @@ import { Input } from "../../../../components/form/Input.js";
import { InputCurrency } from "../../../../components/form/InputCurrency.js";
import { InputDuration } from "../../../../components/form/InputDuration.js";
import { InputNumber } from "../../../../components/form/InputNumber.js";
+import { InputTab } from "../../../../components/form/InputTab.js";
import { InputWithAddon } from "../../../../components/form/InputWithAddon.js";
import { useBackendContext } from "../../../../context/backend.js";
-import { MerchantBackend, WithId } from "../../../../declaration.js";
-import { undefinedIfEmpty } from "../../../../utils/table.js";
-import { InputTab } from "../../../../components/form/InputTab.js";
+import { MerchantBackend } from "../../../../declaration.js";
+import { InputSearchOnList } from "../../../../components/form/InputSearchOnList.js";
+import { useInstanceOtpDevices } from "../../../../hooks/otp.js";
enum Steps {
BOTH_FIXED,
@@ -48,12 +51,19 @@ enum Steps {
NON_FIXED,
}
-type Entity = MerchantBackend.Template.TemplatePatchDetails & WithId;
+type Entity = {
+ description?: string,
+ otpId?: string | null,
+ summary?: string,
+ amount?: AmountString,
+ minimum_age?: number,
+ pay_duration?: Duration,
+};
interface Props {
- onUpdate: (d: Entity) => Promise<void>;
+ onUpdate: (d: MerchantBackend.Template.TemplatePatchDetails) => Promise<void>;
onBack?: () => void;
- template: Entity;
+ template: MerchantBackend.Template.TemplateDetails;
}
export function UpdatePage({ template, onUpdate, onBack }: Props): VNode {
@@ -61,53 +71,59 @@ export function UpdatePage({ template, onUpdate, onBack }: Props): VNode {
const { url: backendURL } = useBackendContext()
const intialStep =
- template.template_contract?.amount === undefined && template.template_contract?.summary === undefined
+ template.template_contract.amount === undefined && template.template_contract.summary === undefined
? Steps.NON_FIXED
- : template.template_contract?.summary === undefined
+ : template.template_contract.summary === undefined
? Steps.FIXED_PRICE
- : template.template_contract?.amount === undefined
+ : template.template_contract.amount === undefined
? Steps.FIXED_SUMMARY
: Steps.BOTH_FIXED;
- const [state, setState] = useState<Partial<Entity & { type: Steps }>>({ ...template, type: intialStep });
+ const [state, setState] = useState<Partial<Entity & { type: Steps }>>({
+ amount: template.template_contract.amount as AmountString | undefined,
+ description: template.template_description,
+ minimum_age: template.template_contract.minimum_age,
+ otpId: template.otp_id,
+ pay_duration: template.template_contract.pay_duration ? Duration.fromTalerProtocolDuration(template.template_contract.pay_duration) : undefined,
+ summary: template.template_contract.summary,
+ type: intialStep,
+ });
+ const devices = useInstanceOtpDevices()
+ const deviceList = !devices.ok ? [] : devices.data.otp_devices
- 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_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`
- : undefined,
- minimum_age:
- state.template_contract.minimum_age < 0
- ? i18n.str`should be greater that 0`
+ : !state.amount
+ ? i18n.str`required`
+ : !parsedPrice
+ ? i18n.str`not valid`
+ : Amounts.isZero(parsedPrice)
+ ? 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"
- ? 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(
@@ -115,19 +131,50 @@ export function UpdatePage({ template, onUpdate, 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;
- }
+ if (hasErrors || state.type === undefined) return Promise.reject();
+ switch (state.type) {
+ case Steps.FIXED_PRICE: return onUpdate({
+ 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 onUpdate({
+ 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 onUpdate({
+ 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 onUpdate({
+ 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)
}
- delete state.type
- return onUpdate(state as any);
};
@@ -140,7 +187,7 @@ export function UpdatePage({ template, onUpdate, onBack }: Props): VNode {
<div class="level-left">
<div class="level-item">
<span class="is-size-4">
- {backendURL}/templates/{template.id}
+ {backendURL}/templates/{template.otp_id}
</span>
</div>
</div>
@@ -157,16 +204,9 @@ export function UpdatePage({ template, onUpdate, onBack }: Props): VNode {
valueHandler={setState}
errors={errors}
>
- <InputWithAddon<Entity>
- name="id"
- addonBefore={`templates/`}
- readonly
- 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`}
@@ -199,32 +239,57 @@ export function UpdatePage({ template, onUpdate, 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="otpId"
+ label={i18n.str`OTP device`}
+ readonly
+ side={<button
+ class="button is-danger"
+ data-tooltip={i18n.str`remove otp device for this template`}
+ onClick={(): void => {
+ setState((v) => ({ ...v, otpId: null }));
+ }}
+ >
+ <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, otpId: p?.id }))}
+ list={deviceList.map(e => ({
+ description: e.device_description,
+ id: e.otp_device_id
+ }))}
+ />
</FormProvider>
<div class="buttons is-right mt-5">
generated by cgit v1.2.3 (git 2.39.1) at 2024-05-20 12:01:14 +0000