Merge pull request #930 from AlexsLemonade/avrohom/923-closing-call-f…

…or-contributions

923 - Closing call for contributions

client/next.config.js

@@ -21,7 +21,8 @@ module.exports = () => {
     PRIVACY_POLICY_RELEASE: process.env.PRIVACY_POLICY_RELEASE,
     TOS_RELEASE: process.env.TOS_RELEASE,
     BANNER_STATE: process.env.BANNER_STATE,
-    BANNER_CONTENT: process.env.BANNER_CONTENT
+    BANNER_CONTENT: process.env.BANNER_CONTENT,
+    CONTRIBUTIONS_OPEN: process.env.CONTRIBUTIONS_OPEN
   }
 
   const stageEnv = {
@@ -35,7 +36,8 @@ module.exports = () => {
     PRIVACY_POLICY_RELEASE: process.env.STAGE_PRIVACY_POLICY_RELEASE,
     TOS_RELEASE: process.env.STAGE_TOS_RELEASE,
     BANNER_STATE: process.env.STAGE_BANNER_STATE,
-    BANNER_CONTENT: process.env.STAGE_BANNER_CONTENT
+    BANNER_CONTENT: process.env.STAGE_BANNER_CONTENT,
+    CONTRIBUTIONS_OPEN: process.env.STAGE_CONTRIBUTIONS_OPEN
   }
 
   const env = isProduction ? productionEnv : stageEnv

client/src/components/ContributePhaseOutBanner.js → client/src/components/ContributeClosedCard.js

@@ -3,7 +3,7 @@ import { Box, Button, Heading, Paragraph } from 'grommet'
 import { WarningCard } from 'components/WarningCard'
 import { config } from 'config'
 
-export const ContributePhaseOutBanner = () => (
+export const ContributeClosedCard = () => (
   <WarningCard label="We are NOT currently accepting contributions">
     <Box
       align="center"
@@ -34,4 +34,4 @@ export const ContributePhaseOutBanner = () => (
   </WarningCard>
 )
 
-export default ContributePhaseOutBanner
+export default ContributeClosedCard

client/src/components/Layout.js

@@ -52,10 +52,11 @@ export const Layout = ({ children }) => {
     '/terms-of-use'
   ]
 
+  const isContributeOpen = process.env.CONTRIBUTIONS_OPEN === 'ON'
+
   // show the contributeBanner
-  const showContributeBanner = !excludeContributeBanner.includes(
-    router.pathname
-  )
+  const showContributeBanner =
+    isContributeOpen && !excludeContributeBanner.includes(router.pathname)
 
   const showEnvarBanner = process.env.BANNER_STATE === 'ON'
 

client/src/config/index.js

@@ -35,6 +35,8 @@ export const config = {
     help: 'https://scpca.readthedocs.io',
     contribute_pdf: 'contributing-guidelines.pdf',
     contribute_hsform: 'https://share.hsforms.com/1V1loS-_hTMi3-_Lz107AcA336z0',
+    contribute_interest_hsform:
+      'https://share.hsforms.com/1Fs_Z94OzS7abnh5qEieOTA336z0',
     recruitment_hsform:
       'https://share.hsforms.com/19if2XeF2Rl2YkWxppHW-HQ336z0',
     alsfTwitter: 'https://twitter.com/alexslemonade',

client/src/pages/contribute.js

@@ -10,10 +10,12 @@ import {
 } from 'grommet'
 import { Button } from 'components/Button'
 import { ContributeDownloadPDFButton } from 'components/ContributeDownloadPDFButton'
+import { ContributeClosedCard } from 'components/ContributeClosedCard'
 import { Link } from 'components/Link'
 import { MarkdownPage } from 'components/MarkdownPage'
 import { config } from 'config'
 import contributionGuidelines from 'config/contribution-guidelines.md'
+import contributionGuidelinesClosed from 'config/contribution-guidelines-closed.md'
 import styled from 'styled-components'
 
 const TableHeader = styled(GrommetTableHeader)`
@@ -27,19 +29,23 @@ const TableRow = styled(GrommetTableRow)`
   box-shadow: none !important;
 `
 
-const IntakeFormLink = () => (
+const FormLinkButton = ({ href, label }) => (
   <Button
-    href={config.links.contribute_hsform}
-    label="Complete the Intake Form"
     margin={{ top: 'small', bottom: 'medium' }}
     target="_blank"
+    href={href}
+    label={label}
     primary
   />
 )
 
 export const Contribute = () => {
   const headingMargin = { top: '24px', bottom: 'small' }
   const listMargin = { bottom: 'medium', horizontal: 'medium' }
+  const isOpen = process.env.CONTRIBUTIONS_OPEN === 'ON'
+  const markdown = isOpen
+    ? contributionGuidelines
+    : contributionGuidelinesClosed
 
   const components = {
     h1: {
@@ -86,7 +92,18 @@ export const Contribute = () => {
       }
     },
     IntakeFormLink: {
-      component: IntakeFormLink
+      component: FormLinkButton,
+      props: {
+        href: config.links.contribute_hsform,
+        label: 'Complete the Intake Form'
+      }
+    },
+    InterestFormLink: {
+      component: FormLinkButton,
+      props: {
+        href: config.links.contribute_interest_hsform,
+        label: 'Complete the Interest Form'
+      }
     },
     a: {
       component: Link
@@ -135,12 +152,16 @@ export const Contribute = () => {
 
   return (
     <>
-      <Box alignSelf="end" margin={{ top: 'large' }}>
-        <ContributeDownloadPDFButton />
-      </Box>
+      {isOpen ? (
+        <Box alignSelf="end" margin={{ top: 'large' }}>
+          <ContributeDownloadPDFButton />
+        </Box>
+      ) : (
+        <ContributeClosedCard />
+      )}
       <MarkdownPage
         components={components}
-        markdown={contributionGuidelines}
+        markdown={markdown}
         width="xlarge"
       />
     </>

docker-compose.env

@@ -20,3 +20,4 @@ STAGE_HUBSPOT_EMAIL_LIST_ID=fd65bb4c-c23b-450a-859e-1195b639930d
 STAGE_HUBSPOT_SURVEY_LIST_ID=76e72ab7-685f-43ad-8e6f-f0be6cba4f5e
 STAGE_BANNER_STATE=ON
 STAGE_BANNER_CONTENT=Test Banner Content \n With multiple lines
+STAGE_CONTRIBUTIONS_OPEN=OFF

docker-compose.yml

@@ -45,6 +45,7 @@ services:
       STAGE_HUBSPOT_SURVEY_LIST_ID: '${STAGE_HUBSPOT_SURVEY_LIST_ID}'
       STAGE_BANNER_STATE: '${STAGE_BANNER_STATE}'
       STAGE_BANNER_CONTENT: '${STAGE_BANNER_CONTENT}'
+      STAGE_CONTRIBUTIONS_OPEN: '${STAGE_CONTRIBUTIONS_OPEN}'
     command: >
       bash -c 'cd /home/user/code &&
                yarn set version 3.6.3 &&