Skip to content

jimfuqian/BB2-3280 Update POC frontend for C4DIC according to designs from FIGMA #76

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.

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

Conversation

JFU-NAVA-PBC
Copy link
Contributor

@JFU-NAVA-PBC JFU-NAVA-PBC commented Aug 28, 2024

JIRA Ticket:
BB2-3280

Background
Part of the overall Digital Insurance Card POC includes showing how a 3rd party app might use the C4DIC resources to display a real insurance card. Starting from the first iteration of that app started in BB2-3259, we would now like to spruce up that first visualization of the digital insurance card by displaying something aligned with the designs developed by BB2 design team

What Does This PR Do?

  1. Added an end point /api/data/insurance to the FE server component where based on C4DIC Patient/Coverage fetched in authorization call (catched in logged_in_user structure), insurance 'card' fields are extracted, note, this end point eventually will be moved into BB2 server as part of API endpoints (TODO)
  2. FE client: added a new TAB "Insurance Card (New Design)" where the 'card' fields from /api/data/insurance are rendered on the back ground of CMS card image (PNG) exported from FIGMA
  3. Not part of AC, but re-arranged page layout a bit so that it fits in the browser view area (no need to scroll down to see "authorize" button...

What Should Reviewers Watch For?

If you're reviewing this PR, please check for these things in particular:

Validation

Steps to play locally:

  1. Check out the feature branch: git clone -b feature/c4dic https://github.com/CMSgov/bluebutton-sample-client-python-react.git BB2-PYTHON-SAMPLE-CLIENT-FEATURE-POC
  2. Go to local repo: cd BB2-PYTHON-SAMPLE-CLIENT-FEATURE-POC
  3. Configure the client per README
  4. Here BB2 ENV: TEST is used for C4DIC data, so set "environment": "TEST", in the server/.bluebutton-config.json, and you need to register an app on TEST and use its creds in configuration.
  5. Run: docker compose up, and wait the docker up and running without error
  6. Point browser (use chrome) to http://localhost:3000, will see the sample client home page
  7. Click "Authorize" button and kick off OAUTH flow, use e.g. BBUser00001 to login
  8. After grant access, at the client home page, you can click TABs to see: Claims, Insurance Card (FIGMA), Insurance Card (prev POC) etc.
  9. On FIGMA card TAB: there is a link "Show in New Window" which will show the card in a new window and where it could rendered in Mobile mode (switch to chrome dev tool -> toggle device...)

@JFU-NAVA-PBC JFU-NAVA-PBC changed the title BB2-3280 Update POC frontend for C4DIC according to designs from FIGMA jimfuqian/BB2-3280 Update POC frontend for C4DIC according to designs from FIGMA Aug 28, 2024
…fd.cms.gov, hack client config ENV=LOCAL: replace localhost with host IP e.g. 192.168.0.104 to workround a connect issue...
Copy link

@loganbertram loganbertram left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great! I still get a 500 when using as an authorized user, but I see that this ticket pertains to the frontend which is looking fantastic.

If that behavior is expected currently, this is good to go!

@@ -0,0 +1,3023 @@
CARD_IMG_PNG = '''

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I love storing images like this. I think it's probably better as an asset file that gets loaded by python than as a python file, but that's really overkill for current stage. Just spitballing.

…ntained C4DIC Org, render coverage info using C4DIC Color Palette extension etc.
@JFU-NAVA-PBC JFU-NAVA-PBC merged commit 644ec1e into feature/c4dic Sep 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants