fix a bug that could prevent user to selet their payment methods

frontend/locales/en.json

@@ -160,6 +160,7 @@
     "and/or": "and/or",
     "form name recommandation": "recommendation: Contract <contract-type> (Example: Pork-Lamb Contract)",
     "submit contract": "submit contract",
+    "submit": "submit",
     "example in user forms": "example in user contract form",
     "occasional product": "occasional product",
     "recurrent product": "recurrent product",

frontend/locales/fr.json

@@ -160,6 +160,7 @@
     "and/or": "et/ou",
     "form name recommandation": "recommandation : Contrat <contract-type> (Exemple : Contrat Porc-Agneau)",
     "submit contract": "envoyer le contrat",
+    "submit": "envoyer",
     "example in user forms": "exemple dans le formulaire à destination des amapiens",
     "occasional product": "produit occasionnel",
     "recurrent product": "produit récurrent",

frontend/src/components/Forms/Modal/index.tsx

@@ -53,6 +53,8 @@ export default function FormModal({ opened, onClose, currentForm, handleSubmit }
     });
 
     const usersSelect = useMemo(() => {
+        if (!users)
+            return [];
         return users?.map((user) => ({
             value: String(user.id),
             label: `${user.name}`,
@@ -60,6 +62,8 @@ export default function FormModal({ opened, onClose, currentForm, handleSubmit }
     }, [users]);
 
     const productorsSelect = useMemo(() => {
+        if (!productors)
+            return [];
         return productors?.map((prod) => ({
             value: String(prod.id),
             label: `${prod.name}`,

frontend/src/components/Navbar/index.tsx

@@ -4,9 +4,12 @@ import "./index.css";
 import { Group, Loader } from "@mantine/core";
 import { Config } from "@/config/config";
 import { useAuth } from "@/services/auth/AuthProvider";
+import { useMediaQuery } from "@mantine/hooks";
+import { IconHome, IconLogin, IconLogout, IconSettings } from "@tabler/icons-react";
 
 export function Navbar() {
     const { loggedUser: user, isLoading } = useAuth();
+    const isPhone = useMediaQuery("(max-width: 760px");
 
     if (!user && isLoading) {
         return (
@@ -20,11 +23,11 @@ export function Navbar() {
         <nav>
             <Group>
                 <NavLink className={"navLink"} aria-label={t("home")} to="/">
-                    {t("home", { capfirst: true })}
+                    {isPhone ? <IconHome/> : t("home", { capfirst: true })}
                 </NavLink>
                 {user?.logged ? (
                     <NavLink className={"navLink"} aria-label={t("dashboard")} to="/dashboard/help">
-                        {t("dashboard", { capfirst: true })}
+                        {isPhone ? <IconSettings/> : t("dashboard", { capfirst: true })}
                     </NavLink>
                 ) : null}
             </Group>
@@ -34,7 +37,7 @@ export function Navbar() {
                     className={"navLink"}
                     aria-label={t("login with keycloak", { capfirst: true })}
                 >
-                    {t("login with keycloak", { capfirst: true })}
+                    {isPhone ? <IconLogin/> : t("login with keycloak", { capfirst: true })}
                 </a>
             ) : (
                 <a
@@ -42,7 +45,7 @@ export function Navbar() {
                     className={"navLink"}
                     aria-label={t("logout", { capfirst: true })}
                 >
-                    {t("logout", { capfirst: true })}
+                    {isPhone ? <IconLogout/> : t("logout", { capfirst: true })}
                 </a>
             )}
         </nav>

frontend/src/components/Products/Modal/index.tsx

@@ -59,6 +59,8 @@ export function ProductModal({ opened, onClose, currentProduct, handleSubmit }:
     });
 
     const productorsSelect = useMemo(() => {
+        if (!productors)
+            return [];
         return productors?.map((productor) => ({
             value: String(productor.id),
             label: `${productor.name}`,

frontend/src/components/Shipments/Modal/index.tsx

@@ -48,6 +48,8 @@ export default function ShipmentModal({
     const { data: allProductors } = useGetProductors();
 
     const formsSelect = useMemo(() => {
+        if (!allForms)
+            return [];
         return allForms?.map((currentForm) => ({
             value: String(currentForm.id),
             label: `${currentForm.name} ${currentForm.season}`,
@@ -55,7 +57,7 @@ export default function ShipmentModal({
     }, [allForms]);
 
     const productsSelect = useMemo(() => {
-        if (!allProducts || !allProductors) return;
+        if (!allProducts || !allProductors) return [];
         return allProductors?.map((productor) => {
             return {
                 group: productor.name,

frontend/src/components/Users/Modal/index.tsx

@@ -36,6 +36,8 @@ export function UserModal({ opened, onClose, currentUser, handleSubmit }: UserMo
     });
 
     const roleSelect = useMemo(() => {
+        if (!allRoles)
+            return [];
         return allRoles?.map((role) => ({ value: String(role.name), label: role.name }));
     }, [allRoles]);
 

frontend/src/pages/Contract/index.tsx

@@ -165,7 +165,7 @@ export function Contract() {
         );
 
     return (
-        <Stack w={{ base: "100%", md: "80%", lg: "50%" }}>
+        <Stack w={{ base: "100%", md: "80%", lg: "50%" }} p={{base: 'xs'}}>
             <Title order={2}>{form.name}</Title>
             <Title order={3}>{t("informations", { capfirst: true })}</Title>
             <Text size="sm">
@@ -283,6 +283,10 @@ export function Contract() {
                 ref={(el) => {
                     inputRefs.current.payment_method = el;
                 }}
+                comboboxProps={{ 
+                    withinPortal: false,
+                    position: "bottom-start",
+                }}
             />
             {inputForm.values.payment_method === "cheque" ? (
                 <ContractCheque
@@ -319,7 +323,7 @@ export function Contract() {
                 <Button 
                     leftSection={<IconDownload/>}
                     aria-label={t("submit contracts")} onClick={handleSubmit}>
-                    {t("submit contract", {capfirst: true})}
+                    {t("submit", {capfirst: true})}
                 </Button>
             </Overlay>
         </Stack>

frontend/src/pages/Productors/index.tsx

@@ -40,12 +40,16 @@ export default function Productors() {
     }, [navigate, searchParams]);
 
     const names = useMemo(() => {
+        if (!allProductors)
+            return [];
         return allProductors
             ?.map((productor: Productor) => productor.name)
             .filter((season, index, array) => array.indexOf(season) === index);
     }, [allProductors]);
 
     const types = useMemo(() => {
+        if (!allProductors)
+            return [];
         return allProductors
             ?.map((productor: Productor) => productor.type)
             .filter((productor, index, array) => array.indexOf(productor) === index);

frontend/src/pages/Products/index.tsx

@@ -38,12 +38,16 @@ export default function Products() {
     const { data: allProducts } = useGetProducts();
 
     const names = useMemo(() => {
+        if (!allProducts)
+            return [];
         return allProducts
             ?.map((product: Product) => product.name)
             .filter((season, index, array) => array.indexOf(season) === index);
     }, [allProducts]);
 
     const productors = useMemo(() => {
+        if (!allProducts)
+            return [];
         return allProducts
             ?.map((product: Product) => product.productor.name)
             .filter((productor, index, array) => array.indexOf(productor) === index);

frontend/src/pages/Shipments/index.tsx

@@ -44,12 +44,16 @@ export default function Shipments() {
     const { data: allShipments } = useGetShipments();
 
     const names = useMemo(() => {
+        if (!allShipments)
+            return [];
         return allShipments
             ?.map((shipment: Shipment) => shipment.name)
             .filter((season, index, array) => array.indexOf(season) === index);
     }, [allShipments]);
 
     const forms = useMemo(() => {
+        if (!allShipments)
+            return [];
         return allShipments
             ?.map((shipment: Shipment) => shipment.form.name)
             .filter((season, index, array) => array.indexOf(season) === index);

frontend/src/pages/Users/index.tsx

@@ -36,6 +36,8 @@ export default function Users() {
     const { data: allUsers } = useGetUsers();
 
     const names = useMemo(() => {
+        if (!allUsers)
+            return [];
         return allUsers
             ?.map((user: User) => user.name)
             .filter((season, index, array) => array.indexOf(season) === index);