feat: update org name (#1669)

Co-authored-by: prajwalnl0 <[email protected]>

src/screens/APIUtils/APIUtils.res

@@ -34,6 +34,17 @@ let useGetURL = () => {
     /* MERCHANT ACCOUNT DETAILS (Get and Post) */
     | MERCHANT_ACCOUNT => `accounts/${merchantId}`
 
+    /* ORGANIZATION UPDATE */
+    | UPDATE_ORGANIZATION =>
+      switch methodType {
+      | Put =>
+        switch id {
+        | Some(id) => `organization/${id}`
+        | None => `organization`
+        }
+      | _ => ""
+      }
+
     /* CUSTOMERS DETAILS */
     | CUSTOMERS =>
       switch methodType {

src/screens/APIUtils/APIUtilsTypes.res

@@ -2,6 +2,7 @@ type entityName =
   | CONNECTOR
   | ROUTING
   | MERCHANT_ACCOUNT
+  | UPDATE_ORGANIZATION
   | REFUNDS
   | REFUND_FILTERS
   | DISPUTES

src/screens/OMPSwitch/OMPSwitchHelper.res

@@ -1,6 +1,6 @@
 module ListBaseComp = {
   @react.component
-  let make = (~heading, ~subHeading, ~arrow) => {
+  let make = (~heading, ~subHeading, ~arrow, ~showEditIcon=false, ~onEditClick=_ => ()) => {
     <div
       className="flex items-center justify-between text-sm text-center text-white font-medium rounded hover:bg-opacity-80 bg-sidebar-blue cursor-pointer">
       <div className="flex flex-col items-start px-2 py-2 w-5/6">
@@ -9,6 +9,9 @@ module ListBaseComp = {
           <p className="fs-10"> {subHeading->React.string} </p>
         </div>
       </div>
+      <RenderIf condition={showEditIcon}>
+        <Icon name="pencil-alt" size=10 onClick=onEditClick className="mt-4 mr-1" />
+      </RenderIf>
       <div className="px-2 py-2">
         <Icon
           className={arrow
@@ -177,3 +180,83 @@ let generateDropdownOptions: array<OMPSwitchTypes.ompListTypes> => array<
   })
   options
 }
+
+module EditOrgName = {
+  @react.component
+  let make = (~showModal, ~setShowModal, ~orgList, ~orgId, ~getOrgList) => {
+    open LogicUtils
+    open APIUtils
+    let getURL = useGetURL()
+    let updateDetails = useUpdateMethod()
+    let showToast = ToastState.useShowToast()
+    let initialValues =
+      [
+        ("organization_name", OMPSwitchUtils.currentOMPName(orgList, orgId)->JSON.Encode.string),
+      ]->Dict.fromArray
+
+    let validateForm = (values: JSON.t) => {
+      let errors = Dict.make()
+      let organizationName =
+        values->getDictFromJsonObject->getString("organization_name", "")->String.trim
+      let regexForOrganizationName = "^([a-z]|[A-Z]|[0-9]|_|\\s)+$"
+
+      let errorMessage = if organizationName->isEmptyString {
+        "Organization name cannot be empty"
+      } else if organizationName->String.length > 64 {
+        "Organization name cannot exceed 64 characters"
+      } else if !RegExp.test(RegExp.fromString(regexForOrganizationName), organizationName) {
+        "Organization name should not contain special characters"
+      } else {
+        ""
+      }
+
+      if errorMessage->isNonEmptyString {
+        Dict.set(errors, "organization_name", errorMessage->JSON.Encode.string)
+      }
+
+      errors->JSON.Encode.object
+    }
+
+    let orgName = FormRenderer.makeFieldInfo(
+      ~label="Org Name",
+      ~name="organization_name",
+      ~placeholder=`Eg: Hyperswitch`,
+      ~customInput=InputFields.textInput(),
+      ~isRequired=true,
+    )
+
+    let onSubmit = async (values, _) => {
+      try {
+        let url = getURL(~entityName=UPDATE_ORGANIZATION, ~methodType=Put, ~id=Some(orgId))
+        let _ = await updateDetails(url, values, Put)
+        let _ = await getOrgList()
+        showToast(~message="Updated organization name!", ~toastType=ToastSuccess)
+      } catch {
+      | _ => showToast(~message="Failed to update organization name!", ~toastType=ToastError)
+      }
+      setShowModal(_ => false)
+      Nullable.null
+    }
+
+    <>
+      <Modal modalHeading="Edit Org name" showModal setShowModal modalClass="w-1/4 m-auto">
+        <Form initialValues={initialValues->JSON.Encode.object} onSubmit validate={validateForm}>
+          <div className="flex flex-col gap-12 h-full w-full">
+            <FormRenderer.DesktopRow>
+              <FormRenderer.FieldRenderer
+                fieldWrapperClass="w-full"
+                field={orgName}
+                labelClass="!text-black font-medium !-ml-[0.5px]"
+              />
+            </FormRenderer.DesktopRow>
+            <div className="flex justify-end w-full pr-5 pb-3">
+              <FormRenderer.SubmitButton
+                text="Submit changes" buttonSize={Small} loadingText="Processing..."
+              />
+            </div>
+          </div>
+        </Form>
+      </Modal>
+    </>
+  }
+}

src/screens/OMPSwitch/OrgSwitch.res

@@ -8,9 +8,11 @@ let make = () => {
   let fetchDetails = useGetMethod()
   let showToast = ToastState.useShowToast()
   let orgSwitch = OMPSwitchHooks.useOrgSwitch()
+  let {userHasAccess} = GroupACLHooks.useUserGroupACLHook()
   let {userInfo: {orgId}} = React.useContext(UserInfoProvider.defaultContext)
   let (orgList, setOrgList) = Recoil.useRecoilState(HyperswitchAtom.orgListAtom)
   let (showSwitchingOrg, setShowSwitchingOrg) = React.useState(_ => false)
+  let (showModal, setShowModal) = React.useState(_ => false)
   let (arrow, setArrow) = React.useState(_ => false)
 
   let getOrgList = async () => {
@@ -44,6 +46,11 @@ let make = () => {
     }
   }
 
+  let onEditClick = e => {
+    setShowModal(_ => true)
+    e->ReactEvent.Mouse.stopPropagation
+  }
+
   let input: ReactFinalForm.fieldRenderPropsInput = {
     name: "name",
     onBlur: _ => (),
@@ -77,7 +84,11 @@ let make = () => {
       customSelectStyle="md:bg-blue-840 hover:bg-popover-background-hover rounded"
       searchable=false
       baseComponent={<ListBaseComp
-        heading="Org" subHeading={currentOMPName(orgList, orgId)} arrow
+        heading="Org"
+        subHeading={currentOMPName(orgList, orgId)}
+        arrow
+        showEditIcon={userHasAccess(~groupAccess=OrganizationManage) === Access}
+        onEditClick
       />}
       baseComponentCustomStyle="border-blue-820 rounded bg-popover-background rounded text-white"
       optionClass="text-gray-200 text-fs-14"
@@ -88,6 +99,7 @@ let make = () => {
       customScrollStyle
       shouldDisplaySelectedOnTop=true
     />
+    <EditOrgName showModal setShowModal orgList orgId getOrgList />
     <LoaderModal
       showModal={showSwitchingOrg}
       setShowModal={setShowSwitchingOrg}