Merge pull request #19 from SocialGouv/feat/discount-online

feat: discount online

.kontinuous/env/dev/values.yaml

@@ -16,7 +16,7 @@ jobs:
       checkout: false
       shell: sh
       image: "{{ .Values.global.registry }}{{ if .Values.global.imageProject }}{{ print `/` .Values.global.imageProject }}{{ end }}/{{ .Values.global.imageRepository }}/app:{{ .Values.global.imageTag }}"
-      run: "yarn seed"
+      run: "yarn payload migrate && yarn seed:prod"
       envFrom:
         - secretRef:
             name: pg-app

README.md

@@ -4,6 +4,14 @@
 
 ## Developpement
 
+## Base de donnée
+
+Lancez la base de donnée Postgres via docker compose :
+
+```bash
+docker compose up -d
+```
+
 ### Webapp
 
 Accédez au dossier de l'application NextJS webapp :
@@ -27,11 +35,17 @@ yarn
 Générez les données de test :
 
 ```bash
-yarn seed
+yarn seed:dev
 ```
 
 Lancez l'application, qui sera accessible sur le port 3000 :
 
 ```bash
 yarn dev
 ```
+
+Voici les informations des utilisateurs prêts à être utilisés en développement grâce aux données de test :
+| Email | Type de compte | Mot de passe |
+| -------- | -------- | -------- |
+| [email protected] | Utilisateur | user123 |
+| [email protected] | Administrateur | admin123 |

imports/coupons.csv

@@ -0,0 +1,23 @@
+code,validityTo
+H1D1,01/06/24
+H1D2,02/06/24
+H1D3,03/06/24
+H1D4,04/06/24
+H1D5,05/06/24
+H1D6,06/06/24
+H1D7,07/06/24
+H1D8,08/06/24
+H1D9,09/06/24
+H1D10,10/06/24
+H1D11,11/06/24
+H1D12,12/06/24
+H1D13,13/06/24
+H1D14,14/06/24
+H1D15,15/06/24
+H1D16,16/06/24
+H1D17,17/06/24
+H1D18,18/06/24
+H1D19,19/06/24
+H1D20,20/06/24
+H1D21,21/06/24
+H1D22,22/06/24

webapp/.env.example

@@ -1,4 +1,4 @@
-DATABASE_URL=postgres://user:password@localhost:5432/dbname
+DATABASE_URL=postgres://user:password@localhost:5433/carte-jeune-engage
 PAYLOAD_SECRET=SOME_SECRET
 PAYLOAD_CONFIG_PATH=payload/payload.config.ts
 NEXT_PUBLIC_JWT_NAME=cje-jwt

webapp/package.json

@@ -6,19 +6,23 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "seed": "PAYLOAD_DROP_DATABASE=true tsx ./src/payload/seed/index.ts",
+    "seed:dev": "PAYLOAD_DROP_DATABASE=true tsx ./src/payload/seed/index.ts",
+    "seed:prod": "tsx ./src/payload/seed/index.ts",
+    "payload": "PAYLOAD_CONFIG_PATH=./src/payload/payload.config.ts payload",
     "lint": "next lint"
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.490.0",
     "@aws-sdk/lib-storage": "^3.490.0",
+    "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/next-js": "^2.2.0",
     "@chakra-ui/react": "^2.8.2",
     "@ducanh2912/next-pwa": "^10.1.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@gsap/react": "^2.1.0",
     "@payloadcms/bundler-webpack": "^1.0.5",
-    "@payloadcms/db-postgres": "^0.3.0",
+    "@payloadcms/db-postgres": "^0.4.0",
     "@payloadcms/next-payload": "^0.1.11",
     "@payloadcms/plugin-cloud-storage": "^1.1.1",
     "@payloadcms/richtext-slate": "^1.3.1",
@@ -32,9 +36,12 @@
     "cookies-next": "^4.1.0",
     "dotenv": "^16.3.1",
     "framer-motion": "^10.16.16",
+    "gsap": "^3.12.5",
+    "ignore-styles": "^5.0.1",
     "jwt-decode": "^4.0.0",
     "next": "13.5.5",
-    "payload": "^2.6.0",
+    "papaparse": "^5.4.1",
+    "payload": "^2.8.2",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.49.2",
@@ -43,11 +50,11 @@
     "superjson": "^1.13.3",
     "tsx": "^4.7.0",
     "usehooks-ts": "^2.9.2",
-    "zod": "^3.22.4",
-    "ignore-styles": "^5.0.1"
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@types/node": "^20",
+    "@types/papaparse": "^5",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "typescript": "^5",

webapp/public/pwa/manifest.json

@@ -50,8 +50,8 @@
       "purpose": "any"
     }
   ],
-  "theme_color": "#F7F7FA",
-  "background_color": "#F7F7FA",
+  "theme_color": "#F7F7F7",
+  "background_color": "#F7F7F7",
   "start_url": "/",
   "display": "standalone",
   "orientation": "portrait"

webapp/src/components/InstallationBanner.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from "react";
-import { Button, Flex, Icon, Text, useToast } from "@chakra-ui/react";
+import { Box, Button, Flex, Icon, Text, useToast } from "@chakra-ui/react";
 import { useAuth } from "~/providers/Auth";
 import { useLocalStorage } from "usehooks-ts";
+import { CloseIcon } from "@chakra-ui/icons";
 
 interface BeforeInstallPromptEvent extends Event {
   readonly platforms: Array<string>;
@@ -81,7 +82,7 @@ const InstallationBanner: React.FC = () => {
     return null;
 
   return (
-    <Flex
+    <Box
       position="absolute"
       bottom={24}
       left={6}
@@ -91,21 +92,39 @@ const InstallationBanner: React.FC = () => {
       p={4}
       borderRadius={8}
       bgColor="primary.500"
-      alignItems="center"
-      justifyContent="space-between"
     >
-      <Flex flexDir="column" gap={1}>
-        <Text fontSize="md" fontWeight="bold" color="white">
-          Installer l'application
-        </Text>
-        <Text fontSize="xs" color="white" noOfLines={2}>
-          Pour une meilleure expérience, installez l'app sur votre téléphone.
-        </Text>
+      <Flex
+        alignItems="center"
+        justifyContent="space-between"
+        position="relative"
+      >
+        <Flex flexDir="column" gap={1} w="70%">
+          <Text fontSize="md" fontWeight="bold" color="white">
+            Installer l'application
+          </Text>
+          <Text fontSize="xs" color="white" noOfLines={2}>
+            Pour une meilleure expérience, installez l'app sur votre téléphone.
+          </Text>
+        </Flex>
+        <Button
+          size="md"
+          variant="ghost"
+          color="white"
+          onClick={handleInstallClick}
+        >
+          Installer
+        </Button>
+        <CloseIcon
+          position="absolute"
+          h={3}
+          w={3}
+          right={-1}
+          top={-1}
+          color="white"
+          onClick={() => setUserOutcome("dismissed")}
+        />
       </Flex>
-      <Button size="lg" mx="auto" mr={1} onClick={handleInstallClick}>
-        Installer
-      </Button>
-    </Flex>
+    </Box>
   );
 };
 

webapp/src/components/LoadingLoader.tsx

@@ -0,0 +1,13 @@
+import { Spinner } from "@chakra-ui/react";
+
+export default function LoadingLoader() {
+  return (
+    <Spinner
+      thickness="4px"
+      speed="0.65s"
+      emptyColor="gray.200"
+      color="blue.400"
+      size="xl"
+    />
+  );
+}

webapp/src/components/OfferKindBadge.tsx

@@ -6,18 +6,19 @@ import { OnlineIcon } from "~/components/icons/online";
 export const OfferKindBadge = ({
   kind,
   variant,
+  chakraProps,
 }: {
   kind: Offer["kind"];
   variant: "light" | "dark";
+  chakraProps?: Record<string, unknown>;
 }) => {
   return (
     <Flex
-      py={1}
-      px={3}
       borderRadius="full"
       gap={2}
       alignItems="center"
       bgColor={variant === "light" ? "white" : "black"}
+      {...chakraProps}
     >
       {kind === "voucher" ? (
         <Icon

webapp/src/components/ToastComponent.tsx

@@ -0,0 +1,25 @@
+import { Flex, Icon, Text } from "@chakra-ui/react";
+import { IconType } from "react-icons/lib";
+
+export default function ToastComponent({
+  text,
+  icon,
+}: {
+  text: string;
+  icon: IconType;
+}) {
+  return (
+    <Flex
+      alignItems="center"
+      justifyContent="space-between"
+      bgColor="success"
+      color="white"
+      px={6}
+      py={4}
+      borderRadius="xl"
+    >
+      <Text fontWeight="medium">{text}</Text>
+      <Icon as={icon} w={6} h={6} ml={2} aria-label="Fermer le code promo" />
+    </Flex>
+  );
+}

webapp/src/components/icons/coupon.tsx

@@ -0,0 +1,23 @@
+import { Icon, IconProps } from "@chakra-ui/react";
+
+export const CouponIcon = (props: IconProps) => {
+  return (
+    <Icon width="24px" height="24px" viewBox="0 0 24 22" {...props}>
+      <path
+        d="M21 5H3C2.44772 5 2 5.44772 2 6V9.5H2.6C3.98071 9.5 5.1 10.6193 5.1 12C5.1 13.3807 3.98071 14.5 2.6 14.5H2V18C2 18.5523 2.44772 19 3 19H21C21.5523 19 22 18.5523 22 18V14.5H21.9C20.5193 14.5 19.4 13.3807 19.4 12C19.4 10.6193 20.5193 9.5 21.9 9.5H22V6C22 5.44772 21.5523 5 21 5Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15 5V19"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeDasharray="3 3"
+      />
+    </Icon>
+  );
+};

webapp/src/components/modals/OfferActivationModal.tsx

@@ -0,0 +1,79 @@
+import { ArrowForwardIcon } from '@chakra-ui/icons';
+import {
+  Button,
+  Text,
+  List,
+  ListIcon,
+  ListItem,
+  ModalBody,
+  ModalContent,
+  ModalHeader
+} from '@chakra-ui/react';
+import { FiClock, FiGlobe, FiRotateCw, FiTag } from 'react-icons/fi';
+import { IconType } from 'react-icons/lib';
+import { TbBuildingStore } from 'react-icons/tb';
+import { OfferIncluded } from '~/server/api/routers/offer';
+
+const OfferActivationModal = ({
+  onClose,
+  onlyCgu,
+  offer,
+  mutateCouponToUser
+}: {
+  onClose: () => void;
+  onlyCgu?: boolean;
+  offer: OfferIncluded;
+  mutateCouponToUser: ({ offer_id }: { offer_id: number }) => void;
+}) => {
+  const validityToDate = new Date(offer.validityTo);
+
+  const cguItems: { icon: IconType; text: string; cross?: boolean }[] = [
+    { icon: FiGlobe, text: 'Utilisable en ligne' },
+    { icon: TbBuildingStore, text: 'À utiliser en magasin', cross: true },
+    {
+      icon: FiClock,
+      text: `À utiliser avant le ${validityToDate.toLocaleDateString()} !`
+    },
+    { icon: FiRotateCw, text: 'Utilisation illimité' },
+    { icon: FiTag, text: 'Non cumulable' }
+  ];
+
+  return (
+    <ModalContent h="full">
+      {onlyCgu && <ModalHeader mt={4}>Conditions d’utilisation</ModalHeader>}
+      <ModalBody
+        pos="sticky"
+        display="flex"
+        flexDir="column"
+        justifyContent="end"
+        h="full"
+        py={10}
+      >
+        <List spacing={6} my="auto">
+          {cguItems.map(({ icon, text, cross }, index) => (
+            <ListItem key={index} display="flex" alignItems="center">
+              <ListIcon as={icon} w={6} h={6} mr={3}></ListIcon>
+              <Text
+                fontWeight="medium"
+                textDecorationLine={cross ? 'line-through' : 'none'}
+              >
+                {text}
+              </Text>
+            </ListItem>
+          ))}
+        </List>
+        <Button
+          rightIcon={!onlyCgu ? <ArrowForwardIcon w={6} h={6} /> : undefined}
+          onClick={() => {
+            if (!onlyCgu) mutateCouponToUser({ offer_id: offer.id });
+            onClose();
+          }}
+        >
+          {!onlyCgu ? 'Activer le code promo' : 'Fermer'}
+        </Button>
+      </ModalBody>
+    </ModalContent>
+  );
+};
+
+export default OfferActivationModal;