From 2dfb70f82d86e240a7d00f57f42e710528e186c3 Mon Sep 17 00:00:00 2001
From: Riddhiagrawal001 <50551695+Riddhiagrawal001@users.noreply.github.com>
Date: Thu, 7 Mar 2024 15:20:28 +0530
Subject: [PATCH] fix: Quick start connector selection bug and connector list
 bug fixes (#482)

Co-authored-by: Pritish Budhiraja <1805317@kiit.ac.in>
---
 src/screens/Connectors/ConnectorUtils.res     |  4 +-
 .../Home/QuickStart/QuickStartUIUtils.res     | 57 ++++++++++++-------
 .../Home/QuickStart/QuickStartUtils.res       | 10 ++++
 src/screens/Processors/ProcessorCards.res     |  5 +-
 4 files changed, 51 insertions(+), 25 deletions(-)

diff --git a/src/screens/Connectors/ConnectorUtils.res b/src/screens/Connectors/ConnectorUtils.res
index e49a1864c..861587538 100644
--- a/src/screens/Connectors/ConnectorUtils.res
+++ b/src/screens/Connectors/ConnectorUtils.res
@@ -1244,7 +1244,7 @@ let getProcessorsListFromJson = (json, ~removeFromList: processors=FRMPlayer, ()
   json->getArrayFromJson([])->Array.map(getDictFromJsonObject)->filterList(~removeFromList)
 }
 
-let getDisplayNameForConnector = connector =>
+let getDisplayNameForProcessor = connector =>
   switch connector {
   | ADYEN => "Adyen"
   | CHECKOUT => "Checkout"
@@ -1308,7 +1308,7 @@ let getDisplayNameForThreedsAuthenticator = threeDsAuthenticator =>
 let getDisplayNameForConnector = connector => {
   let connectorType = connector->String.toLowerCase->getConnectorNameTypeFromString()
   switch connectorType {
-  | Processors(connector) => connector->getDisplayNameForConnector
+  | Processors(connector) => connector->getDisplayNameForProcessor
   | ThreeDsAuthenticator(threeDsAuthenticator) =>
     threeDsAuthenticator->getDisplayNameForThreedsAuthenticator
   | UnknownConnector(str) => str
diff --git a/src/screens/Home/QuickStart/QuickStartUIUtils.res b/src/screens/Home/QuickStart/QuickStartUIUtils.res
index 52d0e7d03..c0d320329 100644
--- a/src/screens/Home/QuickStart/QuickStartUIUtils.res
+++ b/src/screens/Home/QuickStart/QuickStartUIUtils.res
@@ -215,29 +215,46 @@ module SelectConnectorGrid = {
         ->LogicUtils.getString("connector_name", "")
         ->ConnectorUtils.getConnectorNameTypeFromString()
       )
-    let popularConnectorList = [
-      Processors(STRIPE),
-      Processors(PAYPAL),
-      Processors(ADYEN),
-      Processors(CHECKOUT),
-    ]->Array.filter(connector => {
-      !(typedConnectedConnectorList->Array.includes(connector))
-    })
-    let remainingConnectorList =
-      connectorList->Array.filter(value =>
-        !(
-          popularConnectorList->Array.includes(value) ||
-            typedConnectedConnectorList->Array.includes(value)
-        )
+    let popularConnectorList =
+      [
+        Processors(STRIPE),
+        Processors(PAYPAL),
+        Processors(ADYEN),
+        Processors(CHECKOUT),
+      ]->Array.filter(connector =>
+        !QuickStartUtils.existsInArray(connector, typedConnectedConnectorList)
       )
 
+    let remainingConnectorList = connectorList->Array.filter(value => {
+      let existInPopularConnectorList = QuickStartUtils.existsInArray(value, popularConnectorList)
+
+      let existInTypedConnectorList = QuickStartUtils.existsInArray(
+        value,
+        typedConnectedConnectorList,
+      )
+
+      !(existInPopularConnectorList || existInTypedConnectorList)
+    })
+
     let headerClass = HSwitchUtils.getTextClass((P1, Medium))
 
     let subheaderText = "text-base font-semibold text-grey-700"
-    let getBlockColor = connector =>
-      selectedConnector === connector
-        ? "border border-blue-700 bg-blue-700 bg-opacity-10 "
-        : "border"
+    let getBlockColor = connector => {
+      switch (selectedConnector, connector) {
+      | (Processors(selectedConnector), Processors(connectorValue))
+        if selectedConnector ===
+          connectorValue => "border border-blue-700 bg-blue-700 bg-opacity-10"
+      | _ => "border"
+      }
+    }
+
+    let iconColor = connector => {
+      switch (selectedConnector, connector) {
+      | (Processors(selectedConnector), Processors(connectorValue))
+        if selectedConnector === connectorValue => "selected"
+      | _ => "nonselected"
+      }
+    }
 
     <div className="flex flex-col gap-12">
       <UIUtils.RenderIf condition={popularConnectorList->Array.length > 0}>
@@ -258,9 +275,7 @@ module SelectConnectorGrid = {
                   </p>
                 </div>
                 <Icon
-                  name={connector === selectedConnector ? "selected" : "nonselected"}
-                  size=20
-                  className="cursor-pointer !text-blue-800"
+                  name={connector->iconColor} size=20 className="cursor-pointer !text-blue-800"
                 />
               </div>
             })
diff --git a/src/screens/Home/QuickStart/QuickStartUtils.res b/src/screens/Home/QuickStart/QuickStartUtils.res
index 2cff4fd3a..4f42d2286 100644
--- a/src/screens/Home/QuickStart/QuickStartUtils.res
+++ b/src/screens/Home/QuickStart/QuickStartUtils.res
@@ -705,3 +705,13 @@ let getCurrentStep = dict => {
     #GoLive
   }
 }
+
+let existsInArray = (element, connectorList) => {
+  open ConnectorTypes
+  connectorList->Array.some(e =>
+    switch (e, element) {
+    | (Processors(p1), Processors(p2)) => p1 == p2
+    | (_, _) => false
+    }
+  )
+}
diff --git a/src/screens/Processors/ProcessorCards.res b/src/screens/Processors/ProcessorCards.res
index 6f4380256..d811744f3 100644
--- a/src/screens/Processors/ProcessorCards.res
+++ b/src/screens/Processors/ProcessorCards.res
@@ -109,7 +109,8 @@ let make = (
             let connectorInfo = connector->getConnectorInfo
             let size = "w-14 h-14 rounded-sm"
             <AddDataAttributes attributes=[("data-testid", connectorName->String.toLowerCase)]>
-              <div
+              <ACLDiv
+                permission={userPermissionJson.connectorsManage}
                 onClick={_ => handleClick(connectorName)}
                 key={i->string_of_int}
                 className="border p-6 gap-4 bg-white rounded flex flex-col justify-between">
@@ -129,7 +130,7 @@ let make = (
                   buttonSize={Small}
                   textStyle="text-jp-gray-900"
                 />
-              </div>
+              </ACLDiv>
             </AddDataAttributes>
           })
           ->React.array}