other plan links

jay-hodgson · Sep 23, 2024 · 800ea7e · 800ea7e
1 parent b82ccf9
commit 800ea7e
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 7 deletions.
diff --git a/packages/synapse-react-client/src/components/SynapseFooter/SynapseFooter.tsx b/packages/synapse-react-client/src/components/SynapseFooter/SynapseFooter.tsx
@@ -12,6 +12,7 @@ import { ReactComponent as Facebook } from '../../assets/homepage/facebook.svg'
 import { ReactComponent as Instagram } from '../../assets/homepage/instagram.svg'
 import { ReactComponent as Youtube } from '../../assets/homepage/youtube.svg'
 import ExperimentalMode from '../ExperimentalMode'
+import { PLANS_LINK } from '../SynapseHomepageV2/SynapseHomepageNavBar'
 
 export type SynapseFooterProps = {
   portalVersion: string
@@ -112,9 +113,9 @@ export const SynapseFooter: React.FunctionComponent<SynapseFooterProps> = ({
                     },
                   },
                   {
-                    text: 'Pricing',
+                    text: 'Plans',
                     props: {
-                      href: 'https://help.synapse.org/docs/Sage-Offerings.2965078125.html',
+                      href: PLANS_LINK,
                     },
                   },
                   {

diff --git a/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapseHomepageNavBar.tsx b/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapseHomepageNavBar.tsx
@@ -19,6 +19,8 @@ import { useSynapseContext } from '../../utils'
 import SageResourcesPopover from '../SageResourcesPopover'
 
 const LOGIN_LINK = '/LoginPlace:0'
+const HOMEPAGE_LINK = '/Home:x'
+export const PLANS_LINK = '/Plans:0'
 const DASHBOARD_LINK = '/Profile:v/projects/all'
 
 const navTextButtonSx: SxProps = {
@@ -99,9 +101,11 @@ export const SynapseHomepageNavBar: React.FunctionComponent<
       }}
     >
       {/* Logo */}
-      <SynapseFullLogo
-        textColor={(theme.palette.primary as ColorPartial)[900]!}
-      />
+      <a onClick={() => gotoPlace(HOMEPAGE_LINK)}>
+        <SynapseFullLogo
+          textColor={(theme.palette.primary as ColorPartial)[900]!}
+        />
+      </a>
       {/* Menu Items */}
       {/* Desktop nav bar, and a mobile hamburger dropdown menu nav bar that contain the same options */}
       {!isSmallView && (
@@ -113,6 +117,9 @@ export const SynapseHomepageNavBar: React.FunctionComponent<
             gap: '20px',
           }}
         >
+          <Button sx={navTextButtonSx} onClick={() => gotoPlace(PLANS_LINK)}>
+            Plans
+          </Button>
           <Button
             sx={navTextButtonSx}
             onClick={event => setPortalResourcesAnchorEl(event.currentTarget)}
@@ -226,6 +233,14 @@ export const SynapseHomepageNavBar: React.FunctionComponent<
             </IconButton>
             <StyledMenuItem
               sx={{ mt: '70px' }}
+              onClick={() => {
+                gotoPlace(PLANS_LINK)
+                handleCloseMobileMenu()
+              }}
+            >
+              Plans
+            </StyledMenuItem>
+            <StyledMenuItem
               onClick={event => {
                 setPortalResourcesAnchorEl(event.currentTarget)
                 handleCloseMobileMenu()

diff --git a/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapsePlansPage.tsx b/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapsePlansPage.tsx
@@ -40,15 +40,15 @@ export const SynapsePlansPage: React.FunctionComponent<
               ...homepageBodyText,
               pt: {
                 xs: '20px',
-                lg: '48px',
+                md: '48px',
               },
             }}
           >
             Sage offers multiple service plans to help you with your data
             sharing needs including NIH Data Management and Sharing plans.
           </Typography>
         </Box>
-        <Box sx={{ py: { xs: '30px', lg: '60px' } }}>
+        <Box sx={{ py: { xs: '30px', md: '60px' } }}>
           <SynapsePlans />
         </Box>
       </Box>

diff --git a/packages/synapse-react-client/src/components/SynapseNavDrawer/SynapseNavDrawer.tsx b/packages/synapse-react-client/src/components/SynapseNavDrawer/SynapseNavDrawer.tsx
@@ -19,6 +19,7 @@ import { CreateProjectModal } from '../CreateProjectModal/CreateProjectModal'
 import IconSvg, { IconName } from '../IconSvg/IconSvg'
 import UserCard from '../UserCard/UserCard'
 import { useOneSageURL } from '../../utils/hooks/useOneSageURL'
+import { PLANS_LINK } from '../SynapseHomepageV2/SynapseHomepageNavBar'
 
 export type SynapseNavDrawerProps = {
   initIsOpen?: boolean
@@ -549,6 +550,14 @@ export const SynapseNavDrawer: React.FunctionComponent<
                   >
                     Getting Started
                   </a>
+                  <a
+                    className="SRC-whiteText"
+                    onClick={() => gotoPlace(PLANS_LINK)}
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
+                    Plans
+                  </a>
                   <a
                     className="SRC-whiteText"
                     href="https://help.synapse.org/docs/"