BhawanSingh
/
SME-Web
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Compare commits

base: BhawanSingh:0b039b9dabe075b75c42af444a59265405bb6830
Branches Tags
BhawanSingh:master
BhawanSingh:fontAdded
BhawanSingh:main
BhawanSingh:remove_ps1
BhawanSingh:jai
BhawanSingh:bhagwan
BhawanSingh:bhagwanSingh
..
compare: BhawanSingh:d3b4ee61c964a8ca36068c1e5af297beb928a310
Branches Tags
BhawanSingh:fontAdded
BhawanSingh:main
BhawanSingh:remove_ps1
BhawanSingh:jai
BhawanSingh:bhagwan
BhawanSingh:master
BhawanSingh:bhagwanSingh

No commits in common. "0b039b9dabe075b75c42af444a59265405bb6830" and "d3b4ee61c964a8ca36068c1e5af297beb928a310" have entirely different histories.
0b039b9dab ... d3b4ee61c9

3 changed files with 397 additions and 409 deletions
Show Stats Expand all files Collapse all files

1
src/components/contacts/Contacts.tsx
View File

@ -11,7 +11,6 @@ type ContactSchema = [{
firstName: string firstName: string
lastName: string lastName: string
email: string email: string
phone: string
}] }]
const Contacts = () => { const Contacts = () => {

203
src/components/contacts/ContactsFormModal.tsx
View File

@ -1,6 +1,6 @@
// ContactForm.tsx // ContactForm.tsx
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from 'react';
import { FaSpinner } from "react-icons/fa"; import { FaSpinner } from 'react-icons/fa';
export interface ContactData { export interface ContactData {
contactId?: number; contactId?: number;
@ -10,38 +10,32 @@ export interface ContactData {
title: string; title: string;
company: string; company: string;
website: string; website: string;
phone: string; phones: string[];
} }
interface Props { interface Props {
onSubmit: (data: ContactData) => void; onSubmit: (data: ContactData) => void;
loading: boolean; loading: boolean;
setShowModal: () => React.Dispatch<React.SetStateAction<boolean>>; setShowModal: () => React.Dispatch<React.SetStateAction<boolean>>
actionStatus: string; actionStatus: string,
editJsonData: any; editJsonData: any
} }
const ContactFormModal = ({ const ContactFormModal = ({ onSubmit, loading, setShowModal, actionStatus, editJsonData }: Props) => {
onSubmit,
loading,
setShowModal,
actionStatus,
editJsonData,
}: Props) => {
const [formData, setFormData] = useState<ContactData>({ const [formData, setFormData] = useState<ContactData>({
email: "", email: '',
firstName: "", firstName: '',
lastName: "", lastName: '',
title: "", title: '',
company: "", company: '',
website: "", website: '',
phone: "", phones: [''],
}); });
const [errors, setErrors] = useState<{ [key: string]: string }>({}); const [errors, setErrors] = useState<{ [key: string]: string }>({});
useEffect(() => { useEffect(() => {
if (actionStatus === "Edit" && editJsonData) { if (actionStatus === 'Edit' && editJsonData) {
setFormData({ setFormData({
email: editJsonData.email, email: editJsonData.email,
firstName: editJsonData.firstName, firstName: editJsonData.firstName,
@ -49,124 +43,128 @@ const ContactFormModal = ({
title: editJsonData.title, title: editJsonData.title,
company: editJsonData.company, company: editJsonData.company,
website: editJsonData.website, website: editJsonData.website,
phone: editJsonData.phone, phones: editJsonData.phones,
}); })
} }
}, [actionStatus, editJsonData]); }, [actionStatus, editJsonData])
const handleChange = (field: keyof ContactData, value: string) => { const handleChange = (field: keyof ContactData, value: string) => {
console.log(field, value);
setFormData((prev) => ({ ...prev, [field]: value })); setFormData((prev) => ({ ...prev, [field]: value }));
if (errors[field]) { if (errors[field]) {
setErrors((prev) => ({ ...prev, [field]: "" })); setErrors((prev) => ({ ...prev, [field]: '' }));
} }
}; };
// const handlePhoneChange = (index: number, value: string) => { const handlePhoneChange = (index: number, value: string) => {
// const numericValue = value.replace(/\D/g, ""); // Remove non-numeric const numericValue = value.replace(/\D/g, ''); // Remove non-numeric
// const updatedPhones = [...formData.phone]; const updatedPhones = [...formData.phones];
// updatedPhones[index] = numericValue; updatedPhones[index] = numericValue;
// setFormData((prev) => ({ ...prev, phones: updatedPhones })); setFormData((prev) => ({ ...prev, phones: updatedPhones }));
// const errorKey = `phones_${index}`; const errorKey = `phones_${index}`;
// if (errors[errorKey]) { if (errors[errorKey]) {
// setErrors((prev) => ({ ...prev, [errorKey]: "" })); setErrors((prev) => ({ ...prev, [errorKey]: '' }));
// } }
// }; };
// const addPhoneField = () => {
// setFormData((prev) => ({ ...prev, phone: [...prev.phone, ''] }));
// };
// const removePhoneField = (index: number) => { const addPhoneField = () => {
// const updatedPhones = formData.phones.filter((_, i) => i !== index); setFormData((prev) => ({ ...prev, phones: [...prev.phones, ''] }));
// setFormData((prev) => ({ ...prev, phones: updatedPhones })); };
// };
const removePhoneField = (index: number) => {
const updatedPhones = formData.phones.filter((_, i) => i !== index);
setFormData((prev) => ({ ...prev, phones: updatedPhones }));
};
const validate = () => { const validate = () => {
const newErrors: { [key: string]: string } = {}; const newErrors: { [key: string]: string } = {};
const emailRegex = /\S+@\S+\.\S+/; const nameRegex = /^[a-zA-Z\s\-']+$/;
// const nameRegex = /^[a-zA-Z\s\-']+$/;
const urlRegex = /^(https?:\/\/)?([\w-]+\.)+[\w-]{2,}(\/.*)?$/; const urlRegex = /^(https?:\/\/)?([\w-]+\.)+[\w-]{2,}(\/.*)?$/;
const phoneRegex = const phoneRegex = /^\d+$/;
/^\+?\d{1,4}?[-.\s]?\(?\d{2,5}\)?[-.\s]?\d{3,5}[-.\s]?\d{3,5}$/;
// Email // Email
if (!formData.email.trim()) { if (!formData.email.trim()) {
newErrors.email = "Email is required"; newErrors.email = 'Email is required';
} else if (!emailRegex.test(formData.email)) { } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
newErrors.email = "Invalid email address"; newErrors.email = 'Invalid email address';
} }
// // First Name // // First Name
// if (!formData.firstName.trim()) { // if (!formData.firstName.trim()) {
// newErrors.firstName = 'First name is required'; // newErrors.firstName = 'First name is required';
// } else // } else if (!nameRegex.test(formData.firstName)) {
// if (formData.firstName.trim() && !nameRegex.test(formData.firstName)) { // newErrors.firstName = 'First name contains invalid characters';
// newErrors.firstName = "First name contains invalid characters";
// } // }
// Last Name // Last Name
if (!formData.lastName.trim()) { if (!formData.lastName.trim()) {
newErrors.lastName = "Last name is required"; newErrors.lastName = 'Last name is required';
} else if (!nameRegex.test(formData.lastName)) {
newErrors.lastName = 'Last name contains invalid characters';
} }
// else if (!nameRegex.test(formData.lastName)) {
// newErrors.lastName = "Last name contains invalid characters";
// }
// // Title // // Title
// if (!formData.title.trim()) { // if (!formData.title.trim()) {
// newErrors.title = 'Title is required'; // newErrors.title = 'Title is required';
// } // }
// Website (optional but validate if present) // Website (optional but validate if present)
if (formData.website.trim() && !urlRegex.test(formData.website)) { if (formData.website.trim() && !urlRegex.test(formData.website)) {
newErrors.website = "Invalid website URL"; newErrors.website = 'Invalid website URL';
} }
// Phone // Phones
if (formData.phone.trim() && !phoneRegex.test(formData.phone)) { // formData.phones.forEach((phone, index) => {
newErrors.phone = "Phone number must contain only digits"; // 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; return newErrors;
}; };
const handleSubmit = async () => { const handleSubmit = async () => {
const validationErrors = validate(); const validationErrors = validate();
let type = "Add"; let type = 'Add'
let payload = formData; let payload = formData
console.log(payload);
if (Object.keys(validationErrors).length > 0) { if (Object.keys(validationErrors).length > 0) {
setErrors(validationErrors); setErrors(validationErrors);
return; return;
} }
try { try {
if (actionStatus === "Edit") { if (actionStatus === 'Edit') {
type = "Edit"; type = 'Edit'
payload = { payload = {
...formData, ...formData,
contactId: editJsonData.id, contactId: editJsonData.id
}; }
} }
await onSubmit(payload, type); await onSubmit(payload, type);
setFormData({ setFormData({
email: "", email: '',
firstName: "", firstName: '',
lastName: "", lastName: '',
title: "", title: '',
company: "", company: '',
website: "", website: '',
phone: "", phones: [''],
}); });
setErrors({}); setErrors({});
} catch (err) { } catch (err) {
console.error("Submit failed:", err); console.error('Submit failed:', err);
} }
}; };
return ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-white/5 backdrop-blur-sm bg-opacity-50"> <div className="fixed inset-0 z-50 flex items-center justify-center bg-white/5 backdrop-blur-sm bg-opacity-50">
<div className="bg-white rounded-md p-6 max-w-[700px] w-full shadow-lg relative"> <div className="bg-white rounded-md p-6 max-w-[700px] w-full shadow-lg relative">
@ -175,39 +173,30 @@ const ContactFormModal = ({
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
{[ {[
{ label: "First Name", field: "firstName" }, { label: 'First Name', field: 'firstName' },
{ label: "Last Name", field: "lastName" }, { label: 'Last Name', field: 'lastName' },
{ label: "Email", field: "email", fieldType: "email" }, { label: 'Email', field: 'email' },
{ label: "Title", field: "title" }, { label: 'Title', field: 'title' },
{ label: "Company", field: "company" }, { label: 'Company', field: 'company' },
{ label: "Website", field: "website", fieldType: "url" }, { label: 'Website', field: 'website' },
{ label: "Phone", field: "phone", fieldType: "tel" }, ].map(({ label, field }) => (
].map(({ label, field, fieldType }) => (
<div key={field} className="flex flex-col"> <div key={field} className="flex flex-col">
<label className="text-sm font-medium text-[var(--greyTextCol)] mb-1"> <label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">{label}</label>
{label}
</label>
<input <input
type={fieldType ? fieldType : "text"} type={field === 'email' ? 'email' : 'text'}
value={(formData[field as keyof ContactData] as string) || ""} value={(formData[field as keyof ContactData] as string) || ''}
onChange={(e) => onChange={(e) => handleChange(field as keyof ContactData, e.target.value)}
handleChange(field as keyof ContactData, e.target.value)
}
required={true} 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" className="px-3 py-1.5 border border-gray-400 rounded-md focus:outline-none focus:ring-1 focus:ring-[var(--primary)] text-sm"
placeholder={`Enter ${label}`} placeholder={`Enter ${label}`}
/> />
{errors[field] && ( {errors[field] && <span className="text-sm text-red-500 mt-1">{errors[field]}</span>}
<span className="text-sm text-red-500 mt-1">
{errors[field]}
</span>
)}
</div> </div>
))} ))}
</div> </div>
{/* <div> <div>
<label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">Phone Number</label> <label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">Phone Numbers</label>
<div className="space-y-2"> <div className="space-y-2">
{formData?.phones?.map((phone, index) => ( {formData?.phones?.map((phone, index) => (
<div key={index} className="flex flex-col gap-1"> <div key={index} className="flex flex-col gap-1">
@ -244,7 +233,7 @@ const ContactFormModal = ({
+ Add another phone + Add another phone
</button> </button>
</div> </div>
</div> */} </div>
<div className="flex justify-end"> <div className="flex justify-end">
<button <button
@ -252,9 +241,7 @@ const ContactFormModal = ({
onClick={() => setShowModal((prev) => !prev)} onClick={() => setShowModal((prev) => !prev)}
disabled={loading} disabled={loading}
className="bg-gray-300 px-5 py-1.5 rounded-md text-slate-700 text-sm font-medium hover:bg-opacity-90 transition disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer me-3" className="bg-gray-300 px-5 py-1.5 rounded-md text-slate-700 text-sm font-medium hover:bg-opacity-90 transition disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer me-3"
> > Cancel
{" "}
Cancel
</button> </button>
<button <button
type="button" type="button"
@ -268,9 +255,13 @@ const ContactFormModal = ({
SAVING... SAVING...
</> </>
) : ( ) : (
`${actionStatus?.toUpperCase() || "SAVE"} CONTACT` `${actionStatus?.toUpperCase() || 'SAVE'} CONTACT`
)} )}
</button> </button>
</div> </div>
</div> </div>
</div> </div>

154
src/components/setting/ContactForm.tsx
View File

@ -1,6 +1,6 @@
// ContactForm.tsx // ContactForm.tsx
import React, { useState } from "react"; import React, { useState } from 'react';
import { FaSpinner } from "react-icons/fa"; import { FaSpinner } from 'react-icons/fa';
export interface ContactData { export interface ContactData {
contactId?: number; contactId?: number;
@ -10,7 +10,7 @@ export interface ContactData {
title: string; title: string;
company: string; company: string;
website: string; website: string;
phone: string; phones: string[];
} }
interface Props { interface Props {
@ -20,13 +20,13 @@ interface Props {
const ContactForm = ({ onSubmit, loading }: Props) => { const ContactForm = ({ onSubmit, loading }: Props) => {
const [formData, setFormData] = useState<ContactData>({ const [formData, setFormData] = useState<ContactData>({
email: "", email: '',
firstName: "", firstName: '',
lastName: "", lastName: '',
title: "", title: '',
company: "", company: '',
website: "", website: '',
phone: "", phones: [''],
}); });
const [errors, setErrors] = useState<{ [key: string]: string }>({}); const [errors, setErrors] = useState<{ [key: string]: string }>({});
@ -34,44 +34,44 @@ const ContactForm = ({ onSubmit, loading }: Props) => {
const handleChange = (field: keyof ContactData, value: string) => { const handleChange = (field: keyof ContactData, value: string) => {
setFormData((prev) => ({ ...prev, [field]: value })); setFormData((prev) => ({ ...prev, [field]: value }));
if (errors[field]) { if (errors[field]) {
setErrors((prev) => ({ ...prev, [field]: "" })); setErrors((prev) => ({ ...prev, [field]: '' }));
} }
}; };
// const handlePhoneChange = (index: number, value: string) => { const handlePhoneChange = (index: number, value: string) => {
// const numericValue = value.replace(/\D/g, ""); // Remove non-numeric const numericValue = value.replace(/\D/g, ''); // Remove non-numeric
// const updatedPhone = [...formData.phone]; const updatedPhones = [...formData.phones];
// updatedPhone[index] = numericValue; updatedPhones[index] = numericValue;
// setFormData((prev) => ({ ...prev, phone: updatedPhone })); setFormData((prev) => ({ ...prev, phones: updatedPhones }));
// const errorKey = `phone_${index}`; const errorKey = `phones_${index}`;
// if (errors[errorKey]) { if (errors[errorKey]) {
// setErrors((prev) => ({ ...prev, [errorKey]: "" })); setErrors((prev) => ({ ...prev, [errorKey]: '' }));
// } }
// }; };
// const addPhoneField = () => {
// setFormData((prev) => ({ ...prev, phone: [...prev.phone, ""] }));
// };
// const removePhoneField = (index: number) => { const addPhoneField = () => {
// const updatedPhone = formData.phone.filter((_, i) => i !== index); setFormData((prev) => ({ ...prev, phones: [...prev.phones, ''] }));
// setFormData((prev) => ({ ...prev, phone: updatedPhone })); };
// };
const removePhoneField = (index: number) => {
const updatedPhones = formData.phones.filter((_, i) => i !== index);
setFormData((prev) => ({ ...prev, phones: updatedPhones }));
};
const validate = () => { const validate = () => {
const newErrors: { [key: string]: string } = {}; const newErrors: { [key: string]: string } = {};
// const nameRegex = /^[a-zA-Z\s\-']+$/; const nameRegex = /^[a-zA-Z\s\-']+$/;
const urlRegex = /^(https?:\/\/)?([\w-]+\.)+[\w-]{2,}(\/.*)?$/; const urlRegex = /^(https?:\/\/)?([\w-]+\.)+[\w-]{2,}(\/.*)?$/;
const phoneRegex = const phoneRegex = /^\d+$/;
/^\+?\d{1,4}?[-.\s]?\(?\d{2,5}\)?[-.\s]?\d{3,5}[-.\s]?\d{3,5}$/;
// Email // Email
if (!formData.email.trim()) { if (!formData.email.trim()) {
newErrors.email = "Email is required"; newErrors.email = 'Email is required';
} else if (!/\S+@\S+\.\S+/.test(formData.email)) { } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
newErrors.email = "Invalid email address"; newErrors.email = 'Invalid email address';
} }
// // First Name // // First Name
@ -83,7 +83,9 @@ const ContactForm = ({ onSubmit, loading }: Props) => {
// Last Name // Last Name
if (!formData.lastName.trim()) { if (!formData.lastName.trim()) {
newErrors.lastName = "Last name is required"; newErrors.lastName = 'Last name is required';
} else if (!nameRegex.test(formData.lastName)) {
newErrors.lastName = 'Last name contains invalid characters';
} }
// // Title // // Title
@ -91,19 +93,25 @@ const ContactForm = ({ onSubmit, loading }: Props) => {
// newErrors.title = 'Title is required'; // newErrors.title = 'Title is required';
// } // }
// Website (optional but validate if present) // Website (optional but validate if present)
if (formData.website.trim() && !urlRegex.test(formData.website)) { if (formData.website.trim() && !urlRegex.test(formData.website)) {
newErrors.website = "Invalid website URL"; newErrors.website = 'Invalid website URL';
} }
// Phone // Phones
if (formData.phone.trim() && !phoneRegex.test(formData.phone)) { // formData.phones.forEach((phone, index) => {
newErrors.phone = "Phone number must contain only digits"; // 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; return newErrors;
}; };
const handleSubmit = async () => { const handleSubmit = async () => {
const validationErrors = validate(); const validationErrors = validate();
if (Object.keys(validationErrors).length > 0) { if (Object.keys(validationErrors).length > 0) {
@ -115,61 +123,53 @@ const ContactForm = ({ onSubmit, loading }: Props) => {
await onSubmit(formData); await onSubmit(formData);
setFormData({ setFormData({
email: "", email: '',
firstName: "", firstName: '',
lastName: "", lastName: '',
title: "", title: '',
company: "", company: '',
website: "", website: '',
phone: "", phones: [''],
}); });
setErrors({}); setErrors({});
} catch (err) { } catch (err) {
console.error("Submit failed:", err); console.error('Submit failed:', err);
} }
}; };
return ( return (
<div className="ms-2 space-y-2 max-w-[60vw]"> <div className="ms-2 space-y-2 max-w-[60vw]">
<h2 className="text-lg font-medium text-slate-500">Add Contact</h2> <h2 className="text-lg font-medium text-slate-500">Add Contact</h2>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
{[ {[
{ label: "First Name", field: "firstName" }, { label: 'First Name', field: 'firstName' },
{ label: "Last Name", field: "lastName" }, { label: 'Last Name', field: 'lastName' },
{ label: "Email", field: "email", fieldType: "email" }, { label: 'Email', field: 'email' },
{ label: "Title", field: "title" }, { label: 'Title', field: 'title' },
{ label: "Company", field: "company" }, { label: 'Company', field: 'company' },
{ label: "Website", field: "website", fieldType: "url" }, { label: 'Website', field: 'website' },
{ label: "Phone", field: "phone", fieldType: "tel" }, ].map(({ label, field }) => (
].map(({ label, field, fieldType }) => (
<div key={field} className="flex flex-col"> <div key={field} className="flex flex-col">
<label className="text-sm font-medium text-[var(--greyTextCol)] mb-1"> <label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">{label}</label>
{label}
</label>
<input <input
type={fieldType ? fieldType : "text"} type={field === 'email' ? 'email' : 'text'}
value={formData[field as keyof ContactData] as string} value={formData[field as keyof ContactData] as string}
onChange={(e) => onChange={(e) => handleChange(field as keyof ContactData, e.target.value)}
handleChange(field as keyof ContactData, e.target.value)
}
required={true} 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" className="px-3 py-1.5 border border-gray-400 rounded-md focus:outline-none focus:ring-1 focus:ring-[var(--primary)] text-sm"
placeholder={`Enter ${label}`} placeholder={`Enter ${label}`}
/> />
{errors[field] && ( {errors[field] && <span className="text-sm text-red-500 mt-1">{errors[field]}</span>}
<span className="text-sm text-red-500 mt-1">{errors[field]}</span>
)}
</div> </div>
))} ))}
</div> </div>
{/* <div> <div>
<label className="text-sm font-medium text-[var(--greyTextCol)] mb-1"> <label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">Phone Numbers</label>
Phone Numbers
</label>
<div className="space-y-2"> <div className="space-y-2">
{formData.phone.map((phone, index) => ( {formData.phones.map((phone, index) => (
<div key={index} className="flex flex-col gap-1"> <div key={index} className="flex flex-col gap-1">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<input <input
@ -178,9 +178,9 @@ const ContactForm = ({ onSubmit, loading }: Props) => {
onChange={(e) => handlePhoneChange(index, e.target.value)} 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" 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} maxLength={15}
placeholder="Enter Phone Numbers" placeholder='Enter Phone Numbers'
/> />
{formData.phone.length > 1 && ( {formData.phones.length > 1 && (
<button <button
type="button" type="button"
onClick={() => removePhoneField(index)} onClick={() => removePhoneField(index)}
@ -190,10 +190,8 @@ const ContactForm = ({ onSubmit, loading }: Props) => {
</button> </button>
)} )}
</div> </div>
{errors[`phone_${index}`] && ( {errors[`phones_${index}`] && (
<span className="text-sm text-red-500"> <span className="text-sm text-red-500">{errors[`phones_${index}`]}</span>
{errors[`phone_${index}`]}
</span>
)} )}
</div> </div>
))} ))}
@ -206,7 +204,7 @@ const ContactForm = ({ onSubmit, loading }: Props) => {
+ Add another phone + Add another phone
</button> </button>
</div> </div>
</div> */} </div>
<div className="flex justify-end"> <div className="flex justify-end">
<button <button
@ -221,7 +219,7 @@ const ContactForm = ({ onSubmit, loading }: Props) => {
SAVING... SAVING...
</> </>
) : ( ) : (
"SAVE CONTACT" 'SAVE CONTACT'
)} )}
</button> </button>
</div> </div>