Fixed:Not able to add client

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;

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">

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,

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;
 }

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]]",