Merge pull request #270 from linesbetween/Kevin1192-scroll1

Add feature toggle and update readme

.env.example

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

README.md

@@ -15,3 +15,11 @@ Join the Slack channel [#windfall-elimination](https://www.codeforboston.org/) f
 ## Launching Gatsby Site
 
 Run `npm install && npm start` to launch the project.
+
+- 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

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

src/layouts/index.tsx

@@ -8,6 +8,7 @@ import { ProgressTracker } from "../components/progress-tracker";
 import { ProgressTrackerMobile} from "../components/progress-tracker-mobile";
 import UserStateManager from "../library/user-state-manager";
 import { breakPoints } from "../constants";
+import {gatsbyShowFutureEarningsPage} from "../constants/config"; 
 
 const Wrapper = styled("div")`
   overflow: hidden;
@@ -67,16 +68,14 @@ const Main = styled("main")`
 /* There must be an entry for each of these in indexToSessionStorageKeys
     of progress-tracker.tsx */
 
-const showFutureEarningsPage = process.env.GATSBY_SHOW_FUTURE_EARNINGS_PAGE;
-
 const LINKSPATH = [
   {path: "/", label: "Home"},
   {path: "/prescreen-1a/", label: "Background"},
   {path: "/prescreen-1b/", label: "Earnings"},
   {path: "/prescreen-1c/", label: "Employment Status"}
 ];
 
-if (showFutureEarningsPage === "true") {
+if (gatsbyShowFutureEarningsPage) {
   LINKSPATH.push({path: "/prescreen-1d/", label: "Future Earnings"});
 }
 

src/library/pia/index.ts

@@ -1,4 +1,5 @@
 import { PiaFormat } from "./pia-format";
+import {gatsbyShowFutureEarningsPage} from "../../constants/config";
 import {
   UserProfile,
   EarningsRecord,
@@ -92,8 +93,7 @@ export async function finalCalculation(
     .setFirstEarningYear(mapFirstEarningYear) //Required since we added line8 and line40 support
     .setLastEarningYear(expectedLastEarningYear || mapLastEarningYear) //Required since we added line8 and line40 support
 
-  const showFutureEarningsPage = process.env.GATSBY_SHOW_FUTURE_EARNINGS_PAGE;
-  if (showFutureEarningsPage === "true") {
+  if (gatsbyShowFutureEarningsPage) {
     // console.log('Show future earnings');
     piaFormat
       .setAvgWageIncreaseAssumption(awiTrendSelection ?? undefined)

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;
@@ -67,10 +68,12 @@ class Prescreen1b extends React.Component<Prescreen1bProps> {
   }
 
   scrollToElement(ref) {
+    if (gatsbyScrollWhenFinish) {
       setTimeout(() => {
         ref.current.scrollIntoView({ behavior: 'smooth', block: 'start'  });
       }, 100)
     }
+  }
 
   showFileUpload() {
     const {