Merge pull request 'contact-add' (#9) from jai into main

Reviewed-on: http://git.hicglobalsolutions.in/BhawanSingh/SME-Web/pulls/9

src/components/setting/ContactForm.tsx

@@ -0,0 +1,228 @@
+// ContactForm.tsx
+import React, { useState } from 'react';
+import { FaSpinner } from 'react-icons/fa';
+
+export interface ContactData {
+    contactId?: number;
+    email: string;
+    firstName: string;
+    lastName: string;
+    title: string;
+    company: string;
+    website: string;
+    phones: string[];
+}
+
+interface Props {
+    onSubmit: (data: ContactData) => void;
+    loading: boolean;
+}
+
+const ContactForm = ({ onSubmit, loading }: Props) => {
+    const [formData, setFormData] = useState<ContactData>({
+        email: '',
+        firstName: '',
+        lastName: '',
+        title: '',
+        company: '',
+        website: '',
+        phones: [''],
+    });
+
+    const [errors, setErrors] = useState<{ [key: string]: string }>({});
+
+    const handleChange = (field: keyof ContactData, value: string) => {
+        setFormData((prev) => ({ ...prev, [field]: value }));
+        if (errors[field]) {
+            setErrors((prev) => ({ ...prev, [field]: '' }));
+        }
+    };
+
+    const handlePhoneChange = (index: number, value: string) => {
+        const numericValue = value.replace(/\D/g, ''); // Remove non-numeric
+        const updatedPhones = [...formData.phones];
+        updatedPhones[index] = numericValue;
+        setFormData((prev) => ({ ...prev, phones: updatedPhones }));
+
+        const errorKey = `phones_${index}`;
+        if (errors[errorKey]) {
+            setErrors((prev) => ({ ...prev, [errorKey]: '' }));
+        }
+    };
+
+
+    const addPhoneField = () => {
+        setFormData((prev) => ({ ...prev, phones: [...prev.phones, ''] }));
+    };
+
+    const removePhoneField = (index: number) => {
+        const updatedPhones = formData.phones.filter((_, i) => i !== index);
+        setFormData((prev) => ({ ...prev, phones: updatedPhones }));
+    };
+
+    const validate = () => {
+        const newErrors: { [key: string]: string } = {};
+
+        const nameRegex = /^[a-zA-Z\s\-']+$/;
+        const urlRegex = /^(https?:\/\/)?([\w-]+\.)+[\w-]{2,}(\/.*)?$/;
+        const phoneRegex = /^\d+$/;
+
+        // Email
+        if (!formData.email.trim()) {
+            newErrors.email = 'Email is required';
+        } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
+            newErrors.email = 'Invalid email address';
+        }
+
+        // // First Name
+        // if (!formData.firstName.trim()) {
+        //     newErrors.firstName = 'First name is required';
+        // } else if (!nameRegex.test(formData.firstName)) {
+        //     newErrors.firstName = 'First name contains invalid characters';
+        // }
+
+        // Last Name
+        if (!formData.lastName.trim()) {
+            newErrors.lastName = 'Last name is required';
+        } else if (!nameRegex.test(formData.lastName)) {
+            newErrors.lastName = 'Last name contains invalid characters';
+        }
+
+        // // Title
+        // if (!formData.title.trim()) {
+        //     newErrors.title = 'Title is required';
+        // }
+
+
+        // Website (optional but validate if present)
+        if (formData.website.trim() && !urlRegex.test(formData.website)) {
+            newErrors.website = 'Invalid website URL';
+        }
+
+        // Phones
+        // formData.phones.forEach((phone, index) => {
+        //     if (!phone.trim()) {
+        //         newErrors[`phones_${index}`] = 'Phone number is required';
+        //     } else if (!phoneRegex.test(phone)) {
+        //         newErrors[`phones_${index}`] = 'Phone number must contain only digits';
+        //     }
+        // });
+
+        return newErrors;
+    };
+
+
+    const handleSubmit = async () => {
+        const validationErrors = validate();
+        if (Object.keys(validationErrors).length > 0) {
+            setErrors(validationErrors);
+            return;
+        }
+
+        try {
+            await onSubmit(formData);
+
+            setFormData({
+                email: '',
+                firstName: '',
+                lastName: '',
+                title: '',
+                company: '',
+                website: '',
+                phones: [''],
+            });
+            setErrors({});
+        } catch (err) {
+            console.error('Submit failed:', err);
+        }
+    };
+
+
+    return (
+        <div className="ms-2 space-y-2 max-w-[60vw]">
+            <h2 className="text-lg font-medium text-slate-500">Add Contact</h2>
+
+            <div className="grid grid-cols-2 gap-3">
+                {[
+                    { label: 'First Name', field: 'firstName' },
+                    { label: 'Last Name', field: 'lastName' },
+                    { label: 'Email', field: 'email' },
+                    { label: 'Title', field: 'title' },
+                    { label: 'Company', field: 'company' },
+                    { label: 'Website', field: 'website' },
+                ].map(({ label, field }) => (
+                    <div key={field} className="flex flex-col">
+                        <label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">{label}</label>
+                        <input
+                            type={field === 'email' ? 'email' : 'text'}
+                            value={formData[field as keyof ContactData] as string}
+                            onChange={(e) => handleChange(field as keyof ContactData, e.target.value)}
+                            required={true}
+                            className="px-3 py-1.5 border border-gray-400 rounded-md focus:outline-none focus:ring-1 focus:ring-[var(--primary)] text-sm"
+                        />
+                        {errors[field] && <span className="text-sm text-red-500 mt-1">{errors[field]}</span>}
+                    </div>
+                ))}
+            </div>
+
+            <div>
+                <label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">Phone Numbers</label>
+                <div className="space-y-2">
+                    {formData.phones.map((phone, index) => (
+                        <div key={index} className="flex flex-col gap-1">
+                            <div className="flex items-center gap-2">
+                                <input
+                                    type="text"
+                                    value={phone}
+                                    onChange={(e) => handlePhoneChange(index, e.target.value)}
+                                    className="flex-1 px-3 py-1.5 border border-gray-400 rounded-md focus:outline-none focus:ring-1 focus:ring-[var(--primary)] text-sm"
+                                    maxLength={15}
+                                />
+                                {formData.phones.length > 1 && (
+                                    <button
+                                        type="button"
+                                        onClick={() => removePhoneField(index)}
+                                        className="text-xs text-red-500 hover:underline"
+                                    >
+                                        Remove
+                                    </button>
+                                )}
+                            </div>
+                            {errors[`phones_${index}`] && (
+                                <span className="text-sm text-red-500">{errors[`phones_${index}`]}</span>
+                            )}
+                        </div>
+                    ))}
+
+                    <button
+                        type="button"
+                        onClick={addPhoneField}
+                        className="text-sm text-blue-500 hover:underline mt-1 cursor-pointer"
+                    >
+                        + Add another phone
+                    </button>
+                </div>
+            </div>
+
+            <div className="flex justify-end">
+                <button
+                    type="button"
+                    onClick={handleSubmit}
+                    disabled={loading}
+                    className="bg-gray-300 px-5 py-2 rounded-md text-slate-700 text-sm font-medium hover:bg-opacity-90 transition disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer"
+                >
+                    {loading ? (
+                        <>
+                            <FaSpinner className="animate-spin inline-block mr-2" />
+                            SAVING...
+                        </>
+                    ) : (
+                        'SAVE CONTACT'
+                    )}
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default ContactForm;

src/components/setting/Setting.tsx

@@ -9,6 +9,7 @@ import AsideSection from "./AsideSection";
 import Signature from "./Signature/Signature";
 import { Bounce, toast } from "react-toastify";
 import AccountNav from "../accounts/AccountNav";
+import ContactForm , {ContactData} from "./ContactForm";
 
 // Define the shape of state object
 interface Account {
@@ -57,7 +58,7 @@ const Setting = () => {
 
   const [activeTab, setActiveTab] = useState("userProfile");
   const [activeSubSection, setActiveSubSection] = useState<string>("");
-    const [user, setUser] = useState<UserData>({
+  const [user, setUser] = useState<UserData>({
     id: '',
     name: '',
     email: '',
@@ -212,6 +213,13 @@ const Setting = () => {
               accountOptionsLoading={accountOptionsLoading}
             />
           );
+        case "contacts":
+          return (
+            <ContactForm
+              onSubmit={handleContactSubmit}
+              loading={createAndInviteLoader}
+            />
+          );
         default:
           return <div className="bg-white p-6 rounded-lg shadow-sm">Coming Soon...</div>;
       }
@@ -236,6 +244,7 @@ const Setting = () => {
   const tabs = [
     { id: "userProfile", label: "User Profile", type: "settings" },
     { id: "create and invite", label: "Create and invite", type: "settings" },
+    { id: "contacts", label: "Contacts", type: "settings" },
     { id: "language", label: "Language", type: "settings" },
     { id: "contactAdd", label: "Add Contact", type: "contact" },
     { id: "contactRemove", label: "Remove Contact", type: "contact" },
@@ -379,6 +388,28 @@ const Setting = () => {
     }
   };
 
+
+  const handleContactSubmit = async (data: ContactData) => {
+    try {
+      setCreateAndInviteLoader(true);
+      const res = await api.post(`/api/accounts/${activeAccountId}/contacts`, [data]); // Adjust endpoint if different
+      if (res.status === 200) {
+        toast.success('Contact created successfully!', {
+          position: "top-center",
+          autoClose: 1500,
+          transition: Bounce,
+        });
+      }
+      // return res;
+    } catch (err) {
+      console.error("Error creating contact", err);
+      toast.error("Failed to create contact");
+      throw err;
+    } finally {
+      setCreateAndInviteLoader(false);
+    }
+  };
+
   return (
     <>
       {/* <SettingNav /> */}