Catherine derrick/error banner and coupon display

backend/typescript/rest/camperRoutes.ts

@@ -89,6 +89,7 @@ camperRouter.get(
   },
 );
 
+// ROLES: Unprotected
 camperRouter.get("/refund/:refundCode", async (req, res) => {
   const { refundCode } = req.params;
   try {
@@ -101,6 +102,20 @@ camperRouter.get("/refund/:refundCode", async (req, res) => {
   }
 });
 
+// ROLES: Unprotected
+// Used to contact stripe to obtain refund discount information
+camperRouter.get("/refund-discount-info/:chargeId", async (req, res) => {
+  const { chargeId } = req.params;
+  try {
+    const discountInfo = await camperService.getRefundDiscountInfo(
+      (chargeId as unknown) as string,
+    );
+    res.status(200).json(discountInfo);
+  } catch (error: unknown) {
+    res.status(500).json({ error: getErrorMessage(error) });
+  }
+});
+
 // ROLES: TODO- Leaving unprotected as parent might need this route for refund flow @dhruv
 camperRouter.get("/refund-confirm/:chargeId", async (req, res) => {
   const { chargeId } = req.params;

backend/typescript/services/implementations/camperService.ts

@@ -28,6 +28,7 @@ import EmailService from "./emailService";
 import {
   createStripeCheckoutSession,
   createStripeLineItems,
+  retrieveStripeCheckoutSession,
 } from "../../utilities/stripeUtils";
 import { getEDUnits, getLPUnits } from "../../utilities/CampUtils";
 
@@ -1410,6 +1411,30 @@ class CamperService implements ICamperService {
       throw error;
     }
   }
+
+  async getRefundDiscountInfo(chargeId: string): Promise<number> {
+    let discountAmount = 0;
+
+    try {
+      const checkoutSession: Stripe.Checkout.Session = await retrieveStripeCheckoutSession(
+        chargeId,
+      );
+
+      if (!checkoutSession) {
+        throw new Error(`Could not find checkout session with id ${chargeId}`);
+      }
+
+      // Stripe returns value without decimal point so divide by 100.0 to convert to float
+      discountAmount = checkoutSession.total_details?.amount_discount
+        ? checkoutSession.total_details?.amount_discount / 100.0
+        : 0;
+    } catch (error: unknown) {
+      Logger.error("Failed to retrieve checkout session.");
+      throw error;
+    }
+
+    return discountAmount;
+  }
 }
 
 export default CamperService;

backend/typescript/services/interfaces/camperService.ts

@@ -140,6 +140,13 @@ interface ICamperService {
    * @throws Error if retrieval fails
    */
   getRefundInfo(refundCode: string): Promise<RefundDTO>;
+
+  /**
+   * Returns the associated discount from coupons from a specific chargeId
+   * @param chargeId code specific to the checkout session
+   * @throws Error if retrieval fails
+   */
+  getRefundDiscountInfo(chargeId: string): Promise<number>;
 }
 
 export default ICamperService;

frontend/src/APIClients/CamperAPIClient.ts

@@ -154,6 +154,20 @@ const getRefundInfo = async (refundCode: string): Promise<RefundDTO[]> => {
   }
 };
 
+const getRefundDiscountInfo = async (chargeId: string): Promise<number> => {
+  try {
+    const { data } = await baseAPIClient.get(
+      `/campers/refund-discount-info/${chargeId}`,
+      {
+        headers: { Authorization: getBearerToken() },
+      },
+    );
+    return data;
+  } catch (error) {
+    return error as number;
+  }
+};
+
 const confirmPayment = async (chargeId: string): Promise<boolean> => {
   try {
     const { data } = await baseAPIClient.post(
@@ -180,4 +194,5 @@ export default {
   waitlistCampers,
   confirmPayment,
   getRefundInfo,
+  getRefundDiscountInfo,
 };

frontend/src/components/pages/CamperRefundCancellation/CamperRefundFooter.tsx

@@ -1,7 +1,13 @@
 import React from "react";
 import { Flex, Button } from "@chakra-ui/react";
 
-const CamperRefundFooter = (): React.ReactElement => {
+type CamperRefundFooterProps = {
+  isDisabled: boolean;
+};
+
+const CamperRefundFooter = ({
+  isDisabled,
+}: CamperRefundFooterProps): React.ReactElement => {
   return (
     <Flex
       color="#FFFFFF"
@@ -24,6 +30,7 @@ const CamperRefundFooter = (): React.ReactElement => {
         variant="primary"
         background="primary.green.100"
         textStyle="buttonSemiBold"
+        disabled={isDisabled}
         py="12px"
         px="25px"
       >

frontend/src/components/pages/CamperRefundCancellation/CamperRefundInfoCard.tsx

@@ -15,6 +15,11 @@ type CamperRefundInfoCardProps = {
   lastName: string;
   camperNum: number;
   instances: Array<CamperRefundDTO>;
+  setCardsDisabled: React.Dispatch<React.SetStateAction<boolean>>;
+  checkedRefunds: Array<boolean>;
+  setCheckedRefunds: React.Dispatch<React.SetStateAction<boolean[]>>;
+  refundAmountMap: Array<number>;
+  setRefundAmountMap: React.Dispatch<React.SetStateAction<Array<number>>>;
 };
 
 const CamperRefundInfoCard = ({
@@ -23,6 +28,11 @@ const CamperRefundInfoCard = ({
   lastName,
   camperNum,
   instances,
+  setCardsDisabled,
+  checkedRefunds,
+  setCheckedRefunds,
+  refundAmountMap,
+  setRefundAmountMap,
 }: CamperRefundInfoCardProps): React.ReactElement => {
   const getTimeDifference = (date1: Date, date2: Date): number => {
     const date1Time = date1.getHours() * 60 + date1.getMinutes();
@@ -98,7 +108,21 @@ const CamperRefundInfoCard = ({
     return firstDate - today >= thirtyDays;
   };
 
+  const handleCheckboxChange = (index: number) => {
+    const updatedCheckedRefunds = [...checkedRefunds];
+    const checked = !updatedCheckedRefunds[index];
+    updatedCheckedRefunds[index] = checked;
+    setCheckedRefunds(updatedCheckedRefunds);
+
+    const updatedRefundAmountMap = [...refundAmountMap];
+    updatedRefundAmountMap[index] = checked ? getTotalRefundForCamper() : 0;
+    setRefundAmountMap(updatedRefundAmountMap);
+  };
+
   const valid = isRefundValid();
+  if (!valid) {
+    setCardsDisabled(true);
+  }
 
   const textColor = valid ? "#000000" : "#00000066";
 
@@ -122,6 +146,7 @@ const CamperRefundInfoCard = ({
         <Checkbox
           isDisabled={!valid}
           defaultChecked={valid}
+          onChange={() => handleCheckboxChange(camperNum - 1)}
           colorScheme="green"
           size="lg"
         >