From a3f533e19aa1684adf72b47f72fc9a20e9ad0835 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Tue, 23 Jan 2024 16:21:35 +0530
Subject: [PATCH] chore: permission based block

---
 .../HomePageOverviewComponent.res             |   9 +-
 src/screens/HyperSwitch/Home/HomeV2.res       | 191 +++++++++++-------
 .../UserManagement/PermissionUtils.res        |   2 +-
 3 files changed, 123 insertions(+), 79 deletions(-)

diff --git a/src/screens/HyperSwitch/Analytics/HomePageOverview/HomePageOverviewComponent.res b/src/screens/HyperSwitch/Analytics/HomePageOverview/HomePageOverviewComponent.res
index 541bf598d..7d8de7d1e 100644
--- a/src/screens/HyperSwitch/Analytics/HomePageOverview/HomePageOverviewComponent.res
+++ b/src/screens/HyperSwitch/Analytics/HomePageOverview/HomePageOverviewComponent.res
@@ -6,6 +6,7 @@ module ConnectorOverview = {
     let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Loading)
     let (configuredConnectors, setConfiguredConnectors) = React.useState(_ => [])
     let fetchConnectorListResponse = ConnectorUtils.useFetchConnectorList()
+    let userPermissionJson = Recoil.useRecoilValueFromAtom(HyperswitchAtom.userPermissionAtom)
 
     let getConnectorList = async () => {
       open LogicUtils
@@ -71,8 +72,9 @@ module ConnectorOverview = {
                 ->Js.Int.toString} Active Processors`->React.string}
             </p>
           </div>
-          <Button
+          <ACLButton
             text="+ Add More"
+            access={userPermissionJson.merchantConnectorAccountRead}
             buttonType={PrimaryOutline}
             customButtonStyle="w-10 !px-3"
             buttonSize={Small}
@@ -242,12 +244,15 @@ module OverviewInfo = {
 @react.component
 let make = () => {
   let {systemMetrics} = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom
+  let userPermissionJson = Recoil.useRecoilValueFromAtom(HyperswitchAtom.userPermissionAtom)
 
   <div className="flex flex-col gap-4">
     <p className=headingStyle> {"Overview"->React.string} </p>
     <div className="grid grid-cols-1 md:grid-cols-3 w-full gap-4">
       <ConnectorOverview />
-      <PaymentOverview />
+      <UIUtils.RenderIf condition={userPermissionJson.analytics === Access}>
+        <PaymentOverview />
+      </UIUtils.RenderIf>
       <UIUtils.RenderIf condition={systemMetrics}>
         <SystemMetricsInsights />
       </UIUtils.RenderIf>
diff --git a/src/screens/HyperSwitch/Home/HomeV2.res b/src/screens/HyperSwitch/Home/HomeV2.res
index 35b353a8a..ddcfa56a9 100644
--- a/src/screens/HyperSwitch/Home/HomeV2.res
+++ b/src/screens/HyperSwitch/Home/HomeV2.res
@@ -227,62 +227,82 @@ module RecipesAndPlugins = {
       ->QuickStartUtils.getTypedValueFromDict
     let isStripePlusPayPalCompleted = enumDetails->checkStripePlusPayPal
     let isWooCommercePalCompleted = enumDetails->checkWooCommerce
+    let userPermissionJson = Recoil.useRecoilValueFromAtom(HyperswitchAtom.userPermissionAtom)
+    let blockCondition =
+      userPermissionJson.merchantConnectorAccountRead === NoAccess &&
+        userPermissionJson.merchantConnectorAccountWrite === NoAccess
 
     <div className="flex flex-col gap-4">
       <p className=headingStyle> {"Recipes & Plugins"->React.string} </p>
       <div className="grid grid-cols-1 md:grid-cols-2 w-full gap-4">
-        <div
-          className={boxCssHover(~ishoverStyleRequired=!isStripePlusPayPalCompleted, ())}
-          onClick={_ => {
-            mixpanelEvent(~eventName=`stripe_plus_paypal`, ())
-            RescriptReactRouter.push("stripe-plus-paypal")
-          }}>
-          <div className="flex items-center gap-2">
-            <p className=cardHeaderTextStyle> {"Use PayPal with Stripe"->React.string} </p>
-            <Icon
-              name="chevron-right"
-              size=12
-              className="group-hover:scale-125 transition duration-200 ease-in-out"
-            />
-            <UIUtils.RenderIf condition={isStripePlusPayPalCompleted}>
-              <div className="flex ">
-                <Icon name="success-tag" size=22 className="!w-32" />
-              </div>
-            </UIUtils.RenderIf>
-          </div>
-          <div className="flex gap-2 h-full">
-            <p className=paragraphTextVariant>
-              {"Get the best of Stripe's developer experience and Paypal's user base"->React.string}
-            </p>
-            <img src="/assets/StripePlusPaypal.svg" className=imageTransitionCss />
-          </div>
-        </div>
-        <div
-          className={boxCssHover(~ishoverStyleRequired=!isWooCommercePalCompleted, ())}
-          onClick={_ => {
-            mixpanelEvent(~eventName=`woocommerce`, ())
-            RescriptReactRouter.push("woocommerce")
-          }}>
-          <div className="flex items-center gap-2">
-            <p className=cardHeaderTextStyle> {"WooCommerce plugin"->React.string} </p>
-            <Icon
-              name="chevron-right"
-              size=12
-              className="group-hover:scale-125 transition duration-200 ease-in-out"
-            />
-            <UIUtils.RenderIf condition={isWooCommercePalCompleted}>
-              <div className="flex ">
-                <Icon name="success-tag" size=22 className="!w-32" />
-              </div>
-            </UIUtils.RenderIf>
-          </div>
-          <div className="flex gap-2 h-full">
-            <p className=paragraphTextVariant>
-              {"Give your shoppers a lightweight and embedded payment experience with our plugin"->React.string}
-            </p>
-            <img src="/assets/Woocommerce.svg" className=imageTransitionCss />
-          </div>
-        </div>
+        <ToolTip
+          description={blockCondition ? noAccessControlText : ""}
+          toolTipPosition=Top
+          toolTipFor={<div
+            className={boxCssHover(~ishoverStyleRequired=!isStripePlusPayPalCompleted, ())}
+            onClick={_ => {
+              blockCondition
+                ? ()
+                : {
+                    mixpanelEvent(~eventName=`stripe_plus_paypal`, ())
+                    RescriptReactRouter.push("stripe-plus-paypal")
+                  }
+            }}>
+            <div className="flex items-center gap-2">
+              <p className=cardHeaderTextStyle> {"Use PayPal with Stripe"->React.string} </p>
+              <Icon
+                name="chevron-right"
+                size=12
+                className="group-hover:scale-125 transition duration-200 ease-in-out"
+              />
+              <UIUtils.RenderIf condition={isStripePlusPayPalCompleted}>
+                <div className="flex ">
+                  <Icon name="success-tag" size=22 className="!w-32" />
+                </div>
+              </UIUtils.RenderIf>
+            </div>
+            <div className="flex gap-2 h-full">
+              <p className=paragraphTextVariant>
+                {"Get the best of Stripe's developer experience and Paypal's user base"->React.string}
+              </p>
+              <img src="/assets/StripePlusPaypal.svg" className=imageTransitionCss />
+            </div>
+          </div>}
+        />
+        <ToolTip
+          description={blockCondition ? noAccessControlText : ""}
+          toolTipPosition=Top
+          toolTipFor={<div
+            className={boxCssHover(~ishoverStyleRequired=!isWooCommercePalCompleted, ())}
+            onClick={_ => {
+              blockCondition
+                ? ()
+                : {
+                    mixpanelEvent(~eventName=`woocommerce`, ())
+                    RescriptReactRouter.push("woocommerce")
+                  }
+            }}>
+            <div className="flex items-center gap-2">
+              <p className=cardHeaderTextStyle> {"WooCommerce plugin"->React.string} </p>
+              <Icon
+                name="chevron-right"
+                size=12
+                className="group-hover:scale-125 transition duration-200 ease-in-out"
+              />
+              <UIUtils.RenderIf condition={isWooCommercePalCompleted}>
+                <div className="flex ">
+                  <Icon name="success-tag" size=22 className="!w-32" />
+                </div>
+              </UIUtils.RenderIf>
+            </div>
+            <div className="flex gap-2 h-full">
+              <p className=paragraphTextVariant>
+                {"Give your shoppers a lightweight and embedded payment experience with our plugin"->React.string}
+              </p>
+              <img src="/assets/Woocommerce.svg" className=imageTransitionCss />
+            </div>
+          </div>}
+        />
       </div>
     </div>
   }
@@ -292,6 +312,7 @@ module Resources = {
   @react.component
   let make = () => {
     let mixpanelEvent = MixpanelHook.useSendEvent()
+    let userPermissionJson = Recoil.useRecoilValueFromAtom(HyperswitchAtom.userPermissionAtom)
     let elements: array<HomeUtils.resourcesTypes> = [
       {
         id: "tryTheDemo",
@@ -315,37 +336,55 @@ module Resources = {
         redirectLink: "",
       },
     ]
+
+    let onClickHandler = item => {
+      if item.id === "openSource" {
+        mixpanelEvent(~eventName=`contribute_in_open_source`, ())
+        "https://github.com/juspay/hyperswitch"->Window._open
+      } else if item.id === "developerdocs" {
+        mixpanelEvent(~eventName=`dev_docs`, ())
+        "https://hyperswitch.io/docs"->Window._open
+      } else if item.id === "tryTheDemo" {
+        if userPermissionJson.paymentWrite === Access {
+          RescriptReactRouter.replace("/sdk")
+        }
+      }
+    }
+
     <>
       <div className="flex flex-col gap-4">
         <p className=headingStyle> {"Resources"->React.string} </p>
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
           {elements
           ->Array.mapWithIndex((item, index) => {
-            <div
-              className="group bg-white border rounded-md p-10 flex flex-col gap-4 group-hover:shadow hover:shadow-homePageBoxShadow cursor-pointer"
-              key={index->string_of_int}
-              onClick={_ => {
-                if item.id === "openSource" {
-                  mixpanelEvent(~eventName=`contribute_in_open_source`, ())
-                  "https://github.com/juspay/hyperswitch"->Window._open
-                } else if item.id === "developerdocs" {
-                  mixpanelEvent(~eventName=`dev_docs`, ())
-                  "https://hyperswitch.io/docs"->Window._open
-                } else if item.id === "tryTheDemo" {
-                  RescriptReactRouter.replace("/sdk")
-                }
-              }}>
-              <img src={`/icons/${item.icon}`} className="h-6 w-6" />
-              <div className="flex items-center gap-2">
-                <p className=cardHeaderText> {item.headerText->React.string} </p>
-                <Icon
-                  name="chevron-right"
-                  size=12
-                  className="group-hover:scale-125 transition duration-200 ease-in-out"
-                />
+            let content =
+              <div
+                className="h-full group bg-white border rounded-md p-10 flex flex-col gap-4 group-hover:shadow hover:shadow-homePageBoxShadow cursor-pointer"
+                key={index->string_of_int}
+                onClick={_ => onClickHandler(item)}>
+                <img src={`/icons/${item.icon}`} className="h-6 w-6" />
+                <div className="flex items-center gap-2">
+                  <p className=cardHeaderText> {item.headerText->React.string} </p>
+                  <Icon
+                    name="chevron-right"
+                    size=12
+                    className="group-hover:scale-125 transition duration-200 ease-in-out"
+                  />
+                </div>
+                <p className=paragraphTextVariant> {item.subText->React.string} </p>
               </div>
-              <p className=paragraphTextVariant> {item.subText->React.string} </p>
-            </div>
+
+            if item.id === "tryTheDemo" && userPermissionJson.paymentWrite === NoAccess {
+              <ToolTip
+                toolTipFor=content
+                description=noAccessControlText
+                toolTipPosition=Top
+                isRelative=false
+                tooltipForWidthClass="!h-full"
+              />
+            } else {
+              content
+            }
           })
           ->React.array}
         </div>
diff --git a/src/screens/HyperSwitch/UserManagement/PermissionUtils.res b/src/screens/HyperSwitch/UserManagement/PermissionUtils.res
index 4ec310e23..dbf9232c0 100644
--- a/src/screens/HyperSwitch/UserManagement/PermissionUtils.res
+++ b/src/screens/HyperSwitch/UserManagement/PermissionUtils.res
@@ -140,7 +140,7 @@ let getAccessValue = (~permissionValue: permissionType, ~permissionList) => {
 
 let defaultValueForPermission = {
   paymentRead: Access,
-  paymentWrite: Access,
+  paymentWrite: NoAccess,
   refundRead: Access,
   refundWrite: Access,
   apiKeyRead: Access,