Merge pull request #26 from SocialGouv/feat/user-profile

feat: user profile

.kontinuous/env/dev/templates/app.configmap.yaml

@@ -4,5 +4,9 @@ metadata:
   name: app-configmap
 data:
   PAYLOAD_CONFIG_PATH: payload/payload.config.ts
+  SMTP_HOST: maildev
+  SMTP_PORT: "1025"
+  SMTP_FROM_NAME: "Carte Jeune Engagé"
+  SMTP_FROM_ADDRESS: [email protected]
   NEXT_PUBLIC_JWT_NAME: cje-jwt
   NEXT_PUBLIC_MATOMO_TRACKING_ENABLED: "false"

.kontinuous/env/dev/values.yaml

@@ -9,6 +9,8 @@ app:
     - secretRef:
         name: carte-jeune-engage-dev-app-access-key
 
+maildev: {}
+
 jobs:
   runs:
     seed:

.kontinuous/env/preprod/values.yaml

@@ -9,3 +9,5 @@ app:
         name: app-configmap
     - secretRef:
         name: carte-jeune-engage-dev-app-access-key
+
+maildev: {}

docker-compose.yaml

@@ -9,3 +9,9 @@ services:
       POSTGRES_DB: carte-jeune-engage
     ports:
       - "5433:5432"
+
+  maildev:
+    image: maildev/maildev
+    ports:
+      - "1080:1080"
+      - "1025:1025"

webapp/.env.example

@@ -13,4 +13,10 @@ S3_SECRET_ACCESS_KEY=your-secret-access-key
 # Matomo Analytics
 NEXT_PUBLIC_MATOMO_URL=https://your-matomo-url
 NEXT_PUBLIC_MATOMO_SITE_ID=your-matomo-site-id
-NEXT_PUBLIC_MATOMO_TRACKING_ENABLED=false
+NEXT_PUBLIC_MATOMO_TRACKING_ENABLED=false
+
+# SMTP Server
+SMTP_HOST=localhost
+SMTP_PORT=1025
+SMTP_FROM_NAME=your-smtp-from-name
+SMTP_FROM_ADDRESS=your-smtp-from-address

webapp/next.config.js

@@ -2,6 +2,8 @@
 const path = require("path");
 const { withPayload } = require("@payloadcms/next-payload");
 
+const { version } = require("./package.json");
+
 const withPWA = require("@ducanh2912/next-pwa").default({
   dest: "public",
   cacheOnFrontEndNav: true,
@@ -21,6 +23,9 @@ module.exports = withPayload(
     images: {
       domains: ["localhost"],
     },
+    env: {
+      CURRENT_PACKAGE_VERSION: version,
+    },
   }),
   {
     // The second argument to `withPayload`

webapp/package.json

@@ -41,7 +41,7 @@
     "jwt-decode": "^4.0.0",
     "next": "13.5.5",
     "papaparse": "^5.4.1",
-    "payload": "^2.8.2",
+    "payload": "^2.10.0",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.49.2",

webapp/src/components/InstallationBanner.tsx

@@ -1,15 +1,21 @@
-import React, { useEffect, useState } from "react";
-import { Box, Button, Flex, Icon, Text, useToast } from "@chakra-ui/react";
-import { BeforeInstallPromptEvent, useAuth } from "~/providers/Auth";
+import React from "react";
+import { 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";
 import { FiX } from "react-icons/fi";
 
-const InstallationBanner: React.FC = () => {
+type Props = {
+  ignoreUserOutcome: boolean;
+  theme?: "light" | "dark";
+};
+
+const InstallationBanner: React.FC<Props> = ({
+  ignoreUserOutcome,
+  theme = "light",
+}) => {
   // overlay show state
   const toast = useToast();
   const { user } = useAuth();
-  const [overlayShowing, setOverlayShowing] = useState(false);
   const [userOutcome, setUserOutcome] = useLocalStorage<
     "accepted" | "dismissed" | null
   >("cje-pwa-user-outcome", null);
@@ -18,11 +24,9 @@ const InstallationBanner: React.FC = () => {
 
   async function handleInstallClick() {
     if (deferredEvent) {
-      setOverlayShowing(true);
       await deferredEvent.prompt();
       const { outcome } = await deferredEvent.userChoice;
       setUserOutcome(outcome);
-      setOverlayShowing(false);
       setDeferredEvent(null);
     } else {
       toast({
@@ -35,10 +39,9 @@ const InstallationBanner: React.FC = () => {
   }
 
   if (
-    overlayShowing ||
     !showing ||
     user === null ||
-    userOutcome === "dismissed"
+    (!ignoreUserOutcome && userOutcome === "dismissed")
   )
     return null;
 
@@ -47,23 +50,26 @@ const InstallationBanner: React.FC = () => {
       flexDir="column"
       mb={4}
       p={4}
-      gap={4}
-      borderRadius="xl"
-      bgColor="cje-gray.500"
+      gap={3}
+      borderRadius="1.5xl"
+      bgColor={theme === "light" ? "cje-gray.500" : "blackLight"}
+      color={theme === "light" ? "black" : "white"}
     >
       <Flex alignItems="flex-start">
-        <Text fontSize="xl" fontWeight="bold" w="85%">
+        <Text fontSize="lg" fontWeight="bold" w="85%">
           Ajouter l’application sur votre téléphone
         </Text>
-        <Icon
-          as={FiX}
-          ml="auto"
-          h={7}
-          w={7}
-          onClick={() => setUserOutcome("dismissed")}
-        />
+        {!ignoreUserOutcome && (
+          <Icon
+            as={FiX}
+            ml="auto"
+            h={7}
+            w={7}
+            onClick={() => setUserOutcome("dismissed")}
+          />
+        )}
       </Flex>
-      <Text fontWeight="medium">
+      <Text fontSize="sm" fontWeight="medium">
         Créer un raccourci sur votre téléphone pour pouvoir accéder à toutes vos
         promotions simplement et rapidement.
       </Text>
@@ -72,7 +78,7 @@ const InstallationBanner: React.FC = () => {
         mt={3}
         py={3}
         fontSize="md"
-        fontWeight="medium"
+        fontWeight="bold"
         color="black"
         colorScheme="whiteBtn"
         onClick={handleInstallClick}

webapp/src/pages/dashboard/account/card.tsx

@@ -0,0 +1,99 @@
+import { Box, Center, Flex, Heading, Icon, Text } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import { useAuth } from "~/providers/Auth";
+import LoadingLoader from "~/components/LoadingLoader";
+import { HiArrowLeft, HiCheckBadge } from "react-icons/hi2";
+import Image from "next/image";
+
+export default function AccountCard() {
+  const router = useRouter();
+  const { user } = useAuth();
+
+  if (!user)
+    return (
+      <Center h="full" w="full">
+        <LoadingLoader />
+      </Center>
+    );
+
+  return (
+    <Box pt={12} pb={36} px={8}>
+      <Icon
+        as={HiArrowLeft}
+        w={6}
+        h={6}
+        onClick={() => router.back()}
+        cursor="pointer"
+      />
+      <Heading
+        as="h2"
+        size="lg"
+        fontWeight="extrabold"
+        mt={4}
+        textAlign="center"
+      >
+        Ma carte CJE
+      </Heading>
+      <Flex
+        flexDir="column"
+        alignItems="center"
+        bgColor="white"
+        borderRadius="1.5xl"
+        pt={12}
+        pb={6}
+        mt={10}
+        gap={8}
+      >
+        <Box borderRadius="full" overflow="hidden">
+          <Image
+            src={user.image.url as string}
+            alt={user.image.alt as string}
+            width={111}
+            height={111}
+            objectFit="cover"
+            objectPosition="center"
+            style={{ width: "111px", height: "111px" }}
+          />
+        </Box>
+        <Flex flexDir="column" alignItems="center" gap={3}>
+          <Text fontSize="2xl" fontWeight="extrabold">
+            {user.firstName} {user.lastName}
+          </Text>
+          <Text fontSize="sm" fontWeight="medium">
+            ID {user.id}
+          </Text>
+        </Flex>
+        <Flex
+          alignItems="center"
+          bgColor="primary.500"
+          borderRadius="xl"
+          px={3}
+          py={2}
+        >
+          <Icon as={HiCheckBadge} w={5} h={5} fill="white" mr={2} />
+          <Text fontSize="sm" fontWeight="bold" color="white">
+            Carte vérifiée
+          </Text>
+        </Flex>
+        <Flex flexDir="column" alignItems="center" gap={3}>
+          <Image
+            src="/images/government-banner.png"
+            alt="Bandeau du gouvernement français"
+            width={82}
+            height={49}
+          />
+          <Text
+            fontSize="xs"
+            fontWeight="medium"
+            color="disabled"
+            textAlign="center"
+          >
+            Carte membre beta testeur 2024
+            <br />
+            Projet carte jeunes engagés
+          </Text>
+        </Flex>
+      </Flex>
+    </Box>
+  );
+}