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

Merge remote-tracking branch 'origin/main'

This commit is contained in:
=bhagwanSingh 2025-08-04 15:35:17 +05:30
parent c5c4f0fa17 0b039b9dab
commit 479ad820be
13 changed files with 1009 additions and 800 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,6 +11,7 @@ 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,32 +10,38 @@ export interface ContactData {
title: string; title: string;
company: string; company: string;
website: string; website: string;
phones: string[]; phone: 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 = ({ onSubmit, loading, setShowModal, actionStatus, editJsonData }: Props) => { const ContactFormModal = ({
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: "",
phones: [''], phone: "",
}); });
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,
@ -43,128 +49,124 @@ const ContactFormModal = ({ onSubmit, loading, setShowModal, actionStatus, editJ
title: editJsonData.title, title: editJsonData.title,
company: editJsonData.company, company: editJsonData.company,
website: editJsonData.website, website: editJsonData.website,
phones: editJsonData.phones, phone: editJsonData.phone,
}) });
} }
}, [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.phones]; // const updatedPhones = [...formData.phone];
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 addPhoneField = () => { // const removePhoneField = (index: number) => {
setFormData((prev) => ({ ...prev, phones: [...prev.phones, ''] })); // const updatedPhones = formData.phones.filter((_, i) => i !== index);
}; // 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 nameRegex = /^[a-zA-Z\s\-']+$/; const emailRegex = /\S+@\S+\.\S+/;
// const nameRegex = /^[a-zA-Z\s\-']+$/;
const urlRegex = /^(https?:\/\/)?([\w-]+\.)+[\w-]{2,}(\/.*)?$/; const urlRegex = /^(https?:\/\/)?([\w-]+\.)+[\w-]{2,}(\/.*)?$/;
const phoneRegex = /^\d+$/; const phoneRegex =
/^\+?\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 (!emailRegex.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 if (!nameRegex.test(formData.firstName)) { // } else
// newErrors.firstName = 'First name contains invalid characters'; // if (formData.firstName.trim() && !nameRegex.test(formData.firstName)) {
// 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";
} }
// Phones // Phone
// formData.phones.forEach((phone, index) => { if (formData.phone.trim() && !phoneRegex.test(formData.phone)) {
// if (!phone.trim()) { newErrors.phone = "Phone number must contain only digits";
// 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: "",
phones: [''], phone: "",
}); });
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">
@ -173,30 +175,39 @@ const ContactFormModal = ({ onSubmit, loading, setShowModal, actionStatus, editJ
<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' }, { label: "Email", field: "email", fieldType: "email" },
{ label: 'Title', field: 'title' }, { label: "Title", field: "title" },
{ label: 'Company', field: 'company' }, { label: "Company", field: "company" },
{ label: 'Website', field: 'website' }, { label: "Website", field: "website", fieldType: "url" },
].map(({ label, field }) => ( { label: "Phone", field: "phone", fieldType: "tel" },
].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}</label> <label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">
{label}
</label>
<input <input
type={field === 'email' ? 'email' : 'text'} type={fieldType ? fieldType : "text"}
value={(formData[field as keyof ContactData] as string) || ''} value={(formData[field as keyof ContactData] as string) || ""}
onChange={(e) => handleChange(field as keyof ContactData, e.target.value)} onChange={(e) =>
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] && <span className="text-sm text-red-500 mt-1">{errors[field]}</span>} {errors[field] && (
<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 Numbers</label> <label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">Phone Number</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">
@ -233,7 +244,7 @@ const ContactFormModal = ({ onSubmit, loading, setShowModal, actionStatus, editJ
+ Add another phone + Add another phone
</button> </button>
</div> </div>
</div> </div> */}
<div className="flex justify-end"> <div className="flex justify-end">
<button <button
@ -241,7 +252,9 @@ const ContactFormModal = ({ onSubmit, loading, setShowModal, actionStatus, editJ
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"
@ -255,13 +268,9 @@ const ContactFormModal = ({ onSubmit, loading, setShowModal, actionStatus, editJ
SAVING... SAVING...
</> </>
) : ( ) : (
`${actionStatus?.toUpperCase() || 'SAVE'} CONTACT` `${actionStatus?.toUpperCase() || "SAVE"} CONTACT`
)} )}
</button> </button>
</div> </div>
</div> </div>
</div> </div>

26
src/components/home/Cards.tsx
View File

@ -204,7 +204,7 @@ const Cards: React.FC<CardsProps> = ({ type = 'dashboard', onOpenModal, onDateRa
// } // }
return ( return (
<div className="w-full px-4 py-3 mt-2 rounded-md"> <div className="w-full px-3 rounded-md">
{/* Header */} {/* Header */}
<div className="flex flex-col lg:flex-row items-start lg:items-center justify-between mb-2 gap-4"> <div className="flex flex-col lg:flex-row items-start lg:items-center justify-between mb-2 gap-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
@ -212,7 +212,7 @@ const Cards: React.FC<CardsProps> = ({ type = 'dashboard', onOpenModal, onDateRa
<FaFilter className="text-white text-lg" /> <FaFilter className="text-white text-lg" />
</div> */} </div> */}
<div> <div>
<h2 className="text-lg font-semibold text-gray-800">Overview</h2> {/* <h2 className="text-lg font-semibold text-gray-800">Overview</h2> */}
{/* <p className="text-gray-600 text-sm">Monitor performance metrics</p> */} {/* <p className="text-gray-600 text-sm">Monitor performance metrics</p> */}
</div> </div>
</div> </div>
@ -231,11 +231,11 @@ const Cards: React.FC<CardsProps> = ({ type = 'dashboard', onOpenModal, onDateRa
</div> </div>
</div> </div>
</div> : </div> :
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4"> <div className="flex flex-wrap gap-2 justify-between">
{cards.map((card, index) => ( {cards.map((card, index) => (
<div <div
key={card.title} key={card.title}
className={`group relative overflow-hidden rounded-xl ${card.gradient} border border-white/40 p-4 transition-all duration-300 hover:scale-105 hover:shadow-lg ${card.shadowColor} cursor-pointer backdrop-blur-sm`} className={`group relative overflow-hidden rounded-lg ${card.gradient} border border-white/40 px-3 py-1 transition-all duration-300 hover:scale-105 hover:shadow-lg ${card.shadowColor} cursor-pointer backdrop-blur-sm min-w-[200px] max-w-[220px]`}
style={{ style={{
animationDelay: `${index * 100}ms` animationDelay: `${index * 100}ms`
}} }}
@ -247,24 +247,20 @@ const Cards: React.FC<CardsProps> = ({ type = 'dashboard', onOpenModal, onDateRa
</div> </div>
{/* Content */} {/* Content */}
<div className="relative z-10"> <div className="relative flex justify-between items-center z-10">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center gap-2">
<div className={`p-2 rounded-lg border ${card.iconBg} group-hover:scale-110 transition-transform duration-200`}> <div className={`p-2 rounded-lg border ${card.iconBg} group-hover:scale-110 transition-transform duration-200`}>
{card.icon} {card.icon}
</div> </div>
{renderTrendIndicator(card.trend, card.percentage)} <h3 className="text-sm font-medium text-gray-600 group-hover:text-gray-700 transition-colors">
</div>
<div className="space-y-1">
<h3 className="text-xs font-medium text-gray-600 group-hover:text-gray-700 transition-colors">
{card.title} {card.title}
</h3> </h3>
<div className="flex items-baseline gap-1"> </div>
<p className={`text-xl font-bold ${card.textColor} group-hover:scale-105 transition-transform duration-200`}>
<div className="flex items-center">
<p className={`text-xl font-bold ${card.textColor} group-hover:scale-105 transition-transform duration-200 leading-none mb-1`}>
{card.count} {card.count}
</p> </p>
<span className="text-[10px] text-gray-500">items</span>
</div>
</div> </div>
</div> </div>

8
src/components/home/Home.tsx
View File

@ -35,7 +35,7 @@ const Home = () => {
{ {
title: 'Action Needed', title: 'Action Needed',
count: data.actionNeeded || 0, count: data.actionNeeded || 0,
icon: <FaTasks size={18} className="text-indigo-600" />, icon: <FaTasks size={15} className="text-indigo-600" />,
gradient: 'bg-gradient-to-br from-indigo-50 to-indigo-100', gradient: 'bg-gradient-to-br from-indigo-50 to-indigo-100',
shadowColor: 'shadow-indigo-200/50', shadowColor: 'shadow-indigo-200/50',
iconBg: 'bg-indigo-100 border-indigo-200', iconBg: 'bg-indigo-100 border-indigo-200',
@ -45,7 +45,7 @@ const Home = () => {
{ {
title: 'Expiring Soon', title: 'Expiring Soon',
count: data.expiring || 0, count: data.expiring || 0,
icon: <FaHourglassHalf size={18} className="text-rose-600" />, icon: <FaHourglassHalf size={15} className="text-rose-600" />,
gradient: 'bg-gradient-to-br from-rose-50 to-rose-100', gradient: 'bg-gradient-to-br from-rose-50 to-rose-100',
shadowColor: 'shadow-rose-200/50', shadowColor: 'shadow-rose-200/50',
iconBg: 'bg-rose-100 border-rose-200', iconBg: 'bg-rose-100 border-rose-200',
@ -55,7 +55,7 @@ const Home = () => {
{ {
title: 'Completed', title: 'Completed',
count: data.completed || 0, count: data.completed || 0,
icon: <FaCheckCircle size={18} className="text-teal-600" />, icon: <FaCheckCircle size={15} className="text-teal-600" />,
gradient: 'bg-gradient-to-br from-teal-50 to-teal-100', gradient: 'bg-gradient-to-br from-teal-50 to-teal-100',
shadowColor: 'shadow-teal-200/50', shadowColor: 'shadow-teal-200/50',
iconBg: 'bg-teal-100 border-teal-200', iconBg: 'bg-teal-100 border-teal-200',
@ -65,7 +65,7 @@ const Home = () => {
{ {
title: 'Draft', title: 'Draft',
count: data.draft || 0, count: data.draft || 0,
icon: <FaClock size={18} className="text-stone-600" />, icon: <FaClock size={15} className="text-stone-600" />,
gradient: 'bg-gradient-to-br from-blue-50 to-blue-100', gradient: 'bg-gradient-to-br from-blue-50 to-blue-100',
shadowColor: 'shadow-blue-200/50', shadowColor: 'shadow-blue-200/50',
iconBg: 'bg-blue-100 border-blue-200', iconBg: 'bg-blue-100 border-blue-200',

68
src/components/process/processStepOne/ProcessStepOne.tsx
View File

@ -7,15 +7,17 @@ import api from "../../../config/api";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../../../store/store"; import { RootState } from "../../../store/store";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { useNavigate, useParams } from "react-router-dom"; import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import { setImages } from "../../../store/slices/selectedDocsSlice"; import { setImages } from "../../../store/slices/selectedDocsSlice";
import { addRecipient, addRecipientAsync, fetchRecipients, recipientType, resetRecipients, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE, updateRecipientIds } from "../../../store/slices/selectedRecipientsSlice"; import { addRecipient, addRecipientAsync, fetchRecipients, recipientType, removeAllRecipients, removeRecipientAsync, resetRecipients, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE, updateRecipientIds } from "../../../store/slices/selectedRecipientsSlice";
import { setTransactionId, TRANSACTION_STATUS_ENUMS, updateTransactionStatus } from "../../../store/slices/transactionSlice"; import { setTransactionId, TRANSACTION_STATUS_ENUMS, updateTransactionStatus } from "../../../store/slices/transactionSlice";
import { hideLoader, showLoader } from "../../../store/slices/loaderSlice"; import { hideLoader, showLoader } from "../../../store/slices/loaderSlice";
import Loader from "../../dashboard/Loader"; import Loader from "../../dashboard/Loader";
import { Bounce, toast } from "react-toastify"; import { Bounce, toast } from "react-toastify";
import { fetchDocuments, resetDocuments, setDocuments, uploadDocuments } from "../../../store/slices/documentSlice"; import { fetchDocuments, resetDocuments, setDocuments, uploadDocuments } from "../../../store/slices/documentSlice";
import { SignTypeEnum } from "../../../utlity/types"; import { SignTypeEnum } from "../../../utlity/types";
import { RiPencilFill } from "react-icons/ri";
import SelfSignWarnModal from "./SelfSignWarnModal";
const ProcessStepOne = () => { const ProcessStepOne = () => {
interface EmailDtls { interface EmailDtls {
@ -28,6 +30,9 @@ const ProcessStepOne = () => {
const signType = useParams<{ signType: string }>().signType; const signType = useParams<{ signType: string }>().signType;
const templateId = useParams<{ templateId: string }>().templateId; const templateId = useParams<{ templateId: string }>().templateId;
let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>(); let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
const [searchParams] = useSearchParams();
console.log("searchParams", searchParams.get('useTemplate'))
const isTamplate = searchParams.get('useTemplate')
const navigate = useNavigate(); const navigate = useNavigate();
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -54,10 +59,29 @@ const ProcessStepOne = () => {
const selectedDocuments = useSelector((state: RootState) => state.documents.documents) const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients) const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients)
const [showSelfSignWarnModal, setShowSelfSignWarnModal] = useState(false)
console.log()
const userData = useSelector((state: RootState) => state.user) const userData = useSelector((state: RootState) => state.user)
// ProcessStepOne.tsx // ProcessStepOne.tsx
const topRef = useRef<HTMLDivElement | null>(null); const topRef = useRef<HTMLDivElement | null>(null);
const [templateName, setTemplateName] = useState('Untitled');
const [isTyping, setIsTyping] = useState(false);
// Optional: use a timer to detect pause in typing
let typingTimeout = null;
const handleChange = (e) => {
setTemplateName(e.target.value);
setIsTyping(true);
clearTimeout(typingTimeout);
typingTimeout = setTimeout(() => {
setIsTyping(false);
}, 5000); // hide icon while typing, show it again after 500ms of no input
};
// const userData = useSelector((state: RootState) => state.user) // const userData = useSelector((state: RootState) => state.user)
const [transactionDetails, setTransactionDetails] = useState<any>([]); const [transactionDetails, setTransactionDetails] = useState<any>([]);
@ -71,6 +95,7 @@ const ProcessStepOne = () => {
try { try {
const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`); const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`);
setTransactionDetails(res.data) setTransactionDetails(res.data)
// console.log("setTransactionDetails",res.data)
} catch (e) { } catch (e) {
console.log("Error - transactions details") console.log("Error - transactions details")
} }
@ -111,6 +136,7 @@ const ProcessStepOne = () => {
subject: false subject: false
} }
if (transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
if (!selectedDocuments.length) { if (!selectedDocuments.length) {
formError.documents = true formError.documents = true
} }
@ -143,6 +169,8 @@ const ProcessStepOne = () => {
}); });
return; return;
} }
}
try { try {
dispatch(showLoader("Processing Documents...")); dispatch(showLoader("Processing Documents..."));
@ -194,6 +222,17 @@ const ProcessStepOne = () => {
let recipientId = null; let recipientId = null;
if (signType === SignTypeEnum.selfSign) { if (signType === SignTypeEnum.selfSign) {
dispatch(removeAllRecipients());
await Promise.all(
selectedRecipients.map((recipient) => dispatch(removeRecipientAsync({
recipientId: recipient.id,
email: recipient.email,
accountId,
transactionId,
}))
)
);
recipientsDataTemp = [{ recipientsDataTemp = [{
id: null, id: null,
routingOrder: 1, routingOrder: 1,
@ -231,6 +270,7 @@ const ProcessStepOne = () => {
dispatch(showLoader("Processing Message...")); dispatch(showLoader("Processing Message..."));
let res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { let res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, {
name: templateName,
subject: emailDtls.subject, message: emailDtls.message, subject: emailDtls.subject, message: emailDtls.message,
status: "CREATED" status: "CREATED"
}) })
@ -248,7 +288,7 @@ const ProcessStepOne = () => {
dispatch(hideLoader()); dispatch(hideLoader());
if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) { if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
console.log(`/process-step-two/${accountId}/template/${transactionId}`) console.log(`/process-step-two/${accountId}/template/${transactionId}`)
if(!saveAndClose) { if (!saveAndClose) {
navigate(`/process-step-two/${accountId}/template/${transactionId}`) navigate(`/process-step-two/${accountId}/template/${transactionId}`)
} else { } else {
navigate(`/templates`) navigate(`/templates`)
@ -297,6 +337,7 @@ const ProcessStepOne = () => {
const handleSelfSignCb = (e: React.ChangeEvent<HTMLInputElement>) => { const handleSelfSignCb = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.currentTarget.checked) { if (e.currentTarget.checked) {
navigate("self_sign"); navigate("self_sign");
setShowSelfSignWarnModal((prev) => !prev)
} else { } else {
navigate("./../"); navigate("./../");
} }
@ -315,7 +356,21 @@ const ProcessStepOne = () => {
onClick={handleClose} onClick={handleClose}
className='text-2xl text-slate-500 cursor-pointer hover:text-[var(--primary)] transition' className='text-2xl text-slate-500 cursor-pointer hover:text-[var(--primary)] transition'
/> />
<p className="text-base font-normal text-gray-700 border-l pl-4">Add Recipient and Message</p> <p className="text-base font-normal text-gray-700 border-l pl-4 relative">
{transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES ?
<>
<input
value={templateName}
onChange={handleChange}
className="w-full px-4 py-1.5 border-2 border-dashed rounded-md text-sm focus:outline-none transition border-gray-300 focus:ring-2 focus:border-dashed focus:ring-[var(--primary)]"
/>
{!isTyping && (
<RiPencilFill className="absolute top-2.5 right-2 text-[17px]" />
)}
</> :
"Add Recipient and Message"
}
</p>
</div> </div>
<div <div
@ -352,7 +407,7 @@ const ProcessStepOne = () => {
{/* Recipients */} {/* Recipients */}
<section className="mt-8"> <section className="mt-8">
{ {!isTamplate &&
transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES &&
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<h2 className="text-lg font-medium mb-4 pt-6 border-t text-[var(--processStepOneTextHead)]">Signers</h2> <h2 className="text-lg font-medium mb-4 pt-6 border-t text-[var(--processStepOneTextHead)]">Signers</h2>
@ -368,7 +423,7 @@ const ProcessStepOne = () => {
} }
{ {
signType !== SignTypeEnum.selfSign && (signType !== SignTypeEnum.selfSign || showSelfSignWarnModal) &&
<div className="flex flex-col gap-4 align-start"> <div className="flex flex-col gap-4 align-start">
<RecipientCards transactionTemplateToggle={transactionTemplateToggle} setEditRecipient={setEditRecipient} setEditCase={setEditCase} /> <RecipientCards transactionTemplateToggle={transactionTemplateToggle} setEditRecipient={setEditRecipient} setEditCase={setEditCase} />
{/* {signType !== "self-sign" && <RecipientAddCard />} */} {/* {signType !== "self-sign" && <RecipientAddCard />} */}
@ -418,6 +473,7 @@ const ProcessStepOne = () => {
</div> </div>
{globalLoader.isLoading && <Loader />} {globalLoader.isLoading && <Loader />}
{showSelfSignWarnModal && <SelfSignWarnModal setShowSelfSignWarnModal={setShowSelfSignWarnModal} />}
</div > </div >
</> </>
); );

321
src/components/process/processStepOne/RecipientAddCard.tsx
View File

@ -1,8 +1,8 @@
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { FaPlus } from "react-icons/fa"; import { FaPlus } from "react-icons/fa";
import { addRecipient, Recipient, recipientType, TRANSACTION_TEMPLATE_TOGGLE, updateRecipient } from "../../../store/slices/selectedRecipientsSlice"; import { addRecipient, Recipient, recipientType, TRANSACTION_TEMPLATE_TOGGLE, updateRecipient } from "../../../store/slices/selectedRecipientsSlice";
import { useDispatch } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { AppDispatch } from "../../../store/store"; import { AppDispatch, RootState } from "../../../store/store";
import api from "../../../config/api"; import api from "../../../config/api";
import ContactModal from "./ContactModal"; import ContactModal from "./ContactModal";
import useDebouncedEffect from "../../../utlity/useDebounce"; import useDebouncedEffect from "../../../utlity/useDebounce";
@ -29,6 +29,8 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
JSON.parse(sessionStorage.getItem('activeAccountId') || 'null') JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
); );
const recipients = useSelector((state: RootState) => state.selectedRecipients.recipients);
console.log("recipients.length in AddCase", recipients)
const [contactData, setContactData] = useState<ContactTypeObj>({ type: "", contacts: [] }); const [contactData, setContactData] = useState<ContactTypeObj>({ type: "", contacts: [] });
const [openContactModal, setOpenContactModal] = useState(false); const [openContactModal, setOpenContactModal] = useState(false);
@ -47,6 +49,14 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
const [lastQuery, setLastQuery] = useState<string | null>(null); const [lastQuery, setLastQuery] = useState<string | null>(null);
const containerRef = useRef<HTMLDivElement | null>(null); const containerRef = useRef<HTMLDivElement | null>(null);
const [manualFocusTriggered, setManualFocusTriggered] = useState(false); const [manualFocusTriggered, setManualFocusTriggered] = useState(false);
const [errors, setErrors] = useState({
roleName: false,
lastName: false,
email: false,
emailFormat: false,
type: false,
});
console.log(recipient) console.log(recipient)
@ -62,7 +72,37 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
}, [openContactModal]); }, [openContactModal]);
useEffect(() => { useEffect(() => {
// Check if the recipient exists in the list (using uuid or id or email)
const exists = recipients.some((r) => {
return (
(r.uuid && r.uuid === editRecipient?.uuid) ||
(r.id && r.id === editRecipient?.id) ||
(r.email && r.email === editRecipient?.email)
);
});
console.log("Line 83", exists)
if (editCase === "Edit" && editRecipient) { if (editCase === "Edit" && editRecipient) {
console.log("editRecipientAdd", editRecipient)
if (!exists) {
// Recipient was deleted -> reset
setEditCase('');
setEditRecipient(null);
setRecipients({
firstName: "",
lastName: "",
email: "",
hostName: "",
hostEmail: "",
roleName: "",
type: recipientType.SIGNER,
allowSenderToEdit: true,
allowSenderToDelete: true,
uuid: "",
newOne: false,
});
return;
}
setRecipients({ setRecipients({
// id:editRecipient.id, // id:editRecipient.id,
firstName: editRecipient.firstName || "", firstName: editRecipient.firstName || "",
@ -78,34 +118,103 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
newOne: editRecipient.newOne ?? false newOne: editRecipient.newOne ?? false
}); });
} }
}, [editCase, editRecipient]); }, [editCase, editRecipient, recipients]);
const handleRecipientAdd = (e: React.FormEvent<HTMLFormElement>) => { const handleRecipientAdd = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
console.log("recipientrecipient", recipient) const newErrors = {
roleName: false,
lastName: false,
email: false,
emailFormat: false,
type: false,
};
if(transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) { const roleNameFilled = recipient.roleName.trim();
if (!recipient.lastName || !recipient.email || !recipient.type) return; const lastNameFilled = recipient.lastName.trim();
const emailFilled = recipient.email.trim();
const firstNameFilled = recipient.firstName.trim()
// ✅ Email format validation
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(recipient.email)) {
console.log("Invalid email format"); // 🔹 Check if we're in TRANSACTIONS mode
if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
if (lastNameFilled || emailFilled) {
if (lastNameFilled && !emailFilled) {
setErrors({ ...newErrors, email: true });
return; return;
} }
if (!lastNameFilled && emailFilled) {
setErrors({ ...newErrors, lastName: true });
return;
}
if (!emailRegex.test(emailFilled)) {
setErrors({ ...newErrors, emailFormat: true });
return;
}
submitForm();
return;
}
// Neither lastName nor email is filled — treat as invalid
setErrors({ ...newErrors, lastName: true, email: true });
return;
} }
// // 1. If either lastName or email is filled, validate their presence mutually
// if ( emailFilled) {
// // if (lastNameFilled && !emailFilled) {
// // setErrors({ ...newErrors, email: true });
// // return;
// // }
// // if (!lastNameFilled && emailFilled) {
// // setErrors({ ...newErrors, lastName: true });
// // return;
// // }
// // // Both lastName and email are filled — check email format
// if (!emailRegex.test(emailFilled)) {
// setErrors({ ...newErrors, emailFormat: true });
// return;
// }
// // Passed validation, submit
// submitForm();
// return;
// }
if (roleNameFilled || lastNameFilled || emailFilled || firstNameFilled) {
submitForm()
return
}
// 2. If both lastName and email empty, validate roleName only
if (!roleNameFilled) {
setErrors({ ...newErrors, roleName: true });
return;
}
// roleName filled, submit immediately
submitForm();
function submitForm() {
if (editCase === 'Edit') { if (editCase === 'Edit') {
dispatch(updateRecipient(recipient)); dispatch(updateRecipient(recipient));
} else { } else {
dispatch(addRecipient({ dispatch(addRecipient({
...recipient, ...recipient,
uuid: uuidv4(), uuid: uuidv4(),
newOne: true newOne: true,
})); }));
} }
@ -120,62 +229,24 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
allowSenderToEdit: true, allowSenderToEdit: true,
allowSenderToDelete: true, allowSenderToDelete: true,
uuid: "", uuid: "",
newOne: false newOne: false,
}); });
// setRecipients(null), setErrors({
setEditCase("") roleName: false,
setManualFocusTriggered(false) lastName: false,
email: false,
emailFormat: false,
type: false,
});
setEditCase("");
setManualFocusTriggered(false);
formRef.current?.reset(); formRef.current?.reset();
}
}; };
// useEffect(() => {
// if (!recipient.firstName.length) return;
// const handler = setTimeout(() => {
// api.get(`/api/contact?firstName=${recipient.firstName}`)
// .then(res => {
// setContactData({ type: "firstName", contacts: res.data.content });
// })
// .catch(err => console.log(err));
// }, 500); // wait 500ms after the last change
// return () => {
// clearTimeout(handler); // cancel previous timeout if effect runs again
// };
// }, [recipient.firstName]);
// useDebouncedEffect(() => {
// if (!recipient.firstName.length) return;
// api.get(`/api/contact?firstName=${recipient.firstName}`)
// .then(res => {
// setContactData({ type: "firstName", contacts: res.data.content });
// })
// .catch(err => console.log(err));
// }, [recipient.firstName], 500);
// useDebouncedEffect(() => {
// if (!recipient.lastName.length) return
// api.get(`/api/contact?lastName=${recipient.lastName}`)
// .then(res => {
// setContactData({ type: "lastName", contacts: res.data.content });
// })
// .catch(err => console.log(err))
// }, [recipient.lastName], 500);
// useDebouncedEffect(() => {
// if (!recipient.email.length) return
// api.get(`/api/contact?email=${recipient.email}`)
// .then(res => {
// setContactData({ type: "email", contacts: res.data.content });
// })
// .catch(err => console.log(err))
// }, [recipient.email], 500);
const handleContactModalBlur = () => { const handleContactModalBlur = () => {
setTimeout(() => { setTimeout(() => {
setOpenContactModal(false) setOpenContactModal(false)
@ -249,7 +320,7 @@ setManualFocusTriggered(false)
} }
}, [recipient.firstName, recipient.lastName, recipient.email], 300); }, [recipient.firstName, recipient.lastName, recipient.email], 300);
useEffect(() => { useEffect(() => {
const handleClickOutside = (e: MouseEvent | FocusEvent) => { const handleClickOutside = (e: MouseEvent | FocusEvent) => {
if ( if (
containerRef.current && containerRef.current &&
@ -266,7 +337,7 @@ useEffect(() => {
document.removeEventListener("mousedown", handleClickOutside); document.removeEventListener("mousedown", handleClickOutside);
document.removeEventListener("focusin", handleClickOutside); document.removeEventListener("focusin", handleClickOutside);
}; };
}, []); }, []);
@ -284,42 +355,48 @@ useEffect(() => {
{/* Top Row: Role Input + Settings */} {/* Top Row: Role Input + Settings */}
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
{/* Role Name Input */} {/* Role Name Input */}
{/* Role Name Input */}
<div className="w-64">
<input <input
required={recipient.firstName === "" && recipient.lastName === "" && recipient.email === ""}
type="text" type="text"
onFocus={() => setOpenContactModal(true)}
onBlur={handleContactModalBlur}
value={recipient.roleName} value={recipient.roleName}
placeholder="Role name" placeholder="Role name"
className="w-64 px-3 py-2 me-3 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition" className={`w-full px-3 py-2 border rounded-md text-sm focus:outline-none transition
onChange={(e) => setRecipients({ ...recipient, roleName: e.target.value })} ${errors.roleName ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
onChange={(e) => {
setRecipients({ ...recipient, roleName: e.target.value });
setErrors(prev => ({ ...prev, roleName: false }));
}}
/> />
{errors.roleName && (
<p className="text-red-500 text-xs mt-1">Role is required.</p>
)}
</div>
{/* Settings + Permissions */} {/* Settings + Permissions */}
<div className="flex items-center"> <div className="flex items-center">
<div className="flex justify-between"> <div className="flex justify-between w-full">
{/* Permission Status Text - Always Visible when settings open */} {/* Permission Status Text - Always Visible */}
<div <div className="max-h-10 opacity-100 me-3 overflow-hidden">
className={`transition-all duration-600 ease-in-out ${showAdvanceSettings ? 'max-h-10 opacity-100 me-3' : 'max-h-0 opacity-0 ' <div className="text-sm text-gray-600 pt-0.5">
} overflow-hidden`} {/* {recipient.allowSenderToEdit && recipient.allowSenderToDelete && "Full permissions granted"}
>
<div className="text-sm text-gray-600">
{recipient.allowSenderToEdit && recipient.allowSenderToDelete && "Full permissions granted"}
{recipient.allowSenderToEdit && !recipient.allowSenderToDelete && "Edit permission granted"} {recipient.allowSenderToEdit && !recipient.allowSenderToDelete && "Edit permission granted"}
{!recipient.allowSenderToEdit && recipient.allowSenderToDelete && "Delete permission granted"} {!recipient.allowSenderToEdit && recipient.allowSenderToDelete && "Delete permission granted"}
{!recipient.allowSenderToEdit && !recipient.allowSenderToDelete && "No permissions granted"} {!recipient.allowSenderToEdit && !recipient.allowSenderToDelete && "No permissions granted"} */}
Permissions granted :
</div> </div>
</div> </div>
{/* Animated Permission Controls */}
<div className={`overflow-visible transition-all duration-900 ease-in-out ${showAdvanceSettings ? 'max-w-80 opacity-100' : 'max-w-0 opacity-0' {/* Permission Controls - Always Visible */}
}`}> <div className="max-w-80 opacity-100 overflow-visible">
<div className="flex items-center space-x-3 pr-1.5"> <div className="flex items-center space-x-3 pr-1.5">
{/* Edit Permission */} {/* Edit Permission */}
<div className="relative group"> <div className="relative group">
<label <label
className={`relative flex items-center justify-center w-6 h-6 border-2 rounded-lg cursor-pointer transition-all duration-300 transform hover:scale-105 ${recipient.allowSenderToEdit className={`relative flex items-center justify-center w-12 h-7 border-2 rounded-lg cursor-pointer transition-all duration-300 transform hover:scale-105 ${recipient.allowSenderToEdit
? 'bg-blue-100 border-blue-500 shadow-lg' ? 'bg-blue-100 border-blue-500 shadow-md'
: 'bg-white border-gray-300 hover:border-blue-400' : 'bg-white border-gray-300 hover:border-blue-400 text-gray-400'
}`} }`}
> >
<input <input
@ -333,14 +410,14 @@ useEffect(() => {
className="absolute w-full h-full opacity-0 cursor-pointer" className="absolute w-full h-full opacity-0 cursor-pointer"
/> />
<FiEdit <FiEdit
className={`w-3 h-3 pointer-events-none transition-all duration-300 ${recipient.allowSenderToEdit ? 'text-blue-600' : 'text-gray-400' className={`w-2.5 h-2.5 pointer-events-none transition-all duration-300 ${recipient.allowSenderToEdit ? 'text-blue-600' : 'text-gray-400'
}`} }`}
/> /><span className="ms-0.5 text-[12px]">Edit</span>
</label> </label>
{/* Tooltip */} {/* Tooltip */}
<div className="absolute bottom-0 -translate-y-full left-1/2 transform -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-20"> <div className="absolute bottom-0 -translate-y-full left-1/2 transform -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-20">
<div className="bg-gray-800 text-white text-xs rounded-lg py-2 px-3 whitespace-nowrap"> <div className="bg-gray-800 text-white text-xs rounded-lg py-2 px-3 whitespace-nowrap">
Allow Edit Permission Edit Permission
<div className="absolute bottom-[-5px] left-1/2 transform -translate-x-1/2 border-4 border-transparent border-b-gray-800"></div> <div className="absolute bottom-[-5px] left-1/2 transform -translate-x-1/2 border-4 border-transparent border-b-gray-800"></div>
</div> </div>
</div> </div>
@ -349,9 +426,9 @@ useEffect(() => {
{/* Delete Permission */} {/* Delete Permission */}
<div className="relative group"> <div className="relative group">
<label <label
className={`relative flex items-center justify-center w-6 h-6 border-2 rounded-lg cursor-pointer transition-all duration-300 transform hover:scale-105 ${recipient.allowSenderToDelete className={`relative flex items-center justify-center w-15 h-7 border-2 rounded-lg cursor-pointer transition-all duration-300 transform hover:scale-105 ${recipient.allowSenderToDelete
? 'bg-red-100 border-red-500 shadow-lg' ? 'bg-red-100 border-red-500 shadow-md'
: 'bg-white border-gray-300 hover:border-red-400' : 'bg-white border-gray-300 hover:border-red-400 text-gray-400'
}`} }`}
> >
<input <input
@ -367,12 +444,12 @@ useEffect(() => {
<FiTrash <FiTrash
className={`w-3 h-3 pointer-events-none transition-all duration-300 ${recipient.allowSenderToDelete ? 'text-red-600' : 'text-gray-400' className={`w-3 h-3 pointer-events-none transition-all duration-300 ${recipient.allowSenderToDelete ? 'text-red-600' : 'text-gray-400'
}`} }`}
/> /><span className="ms-0.5 text-[12px]">Delete</span>
</label> </label>
{/* Tooltip */} {/* Tooltip */}
<div className="absolute bottom-0 -translate-y-full left-1/2 transform -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-20"> <div className="absolute bottom-0 -translate-y-full left-1/2 transform -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-20">
<div className="bg-gray-800 text-white text-xs rounded-lg py-2 px-3 whitespace-nowrap"> <div className="bg-gray-800 text-white text-xs rounded-lg py-2 px-3 whitespace-nowrap">
Allow Delete Permission Delete Permission
<div className="absolute bottom-[-5px] left-1/2 transform -translate-x-1/2 border-4 border-transparent border-b-gray-800"></div> <div className="absolute bottom-[-5px] left-1/2 transform -translate-x-1/2 border-4 border-transparent border-b-gray-800"></div>
</div> </div>
</div> </div>
@ -380,62 +457,68 @@ useEffect(() => {
</div> </div>
</div> </div>
</div> </div>
</div>
{/* Settings Icon */}
<div className="relative group">
<p
className="text-blue-600 hover:text-blue-700 cursor-pointer transition-colors duration-200 p-2 rounded-full hover:bg-blue-50"
onClick={() => setShowAdvanceSettings((prev) => !prev)}
>
<IoIosSettings
className={`h-6 w-6 transition-transform duration-300 ${showAdvanceSettings ? 'rotate-90' : 'rotate-0'
}`}
/>
</p>
{/* Tooltip */}
<div className="absolute top-0 -translate-y-full left-1/2 transform -translate-x-1/2 mb-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-20">
<div className="bg-gray-800 text-white text-xs rounded-lg py-2 px-3 whitespace-nowrap">
Advanced Settings
<div className="absolute bottom-[-6px] left-1/2 transform -translate-x-1/2 border-4 border-transparent border-b-gray-800"></div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
)} )}
{/* Name Inputs */} {/* Name Inputs */}
<div className="grid grid-cols-12 gap-4 mt-3"> <div className="grid grid-cols-12 gap-4 mt-3">
<div className="col-span-4">
<input <input
type="text" type="text"
onFocus={() => handleFocus("firstName")} onFocus={() => handleFocus("firstName")}
onBlur={handleContactModalBlur} onBlur={handleContactModalBlur}
value={recipient.firstName} value={recipient.firstName}
placeholder="First Name" placeholder="First Name"
className="col-span-4 w-full px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition" className={` w-full px-4 py-2 border rounded-md text-sm focus:outline-none transition
onChange={(e) => setRecipients({ ...recipient, firstName: e.target.value })} ${errors.firstName ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
onChange={(e) => {
setRecipients({ ...recipient, firstName: e.target.value });
// setErrors((prev) => ({ ...prev, firstName: false }));
}}
/> />
</div>
{/* {errors.firstName && (
<p className="text-red-500 text-xs mt-1">First Name is required</p>
)} */}
<div className="col-span-4">
<input <input
required={transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES}
type="text" type="text"
onFocus={() => handleFocus("lastName")} onFocus={() => handleFocus("lastName")}
onBlur={handleContactModalBlur} onBlur={handleContactModalBlur}
value={recipient.lastName} value={recipient.lastName}
placeholder="Last Name" placeholder="Last Name"
className="col-span-4 w-full px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition" className={` w-full px-4 py-2 border rounded-md text-sm focus:outline-none transition
onChange={(e) => setRecipients({ ...recipient, lastName: e.target.value })} ${errors.lastName ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
onChange={(e) => {
setRecipients({ ...recipient, lastName: e.target.value });
setErrors((prev) => ({ ...prev, lastName: false }));
}}
/> />
{errors.lastName && (
<p className="text-red-500 text-xs mt-1">Last Name is required</p>
)}
</div>
<div className="col-span-4">
<input <input
required={transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES}
type="email" type="email"
onFocus={() => handleFocus("email")} onFocus={() => handleFocus("email")}
onBlur={handleContactModalBlur} onBlur={handleContactModalBlur}
value={recipient.email} value={recipient.email}
placeholder="Recipient Email" placeholder="Recipient Email"
className="col-span-4 w-full px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition" className={`w-full px-4 py-2 border rounded-md text-sm focus:outline-none transition
onChange={(e) => setRecipients({ ...recipient, email: e.target.value })} ${errors.email ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
onChange={(e) => {
setRecipients({ ...recipient, email: e.target.value });
setErrors((prev) => ({ ...prev, email: false }));
}}
/> />
{errors.email && (
<p className="text-red-500 text-xs mt-1">Email is required</p>
)}
</div>
</div> </div>
@ -511,7 +594,7 @@ useEffect(() => {
</button> </button>
</div> </div>
</form> </form>
</div> </div>
); );
}; };

22
src/components/process/processStepOne/RecipientCards.tsx
View File

@ -3,7 +3,7 @@ import {
removeRecipientAsync, removeRecipientAsync,
removeSelectedRecipient, removeSelectedRecipient,
// setSigningOrder, // setSigningOrder,
updateRecipientOrder, // 👈 You need to define this in your slice updateRecipientOrder,
} from "../../../store/slices/selectedRecipientsSlice"; } from "../../../store/slices/selectedRecipientsSlice";
import { AppDispatch, RootState } from "../../../store/store"; import { AppDispatch, RootState } from "../../../store/store";
@ -14,6 +14,7 @@ import SigningOrderDiagram from "../../../SigningOrderDiagram ";
import { IoCloseOutline } from "react-icons/io5"; import { IoCloseOutline } from "react-icons/io5";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { FiEdit } from "react-icons/fi"; import { FiEdit } from "react-icons/fi";
import { RiPencilFill } from "react-icons/ri";
const getInitials = (name: string) => { const getInitials = (name: string) => {
if (!name) return ""; if (!name) return "";
@ -30,7 +31,7 @@ type CardsData = {
transactionTemplateToggle: string transactionTemplateToggle: string
}; };
const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateToggle }: CardsData) => { const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateToggle , editRecipient ,editCase }: CardsData) => {
const templateId = useParams<{ templateId: string }>().templateId; const templateId = useParams<{ templateId: string }>().templateId;
let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>(); let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
@ -59,7 +60,6 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
const handleRemoveRecipient = (recipient) => { const handleRemoveRecipient = (recipient) => {
if (!accountId || !transactionId) return; if (!accountId || !transactionId) return;
// <<<<<<< HEAD
// dispatch(removeSelectedRecipient(recipient)) // dispatch(removeSelectedRecipient(recipient))
// dispatch(removeRecipientAsync([{ // dispatch(removeRecipientAsync([{
// recipientId: recipient.id, // recipientId: recipient.id,
@ -67,7 +67,7 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
// accountId: accountId, // accountId: accountId,
// transactionId: transactionId, // transactionId: transactionId,
// }])) // }]))
// ======= // =======
if (recipient.uuid) { if (recipient.uuid) {
dispatch(removeSelectedRecipient(recipient)) dispatch(removeSelectedRecipient(recipient))
} else { } else {
@ -78,7 +78,6 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
transactionId: transactionId, transactionId: transactionId,
})) }))
} }
// >>>>>>> origin/main
if (recipients.length === 2) { if (recipients.length === 2) {
let leftRecipient = recipients.filter((obj) => { let leftRecipient = recipients.filter((obj) => {
if ("id" in obj && "id" in recipient) { if ("id" in obj && "id" in recipient) {
@ -135,15 +134,19 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
> >
<div className="flex items-center gap-3 min-w-0"> <div className="flex items-center gap-3 min-w-0">
{/* {signingOrder && ( */} {/* {signingOrder && ( */}
{recipients.length > 1 ? <input {recipients.length > 1 ? <div className="relative">
<input
type="number" type="number"
value={recipient.routingOrder || 1} value={recipient.routingOrder || 1}
min={1} min={1}
onChange={(e) => onChange={(e) =>
handleOrderChange(recipient.id || recipient.email, Number(e.target.value)) handleOrderChange(recipient.id || recipient.email, Number(e.target.value))
} }
className="w-8 text-center rounded text-sm text-gray-700 border-none focus:outline-none focus:ring-[var(--primary)]" className="w-10 h-6 text-center rounded text-sm text-gray-600 focus:outline-none focus:ring-[var(--primary)] border border-dashed border-gray-400 bg-slate-100"
/> : <input />
{/* <RiPencilFill className="absolute top-1.5 right-0 text-[14px] text-gray-500" /> */}
</div>
: <input
type="number" type="number"
disabled disabled
value={recipient.routingOrder || 1} value={recipient.routingOrder || 1}
@ -220,11 +223,10 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
</div> </div>
)} )}
{signingOrderModal.open && {signingOrderModal.open &&
<div className="fixed top-0 left-0 inset-0 z-50 bg-black/50 backdrop-blur-sm flex justify-center items-center"> <div className="fixed top-0 left-0 inset-0 z-50 bg-black/50 backdrop-blur-sm flex justify-center items-center">
<div className="flex-col relative justify-center items-center max-w-[80%] max-h-[60vh] h-full overflow-auto"> <div className="flex-col relative justify-center items-center max-w-[80%] max-h-[60vh] h-full overflow-auto">
<div className="pb-2 text-white flex justify-between items-center"> <div className="p-2 rounded-t-lg text-white flex justify-between items-center bg-[var(--primary)]">
<p className="font-semibold">Signing Order</p> <p className="font-semibold">Signing Order</p>
<div <div
onClick={() => setSigningOrderModal({ ...signingOrderModal, open: false })} onClick={() => setSigningOrderModal({ ...signingOrderModal, open: false })}

44
src/components/process/processStepOne/SelfSignWarnModal.tsx Normal file
View File

@ -0,0 +1,44 @@
import { useNavigate } from "react-router-dom";
type PropsType = {
setShowSelfSignWarnModal: (val: boolean) => void;
onConfirm: () => void;
};
const SelfSignWarnModal = ({ setShowSelfSignWarnModal }: PropsType) => {
const navigate = useNavigate()
return (
<div className="fixed inset-0 backdrop-blur-sm flex items-center justify-center z-50">
<div className="bg-white rounded-lg shadow-xl p-6 w-100">
<h3 className="text-lg font-medium text-gray-800 mb-4">Confirm Self Sign</h3>
<p className="text-gray-600 mb-6">
Are you sure you want to proceed with self sign? This will remove all the recipient that you added.
</p>
<div className="flex justify-end gap-3">
<button
onClick={() => {
setShowSelfSignWarnModal(false);
navigate("./../");
}}
className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-md transition-colors"
>
No
</button>
<button
onClick={() => {
// onConfirm();
setShowSelfSignWarnModal(false);
}}
className="px-4 py-2 bg-red-600 text-white hover:bg-red-700 rounded-md transition-colors"
>
Yes
</button>
</div>
</div>
</div>
);
};
export default SelfSignWarnModal;

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;
phones: string[]; phone: 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: "",
phones: [''], phone: "",
}); });
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 updatedPhones = [...formData.phones]; // const updatedPhone = [...formData.phone];
updatedPhones[index] = numericValue; // updatedPhone[index] = numericValue;
setFormData((prev) => ({ ...prev, phones: updatedPhones })); // setFormData((prev) => ({ ...prev, phone: updatedPhone }));
const errorKey = `phones_${index}`; // const errorKey = `phone_${index}`;
if (errors[errorKey]) { // if (errors[errorKey]) {
setErrors((prev) => ({ ...prev, [errorKey]: '' })); // setErrors((prev) => ({ ...prev, [errorKey]: "" }));
} // }
}; // };
// const addPhoneField = () => {
// setFormData((prev) => ({ ...prev, phone: [...prev.phone, ""] }));
// };
const addPhoneField = () => { // const removePhoneField = (index: number) => {
setFormData((prev) => ({ ...prev, phones: [...prev.phones, ''] })); // const updatedPhone = formData.phone.filter((_, i) => i !== index);
}; // 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 = /^\d+$/; const phoneRegex =
/^\+?\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,9 +83,7 @@ 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
@ -93,25 +91,19 @@ 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";
} }
// Phones // Phone
// formData.phones.forEach((phone, index) => { if (formData.phone.trim() && !phoneRegex.test(formData.phone)) {
// if (!phone.trim()) { newErrors.phone = "Phone number must contain only digits";
// 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) {
@ -123,53 +115,61 @@ 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: "",
phones: [''], phone: "",
}); });
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' }, { label: "Email", field: "email", fieldType: "email" },
{ label: 'Title', field: 'title' }, { label: "Title", field: "title" },
{ label: 'Company', field: 'company' }, { label: "Company", field: "company" },
{ label: 'Website', field: 'website' }, { label: "Website", field: "website", fieldType: "url" },
].map(({ label, field }) => ( { label: "Phone", field: "phone", fieldType: "tel" },
].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}</label> <label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">
{label}
</label>
<input <input
type={field === 'email' ? 'email' : 'text'} type={fieldType ? fieldType : "text"}
value={formData[field as keyof ContactData] as string} value={formData[field as keyof ContactData] as string}
onChange={(e) => handleChange(field as keyof ContactData, e.target.value)} onChange={(e) =>
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] && <span className="text-sm text-red-500 mt-1">{errors[field]}</span>} {errors[field] && (
<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 Numbers</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.phone.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.phones.length > 1 && ( {formData.phone.length > 1 && (
<button <button
type="button" type="button"
onClick={() => removePhoneField(index)} onClick={() => removePhoneField(index)}
@ -190,8 +190,10 @@ const ContactForm = ({ onSubmit, loading }: Props) => {
</button> </button>
)} )}
</div> </div>
{errors[`phones_${index}`] && ( {errors[`phone_${index}`] && (
<span className="text-sm text-red-500">{errors[`phones_${index}`]}</span> <span className="text-sm text-red-500">
{errors[`phone_${index}`]}
</span>
)} )}
</div> </div>
))} ))}
@ -204,7 +206,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
@ -219,7 +221,7 @@ const ContactForm = ({ onSubmit, loading }: Props) => {
SAVING... SAVING...
</> </>
) : ( ) : (
'SAVE CONTACT' "SAVE CONTACT"
)} )}
</button> </button>
</div> </div>

2
src/components/templates/Templates.tsx
View File

@ -78,7 +78,7 @@ const Templates = () => {
let res = await api.post(`/api/accounts/${activeAccountId}/transactions`, payload) let res = await api.post(`/api/accounts/${activeAccountId}/transactions`, payload)
console.log("handleUseClick", res.data) console.log("handleUseClick", res.data)
// /process-step-one/:accountId/:transactionId // /process-step-one/:accountId/:transactionId
navigate(`/process-step-one/${activeAccountId}/${res?.data?.id}`); navigate(`/process-step-one/${activeAccountId}/${res?.data?.id}?useTemplate=true`);
} catch (error) { } catch (error) {
console.log(error) console.log(error)
} }

12
src/index.css
View File

@ -100,6 +100,18 @@ canvas {
} }
} }
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
/* Group Border - START */ /* Group Border - START */
.group-border { .group-border {
position: absolute; position: absolute;

6
src/store/slices/selectedRecipientsSlice.tsx
View File

@ -437,6 +437,8 @@ export const removeRecipientAsync = createAsyncThunk<
const basePath = `/api/accounts/${accountId}/${toggle}/${transactionId}/recipients`; const basePath = `/api/accounts/${accountId}/${toggle}/${transactionId}/recipients`;
console.log(`Line 440 : ${basePath}/${recipientId}`)
// return
if (recipientId) { if (recipientId) {
await api.delete(`${basePath}/${recipientId}`); await api.delete(`${basePath}/${recipientId}`);
return recipientId; return recipientId;
@ -533,6 +535,9 @@ const selectedRecipientsSlice = createSlice({
removeSelectedRecipient: (state, action: PayloadAction<Recipient>) => { removeSelectedRecipient: (state, action: PayloadAction<Recipient>) => {
state.recipients = state.recipients.filter((recipient) => recipient.uuid !== action.payload.uuid); state.recipients = state.recipients.filter((recipient) => recipient.uuid !== action.payload.uuid);
}, },
removeAllRecipients: (state) => {
state.recipients = [];
},
addColorsToRecipient: (state) => { addColorsToRecipient: (state) => {
for (const [index, recipient] of state.recipients.entries()) { for (const [index, recipient] of state.recipients.entries()) {
recipient.color = colors[index]; recipient.color = colors[index];
@ -639,6 +644,7 @@ export const {
setSelectedRecipients, setSelectedRecipients,
toggleToTemplates, toggleToTemplates,
removeSelectedRecipient, removeSelectedRecipient,
removeAllRecipients,
setSigningOrder, setSigningOrder,
addColorsToRecipient, addColorsToRecipient,
updateRecipientIds, updateRecipientIds,

2
src/utlity/JoyRideTour.tsx
View File

@ -49,7 +49,6 @@ const JoyrideController = () => {
), ),
placement: "left", placement: "left",
disableBeacon: true, disableBeacon: true,
}, },
{ {
target: "#start-now-upload-con", target: "#start-now-upload-con",
@ -63,7 +62,6 @@ const JoyrideController = () => {
), ),
placement: "top", placement: "top",
disableBeacon: true, disableBeacon: true,
}, },
]; ];
} else if (location.pathname.includes("/process-step-one")) { } else if (location.pathname.includes("/process-step-one")) {