Merge branch 'switch-merchant-obj-change' of github.com:juspay/hypers…

…witch-control-center into prod-x-feature-deployment

src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res

@@ -1,3 +1,24 @@
+type switchMerchantListResponse = {
+  merchant_id: string,
+  merchant_name: string,
+}
+
+let convertListResponseToTypedResponse = json => {
+  open LogicUtils
+  json
+  ->getArrayFromJson([])
+  ->Array.map(ele => {
+    let dictOfElement = ele->getDictFromJsonObject
+    let merchantId = dictOfElement->getString("merchant_id", "")
+    let merchantName = dictOfElement->getString("merchant_name", merchantId)
+
+    {
+      merchant_id: merchantId,
+      merchant_name: merchantName->String.length > 0 ? merchantName : merchantId,
+    }
+  })
+}
+
 module NewAccountCreationModal = {
   @react.component
   let make = (~setShowModal, ~showModal, ~fetchMerchantIDs) => {
@@ -118,24 +139,34 @@ module ExternalUser = {
   let make = (~switchMerchant, ~isAddMerchantEnabled) => {
     open APIUtils
     let fetchDetails = useGetMethod()
-    let (selectedMerchantID, setSelectedMerchantID) = React.useState(_ => "")
+    let defaultMerchantId = HSLocalStorage.getFromMerchantDetails("merchant_id")
+    let (selectedMerchantObject, setSelectedMerchantObject) = React.useState(_ => {
+      merchant_id: defaultMerchantId,
+      merchant_name: defaultMerchantId,
+    })
     let (showModal, setShowModal) = React.useState(_ => false)
     let (options, setOptions) = React.useState(_ => [])
 
     let fetchMerchantIDs = async () => {
       let url = getURL(~entityName=USERS, ~userType=#SWITCH_MERCHANT, ~methodType=Get, ())
       try {
         let res = await fetchDetails(url)
-        let merchantIdsArray = res->LogicUtils.getStrArryFromJson
-        setOptions(_ => merchantIdsArray)
+        let typedValueOfResponse = res->convertListResponseToTypedResponse
+        setOptions(_ => typedValueOfResponse)
+        let extractMerchantObject =
+          typedValueOfResponse
+          ->Array.find(ele => ele.merchant_id === defaultMerchantId)
+          ->Option.getWithDefault({
+            merchant_id: defaultMerchantId,
+            merchant_name: defaultMerchantId,
+          })
+        setSelectedMerchantObject(_ => extractMerchantObject)
       } catch {
       | _ => ()
       }
     }
 
     React.useEffect0(() => {
-      open HSLocalStorage
-      setSelectedMerchantID(_ => getFromMerchantDetails("merchant_id"))
       fetchMerchantIDs()->ignore
       None
     })
@@ -149,7 +180,7 @@ module ExternalUser = {
               className="inline-flex whitespace-pre leading-5 justify-center text-sm font-medium px-4 py-2 font-medium rounded-md hover:bg-opacity-80 bg-white border">
               {buttonProps => {
                 <>
-                  {selectedMerchantID->React.string}
+                  {selectedMerchantObject.merchant_name->React.string}
                   <Icon className="rotate-180 ml-1 mt-1" name="arrow-without-tail" size=15 />
                 </>
               }}
@@ -172,7 +203,7 @@ module ExternalUser = {
                         {props =>
                           <div className="relative">
                             <button
-                              onClick={_ => option->switchMerchant->ignore}
+                              onClick={_ => option.merchant_id->switchMerchant->ignore}
                               className={
                                 let activeClasses = if props["active"] {
                                   "group flex rounded-md items-center w-full px-2 py-2 text-sm bg-gray-100 dark:bg-black"
@@ -181,9 +212,11 @@ module ExternalUser = {
                                 }
                                 `${activeClasses} font-medium`
                               }>
-                              <div className="mr-5"> {option->React.string} </div>
+                              <div className="mr-5"> {option.merchant_name->React.string} </div>
                             </button>
-                            <UIUtils.RenderIf condition={selectedMerchantID === option}>
+                            <UIUtils.RenderIf
+                              condition={selectedMerchantObject.merchant_name ===
+                                option.merchant_name}>
                               <Icon
                                 className="absolute top-2 right-2 text-blue-900"
                                 name="check"