From 2153528073ec3312cc87a980b8bc1241ff587b3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment?= <clement@numericite.eu>
Date: Thu, 28 Nov 2024 18:18:50 +0100
Subject: [PATCH] feat: erase coupon after used

---
 webapp/src/components/cards/CouponCard.tsx    | 43 +++++++++++-
 .../components/offer/page/CouponUsedBox.tsx   | 65 ++++++++++---------
 .../components/offer/page/OfferContent.tsx    |  2 -
 webapp/src/components/theme/switch.ts         | 25 +++++++
 .../pages/dashboard/offer/cje/[id]/index.tsx  | 10 ++-
 webapp/src/payload/collections/Offer.ts       |  2 +-
 webapp/src/utils/chakra-theme.ts              |  2 +
 7 files changed, 109 insertions(+), 40 deletions(-)
 create mode 100644 webapp/src/components/theme/switch.ts

diff --git a/webapp/src/components/cards/CouponCard.tsx b/webapp/src/components/cards/CouponCard.tsx
index d0ed653f..3ca2b9b5 100644
--- a/webapp/src/components/cards/CouponCard.tsx
+++ b/webapp/src/components/cards/CouponCard.tsx
@@ -31,6 +31,7 @@ import PassCard from "../account/PassCard";
 import { useMemo } from "react";
 import { useAuth } from "~/providers/Auth";
 import PartnerImage from "../ui/PartnerImage";
+import { motion } from "framer-motion";
 
 const BasicExternalCard = ({
   title,
@@ -70,18 +71,46 @@ const BasicExternalCard = ({
   );
 };
 
+const AnimatedText = ({ text, erased }: { text: string; erased: boolean }) => {
+  const characters = text.split("");
+
+  return (
+    <div className="flex">
+      {characters.map((char, index) => (
+        <motion.span
+          key={index}
+          initial={{ opacity: 1 }}
+          animate={{
+            opacity: erased ? 0 : 1,
+            y: erased ? -20 : 0,
+          }}
+          transition={{
+            duration: 0.3,
+            delay: 1 + index * 0.05,
+          }}
+          className="inline-block"
+        >
+          {char}
+        </motion.span>
+      ))}
+    </div>
+  );
+};
+
 const CouponCodeCard = ({
   coupon,
   mode,
   offerKind,
   barCodeFormat,
   handleOpenCardModal,
+  erased,
 }: {
   coupon: CouponIncluded;
   mode: "default" | "wallet";
   offerKind: Offer["kind"];
   barCodeFormat: Offer["barcodeFormat"];
   handleOpenCardModal: () => void;
+  erased?: boolean;
 }) => {
   const { user } = useAuth();
 
@@ -105,9 +134,14 @@ const CouponCodeCard = ({
           color={offerKind === "code" ? "black" : "disabled"}
           filter={mode === "default" ? "none" : "blur(5px)"}
         >
-          {offerKind === "code"
-            ? coupon.code
-            : "Le code est déjà appliqué sur le site 😉"}
+          <AnimatedText
+            text={
+              offerKind === "code"
+                ? coupon.code
+                : "Le code est déjà appliqué sur le site 😉"
+            }
+            erased={!!erased}
+          />
         </Text>
       );
     case "voucher":
@@ -244,6 +278,7 @@ type CouponCardProps = {
   mode?: "default" | "wallet";
   link?: string;
   handleOpenExternalLink?: () => void;
+  erased?: boolean;
 };
 
 const CouponCard = ({
@@ -251,6 +286,7 @@ const CouponCard = ({
   mode = "default",
   link,
   handleOpenExternalLink,
+  erased,
 }: CouponCardProps) => {
   const toast = useToast();
 
@@ -397,6 +433,7 @@ const CouponCard = ({
                   offerKind={coupon.offer.kind}
                   barCodeFormat={coupon.offer.barcodeFormat}
                   handleOpenCardModal={onOpenUserCard}
+                  erased={erased}
                 />
               </Flex>
             ) : (
diff --git a/webapp/src/components/offer/page/CouponUsedBox.tsx b/webapp/src/components/offer/page/CouponUsedBox.tsx
index 86151fbe..1fab8937 100644
--- a/webapp/src/components/offer/page/CouponUsedBox.tsx
+++ b/webapp/src/components/offer/page/CouponUsedBox.tsx
@@ -1,4 +1,12 @@
-import { Flex, Text, Button, useDisclosure } from "@chakra-ui/react";
+import {
+  Flex,
+  Text,
+  Button,
+  useDisclosure,
+  FormControl,
+  FormLabel,
+  Switch,
+} from "@chakra-ui/react";
 import { useState } from "react";
 import ConfirmModal from "~/components/modals/ConfirmModal";
 import CouponUsedFeedbackModal from "~/components/modals/CouponUsedFeedbackModal";
@@ -14,6 +22,7 @@ const CouponUsedBox = (props: CouponUsedBoxProps) => {
   const { coupon, confirmCouponUsed } = props;
 
   const [showUsedBox, setShowUsedBox] = useState<boolean>(true);
+  const [isSwitched, setIsSwitched] = useState<boolean>(false);
 
   const {
     isOpen: isOpenCouponUsedModal,
@@ -36,6 +45,7 @@ const CouponUsedBox = (props: CouponUsedBoxProps) => {
   );
 
   const handleCouponUsed = (used: boolean) => {
+    console.log(used);
     if (!used) {
       setShowUsedBox(false);
     } else {
@@ -44,12 +54,17 @@ const CouponUsedBox = (props: CouponUsedBoxProps) => {
   };
 
   const closeFeedbackModal = () => {
-    confirmCouponUsed();
-    window.open(
-      "https://surveys.hotjar.com/8d25a606-6e24-4437-97be-75fcdb4c3e35",
-      "_blank"
-    );
     onCloseCouponUsedFeedbackModal();
+    setIsSwitched(true);
+
+    setTimeout(() => {
+      confirmCouponUsed();
+    }, 1000);
+
+    // window.open(
+    // 	"https://surveys.hotjar.com/8d25a606-6e24-4437-97be-75fcdb4c3e35",
+    // 	"_blank"
+    // );
   };
 
   if (!showUsedBox) return;
@@ -60,36 +75,22 @@ const CouponUsedBox = (props: CouponUsedBoxProps) => {
       gap={4}
       p={3}
       bg="white"
-      borderRadius="2.5xl"
+      rounded={"2xl"}
       borderWidth={2}
       borderColor="cje-gray.400"
       mt={6}
     >
-      <Text w="full" textAlign={"center"}>
-        🤔 Vous avez déjà utilisé votre code ?
-      </Text>
-      <Flex gap={2}>
-        <Button
-          fontSize="md"
-          rounded={"1.25rem"}
-          p={3}
-          colorScheme="errorShades"
-          flexGrow={1}
-          onClick={() => handleCouponUsed(false)}
-        >
-          Non
-        </Button>
-        <Button
-          fontSize="md"
-          rounded={"1.25rem"}
-          p={3}
-          colorScheme="primaryShades"
-          flexGrow={1}
-          onClick={() => handleCouponUsed(true)}
-        >
-          Oui
-        </Button>
-      </Flex>
+      <FormControl
+        display="flex"
+        alignItems="center"
+        justifyContent="space-between"
+        onClick={() => handleCouponUsed(true)}
+      >
+        <FormLabel htmlFor="coupon-used" mb={0}>
+          J'ai déjà utilisé la réduction
+        </FormLabel>
+        <Switch id="coupon-used" isChecked={isSwitched} />
+      </FormControl>
       <ConfirmModal
         title={"Confirmer que vous avez utilisé ce code ?"}
         description="Vous ne pourrez plus l'utiliser ensuite"
diff --git a/webapp/src/components/offer/page/OfferContent.tsx b/webapp/src/components/offer/page/OfferContent.tsx
index 8ed17c9c..11c8a123 100644
--- a/webapp/src/components/offer/page/OfferContent.tsx
+++ b/webapp/src/components/offer/page/OfferContent.tsx
@@ -101,7 +101,6 @@ const OfferContent = (props: OfferContentProps) => {
             fontSize={14}
             w="full"
             colorScheme={cooldownInMinutes ? "gray" : "blackBtn"}
-            size="md"
             isLoading={isLoadingValidateOffer}
             onClick={() => {
               push(["trackEvent", "Inactive", "J'active mon offre"]);
@@ -114,7 +113,6 @@ const OfferContent = (props: OfferContentProps) => {
                 <Icon as={HiMiniEye} w={5} h={5} />
               )
             }
-            lineHeight={"xl"}
             style={{
               pointerEvents: cooldownInMinutes ? "none" : "auto",
             }}
diff --git a/webapp/src/components/theme/switch.ts b/webapp/src/components/theme/switch.ts
new file mode 100644
index 00000000..631a7cf2
--- /dev/null
+++ b/webapp/src/components/theme/switch.ts
@@ -0,0 +1,25 @@
+import { defineStyleConfig } from "@chakra-ui/react";
+
+export const switchTheme = defineStyleConfig({
+  baseStyle: {
+    thumb: {
+      borderRadius: "6px",
+      _checked: {
+        "&::after": {
+          content: '"✓"',
+          color: "success",
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translateX(-50%)translateY(-50%)",
+        },
+      },
+    },
+    track: {
+      borderRadius: "8px",
+      _checked: {
+        bg: "success",
+      },
+    },
+  },
+});
diff --git a/webapp/src/pages/dashboard/offer/cje/[id]/index.tsx b/webapp/src/pages/dashboard/offer/cje/[id]/index.tsx
index d510e274..cf86cc17 100644
--- a/webapp/src/pages/dashboard/offer/cje/[id]/index.tsx
+++ b/webapp/src/pages/dashboard/offer/cje/[id]/index.tsx
@@ -23,6 +23,8 @@ export default function OfferCjePage() {
   const router = useRouter();
   const toast = useToast();
 
+  const [couponErased, setCouponErased] = useState(false);
+
   const { id: offer_id } = router.query as { id: string };
 
   const { data: resultOffer, isLoading: isLoadingOffer } =
@@ -136,8 +138,11 @@ export default function OfferCjePage() {
   const [timeoutProgress, setTimeoutProgress] = useState<number>(0);
 
   const onCouponUsed = () => {
-    refetchCoupon();
-    setKind("offer");
+    setCouponErased(true);
+    setTimeout(() => {
+      refetchCoupon();
+      setKind("offer");
+    }, 3000);
   };
 
   const {
@@ -252,6 +257,7 @@ export default function OfferCjePage() {
             ) : (
               <motion.div style={{ backfaceVisibility: "hidden" }} layout>
                 <CouponCard
+                  erased={couponErased}
                   coupon={coupon}
                   handleOpenExternalLink={onOpenExternalLink}
                 />
diff --git a/webapp/src/payload/collections/Offer.ts b/webapp/src/payload/collections/Offer.ts
index 0f425f96..7c8fa76f 100644
--- a/webapp/src/payload/collections/Offer.ts
+++ b/webapp/src/payload/collections/Offer.ts
@@ -151,7 +151,7 @@ export const Offers: CollectionConfig = {
     {
       type: "checkbox",
       name: "cumulative",
-      label: "Bons cumulables",
+      label: "Bons renouvelables",
       defaultValue: false,
       admin: {
         position: "sidebar",
diff --git a/webapp/src/utils/chakra-theme.ts b/webapp/src/utils/chakra-theme.ts
index 340c0120..65610696 100644
--- a/webapp/src/utils/chakra-theme.ts
+++ b/webapp/src/utils/chakra-theme.ts
@@ -11,6 +11,7 @@ import localFont from "next/font/local";
 import { avatarTheme } from "~/components/theme/avatar";
 import { checkboxTheme } from "~/components/theme/checkbox";
 import { modalTheme } from "~/components/theme/modal";
+import { switchTheme } from "~/components/theme/switch";
 import { textareaTheme } from "~/components/theme/textarea";
 
 export const Marianne = localFont({
@@ -139,6 +140,7 @@ export const theme = extendTheme({
     Modal: modalTheme,
     Checkbox: checkboxTheme,
     Avatar: avatarTheme,
+    Switch: switchTheme,
   },
   styles: {
     global: () => ({