From 2dfb19a8e63f5374ebc61d9b9755054e06fc2f73 Mon Sep 17 00:00:00 2001 From: Gitanjli <96485413+gitanjli525@users.noreply.github.com> Date: Thu, 19 Dec 2024 17:04:29 +0530 Subject: [PATCH] chore: omp views redesign changes (#1894) Co-authored-by: Gitanjli Chopra --- public/hyperswitch/icons/solid.svg | 3 + src/components/DynamicFilter.res | 2 + src/components/Filter.res | 1 + src/components/SelectBox.res | 23 ++- src/components/SelectBox.resi | 7 + src/screens/APIUtils/APIUtils.res | 4 +- src/screens/Analytics/Analytics.res | 1 + .../PaymentsAnalytics/PaymentAnalytics.res | 15 +- .../PerformanceMonitor/PerformanceMonitor.res | 1 + .../ConfigurePMTs/PaymentMethodEntity.res | 2 +- .../PMAuthenticationTableEntity.res | 2 +- .../PaymentProcessor/ConnectorTableUtils.res | 2 +- .../TaxProcessor/TaxProcessorTableEntity.res | 2 +- .../ThreeDsProcessors/ThreeDsTableEntity.res | 2 +- src/screens/Helpers/HelperComponents.res | 55 +++++-- src/screens/Home/Home.res | 18 ++- src/screens/Hooks/BusinessProfileHook.res | 10 ++ src/screens/OMPSwitch/OMPSwitchHelper.res | 149 +++++++++++++----- .../PayoutHistoryTableEntity.res | 2 +- src/screens/Payouts/PayoutsList.res | 14 +- src/screens/Routing/ActiveRouting.res | 2 +- src/screens/Routing/HistoryEntity.res | 2 +- .../RoutingRevamp/BasicDetailsForm.res | 2 +- src/screens/Transaction/Disputes/Disputes.res | 13 +- .../Transaction/Order/HSwitchOrderUtils.res | 36 ----- src/screens/Transaction/Order/OrderEntity.res | 10 +- src/screens/Transaction/Order/Orders.res | 13 +- src/screens/Transaction/Refunds/Refund.res | 13 +- .../UserManagement/UserRevamp/ListRoles.res | 20 ++- .../UserManagement/UserRevamp/ListUsers.res | 21 ++- .../UserRevamp/UserManagementHelper.res | 92 +++++------ .../UserRevamp/UserManagementLanding.res | 17 +- .../UserRevamp/UserManagementTypes.res | 2 +- 33 files changed, 351 insertions(+), 207 deletions(-) diff --git a/public/hyperswitch/icons/solid.svg b/public/hyperswitch/icons/solid.svg index f91f820a1..41277bf2e 100644 --- a/public/hyperswitch/icons/solid.svg +++ b/public/hyperswitch/icons/solid.svg @@ -5533,6 +5533,9 @@ License) d="M10.4559 2.40039H6.0319C5.5279 2.40039 5.0559 2.67239 4.7999 3.11239L2.5919 6.94438C2.3359 7.38438 2.3359 7.92039 2.5919 8.36039L4.7999 12.1924C5.0559 12.6324 5.5199 12.9044 6.0319 12.9044H10.4559C10.9599 12.9044 11.4319 12.6324 11.6879 12.1924L13.8959 8.36039C14.1519 7.92039 14.1519 7.38438 13.8959 6.94438L11.6879 3.11239C11.4319 2.67239 10.9679 2.40039 10.4559 2.40039ZM8.6079 9.76838C7.1359 10.0084 5.8799 8.75238 6.1199 7.28038C6.2639 6.39238 6.9839 5.67239 7.8799 5.52039C9.3519 5.28039 10.6079 6.53639 10.3679 8.00839C10.2239 8.89639 9.5039 9.61638 8.6079 9.76838Z" /> + + + >, ~options: array>, ~popupFilterFields, @@ -217,6 +218,7 @@ let make = (
+
diff --git a/src/components/SelectBox.res b/src/components/SelectBox.res index 4a1ede16c..b32f4a0f4 100644 --- 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 = Int.toString}> - Int.toString} className=textClass value=labelText> - {item->React.string} - + {
+ Int.toString} className=textClass value=labelText> + {item->React.string} + +

+ {`${labelDescription->Option.getOr("")}`->React.string} +

+
} { @@ -365,6 +372,7 @@ type dropdownOptionWithoutOptional = { isDisabled: bool, icon: Button.iconType, description: option, + labelDescription: option, 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 index 3d1a77857..a4cfdfbfb 100644 --- a/src/components/SelectBox.resi +++ b/src/components/SelectBox.resi @@ -48,6 +48,8 @@ module ListItem: { ~textEllipsisForDropDownOptions: bool=?, ~textColorClass: string=?, ~customRowClass: string=?, + ~labelDescription: option=?, + ~labelDescriptionClass: string=?, ) => React.element } type dropdownOptionWithoutOptional = { @@ -56,6 +58,7 @@ type dropdownOptionWithoutOptional = { isDisabled: bool, icon: Button.iconType, description: option, + labelDescription: option, 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 => 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 index b28a788bf..52359e599 100644 --- 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 index 987c3905b..49f8c654f 100644 --- 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 /> diff --git a/src/screens/Analytics/PaymentsAnalytics/PaymentAnalytics.res b/src/screens/Analytics/PaymentsAnalytics/PaymentAnalytics.res index ee4778b6f..448810d1c 100644 --- a/src/screens/Analytics/PaymentsAnalytics/PaymentAnalytics.res +++ b/src/screens/Analytics/PaymentsAnalytics/PaymentAnalytics.res @@ -207,6 +207,7 @@ let make = () => { | Some(filterData) =>
{ | None =>
{
- + + +
diff --git a/src/screens/Analytics/PerformanceMonitor/PerformanceMonitor.res b/src/screens/Analytics/PerformanceMonitor/PerformanceMonitor.res index 320d98092..7347c4929 100644 --- 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 />
{ Table.CustomCell( } setReferesh diff --git a/src/screens/Connectors/PMAuthenticationProcessor/PMAuthenticationTableEntity.res b/src/screens/Connectors/PMAuthenticationProcessor/PMAuthenticationTableEntity.res index 0f443e684..175c5626e 100644 --- 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( - , + , "", ) | ConnectorLabel => Text(connector.connector_label) diff --git a/src/screens/Connectors/PaymentProcessor/ConnectorTableUtils.res b/src/screens/Connectors/PaymentProcessor/ConnectorTableUtils.res index 112194ac3..e327b7e83 100644 --- 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( - , + , "", ) | ConnectorLabel => Text(connector.connector_label) diff --git a/src/screens/Connectors/TaxProcessor/TaxProcessorTableEntity.res b/src/screens/Connectors/TaxProcessor/TaxProcessorTableEntity.res index d97a3c2e7..44f589288 100644 --- 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( - , + , "", ) | ConnectorLabel => Text(connector.connector_label) diff --git a/src/screens/Connectors/ThreeDsProcessors/ThreeDsTableEntity.res b/src/screens/Connectors/ThreeDsProcessors/ThreeDsTableEntity.res index 77fe50f47..7775a2f10 100644 --- 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( - , + , "", ) | ConnectorLabel => Text(connector.connector_label) diff --git a/src/screens/Helpers/HelperComponents.res b/src/screens/Helpers/HelperComponents.res index 6d1d07815..71be8f532 100644 --- 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 { + + } else { +
{displayValue->React.string}
+ } + +
+ +
{text}
+ + isNonEmptyString}> +
+

+ {`${displayValue->String.slice(~start=0, ~end=endValue)}`->React.string} +

+ handleClick(ev)}> + {"..."->React.string} + +
+ +
+ } +} + 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) -
- {(profile_name->LogicUtils.isNonEmptyString ? profile_name : "NA")->React.string} -
- } -} diff --git a/src/screens/Home/Home.res b/src/screens/Home/Home.res index 28d75bd65..ca0fa536b 100644 --- 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) -
+ <>
Option.isSome && recoveryCode < 3}>
- - - -
+
+ + + +
+ } diff --git a/src/screens/Hooks/BusinessProfileHook.res b/src/screens/Hooks/BusinessProfileHook.res index 34817e1c0..2ec158043 100644 --- a/src/screens/Hooks/BusinessProfileHook.res +++ b/src/screens/Hooks/BusinessProfileHook.res @@ -25,3 +25,13 @@ let useGetBusinessProflile = profileId => { ->Array.find(profile => profile.profile_id == profileId) ->Option.getOr(MerchantAccountUtils.defaultValueForBusinessProfile) } + +module BusinessProfileComponent = { + @react.component + let make = (~profile_id: string, ~className="") => { + let {profile_name} = useGetBusinessProflile(profile_id) +
+ {(profile_name->LogicUtils.isNonEmptyString ? profile_name : "NA")->React.string} +
+ } +} diff --git a/src/screens/OMPSwitch/OMPSwitchHelper.res b/src/screens/OMPSwitch/OMPSwitchHelper.res index 2bde878a2..193689b0e 100644 --- a/src/screens/OMPSwitch/OMPSwitchHelper.res +++ b/src/screens/OMPSwitch/OMPSwitchHelper.res @@ -30,7 +30,7 @@ module ListBaseComp = { let endValue = isDarkBg ? 23 : 15 let subHeadingElement = if subHeading->String.length > 15 { - { + let arrowUpClass = "rotate-0 transition duration-[250ms] opacity-70" + let arrowDownClass = "rotate-180 transition duration-[250ms] opacity-70" + + let truncatedDisplayName = if displayName->String.length > 15 { + + } else { + {displayName->React.string} + } + +
+
+
+ +

+ {`View data for:`->React.string} +

+ {truncatedDisplayName} + +
+
+
+ } +} + +let generateDropdownOptionsOMPViews = (dropdownList: OMPSwitchTypes.ompViews, getNameForId) => { + let options: array = dropdownList->Array.map(( + item + ): SelectBox.dropdownOption => { + { + label: `${item.entity->getNameForId}`, + value: `${(item.entity :> string)}`, + labelDescription: `(${item.lable})`, + description: `${item.entity->getNameForId}`, + } + }) + options +} + +module OMPViewsComp = { + @react.component + let make = (~input, ~options, ~displayName, ~entityMapper=UserInfoUtils.entityMapper) => { + let (arrow, setArrow) = React.useState(_ => false) + + let toggleChevronState = () => { + setArrow(prev => !prev) + } + + let customScrollStyle = "max-h-72 overflow-scroll px-1 pt-1" + let dropdownContainerStyle = "rounded-lg border w-full shadow-md" + +
+ } + baseComponentCustomStyle="bg-white rounded" + optionClass="font-inter text-fs-14 font-normal leading-5" + selectClass="font-inter text-fs-14 font-normal leading-5 font-semibold" + labelDescriptionClass="font-inter text-fs-12 font-normal leading-4" + customDropdownOuterClass="!border-none !w-full" + toggleChevronState + customScrollStyle + dropdownContainerStyle + shouldDisplaySelectedOnTop=true + descriptionOnHover=true + textEllipsisForDropDownOptions=true + /> +
+ } +} + module OMPViews = { @react.component let make = ( ~views: OMPSwitchTypes.ompViews, ~selectedEntity: UserInfoTypes.entity, ~onChange, + ~entityMapper=UserInfoUtils.entityMapper, ) => { - open OMPSwitchUtils - - let {userInfo} = React.useContext(UserInfoProvider.defaultContext) - let merchantList = Recoil.useRecoilValueFromAtom(HyperswitchAtom.merchantListAtom) - let orgList = Recoil.useRecoilValueFromAtom(HyperswitchAtom.orgListAtom) - let profileList = Recoil.useRecoilValueFromAtom(HyperswitchAtom.profileListAtom) - - let cssBasedOnIndex = index => { - if index == 0 { - "rounded-l-md" - } else if index == views->Array.length - 1 { - "rounded-r-md" - } else { - "" - } - } + let (_, getNameForId) = OMPSwitchHooks.useOMPData() - let getName = entityType => { - let name = switch entityType { - | #Organization => currentOMPName(orgList, userInfo.orgId) - | #Merchant => currentOMPName(merchantList, userInfo.merchantId) - | #Profile => currentOMPName(profileList, userInfo.profileId) - | _ => "" - } - name->String.length > 10 - ? name - ->String.substring(~start=0, ~end=10) - ->String.concat("...") - : name + let input: ReactFinalForm.fieldRenderPropsInput = { + name: "name", + onBlur: _ => (), + onChange: ev => { + let value = ev->Identity.formReactEventToString + onChange(value->UserInfoUtils.entityMapper)->ignore + }, + onFocus: _ => (), + value: (selectedEntity :> string)->JSON.Encode.string, + checked: true, } -
- {views - ->Array.mapWithIndex((value, index) => { - let selectedStyle = selectedEntity == value.entity ? `bg-blue-200` : "" -
Int.toString} - onClick={_ => onChange(value.entity)->ignore} - className={`text-xs py-2 px-3 ${selectedStyle} border text-blue-500 border-blue-500 ${index->cssBasedOnIndex} cursor-pointer break-all`}> - {`${value.lable} (${value.entity->getName})`->React.string} -
- }) - ->React.array} -
+ let options = views->generateDropdownOptionsOMPViews(getNameForId) + + let displayName = selectedEntity->getNameForId + + } } diff --git a/src/screens/PayoutRouting/PayoutHistoryTableEntity.res b/src/screens/PayoutRouting/PayoutHistoryTableEntity.res index 4aef75bf6..634e48ccd 100644 --- a/src/screens/PayoutRouting/PayoutHistoryTableEntity.res +++ b/src/screens/PayoutRouting/PayoutHistoryTableEntity.res @@ -55,7 +55,7 @@ let getTableCell = activeRoutingIds => { | ProfileId => Text(historyData.profile_id) | ProfileName => Table.CustomCell( - , + , "", ) | Description => Text(historyData.description) diff --git a/src/screens/Payouts/PayoutsList.res b/src/screens/Payouts/PayoutsList.res index c5237417f..1d3c3efc2 100644 --- a/src/screens/Payouts/PayoutsList.res +++ b/src/screens/Payouts/PayoutsList.res @@ -62,15 +62,19 @@ let make = () => {
- + + +
isNonEmptyString}>
-

diff --git a/src/screens/Routing/HistoryEntity.res b/src/screens/Routing/HistoryEntity.res index 9c727bb42..8c9487234 100644 --- a/src/screens/Routing/HistoryEntity.res +++ b/src/screens/Routing/HistoryEntity.res @@ -55,7 +55,7 @@ let getTableCell = activeRoutingIds => { | ProfileId => Text(historyData.profile_id) | ProfileName => Table.CustomCell( - , + , "", ) | Description => Text(historyData.description) diff --git a/src/screens/RoutingRevamp/BasicDetailsForm.res b/src/screens/RoutingRevamp/BasicDetailsForm.res index b77e8f056..60f9a9f97 100644 --- a/src/screens/RoutingRevamp/BasicDetailsForm.res +++ b/src/screens/RoutingRevamp/BasicDetailsForm.res @@ -130,7 +130,7 @@ let make = ( - Option.getOr(defaultBusinessProfile.profile_id)} /> diff --git a/src/screens/Transaction/Disputes/Disputes.res b/src/screens/Transaction/Disputes/Disputes.res index 0c198b47a..5dd79dc13 100644 --- a/src/screens/Transaction/Disputes/Disputes.res +++ b/src/screens/Transaction/Disputes/Disputes.res @@ -96,11 +96,14 @@ let make = () => {

- + + + Array.length > 0}> diff --git a/src/screens/Transaction/Order/HSwitchOrderUtils.res b/src/screens/Transaction/Order/HSwitchOrderUtils.res index 02d306168..9b4ab0cd6 100644 --- a/src/screens/Transaction/Order/HSwitchOrderUtils.res +++ b/src/screens/Transaction/Order/HSwitchOrderUtils.res @@ -189,39 +189,3 @@ module CopyLinkTableCell = {
} } - -module EllipsisText = { - @react.component - let make = (~displayValue, ~endValue=17, ~showCopy=true, ~customTextStyle="") => { - let (isTextVisible, setIsTextVisible) = React.useState(_ => false) - - let handleClick = ev => { - ev->ReactEvent.Mouse.stopPropagation - setIsTextVisible(_ => true) - } - - let text = if showCopy { - - } else { -
{displayValue->React.string}
- } - -
- -
{text}
- - isNonEmptyString}> -
-

- {`${displayValue->String.slice(~start=0, ~end=endValue)}`->React.string} -

- handleClick(ev)}> - {"..."->React.string} - -
- -
- } -} diff --git a/src/screens/Transaction/Order/OrderEntity.res b/src/screens/Transaction/Order/OrderEntity.res index a05fb9ac6..fad083ed6 100644 --- a/src/screens/Transaction/Order/OrderEntity.res +++ b/src/screens/Transaction/Order/OrderEntity.res @@ -592,7 +592,11 @@ let getCellForAboutPayment = (order, aboutPaymentColType: aboutPaymentColType): | ConnectorLabel => Text(order.connector_label) | CardBrand => Text(order.card_brand) | ProfileId => Text(order.profile_id) - | ProfileName => Table.CustomCell(, "") + | ProfileName => + Table.CustomCell( + , + "", + ) | CaptureMethod => Text(order.capture_method) | CardNetwork => { let dict = switch order.payment_method_data { @@ -652,7 +656,7 @@ let getCell = (order, colType: colType): Table.cell => { switch colType { | Metadata => CustomCell( - JSON.Encode.object->JSON.stringify} />, "", @@ -698,7 +702,7 @@ let getCell = (order, colType: colType): Table.cell => { | Currency => Text(order.currency) | CustomerId => Text(order.customer_id) | Description => - CustomCell(, "") + CustomCell(, "") | MandateId => Text(order.mandate_id) | MandateData => Text(order.mandate_data) | SetupFutureUsage => Text(order.setup_future_usage) diff --git a/src/screens/Transaction/Order/Orders.res b/src/screens/Transaction/Order/Orders.res index b971ad902..439f94ec6 100644 --- a/src/screens/Transaction/Order/Orders.res +++ b/src/screens/Transaction/Order/Orders.res @@ -136,11 +136,14 @@ let make = (~previewOnly=false) => {
- + + + Array.length > 0}> diff --git a/src/screens/Transaction/Refunds/Refund.res b/src/screens/Transaction/Refunds/Refund.res index c2c6ac616..ee20b48be 100644 --- a/src/screens/Transaction/Refunds/Refund.res +++ b/src/screens/Transaction/Refunds/Refund.res @@ -71,11 +71,14 @@ let make = () => {
- + + + Array.length > 0}> diff --git a/src/screens/UserManagement/UserRevamp/ListRoles.res b/src/screens/UserManagement/UserRevamp/ListRoles.res index b7c4f45c9..3114c1acd 100644 --- a/src/screens/UserManagement/UserRevamp/ListRoles.res +++ b/src/screens/UserManagement/UserRevamp/ListRoles.res @@ -1,5 +1,5 @@ @react.component -let make = (~userModuleEntity: UserManagementTypes.userModuleTypes) => { +let make = () => { open APIUtils open ListRolesTableEntity let getURL = useGetURL() @@ -10,8 +10,12 @@ let make = (~userModuleEntity: UserManagementTypes.userModuleTypes) => { let {checkUserEntity} = React.useContext(UserInfoProvider.defaultContext) let mixpanelEvent = MixpanelHook.useSendEvent() let {userHasAccess} = GroupACLHooks.useUserGroupACLHook() + let ( + userModuleEntity: UserManagementTypes.userModuleTypes, + setUserModuleEntity, + ) = React.useState(_ => #Default) - let getRolesAvailable = async () => { + let getRolesAvailable = async (userModuleEntity: UserManagementTypes.userModuleTypes) => { setScreenStateRoles(_ => PageLoaderWrapper.Loading) try { let userDataURL = getURL( @@ -25,6 +29,7 @@ let make = (~userModuleEntity: UserManagementTypes.userModuleTypes) => { let res = await fetchDetails(userDataURL) let rolesData = res->LogicUtils.getArrayDataFromJson(itemToObjMapperForRoles) setRolesAvailableData(_ => rolesData->Array.map(Nullable.make)) + setUserModuleEntity(_ => userModuleEntity) setScreenStateRoles(_ => PageLoaderWrapper.Success) } catch { | _ => setScreenStateRoles(_ => PageLoaderWrapper.Error("")) @@ -32,13 +37,18 @@ let make = (~userModuleEntity: UserManagementTypes.userModuleTypes) => { } React.useEffect(() => { - getRolesAvailable()->ignore + getRolesAvailable(#Default)->ignore None - }, [userModuleEntity]) + }, [])
-
+
+ { +let make = () => { open APIUtils open LogicUtils let getURL = useGetURL() let fetchDetails = useGetMethod() let mixpanelEvent = MixpanelHook.useSendEvent() + let {checkUserEntity} = React.useContext(UserInfoProvider.defaultContext) let {userHasAccess} = GroupACLHooks.useUserGroupACLHook() let (usersData, setUsersData) = React.useState(_ => []) let (usersFilterData, setUsersFilterData) = React.useState(_ => []) let (screenStateUsers, setScreenStateUsers) = React.useState(_ => PageLoaderWrapper.Loading) let (userOffset, setUserOffset) = React.useState(_ => 0) let (searchText, setSearchText) = React.useState(_ => "") + let ( + userModuleEntity: UserManagementTypes.userModuleTypes, + setUserModuleEntity, + ) = React.useState(_ => #Default) - let getUserData = async () => { + let getUserData = async (userModuleEntity: UserManagementTypes.userModuleTypes) => { setScreenStateUsers(_ => PageLoaderWrapper.Loading) try { let userDataURL = getURL( @@ -29,6 +34,7 @@ let make = (~userModuleEntity: UserManagementTypes.userModuleTypes) => { let userData = res->getArrayDataFromJson(itemToObjMapperForUser) setUsersData(_ => userData->Array.map(Nullable.make)) setUsersFilterData(_ => userData->Array.map(Nullable.make)) + setUserModuleEntity(_ => userModuleEntity) setScreenStateUsers(_ => PageLoaderWrapper.Success) } catch { | _ => setScreenStateUsers(_ => PageLoaderWrapper.Error("")) @@ -36,9 +42,9 @@ let make = (~userModuleEntity: UserManagementTypes.userModuleTypes) => { } React.useEffect(() => { - getUserData()->ignore + getUserData(#Default)->ignore None - }, [userModuleEntity]) + }, []) let filterLogicForUsers = ReactDebounce.useDebounced(ob => { let (searchText, arr) = ob @@ -57,7 +63,12 @@ let make = (~userModuleEntity: UserManagementTypes.userModuleTypes) => {
-
+
+ , + getNameForId, +) => { + let options: array = dropdownList->Array.map(( + item + ): SelectBox.dropdownOption => { + switch item.entity { + | #Default => { + label: `${item.label}`, + value: `${(item.entity :> string)}`, + labelDescription: `(${(item.entity :> string)})`, + description: `${item.label}`, + } + | _ => { + label: `${item.entity->getNameForId} (${(item.entity :> string)})`, + value: `${(item.entity :> string)}`, + labelDescription: `(${(item.entity :> string)})`, + description: `${item.entity->getNameForId}`, + } + } + }) + options +} + module UserOmpView = { @react.component let make = ( - ~views: array, - ~userModuleEntity: UserManagementTypes.userModuleTypes, - ~setUserModuleEntity, + ~views: array, + ~selectedEntity: UserManagementTypes.userModuleTypes, + ~onChange, ) => { let (_, getNameForId) = OMPSwitchHooks.useOMPData() - let cssBasedOnIndex = index => { - if views->Array.length == 1 { - "rounded-md" - } else if index == 0 { - "rounded-l-md" - } else if index == views->Array.length - 1 { - "rounded-r-md" - } else { - "" - } + let input: ReactFinalForm.fieldRenderPropsInput = { + name: "name", + onBlur: _ => (), + onChange: ev => { + let value = ev->Identity.formReactEventToString + let selection = switch value { + | "Default" => #Default + | _ => value->UserInfoUtils.entityMapper + } + onChange(selection)->ignore + }, + onFocus: _ => (), + value: (selectedEntity :> string)->JSON.Encode.string, + checked: true, } - let getName = entityType => { - let name = getNameForId(entityType) - name->String.length > 10 - ? name - ->String.substring(~start=0, ~end=10) - ->String.concat("...") - : name - } + let options = views->generateDropdownOptionsUserOMPViews(getNameForId) - let onChange = entity => { - setUserModuleEntity(_ => entity) + let displayName = switch selectedEntity { + | #Default => "My Team" + | _ => selectedEntity->getNameForId } - let labelBasedOnEntity: UserManagementTypes.ompViewType => string = value => - switch value.entity { - | #Default => value.label - | _ => `${value.label} (${value.entity->getName})` - } - -
-
- {views - ->Array.mapWithIndex((value, index) => { - let selectedStyle = userModuleEntity == value.entity ? `bg-blue-200` : "" - -
Int.toString} - onClick={_ => onChange(value.entity)->ignore} - className={`text-xs py-2 px-3 ${selectedStyle} border text-blue-500 border-blue-500 ${index->cssBasedOnIndex} cursor-pointer break-all`}> - {`${value->labelBasedOnEntity}`->React.string} -
- }) - ->React.array} -
-
+ } } diff --git a/src/screens/UserManagement/UserRevamp/UserManagementLanding.res b/src/screens/UserManagement/UserRevamp/UserManagementLanding.res index a1adaa37b..f00653a4c 100644 --- a/src/screens/UserManagement/UserRevamp/UserManagementLanding.res +++ b/src/screens/UserManagement/UserRevamp/UserManagementLanding.res @@ -1,30 +1,19 @@ @react.component let make = () => { - let {checkUserEntity} = React.useContext(UserInfoProvider.defaultContext) - let ( - userModuleEntity: UserManagementTypes.userModuleTypes, - setUserModuleEntity, - ) = React.useState(_ => #Default) - let tabList: array = [ { title: "Users", - renderContent: () => , + renderContent: () => , }, { title: "Roles", - renderContent: () => , + renderContent: () => , }, ] -
+
-