From 7e90ac2d1ba2144271779982272160c7c1b0df33 Mon Sep 17 00:00:00 2001
From: Nick O'Ferrall <nickoferrall@gmail.com>
Date: Fri, 28 Jun 2024 19:40:15 +0100
Subject: [PATCH] chore: remove contact us message for team users that want to
 downgrade (#9903)

---
 .../OrgBilling/OrgBillingDangerZone.tsx       | 53 +++++++++++--------
 1 file changed, 30 insertions(+), 23 deletions(-)

diff --git a/packages/client/modules/userDashboard/components/OrgBilling/OrgBillingDangerZone.tsx b/packages/client/modules/userDashboard/components/OrgBilling/OrgBillingDangerZone.tsx
index 4a8eafe5035..6b9761f088a 100644
--- a/packages/client/modules/userDashboard/components/OrgBilling/OrgBillingDangerZone.tsx
+++ b/packages/client/modules/userDashboard/components/OrgBilling/OrgBillingDangerZone.tsx
@@ -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'
 
@@ -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'
 }))
@@ -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:love@parabol.co?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>