fix: confirm coupon after close modal

SocialGouv · Nov 28, 2024 · 0d6bd20 · 0d6bd20
1 parent ace04e9
commit 0d6bd20
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 9 deletions.
diff --git a/webapp/src/components/modals/CouponUsedFeedbackModal.tsx b/webapp/src/components/modals/CouponUsedFeedbackModal.tsx
@@ -23,17 +23,17 @@ type CouponUsedFeedbackModalProps = {
 
 const CouponUsedFeedbackModalContent = ({
   couponUsedFeedbackForm,
+  currentStep,
+  setCurrentStep,
   onConfirm,
   onClose,
 }: {
   couponUsedFeedbackForm: Form | undefined;
+  currentStep: "form" | "finish" | undefined;
+  setCurrentStep: (step: "form" | "finish" | undefined) => void;
   onConfirm: () => void;
   onClose: () => void;
 }) => {
-  const [currentStep, setCurrentStep] = useState<"form" | "finish" | undefined>(
-    undefined
-  );
-
   switch (currentStep) {
     case "form":
       return (
@@ -88,7 +88,7 @@ const CouponUsedFeedbackModalContent = ({
               fontSize="sm"
               p={7}
               fontWeight={800}
-              onClick={() => onClose()}
+              onClick={onClose}
             >
               Non
             </Button>
@@ -112,22 +112,34 @@ const CouponUsedFeedbackModalContent = ({
 const CouponUsedFeedbackModal = (props: CouponUsedFeedbackModalProps) => {
   const { isOpen, onClose, onConfirm } = props;
 
+  const [currentStep, setCurrentStep] = useState<"form" | "finish" | undefined>(
+    undefined
+  );
+
   const { data: resultForm } = api.form.getFormBySlug.useQuery({
     slug: "coupon-used-feedback-form",
   });
 
   const { data: form } = resultForm || {};
 
+  const closeModal = () => {
+    setCurrentStep(undefined);
+    if (currentStep) onConfirm();
+    onClose();
+  };
+
   return (
     <Modal isOpen={isOpen} onClose={onClose} closeOnOverlayClick={false}>
       <ModalOverlay />
       <ModalContent borderRadius="2.5xl" bgColor="white" mx={4} my="auto">
-        <ModalCloseButton onClick={onClose} />
+        <ModalCloseButton onClick={closeModal} />
         <ModalBody pb={8}>
           <CouponUsedFeedbackModalContent
             couponUsedFeedbackForm={form}
+            currentStep={currentStep}
+            setCurrentStep={setCurrentStep}
             onConfirm={onConfirm}
-            onClose={onClose}
+            onClose={closeModal}
           />
         </ModalBody>
       </ModalContent>

diff --git a/webapp/src/components/offer/page/CouponUsedBox.tsx b/webapp/src/components/offer/page/CouponUsedBox.tsx
@@ -11,6 +11,7 @@ type CouponUsedBoxProps = {
 
 const CouponUsedBox = (props: CouponUsedBoxProps) => {
   const { coupon, confirmCouponUsed } = props;
+  const utils = api.useUtils();
 
   const [showUsedBox, setShowUsedBox] = useState<boolean>(true);
 
@@ -20,8 +21,12 @@ const CouponUsedBox = (props: CouponUsedBoxProps) => {
     onClose: onCloseCouponUsedFeedbackModal,
   } = useDisclosure();
 
-  const { mutateAsync: mutateCouponUsed } =
-    api.coupon.usedFromUser.useMutation();
+  const { mutateAsync: mutateCouponUsed } = api.coupon.usedFromUser.useMutation(
+    {
+      onSuccess: () =>
+        utils.coupon.getOne.invalidate({ offer_id: coupon.offer.id }),
+    }
+  );
 
   const handleCouponUsed = (used: boolean) => {
     if (!used) {