Derrick catherine/send data on request refund (#295)

* fix: add empty dep array so useEffect is only called once * Added functionality to request refund so it calls a dummy endpoint Co-authored-by: Catherine Xie <[email protected]> * feat: Added functionality to request refund so it calls a dummy endpoint Co-authored-by: Catherine Xie <[email protected]> * feat: Added loading for requestRefund button * fix: lint * fix: margin adjustment * chore: lint --------- Co-authored-by: Catherine Xie <[email protected]> Co-authored-by: Brayden Royston <[email protected]> Co-authored-by: BraydenRoyston <[email protected]>
uwblueprint · Aug 30, 2023 · 1eb484a · 1eb484a
1 parent fa85a6c
commit 1eb484a
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 6 deletions.
diff --git a/backend/typescript/rest/camperRoutes.ts b/backend/typescript/rest/camperRoutes.ts
@@ -15,6 +15,7 @@ import { sendResponseByMimeType } from "../utilities/responseUtil";
 import {
   CamperDTO,
   CreateWaitlistedCamperDTO,
+  RefundDTO,
   WaitlistedCamperDTO,
 } from "../types";
 import { createWaitlistedCampersDtoValidator } from "../middlewares/validators/waitlistedCampersValidators";

diff --git a/backend/typescript/services/implementations/camperService.ts b/backend/typescript/services/implementations/camperService.ts
@@ -943,7 +943,7 @@ class CamperService implements ICamperService {
   async cancelRegistration(
     chargeId: string,
     camperIds: string[],
-  ): Promise<void> {
+  ): Promise<RefundDTO> {
     try {
       const campersWithChargeId: Array<Camper> = await MgCamper.find({
         chargeId,

diff --git a/frontend/src/APIClients/CamperAPIClient.ts b/frontend/src/APIClients/CamperAPIClient.ts
@@ -154,6 +154,30 @@ const getRefundInfo = async (refundCode: string): Promise<RefundDTO[]> => {
   }
 };
 
+const sendSelectedRefundInfo = async (
+  selectedRefunds: Array<RefundDTO>,
+): Promise<RefundDTO[]> => {
+  try {
+    const { chargeId } = selectedRefunds[0].instances[0];
+    const camperIds: Array<string> = selectedRefunds.map((refund) => { 
+      return refund.instances[0].id;
+    });
+
+    const body = { chargeId, camperIds };
+    const { data } = await baseAPIClient.patch(
+      `/campers/cancel-registration`,
+      body,
+      {
+        headers: { Authorization: getBearerToken() },
+      },
+    );
+
+    return data;
+  } catch (error) {
+    return error as RefundDTO[];
+  }
+};
+
 const getRefundDiscountInfo = async (chargeId: string): Promise<number> => {
   try {
     const { data } = await baseAPIClient.get(
@@ -194,5 +218,6 @@ export default {
   waitlistCampers,
   confirmPayment,
   getRefundInfo,
+  sendSelectedRefundInfo,
   getRefundDiscountInfo,
 };
diff --git a/frontend/src/components/pages/CamperRefundCancellation/CamperRefundFooter.tsx b/frontend/src/components/pages/CamperRefundCancellation/CamperRefundFooter.tsx
@@ -1,13 +1,50 @@
-import React from "react";
-import { Flex, Button } from "@chakra-ui/react";
+import React, { useState } from "react";
+import { Flex, Button, useToast } from "@chakra-ui/react";
+import { RefundDTO } from "../../../types/CamperTypes";
+import CamperAPIClient from "../../../APIClients/CamperAPIClient";
 
 type CamperRefundFooterProps = {
+  refunds: Array<RefundDTO>;
+  checkedRefunds: Array<boolean>;
+  refundCode: string;
+  setRefunds: React.Dispatch<React.SetStateAction<RefundDTO[]>>;
   isDisabled: boolean;
 };
 
 const CamperRefundFooter = ({
+  refunds,
+  checkedRefunds,
+  refundCode,
+  setRefunds,
   isDisabled,
 }: CamperRefundFooterProps): React.ReactElement => {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const toast = useToast();
+  const sendData = async (code: string) => {
+    const selectedRefunds: Array<RefundDTO> = [];
+    checkedRefunds.forEach((checked, i) => {
+      if (checked) {
+        selectedRefunds.push(refunds[i]);
+      }
+    });
+    try {
+      setIsLoading(true);
+      const response = await CamperAPIClient.sendSelectedRefundInfo(
+        selectedRefunds,
+      );
+      setRefunds(refunds); // TODO: change this to response once the endpoint is implemented
+    } catch {
+      toast({
+        description: `Unable to process selected refunds.`,
+        status: "error",
+        duration: 3000,
+        variant: "subtle",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
   return (
     <Flex
       color="#FFFFFF"
@@ -30,6 +67,8 @@ const CamperRefundFooter = ({
         variant="primary"
         background="primary.green.100"
         textStyle="buttonSemiBold"
+        onClick={() => sendData(refundCode)}
+        isLoading={isLoading}
         disabled={isDisabled}
         py="12px"
         px="25px"

diff --git a/frontend/src/components/pages/CamperRefundCancellation/CamperRefundInfoCard.tsx b/frontend/src/components/pages/CamperRefundCancellation/CamperRefundInfoCard.tsx
@@ -146,7 +146,7 @@ const CamperRefundInfoCard = ({
         <Checkbox
           isDisabled={!valid}
           defaultChecked={valid}
-          onChange={() => handleCheckboxChange(camperNum - 1)}
+          onChange={() => handleCheckboxChange(camperNum)}
           colorScheme="green"
           size="lg"
         >

diff --git a/frontend/src/components/pages/CamperRefundCancellation/index.tsx b/frontend/src/components/pages/CamperRefundCancellation/index.tsx
@@ -123,7 +123,7 @@ const CamperRefundCancellation = (): React.ReactElement => {
   }
   return (
     <>
-      <Box pb="7%">
+      <Box pb="156px">
         <Image
           src={FONIcon}
           alt="FON icon"
@@ -267,7 +267,13 @@ const CamperRefundCancellation = (): React.ReactElement => {
           )}
         </Box>
       </Box>
-      <CamperRefundFooter isDisabled={isFooterButtonDisabled()} />
+      <CamperRefundFooter
+        refunds={refunds}
+        checkedRefunds={checkedRefunds}
+        refundCode={refundCode}
+        setRefunds={setRefunds}
+        isDisabled={isFooterButtonDisabled()}
+      />
     </>
   );
 };