fix: UI connector preview (#1538)

juspay · Oct 8, 2024 · d32e536 · d32e536
1 parent 0cda40b
commit d32e536
Show file tree

Hide file tree

Showing 11 changed files with 231 additions and 85 deletions.
diff --git a/src/screens/Connectors/ConnectPayPalFlow/MenuOptionForPayPal.res b/src/screens/Connectors/ConnectPayPalFlow/MenuOptionForPayPal.res
@@ -85,7 +85,15 @@ let make = (
       handleCancel: {text: "Cancel"},
     })
   }
-
+  let authType = switch connectorInfo.connector_account_details {
+  | HeaderKey(authKeys) => authKeys.auth_type
+  | BodyKey(bodyKey) => bodyKey.auth_type
+  | SignatureKey(signatureKey) => signatureKey.auth_type
+  | MultiAuthKey(multiAuthKey) => multiAuthKey.auth_type
+  | CertificateAuth(certificateAuth) => certificateAuth.auth_type
+  | CurrencyAuthKey(currencyAuthKey) => currencyAuthKey.auth_type
+  | UnKnownAuthType(_) => ""
+  }
   <Popover \"as"="div" className="relative inline-block text-left">
     {_popoverProps => <>
       <Popover.Button> {_ => <Icon name="menu-option" size=28 />} </Popover.Button>
@@ -95,9 +103,7 @@ let make = (
             id="neglectTopbarTheme"
             className="relative flex flex-col bg-white py-3 overflow-hidden rounded ring-1 ring-black ring-opacity-5 w-max">
             {<>
-              <RenderIf
-                condition={connectorInfo.connector_account_details.auth_type->ConnectorUtils.mapAuthType ===
-                  #SignatureKey}>
+              <RenderIf condition={authType->ConnectorUtils.mapAuthType === #SignatureKey}>
                 <Navbar.MenuOption
                   text="Create new PayPal account"
                   onClick={_ => {
@@ -113,9 +119,7 @@ let make = (
                   setSetupAccountStatus(_ => PayPalFlowTypes.Connect_paypal_landing)
                 }}
               />
-              <RenderIf
-                condition={connectorInfo.connector_account_details.auth_type->ConnectorUtils.mapAuthType ===
-                  #BodyKey}>
+              <RenderIf condition={authType->ConnectorUtils.mapAuthType === #BodyKey}>
                 <Navbar.MenuOption
                   text="Update"
                   onClick={_ => {
@@ -124,9 +128,7 @@ let make = (
                   }}
                 />
               </RenderIf>
-              <RenderIf
-                condition={connectorInfo.connector_account_details.auth_type->ConnectorUtils.mapAuthType ===
-                  #SignatureKey}>
+              <RenderIf condition={authType->ConnectorUtils.mapAuthType === #SignatureKey}>
                 <Navbar.MenuOption
                   text="Update Payment Methods"
                   onClick={_ => {

diff --git a/src/screens/Connectors/ConnectorHome.res b/src/screens/Connectors/ConnectorHome.res
@@ -266,7 +266,6 @@ let make = (~isPayoutFlow=false, ~showStepIndicator=true, ~showBreadCrumb=true)
             currentStep
             setCurrentStep
             isUpdateFlow
-            isPayoutFlow
             setInitialValues
             getPayPalStatus
             getConnectorDetails={Some(getConnectorDetails)}

diff --git a/src/screens/Connectors/ConnectorPreview.res b/src/screens/Connectors/ConnectorPreview.res
@@ -21,7 +21,7 @@ module KeyAndCopyArea = {
         {copyValue->React.string}
       </p>
       <div
-        className="cursor-pointer h-20 w-20 pt-1"
+        className="cursor-pointer w-20 pt-1"
         onClick={_ => {
           Clipboard.writeText(copyValue)
           showToast(~message="Copied to Clipboard!", ~toastType=ToastSuccess)
@@ -127,8 +127,6 @@ module ConnectorSummaryGrid = {
   let make = (
     ~connectorInfo: ConnectorTypes.connectorPayload,
     ~connector,
-    ~isPayoutFlow,
-    ~setScreenState,
     ~setCurrentStep,
     ~updateStepValue=None,
     ~getConnectorDetails=None,
@@ -148,26 +146,32 @@ module ConnectorSummaryGrid = {
       ~connectorName={connectorInfo.merchant_connector_id},
       ~merchantId,
     )
+    let (processorType, _) = connectorInfo.connector_type->ConnectorUtils.connectorTypeTuple
+    let {connector_name: connectorName} = connectorInfo
+
     let connectorDetails = React.useMemo(() => {
       try {
-        if connector->LogicUtils.isNonEmptyString {
-          let dict = isPayoutFlow
-            ? Window.getPayoutConnectorConfig(connector)
-            : Window.getConnectorConfig(connector)
-
+        if connectorName->LogicUtils.isNonEmptyString {
+          let dict = switch processorType {
+          | PaymentProcessor => Window.getConnectorConfig(connectorName)
+          | PayoutProcessor => Window.getPayoutConnectorConfig(connectorName)
+          | AuthenticationProcessor => Window.getAuthenticationConnectorConfig(connectorName)
+          | PMAuthProcessor => Window.getPMAuthenticationProcessorConfig(connectorName)
+          | TaxProcessor => Window.getTaxProcessorConfig(connectorName)
+          | PaymentVas => JSON.Encode.null
+          }
           dict
         } else {
-          Dict.make()->JSON.Encode.object
+          JSON.Encode.null
         }
       } catch {
       | Exn.Error(e) => {
           Js.log2("FAILED TO LOAD CONNECTOR CONFIG", e)
-          let err = Exn.message(e)->Option.getOr("Something went wrong")
-          setScreenState(_ => PageLoaderWrapper.Error(err))
-          Dict.make()->JSON.Encode.object
+          let _ = Exn.message(e)->Option.getOr("Something went wrong")
+          JSON.Encode.null
         }
       }
-    }, [connector])
+    }, [connectorInfo.merchant_connector_id])
     let (_, connectorAccountFields, _, _, _, _, _) = ConnectorUtils.getConnectorFields(
       connectorDetails,
     )
@@ -176,8 +180,8 @@ module ConnectorSummaryGrid = {
     | _ => true
     }
 
-    <div className="p-2 md:px-10">
-      <div className="grid grid-cols-4 my-12">
+    <>
+      <div className="grid grid-cols-4 border-b md:px-10 py-8">
         <h4 className="text-lg font-semibold"> {"Integration status"->React.string} </h4>
         <AddDataAttributes attributes=[("data-testid", "connector_status"->String.toLowerCase)]>
           <div
@@ -186,7 +190,7 @@ module ConnectorSummaryGrid = {
           </div>
         </AddDataAttributes>
       </div>
-      <div className="grid grid-cols-4 my-12">
+      <div className="grid grid-cols-4 border-b md:px-10 py-8">
         <div className="flex items-start">
           <h4 className="text-lg font-semibold"> {"Webhook Endpoint"->React.string} </h4>
           <ToolTip
@@ -201,31 +205,20 @@ module ConnectorSummaryGrid = {
           <KeyAndCopyArea copyValue={copyValueOfWebhookEndpoint} />
         </div>
       </div>
-      <div className="grid grid-cols-4 my-12">
+      <div className="grid grid-cols-4 border-b  md:px-10 py-8">
         <h4 className="text-lg font-semibold"> {"Profile"->React.string} </h4>
         <div className="col-span-3">
           {`${currentProfileName.profile_name} - ${connectorInfo.profile_id}`->React.string}
         </div>
       </div>
-      <div className="grid grid-cols-4 my-12">
+      <div className="grid grid-cols-4 border-b  md:px-10 py-8">
         <div className="flex items-start">
-          <h4 className="text-lg font-semibold"> {"API Keys"->React.string} </h4>
+          <h4 className="text-lg font-semibold"> {"Creds"->React.string} </h4>
         </div>
-        <div className="flex flex-col gap-6 col-span-3">
+        <div className="flex flex-col gap-6  col-span-3">
           <div className="flex gap-12">
             <div className="flex flex-col gap-6 w-1/2">
-              {connectorAccountFields
-              ->Dict.keysToArray
-              ->Array.mapWithIndex((field, index) => {
-                open LogicUtils
-                let label = connectorAccountFields->getString(field, "")
-                <InfoField
-                  key={index->Int.toString}
-                  label={label}
-                  render={connectorInfo->ConnectorUtils.getConnectorDetailsValue(field)}
-                />
-              })
-              ->React.array}
+              <ConnectorPreviewHelper.PreviewCreds connectorAccountFields connectorInfo />
             </div>
             <RenderIf condition={isUpdateFlow}>
               <ConnectorUpdateAuthCreds connectorInfo getConnectorDetails />
@@ -236,7 +229,7 @@ module ConnectorSummaryGrid = {
       </div>
       {switch updateStepValue {
       | Some(state) =>
-        <div className="grid grid-cols-4  my-12">
+        <div className="grid grid-cols-4 border-b md:px-10 py-8">
           <div className="flex items-start">
             <h4 className="text-lg font-semibold"> {"PMTs"->React.string} </h4>
           </div>
@@ -302,7 +295,7 @@ module ConnectorSummaryGrid = {
 
       | None => React.null
       }}
-    </div>
+    </>
   }
 }
 
@@ -312,7 +305,6 @@ let make = (
   ~currentStep: ConnectorTypes.steps,
   ~setCurrentStep,
   ~isUpdateFlow,
-  ~isPayoutFlow,
   ~showMenuOption=true,
   ~setInitialValues,
   ~getPayPalStatus,
@@ -432,8 +424,6 @@ let make = (
       <ConnectorSummaryGrid
         connectorInfo
         connector
-        isPayoutFlow
-        setScreenState
         setCurrentStep
         updateStepValue={Some(ConnectorTypes.PaymentMethods)}
         getConnectorDetails

diff --git a/src/screens/Connectors/ConnectorPreviewHelper.res b/src/screens/Connectors/ConnectorPreviewHelper.res
@@ -0,0 +1,69 @@
+module InfoField = {
+  @react.component
+  let make = (~label, ~str) => {
+    <div>
+      <h2 className="text-lg font-semibold"> {label->React.string} </h2>
+      <h3 className=" break-words"> {str->React.string} </h3>
+    </div>
+  }
+}
+
+module CredsInfoField = {
+  @react.component
+  let make = (~authKeys, ~connectorAccountFields) => {
+    open LogicUtils
+    let dict = authKeys->Identity.genericTypeToDictOfJson
+    dict
+    ->Dict.keysToArray
+    ->Array.filter(ele => ele !== "auth_type")
+    ->Array.map(field => {
+      let value = dict->getString(field, "")
+      let label = connectorAccountFields->getString(field, "")
+      <InfoField label str=value />
+    })
+    ->React.array
+  }
+}
+
+module CashtoCodeCredsInfo = {
+  @react.component
+  let make = (~authKeys: ConnectorTypes.currencyAuthKey) => {
+    open LogicUtils
+    let dict = authKeys.auth_key_map->Identity.genericTypeToDictOfJson
+    dict
+    ->Dict.keysToArray
+    ->Array.map(ele => {
+      let data = dict->getDictfromDict(ele)
+      let keys = data->Dict.keysToArray
+
+      {
+        <>
+          <InfoField label="Currency" str=ele />
+          {keys
+          ->Array.map(ele => {
+            let value = data->getString(ele, "")
+            <InfoField label={ele->snakeToTitle} str=value />
+          })
+          ->React.array}
+        </>
+      }
+    })
+    ->React.array
+  }
+}
+
+module PreviewCreds = {
+  @react.component
+  let make = (~connectorAccountFields, ~connectorInfo: ConnectorTypes.connectorPayload) => {
+    switch connectorInfo.connector_account_details {
+    | HeaderKey(authKeys) => <CredsInfoField authKeys connectorAccountFields />
+    | BodyKey(bodyKey) => <CredsInfoField authKeys=bodyKey connectorAccountFields />
+    | SignatureKey(signatureKey) => <CredsInfoField authKeys=signatureKey connectorAccountFields />
+    | MultiAuthKey(multiAuthKey) => <CredsInfoField authKeys=multiAuthKey connectorAccountFields />
+    | CertificateAuth(certificateAuth) =>
+      <CredsInfoField authKeys=certificateAuth connectorAccountFields />
+    | CurrencyAuthKey(currencyAuthKey) => <CashtoCodeCredsInfo authKeys=currencyAuthKey />
+    | UnKnownAuthType(_) => React.null
+    }
+  }
+}
diff --git a/src/screens/Connectors/ConnectorTypes.res b/src/screens/Connectors/ConnectorTypes.res
@@ -214,6 +214,56 @@ type wasmExtraPayload = {
 
 // This type are used for FRM configuration which need to moved to wasm
 
+type headerKey = {auth_type: string, api_key: string}
+type bodyKey = {
+  auth_type: string,
+  api_key: string,
+  key1: string,
+}
+type signatureKey = {
+  auth_type: string,
+  api_key: string,
+  key1: string,
+  api_secret: string,
+}
+type multiAuthKey = {
+  auth_type: string,
+  api_key: string,
+  key1: string,
+  api_secret: string,
+  key2: string,
+}
+type currencyKey = {
+  auth_type: string,
+  merchant_id_classic: string,
+  password_classic: string,
+  username_classic: string,
+}
+type currencyAuthKey = {auth_key_map: Js.Dict.t<JSON.t>, auth_type: string}
+type certificateAuth = {
+  auth_type: string,
+  certificate: string,
+  private_key: string,
+}
+
+type connectorAuthType =
+  | HeaderKey
+  | BodyKey
+  | SignatureKey
+  | MultiAuthKey
+  | CurrencyAuthKey
+  | CertificateAuth
+  | UnKnownAuthType
+
+type connectorAuthTypeObj =
+  | HeaderKey(headerKey)
+  | BodyKey(bodyKey)
+  | SignatureKey(signatureKey)
+  | MultiAuthKey(multiAuthKey)
+  | CurrencyAuthKey(currencyAuthKey)
+  | CertificateAuth(certificateAuth)
+  | UnKnownAuthType(JSON.t)
+
 type connectorAccountDetails = {
   auth_type: string,
   api_secret?: string,
@@ -250,7 +300,7 @@ type connectorPayload = {
   connector_type: string,
   connector_name: string,
   connector_label: string,
-  connector_account_details: connectorAccountDetails,
+  connector_account_details: connectorAuthTypeObj,
   test_mode: bool,
   disabled: bool,
   payment_methods_enabled: payment_methods_enabled,

diff --git a/src/screens/Connectors/ConnectorUpdateAuthCreds.res b/src/screens/Connectors/ConnectorUpdateAuthCreds.res
@@ -37,7 +37,7 @@ let make = (~connectorInfo: ConnectorTypes.connectorPayload, ~getConnectorDetail
         JSON.Encode.null
       }
     }
-  }, [connectorName])
+  }, [connectorInfo.merchant_connector_id])
   let (
     _,
     connectorAccountFields,
@@ -49,11 +49,20 @@ let make = (~connectorInfo: ConnectorTypes.connectorPayload, ~getConnectorDetail
   ) = getConnectorFields(connectorDetails)
 
   let initialValues = React.useMemo(() => {
+    let authType = switch connectorInfo.connector_account_details {
+    | HeaderKey(authKeys) => authKeys.auth_type
+    | BodyKey(bodyKey) => bodyKey.auth_type
+    | SignatureKey(signatureKey) => signatureKey.auth_type
+    | MultiAuthKey(multiAuthKey) => multiAuthKey.auth_type
+    | CertificateAuth(certificateAuth) => certificateAuth.auth_type
+    | CurrencyAuthKey(currencyAuthKey) => currencyAuthKey.auth_type
+    | UnKnownAuthType(_) => ""
+    }
     [
       ("connector_type", connectorInfo.connector_type->JSON.Encode.string),
       (
         "connector_account_details",
-        [("auth_type", connectorInfo.connector_account_details.auth_type->JSON.Encode.string)]
+        [("auth_type", authType->JSON.Encode.string)]
         ->Dict.fromArray
         ->JSON.Encode.object,
       ),

diff --git a/src/screens/Connectors/ConnectorUtils.res b/src/screens/Connectors/ConnectorUtils.res
@@ -1248,16 +1248,6 @@ let getPlaceHolder = label => {
   `Enter ${label->LogicUtils.snakeToTitle}`
 }
 
-let getConnectorDetailsValue = (connectorInfo: connectorPayload, str) => {
-  switch str {
-  | "api_key" => connectorInfo.connector_account_details.api_key
-  | "api_secret" => connectorInfo.connector_account_details.api_secret
-  | "key1" => connectorInfo.connector_account_details.key1
-  | "key2" => connectorInfo.connector_account_details.key2
-  | "auth_type" => Some(connectorInfo.connector_account_details.auth_type)
-  | _ => Some("")
-  }
-}
 let connectorLabelDetailField = Dict.fromArray([
   ("connector_label", "Connector label"->JSON.Encode.string),
 ])