Skip to content

PM-1257 - hide payout tab & setup details for wipro users #1084

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: PM-959_tc-finance-integration
Choose a base branch
from
Open

PM-1257 - hide payout tab & setup details for wipro users #1084

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
98007f9
PM-1257 - hide payout tab & setup details for wipro users
vas3a May 22, 2025
7a38343
lint fixes
vas3a May 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 12 additions & 2 deletions src/apps/wallet/src/home/tabs/WalletTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -16,12 +19,17 @@ interface WalletHomeProps {

const WalletTabs: FC<WalletHomeProps> = (props: WalletHomeProps) => {
const { hash }: { hash: string } = useLocation()
const canViewPayout = useCanViewPayout(props.profile)

const activeTabHash: WalletTabViews = useMemo<WalletTabViews>(() => getTabIdFromHash(hash), [hash])

const [activeTab, setActiveTab]: [WalletTabViews, Dispatch<SetStateAction<WalletTabViews>>]
= useState<WalletTabViews>(activeTabHash)

const tabsConfig = useMemo(() => WalletTabsConfig.filter(tab => (
tab.id !== WalletTabViews.payout || canViewPayout
)), [canViewPayout])

useEffect(() => {
setActiveTab(activeTabHash)
}, [activeTabHash])
Expand All @@ -33,7 +41,7 @@ const WalletTabs: FC<WalletHomeProps> = (props: WalletHomeProps) => {

return (
<div className={styles.container}>
<TabsNavbar defaultActive={activeTab} onChange={handleTabChange} tabs={WalletTabsConfig} />
<TabsNavbar defaultActive={activeTab} onChange={handleTabChange} tabs={tabsConfig} />

<PageTitle>
{[
Expand All @@ -47,7 +55,9 @@ const WalletTabs: FC<WalletHomeProps> = (props: WalletHomeProps) => {

{activeTab === WalletTabViews.home && <HomeTab profile={props.profile} />}

{activeTab === WalletTabViews.payout && <PayoutTab profile={props.profile} />}
<PayoutGuard profile={props.profile}>
{activeTab === WalletTabViews.payout && <PayoutTab profile={props.profile} />}
</PayoutGuard>
</div>
)
}
Expand Down
122 changes: 65 additions & 57 deletions src/apps/wallet/src/home/tabs/home/HomeTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -17,7 +17,8 @@ interface HomeTabProps {
profile: UserProfile
}

const HomeTab: FC<HomeTabProps> = () => {
const HomeTab: FC<HomeTabProps> = props => {

const { data: walletDetails, isLoading, error }: WalletDetailsResponse = useWalletDetails()
const [balanceSum, setBalanceSum] = useState(0)

Expand Down Expand Up @@ -57,63 +58,70 @@ const HomeTab: FC<HomeTabProps> = () => {
}
/>

{walletDetails.withdrawalMethod.isSetupComplete && walletDetails.taxForm.isSetupComplete && (
<InfoRow
title='Est. Payment Fees and Tax Withholding %'
// eslint-disable-next-line max-len
value={`Fee: ${nullToZero(walletDetails.estimatedFees)} USD / Tax Withholding: ${nullToZero(walletDetails.taxWithholdingPercentage)}%`}
action={
<LinkButton
label='ADJUST YOUR PAYOUT SETTINGS'
iconToRight
icon={IconOutline.ArrowRightIcon}
size='md'
link
to='#payout'
/>
}
/>
)}
<PayoutGuard profile={props.profile}>
{walletDetails.withdrawalMethod.isSetupComplete
&& walletDetails.taxForm.isSetupComplete && (
<InfoRow
title='Est. Payment Fees and Tax Withholding %'
// eslint-disable-next-line max-len
value={`Fee: ${nullToZero(walletDetails.estimatedFees)} USD / Tax Withholding: ${nullToZero(walletDetails.taxWithholdingPercentage)}%`}
action={
<LinkButton
label='ADJUST YOUR PAYOUT SETTINGS'
iconToRight
icon={IconOutline.ArrowRightIcon}
size='md'
link
to='#payout'
/>
}
/>
)}

{!walletDetails?.withdrawalMethod.isSetupComplete && (
<InfoRow
title='Withdrawal Method'
value={
walletDetails?.withdrawalMethod.isSetupComplete ? (
'Your preferred method'
) : (
<Chip text='Setup Required' />
)
}
action={
<LinkButton
label='SETUP WITHDRAWAL METHOD'
iconToRight
icon={IconOutline.ArrowRightIcon}
size='md'
link
to='#payout'
/>
}
/>
)}
{!walletDetails?.withdrawalMethod.isSetupComplete && (
<InfoRow
title='Withdrawal Method'
value={
walletDetails?.withdrawalMethod.isSetupComplete ? (
'Your preferred method'
) : (
<Chip text='Setup Required' />
)
}
action={
<LinkButton
label='SETUP WITHDRAWAL METHOD'
iconToRight
icon={IconOutline.ArrowRightIcon}
size='md'
link
to='#payout'
/>
}
/>
)}

{!walletDetails?.taxForm.isSetupComplete && (
<InfoRow
title='Tax Form'
value={walletDetails?.taxForm.isSetupComplete ? 'All set' : <Chip text='Setup Required' />}
action={
<LinkButton
label='COMPLETE TAX FORM'
iconToRight
icon={IconOutline.ArrowRightIcon}
size='md'
link
to='#payout'
/>
}
/>
)}
{!walletDetails?.taxForm.isSetupComplete && (
<InfoRow
title='Tax Form'
value={
walletDetails?.taxForm.isSetupComplete
? 'All set'
: <Chip text='Setup Required' />
}
action={
<LinkButton
label='COMPLETE TAX FORM'
iconToRight
icon={IconOutline.ArrowRightIcon}
size='md'
link
to='#payout'
/>
}
/>
)}
</PayoutGuard>
</div>
)}
</div>
Expand Down
1 change: 1 addition & 0 deletions src/apps/wallet/src/lib/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@ export * from './setting-section'
export * from './info-row'
export * from './chip'
export * from './filter-bar'
export * from './payout-guard'
17 changes: 17 additions & 0 deletions src/apps/wallet/src/lib/components/payout-guard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<PayoutGuardProps & PropsWithChildren> = props => {
const canViewPayout = useCanViewPayout(props.profile)

return (
<>{canViewPayout && props.children}</>
)
}
9 changes: 9 additions & 0 deletions src/apps/wallet/src/lib/hooks/use-can-view-payout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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])