Merge branch 'develop' into sign_up_password_bugs

saeloun · Mar 26, 2024 · 417887c · 417887c
2 parents 223f2f6 + 3e063fd
commit 417887c
Show file tree

Hide file tree

Showing 54 changed files with 1,017 additions and 806 deletions.
diff --git a/app/controllers/internal_api/v1/timeoff_entries_controller.rb b/app/controllers/internal_api/v1/timeoff_entries_controller.rb
@@ -15,7 +15,9 @@ def index
       timeoff_entries: data[:timeoff_entries],
       employees: data[:employees],
       leave_balance: data[:leave_balance],
-      total_timeoff_entries_duration: data[:total_timeoff_entries_duration]
+      total_timeoff_entries_duration: data[:total_timeoff_entries_duration],
+      optional_timeoff_entries: data[:optional_timeoff_entries],
+      national_timeoff_entries: data[:national_timeoff_entries]
     }, status: :ok
   end
 

diff --git a/app/javascript/src/apis/clients.ts b/app/javascript/src/apis/clients.ts
@@ -2,13 +2,20 @@ import axios from "./api";
 
 const path = "/clients";
 
+const formHeaders = {
+  headers: {
+    "Content-Type": "multipart/form-data",
+  },
+};
+
 const get = async queryParam => axios.get(`${path}${queryParam}`);
 
-const create = async payload => axios.post(`${path}`, payload);
+const create = async payload => axios.post(`${path}`, payload, formHeaders);
 
 const show = async (id, queryParam) => axios.get(`${path}/${id}${queryParam}`);
 
-const update = async (id, payload) => axios.patch(`${path}/${id}`, payload);
+const update = async (id, payload) =>
+  axios.patch(`${path}/${id}`, payload, formHeaders);
 
 const destroy = async id => axios.delete(`${path}/${id}`);
 

diff --git a/app/javascript/src/apis/companies.ts b/app/javascript/src/apis/companies.ts
@@ -12,11 +12,18 @@ const authApi = axios.create({
   },
 });
 
+const formHeaders = {
+  headers: {
+    "Content-Type": "multipart/form-data",
+  },
+};
+
 const index = async () => axios.get(`${path}`);
 
-const create = payload => authApi.post(path, payload);
+const create = payload => authApi.post(path, payload, formHeaders);
 
-const update = (id, payload) => axios.put(`${path}/${id}`, payload);
+const update = (id, payload) =>
+  axios.put(`${path}/${id}`, payload, formHeaders);
 
 const destroy = id => axios.delete(`${path}/${id}`);
 

diff --git a/app/javascript/src/common/CustomYearPicker/index.tsx b/app/javascript/src/common/CustomYearPicker/index.tsx
@@ -8,6 +8,7 @@ type customYearPickerProps = {
   yearClassName?: string;
   currentYear: number;
   setCurrentYear: React.Dispatch<React.SetStateAction<number>>;
+  nextYearButtonDisabled?: boolean;
 };
 
 const defaultWrapperClassName = "flex items-center justify-center";
@@ -20,6 +21,7 @@ const CustomYearPicker = ({
   yearClassName,
   currentYear,
   setCurrentYear,
+  nextYearButtonDisabled = false,
 }: customYearPickerProps) => {
   const range = (start, end) => {
     const ans = [];
@@ -31,6 +33,10 @@ const CustomYearPicker = ({
   };
 
   const years = range(1920, currentYear + 1);
+  const actualYear = new Date().getFullYear();
+  const isNextYearButtonDisabled = nextYearButtonDisabled
+    ? currentYear >= actualYear
+    : false;
 
   const handleOnChange = selected => {
     const current = parseInt(selected);
@@ -67,8 +73,16 @@ const CustomYearPicker = ({
           ))}
         </select>
       )}
-      <button className="pl-2" onClick={handleNext}>
-        <CaretCircleRightIcon size={13} weight="bold" />
+      <button
+        className="pl-2"
+        disabled={isNextYearButtonDisabled}
+        onClick={handleNext}
+      >
+        {isNextYearButtonDisabled ? (
+          <CaretCircleRightIcon color="#ADA4CE" size={13} weight="bold" />
+        ) : (
+          <CaretCircleRightIcon size={13} weight="bold" />
+        )}
       </button>
     </div>
   );

diff --git a/app/javascript/src/common/FormikFields/InputErrors/index.tsx b/app/javascript/src/common/FormikFields/InputErrors/index.tsx
@@ -1,8 +1,12 @@
 import React from "react";
 
-const InputErrors = ({ fieldErrors, fieldTouched }) =>
+const InputErrors = ({ fieldErrors, fieldTouched, addMargin = true }) =>
   fieldErrors && fieldTouched ? (
-    <div className="mx-0 mb-6 block text-xs tracking-wider text-red-600">
+    <div
+      className={`mx-0 ${
+        addMargin && "mb-6"
+      } block text-xs tracking-wider text-red-600`}
+    >
       <div>{fieldErrors}</div>
     </div>
   ) : null;

diff --git a/app/javascript/src/components/Clients/ClientForm/MobileClientForm.tsx b/app/javascript/src/components/Clients/ClientForm/MobileClientForm.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import React, { useEffect, useState } from "react";
 
-import { Country, State, City } from "country-state-city";
+import { Country } from "country-state-city";
 import { Form, Formik, FormikProps } from "formik";
 import { XIcon } from "miruIcons";
 import PhoneInput from "react-phone-number-input";
@@ -51,32 +51,6 @@ const MobileClientForm = ({
     assignCountries(allCountries);
   }, []);
 
-  const updatedStates = countryCode =>
-    State.getStatesOfCountry(countryCode).map(state => ({
-      label: state.name,
-      value: state.name,
-      code: state.isoCode,
-      ...state,
-    }));
-
-  const updatedCities = values => {
-    const allStates = State.getAllStates();
-    const currentCity = allStates.filter(
-      state => state.name == values.state.label
-    );
-
-    const cities = City.getCitiesOfState(
-      values.country.code,
-      currentCity[0] && currentCity[0].isoCode
-    ).map(city => ({
-      label: city.name,
-      value: city.name,
-      ...city,
-    }));
-
-    return cities;
-  };
-
   const handleSubmit = async values => {
     const formData = new FormData();
 
@@ -260,32 +234,32 @@ const MobileClientForm = ({
                     />
                   </div>
                   <div className="flex w-1/2 flex-col pl-2">
-                    <CustomReactSelect
-                      isErr={!!errors.state && touched.state}
+                    <InputField
+                      resetErrorOnChange
+                      id="state"
                       label="State"
                       name="state"
-                      value={values.state.value ? values.state : null}
-                      handleOnChange={state => {
-                        setFieldValue("state", state);
-                        setFieldValue("city", "");
-                        setFieldValue("zipcode", "");
-                        updatedCities(values);
-                      }}
-                      options={updatedStates(
-                        values.country.code ? values.country.code : "US"
-                      )}
+                      setFieldValue={setFieldValue}
+                    />
+                    <InputErrors
+                      addMargin={false}
+                      fieldErrors={errors.state}
+                      fieldTouched={touched.state}
                     />
                   </div>
                 </div>
                 <div className="flex flex-row">
                   <div className="flex w-1/2 flex-col pr-2" id="city">
-                    <CustomReactSelect
-                      handleOnChange={city => setFieldValue("city", city)}
-                      isErr={!!errors.city && touched.city}
+                    <InputField
+                      resetErrorOnChange
+                      id="city"
                       label="City"
                       name="city"
-                      options={updatedCities(values)}
-                      value={values.city.value ? values.city : null}
+                      setFieldValue={setFieldValue}
+                    />
+                    <InputErrors
+                      fieldErrors={errors.city}
+                      fieldTouched={touched.city}
                     />
                   </div>
                   <div className="flex w-1/2 flex-col pl-2">

diff --git a/app/javascript/src/components/Clients/ClientForm/formValidationSchema.ts b/app/javascript/src/components/Clients/ClientForm/formValidationSchema.ts
@@ -19,12 +19,12 @@ export const clientSchema = Yup.object().shape({
   country: Yup.object().shape({
     value: Yup.string().required("Country cannot be blank"),
   }),
-  state: Yup.object().shape({
-    value: Yup.string().required("State cannot be blank"),
-  }),
-  city: Yup.object().shape({
-    value: Yup.string().required("City cannot be blank"),
-  }),
+  state: Yup.string()
+    .required("State cannot be blank")
+    .max(50, "Maximum 50 characters are allowed"),
+  city: Yup.string()
+    .required("City cannot be blank")
+    .max(50, "Maximum 50 characters are allowed"),
   zipcode: Yup.string()
     .required("Zipcode line cannot be blank")
     .max(10, "Maximum 10 characters are allowed"),
@@ -51,16 +51,8 @@ export const getInitialvalues = (client?: any) => ({
     code: client?.address?.country || "",
     value: client?.address?.country || "",
   },
-  state: {
-    label: client?.address?.state || "",
-    code: client?.address?.state || "",
-    value: client?.address?.state || "",
-  },
-  city: {
-    label: client?.address?.city || "",
-    code: client?.address?.city || "",
-    value: client?.address?.city || "",
-  },
+  state: client?.address?.state || "",
+  city: client?.address?.city || "",
   zipcode: client?.address?.pin || "",
   minutes: client?.minutes || "",
   logo: client?.logo || null,

diff --git a/app/javascript/src/components/Clients/ClientForm/index.tsx b/app/javascript/src/components/Clients/ClientForm/index.tsx
@@ -2,7 +2,7 @@
 import React, { useEffect, useState } from "react";
 
 import "react-phone-number-input/style.css"; //eslint-disable-line
-import { Country, State, City } from "country-state-city";
+import { Country } from "country-state-city";
 import { Formik, Form, FormikProps } from "formik";
 import PhoneInput from "react-phone-number-input";
 import flags from "react-phone-number-input/flags";
@@ -49,32 +49,6 @@ const ClientForm = ({
     assignCountries(allCountries);
   }, []);
 
-  const updatedStates = countryCode =>
-    State.getStatesOfCountry(countryCode).map(state => ({
-      label: state.name,
-      value: state.name,
-      code: state?.isoCode && state.isoCode,
-      ...state,
-    }));
-
-  const updatedCities = values => {
-    const allStates = State.getAllStates();
-    const currentCity = allStates.filter(
-      state => state.name == values.state.label
-    );
-
-    const cities = City.getCitiesOfState(
-      values.country.code,
-      currentCity[0] && currentCity[0].isoCode
-    ).map(city => ({
-      label: city.name,
-      value: city.name,
-      ...city,
-    }));
-
-    return cities;
-  };
-
   const handleSubmit = async values => {
     setSubmitting(true);
     const formData = new FormData();
@@ -229,34 +203,35 @@ const ClientForm = ({
                 />
               </div>
               <div className="flex w-1/2 flex-col pl-2">
-                <CustomReactSelect
+                <InputField
+                  resetErrorOnChange
+                  hasError={errors.state && touched.state}
                   id="state"
-                  isErr={!!errors.state && touched.state}
                   label="State"
                   name="state"
-                  value={values.state ? values.state : null}
-                  handleOnChange={state => {
-                    setFieldValue("state", state);
-                    setFieldValue("city", "");
-                    setFieldValue("zipcode", "");
-                    updatedCities(values);
-                  }}
-                  options={updatedStates(
-                    values.country.code ? values.country.code : "US"
-                  )}
+                  setFieldValue={setFieldValue}
+                />
+                <InputErrors
+                  addMargin={false}
+                  fieldErrors={errors.state}
+                  fieldTouched={touched.state}
                 />
               </div>
             </div>
             <div className="flex flex-row">
               <div className="flex w-1/2 flex-col pr-2" id="city">
-                <CustomReactSelect
-                  handleOnChange={city => setFieldValue("city", city)}
-                  id="city-list"
-                  isErr={!!errors.city && touched.city}
+                <InputField
+                  resetErrorOnChange
+                  hasError={errors.city && touched.city}
+                  id="city"
                   label="City"
                   name="city"
-                  options={updatedCities(values)}
-                  value={values.city.value ? values.city : null}
+                  setFieldValue={setFieldValue}
+                />
+                <InputErrors
+                  addMargin={false}
+                  fieldErrors={errors.city}
+                  fieldTouched={touched.city}
                 />
               </div>
               <div className="flex w-1/2 flex-col pl-2">
@@ -314,8 +289,8 @@ interface FormValues {
   address1: string;
   address2: string;
   country: any;
-  state: any;
-  city: any;
+  state: string;
+  city: string;
   zipcode: string;
   logo: any;
 }

diff --git a/app/javascript/src/components/Clients/ClientForm/utils.ts b/app/javascript/src/components/Clients/ClientForm/utils.ts
@@ -23,12 +23,9 @@ export const formatFormData = (
     values.address2
   );
 
-  formData.append(
-    "client[addresses_attributes[0][state]]",
-    values.state?.value
-  );
+  formData.append("client[addresses_attributes[0][state]]", values.state);
 
-  formData.append("client[addresses_attributes[0][city]]", values.city?.value);
+  formData.append("client[addresses_attributes[0][city]]", values.city);
 
   formData.append(
     "client[addresses_attributes[0][country]]",