chore: omp views redesign changes (#1894)

Co-authored-by: Gitanjli Chopra <[email protected]>
juspay · Dec 19, 2024 · 2dfb19a · 2dfb19a
1 parent 4addc3e
commit 2dfb19a
Show file tree

Hide file tree

Showing 33 changed files with 351 additions and 207 deletions.
diff --git a/public/hyperswitch/icons/solid.svg b/public/hyperswitch/icons/solid.svg
diff --git a/src/components/DynamicFilter.res b/src/components/DynamicFilter.res
@@ -147,6 +147,7 @@ module CustomFilters = {
 
 @react.component
 let make = (
+  ~title="",
   ~initialFilters: array<EntityType.initialFilters<'t>>,
   ~options: array<EntityType.optionType<'t>>,
   ~popupFilterFields,
@@ -217,6 +218,7 @@ let make = (
 
   <div className="flex-1 ml-1">
     <Filter
+      title
       defaultFilters
       fixedFilters=initialFixedFilters
       requiredSearchFieldsList=[]

diff --git a/src/components/Filter.res b/src/components/Filter.res
@@ -382,6 +382,7 @@ let make = (
                 fieldWrapperClass="p-0"
               />
             </RenderIf>
+            <PortalCapture key={`${title}OMPView`} name={`${title}OMPView`} />
             <PortalCapture key={`${title}CustomizeColumn`} name={`${title}CustomizeColumn`} />
           </div>
         </div>

diff --git a/src/components/SelectBox.res b/src/components/SelectBox.res
@@ -62,6 +62,8 @@ module ListItem = {
     ~textEllipsisForDropDownOptions=false,
     ~textColorClass="",
     ~customRowClass="",
+    ~labelDescription=Some(""),
+    ~labelDescriptionClass="",
   ) => {
     let {globalUIConfig: {font}} = React.useContext(ThemeProvider.themeContext)
     let labelText = switch labelValue->String.length {
@@ -271,9 +273,14 @@ module ListItem = {
                     let selectOptions =
                       <AddDataAttributes
                         attributes=[("data-text", labelText)] key={i->Int.toString}>
-                        <span key={i->Int.toString} className=textClass value=labelText>
-                          {item->React.string}
-                        </span>
+                        {<div className="flex gap-1 items-center">
+                          <span key={i->Int.toString} className=textClass value=labelText>
+                            {item->React.string}
+                          </span>
+                          <p className={`${labelDescriptionClass}`}>
+                            {`${labelDescription->Option.getOr("")}`->React.string}
+                          </p>
+                        </div>}
                       </AddDataAttributes>
 
                     {
@@ -365,6 +372,7 @@ type dropdownOptionWithoutOptional = {
   isDisabled: bool,
   icon: Button.iconType,
   description: option<string>,
+  labelDescription: option<string>,
   iconStroke: string,
   textColor: string,
   optGroup: string,
@@ -373,6 +381,7 @@ type dropdownOptionWithoutOptional = {
 type dropdownOption = {
   label: string,
   value: string,
+  labelDescription?: string,
   optGroup?: string,
   isDisabled?: bool,
   icon?: Button.iconType,
@@ -393,6 +402,7 @@ let makeNonOptional = (dropdownOption: dropdownOption): dropdownOptionWithoutOpt
     textColor: dropdownOption.textColor->Option.getOr(""),
     optGroup: dropdownOption.optGroup->Option.getOr("-"),
     customRowClass: dropdownOption.customRowClass->Option.getOr(""),
+    labelDescription: dropdownOption.labelDescription,
   }
 }
 
@@ -1105,6 +1115,7 @@ module RenderListItemInBaseRadio = {
     ~selectClass="",
     ~customScrollStyle=?,
     ~shouldDisplaySelectedOnTop,
+    ~labelDescriptionClass="",
   ) => {
     let decodedValue = value->JSON.Decode.string
     switch (decodedValue, shouldDisplaySelectedOnTop) {
@@ -1161,6 +1172,8 @@ module RenderListItemInBaseRadio = {
             customRowClass={option.customRowClass}
             optionClass
             selectClass
+            labelDescription=option.labelDescription
+            labelDescriptionClass
           />
 
         if !descriptionOnHover {
@@ -1293,6 +1306,7 @@ module BaseRadio = {
     ~customScrollStyle=?,
     ~dropdownContainerStyle="",
     ~shouldDisplaySelectedOnTop=false,
+    ~labelDescriptionClass="",
   ) => {
     let options = React.useMemo(() => {
       options->Array.map(makeNonOptional)
@@ -1483,6 +1497,7 @@ module BaseRadio = {
             selectClass
             ?customScrollStyle
             shouldDisplaySelectedOnTop
+            labelDescriptionClass
           />
         } else {
           {
@@ -1613,6 +1628,7 @@ module BaseDropdown = {
     ~customScrollStyle=?,
     ~dropdownContainerStyle="",
     ~shouldDisplaySelectedOnTop=false,
+    ~labelDescriptionClass="",
   ) => {
     let transformedOptions = useTransformed(options)
     let isMobileView = MatchMedia.useMobileChecker()
@@ -1883,6 +1899,7 @@ module BaseDropdown = {
         ?customScrollStyle
         dropdownContainerStyle
         shouldDisplaySelectedOnTop
+        labelDescriptionClass
       />
     }
 

diff --git a/src/components/SelectBox.resi b/src/components/SelectBox.resi
@@ -48,6 +48,8 @@ module ListItem: {
     ~textEllipsisForDropDownOptions: bool=?,
     ~textColorClass: string=?,
     ~customRowClass: string=?,
+    ~labelDescription: option<string>=?,
+    ~labelDescriptionClass: string=?,
   ) => React.element
 }
 type dropdownOptionWithoutOptional = {
@@ -56,6 +58,7 @@ type dropdownOptionWithoutOptional = {
   isDisabled: bool,
   icon: Button.iconType,
   description: option<string>,
+  labelDescription: option<string>,
   iconStroke: string,
   textColor: string,
   optGroup: string,
@@ -64,6 +67,7 @@ type dropdownOptionWithoutOptional = {
 type dropdownOption = {
   label: string,
   value: string,
+  labelDescription?: string,
   optGroup?: string,
   isDisabled?: bool,
   icon?: Button.iconType,
@@ -184,6 +188,7 @@ module RenderListItemInBaseRadio: {
     ~selectClass: string=?,
     ~customScrollStyle: string=?,
     ~shouldDisplaySelectedOnTop: bool,
+    ~labelDescriptionClass: string=?,
   ) => React.element
 }
 let getHashMappedOptionValues: array<dropdownOptionWithoutOptional> => RescriptCore.Dict.t<
@@ -232,6 +237,7 @@ module BaseRadio: {
     ~customScrollStyle: string=?,
     ~dropdownContainerStyle: string=?,
     ~shouldDisplaySelectedOnTop: bool=?,
+    ~labelDescriptionClass: string=?,
   ) => React.element
 }
 type direction = BottomLeft | BottomMiddle | BottomRight | TopLeft | TopMiddle | TopRight
@@ -315,6 +321,7 @@ module BaseDropdown: {
     ~customScrollStyle: string=?,
     ~dropdownContainerStyle: string=?,
     ~shouldDisplaySelectedOnTop: bool=?,
+    ~labelDescriptionClass: string=?,
   ) => React.element
 }
 module InfraSelectBox: {

diff --git a/src/screens/APIUtils/APIUtils.res b/src/screens/APIUtils/APIUtils.res
@@ -778,6 +778,8 @@ let responseHandler = async (
     sendEvent(~eventName="API Error", ~description=Some(responseStatus), ~metadata=metaData)
   }
 
+  let noAccessControlText = "You do not have the required permissions to access this module. Please contact your admin."
+
   switch responseStatus {
   | 200 => json
   | _ => {
@@ -810,7 +812,7 @@ let responseHandler = async (
             popUpType: (Warning, WithIcon),
             heading: "Access Forbidden",
             description: {
-              HSwitchUtils.noAccessControlText->React.string
+              noAccessControlText->React.string
             },
             handleConfirm: {
               text: "Close",

diff --git a/src/screens/Analytics/Analytics.res b/src/screens/Analytics/Analytics.res
@@ -685,6 +685,7 @@ let make = (
               views={OMPSwitchUtils.analyticsViewList(~checkUserEntity)}
               selectedEntity={analyticsEntity}
               onChange={updateAnalytcisEntity}
+              entityMapper=UserInfoUtils.analyticsEntityMapper
             />
           </RenderIf>
         </div>

diff --git a/src/screens/Analytics/PaymentsAnalytics/PaymentAnalytics.res b/src/screens/Analytics/PaymentsAnalytics/PaymentAnalytics.res
@@ -207,6 +207,7 @@ let make = () => {
   | Some(filterData) =>
     <div className="flex flex-row">
       <DynamicFilter
+        title="PaymentAnalytics"
         initialFilters={initialFilterFields(filterData)}
         options=[]
         popupFilterFields={options(filterData)}
@@ -223,6 +224,7 @@ let make = () => {
   | None =>
     <div className="flex flex-row">
       <DynamicFilter
+        title="PaymentAnalytics"
         initialFilters=[]
         options=[]
         popupFilterFields=[]
@@ -243,11 +245,14 @@ let make = () => {
     <div className="flex flex-col gap-5">
       <div className="flex items-center justify-between ">
         <PageUtils.PageHeading title />
-        <OMPSwitchHelper.OMPViews
-          views={OMPSwitchUtils.analyticsViewList(~checkUserEntity)}
-          selectedEntity={analyticsEntity}
-          onChange={updateAnalytcisEntity}
-        />
+        <Portal to="PaymentAnalyticsOMPView">
+          <OMPSwitchHelper.OMPViews
+            views={OMPSwitchUtils.analyticsViewList(~checkUserEntity)}
+            selectedEntity={analyticsEntity}
+            onChange={updateAnalytcisEntity}
+            entityMapper=UserInfoUtils.analyticsEntityMapper
+          />
+        </Portal>
       </div>
       <div
         className="-ml-1 sticky top-0 z-30 p-1 bg-hyperswitch_background/70 py-1 rounded-lg my-2">

diff --git a/src/screens/Analytics/PerformanceMonitor/PerformanceMonitor.res b/src/screens/Analytics/PerformanceMonitor/PerformanceMonitor.res
@@ -98,6 +98,7 @@ let make = (~domain="payments") => {
           views={OMPSwitchUtils.analyticsViewList(~checkUserEntity)}
           selectedEntity={analyticsEntity}
           onChange={updateAnalytcisEntity}
+          entityMapper=UserInfoUtils.analyticsEntityMapper
         />
       </div>
       <div

diff --git a/src/screens/ConfigurePMTs/PaymentMethodEntity.res b/src/screens/ConfigurePMTs/PaymentMethodEntity.res
@@ -43,7 +43,7 @@ let getCell = (~setReferesh) => {
       Table.CustomCell(
         <PaymentMethodConfig
           paymentMethodConfig
-          element={<HelperComponents.BusinessProfileComponent
+          element={<BusinessProfileHook.BusinessProfileComponent
             profile_id={paymentMethodConfig.profile_id}
           />}
           setReferesh

diff --git a/src/screens/Connectors/PMAuthenticationProcessor/PMAuthenticationTableEntity.res b/src/screens/Connectors/PMAuthenticationProcessor/PMAuthenticationTableEntity.res
@@ -66,7 +66,7 @@ let getCell = (connector: connectorPayload, colType): Table.cell => {
   | ProfileId => Text(connector.profile_id)
   | ProfileName =>
     Table.CustomCell(
-      <HelperComponents.BusinessProfileComponent profile_id={connector.profile_id} />,
+      <BusinessProfileHook.BusinessProfileComponent profile_id={connector.profile_id} />,
       "",
     )
   | ConnectorLabel => Text(connector.connector_label)

diff --git a/src/screens/Connectors/PaymentProcessor/ConnectorTableUtils.res b/src/screens/Connectors/PaymentProcessor/ConnectorTableUtils.res
@@ -89,7 +89,7 @@ let getTableCell = (~connectorType: ConnectorTypes.connector=Processor) => {
     | ProfileId => DisplayCopyCell(connector.profile_id)
     | ProfileName =>
       Table.CustomCell(
-        <HelperComponents.BusinessProfileComponent profile_id={connector.profile_id} />,
+        <BusinessProfileHook.BusinessProfileComponent profile_id={connector.profile_id} />,
         "",
       )
     | ConnectorLabel => Text(connector.connector_label)

diff --git a/src/screens/Connectors/TaxProcessor/TaxProcessorTableEntity.res b/src/screens/Connectors/TaxProcessor/TaxProcessorTableEntity.res
@@ -66,7 +66,7 @@ let getCell = (connector: connectorPayload, colType): Table.cell => {
   | ProfileId => Text(connector.profile_id)
   | ProfileName =>
     Table.CustomCell(
-      <HelperComponents.BusinessProfileComponent profile_id={connector.profile_id} />,
+      <BusinessProfileHook.BusinessProfileComponent profile_id={connector.profile_id} />,
       "",
     )
   | ConnectorLabel => Text(connector.connector_label)

diff --git a/src/screens/Connectors/ThreeDsProcessors/ThreeDsTableEntity.res b/src/screens/Connectors/ThreeDsProcessors/ThreeDsTableEntity.res
@@ -66,7 +66,7 @@ let getCell = (connector: connectorPayload, colType): Table.cell => {
   | ProfileId => Text(connector.profile_id)
   | ProfileName =>
     Table.CustomCell(
-      <HelperComponents.BusinessProfileComponent profile_id={connector.profile_id} />,
+      <BusinessProfileHook.BusinessProfileComponent profile_id={connector.profile_id} />,
       "",
     )
   | ConnectorLabel => Text(connector.connector_label)

diff --git a/src/screens/Helpers/HelperComponents.res b/src/screens/Helpers/HelperComponents.res
@@ -38,6 +38,51 @@ module CopyTextCustomComp = {
   }
 }
 
+module EllipsisText = {
+  @react.component
+  let make = (
+    ~displayValue,
+    ~endValue=17,
+    ~showCopy=true,
+    ~customTextStyle="",
+    ~expandText=true,
+  ) => {
+    open LogicUtils
+    let (isTextVisible, setIsTextVisible) = React.useState(_ => false)
+
+    let handleClick = ev => {
+      ev->ReactEvent.Mouse.stopPropagation
+      if expandText {
+        setIsTextVisible(_ => true)
+      }
+    }
+
+    let text = if showCopy {
+      <CopyTextCustomComp displayValue customTextCss="text-nowrap" />
+    } else {
+      <div> {displayValue->React.string} </div>
+    }
+
+    <div>
+      <RenderIf condition={isTextVisible}>
+        <div> {text} </div>
+      </RenderIf>
+      <RenderIf condition={!isTextVisible && displayValue->isNonEmptyString}>
+        <div className="flex text-nowrap gap-1">
+          <p className="">
+            {`${displayValue->String.slice(~start=0, ~end=endValue)}`->React.string}
+          </p>
+          <span
+            className={`flex text-blue-811 text-sm font-extrabold ${customTextStyle}`}
+            onClick={ev => handleClick(ev)}>
+            {"..."->React.string}
+          </span>
+        </div>
+      </RenderIf>
+    </div>
+  }
+}
+
 module BluredTableComponent = {
   @react.component
   let make = (
@@ -151,13 +196,3 @@ module ConnectorCustomCell = {
     }
   }
 }
-
-module BusinessProfileComponent = {
-  @react.component
-  let make = (~profile_id: string, ~className="") => {
-    let {profile_name} = BusinessProfileHook.useGetBusinessProflile(profile_id)
-    <div className>
-      {(profile_name->LogicUtils.isNonEmptyString ? profile_name : "NA")->React.string}
-    </div>
-  }
-}
diff --git a/src/screens/Home/Home.res b/src/screens/Home/Home.res
@@ -6,18 +6,20 @@ let make = (~setAppScreenState) => {
   let {userInfo: {recoveryCodesLeft}} = React.useContext(UserInfoProvider.defaultContext)
   let recoveryCode = recoveryCodesLeft->Option.getOr(0)
 
-  <div className="w-full gap-8 flex flex-col">
+  <>
     <div className="flex flex-col gap-4">
       <RenderIf condition={recoveryCodesLeft->Option.isSome && recoveryCode < 3}>
         <HomeUtils.LowRecoveryCodeBanner recoveryCode />
       </RenderIf>
       <PendingInvitationsHome setAppScreenState />
     </div>
-    <PageHeading
-      title={`${greeting}, it's great to see you!`}
-      subTitle="Welcome to the home of your Payments Control Centre. It aims at providing your team with a 360-degree view of payments."
-    />
-    <ControlCenter />
-    <DevResources />
-  </div>
+    <div className="w-full gap-8 flex flex-col">
+      <PageHeading
+        title={`${greeting}, it's great to see you!`}
+        subTitle="Welcome to the home of your Payments Control Centre. It aims at providing your team with a 360-degree view of payments."
+      />
+      <ControlCenter />
+      <DevResources />
+    </div>
+  </>
 }