Catherine derrick/error banner and coupon display

[derrick-yyang]

Notion ticket link

Cancellation-Refund-Populate-camper-selection-page-with-real-data-edge-cases

Implementation description

• Implemented a GET endpoint that retrieves discount information from stripe
• Leveraged the endpoint to display discount information (if any). Here is a screenshot of what it looks like: Note: When the initial Spinner/loading screen will continue until the information from stripe is successfully retrieved, aka error handled gracefully.
• Added logic to display a banner when sessions are disabled and have the Total Refund = 0. Here is a screenshot:
• Disabled the Request Refund button if either: None of the cards are selected, or refund is disabled
• PR feedback: Discount is distributed proportionally to cards selected. Here is a screenshot:
  

I also added a unrelated change that is a nice-to-have:

• The Total Refund value now changes based on what card is checked. Discount also works with this.

Steps to test

1. Not sure how to test the discount, are there any chargeId's with applied coupons? In that case, we can hard-code it and view it in the UI. The screenshot above is when it's hardcoded to show even if the discount is 0
2. Go to this link: http://localhost:3000/refund/0013cb7b1f3a5325. Check to see if the Request Refund Button is disabled when nothing is selected and also make sure the error banner does not appear. Also select/de-select to see if the Total Refund is updated correctly each time
3. Go to this link: http://localhost:3000/refund/73cf6242a9dfbdd2. Make sure the Request Refund Button is disabled and the banner shows
4. Go to this link: http://localhost:3000/refund/5e74cb1c47b51ab0. Make sure discount ( TEST15 = 15%) changes proportionally to cards that are selected. Ensure the refund amount - discount is correct calculation. Do this check for session cards that have different prices.

What should reviewers focus on?

• Does the UI look fine?

Checklist

• My PR name is descriptive and in imperative tense
• My commit messages are descriptive and in imperative tense. My commits are atomic and trivial commits are squashed or fixup'd into non-trivial commits
• I have run the appropriate linter(s)
• I have requested a review from the PL, as well as other devs who have background knowledge on this PR or who will be building on top of this PR

[github-actions]

Visit the preview URL for this PR (updated for commit 9a35df8):

https://focus-on-nature--pr296-catherine-derrick-er-qm75l6ns.web.app

_{(expires Tue, 22 Aug 2023 02:03:43 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 0aeb3dd1cc2aa82265739c366a8befd0d956fd1f}

[BraydenRoyston]

Stumbled upon a semi-gnarly edge case, check out this link: http://localhost:3000/refund/f874e4acfbbf3bb7.

• Discounted refund
• Within 30 days

Gives us this weird error state with a negative refund.

Alternate link with two campers: http://localhost:3000/refund/5015d9ac457f53a4

Possible Workaround:
When no campers are selected, do not display the discount amount. Note that you'll have to remove it from the total refund calculation, or perhaps even better is to take ceiling(refundAmount, 0);

!!! One more thing to test !!!

1. Make a camp with a future session date (i.e., making a refund is valid)
2. Sign up with two or more campers.
3. Use discount code TEST15 in the stripe checkout to apply a discount.
4. Verify in the refund flow that the discount is being distributed on a pro rata basis amongst each camper (if you have 2 campers and received a total discount of $100, only $50 of the discount should apply when refunding just one camper)

[BraydenRoyston]

Other than those callouts, this is looking great. Excellent job and good call on updating the refund amount based on what cards are selected. I like it!

[xiec1377]

LGTM

[BraydenRoyston]

Looking great!