diff --git a/src/apps/wallet/src/home/tabs/WalletTabs.tsx b/src/apps/wallet/src/home/tabs/WalletTabs.tsx index 643d438db..d731c1b20 100644 --- a/src/apps/wallet/src/home/tabs/WalletTabs.tsx +++ b/src/apps/wallet/src/home/tabs/WalletTabs.tsx @@ -4,6 +4,9 @@ import { useLocation } from 'react-router-dom' import { UserProfile } from '~/libs/core' import { PageTitle, TabsNavbar, TabsNavItem } from '~/libs/ui' +import { PayoutGuard } from '../../lib' +import { useCanViewPayout } from '../../lib/hooks/use-can-view-payout' + import { getHashFromTabId, getTabIdFromHash, WalletTabsConfig, WalletTabViews } from './config' import { WinningsTab } from './winnings' import { HomeTab } from './home' @@ -16,12 +19,17 @@ interface WalletHomeProps { const WalletTabs: FC = (props: WalletHomeProps) => { const { hash }: { hash: string } = useLocation() + const canViewPayout = useCanViewPayout(props.profile) const activeTabHash: WalletTabViews = useMemo(() => getTabIdFromHash(hash), [hash]) const [activeTab, setActiveTab]: [WalletTabViews, Dispatch>] = useState(activeTabHash) + const tabsConfig = useMemo(() => WalletTabsConfig.filter(tab => ( + tab.id !== WalletTabViews.payout || canViewPayout + )), [canViewPayout]) + useEffect(() => { setActiveTab(activeTabHash) }, [activeTabHash]) @@ -33,7 +41,7 @@ const WalletTabs: FC = (props: WalletHomeProps) => { return (
- + {[ @@ -47,7 +55,9 @@ const WalletTabs: FC = (props: WalletHomeProps) => { {activeTab === WalletTabViews.home && } - {activeTab === WalletTabViews.payout && } + + {activeTab === WalletTabViews.payout && } +
) } diff --git a/src/apps/wallet/src/home/tabs/home/HomeTab.tsx b/src/apps/wallet/src/home/tabs/home/HomeTab.tsx index 4d37d701a..f86218f7a 100644 --- a/src/apps/wallet/src/home/tabs/home/HomeTab.tsx +++ b/src/apps/wallet/src/home/tabs/home/HomeTab.tsx @@ -5,7 +5,7 @@ import { UserProfile } from '~/libs/core' import { IconOutline, LinkButton, LoadingCircles } from '~/libs/ui' import { Balance } from '../../../lib/models/WalletDetails' -import { InfoRow } from '../../../lib' +import { InfoRow, PayoutGuard } from '../../../lib' import { BannerImage, BannerText } from '../../../lib/assets/home' import { nullToZero } from '../../../lib/util' import { useWalletDetails, WalletDetailsResponse } from '../../../lib/hooks/use-wallet-details' @@ -17,7 +17,8 @@ interface HomeTabProps { profile: UserProfile } -const HomeTab: FC = () => { +const HomeTab: FC = props => { + const { data: walletDetails, isLoading, error }: WalletDetailsResponse = useWalletDetails() const [balanceSum, setBalanceSum] = useState(0) @@ -57,63 +58,70 @@ const HomeTab: FC = () => { } /> - {walletDetails.withdrawalMethod.isSetupComplete && walletDetails.taxForm.isSetupComplete && ( - - } - /> - )} + + {walletDetails.withdrawalMethod.isSetupComplete + && walletDetails.taxForm.isSetupComplete && ( + + } + /> + )} - {!walletDetails?.withdrawalMethod.isSetupComplete && ( - - ) - } - action={ - - } - /> - )} + {!walletDetails?.withdrawalMethod.isSetupComplete && ( + + ) + } + action={ + + } + /> + )} - {!walletDetails?.taxForm.isSetupComplete && ( - } - action={ - - } - /> - )} + {!walletDetails?.taxForm.isSetupComplete && ( + + } + action={ + + } + /> + )} + )} diff --git a/src/apps/wallet/src/lib/components/index.ts b/src/apps/wallet/src/lib/components/index.ts index 6f213563b..904a3ade8 100644 --- a/src/apps/wallet/src/lib/components/index.ts +++ b/src/apps/wallet/src/lib/components/index.ts @@ -2,3 +2,4 @@ export * from './setting-section' export * from './info-row' export * from './chip' export * from './filter-bar' +export * from './payout-guard' diff --git a/src/apps/wallet/src/lib/components/payout-guard.tsx b/src/apps/wallet/src/lib/components/payout-guard.tsx new file mode 100644 index 000000000..d729c4138 --- /dev/null +++ b/src/apps/wallet/src/lib/components/payout-guard.tsx @@ -0,0 +1,17 @@ +import { FC, PropsWithChildren } from 'react' + +import { UserProfile } from '~/libs/core' + +import { useCanViewPayout } from '../hooks/use-can-view-payout' + +export interface PayoutGuardProps { + profile?: UserProfile +} + +export const PayoutGuard: FC = props => { + const canViewPayout = useCanViewPayout(props.profile) + + return ( + <>{canViewPayout && props.children} + ) +} diff --git a/src/apps/wallet/src/lib/hooks/use-can-view-payout.tsx b/src/apps/wallet/src/lib/hooks/use-can-view-payout.tsx new file mode 100644 index 000000000..9dbf46c6a --- /dev/null +++ b/src/apps/wallet/src/lib/hooks/use-can-view-payout.tsx @@ -0,0 +1,9 @@ +import { useMemo } from 'react' + +import { UserProfile } from '~/libs/core' + +export const useCanViewPayout = (profile?: UserProfile): boolean => useMemo(() => ( + !!profile + && !profile.email.toLowerCase() + .includes('@wipro.com') +), [profile])