From 1fc237de3edb10603f0bb84fe304dd766be37491 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Thu, 28 Aug 2025 16:23:08 +0530
Subject: [PATCH] Office Number, Domain Name, and Tax ID fields should be
 nullable but are mandatory.

---
 src/components/Tenant/EditProfile.jsx      | 206 ++++++++++-----------
 src/components/Tenant/OrganizationInfo.jsx |  24 ++-
 src/components/Tenant/TenantSchema.js      |  76 ++++----
 3 files changed, 156 insertions(+), 150 deletions(-)

diff --git a/src/components/Tenant/EditProfile.jsx b/src/components/Tenant/EditProfile.jsx
index d6e23c88..8e355737 100644
--- a/src/components/Tenant/EditProfile.jsx
+++ b/src/components/Tenant/EditProfile.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import Label from '../common/Label';
-import { useFormContext,useForm,FormProvider } from 'react-hook-form';
+import { useFormContext, useForm, FormProvider } from 'react-hook-form';
 import { useIndustries, useTenantDetails, useUpdateTenantDetails } from '../../hooks/useTenant';
 import { orgSize, reference } from '../../utils/constants';
 import { LogoUpload } from './LogoUpload';
@@ -8,18 +8,18 @@ import showToast from '../../services/toastService';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { EditTenant } from './TenantSchema';
 
-const EditProfile = ({ TenantId,onClose }) => {
+const EditProfile = ({ TenantId, onClose }) => {
   const { data, isLoading, isError, error } = useTenantDetails(TenantId);
   const [logoPreview, setLogoPreview] = useState(null);
   const [logoName, setLogoName] = useState("");
   const { data: Industries, isLoading: industryLoading, isError: industryError } = useIndustries();
-  const {mutate:UpdateTenant,isPending,} = useUpdateTenantDetails(()=>{
-    showToast("Tenant Details Updated Successfully","success")
+  const { mutate: UpdateTenant, isPending, } = useUpdateTenantDetails(() => {
+    showToast("Tenant Details Updated Successfully", "success")
     onClose()
-    
+
   })
   const methods = useForm({
-    resolver:zodResolver(EditTenant),
+    resolver: zodResolver(EditTenant),
     defaultValues: {
       firstName: "",
       lastName: "",
@@ -40,8 +40,8 @@ const EditProfile = ({ TenantId,onClose }) => {
   const { register, reset, handleSubmit, formState: { errors } } = methods;
 
   const onSubmit = (formData) => {
-    const tenantPayload = {...formData,contactName:`${formData.firstName} ${formData.lastName}`,id:data.id,}
-     UpdateTenant({id:data.id,tenantPayload})
+    const tenantPayload = { ...formData, contactName: `${formData.firstName} ${formData.lastName}`, id: data.id, }
+    UpdateTenant({ id: data.id, tenantPayload })
   };
 
   useEffect(() => {
@@ -70,117 +70,117 @@ const EditProfile = ({ TenantId,onClose }) => {
 
 
   return (
-      <FormProvider {...methods}>
-    <form className="row g-6" onSubmit={handleSubmit(onSubmit)}>
-      <h6>Edit Tenant</h6>
+    <FormProvider {...methods}>
+      <form className="row g-6" onSubmit={handleSubmit(onSubmit)}>
+        <h6>Edit Tenant</h6>
 
-      <div className="col-sm-6 mt-1">
-        <Label htmlFor="firstName" required>First Name</Label>
-        <input id="firstName" type="text" className="form-control form-control-sm" {...register("firstName")} inputMode='text' />
-        {errors.firstName && <div className="danger-text">{errors.firstName.message}</div>}
-      </div>
+        <div className="col-sm-6 mt-1">
+          <Label htmlFor="firstName" required>First Name</Label>
+          <input id="firstName" type="text" className="form-control form-control-sm" {...register("firstName")} inputMode='text' />
+          {errors.firstName && <div className="danger-text">{errors.firstName.message}</div>}
+        </div>
 
-      <div className="col-sm-6 mt-1">
-        <Label htmlFor="lastName" required>Last Name</Label>
-        <input id="lastName" type="text" className="form-control form-control-sm" {...register("lastName")} />
-        {errors.lastName && <div className="danger-text">{errors.lastName.message}</div>}
-      </div>
+        <div className="col-sm-6 mt-1">
+          <Label htmlFor="lastName" required>Last Name</Label>
+          <input id="lastName" type="text" className="form-control form-control-sm" {...register("lastName")} />
+          {errors.lastName && <div className="danger-text">{errors.lastName.message}</div>}
+        </div>
 
 
 
-      <div className="col-sm-6 mt-1">
-        <Label htmlFor="contactNumber" required>Contact Number</Label>
-        <input id="contactNumber" type="text" className="form-control form-control-sm" {...register("contactNumber")} inputMode="tel"
-          placeholder="+91 9876543210" />
-        {errors.contactNumber && <div className="danger-text">{errors.contactNumber.message}</div>}
-      </div>
+        <div className="col-sm-6 mt-1">
+          <Label htmlFor="contactNumber" required>Contact Number</Label>
+          <input id="contactNumber" type="text" className="form-control form-control-sm" {...register("contactNumber")} inputMode="tel"
+            placeholder="+91 9876543210" />
+          {errors.contactNumber && <div className="danger-text">{errors.contactNumber.message}</div>}
+        </div>
 
-      <div className="col-sm-6 mt-1">
-        <Label htmlFor="domainName" required>Domain Name</Label>
-        <input id="domainName" type="text" className="form-control form-control-sm" {...register("domainName")} />
-        {errors.domainName && <div className="danger-text">{errors.domainName.message}</div>}
-      </div>
+        <div className="col-sm-6 mt-1">
+          <Label htmlFor="domainName" >Domain Name</Label>
+          <input id="domainName" type="text" className="form-control form-control-sm" {...register("domainName")} />
+          {errors.domainName && <div className="danger-text">{errors.domainName.message}</div>}
+        </div>
 
-      <div className="col-sm-6 mt-1">
-        <Label htmlFor="taxId" required>Tax ID</Label>
-        <input id="taxId" type="text" className="form-control form-control-sm" {...register("taxId")} />
-        {errors.taxId && <div className="danger-text">{errors.taxId.message}</div>}
-      </div>
+        <div className="col-sm-6 mt-1">
+          <Label htmlFor="taxId" >Tax ID</Label>
+          <input id="taxId" type="text" className="form-control form-control-sm" {...register("taxId")} />
+          {errors.taxId && <div className="danger-text">{errors.taxId.message}</div>}
+        </div>
 
-      <div className="col-sm-6 mt-1">
-        <Label htmlFor="officeNumber" required>Office Number</Label>
-        <input id="officeNumber" type="text" className="form-control form-control-sm" {...register("officeNumber")} />
-        {errors.officeNumber && <div className="danger-text">{errors.officeNumber.message}</div>}
-      </div>
+        <div className="col-sm-6 mt-1">
+          <Label htmlFor="officeNumber" >Office Number</Label>
+          <input id="officeNumber" type="text" className="form-control form-control-sm" {...register("officeNumber")} />
+          {errors.officeNumber && <div className="danger-text">{errors.officeNumber.message}</div>}
+        </div>
 
-      <div className="col-sm-6 mt-1">
-        <Label htmlFor="industryId" required>Industry</Label>
-        <select className="form-select form-select-sm" {...register("industryId")}>
-          {industryLoading ? <option value="">Loading...</option> :
-            Industries?.map((indu) => (
-              <option key={indu.id} value={indu.id}>{indu.name}</option>
-            ))
-          }
-        </select>
-        {errors.industryId && <div className="danger-text">{errors.industryId.message}</div>}
-      </div>
+        <div className="col-sm-6 mt-1">
+          <Label htmlFor="industryId" required>Industry</Label>
+          <select className="form-select form-select-sm" {...register("industryId")}>
+            {industryLoading ? <option value="">Loading...</option> :
+              Industries?.map((indu) => (
+                <option key={indu.id} value={indu.id}>{indu.name}</option>
+              ))
+            }
+          </select>
+          {errors.industryId && <div className="danger-text">{errors.industryId.message}</div>}
+        </div>
 
-      <div className="col-sm-6 mt-1">
-        <Label htmlFor="reference">Reference</Label>
-        <select className="form-select form-select-sm" {...register("reference")}>
-          {reference.map((org) => (
-            <option key={org.val} value={org.val}>{org.name}</option>
-          ))}
-        </select>
-        {errors.reference && <div className="danger-text">{errors.reference.message}</div>}
-      </div>
+        <div className="col-sm-6 mt-1">
+          <Label htmlFor="reference">Reference</Label>
+          <select className="form-select form-select-sm" {...register("reference")}>
+            {reference.map((org) => (
+              <option key={org.val} value={org.val}>{org.name}</option>
+            ))}
+          </select>
+          {errors.reference && <div className="danger-text">{errors.reference.message}</div>}
+        </div>
         <div className="col-sm-6">
-        <Label htmlFor="organizationSize" required>
-          Organization Size
-        </Label>
+          <Label htmlFor="organizationSize" required>
+            Organization Size
+          </Label>
 
-        <select
-          className="form-select form-select-sm"
-          {...register("organizationSize")}
-        >
-          {orgSize.map((org) => (
-            <option key={org.val} value={org.val}>
-              {org.name}
-            </option>
-          ))}
-        </select>
-        {errors.organizationSize && (
-          <div className="danger-text">{errors.organizationSize.message}</div>
-        )}
-      </div>
+          <select
+            className="form-select form-select-sm"
+            {...register("organizationSize")}
+          >
+            {orgSize.map((org) => (
+              <option key={org.val} value={org.val}>
+                {org.name}
+              </option>
+            ))}
+          </select>
+          {errors.organizationSize && (
+            <div className="danger-text">{errors.organizationSize.message}</div>
+          )}
+        </div>
 
-      <div className="col-12 mt-1">
-        <Label htmlFor="billingAddress" required>Billing Address</Label>
-        <textarea id="billingAddress" className="form-control" {...register("billingAddress")} rows={2} />
-        {errors.billingAddress && <div className="danger-text">{errors.billingAddress.message}</div>}
-      </div>
+        <div className="col-12 mt-1">
+          <Label htmlFor="billingAddress" required>Billing Address</Label>
+          <textarea id="billingAddress" className="form-control" {...register("billingAddress")} rows={2} />
+          {errors.billingAddress && <div className="danger-text">{errors.billingAddress.message}</div>}
+        </div>
 
-      <div className="col-12 mt-1">
-        <Label htmlFor="description">Description</Label>
-        <textarea id="description" className="form-control" {...register("description")} rows={2} />
-        {errors.description && <div className="danger-text">{errors.description.message}</div>}
-      </div>
+        <div className="col-12 mt-1">
+          <Label htmlFor="description">Description</Label>
+          <textarea id="description" className="form-control" {...register("description")} rows={2} />
+          {errors.description && <div className="danger-text">{errors.description.message}</div>}
+        </div>
 
-      <div className="col-sm-12">
-        <Label htmlFor="logImage">Logo Image</Label>
-        <LogoUpload
-          preview={logoPreview}
-          setPreview={setLogoPreview}
-          fileName={logoName}
-          setFileName={setLogoName}
-        />
-      </div>
+        <div className="col-sm-12">
+          <Label htmlFor="logImage">Logo Image</Label>
+          <LogoUpload
+            preview={logoPreview}
+            setPreview={setLogoPreview}
+            fileName={logoName}
+            setFileName={setLogoName}
+          />
+        </div>
 
-      <div className="d-flex justify-content-center gap-2 mt-3">
-        <button type="submit" disabled={isPending} className="btn btn-sm btn-primary">{isPending ? "Please Wait..." : "Submit"}</button>
-        <button type="button" disabled={isPending} className="btn btn-sm btn-secondary" onClick={onClose}>Cancel</button>
-      </div>
-    </form>
+        <div className="d-flex justify-content-center gap-2 mt-3">
+          <button type="submit" disabled={isPending} className="btn btn-sm btn-primary">{isPending ? "Please Wait..." : "Submit"}</button>
+          <button type="button" disabled={isPending} className="btn btn-sm btn-secondary" onClick={onClose}>Cancel</button>
+        </div>
+      </form>
     </FormProvider>
   );
 };
diff --git a/src/components/Tenant/OrganizationInfo.jsx b/src/components/Tenant/OrganizationInfo.jsx
index b465c4e1..9607a524 100644
--- a/src/components/Tenant/OrganizationInfo.jsx
+++ b/src/components/Tenant/OrganizationInfo.jsx
@@ -48,7 +48,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
       const data = getValues();
       // onSubmitTenant(data);
       // onNext();
-      const tenantPayload = {...data,onBoardingDate:  moment.utc(data.onBoardingDate, "DD-MM-YYYY").toISOString() }
+      const tenantPayload = { ...data, onBoardingDate: moment.utc(data.onBoardingDate, "DD-MM-YYYY").toISOString() }
       CreateTenant(tenantPayload);
     }
   };
@@ -73,7 +73,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
       </div>
 
       <div className="col-sm-6">
-        <Label htmlFor="officeNumber" required>
+        <Label htmlFor="officeNumber" >
           Office Number
         </Label>
         <input
@@ -87,7 +87,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
       </div>
 
       <div className="col-sm-6">
-        <Label htmlFor="domainName" required>
+        <Label htmlFor="domainName" >
           Domain Name
         </Label>
         <input
@@ -101,7 +101,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
       </div>
 
       <div className="col-sm-6">
-        <Label htmlFor="taxId" required>
+        <Label htmlFor="taxId" >
           Tax ID
         </Label>
         <input
@@ -138,8 +138,10 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
         </Label>
 
         <select
-          className="form-select form-select-sm"
-          {...register("organizationSize")}
+          id="organizationSize"
+          className="form-select shadow-none border py-1 px-2"
+          style={{ fontSize: "0.875rem" }} // Bootstrap's small text size
+          {...register("organizationSize", { required: "Organization size is required" })}
         >
           {orgSize.map((org) => (
             <option key={org.val} value={org.val}>
@@ -147,17 +149,20 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
             </option>
           ))}
         </select>
+
         {errors.organizationSize && (
           <div className="danger-text">{errors.organizationSize.message}</div>
         )}
       </div>
 
+
       <div className="col-sm-6">
         <Label htmlFor="industryId" required>
           Industry
         </Label>
         <select
-          className="form-select form-select-sm"
+          id="industryId"
+          className="form-select shadow-none border py-1 px-2 small"
           {...register("industryId")}
         >
           {industryLoading ? (
@@ -177,9 +182,9 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
 
       <div className="col-sm-6">
         <Label htmlFor="reference">Reference</Label>
- 
         <select
-          className="form-select form-select-sm"
+          id="reference"
+          className="form-select shadow-none border py-1 px-2 small"
           {...register("reference")}
         >
           {reference.map((org) => (
@@ -193,6 +198,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
         )}
       </div>
 
+
       <div className="col-sm-12">
         <Label htmlFor="description">Description</Label>
         <textarea
diff --git a/src/components/Tenant/TenantSchema.js b/src/components/Tenant/TenantSchema.js
index 208f7c01..a9be211c 100644
--- a/src/components/Tenant/TenantSchema.js
+++ b/src/components/Tenant/TenantSchema.js
@@ -2,34 +2,34 @@ import { z } from "zod";
 
 export const newTenantSchema = z.object({
   firstName: z
-  .string().trim()
-  .min(1, { message: "First Name is required!" })
-  .regex(/^[A-Za-z]+$/, { message: "First Name should contain only letters!" }),
+    .string().trim()
+    .min(1, { message: "First Name is required!" })
+    .regex(/^[A-Za-z]+$/, { message: "First Name should contain only letters!" }),
   lastName: z
-  .string().trim()
-  .min(1, { message: "Last Name is required!" })
-  .regex(/^[A-Za-z]+$/, { message: "Last Name should contain only letters!" }),
+    .string().trim()
+    .min(1, { message: "Last Name is required!" })
+    .regex(/^[A-Za-z]+$/, { message: "Last Name should contain only letters!" }),
   email: z.string().trim().email("Invalid email address"),
   description: z.string().trim().optional(),
-  domainName: z.string().trim().nonempty("Domain name is required"),
+  domainName: z.string().trim().optional(),
   billingAddress: z.string().trim().nonempty("Billing address is required"),
-  taxId: z.string().trim().nonempty("Tax ID is required"),
+  taxId: z.string().trim().optional(),
   logoImage: z.string().trim().optional(),
   organizationName: z.string().trim().nonempty("Organization name is required"),
-  officeNumber: z.string().trim().nonempty("Office number is required"),
-  contactNumber:  z.string().trim()
-  .nonempty("Contact number is required")
-  .regex(/^\+?[1-9]\d{7,14}$/, "Enter a valid contact number"),
+  officeNumber: z.string().trim().optional(),
+  contactNumber: z.string().trim()
+    .nonempty("Contact number is required")
+    .regex(/^\+?[1-9]\d{7,14}$/, "Enter a valid contact number"),
   onBoardingDate: z.preprocess((val) => {
-  if (typeof val === "string" && val.includes("-")) {
-    const [day, month, year] = val.split("-");
-    return new Date(`${year}-${month}-${day}`);
-  }
-  return val;
-}, z.date({
-  required_error: "Onboarding date is required",
-  invalid_type_error: "Invalid date format",
-})),
+    if (typeof val === "string" && val.includes("-")) {
+      const [day, month, year] = val.split("-");
+      return new Date(`${year}-${month}-${day}`);
+    }
+    return val;
+  }, z.date({
+    required_error: "Onboarding date is required",
+    invalid_type_error: "Invalid date format",
+  })),
   organizationSize: z.string().nonempty("Organization size is required"),
   industryId: z.string().uuid("Invalid industry ID"),
   reference: z.string().nonempty("Reference is required"),
@@ -71,8 +71,8 @@ export const getSubscriptionSchema = (minUsers) =>
 
 export const subscriptionDefaultValues = {
   // tenantId: "",     
-  planId: "",        
-  currencyId: "",   
+  planId: "",
+  currencyId: "",
   maxUsers: 1,
   frequency: 1,
   isTrial: false,
@@ -84,8 +84,8 @@ export const filterSchema = z.object({
   // createdByIds: z.array(z.string()).optional(),
   tenantStatusIds: z.array(z.string()).optional(),
   references: z.array(z.string()).optional(),
-  startDate: z.string().optional(), 
-  endDate: z.string().optional(),  
+  startDate: z.string().optional(),
+  endDate: z.string().optional(),
 });
 export const defaultFilterValues = {
   industryIds: [],
@@ -133,23 +133,23 @@ export const getStepFields = (stepIndex) => {
 
 export const EditTenant = z.object({
   firstName: z
-  .string().trim()
-  .min(1, { message: "First Name is required!" })
-  .regex(/^[A-Za-z]+$/, { message: "First Name should contain only letters!" }),
-lastName: z
-  .string().trim()
-  .min(1, { message: "Last Name is required!" })
-  .regex(/^[A-Za-z]+$/, { message: "Last Name should contain only letters!" }),
+    .string().trim()
+    .min(1, { message: "First Name is required!" })
+    .regex(/^[A-Za-z]+$/, { message: "First Name should contain only letters!" }),
+  lastName: z
+    .string().trim()
+    .min(1, { message: "Last Name is required!" })
+    .regex(/^[A-Za-z]+$/, { message: "Last Name should contain only letters!" }),
   description: z.string().trim().optional(),
-  domainName: z.string().trim().min(1, { message: "Domain Name is required!" }),
+  domainName: z.string().trim().optional(),
   billingAddress: z.string().trim().min(1, { message: "Billing Address is required!" }),
-  taxId: z.string().trim().min(1, { message: "Tax ID is required!" }),
+  taxId: z.string().trim().optional(),
   logoImage: z.string().optional(),
-  officeNumber: z.string().trim().min(1, { message: "Office Number is required!" }),
+  officeNumber: z.string().trim().optional(),
   contactNumber: z.string().trim()
-  .nonempty("Contact number is required")
-  .regex(/^\+?[1-9]\d{7,14}$/, "Enter a valid contact number"),
+    .nonempty("Contact number is required")
+    .regex(/^\+?[1-9]\d{7,14}$/, "Enter a valid contact number"),
   organizationSize: z.string().min(1, { message: "Organization Size is required!" }),
-  industryId: z.string().min(1,{ message: "Invalid Industry ID!" }),
+  industryId: z.string().min(1, { message: "Invalid Industry ID!" }),
   reference: z.string().optional(),
 });
-- 
2.43.0