Merge pull request 'jai' (#8) from jai into main
Reviewed-on: http://git.hicglobalsolutions.in/BhawanSingh/SME-Web/pulls/8
This commit is contained in:
commit
99f40a3689
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useState } from 'react'
|
||||
import { ContactTypeObj } from './RecipientAddCard'
|
||||
import React, { useState } from 'react';
|
||||
import { ContactTypeObj } from './RecipientAddCard';
|
||||
import { Recipient } from '../../../store/slices/selectedRecipientsSlice';
|
||||
|
||||
interface ContactDataProps {
|
||||
|
|
@ -10,66 +10,127 @@ interface ContactDataProps {
|
|||
openContactModal: boolean;
|
||||
setOpenContactModal: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
setRecipients: React.Dispatch<React.SetStateAction<Recipient>>;
|
||||
topRef?: React.RefObject<HTMLDivElement>;
|
||||
setManualFocusTriggered: React.Dispatch<React.SetStateAction<boolean>>
|
||||
}
|
||||
|
||||
const ContactModal: React.FC<ContactDataProps> = ({ contactData, inpFirstName, inpLastName, inpEmail, openContactModal, setRecipients, setOpenContactModal }) => {
|
||||
// Helper function to highlight matching text
|
||||
const highlightText = (text: string, searchTerm: string, shouldHighlight: boolean) => {
|
||||
if (!shouldHighlight || !searchTerm.trim()) {
|
||||
return <span>{text}</span>;
|
||||
}
|
||||
|
||||
const searchTermLower = searchTerm.toLowerCase();
|
||||
const textLower = text.toLowerCase();
|
||||
const index = textLower.indexOf(searchTermLower);
|
||||
|
||||
if (index === -1) {
|
||||
return <span>{text}</span>;
|
||||
}
|
||||
|
||||
const beforeMatch = text.slice(0, index);
|
||||
const match = text.slice(index, index + searchTerm.length);
|
||||
const afterMatch = text.slice(index + searchTerm.length);
|
||||
|
||||
return (
|
||||
<span>
|
||||
{beforeMatch}
|
||||
<span className="bg-yellow-200 font-medium">{match}</span>
|
||||
{afterMatch}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const ContactModal: React.FC<ContactDataProps> = ({
|
||||
contactData,
|
||||
inpFirstName,
|
||||
inpLastName,
|
||||
inpEmail,
|
||||
openContactModal,
|
||||
setRecipients,
|
||||
setOpenContactModal ,
|
||||
setManualFocusTriggered
|
||||
}) => {
|
||||
const handleContactClick = (indx: number) => {
|
||||
if (!contactData.contacts.length) return;
|
||||
|
||||
setRecipients((prev) => {
|
||||
return {
|
||||
firstName: contactData.contacts[indx].firstName,
|
||||
lastName: contactData.contacts[indx].lastName,
|
||||
email: contactData.contacts[indx].email,
|
||||
type: prev.type
|
||||
}
|
||||
});
|
||||
setRecipients((prev) => ({
|
||||
...prev, // Preserve other properties like uuid, newOne, etc.
|
||||
firstName: contactData.contacts[indx].firstName,
|
||||
lastName: contactData.contacts[indx].lastName,
|
||||
email: contactData.contacts[indx].email,
|
||||
}));
|
||||
|
||||
setOpenContactModal(false);
|
||||
setManualFocusTriggered(false)
|
||||
|
||||
};
|
||||
|
||||
const handleKeyDown = (event: React.KeyboardEvent, indx: number) => {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
event.preventDefault();
|
||||
handleContactClick(indx);
|
||||
}
|
||||
};
|
||||
|
||||
if (!openContactModal || !contactData.contacts.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{
|
||||
contactData.contacts.map((recipient, indx) => {
|
||||
return <div
|
||||
tabIndex={1}
|
||||
onClick={() => handleContactClick(indx)}
|
||||
style={{display: `${openContactModal ? "flex" : "none"}`}}
|
||||
className='flex items-center px-3 py-2 cursor-pointer hover:bg-slate-100 transiton-all w-full'>
|
||||
<div
|
||||
key={indx}
|
||||
className='w-8 h-8 bg-gray-200 rounded-full'></div>
|
||||
<div className='ml-2'>
|
||||
<div className='flex gap-1.5'>
|
||||
<p className='text-sm font-semibold'
|
||||
style={{ background: `${contactData.type === "firstName" ? `linear-gradient(to right, yellow 0ch, yellow ${inpFirstName.length}ch, white ${inpFirstName.length}ch, white 100%)` : "white"}` }}
|
||||
>
|
||||
{recipient.firstName}
|
||||
</p>
|
||||
<p
|
||||
style={{ background: `${contactData.type === "lastName" ? `linear-gradient(to right, yellow 0ch, yellow ${inpLastName.length}ch, white ${inpLastName.length}ch, white 100%)` : "white"}` }}
|
||||
className='text-sm font-semibold'>
|
||||
{recipient.lastName}
|
||||
</p>
|
||||
</div>
|
||||
<p className='text-xs text-gray-500'
|
||||
style={{ background: `${contactData.type === "email" ? `linear-gradient(to right, yellow 0ch, yellow ${inpEmail.length}ch, white ${inpEmail.length}ch, white 100%)` : "white"}` }}
|
||||
>
|
||||
{recipient.email}
|
||||
<div className="max-h-60 overflow-y-auto">
|
||||
{contactData.contacts.map((contact, indx) => (
|
||||
<div
|
||||
key={contact.id || indx}
|
||||
tabIndex={0}
|
||||
onMouseDown={() => handleContactClick(indx)}
|
||||
onKeyDown={(e) => handleKeyDown(e, indx)}
|
||||
className="flex items-center px-3 py-2 cursor-pointer hover:bg-gray-50 transition-colors duration-150 focus:bg-gray-100 focus:outline-none rounded-md"
|
||||
role="button"
|
||||
aria-label={`Select contact ${contact.firstName} ${contact.lastName}`}
|
||||
>
|
||||
{/* Avatar */}
|
||||
<div className="w-8 h-8 bg-[var(--primaryLight2)] rounded-full flex items-center justify-center text-white text-sm font-medium">
|
||||
{(contact.firstName?.[0] || '') + (contact.lastName?.[0] || '')}
|
||||
</div>
|
||||
|
||||
{/* Contact Info */}
|
||||
<div className="ml-3 flex-1 min-w-0">
|
||||
<div className="flex gap-1.5 items-center">
|
||||
<p className="text-sm font-semibold text-gray-900 truncate">
|
||||
{highlightText(
|
||||
contact.firstName,
|
||||
inpFirstName,
|
||||
contactData.type === "firstName"
|
||||
)}
|
||||
</p>
|
||||
<p className="text-sm font-semibold text-gray-900 truncate">
|
||||
{highlightText(
|
||||
contact.lastName,
|
||||
inpLastName,
|
||||
contactData.type === "lastName"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 truncate">
|
||||
{highlightText(
|
||||
contact.email,
|
||||
inpEmail,
|
||||
contactData.type === "email"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* No results message */}
|
||||
{contactData.contacts.length === 0 && (
|
||||
<div className="px-3 py-4 text-center text-gray-500 text-sm">
|
||||
No contacts found
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// return <p
|
||||
// key={indx}
|
||||
// className='w-full hover:bg-slate-100 cursor-pointer px-2 py-1'>
|
||||
// {val.firstName}
|
||||
// </p>
|
||||
export default ContactModal
|
||||
export default ContactModal;
|
||||
|
|
@ -6,7 +6,7 @@ import SelectedDocuments from "./SelectedDocuments";
|
|||
import api from "../../../config/api";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { RootState } from "../../../store/store";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { setImages } from "../../../store/slices/selectedDocsSlice";
|
||||
import { addRecipient, addRecipientAsync, fetchRecipients, recipientType, resetRecipients, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE, updateRecipientIds } from "../../../store/slices/selectedRecipientsSlice";
|
||||
|
|
@ -39,10 +39,10 @@ const ProcessStepOne = () => {
|
|||
dispatch(toggleToTemplates());
|
||||
}
|
||||
|
||||
const [editCase , setEditCase] = useState<string>("")
|
||||
const [editRecipient , setEditRecipient] = useState({})
|
||||
const [editCase, setEditCase] = useState<string>("")
|
||||
const [editRecipient, setEditRecipient] = useState({})
|
||||
|
||||
|
||||
|
||||
|
||||
// if (!accountId || !transactionId) {
|
||||
// window.location.href = "/";
|
||||
|
|
@ -55,6 +55,9 @@ const ProcessStepOne = () => {
|
|||
const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
|
||||
const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients)
|
||||
const userData = useSelector((state: RootState) => state.user)
|
||||
// ProcessStepOne.tsx
|
||||
const topRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
// const userData = useSelector((state: RootState) => state.user)
|
||||
|
||||
const [transactionDetails, setTransactionDetails] = useState<any>([]);
|
||||
|
|
@ -62,24 +65,10 @@ const ProcessStepOne = () => {
|
|||
console.log("selectedRecipients", selectedRecipients)
|
||||
|
||||
useEffect(() => {
|
||||
<<<<<<< HEAD
|
||||
// Fetching Transaction Details - START
|
||||
(async () => {
|
||||
try {
|
||||
const res = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}`);
|
||||
setTransactionDetails(res.data)
|
||||
} catch (e) {
|
||||
console.log("Error - transactions details")
|
||||
}
|
||||
})()
|
||||
// Fetching Transaction Details - END
|
||||
|
||||
=======
|
||||
(async () => {
|
||||
const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`)
|
||||
console.log(res.data);
|
||||
})()
|
||||
>>>>>>> origin/main
|
||||
|
||||
selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId }));
|
||||
selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }));
|
||||
|
|
@ -177,7 +166,7 @@ const ProcessStepOne = () => {
|
|||
language: "en",
|
||||
name: `${recipient.firstName} ${recipient.lastName}`,
|
||||
roleName: recipient.roleName,
|
||||
allowSenderToEdit: recipient.allowSenderToEdit ,
|
||||
allowSenderToEdit: recipient.allowSenderToEdit,
|
||||
allowSenderToDelete: recipient.allowSenderToDelete,
|
||||
}));
|
||||
|
||||
|
|
@ -348,9 +337,17 @@ const ProcessStepOne = () => {
|
|||
{
|
||||
signType !== SignTypeEnum.selfSign &&
|
||||
<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 />} */}
|
||||
<RecipientAddCard transactionTemplateToggle={transactionTemplateToggle} editRecipient={editRecipient} editCase={editCase} setEditRecipient={setEditRecipient} setEditCase={setEditCase}/>
|
||||
|
||||
<div
|
||||
ref={topRef}
|
||||
className={`relative w-full bg-[var(--mainViewBg)] ${globalLoader.isLoading ? 'pointer-events-none h-screen overflow-hidden' : ''}`}
|
||||
>
|
||||
|
||||
<RecipientAddCard transactionTemplateToggle={transactionTemplateToggle} editRecipient={editRecipient} editCase={editCase} setEditRecipient={setEditRecipient} setEditCase={setEditCase} topRef={topRef} />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
}
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,11 @@ export interface ContactTypeObj {
|
|||
}
|
||||
|
||||
|
||||
const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase ,setEditRecipient, setEditCase }) => {
|
||||
const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase, setEditRecipient, setEditCase, topRef }) => {
|
||||
const [activeAccountId, setActiveAccountId] = useState<string | null>(
|
||||
JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
|
||||
);
|
||||
|
||||
|
||||
const [contactData, setContactData] = useState<ContactTypeObj>({ type: "", contacts: [] });
|
||||
const [openContactModal, setOpenContactModal] = useState(false);
|
||||
|
|
@ -32,11 +36,31 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase ,
|
|||
const dispatch = useDispatch<AppDispatch>();
|
||||
const formRef = useRef<HTMLFormElement | null>(null);
|
||||
|
||||
const [recipient, setRecipients] = useState<Recipient>({ uuid:null, newOne:false, firstName: "", lastName: "", email: "", hostName: "", hostEmail: "", roleName: "", type: recipientType.SIGNER, allowSenderToEdit: false, allowSenderToDelete: false });
|
||||
const [recipient, setRecipients] = useState<Recipient>({ uuid: null, newOne: false, firstName: "", lastName: "", email: "", hostName: "", hostEmail: "", roleName: "", type: recipientType.SIGNER, allowSenderToEdit: false, allowSenderToDelete: false });
|
||||
|
||||
const [showAdvanceSettings, setShowAdvanceSettings] = useState(false)
|
||||
|
||||
const [cachedContacts, setCachedContacts] = useState<ContactType[]>([]);
|
||||
const [filteredContacts, setFilteredContacts] = useState<ContactType[]>([]);
|
||||
const [activeField, setActiveField] = useState<"firstName" | "lastName" | "email" | null>(null);
|
||||
const [hasFetchedInitial, setHasFetchedInitial] = useState(false);
|
||||
const [lastQuery, setLastQuery] = useState<string | null>(null);
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
const [manualFocusTriggered, setManualFocusTriggered] = useState(false);
|
||||
|
||||
|
||||
console.log(recipient)
|
||||
|
||||
useEffect(() => {
|
||||
if (openContactModal) {
|
||||
if (topRef?.current) {
|
||||
topRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
} else {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}
|
||||
}
|
||||
}, [openContactModal]);
|
||||
|
||||
useEffect(() => {
|
||||
if (editCase === "Edit" && editRecipient) {
|
||||
setRecipients({
|
||||
|
|
@ -51,56 +75,55 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase ,
|
|||
allowSenderToEdit: editRecipient.allowSenderToEdit ?? false,
|
||||
allowSenderToDelete: editRecipient.allowSenderToDelete ?? false,
|
||||
uuid: String(editRecipient?.id ?? editRecipient?.uuid ?? ''),
|
||||
newOne:editRecipient.newOne ?? false
|
||||
newOne: editRecipient.newOne ?? false
|
||||
});
|
||||
}
|
||||
}, [editCase, editRecipient]);
|
||||
|
||||
|
||||
const handleRecipientAdd = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
e.preventDefault();
|
||||
|
||||
console.log("recipientrecipient",recipient)
|
||||
console.log("recipientrecipient", recipient)
|
||||
|
||||
if (!recipient.lastName || !recipient.email || !recipient.type) return;
|
||||
if (!recipient.lastName || !recipient.email || !recipient.type) return;
|
||||
|
||||
// ✅ Email format validation
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(recipient.email)) {
|
||||
console.log("Invalid email format");
|
||||
return;
|
||||
}
|
||||
// ✅ Email format validation
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(recipient.email)) {
|
||||
console.log("Invalid email format");
|
||||
return;
|
||||
}
|
||||
|
||||
if (editCase === 'Edit') {
|
||||
dispatch(updateRecipient(recipient));
|
||||
} else {
|
||||
dispatch(addRecipient({
|
||||
...recipient,
|
||||
uuid:uuidv4(),
|
||||
newOne:true
|
||||
}));
|
||||
}
|
||||
if (editCase === 'Edit') {
|
||||
dispatch(updateRecipient(recipient));
|
||||
} else {
|
||||
dispatch(addRecipient({
|
||||
...recipient,
|
||||
uuid: uuidv4(),
|
||||
newOne: true
|
||||
}));
|
||||
}
|
||||
|
||||
// ✅ Reset state and form
|
||||
setRecipients({
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
hostName: "",
|
||||
hostEmail: "",
|
||||
roleName: "",
|
||||
type: recipientType.SIGNER,
|
||||
allowSenderToEdit: false,
|
||||
allowSenderToDelete: false,
|
||||
uuid:"",
|
||||
newOne:false
|
||||
});
|
||||
setRecipients({
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
hostName: "",
|
||||
hostEmail: "",
|
||||
roleName: "",
|
||||
type: recipientType.SIGNER,
|
||||
allowSenderToEdit: false,
|
||||
allowSenderToDelete: false,
|
||||
uuid: "",
|
||||
newOne: false
|
||||
});
|
||||
|
||||
// setRecipients(null),
|
||||
setEditCase("")
|
||||
|
||||
formRef.current?.reset();
|
||||
};
|
||||
// setRecipients(null),
|
||||
setEditCase("")
|
||||
setManualFocusTriggered(false)
|
||||
formRef.current?.reset();
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
|
@ -155,7 +178,97 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase ,
|
|||
}, 350)
|
||||
}
|
||||
|
||||
|
||||
const handleFocus = async (field: "firstName" | "lastName" | "email") => {
|
||||
setManualFocusTriggered(true);
|
||||
setOpenContactModal(true);
|
||||
setActiveField(field);
|
||||
setLastQuery(null); // Reset to allow fresh input fetch if needed
|
||||
|
||||
if (!hasFetchedInitial) {
|
||||
try {
|
||||
const res = await api.get(`/api/accounts/${activeAccountId}/contacts?pageSize=10`);
|
||||
const contacts = res.data?.content || [];
|
||||
setCachedContacts(contacts);
|
||||
setFilteredContacts(contacts);
|
||||
setContactData({ type: field, contacts });
|
||||
setHasFetchedInitial(true);
|
||||
} catch (err) {
|
||||
console.error("Initial contact fetch failed:", err);
|
||||
}
|
||||
} else {
|
||||
setFilteredContacts(cachedContacts);
|
||||
setContactData({ type: field, contacts: cachedContacts });
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
useDebouncedEffect(() => {
|
||||
console.log("useDebouncedEffect")
|
||||
if (!activeField || !manualFocusTriggered) return;
|
||||
|
||||
const inputValue = recipient[activeField].trim().toLowerCase();
|
||||
|
||||
if (inputValue.length === 0) {
|
||||
setFilteredContacts(cachedContacts);
|
||||
setContactData({ type: activeField, contacts: cachedContacts });
|
||||
setOpenContactModal(true); // Keep showing modal with all options
|
||||
return;
|
||||
}
|
||||
|
||||
// Local match
|
||||
const localMatches = cachedContacts.filter(contact =>
|
||||
contact[activeField]?.toLowerCase().includes(inputValue)
|
||||
);
|
||||
|
||||
if (localMatches.length > 0) {
|
||||
setFilteredContacts(localMatches);
|
||||
setContactData({ type: activeField, contacts: localMatches });
|
||||
setOpenContactModal(true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (lastQuery !== inputValue) {
|
||||
setLastQuery(inputValue);
|
||||
api
|
||||
.get(`/api/accounts/${activeAccountId}/contacts?pageSize=5&${activeField}=${inputValue}`)
|
||||
.then((res) => {
|
||||
const fetched = res.data?.content || [];
|
||||
setFilteredContacts(fetched);
|
||||
setContactData({ type: activeField, contacts: fetched });
|
||||
setOpenContactModal(true);
|
||||
})
|
||||
.catch(console.error);
|
||||
}
|
||||
}, [recipient.firstName, recipient.lastName, recipient.email], 300);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (e: MouseEvent | FocusEvent) => {
|
||||
if (
|
||||
containerRef.current &&
|
||||
!containerRef.current.contains(e.target as Node)
|
||||
) {
|
||||
setOpenContactModal(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
document.addEventListener("focusin", handleClickOutside); // Also handles tabbing out
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
document.removeEventListener("focusin", handleClickOutside);
|
||||
};
|
||||
}, []);
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div ref={containerRef}>
|
||||
<form
|
||||
ref={formRef}
|
||||
onSubmit={handleRecipientAdd}
|
||||
|
|
@ -291,7 +404,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase ,
|
|||
<div className="grid grid-cols-12 gap-4 mt-3">
|
||||
<input
|
||||
type="text"
|
||||
onFocus={() => setOpenContactModal(true)}
|
||||
onFocus={() => handleFocus("firstName")}
|
||||
onBlur={handleContactModalBlur}
|
||||
value={recipient.firstName}
|
||||
placeholder="First Name"
|
||||
|
|
@ -301,7 +414,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase ,
|
|||
<input
|
||||
required
|
||||
type="text"
|
||||
onFocus={() => setOpenContactModal(true)}
|
||||
onFocus={() => handleFocus("lastName")}
|
||||
onBlur={handleContactModalBlur}
|
||||
value={recipient.lastName}
|
||||
placeholder="Last Name"
|
||||
|
|
@ -311,7 +424,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase ,
|
|||
<input
|
||||
required
|
||||
type="email"
|
||||
onFocus={() => setOpenContactModal(true)}
|
||||
onFocus={() => handleFocus("email")}
|
||||
onBlur={handleContactModalBlur}
|
||||
value={recipient.email}
|
||||
placeholder="Recipient Email"
|
||||
|
|
@ -345,8 +458,8 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase ,
|
|||
</div>}
|
||||
|
||||
{/* Contact Modal */}
|
||||
{contactData.contacts.length > 0 && openContactModal && (
|
||||
<div className="absolute z-50 mt-1 w-full max-w-2xl bg-white shadow-lg rounded-md p-3 border border-gray-100">
|
||||
{openContactModal && contactData.contacts.length > 0 && (
|
||||
<div className="absolute z-50 mt-1 w-2/3 max-h-[50vh] bg-white shadow-lg rounded-md p-3 border border-gray-100 overflow-y-auto no-scrollbar">
|
||||
<ContactModal
|
||||
contactData={contactData}
|
||||
inpFirstName={recipient.firstName}
|
||||
|
|
@ -355,10 +468,14 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase ,
|
|||
openContactModal={openContactModal}
|
||||
setRecipients={setRecipients}
|
||||
setOpenContactModal={setOpenContactModal}
|
||||
topRef={topRef}
|
||||
setManualFocusTriggered={setManualFocusTriggered}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
|
||||
{/* Signing options + Add button in one line */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div className="flex flex-wrap gap-6">
|
||||
|
|
@ -385,11 +502,11 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase ,
|
|||
type="submit"
|
||||
className="inline-flex items-center gap-2 bg-[var(--primary)] hover:bg-[var(--primaryLight2)] text-white text-sm font-semibold px-5 py-2 rounded-md transition"
|
||||
>
|
||||
<FaPlus size={14} /> {editCase === "Edit" ? "Edit Recipient" : "Add Recipient"}
|
||||
<FaPlus size={14} /> {editCase === "Edit" ? "Edit Recipient" : "Add Recipient"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -59,15 +59,6 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
|
|||
|
||||
const handleRemoveRecipient = (recipient) => {
|
||||
if (!accountId || !transactionId) return;
|
||||
<<<<<<< HEAD
|
||||
// dispatch(removeSelectedRecipient(recipient))
|
||||
dispatch(removeRecipientAsync([{
|
||||
recipientId: recipient.id,
|
||||
email: recipient.email,
|
||||
accountId: accountId,
|
||||
transactionId: transactionId,
|
||||
}]))
|
||||
=======
|
||||
if (recipient.uuid) {
|
||||
dispatch(removeSelectedRecipient(recipient))
|
||||
} else {
|
||||
|
|
@ -78,7 +69,6 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
|
|||
transactionId: transactionId,
|
||||
}))
|
||||
}
|
||||
>>>>>>> origin/main
|
||||
if (recipients.length === 2) {
|
||||
let leftRecipient = recipients.filter((obj) => {
|
||||
if ("id" in obj && "id" in recipient) {
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
|
|||
</div>
|
||||
|
||||
{/* Center Panel */}
|
||||
<div className="relative flex items-center justify-center bg-white rounded-lg px-1 py-2 w-24">
|
||||
<div className="relative flex items-center justify-center bg-white rounded-lg px-1 py-2 w-24 ">
|
||||
{/* Floating dimensions tooltip */}
|
||||
<div className="absolute -top-2 left-1/2 -translate-x-1/2 px-2 py-[1px] text-[10px] font-mono text-black z-10 rounded-sm flex items-center gap-[2px]">
|
||||
<input
|
||||
|
|
@ -167,7 +167,7 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
|
|||
onBlur={() => handlePositionInputBlur('left')}
|
||||
onKeyPress={(e) => handleKeyPress(e, 'left')}
|
||||
disabled={disabled}
|
||||
className="w-[40px] h-[16px] text-[10px] text-center border-none focus:outline-none text-black font-mono"
|
||||
className="w-[40px] h-[16px] text-[10px] text-center border-none focus:outline-none text-black font-mono"
|
||||
/>
|
||||
<span className="mx-[1px]">×</span>
|
||||
<input
|
||||
|
|
|
|||
Loading…
Reference in New Issue