From 800ea7efd979f20c46c94ea02d2b769d78cb7084 Mon Sep 17 00:00:00 2001
From: Jay Hodgson <jay.hodgson@sagebase.org>
Date: Mon, 23 Sep 2024 16:18:48 -0700
Subject: [PATCH] other plan links

---
 .../SynapseFooter/SynapseFooter.tsx           |  5 +++--
 .../SynapseHomepageNavBar.tsx                 | 21 ++++++++++++++++---
 .../SynapseHomepageV2/SynapsePlansPage.tsx    |  4 ++--
 .../SynapseNavDrawer/SynapseNavDrawer.tsx     |  9 ++++++++
 4 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/packages/synapse-react-client/src/components/SynapseFooter/SynapseFooter.tsx b/packages/synapse-react-client/src/components/SynapseFooter/SynapseFooter.tsx
index b6cf216fd5..375541361d 100644
--- 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
index cf14ba5581..a1245500d0 100644
--- 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
index 8ea6672e64..fd39eabcf1 100644
--- a/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapsePlansPage.tsx
+++ b/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapsePlansPage.tsx
@@ -40,7 +40,7 @@ export const SynapsePlansPage: React.FunctionComponent<
               ...homepageBodyText,
               pt: {
                 xs: '20px',
-                lg: '48px',
+                md: '48px',
               },
             }}
           >
@@ -48,7 +48,7 @@ export const SynapsePlansPage: React.FunctionComponent<
             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
index fdaafc38a2..a1bd898f66 100644
--- 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/"