Merge branch 'dev' into feat/front-stripe

src/app/(dashboard)/admin/shop/page.tsx

@@ -6,6 +6,7 @@ import { AdminItem } from '@/types';
 import { useEffect, useRef, useState } from 'react';
 import styles from './style.module.scss';
 import { fetchAdminItems, reorderItems } from '@/modules/admin';
+import { getItemImageLink } from '@/utils/uploadLink';
 
 const Shop = () => {
   const shopItems = useAppSelector((state) => state.admin.items);
@@ -27,7 +28,7 @@ const Shop = () => {
       shopItems?.map((item, index) => (
         <Square
           key={index}
-          imgSrc={item.image ? '/images/' + item.image : undefined}
+          imgSrc={item.image ? getItemImageLink(item.id) : undefined}
           alt={item.name}
           onClick={(e) => {
             if ((e!.target as ChildNode).parentElement?.parentElement?.classList.contains('dragging')) return;

src/app/(dashboard)/dashboard/register/page.tsx

@@ -275,8 +275,11 @@ const Register = () => {
                 <>
                   En cochant cette case je certifie avoir lu et accepté{' '}
                   {userType !== UserType.spectator && 'le règlement du tournoi (disponible sur la page du tournoi), '}{' '}
-                  le <a href={`${uploadsUrl()}/rules/ua.pdf`}>règlement de l'UTT Arena</a> et autorise la prise de vue
-                  comme indiqué dans celui-ci
+                  le{' '}
+                  <a href={`${uploadsUrl()}/rules/ua.pdf`} target="_blank">
+                    règlement de l'UTT Arena
+                  </a>{' '}
+                  et autorise la prise de vue comme indiqué dans celui-ci
                 </>
               }
               value={acceptedRules}

src/app/(dashboard)/dashboard/shop/page.tsx

@@ -15,6 +15,7 @@ import { useAppDispatch, useAppSelector } from '@/lib/hooks';
 import { AttendantInfo, CartItem, Item, Permission, User, UserAge, UserType } from '@/types';
 import { IconName } from '@/components/UI/Icon';
 import { setRedirect } from '@/modules/redirect';
+import { getItemImageLink } from '@/utils/uploadLink';
 
 // Hello there ! This is a big file (and it's not the only one :P), I commented it as well as I could, I hope you'll understand :)
 
@@ -43,8 +44,8 @@ const Shop = () => {
   // The item that is beeing previewed. This is a string containing the relative path to the image, starting from public/
   // If itemPreview is null, then there is nothing to preview, and thus the modal for the preview is not displayed
   const [itemPreview, setItemPreview] = useState<{
-    image: string;
     visible: boolean;
+    id: string;
   } | null>(null);
   // The members of the team who didn't buy a ticket
   const [teamMembersWithoutTicket, setTeamMembersWithoutTicket] = useState<User[]>([]);
@@ -283,8 +284,8 @@ const Shop = () => {
 
   // Callback of SupplementList. It is called when the user wants to preview an item
   // newItemPreview is the new value of itemPreview.
-  const onItemPreview = (newItemPreview: string) => {
-    setItemPreview({ image: newItemPreview, visible: true });
+  const onItemPreview = (id: string) => {
+    setItemPreview({ id, visible: true });
   };
 
   // Called when the user clicks on the pay button
@@ -430,7 +431,7 @@ const Shop = () => {
         {itemPreview && (
           <img
             alt="Preview image"
-            src={`/images/${itemPreview.image}`}
+            src={getItemImageLink(itemPreview.id)}
             className={styles.itemPreviewImage}
             loading="lazy"
           />

src/app/(dashboard)/dashboard/team/page.tsx

@@ -10,8 +10,6 @@ import { Button, Helper, Icon, Modal, Table, Title } from '@/components/UI';
 import { useAppDispatch, useAppSelector } from '@/lib/hooks';
 import { Tournament, User, UserType } from '@/types';
 import { IconName } from '@/components/UI/Icon';
-import Link from 'next/link';
-import { getTournamentRulesLink } from '@/utils/uploadLink';
 
 const memberColumns = [
   { title: 'Pseudo', key: 'username' },
@@ -213,9 +211,9 @@ const Page = () => {
         </Title>
         <div>
           <Icon name={IconName.Refresh} className={styles.refresh} onClick={() => document.location.reload()} />
-          <Link href={getTournamentRulesLink(tournament.id)} target="_blank">
+          {/*<Link href={getTournamentRulesLink(tournament.id)} target="_blank">
             <Button primary>Voir les règles</Button>
-          </Link>
+          </Link>*/}
         </div>
       </div>
       <div className={styles.header}>

src/app/event/page.tsx

@@ -185,7 +185,7 @@ export default function Page() {
               type: 'Joueur',
               price: '28 €',
               description:
-                'Pour les joueurs SSBU : 24€. Pour les étudiants UT : réduction de 5€ en utilisant ton adresse mail étudiante',
+                'Pour les joueurs SSBU : 15€. Pour les étudiants UT : réduction de 5€ en utilisant ton adresse mail étudiante',
             },
             {
               type: 'Coach / Manager',

src/app/event/style.module.scss

@@ -148,7 +148,7 @@
   }
 }
 
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: 1048px) {
   .eventPage {
     .textAndImage {
       flex-direction: column;
@@ -192,6 +192,10 @@
         line-height: 100%;
         width: 100%;
       }
+
+      .text {
+        text-align: center;
+      }
     }
 
     .steps {

src/app/help/page.tsx

@@ -122,7 +122,7 @@ const faq: Faq = {
       answer: (
         <>
           <ul>
-            <li>24 € pour les joueurs du tournoi Super Smash Bros. Ultimate</li>
+            <li>15 € pour les joueurs du tournoi Super Smash Bros. Ultimate</li>
             <li>28 € pour les joueurs des autres tournois</li>
             <li>15 € en tant que coach, manager</li>
             <li>10 € en tant qu'accompagnateur (pour les mineurs)</li>
@@ -143,7 +143,7 @@ const faq: Faq = {
     {
       question: 'Puis-je payer en espèces ?',
       answer:
-        'Il sera possible de payer en espèces sur place, mais à tes risques et périls, car il y a de fortes chances que toutes les places soient déjà parties.',
+        "Payer en espèce sur place n'est possible que pour les places spectateurs. Si vous êtes un joueur, vous devez impérativement payer en ligne via la billetterie.",
     },
     {
       question: 'Puis-je payer par PayPal ?',
@@ -241,6 +241,11 @@ const Help = () => {
       setEmail('');
       setMessage('');
       setSubject('');
+
+      if (user) {
+        setName(user.firstname + ' ' + user.lastname);
+        setEmail(user.email);
+      }
     }
   };
 
@@ -273,7 +278,7 @@ const Help = () => {
                     .normalize('NFD')
                     .replace(/[\u0300-\u036f]/g, '')}-${index}`
                 }>
-                <p>{question.answer}</p>
+                <div className={styles.answer}>{question.answer}</div>
               </Collapse>
             ))}
           </div>

src/app/help/style.module.scss

@@ -29,6 +29,10 @@
         font-family: $kanit;
         margin: 1rem 0;
       }
+
+      .answer {
+        padding-bottom: 0.5rem;
+      }
     }
   }
 }

src/app/page.tsx

@@ -104,9 +104,8 @@ const Home = () => {
       <AppearFromSide className={styles.information}>
         <TextBlock title="UTT Arena 2024" images={[doubleImage1.src, doubleImage2.src]}>
           Le rendez-vous incontournable des amateurs de gaming de la région Grand-Est est de retour ! Il aura lieu les{' '}
-          <strong>6, 7 et 8 décembre 2024</strong> dans un tout nouveau lieu : au sein des locaux de l’Université de
-          Technologie de Troyes ! Nous vous attendons nombreux pour cette 22e édition afin de passer 2 jours de folie !{' '}
-          <br />
+          <strong>6, 7 et 8 décembre 2024</strong> au sein des locaux de l’Université de Technologie de Troyes ! Nous{' '}
+          vous attendons nombreux pour cette 22e édition afin de passer 2 jours de folie ! <br />
           <br />
           Au programme : <strong>6 tournois</strong> sur tes jeux favoris, <strong>48h</strong> pour montrer tes skills
           parmis les <strong>416 joueurs</strong> qui composeront l’évènement, et tenter de remporter les{' '}
@@ -135,7 +134,7 @@ const Home = () => {
             <strong>un tournoi multigaming</strong>. <br />
             Tous les tournois donnent accès à la salle, à la buvette et à ses autres activités{' '}
             <strong>du vendredi soir au dimanche</strong> en <strong>24h/24</strong>. Tous les joueurs des tournois PC
-            et libre (donc hors SSBU) auront accès à une <strong>place assise fixe</strong> où installer leurs
+            et multigaming (donc hors SSBU) auront accès à une <strong>place assise fixe</strong> où installer leurs
             ordinateurs. N’hésitez pas et rejoignez-nous dans l’arène !
           </div>
         </div>

src/components/Footer.module.scss

@@ -6,7 +6,7 @@
   overflow: hidden;
 
   img {
-    width: 230px;
+    width: 225px;
   }
 
   h3 {
@@ -183,6 +183,8 @@
 
 @media screen and (max-width: 341px) {
   .footer {
+    text-align: center;
+
     img {
       height: unset;
     }

src/components/UI/Table.module.scss

@@ -1,6 +1,7 @@
 @import '@/variables.scss';
 
 .tableContainer {
+  overflow: auto;
   .pagination {
     display: flex;
     gap: 0.5rem;

src/components/dashboard/Cart.stories.tsx

@@ -34,7 +34,7 @@ export const Default: Story = {
         id: '1',
         name: 'Item 1',
         price: 100,
-        image: 'https://via.placeholder.com/150',
+        image: true,
         infos: 'test',
         left: 10,
       },

src/components/dashboard/ItemModal.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react';
-import { Modal, Button, Input, Textarea, Checkbox, Select } from '@/components/UI';
+import { Modal, Button, Input, Textarea, Checkbox, Select, FileInput } from '@/components/UI';
 import { useAppDispatch } from '@/lib/hooks';
 import { AdminItem } from '@/types';
 import { updateItem } from '@/modules/admin';
+import { getItemImageLink } from '@/utils/uploadLink';
 
 /** The partner modal */
 const ItemModal = ({
@@ -23,6 +24,7 @@ const ItemModal = ({
   const [endDate, setEndDate] = useState(item?.availableUntil || null);
   const [quantity, setQuantity] = useState(item?.stock || null);
   const [infos, setInfos] = useState(item?.infos || null);
+  const [image, setImage] = useState<File | null>(null);
   const [display, setDisplay] = useState(item?.display || false);
 
   const [attribute, setAttribute] = useState(item?.attribute || null);
@@ -59,23 +61,19 @@ const ItemModal = ({
                 id: id ?? '',
                 name: name ?? '',
                 category: category ?? '',
-                attribute: attribute ?? '',
+                attribute: attribute ? attribute : null,
                 price: price ?? 0,
                 reducedPrice: reducedPrice ?? 0,
                 availableFrom: startDate ?? '',
                 availableUntil: endDate ?? '',
                 // we update the stock through a difference between the current stock and the quantity in order to avoid conflicts if an order is made at the same time
                 left: quantity! - item!.stock! ?? item!.stock!,
                 infos: infos ?? '',
-                display,
+                display: display ?? false,
               } as AdminItem;
 
-              if (attribute === '') {
-                delete body.attribute;
-              }
-
               dispatch(
-                updateItem(body, () => {
+                updateItem(body, image, () => {
                   onClose!();
                 }),
               );
@@ -125,6 +123,7 @@ const ItemModal = ({
           onChange={(value) => setQuantity(value as unknown as number)}
         />
         <Textarea label="Description" value={infos ?? ''} onChange={setInfos} />
+        <FileInput label="Logo" value={item ? getItemImageLink(item.id) : ''} onChange={setImage} type={['png']} />
         <Checkbox label="Display" value={display} onChange={setDisplay} />
       </>
     </Modal>

src/components/dashboard/SupplementList.stories.tsx

@@ -16,7 +16,7 @@ export const Default: Story = {
         id: '1',
         name: 'Item 1',
         price: 100,
-        image: 'https://via.placeholder.com/150',
+        image: true,
         infos: 'test',
         left: 10,
         attribute: 'test',

src/components/dashboard/SupplementList.tsx

@@ -43,7 +43,7 @@ const SupplementList = ({
   /** The function to call when the supplement cart changes */
   onSupplementCartChanges: (newSupplementCart: typeof supplementCart) => void;
   /** The function to call when the user wants to preview an item */
-  onItemPreview: (image: string) => void;
+  onItemPreview: (id: string) => void;
   /** The item type */
   itemType: string;
   /** The shop section name */
@@ -208,7 +208,7 @@ const SupplementList = ({
               <Button
                 className={styles.itemPreviewButton}
                 onLightBackground
-                onClick={() => onItemPreview(supplement.image!)}>
+                onClick={() => onItemPreview(supplement.id!)}>
                 Voir le design
               </Button>
             )}

src/modules/admin.ts

@@ -9,6 +9,8 @@ import {
   getTournamentRulesName,
   getTournamentBackgroundName,
   getPartnerLogoLink,
+  getItemImageName,
+  ITEM_FOLDER,
 } from '@/utils/uploadLink';
 import { deleteFile, uploadFile } from '@/utils/upload';
 import * as normalPartners from '@/modules/partners';
@@ -274,7 +276,7 @@ export const fetchAdminItems = (): AppThunk => async (dispatch) => {
 };
 
 export const updateItem =
-  (item: AdminItem, callback: () => void): AppThunk =>
+  (item: AdminItem, image: File | null, callback: () => void): AppThunk =>
   async (dispatch) => {
     try {
       const result = await API.patch(`admin/items/${item.id}`, {
@@ -288,8 +290,13 @@ export const updateItem =
         availableFrom: item.availableFrom,
         availableUntil: item.availableUntil,
         display: item.display.toString(),
+        image: image ? true : false,
       });
 
+      if (result && image) {
+        await uploadFile(image, getItemImageName(result.id), ITEM_FOLDER);
+      }
+
       callback();
       toast.success("L'item a bien été mis à jour");
 

src/types.ts

@@ -198,7 +198,7 @@ export interface Item {
   attributes?: string[] | null;
   price: number;
   infos: string | null;
-  image: string | null;
+  image: boolean | null;
   left: number | null;
   availableFrom?: Date;
   availableUntil?: Date;

src/utils/uploadLink.ts

@@ -1,5 +1,6 @@
 // Consts
 export const TOURNAMENT_FOLDER = 'tournaments';
+export const ITEM_FOLDER = 'items';
 export const PARTNER_FOLDER = 'partners';
 
 // Tournaments
@@ -40,3 +41,12 @@ export const getPartnerLogoName = (partnerId: string) => {
 export const getPartnerLogoLink = (partnerId: string) => {
   return `${process.env.NEXT_PUBLIC_UPLOADS_URL}/${PARTNER_FOLDER}/${getPartnerLogoName(partnerId)}.webp`;
 };
+
+// Items
+export const getItemImageName = (itemId: string) => {
+  return `${itemId}-logo`;
+};
+
+export const getItemImageLink = (itemId: string) => {
+  return `${process.env.NEXT_PUBLIC_UPLOADS_URL}/${ITEM_FOLDER}/${getItemImageName(itemId)}.webp`;
+};