M backend/src/api/travel/content-types/travel/lifecycles.ts → backend/src/api/travel/content-types/travel/lifecycles.ts

@@ -47,7 +47,7 @@ );
     }
   },
 
-  async beforeDelete({ params, ...others }) {
+  async beforeDelete({ params }) {
     const travel = await strapi.entityService.findOne(
       "api::travel.travel",
       params.where?.id,

M frontend/components/PhoneInput/index.tsx → frontend/components/PhoneInput/index.tsx

@@ -3,6 +3,7 @@ import {PhoneNumberUtil} from 'google-libphonenumber';
 import {
   InputAdornment,
   MenuItem,
+  MenuProps,
   Select,
   TextField,
   TextFieldProps,
@@ -30,15 +31,6 @@ error: boolean;
   }) => void;
   label: string;
 }
-
-const phoneUtil = PhoneNumberUtil.getInstance();
-const isPhoneValid = (phone: string) => {
-  try {
-    return phoneUtil.isValidNumber(phoneUtil.parseAndKeepRawInput(phone));
-  } catch (error) {
-    return false;
-  }
-};
 
 const PhoneInput = ({
   value,
@@ -59,9 +51,10 @@ defaultCountry: defaultCountry || defaultCountries[0][1],
       value: phone,
       countries: defaultCountries,
       onChange: ({phone, country}) => {
-        setPhone(phone);
-        if (isPhoneValid(phone))
-          onChange({phone, country: country.iso2, error: false});
+        const formatedPhone = phone?.replace(/^\+0*/, '+');
+        setPhone(formatedPhone);
+        if (isPhoneValid(formatedPhone))
+          onChange({phone: formatedPhone, country: country.iso2, error: false});
         else onChange({phone: '', country: '', error: true});
       },
     });
@@ -77,70 +70,82 @@ value={inputValue}
       onChange={handlePhoneValueChange}
       type="tel"
       inputRef={inputRef}
-      InputProps={{
-        startAdornment: (
-          <InputAdornment
-            position="start"
-            style={{marginRight: '2px', marginLeft: '-8px'}}
-          >
-            <Select
-              MenuProps={{
-                style: {
-                  height: '300px',
-                  width: '360px',
-                  top: '10px',
-                  left: '-34px',
-                },
-                transformOrigin: {
-                  vertical: 'top',
-                  horizontal: 'left',
-                },
-              }}
-              sx={{
-                width: 'max-content',
-                // Remove default outline (display only on focus)
-                fieldset: {
-                  display: 'none',
-                },
-                '&.Mui-focused:has(div[aria-expanded="false"])': {
-                  fieldset: {
-                    display: 'block',
-                  },
-                },
-                // Update default spacing
-                '.MuiSelect-select': {
-                  padding: '8px',
-                  paddingRight: '24px !important',
-                },
-                svg: {
-                  right: 0,
-                },
-              }}
-              value={country.iso2}
-              onChange={e => setCountry(e.target.value)}
-              renderValue={value => (
-                <FlagImage iso2={value} style={{display: 'flex'}} />
-              )}
-            >
-              {defaultCountries.map(c => {
-                const country = parseCountry(c);
-                return (
-                  <MenuItem key={country.iso2} value={country.iso2}>
-                    <FlagImage
-                      iso2={country.iso2}
-                      style={{marginRight: '8px'}}
-                    />
-                    <Typography marginRight="8px">{country.name}</Typography>
-                    <Typography color="gray">+{country.dialCode}</Typography>
-                  </MenuItem>
-                );
-              })}
-            </Select>
-          </InputAdornment>
-        ),
+      slotProps={{
+        input: {
+          startAdornment: (
+            <InputAdornment position="start" sx={{mr: 0.5, ml: -2}}>
+              <Select
+                MenuProps={menuProps}
+                sx={selectSx}
+                value={country.iso2}
+                onChange={e => setCountry(e.target.value)}
+                renderValue={value => (
+                  <FlagImage iso2={value} style={{display: 'flex'}} />
+                )}
+              >
+                {defaultCountries.map(c => {
+                  const country = parseCountry(c);
+                  return (
+                    <MenuItem key={country.iso2} value={country.iso2}>
+                      <FlagImage
+                        iso2={country.iso2}
+                        style={{marginRight: '8px'}}
+                      />
+                      <Typography marginRight="8px">{country.name}</Typography>
+                      <Typography color="gray">+{country.dialCode}</Typography>
+                    </MenuItem>
+                  );
+                })}
+              </Select>
+            </InputAdornment>
+          ),
+        },
       }}
     />
   );
+};
+
+const phoneUtil = PhoneNumberUtil.getInstance();
+const isPhoneValid = (phone: string) => {
+  try {
+    return phoneUtil.isValidNumber(phoneUtil.parseAndKeepRawInput(phone));
+  } catch (error) {
+    return false;
+  }
+};
+
+const selectSx = {
+  width: 'max-content',
+  // Remove default outline (display only on focus)
+  fieldset: {
+    display: 'none',
+  },
+  '&.Mui-focused:has(div[aria-expanded="false"])': {
+    fieldset: {
+      display: 'block',
+    },
+  },
+  // Update default spacing
+  '.MuiSelect-select': {
+    padding: '8px',
+    paddingRight: '24px !important',
+  },
+  svg: {
+    right: 0,
+  },
+};
+
+const menuProps: Partial<MenuProps> = {
+  style: {
+    height: '300px',
+    width: '360px',
+    top: '10px',
+    left: '-34px',
+  },
+  transformOrigin: {
+    vertical: 'top',
+    horizontal: 'left',
+  },
 };
 
 export default PhoneInput;