Feature toggle for scroll-when-pressed

.env.example

@@ -1 +1,2 @@
-GATSBY_SHOW_FUTURE_EARNINGS_PAGE=false
+GATSBY_SHOW_FUTURE_EARNINGS_PAGE=false
+GATSBY_SCROLL_WHEN_FINISH=false

README.md

@@ -16,6 +16,10 @@ Join the Slack channel [#windfall-elimination](https://www.codeforboston.org/) f
 
 Run `npm install && npm start` to launch the project.
 
-- To turn on feature toggle that enables "future earnings" page.  
-   - In Windows, run `$env:GATSBY_SHOW_FUTURE_EARNINGS_PAGE = 'true'; npm start` 
-   - In Mac and Linux, run `GATSBY_SHOW_FUTURE_EARNINGS_PAGE=true npm start`
+- To turn on feature toggle that enables features.  
+   - In Windows, run `$env:<feature keyword> = 'true'; npm start` 
+   - In Mac and Linux, run `<feature keyword>=true npm start`
+
+- Feature keyword list
+   - `GATSBY_SHOW_FUTURE_EARNINGS_PAGE` : show future earnings page in left side bar and main page
+   - `GATSBY_SCROLL_WHEN_FINISH` : scroll down when finish each step in prescreen-1b

src/constants/config.tsx

@@ -1 +1,2 @@
-export const gatsbyShowFutureEarningsPage = process.env.GATSBY_SHOW_FUTURE_EARNINGS_PAGE === "true" || false;
+export const gatsbyShowFutureEarningsPage = process.env.GATSBY_SHOW_FUTURE_EARNINGS_PAGE === "true" || false;
+export const gatsbyScrollWhenFinish = process.env.GATSBY_SCROLL_WHEN_FINISH === "true" || false;

src/pages/prescreen-1b.tsx

@@ -25,6 +25,7 @@ import {
   useUserStateActions,
 } from "../library/user-state-actions-context";
 import { PiaFormat } from "../library/pia/pia-format";
+import { gatsbyScrollWhenFinish } from "../constants/config";
 
 export const SsaImage = styled("img")`
   border: 1px solid #dddddd;
@@ -58,8 +59,20 @@ interface Prescreen1bProps {
 class Prescreen1b extends React.Component<Prescreen1bProps> {
   constructor(props: Prescreen1bProps) {
     super(props);
+    this.earningsSelectRef = React.createRef();
+    this.howToRef = React.createRef();
+    this.earningsRecordRef = React.createRef();
     this.showFileUpload = this.showFileUpload.bind(this);
     this.showManualTable = this.showManualTable.bind(this);
+    this.scrollToElement = this.scrollToElement.bind(this);
+  }
+
+  scrollToElement(ref) {
+    if (gatsbyScrollWhenFinish) {
+      setTimeout(() => {
+        ref.current.scrollIntoView({ behavior: 'smooth', block: 'start'  });
+      }, 100)
+    }
   }
 
   showFileUpload() {
@@ -146,6 +159,7 @@ class Prescreen1b extends React.Component<Prescreen1bProps> {
                     name="haveEarnings"
                     value="true"
                     onChange={() => setHaveEarnings(true)}
+                    onClick={() => this.scrollToElement(this.earningsSelectRef)} 
                     checked={haveEarnings === true}
                   />
                   <LabelText>Yes</LabelText>
@@ -156,6 +170,7 @@ class Prescreen1b extends React.Component<Prescreen1bProps> {
                     name="haveEarnings"
                     value="false"
                     onChange={() => setHaveEarnings(false)}
+                    onClick={() => this.scrollToElement(this.earningsSelectRef)}
                     checked={haveEarnings === false}
                   />
                   <LabelText>No</LabelText>
@@ -172,7 +187,7 @@ class Prescreen1b extends React.Component<Prescreen1bProps> {
               of your earnings record to use for this question.
             </Glossary>
           </CardGlossaryContainer>
-
+          <div ref={this.earningsSelectRef}> 
           {haveEarnings === true ? (
             <Card>
               <QuestionText>
@@ -184,6 +199,7 @@ class Prescreen1b extends React.Component<Prescreen1bProps> {
                   name="earningsFormat"
                   value={EarningsEnum.XML}
                   onChange={() => setEarningsFormat(EarningsEnum.XML)}
+                  onClick={()=> this.scrollToElement(this.earningsRecordRef)}
                   checked={earningsFormat === EarningsEnum.XML}
                 />
                 <LabelText>XML file (MySocialSecurity)</LabelText>
@@ -194,6 +210,7 @@ class Prescreen1b extends React.Component<Prescreen1bProps> {
                   name="earningsFormat"
                   value={EarningsEnum.PDF}
                   onChange={() => setEarningsFormat(EarningsEnum.PDF)}
+                  onClick={()=> this.scrollToElement(this.earningsRecordRef)}
                   checked={earningsFormat === EarningsEnum.PDF}
                 />
                 <LabelText>PDF (MySocialSecurity)</LabelText>
@@ -204,6 +221,7 @@ class Prescreen1b extends React.Component<Prescreen1bProps> {
                   name="earningsFormat"
                   value={EarningsEnum.PDFPRINT}
                   onChange={() => setEarningsFormat(EarningsEnum.PDFPRINT)}
+                  onClick={()=> this.scrollToElement(this.earningsRecordRef)}
                   checked={earningsFormat === EarningsEnum.PDFPRINT}
                 />
                 <LabelText>PDF (scanned from print)</LabelText>
@@ -214,6 +232,7 @@ class Prescreen1b extends React.Component<Prescreen1bProps> {
                   name="earningsFormat"
                   value={EarningsEnum.PAPER}
                   onChange={() => setEarningsFormat(EarningsEnum.PAPER)}
+                  onClick={()=> this.scrollToElement(this.earningsRecordRef)} 
                   checked={earningsFormat === EarningsEnum.PAPER}
                 />
                 <LabelText>Paper (mailed from SSA)</LabelText>
@@ -232,6 +251,7 @@ class Prescreen1b extends React.Component<Prescreen1bProps> {
                   name="haveSSAAccount"
                   value="true"
                   onChange={() => setHaveSSAAccount(true)}
+                  onClick={() => this.scrollToElement(this.howToRef)}
                   checked={haveSSAAccount === true}
                 />
                 <LabelText>Yes</LabelText>
@@ -242,12 +262,15 @@ class Prescreen1b extends React.Component<Prescreen1bProps> {
                   name="haveSSAAccount"
                   value="false"
                   onChange={() => setHaveSSAAccount(false)}
+                  onClick={() => this.scrollToElement(this.howToRef)}
                   checked={haveSSAAccount === false}
                 />
                 <LabelText>No</LabelText>
               </AnswerBox>
             </Card>
           ) : null}
+          </div>
+          <div ref={this.howToRef}>
           {haveEarnings === false && haveSSAAccount === true ? (
             <HowToContainer>
               <Card>
@@ -274,6 +297,8 @@ class Prescreen1b extends React.Component<Prescreen1bProps> {
               </Card>
             </HowToContainer>
           ) : null}
+
+          <div ref={this.earningsRecordRef}>
           {this.showFileUpload() ? (
             <HowToContainer>
               <Card>
@@ -317,7 +342,8 @@ class Prescreen1b extends React.Component<Prescreen1bProps> {
               </Card>
             </div>
           )}
-
+          </div>
+
           {haveEarnings === false && haveSSAAccount === false ? (
             <>
               <HowToContainer>
@@ -353,7 +379,9 @@ class Prescreen1b extends React.Component<Prescreen1bProps> {
                 </Card>
               </HowToContainer>
             </>
-          ) : null}
+          ) : null
+          }
+          </div>
         </ContentContainer>
       </React.Fragment>
     );