From b1903c34b6e77c4f8e3a7f5ebaf657d52bfccad4 Mon Sep 17 00:00:00 2001 From: Kevin <691208yz@gmail.com> Date: Mon, 25 May 2020 19:19:48 -0400 Subject: [PATCH 1/7] scroll cherry-pick 1 --- src/pages/prescreen-1b.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/prescreen-1b.tsx b/src/pages/prescreen-1b.tsx index e704941f6..c6da68803 100644 --- a/src/pages/prescreen-1b.tsx +++ b/src/pages/prescreen-1b.tsx @@ -67,8 +67,10 @@ interface Prescreen1bProps { } class Prescreen1b extends React.Component { + myRef: any; constructor(props: Prescreen1bProps) { super(props); + this.myRef = React.createRef(); this.showFileUpload = this.showFileUpload.bind(this); this.showManualTable = this.showManualTable.bind(this); } @@ -136,6 +138,7 @@ class Prescreen1b extends React.Component { {this.checkForBirthday()} + Do you have a copy of your earnings record? setHaveEarnings(true)} checked={haveEarnings === true} /> @@ -158,7 +161,7 @@ class Prescreen1b extends React.Component { {haveEarnings === true ? - + What format is the copy of your earnings record? setEarningsFormat(EarningsEnum.XML)} checked={earningsFormat === EarningsEnum.XML} /> From 2f2b70b9132a63ebe0877cceb4ac7be561725aa7 Mon Sep 17 00:00:00 2001 From: Kevin <691208yz@gmail.com> Date: Mon, 25 May 2020 20:29:10 -0400 Subject: [PATCH 2/7] scroll cherry-pick 2 --- src/pages/prescreen-1b.tsx | 76 ++++++++++++++++++++++++++++++++++---- 1 file changed, 69 insertions(+), 7 deletions(-) diff --git a/src/pages/prescreen-1b.tsx b/src/pages/prescreen-1b.tsx index c6da68803..db60299f4 100644 --- a/src/pages/prescreen-1b.tsx +++ b/src/pages/prescreen-1b.tsx @@ -70,9 +70,15 @@ class Prescreen1b extends React.Component { myRef: any; constructor(props: Prescreen1bProps) { super(props); - this.myRef = React.createRef(); + this.myRef1 = React.createRef(); + this.myRef2 = React.createRef(); this.showFileUpload = this.showFileUpload.bind(this); this.showManualTable = this.showManualTable.bind(this); + this.scrollToElement = this.scrollToElement.bind(this); + } + + scrollToElement() { + document.querySelector('body').scrollTo({ left: 0, top: this.myRef1.current.offsetTop, behavior: 'smooth' }) } showFileUpload() { @@ -141,11 +147,11 @@ class Prescreen1b extends React.Component { Do you have a copy of your earnings record? - setHaveEarnings(true)} checked={haveEarnings === true} /> + setHaveEarnings(true)} onClick={this.scrollToElement} checked={haveEarnings === true} /> Yes - setHaveEarnings(false)} checked={haveEarnings === false} /> + setHaveEarnings(false)} onClick={this.scrollToElement} checked={haveEarnings === false} /> No @@ -159,9 +165,9 @@ class Prescreen1b extends React.Component { - +
{haveEarnings === true ? - + What format is the copy of your earnings record? setEarningsFormat(EarningsEnum.XML)} checked={earningsFormat === EarningsEnum.XML} /> @@ -186,15 +192,44 @@ class Prescreen1b extends React.Component { Do you have a MySocialSecurity account? - setHaveSSAAccount(true)} checked={haveSSAAccount === true} /> + setHaveSSAAccount(true)} onClick={() => document.querySelector('body').scrollTo({ left: 0, top: this.myRef2.current.offsetTop, behavior: 'smooth' })} checked={haveSSAAccount === true} /> Yes - setHaveSSAAccount(false)} checked={haveSSAAccount === false} /> + setHaveSSAAccount(false)} onClick={() => document.querySelector('body').scrollTo({ left: 0, top: this.myRef2.current.offsetTop, behavior: 'smooth' })} checked={haveSSAAccount === false} /> No : null } +
+ +
+ {haveEarnings === false && haveSSAAccount === true ? + ( + + +

+ HOW-TO +

+

Download your earnings record from MySocialSecurity

+ + This how-to will show you how to download your personal Social Security information. Only follow these steps if you are using a private computer. + If you only have access to a public computer - like those at a library, school, or computer lab - please click here to be shown instructions for requesting a physical copy of your earnings record in the mail. + +
    +
      1) Log in to your MySocialSecurity account
    +
      2) Click on “Download Your Statement Data”, as seen in +the red box in the photo below.
    + +
      3) Save the XML file to your computer.
    +
      4) Upload the XML file using the tool below.
    +
+ + + ) : null + } {this.showFileUpload() ? @@ -247,6 +282,33 @@ class Prescreen1b extends React.Component { ) } + {haveEarnings === false && haveSSAAccount === false ? + <> + + + We cannot estimate your WEP without a copy of your earnings record. + The How-to’s below will tell you how to get your earnings record through the mail, or by signing up for a MySocialSecurity account online. + + + + +

HOW-TO

+

Request a copy of your earnings report through the mail

+ + We cannot estimate your WEP without a copy of your earnings record. + The How-to’s below will tell you how to get your earnings record through the mail, or by signing up for a MySocialSecurity account online. + + + + + +

HOW-TO

+ Signup or login to your online account at MySocialSecurity + + + : null + } +
) From 273085f1d26e2bff6aca61b0100fac563d50183e Mon Sep 17 00:00:00 2001 From: Kevin <691208yz@gmail.com> Date: Tue, 26 May 2020 21:43:56 -0400 Subject: [PATCH 3/7] earnings page scroll --- src/pages/prescreen-1b.tsx | 38 ++++++++++++++++++++------------------ 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/src/pages/prescreen-1b.tsx b/src/pages/prescreen-1b.tsx index db60299f4..464e77b19 100644 --- a/src/pages/prescreen-1b.tsx +++ b/src/pages/prescreen-1b.tsx @@ -70,16 +70,19 @@ class Prescreen1b extends React.Component { myRef: any; constructor(props: Prescreen1bProps) { super(props); - this.myRef1 = React.createRef(); - this.myRef2 = React.createRef(); + 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() { - document.querySelector('body').scrollTo({ left: 0, top: this.myRef1.current.offsetTop, behavior: 'smooth' }) - } + scrollToElement(ref) { + setTimeout(() => { + ref.current.scrollIntoView({ behavior: 'smooth' }); + }, 100) + } showFileUpload() { const { @@ -144,14 +147,13 @@ class Prescreen1b extends React.Component { {this.checkForBirthday()} - Do you have a copy of your earnings record? - setHaveEarnings(true)} onClick={this.scrollToElement} checked={haveEarnings === true} /> + setHaveEarnings(true)} onClick={() => this.scrollToElement(this.earningsSelectRef)} checked={haveEarnings === true} /> Yes - setHaveEarnings(false)} onClick={this.scrollToElement} checked={haveEarnings === false} /> + setHaveEarnings(false)} onClick={() => this.scrollToElement(this.earningsSelectRef)} checked={haveEarnings === false} /> No @@ -165,24 +167,24 @@ class Prescreen1b extends React.Component { -
+
{haveEarnings === true ? What format is the copy of your earnings record? - setEarningsFormat(EarningsEnum.XML)} checked={earningsFormat === EarningsEnum.XML} /> + setEarningsFormat(EarningsEnum.XML)} onClick={()=> this.scrollToElement(this.earningsRecordRef)} checked={earningsFormat === EarningsEnum.XML} /> XML file (MySocialSecurity) - setEarningsFormat(EarningsEnum.PDF)} checked={earningsFormat === EarningsEnum.PDF} /> + setEarningsFormat(EarningsEnum.PDF)} onClick={()=> this.scrollToElement(this.earningsRecordRef)} checked={earningsFormat === EarningsEnum.PDF} /> PDF (MySocialSecurity) - setEarningsFormat(EarningsEnum.PDFPRINT)} checked={earningsFormat === EarningsEnum.PDFPRINT} /> + setEarningsFormat(EarningsEnum.PDFPRINT)} onClick={()=> this.scrollToElement(this.earningsRecordRef)} checked={earningsFormat === EarningsEnum.PDFPRINT} /> PDF (scanned from print) - setEarningsFormat(EarningsEnum.PAPER)} checked={earningsFormat === EarningsEnum.PAPER} /> + setEarningsFormat(EarningsEnum.PAPER)} onClick={()=> this.scrollToElement(this.earningsRecordRef)} checked={earningsFormat === EarningsEnum.PAPER} /> Paper (mailed from SSA) : null @@ -192,18 +194,18 @@ class Prescreen1b extends React.Component { Do you have a MySocialSecurity account? - setHaveSSAAccount(true)} onClick={() => document.querySelector('body').scrollTo({ left: 0, top: this.myRef2.current.offsetTop, behavior: 'smooth' })} checked={haveSSAAccount === true} /> + setHaveSSAAccount(true)} onClick={() => this.scrollToElement(this.howToRef)} checked={haveSSAAccount === true} /> Yes - setHaveSSAAccount(false)} onClick={() => document.querySelector('body').scrollTo({ left: 0, top: this.myRef2.current.offsetTop, behavior: 'smooth' })} checked={haveSSAAccount === false} /> + setHaveSSAAccount(false)} onClick={() => this.scrollToElement(this.howToRef)} checked={haveSSAAccount === false} /> No : null }
-
+
{haveEarnings === false && haveSSAAccount === true ? ( @@ -230,7 +232,7 @@ the red box in the photo below. ) : null } - +
{this.showFileUpload() ? @@ -281,7 +283,7 @@ the red box in the photo below.
) } - +
{haveEarnings === false && haveSSAAccount === false ? <> From b637787d67fab2bc7ac61491550ff3d0d33aa3b8 Mon Sep 17 00:00:00 2001 From: Kevin <691208yz@gmail.com> Date: Mon, 1 Jun 2020 13:48:27 -0400 Subject: [PATCH 4/7] scroll cherry-pick3 --- src/pages/prescreen-1b.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/prescreen-1b.tsx b/src/pages/prescreen-1b.tsx index 464e77b19..84dcbcc81 100644 --- a/src/pages/prescreen-1b.tsx +++ b/src/pages/prescreen-1b.tsx @@ -80,7 +80,7 @@ class Prescreen1b extends React.Component { scrollToElement(ref) { setTimeout(() => { - ref.current.scrollIntoView({ behavior: 'smooth' }); + ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' }); }, 100) } @@ -165,8 +165,8 @@ class Prescreen1b extends React.Component { > MySocialSecurity is the Social Security Administrations online service. With a MySocialSecurity account , you can download a copy of your earnings record to use for this question. - +
{haveEarnings === true ? From 7cf332c4be99002486c56012aca8302c2e2b2e10 Mon Sep 17 00:00:00 2001 From: Kevin <691208yz@gmail.com> Date: Tue, 26 May 2020 21:47:01 -0400 Subject: [PATCH 5/7] remove unnecessary code --- src/pages/prescreen-1b.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/prescreen-1b.tsx b/src/pages/prescreen-1b.tsx index 84dcbcc81..11c3b3d25 100644 --- a/src/pages/prescreen-1b.tsx +++ b/src/pages/prescreen-1b.tsx @@ -67,7 +67,6 @@ interface Prescreen1bProps { } class Prescreen1b extends React.Component { - myRef: any; constructor(props: Prescreen1bProps) { super(props); this.earningsSelectRef = React.createRef(); From 40c43343ba6ef0bb36baa941ae33867652e730ce Mon Sep 17 00:00:00 2001 From: lines Date: Tue, 16 Feb 2021 21:19:56 -0500 Subject: [PATCH 6/7] add feature toggle --- .env.example | 3 ++- src/constants/config.tsx | 3 ++- src/pages/prescreen-1b.tsx | 3 +++ 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/.env.example b/.env.example index 2fbe7f2ff..bc5c7b6de 100644 --- a/.env.example +++ b/.env.example @@ -1 +1,2 @@ -GATSBY_SHOW_FUTURE_EARNINGS_PAGE=false \ No newline at end of file +GATSBY_SHOW_FUTURE_EARNINGS_PAGE=false +GATSBY_SCROLL_WHEN_FINISH=false diff --git a/src/constants/config.tsx b/src/constants/config.tsx index 57e24c764..66ff7897f 100644 --- a/src/constants/config.tsx +++ b/src/constants/config.tsx @@ -1 +1,2 @@ -export const gatsbyShowFutureEarningsPage = process.env.GATSBY_SHOW_FUTURE_EARNINGS_PAGE === "true" || false; \ No newline at end of file +export const gatsbyShowFutureEarningsPage = process.env.GATSBY_SHOW_FUTURE_EARNINGS_PAGE === "true" || false; +export const gatsbyScrollWhenFinish = process.env.GATSBY_SCROLL_WHEN_FINISH === "true" || false; \ No newline at end of file diff --git a/src/pages/prescreen-1b.tsx b/src/pages/prescreen-1b.tsx index df7f37db0..2a7ad77b4 100644 --- a/src/pages/prescreen-1b.tsx +++ b/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 { } scrollToElement(ref) { + if (gatsbyScrollWhenFinish) { setTimeout(() => { ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' }); }, 100) } + } showFileUpload() { const { From bf2ce80dd006da8dbf681da149a935b55275a791 Mon Sep 17 00:00:00 2001 From: lines Date: Tue, 16 Feb 2021 21:25:02 -0500 Subject: [PATCH 7/7] update readme --- README.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index b45b7b65a..073df9f6a 100644 --- a/README.md +++ b/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: = 'true'; npm start` + - In Mac and Linux, run `=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