From ff5d897d8dac67ff5c17eee9e56da5797097c2cb Mon Sep 17 00:00:00 2001 From: Jeeva Ramachandran <120017870+JeevaRamu0104@users.noreply.github.com> Date: Wed, 4 Sep 2024 16:35:01 +0530 Subject: [PATCH] chore: add profile level views in payment page (#1290) Co-authored-by: Riddhiagrawal001 <50551695+Riddhiagrawal001@users.noreply.github.com> --- src/container/TransactionContainer.res | 61 +++++++++++++++++++ .../AuthModule/UserInfo/UserInfoProvider.res | 6 +- .../AuthModule/UserInfo/UserInfoTypes.res | 1 + .../AuthModule/UserInfo/UserInfoUtils.res | 1 + src/entryPoints/HyperSwitchApp.res | 55 ++--------------- src/screens/APIUtils/APIUtils.res | 32 +++++++--- src/screens/APIUtils/APIUtilsTypes.res | 1 + src/screens/Disputes/Disputes.res | 14 ++++- src/screens/HSwitchRemoteFilter.res | 12 ++-- src/screens/Hooks/OMPSwitchHooks.res | 12 ++-- src/screens/OMPSwitch/OMPSwitchHelper.res | 30 +++++++++ src/screens/OMPSwitch/OMPSwitchTypes.res | 6 ++ src/screens/Order/OrderUIUtils.res | 11 ++++ src/screens/Order/Orders.res | 19 +++--- src/screens/Payouts/PayoutsList.res | 16 +++-- src/screens/Refunds/Refund.res | 17 ++++-- .../SwitchMerchant/SwitchMerchantListHook.res | 2 +- 17 files changed, 206 insertions(+), 90 deletions(-) create mode 100644 src/container/TransactionContainer.res diff --git a/src/container/TransactionContainer.res b/src/container/TransactionContainer.res new file mode 100644 index 000000000..4dfc66422 --- /dev/null +++ b/src/container/TransactionContainer.res @@ -0,0 +1,61 @@ +@react.component +let make = () => { + open HSwitchUtils + open HyperswitchAtom + let url = RescriptReactRouter.useUrl() + let userPermissionJson = Recoil.useRecoilValueFromAtom(userPermissionAtom) + let {userInfo: {transactionEntity}} = React.useContext(UserInfoProvider.defaultContext) + let {payOut} = featureFlagAtom->Recoil.useRecoilValueFromAtom +
string)}> + {switch url.path->urlPath { + | list{"payments", ...remainingPath} => + + + } + renderShow={(id, key) => } + /> + + + | list{"payouts", ...remainingPath} => + + + } + renderShow={(id, key) => } + /> + + + | list{"refunds", ...remainingPath} => + + + } + renderShow={(id, key) => } + /> + + + | list{"disputes", ...remainingPath} => + + } + renderShow={(id, key) => } + /> + + | list{"unauthorized"} => + | _ => + }} +
+} diff --git a/src/entryPoints/AuthModule/UserInfo/UserInfoProvider.res b/src/entryPoints/AuthModule/UserInfo/UserInfoProvider.res index 48ec2ef76..9aec7c13d 100644 --- a/src/entryPoints/AuthModule/UserInfo/UserInfoProvider.res +++ b/src/entryPoints/AuthModule/UserInfo/UserInfoProvider.res @@ -27,12 +27,16 @@ let make = (~children) => { setUserInfo(_ => userData) } + let getUserInfoData = () => { + userInfo + } + React.useEffect(() => { getUserInfo()->ignore None }, []) - + children diff --git a/src/entryPoints/AuthModule/UserInfo/UserInfoTypes.res b/src/entryPoints/AuthModule/UserInfo/UserInfoTypes.res index c10b351e0..fa0f5a589 100644 --- a/src/entryPoints/AuthModule/UserInfo/UserInfoTypes.res +++ b/src/entryPoints/AuthModule/UserInfo/UserInfoTypes.res @@ -17,4 +17,5 @@ type userInfo = { type userInfoProviderTypes = { userInfo: userInfo, setUserInfoData: userInfo => unit, + getUserInfoData: unit => userInfo, } diff --git a/src/entryPoints/AuthModule/UserInfo/UserInfoUtils.res b/src/entryPoints/AuthModule/UserInfo/UserInfoUtils.res index 8777b605b..b68ed24df 100644 --- a/src/entryPoints/AuthModule/UserInfo/UserInfoUtils.res +++ b/src/entryPoints/AuthModule/UserInfo/UserInfoUtils.res @@ -28,6 +28,7 @@ let entityMapper = entity => { let defaultValueOfUserInfoProvider = { userInfo: defaultValueOfUserInfo, setUserInfoData: _ => (), + getUserInfoData: _ => defaultValueOfUserInfo, } open LogicUtils let itemMapper = dict => { diff --git a/src/entryPoints/HyperSwitchApp.res b/src/entryPoints/HyperSwitchApp.res index 33a014997..2607c04cc 100644 --- a/src/entryPoints/HyperSwitchApp.res +++ b/src/entryPoints/HyperSwitchApp.res @@ -207,56 +207,11 @@ let make = () => { | list{"business-profiles", ..._} | list{"payment-settings", ..._} => - - | list{"payments", ...remainingPath} => - - - } - renderShow={(id, key) => } - /> - - - - | list{"payouts", ...remainingPath} => - - - } - renderShow={(id, key) => } - /> - - - | list{"refunds", ...remainingPath} => - - - } - renderShow={(id, key) => } - /> - - - | list{"disputes", ...remainingPath} => - - } - renderShow={(id, key) => } - /> - + | list{"payments", ..._} + | list{"refunds", ..._} + | list{"disputes", ..._} + | list{"payouts", ..._} => + | list{"customers", ...remainingPath} => { let {merchantId} = useCommonAuthInfo()->Option.getOr(defaultAuthInfo) - let {userInfo: {userEntity}} = React.useContext(UserInfoProvider.defaultContext) + let {getUserInfoData} = React.useContext(UserInfoProvider.defaultContext) let {userManagementRevamp} = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom let getUrl = ( ~entityName: entityName, @@ -17,6 +17,7 @@ let useGetURL = () => { ~reconType: reconType=#NONE, ~queryParamerters: option=None, ) => { + let {transactionEntity, userEntity} = getUserInfoData() let connectorBaseURL = `account/${merchantId}/connectors` let endpoint = switch entityName { @@ -73,7 +74,7 @@ let useGetURL = () => { | REFUND_FILTERS => switch methodType { | Get => - switch (userEntity, userManagementRevamp) { + switch (transactionEntity, userManagementRevamp) { | (#Merchant, true) => `refunds/v2/filter` | (#Profile, true) => `refunds/v2/profile/filter` | _ => `refunds/v2/filter` @@ -84,12 +85,23 @@ let useGetURL = () => { | ORDER_FILTERS => switch methodType { | Get => - switch (userEntity, userManagementRevamp) { + switch (transactionEntity, userManagementRevamp) { | (#Merchant, true) => `payments/v2/filter` | (#Profile, true) => `payments/v2/profile/filter` | _ => `payments/v2/filter` } + | _ => "" + } + | PAYOUTS_FILTERS => + switch methodType { + | Post => + switch (transactionEntity, userManagementRevamp) { + | (#Merchant, true) => `payouts/filter` + | (#Profile, true) => `payouts/profile/filter` + | _ => `payouts/filter` + } + | _ => "" } | ORDERS => @@ -104,7 +116,7 @@ let useGetURL = () => { | None => switch queryParamerters { | Some(queryParams) => - switch (userEntity, userManagementRevamp) { + switch (transactionEntity, userManagementRevamp) { | (#Merchant, true) => `payments/list?${queryParams}` | (#Profile, true) => `payments/profile/list?${queryParams}` | _ => `payments/list?limit=100` @@ -113,7 +125,7 @@ let useGetURL = () => { } } | Post => - switch (userEntity, userManagementRevamp) { + switch (transactionEntity, userManagementRevamp) { | (#Merchant, true) => `payments/list` | (#Profile, true) => `payments/profile/list` | _ => `payments/list` @@ -144,7 +156,7 @@ let useGetURL = () => { | None => switch queryParamerters { | Some(queryParams) => - switch (userEntity, userManagementRevamp) { + switch (transactionEntity, userManagementRevamp) { | (#Merchant, true) => `refunds/list?${queryParams}` | (#Profile, true) => `refunds/profile/list?limit=100` | _ => `refunds/list?limit=100` @@ -155,7 +167,7 @@ let useGetURL = () => { | Post => switch id { | Some(_keyid) => - switch (userEntity, userManagementRevamp) { + switch (transactionEntity, userManagementRevamp) { | (#Merchant, true) => `refunds/list` | (#Profile, true) => `refunds/profile/list` | _ => `refunds/list` @@ -170,7 +182,7 @@ let useGetURL = () => { switch id { | Some(dispute_id) => `disputes/${dispute_id}` | None => - switch (userEntity, userManagementRevamp) { + switch (transactionEntity, userManagementRevamp) { | (#Merchant, true) => `disputes/list?limit=10000` | (#Profile, true) => `disputes/profile/list?limit=10000` | _ => `disputes/list?limit=10000` @@ -184,14 +196,14 @@ let useGetURL = () => { switch id { | Some(payout_id) => `payouts/${payout_id}` | None => - switch (userEntity, userManagementRevamp) { + switch (transactionEntity, userManagementRevamp) { | (#Merchant, true) => `payouts/list?limit=100` | (#Profile, true) => `payouts/profile/list?limit=10000` | _ => `payouts/list?limit=100` } } | Post => - switch (userEntity, userManagementRevamp) { + switch (transactionEntity, userManagementRevamp) { | (#Merchant, true) => `payouts/list` | (#Profile, true) => `payouts/profile/list` | _ => `payouts/list` diff --git a/src/screens/APIUtils/APIUtilsTypes.res b/src/screens/APIUtils/APIUtilsTypes.res index 8a375c858..051076e08 100644 --- a/src/screens/APIUtils/APIUtilsTypes.res +++ b/src/screens/APIUtils/APIUtilsTypes.res @@ -6,6 +6,7 @@ type entityName = | REFUND_FILTERS | DISPUTES | PAYOUTS + | PAYOUTS_FILTERS | ANALYTICS_FILTERS | ANALYTICS_PAYMENTS | ANALYTICS_DISPUTES diff --git a/src/screens/Disputes/Disputes.res b/src/screens/Disputes/Disputes.res index 1229c2264..4a42a29aa 100644 --- a/src/screens/Disputes/Disputes.res +++ b/src/screens/Disputes/Disputes.res @@ -12,6 +12,9 @@ let make = () => { let (offset, setOffset) = React.useState(_ => 0) let fetchDetails = useGetMethod() + let {generateReport, userManagementRevamp} = + HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom + let {updateTransactionEntity} = OMPSwitchHooks.useUserInfo() let getDisputesList = async () => { try { setScreenState(_ => Loading) @@ -62,10 +65,15 @@ let make = () => { /> - let {generateReport} = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom -
- +
+ + + + +
Array.length > 0}> diff --git a/src/screens/HSwitchRemoteFilter.res b/src/screens/HSwitchRemoteFilter.res index 7933b864b..8468da9c4 100644 --- a/src/screens/HSwitchRemoteFilter.res +++ b/src/screens/HSwitchRemoteFilter.res @@ -116,7 +116,6 @@ module RemoteTableFilters = { @react.component let make = ( ~apiType: Fetch.requestMethod=Get, - ~filterUrl, ~setFilters, ~endTimeFilterKey, ~startTimeFilterKey, @@ -124,9 +123,15 @@ module RemoteTableFilters = { ~initialFixedFilter, ~setOffset, ~customLeftView, + ~entityName: APIUtilsTypes.entityName, (), ) => { open LogicUtils + open APIUtils + + let getURL = useGetURL() + let {userInfo: transactionEntity} = React.useContext(UserInfoProvider.defaultContext) + let {filterValue, updateExistingKeys, filterValueJson, reset} = FilterContext.filterContext->React.useContext let defaultFilters = {""->JSON.Encode.string} @@ -140,8 +145,6 @@ module RemoteTableFilters = { None }, []) - open APIUtils - let (filterDataJson, setFilterDataJson) = React.useState(_ => None) let updateDetails = useUpdateMethod() let defaultDate = getDateFilteredObject(~range=30) @@ -151,6 +154,7 @@ module RemoteTableFilters = { let fetchAllFilters = async () => { try { + let filterUrl = getURL(~entityName, ~methodType=apiType) setFilterDataJson(_ => None) let response = switch apiType { | Post => { @@ -172,7 +176,7 @@ module RemoteTableFilters = { React.useEffect(() => { fetchAllFilters()->ignore None - }, []) + }, [transactionEntity]) let filterData = filterDataJson->Option.getOr(Dict.make()->JSON.Encode.object) diff --git a/src/screens/Hooks/OMPSwitchHooks.res b/src/screens/Hooks/OMPSwitchHooks.res index 206ffd8f5..29d9d5c04 100644 --- a/src/screens/Hooks/OMPSwitchHooks.res +++ b/src/screens/Hooks/OMPSwitchHooks.res @@ -1,11 +1,11 @@ type userInfo = { getUserInfo: unit => promise, - updateTransactionEntity: unit => unit, + updateTransactionEntity: UserInfoTypes.entity => unit, } let useUserInfo = () => { open LogicUtils let fetchApi = AuthHooks.useApiFetcher() - let {setUserInfoData} = React.useContext(UserInfoProvider.defaultContext) + let {setUserInfoData, userInfo} = React.useContext(UserInfoProvider.defaultContext) let url = `${Window.env.apiBaseUrl}/user` let getUserInfo = async () => { @@ -22,8 +22,12 @@ let useUserInfo = () => { } } } - let updateTransactionEntity = () => { - Js.log("") + let updateTransactionEntity = (transactionEntity: UserInfoTypes.entity) => { + let updateInfo = { + ...userInfo, + transactionEntity, + } + setUserInfoData(updateInfo) } {getUserInfo, updateTransactionEntity} } diff --git a/src/screens/OMPSwitch/OMPSwitchHelper.res b/src/screens/OMPSwitch/OMPSwitchHelper.res index ec1a6ef75..0601f7292 100644 --- a/src/screens/OMPSwitch/OMPSwitchHelper.res +++ b/src/screens/OMPSwitch/OMPSwitchHelper.res @@ -46,3 +46,33 @@ module AddNewMerchantProfileButton = { } } + +module OMPViews = { + @react.component + let make = (~views: OMPSwitchTypes.ompViews, ~onChange) => { + let {userInfo: {transactionEntity}} = React.useContext(UserInfoProvider.defaultContext) + + let cssBasedOnIndex = index => { + if index == 0 { + "rounded-l-md" + } else if index == views->Array.length - 1 { + "rounded-r-md" + } else { + "" + } + } + +
+ {views + ->Array.mapWithIndex((value, index) => { + let selectedStyle = value.entity === transactionEntity ? `bg-blue-200` : "" +
onChange(value.entity)->ignore} + className={`text-sm py-2 px-3 ${selectedStyle} border text-blue-500 border-blue-500 ${index->cssBasedOnIndex} cursor-pointer`}> + {value.lable->React.string} +
+ }) + ->React.array} +
+ } +} diff --git a/src/screens/OMPSwitch/OMPSwitchTypes.res b/src/screens/OMPSwitch/OMPSwitchTypes.res index f59afb54d..65808ad2e 100644 --- a/src/screens/OMPSwitch/OMPSwitchTypes.res +++ b/src/screens/OMPSwitch/OMPSwitchTypes.res @@ -1 +1,7 @@ type ompListTypes = {id: string, name: string} + +type opmView = { + lable: string, + entity: UserInfoTypes.entity, +} +type ompViews = array diff --git a/src/screens/Order/OrderUIUtils.res b/src/screens/Order/OrderUIUtils.res index 92c582bbe..38fb56d9a 100644 --- a/src/screens/Order/OrderUIUtils.res +++ b/src/screens/Order/OrderUIUtils.res @@ -479,3 +479,14 @@ let getOrdersList = async ( let isNonEmptyValue = value => { value->Option.getOr(Dict.make())->Dict.toArray->Array.length > 0 } + +let orderViewList: OMPSwitchTypes.ompViews = [ + { + lable: "All Profiles", + entity: #Merchant, + }, + { + lable: "Profile", + entity: #Profile, + }, +] diff --git a/src/screens/Order/Orders.res b/src/screens/Order/Orders.res index cfd4cdea8..e3486e7e4 100644 --- a/src/screens/Order/Orders.res +++ b/src/screens/Order/Orders.res @@ -6,6 +6,7 @@ let make = (~previewOnly=false) => { open LogicUtils let getURL = useGetURL() let updateDetails = useUpdateMethod() + let {updateTransactionEntity} = OMPSwitchHooks.useUserInfo() let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Loading) let (orderData, setOrdersData) = React.useState(_ => []) let (totalCount, setTotalCount) = React.useState(_ => 0) @@ -20,7 +21,8 @@ let make = (~previewOnly=false) => { let pageDetailDict = Recoil.useRecoilValueFromAtom(LoadedTable.table_pageDetails) let pageDetail = pageDetailDict->Dict.get("Orders")->Option.getOr(defaultValue) let (offset, setOffset) = React.useState(_ => pageDetail.offset) - let {generateReport} = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom + let {generateReport, userManagementRevamp} = + HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom let fetchOrders = () => { if !previewOnly { @@ -87,11 +89,8 @@ let make = (~previewOnly=false) => { customCssClass={"my-6"} message="There are no payments as of now" renderType=Painting /> - let filterUrl = getURL(~entityName=ORDER_FILTERS, ~methodType=Get) - let filtersUI = React.useMemo(() => { { customLeftView={} + entityName=ORDER_FILTERS /> }, [])
- +
+ + + + +
{filtersUI}
diff --git a/src/screens/Payouts/PayoutsList.res b/src/screens/Payouts/PayoutsList.res index 1ae66bcaa..d00a39d54 100644 --- a/src/screens/Payouts/PayoutsList.res +++ b/src/screens/Payouts/PayoutsList.res @@ -15,7 +15,8 @@ let make = () => { let pageDetailDict = Recoil.useRecoilValueFromAtom(LoadedTable.table_pageDetails) let pageDetail = pageDetailDict->Dict.get("Payouts")->Option.getOr(defaultValue) let (offset, setOffset) = React.useState(_ => pageDetail.offset) - + let {updateTransactionEntity} = OMPSwitchHooks.useUserInfo() + let {userManagementRevamp} = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom let fetchPayouts = () => { switch filters { | Some(dict) => @@ -54,16 +55,20 @@ let make = () => { None }, (offset, filters, searchText)) - let filterUrl = getURL(~entityName=PAYOUTS, ~methodType=Get, ~id=Some("filter")) -
- +
+ + + + +
{ customLeftView={} + entityName=PAYOUTS_FILTERS />
diff --git a/src/screens/Refunds/Refund.res b/src/screens/Refunds/Refund.res index 3d0bdd2be..485df274c 100644 --- a/src/screens/Refunds/Refund.res +++ b/src/screens/Refunds/Refund.res @@ -6,6 +6,7 @@ let make = () => { open RefundUtils let getURL = useGetURL() let updateDetails = useUpdateMethod() + let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Loading) let (refundData, setRefundsData) = React.useState(_ => []) let (totalCount, setTotalCount) = React.useState(_ => 0) @@ -15,7 +16,8 @@ let make = () => { let pageDetailDict = Recoil.useRecoilValueFromAtom(LoadedTable.table_pageDetails) let pageDetail = pageDetailDict->Dict.get("Refunds")->Option.getOr(defaultValue) let (offset, setOffset) = React.useState(_ => pageDetail.offset) - + let {updateTransactionEntity} = OMPSwitchHooks.useUserInfo() + let {userManagementRevamp} = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom let fetchRefunds = () => { switch filters { | Some(dict) => @@ -59,15 +61,19 @@ let make = () => { let {generateReport} = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom - let filterUrl = getURL(~entityName=REFUND_FILTERS, ~methodType=Get) -
- +
+ + + + +
{ setSearchVal=setSearchText searchVal=searchText />} + entityName=REFUND_FILTERS />
Array.length > 0}> diff --git a/src/screens/SwitchMerchant/SwitchMerchantListHook.res b/src/screens/SwitchMerchant/SwitchMerchantListHook.res index 518e891ce..8234940ab 100644 --- a/src/screens/SwitchMerchant/SwitchMerchantListHook.res +++ b/src/screens/SwitchMerchant/SwitchMerchantListHook.res @@ -3,10 +3,10 @@ let useFetchSwitchMerchantList = () => { let getURL = useGetURL() let fetchDetails = useGetMethod() let setSwitchMerchantListAtom = HyperswitchAtom.switchMerchantListAtom->Recoil.useSetRecoilState - let url = getURL(~entityName=USERS, ~userType=#SWITCH_MERCHANT, ~methodType=Get) async _ => { try { + let url = getURL(~entityName=USERS, ~userType=#SWITCH_MERCHANT, ~methodType=Get) let res = await fetchDetails(url) let typedValueOfResponse = res->SwitchMerchantUtils.convertListResponseToTypedResponse setSwitchMerchantListAtom(_ => typedValueOfResponse)