1 files changed, 75 insertions, 17 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 78ea07477..947f3572c 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
@@ -41,8 +41,16 @@ import { useBackendContext } from "../../../../context/backend.js";
 import { MerchantBackend } from "../../../../declaration.js";
 import { useInstanceOtpDevices } from "../../../../hooks/otp.js";
 import { undefinedIfEmpty } from "../../../../utils/table.js";
+import { InputTab } from "../../../../components/form/InputTab.js";
 
-type Entity = MerchantBackend.Template.TemplateAddDetails;
+enum Steps {
+  BOTH_FIXED,
+  FIXED_PRICE,
+  FIXED_SUMMARY,
+  NON_FIXED,
+}
+
+type Entity = MerchantBackend.Template.TemplateAddDetails & { type: Steps };
 
 interface Props {
   onCreate: (d: Entity) => Promise<void>;
@@ -61,6 +69,7 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
         d_us: 1000 * 1000 * 60 * 30, //30 min
       },
     },
+    type: Steps.NON_FIXED,
   });
 
   const parsedPrice = !state.template_contract?.amount
@@ -79,13 +88,20 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
     template_contract: !state.template_contract
       ? undefined
       : undefinedIfEmpty({
-        amount: !state.template_contract?.amount
+        amount: !(state.type === Steps.FIXED_PRICE || state.type === Steps.BOTH_FIXED)
           ? undefined
-          : !parsedPrice
-            ? i18n.str`not valid`
-            : Amounts.isZero(parsedPrice)
-              ? i18n.str`must be greater than 0`
-              : 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`
@@ -106,6 +122,17 @@ 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);
   };
 
@@ -134,17 +161,48 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
                 help=""
                 tooltip={i18n.str`Describe what this template stands for`}
               />
-              <Input
-                name="template_contract.summary"
-                inputType="multiline"
-                label={i18n.str`Fixed summary`}
-                tooltip={i18n.str`If specified, this template will create order with the same summary`}
-              />
-              <InputCurrency
-                name="template_contract.amount"
-                label={i18n.str`Fixed price`}
-                tooltip={i18n.str`If specified, this template will create order with the same price`}
+              <InputTab
+                name="type"
+                label={i18n.str`Type`}
+                help={(() => {
+                  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.`
+                    case Steps.FIXED_SUMMARY: return i18n.str`User will be able to set the price before payment.`
+                    case Steps.BOTH_FIXED: return i18n.str`User will not be able to change the price or the summary.`
+                  }
+                })()}
+                tooltip={i18n.str`Define what the user be allowed to modify`}
+                values={[
+                  Steps.NON_FIXED,
+                  Steps.FIXED_PRICE,
+                  Steps.FIXED_SUMMARY,
+                  Steps.BOTH_FIXED,
+                ]}
+                toStr={(v: Steps): string => {
+                  switch (v) {
+                    case Steps.NON_FIXED: return i18n.str`Simple`
+                    case Steps.FIXED_PRICE: return i18n.str`With price`
+                    case Steps.FIXED_SUMMARY: return i18n.str`With summary`
+                    case Steps.BOTH_FIXED: return i18n.str`With price and summary`
+                  }
+                }}
               />
+              {state.type === Steps.BOTH_FIXED || state.type === Steps.FIXED_SUMMARY ?
+                <Input
+                  name="template_contract.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"
+                  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"
                 label={i18n.str`Minimum age`}