restric to enter aph, symbol character

src/components/Tenant/EditProfile.jsx

@@ -5,6 +5,8 @@ import { useIndustries, useTenantDetails, useUpdateTenantDetails } from '../../h
 import { orgSize, reference } from '../../utils/constants';
 import { LogoUpload } from './LogoUpload';
 import showToast from '../../services/toastService';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { EditTenant } from './TenantSchema';
 
 const EditProfile = ({ TenantId,onClose }) => {
   const { data, isLoading, isError, error } = useTenantDetails(TenantId);
@@ -17,6 +19,7 @@ const EditProfile = ({ TenantId,onClose }) => {
     
   })
   const methods = useForm({
+    resolver:zodResolver(EditTenant),
     defaultValues: {
       firstName: "",
       lastName: "",

src/components/Tenant/SubScription.jsx

@@ -1,5 +1,9 @@
 import React, { useState, useEffect } from "react";
-import { useAddSubscription, useSubscriptionPlan, useUpgradeSubscription } from "../../hooks/useTenant";
+import {
+  useAddSubscription,
+  useSubscriptionPlan,
+  useUpgradeSubscription,
+} from "../../hooks/useTenant";
 import SegmentedControl from "./SegmentedControl";
 import { useFormContext } from "react-hook-form";
 import { CONSTANT_TEXT } from "../../utils/constants";
@@ -18,7 +22,7 @@ const SubScription = ({ onSubmitSubScription, onNext }) => {
     data: plans = [],
     isError,
     isLoading,
-    error:subscriptionGettingError
+    error: subscriptionGettingError,
   } = useSubscriptionPlan(frequency);
 
   const {
@@ -34,13 +38,12 @@ const SubScription = ({ onSubmitSubScription, onNext }) => {
     isPending,
     error,
   } = useAddSubscription(() => {
-  naviget("/tenants")
+    naviget("/tenants");
+  });
+  const { mutate: updgradeSubscription, isPending: upgrading } =
+    useUpgradeSubscription(() => {
+      naviget("/tenants");
     });
-  const {
-    mutate : updgradeSubscription,isPending : upgrading
-  } = useUpgradeSubscription(()=>{
-  naviget("/tenants")
-  })
   const handleSubscriptionSubmit = async () => {
     const isValid = await trigger([
       "planId",
@@ -57,16 +60,23 @@ const SubScription = ({ onSubmitSubScription, onNext }) => {
       let subscriptionPayload = null;
 
       if (selectedTenant?.operationMode === 1) {
-       subscriptionPayload =  { planId : payload.planId,currencyId :payload.currencyId,maxUsers:payload.maxUsers, tenantId: selectedTenant?.data?.id }
+        subscriptionPayload = {
-          updgradeSubscription(subscriptionPayload)
+          planId: payload.planId,
+          currencyId: payload.currencyId,
+          maxUsers: payload.maxUsers,
+          tenantId: selectedTenant?.data?.id,
+        };
+        updgradeSubscription(subscriptionPayload);
       } else {
-        subscriptionPayload = {...payload,tenantId: selectedTenant?.data?.id}
+        subscriptionPayload = {
+          ...payload,
+          tenantId: selectedTenant?.data?.id,
+        };
         AddSubScription(subscriptionPayload);
       }
     }
   };
 
-
   const handlePlanSelection = (plan) => {
     setSelectedPlanId(plan.id);
     setValue("planId", plan.id);
@@ -75,11 +85,17 @@ const SubScription = ({ onSubmitSubScription, onNext }) => {
   };
 
   const selectedPlan = plans.find((p) => p.id === selectedPlanId);
-   if(isLoading) return <div className="text-center">Loading....</div>
+  if (isLoading) return <div className="text-center">Loading....</div>;
-   if(isError) return <div className="text-center">{subscriptionGettingError?.message}</div>
+  if (isError)
+    return (
+      <div className="text-center">{subscriptionGettingError?.message}</div>
+    );
   return (
     <div className="text-start">
-      <SegmentedControl setFrequency={setFrequency} defultFequency = {frequency}/>
+      <SegmentedControl
+        setFrequency={setFrequency}
+        defultFequency={frequency}
+      />
 
       {!isLoading && !isError && plans.length > 0 && (
         <div className="row g-4 my-6">
@@ -110,7 +126,6 @@ const SubScription = ({ onSubmitSubScription, onNext }) => {
                     </h4>
 
                     <ul className="list-unstyled d-flex gap-4 flex-wrap mb-2">
-
                       <li className="d-flex align-items-center">
                         <i className="bx bx-server me-1"></i>
                         Storage {plan.maxStorage} MB
@@ -170,11 +185,20 @@ const SubScription = ({ onSubmitSubScription, onNext }) => {
               </Label>
               <input
                 type="number"
+                min={1}
+                step={1}
                 className="form-control form-control-sm"
                 {...register("maxUsers", {
                   valueAsNumber: true,
+                  required: "Team size is required",
                   min: { value: 1, message: "Team size must be at least 1" },
                 })}
+                onKeyDown={(e) => {
+                  // block "e", "+", "-", ".", ","
+                  if (["e", "E", "+", "-", "."].includes(e.key)) {
+                    e.preventDefault();
+                  }
+                }}
               />
             </div>
 

src/components/Tenant/TenantSchema.js

@@ -2,22 +2,22 @@ import { z } from "zod";
 
 export const newTenantSchema = z.object({
   firstName: z
-  .string()
+  .string().trim()
   .min(1, { message: "First Name is required!" })
   .regex(/^[A-Za-z]+$/, { message: "First Name should contain only letters!" }),
 lastName: z
-  .string()
+  .string().trim()
   .min(1, { message: "Last Name is required!" })
   .regex(/^[A-Za-z]+$/, { message: "Last Name should contain only letters!" }),
-  email: z.string().email("Invalid email address"),
+  email: z.string().trim().email("Invalid email address"),
-  description: z.string().optional(),
+  description: z.string().trim().optional(),
-  domainName: z.string().nonempty("Domain name is required"),
+  domainName: z.string().trim().nonempty("Domain name is required"),
-  billingAddress: z.string().nonempty("Billing address is required"),
+  billingAddress: z.string().trim().nonempty("Billing address is required"),
-  taxId: z.string().nonempty("Tax ID is required"),
+  taxId: z.string().trim().nonempty("Tax ID is required"),
-  logoImage: z.string().optional(),
+  logoImage: z.string().trim().optional(),
-  organizationName: z.string().nonempty("Organization name is required"),
+  organizationName: z.string().trim().nonempty("Organization name is required"),
-  officeNumber: z.string().nonempty("Office number is required"),
+  officeNumber: z.string().trim().nonempty("Office number is required"),
-  contactNumber:  z.string()
+  contactNumber:  z.string().trim()
   .nonempty("Contact number is required")
   .regex(/^\+?[1-9]\d{7,14}$/, "Enter a valid contact number"),
   onBoardingDate: z.preprocess((val) => {
@@ -132,20 +132,20 @@ export const getStepFields = (stepIndex) => {
 
 export const EditTenant = z.object({
   firstName: z
-  .string()
+  .string().trim()
   .min(1, { message: "First Name is required!" })
   .regex(/^[A-Za-z]+$/, { message: "First Name should contain only letters!" }),
 lastName: z
-  .string()
+  .string().trim()
   .min(1, { message: "Last Name is required!" })
   .regex(/^[A-Za-z]+$/, { message: "Last Name should contain only letters!" }),
-  description: z.string().optional(),
+  description: z.string().trim().optional(),
-  domainName: z.string().min(1, { message: "Domain Name is required!" }),
+  domainName: z.string().trim().min(1, { message: "Domain Name is required!" }),
-  billingAddress: z.string().min(1, { message: "Billing Address is required!" }),
+  billingAddress: z.string().trim().min(1, { message: "Billing Address is required!" }),
-  taxId: z.string().min(1, { message: "Tax ID is required!" }),
+  taxId: z.string().trim().min(1, { message: "Tax ID is required!" }),
   logoImage: z.string().optional(),
-  officeNumber: z.string().min(1, { message: "Office Number is required!" }),
+  officeNumber: z.string().trim().min(1, { message: "Office Number is required!" }),
-  contactNumber: z.string()
+  contactNumber: z.string().trim()
   .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!" }),