Merge branch 'feat/offer-cumulative-codes' into fix/offer-use-form

SocialGouv · Nov 28, 2024 · 76ee623 · 76ee623
2 parents 0d6bd20 + 2153528
commit 76ee623
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 36 deletions.
diff --git 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,13 +278,15 @@ type CouponCardProps = {
   mode?: "default" | "wallet";
   link?: string;
   handleOpenExternalLink?: () => void;
+  erased?: boolean;
 };
 
 const CouponCard = ({
   coupon,
   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
@@ -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 CouponUsedFeedbackModal from "~/components/modals/CouponUsedFeedbackModal";
 import { CouponIncluded } from "~/server/api/routers/coupon";
@@ -14,6 +22,7 @@ const CouponUsedBox = (props: CouponUsedBoxProps) => {
   const utils = api.useUtils();
 
   const [showUsedBox, setShowUsedBox] = useState<boolean>(true);
+  const [isSwitched, setIsSwitched] = useState<boolean>(false);
 
   const {
     isOpen: isOpenCouponUsedFeedbackModal,
@@ -29,6 +38,7 @@ const CouponUsedBox = (props: CouponUsedBoxProps) => {
   );
 
   const handleCouponUsed = (used: boolean) => {
+    console.log(used);
     if (!used) {
       setShowUsedBox(false);
     } else {
@@ -37,8 +47,17 @@ const CouponUsedBox = (props: CouponUsedBoxProps) => {
   };
 
   const closeFeedbackModal = () => {
-    confirmCouponUsed();
     onCloseCouponUsedFeedbackModal();
+    setIsSwitched(true);
+
+    setTimeout(() => {
+      confirmCouponUsed();
+    }, 1000);
+
+    // window.open(
+    // 	"https://surveys.hotjar.com/8d25a606-6e24-4437-97be-75fcdb4c3e35",
+    // 	"_blank"
+    // );
   };
 
   if (!showUsedBox) return;
@@ -49,36 +68,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>
       <CouponUsedFeedbackModal
         isOpen={isOpenCouponUsedFeedbackModal}
         onClose={closeFeedbackModal}

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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: () => ({