Skip to content
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

chore: remove contact us message for team users that want to downgrade #9903

Merged
merged 1 commit into from
Jun 28, 2024
Merged

chore: remove contact us message for team users that want to downgrade #9903

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
53 changes: 30 additions & 23 deletions packages/client/modules/userDashboard/components/OrgBilling/OrgBillingDangerZone.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {useFragment} from 'react-relay'
import {OrgBillingDangerZone_organization$key} from '~/__generated__/OrgBillingDangerZone_organization.graphql'
import ArchiveOrganization from '~/modules/teamDashboard/components/ArchiveTeam/ArchiveOrganization'
import Panel from '../../../../components/Panel/Panel'
import useRouter from '../../../../hooks/useRouter'
import {PALETTE} from '../../../../styles/paletteV3'
import {ElementWidth, Layout} from '../../../../types/constEnums'

Expand All @@ -24,25 +25,6 @@ const PanelRow = styled('div')({
textAlign: 'center'
})

const Unsubscribe = styled('div')({
alignItems: 'center',
color: PALETTE.SLATE_700,
display: 'flex',
justifyContent: 'center',
'& a': {
alignItems: 'center',
color: PALETTE.SKY_500,
display: 'flex',
marginLeft: 8,
'& > u': {
textDecoration: 'none'
},
'&:hover > u, &:focus > u': {
textDecoration: 'underline'
}
}
})

const StyledPanel = styled(Panel)<{isWide: boolean}>(({isWide}) => ({
maxWidth: isWide ? ElementWidth.PANEL_WIDTH : 'inherit'
}))
Expand All @@ -58,33 +40,58 @@ const OrgBillingDangerZone = (props: Props) => {
graphql`
fragment OrgBillingDangerZone_organization on Organization {
...ArchiveOrganization_organization
id
isBillingLeader
billingTier
}
`,
organizationRef
)
const {isBillingLeader, billingTier} = organization
const {history} = useRouter()
const {id, isBillingLeader, billingTier} = organization
if (!isBillingLeader) return null
const isStarter = billingTier === 'starter'
const isTeam = billingTier === 'team'

const handleDowngrade = () => {
history.push(`/me/organizations/${id}/billing`)
}

return (
<StyledPanel isWide={isWide} label='Danger Zone'>
<PanelRow>
{isStarter ? (
<ArchiveOrganization organization={organization} />
) : isTeam ? (
<div className='flex items-center justify-center text-slate-700'>
<span>{'Need to cancel? '}</span>
<a
onClick={handleDowngrade}
title='Downgrade'
className='ml-1 mr-1 flex items-center text-sky-500'
>
<u className='no-underline hover:cursor-pointer hover:underline focus:underline'>
{'Downgrade'}
</u>
</a>
<span>{' to the Starter tier'}</span>
</div>
) : (
<Unsubscribe>
<div className='flex items-center justify-center text-slate-700'>
<span>{'Need to cancel? It’s painless. '}</span>
<a
href='mailto:[email protected]?subject=Instant Unsubscribe from Team Plan'
title='Instant Unsubscribe from Team Plan'
className='ml-1 mr-1 flex items-center text-sky-500'
>
<u>{'Contact us'}</u>
<u className='no-underline hover:cursor-pointer hover:underline focus:underline'>
{'Contact us'}
</u>
<EnvelopeIcon>
<EmailIcon />
</EnvelopeIcon>
</a>
</Unsubscribe>
</div>
)}
</PanelRow>
</StyledPanel>
Expand Down
Loading