Merge pull request #23 from skni-kod/refactor/phone

Refactor/phone

Author: Finnick223

package-lock.json

@@ -31,6 +31,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
+    "google-libphonenumber": "^3.2.40",
     "iron-session": "^8.0.4",
     "lucide-react": "^0.454.0",
     "moment": "^2.30.1",
@@ -41,6 +42,7 @@
     "react-dom": "19.0.0-rc-02c0e824-20241028",
     "react-hook-form": "^7.54.2",
     "react-icons": "^5.3.0",
+    "react-international-phone": "^4.5.0",
     "react-toastify": "^10.0.6",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
@@ -52,6 +54,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
+    "@types/google-libphonenumber": "^7.4.30",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-big-calendar": "^1.16.0",

package.json

@@ -1,20 +1,21 @@
 'use client';
 
 import { FormField } from '@/components/shared/FormField';
+import { PhoneInput } from '@/components/shared/PhoneInput/PhoneInput';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
 import { axiosInstance } from '@/lib/axiosInstance';
 import { CourseRegistrationSchema } from '@/validators/courseRegistration';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
 interface CourseRegistrationFormProps {
   courseID: string;
-  onSuccess?: () => void; // callback do zamkniecia modala w RegistrationDialog
+  onSuccess?: () => void;
   buttonClassName?: string;
   buttonSize?: 'default' | 'sm' | 'lg' | 'icon' | null;
 }
@@ -24,6 +25,7 @@ interface FormValues {
   last_name: string;
   email: string;
   phone: string;
+  phone_country: string;
 }
 
 export default function CourseRegistrationForm({
@@ -32,93 +34,105 @@ export default function CourseRegistrationForm({
   buttonClassName,
   buttonSize = 'sm',
 }: CourseRegistrationFormProps) {
+  const methods = useForm<FormValues>({
+    resolver: zodResolver(CourseRegistrationSchema),
+    defaultValues: {
+      phone_country: 'pl',
+    },
+  });
+
   const {
     register,
     handleSubmit,
     formState: { errors },
     reset,
-  } = useForm<FormValues>({
-    resolver: zodResolver(CourseRegistrationSchema),
-  });
+  } = methods;
 
   const [isChecked, setIsChecked] = useState(false);
 
-  const onSubmit = async (data: FormValues) => {
+  const handleFormSubmit = async (data: FormValues) => {
     if (!isChecked) {
       toast.error('Musisz wyrazić zgodę na przetwarzanie danych.');
       return;
     }
 
     try {
+      console.log(data);
+
       await axiosInstance.post(`/api/courses/${courseID}/registrations`, data);
+
       toast.success('Wysłano zgłoszenie na kurs!');
       reset();
       setIsChecked(false);
-      if (onSuccess) onSuccess();
-    } catch (err) {
-      console.log(err);
-      toast.error('Wystąpił błąd podczas wysyłania zgłoszenia.');
+      onSuccess?.();
+    } catch (error) {
+      console.error('Błąd podczas wysyłania zgłoszenia:', error);
+      toast.error('Wystąpił błąd podczas wysyłania zgłoszenia.');
     }
   };
 
   return (
-    <form
-      onSubmit={handleSubmit(onSubmit)}
-      className='mt-3 flex flex-col items-stretch space-y-6'
-    >
-      <div className='mb-5 grid grid-cols-1 gap-4 sm:grid-cols-2'>
-        <FormField
-          id='name'
-          label='Imię'
-          register={register}
-          error={errors.name?.message}
-        />
-        <FormField
-          id='last_name'
-          label='Nazwisko'
-          register={register}
-          error={errors.last_name?.message}
-        />
-        <FormField
-          id='email'
-          label='Adres e-mail'
-          register={register}
-          error={errors.email?.message}
-        />
-        <FormField
-          id='phone'
-          label='Numer telefonu'
-          register={register}
-          error={errors.phone?.message}
-        />
-      </div>
-      <div className='flex items-start gap-2'>
-        <Checkbox
-          id='agreement'
-          checked={isChecked}
-          onCheckedChange={(checked) => setIsChecked(!!checked)}
-        />
-        <Label htmlFor='agreement' className='text-xs'>
-          Wyrażam zgodę na przetwarzenie moich danych przez Ośrodek Szkolenia
-          Kierowców “Nazwa szkoły” w następujących celach: nawiązania kontaktu
-          podczas realizacji kursu / szkolenia / kwalifikacji; zapisu na egzamin
-          państwowy do wybranego Wojewódzkiego Ośrodka Ruchu Drogowego; zapisu
-          na jazdy w warunkach specjalnych; wyrobieniu Profilu Kandydata na
-          Kierowcą w wybranym Wydziale Komunikacji; zapisu na jazdy próbne przed
-          egzaminem państwowym w wybranym Wojewódzkim Ośrodku Ruchu Drogowego;
-          zgłoszenia do ubezpieczenia wynikającego ze skierowania na szkolenie
-          oraz innych wynikających z prawidłowego wykonania usługi. Dane osobowe
-          podaję dobrowolnie i oświadczam, że są one zgodne z prawdą.
-          Zapoznałem/am się z treścią klauzuli informacyjnej, w tym z informacją
-          o celu i sposobach przetwarzania danych osobowych oraz prawie dostępu
-          do treści swoich danych i prawie ich poprawiania.
-        </Label>
-      </div>
-      <div className='flex flex-row justify-center gap-2 md:justify-start'>
-        <Button type='submit' size={buttonSize} className={buttonClassName}>
-          ZAPISUJĘ SIĘ!
-        </Button>
-      </div>
-    </form>
+    <FormProvider {...methods}>
+      <form
+        onSubmit={handleSubmit(handleFormSubmit)}
+        className='mt-3 flex flex-col items-stretch space-y-6'
+      >
+        <div className='mb-5 grid grid-cols-1 gap-4 sm:grid-cols-2'>
+          <FormField
+            id='name'
+            label='Imię'
+            register={register}
+            error={errors.name?.message}
+          />
+          <FormField
+            id='last_name'
+            label='Nazwisko'
+            register={register}
+            error={errors.last_name?.message}
+          />
+          <FormField
+            id='email'
+            label='Adres e-mail'
+            register={register}
+            error={errors.email?.message}
+          />
+          <PhoneInput
+            id='phone'
+            label='Numer telefonu'
+            register={register}
+            error={errors.phone?.message}
+            countryName='phone_country'
+          />
+        </div>
+        <div className='flex items-start gap-2'>
+          <Checkbox
+            id='agreement'
+            checked={isChecked}
+            onCheckedChange={(checked) => setIsChecked(!!checked)}
+          />
+          <Label htmlFor='agreement' className='text-xs'>
+            Wyrażam zgodę na przetwarzenie moich danych przez Ośrodek Szkolenia
+            Kierowców &quot;Nazwa szkoły&quot; w następujących celach:
+            nawiązania kontaktu podczas realizacji kursu / szkolenia /
+            kwalifikacji; zapisu na egzamin państwowy do wybranego Wojewódzkiego
+            Ośrodka Ruchu Drogowego; zapisu na jazdy w warunkach specjalnych;
+            wyrobieniu Profilu Kandydata na Kierowcą w wybranym Wydziale
+            Komunikacji; zapisu na jazdy próbne przed egzaminem państwowym w
+            wybranym Wojewódzkim Ośrodku Ruchu Drogowego; zgłoszenia do
+            ubezpieczenia wynikającego ze skierowania na szkolenie oraz innych
+            wynikających z prawidłowego wykonania usługi. Dane osobowe podaję
+            dobrowolnie i oświadczam, że są one zgodne z prawdą. Zapoznałem/am
+            się z treścią klauzuli informacyjnej, w tym z informacją o celu i
+            sposobach przetwarzania danych osobowych oraz prawie dostępu do
+            treści swoich danych i prawie ich poprawiania.
+          </Label>
+        </div>
+        <div className='flex flex-row justify-center gap-2 md:justify-start'>
+          <Button type='submit' size={buttonSize} className={buttonClassName}>
+            ZAPISUJĘ SIĘ!
+          </Button>
+        </div>
+      </form>
+    </FormProvider>
   );
 }