Scroll to the plans section on highlight

ParabolInc · Nov 3, 2024 · b91fab7 · b91fab7
1 parent fe72847
commit b91fab7
Showing 1 changed file with 28 additions and 15 deletions.
diff --git a/packages/client/modules/userDashboard/components/OrgBilling/OrgPlans.tsx b/packages/client/modules/userDashboard/components/OrgBilling/OrgPlans.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
 import graphql from 'babel-plugin-relay/macro'
-import React from 'react'
+import React, {useEffect, useRef} from 'react'
 import {useFragment} from 'react-relay'
 import useBreakpoint from '~/hooks/useBreakpoint'
 import {Breakpoint} from '~/types/constEnums'
@@ -16,7 +16,7 @@ import {EnterpriseBenefits, StarterBenefits, TeamBenefits} from '../../../../uti
 import DowngradeModal from './DowngradeModal'
 import OrgPlan from './OrgPlan'
 
-const StyledPanel = styled(Panel)({
+const StyledPanelContainer = styled('div')({
   maxWidth: ElementWidth.PANEL_WIDTH,
   paddingBottom: 16
 })
@@ -69,6 +69,7 @@ const OrgPlans = (props: Props) => {
   const {organizationRef, handleSelectTeamPlan, hasSelectedTeamPlan} = props
   const searchParams = new URLSearchParams(location.search)
   const highlightOrgAdmin = searchParams.get('highlightOrgAdmin') === 'true'
+  const plansRef = useRef<HTMLDivElement>(null)
   const organization = useFragment(
     graphql`
       fragment OrgPlans_organization on Organization {
@@ -85,6 +86,14 @@ const OrgPlans = (props: Props) => {
   const {id: orgId, billingTier} = organization
   const isTablet = useBreakpoint(Breakpoint.FUZZY_TABLET)
 
+  useEffect(() => {
+    if (highlightOrgAdmin) {
+      setTimeout(() => {
+        plansRef.current?.scrollIntoView({behavior: 'smooth', block: 'center'})
+      }, 100)
+    }
+  }, [highlightOrgAdmin])
+
   const plans = [
     {
       tier: 'starter',
@@ -134,19 +143,23 @@ const OrgPlans = (props: Props) => {
 
   return (
     <>
-      <StyledPanel label='Plans'>
-        <StyledRow isTablet={isTablet}>
-          {plans.map((plan) => (
-            <OrgPlan
-              key={plan.tier}
-              plan={plan}
-              isTablet={isTablet}
-              handleClick={handleClick}
-              highlightDetailIndex={highlightOrgAdmin && plan.tier === 'enterprise' ? 2 : undefined}
-            />
-          ))}
-        </StyledRow>
-      </StyledPanel>
+      <StyledPanelContainer ref={plansRef}>
+        <Panel label='Plans'>
+          <StyledRow isTablet={isTablet}>
+            {plans.map((plan) => (
+              <OrgPlan
+                key={plan.tier}
+                plan={plan}
+                isTablet={isTablet}
+                handleClick={handleClick}
+                highlightDetailIndex={
+                  highlightOrgAdmin && plan.tier === 'enterprise' ? 2 : undefined
+                }
+              />
+            ))}
+          </StyledRow>
+        </Panel>
+      </StyledPanelContainer>
       {modalPortal(<DowngradeModal closeModal={closeModal} organizationRef={organization} />)}
     </>
   )