From 487012e72eb7a0413c207653d9efc28873a9e356 Mon Sep 17 00:00:00 2001
From: Gitanjli <96485413+gitanjli525@users.noreply.github.com>
Date: Tue, 15 Oct 2024 13:44:16 +0530
Subject: [PATCH] fix: profile name validations (#1564)

---
 src/screens/Connectors/ConnectorUtils.res |  2 +-
 src/screens/OMPSwitch/MerchantSwitch.res  | 46 ++++++++++------
 src/screens/OMPSwitch/ProfileSwitch.res   | 67 ++++++++++++++++++-----
 3 files changed, 83 insertions(+), 32 deletions(-)

diff --git a/src/screens/Connectors/ConnectorUtils.res b/src/screens/Connectors/ConnectorUtils.res
index 6d1799e90..9cfd19062 100644
--- a/src/screens/Connectors/ConnectorUtils.res
+++ b/src/screens/Connectors/ConnectorUtils.res
@@ -494,7 +494,7 @@ let taxJarInfo = {
   description: "TaxJar is reimagining how businesses manage sales tax compliance. Its cloud-based platform automates the entire sales tax life cycle across all sales channels — from calculations and nexus tracking to reporting and filing.",
 }
 let nexixpayInfo = {
-  description : "Nexi's latest generation virtual POS is designed for those who, through a website, want to sell goods or services by managing payments online."
+  description: "Nexi's latest generation virtual POS is designed for those who, through a website, want to sell goods or services by managing payments online.",
 }
 let signifydInfo = {
   description: "One platform to protect the entire shopper journey end-to-end",
diff --git a/src/screens/OMPSwitch/MerchantSwitch.res b/src/screens/OMPSwitch/MerchantSwitch.res
index cd15d9ffc..dbfd234ef 100644
--- a/src/screens/OMPSwitch/MerchantSwitch.res
+++ b/src/screens/OMPSwitch/MerchantSwitch.res
@@ -24,14 +24,28 @@ module NewAccountCreationModal = {
     }
 
     let onSubmit = (values, _) => {
-      createNewAccount(values)
+      open LogicUtils
+      let dict = values->getDictFromJsonObject
+      let trimmedData = dict->getString("company_name", "")->String.trim
+      Dict.set(dict, "company_name", trimmedData->JSON.Encode.string)
+      createNewAccount(dict->JSON.Encode.object)
     }
 
     let merchantName = FormRenderer.makeFieldInfo(
       ~label="Merchant Name",
       ~name="company_name",
-      ~placeholder="Eg: My New Merchant",
-      ~customInput=InputFields.textInput(),
+      ~customInput=(~input, ~placeholder as _) =>
+        InputFields.textInput()(
+          ~input={
+            ...input,
+            onChange: event =>
+              ReactEvent.Form.target(event)["value"]
+              ->String.trimStart
+              ->Identity.stringToFormReactEvent
+              ->input.onChange,
+          },
+          ~placeholder="Eg: My New Merchant",
+        ),
       ~isRequired=true,
     )
 
@@ -44,7 +58,7 @@ module NewAccountCreationModal = {
       let errorMessage = if companyName->isEmptyString {
         "Merchant name cannot be empty"
       } else if companyName->String.length > 64 {
-        "Merchant name too long"
+        "Merchant name cannot exceed 64 characters"
       } else if !RegExp.test(RegExp.fromString(regexForCompanyName), companyName) {
         "Merchant name should not contain special characters"
       } else {
@@ -59,23 +73,22 @@ module NewAccountCreationModal = {
     }
 
     let modalBody = {
-      <div className="p-2 m-2">
-        <div className="py-5 px-3 flex justify-between align-top">
+      <div className="">
+        <div className="pt-3 m-3 flex justify-between">
           <CardUtils.CardHeader
             heading="Add a new merchant"
             subHeading=""
             customSubHeadingStyle="w-full !max-w-none pr-10"
           />
           <div className="h-fit" onClick={_ => setShowModal(_ => false)}>
-            <Icon
-              name="close" className="border-2 p-2 rounded-2xl bg-gray-100 cursor-pointer" size=30
-            />
+            <Icon name="modal-close-icon" className="cursor-pointer" size=30 />
           </div>
         </div>
+        <hr />
         <Form key="new-account-creation" onSubmit validate={validateForm}>
-          <div className="flex flex-col gap-12 h-full w-full">
-            <FormRenderer.DesktopRow>
-              <div className="flex flex-col gap-5">
+          <div className="flex flex-col h-full w-full">
+            <div className="py-10">
+              <FormRenderer.DesktopRow>
                 <FormRenderer.FieldRenderer
                   fieldWrapperClass="w-full"
                   field={merchantName}
@@ -83,10 +96,11 @@ module NewAccountCreationModal = {
                   errorClass={ProdVerifyModalUtils.errorClass}
                   labelClass="!text-black font-medium !-ml-[0.5px]"
                 />
-              </div>
-            </FormRenderer.DesktopRow>
-            <div className="flex justify-end w-full pr-5 pb-3">
-              <FormRenderer.SubmitButton text="Add Merchant" buttonSize={Small} />
+              </FormRenderer.DesktopRow>
+            </div>
+            <hr className="mt-4" />
+            <div className="flex justify-end w-full p-3">
+              <FormRenderer.SubmitButton text="Add Merchant" buttonSize=Small />
             </div>
           </div>
         </Form>
diff --git a/src/screens/OMPSwitch/ProfileSwitch.res b/src/screens/OMPSwitch/ProfileSwitch.res
index 4ea507d6b..e5d9259c7 100644
--- a/src/screens/OMPSwitch/ProfileSwitch.res
+++ b/src/screens/OMPSwitch/ProfileSwitch.res
@@ -49,44 +49,81 @@ module NewAccountCreationModal = {
     }
 
     let onSubmit = (values, _) => {
-      createNewAccount(values)
+      open LogicUtils
+      let dict = values->getDictFromJsonObject
+      let trimmedData = dict->getString("profile_name", "")->String.trim
+      Dict.set(dict, "profile_name", trimmedData->JSON.Encode.string)
+      createNewAccount(dict->JSON.Encode.object)
     }
 
     let profileName = FormRenderer.makeFieldInfo(
       ~label="Profile Name",
       ~name="profile_name",
-      ~placeholder="Eg: My New Profile",
-      ~customInput=InputFields.textInput(),
+      ~customInput=(~input, ~placeholder as _) =>
+        InputFields.textInput()(
+          ~input={
+            ...input,
+            onChange: event =>
+              ReactEvent.Form.target(event)["value"]
+              ->String.trimStart
+              ->Identity.stringToFormReactEvent
+              ->input.onChange,
+          },
+          ~placeholder="Eg: My New Profile",
+        ),
       ~isRequired=true,
     )
 
+    let validateForm = (values: JSON.t) => {
+      open LogicUtils
+      let errors = Dict.make()
+      let profileName = values->getDictFromJsonObject->getString("profile_name", "")->String.trim
+      let regexForProfileName = "^([a-z]|[A-Z]|[0-9]|_|\\s)+$"
+
+      let errorMessage = if profileName->isEmptyString {
+        "Profile name cannot be empty"
+      } else if profileName->String.length > 64 {
+        "Profile name cannot exceed 64 characters"
+      } else if !RegExp.test(RegExp.fromString(regexForProfileName), profileName) {
+        "Profile name should not contain special characters"
+      } else {
+        ""
+      }
+
+      if errorMessage->isNonEmptyString {
+        Dict.set(errors, "profile_name", errorMessage->JSON.Encode.string)
+      }
+
+      errors->JSON.Encode.object
+    }
+
     let modalBody =
-      <div className="p-2 m-2">
-        <div className="py-5 px-3 flex justify-between align-top">
+      <div className="">
+        <div className="pt-3 m-3 flex justify-between">
           <CardUtils.CardHeader
             heading="Add a new profile"
             subHeading=""
             customSubHeadingStyle="w-full !max-w-none pr-10"
           />
           <div className="h-fit" onClick={_ => setShowModal(_ => false)}>
-            <Icon
-              name="close" className="border-2 p-2 rounded-2xl bg-gray-100 cursor-pointer" size=30
-            />
+            <Icon name="modal-close-icon" className="cursor-pointer" size=30 />
           </div>
         </div>
-        <Form key="new-account-creation" onSubmit>
-          <div className="flex flex-col gap-12 h-full w-full">
-            <FormRenderer.DesktopRow>
-              <div className="flex flex-col gap-5">
+        <hr />
+        <Form key="new-account-creation" onSubmit validate={validateForm}>
+          <div className="flex flex-col h-full w-full">
+            <div className="py-10">
+              <FormRenderer.DesktopRow>
                 <FormRenderer.FieldRenderer
                   fieldWrapperClass="w-full"
                   field={profileName}
                   errorClass={ProdVerifyModalUtils.errorClass}
                   labelClass="!text-black font-medium !-ml-[0.5px]"
                 />
-              </div>
-            </FormRenderer.DesktopRow>
-            <div className="flex justify-end w-full pr-5 pb-3">
+              </FormRenderer.DesktopRow>
+            </div>
+            <hr className="mt-4" />
+            <div className="flex justify-end w-full p-3">
               <FormRenderer.SubmitButton text="Add Profile" buttonSize=Small />
             </div>
           </div>