Skip to content

Scroll1 #193

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thadk merged 5 commits into from
Feb 24, 2021
Merged

Scroll1 #193

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b1903c3
scroll cherry-pick 1
Kevin1192 May 25, 2020
2f2b70b
scroll cherry-pick 2
Kevin1192 May 26, 2020
273085f
earnings page scroll
Kevin1192 May 27, 2020
b637787
scroll cherry-pick3
Kevin1192 Jun 1, 2020
7cf332c
remove unnecessary code
Kevin1192 May 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 76 additions & 10 deletions src/pages/prescreen-1b.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,10 +69,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) {
setTimeout(() => {
ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
}, 100)
}

showFileUpload() {
const {
userState: { haveEarnings, haveSSAAccount, earningsFormat }
Expand Down Expand Up @@ -138,11 +148,11 @@ class Prescreen1b extends React.Component<Prescreen1bProps> {
<Card>
<QuestionText>Do you have a copy of your earnings record?</QuestionText>
<AnswerBox>
<RadioButton type="radio" name="haveEarnings" value="true" onChange={() => setHaveEarnings(true)} checked={haveEarnings === true} />
<RadioButton type="radio" name="haveEarnings" value="true" onChange={() => setHaveEarnings(true)} onClick={() => this.scrollToElement(this.earningsSelectRef)} checked={haveEarnings === true} />
<LabelText>Yes</LabelText>
</AnswerBox>
<AnswerBox>
<RadioButton type="radio" name="haveEarnings" value="false" onChange={() => setHaveEarnings(false)} checked={haveEarnings === false} />
<RadioButton type="radio" name="haveEarnings" value="false" onChange={() => setHaveEarnings(false)} onClick={() => this.scrollToElement(this.earningsSelectRef)} checked={haveEarnings === false} />
<LabelText>No</LabelText>
</AnswerBox>
</Card>
Expand All @@ -154,26 +164,26 @@ class Prescreen1b extends React.Component<Prescreen1bProps> {
>
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.
</Glossary>

</CardGlossaryContainer>

<div ref={this.earningsSelectRef}>
{haveEarnings === true ?
<Card>
<QuestionText>What format is the copy of your earnings record?</QuestionText>
<AnswerBox>
<RadioButton type="radio" name="earningsFormat" value={EarningsEnum.XML} onChange={() => setEarningsFormat(EarningsEnum.XML)} checked={earningsFormat === EarningsEnum.XML} />
<RadioButton type="radio" name="earningsFormat" value={EarningsEnum.XML} onChange={() => setEarningsFormat(EarningsEnum.XML)} onClick={()=> this.scrollToElement(this.earningsRecordRef)} checked={earningsFormat === EarningsEnum.XML} />
<LabelText>XML file (MySocialSecurity)</LabelText>
</AnswerBox>
<AnswerBox>
<RadioButton type="radio" name="earningsFormat" value={EarningsEnum.PDF} onChange={() => setEarningsFormat(EarningsEnum.PDF)} checked={earningsFormat === EarningsEnum.PDF} />
<RadioButton type="radio" name="earningsFormat" value={EarningsEnum.PDF} onChange={() => setEarningsFormat(EarningsEnum.PDF)} onClick={()=> this.scrollToElement(this.earningsRecordRef)} checked={earningsFormat === EarningsEnum.PDF} />
<LabelText>PDF (MySocialSecurity)</LabelText>
</AnswerBox>
<AnswerBox>
<RadioButton type="radio" name="earningsFormat" value={EarningsEnum.PDFPRINT} onChange={() => setEarningsFormat(EarningsEnum.PDFPRINT)} checked={earningsFormat === EarningsEnum.PDFPRINT} />
<RadioButton type="radio" name="earningsFormat" value={EarningsEnum.PDFPRINT} onChange={() => setEarningsFormat(EarningsEnum.PDFPRINT)} onClick={()=> this.scrollToElement(this.earningsRecordRef)} checked={earningsFormat === EarningsEnum.PDFPRINT} />
<LabelText>PDF (scanned from print)</LabelText>
</AnswerBox>
<AnswerBox>
<RadioButton type="radio" name="earningsFormat" value={EarningsEnum.PAPER} onChange={() => setEarningsFormat(EarningsEnum.PAPER)} checked={earningsFormat === EarningsEnum.PAPER} />
<RadioButton type="radio" name="earningsFormat" value={EarningsEnum.PAPER} onChange={() => setEarningsFormat(EarningsEnum.PAPER)} onClick={()=> this.scrollToElement(this.earningsRecordRef)} checked={earningsFormat === EarningsEnum.PAPER} />
<LabelText>Paper (mailed from SSA)</LabelText>
</AnswerBox>
</Card> : null
Expand All @@ -183,16 +193,45 @@ class Prescreen1b extends React.Component<Prescreen1bProps> {
<Card>
<QuestionText>Do you have a MySocialSecurity account?</QuestionText>
<AnswerBox>
<RadioButton type="radio" name="haveSSAAccount" value="true" onChange={() => setHaveSSAAccount(true)} checked={haveSSAAccount === true} />
<RadioButton type="radio" name="haveSSAAccount" value="true" onChange={() => setHaveSSAAccount(true)} onClick={() => this.scrollToElement(this.howToRef)} checked={haveSSAAccount === true} />
<LabelText>Yes</LabelText>
</AnswerBox>
<AnswerBox>
<RadioButton type="radio" name="haveSSAAccount" value="false" onChange={() => setHaveSSAAccount(false)} checked={haveSSAAccount === false} />
<RadioButton type="radio" 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>
<H2>
HOW-TO
</H2>
<h3>Download your earnings record from MySocialSecurity</h3>
<WarningBox>
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.
</WarningBox>
<ul>
<ol>1) Log in to your MySocialSecurity account</ol>
<ol>2) Click on “Download Your Statement Data”, as seen in
the red box in the photo below.</ol>
<SsaImage
src='https://user-images.githubusercontent.com/50156013/56998273-bcd78800-6b78-11e9-86b5-9db06d292a4c.jpg'
/>
<ol>3) Save the XML file to your computer.</ol>
<ol>4) Upload the XML file using the tool below.</ol>
</ul>
</Card>
</HowToContainer>
) : null
}
<div ref={this.earningsRecordRef}>
{this.showFileUpload() ?
<HowToContainer>
<Card>
Expand Down Expand Up @@ -243,7 +282,34 @@ class Prescreen1b extends React.Component<Prescreen1bProps> {
</div>
)
}

</div>
{haveEarnings === false && haveSSAAccount === false ?
<>
<Card>
<TextBlock>
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.
</TextBlock>
</Card>
<HowToContainer>
<Card>
<H2>HOW-TO</H2>
<h3>Request a copy of your earnings report through the mail</h3>
<TextBlock>
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.
</TextBlock>
</Card>
</HowToContainer>
<HowToContainer>
<Card>
<H2>HOW-TO</H2>
<Link href="https://secure.ssa.gov/RIL/SiView.action">Signup or login to your online account at MySocialSecurity</Link>
</Card>
</HowToContainer>
</> : null
}
</div>
</ContentContainer>
</React.Fragment>
)
Expand Down