Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | import { useEffect, useMemo, useState } from "react";
import { checkPortals } from "@utils/routing";
import { useBusinessDetailsTabs } from "./businessDetailsTabs";
import { useLocation } from "react-router-dom";
import GiveTabs from "@shared/Tabs/GiveTabs";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import { TSectionName } from "./components/MerchantInfoSection/types";
const BusinessDetailsV2 = () => {
const { isAcquirerPortal, isEnterprisePortal } = checkPortals();
const location = useLocation();
const portal: TSectionName = isAcquirerPortal
? "Acquirer"
: isEnterprisePortal
? "Provider"
: "Merchant";
const currentTabs = useBusinessDetailsTabs({ portal });
const [tab, setTab] = useState<string>(
location?.state?.params?.tab || currentTabs[0].name,
);
const { isMobileView, isTabletView } = useCustomThemeV2();
const isMobileOrTablet = isMobileView || isTabletView;
const UIComponent = useMemo(
() => currentTabs.find((t) => t.name === tab)?.Component,
[tab],
);
const tabList = currentTabs.map((item) => ({
label: item.name,
value: item.name,
}));
useEffect(() => {
// If the current tab no longer exists, reset to first tab,
const isValidTab = currentTabs.some((t) => t.name === tab);
if (!isValidTab && currentTabs.length > 0) {
setTab(currentTabs[0].name);
}
}, [currentTabs, tab]);
return (
<>
<GiveTabs
{...(isMobileOrTablet
? {
type: "line",
variant: "underline",
}
: {
type: "segmented",
variant: undefined,
})}
items={tabList}
selected={tab}
onClick={(tabName) => setTab(tabName)}
containerSx={{
width: "100%",
justifyContent: "space-around",
paddingTop: isMobileOrTablet ? "24px" : undefined,
overflowX: "auto",
scrollbarWidth: "none",
}}
tabSx={{
flex: 1,
justifyContent: "center",
"& div > div": {
justifyContent: "center",
},
}}
/>
{UIComponent && <UIComponent />}
</>
);
};
export default BusinessDetailsV2;
|