[cases] updated claim filing flow

[arfamomin]

What's new in this PR

Description

• new toggle between file a claim and opt out that switches potential flows for the user
• once claim file indicated, new bar showing "claim filed" is added to top

Screenshots

//: # 'Required for frontend changes, otherwise optional but strongly recommended. Add screenshots of expected behavior - GIFs if you're feeling fancy! Use the provided image template. Drag the desired image into the PR, then copy the link into the placeholder.'

How to review

Next steps

Relevant Links

Online sources

• Creating toggle https://uiverse.io/ErzenXz/weak-falcon-28, https://medium.com/@divvyatripaathi/building-toggle-switch-using-react-typescript-styled-components-38b45f054ea0

Related PRs

CC: @ronniebeggs

[linear]

IMP-89 Updated Claim File Flow

[ronniebeggs]

I made a few refactoring changes that should hopefully clean up the eligibility logic. If you test out the claim filing flow, you'll notice that filing a claim will cause a "claim status" bar to show up. As of now I just reused a previously created component. Do you think you could create a new one according to this figma design? Or perhaps refactor the CaseStatusBar component so it can be used throughout the app? Let me know if this is doable or doesn't make sense.

[arfamomin]

for positioning the texts inside the bar, i used space-between in my commits but it looks a bit weird on my larger phone. here's what it looks with space-around but the look changed slightly so lmk if you want to change it.

[arfamomin]

I also didn’t refactor CaseStatusBar and made a new component instead b/c it would require changing the text styling (since it’s not the same as what’s pulled from getStatusColor). But whenever you review it and think it might be better I also have the code for it refactored instead where I override the styling.

[ronniebeggs]

I also didn’t refactor CaseStatusBar and made a new component instead b/c it would require changing the text styling (since it’s not the same as what’s pulled from getStatusColor). But whenever you review it and think it might be better I also have the code for it refactored instead where I override the styling.

It's honestly probably fine to create a new component. Let's just run with this.

[ronniebeggs]

for positioning the texts inside the bar, i used space-between in my commits but it looks a bit weird on my larger phone. here's what it looks with space-around but the look changed slightly so lmk if you want to change it.

I worry that it might not look great on every screen. Space around looks a little awkward on my screen so I think it's fine how it is for now.