SME-Web/src/components/process/processStepOne/RecipientsCon.tsx

import { useRef, useState } from "react";
import RecipientAddCard from "./RecipientAddCard"
import RecipientCards from "./RecipientCards"
import { useParams } from "react-router-dom";
import { SignTypeEnum } from "../../../utlity/types";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "../../../store/store";
import { IoMdClose } from "react-icons/io";
import getMinRoutingOrder from "../../../utlity/commonUtils";
import { addRecipientAsync, recipientType, removeAllRecipients, removeRecipientAsync } from "../../../store/slices/selectedRecipientsSlice";
import { UserState } from "../../../store/slices/userSlice";
import api from "../../../config/api";
import { FormSubmitInt } from "./ProcessStepOne";

interface RecipientsConIntProps {
    transactionTemplateToggle: string;
    accountId: string | undefined;
    transactionId: string | undefined;
    userData: UserState;
    isModal: boolean;
    submitError?: FormSubmitInt;
    setEditRecipientsModal?: React.Dispatch<boolean>
}

const RecipientsCon: React.FC<RecipientsConIntProps> = ({ transactionTemplateToggle, accountId, transactionId, userData, submitError, isModal = true, setEditRecipientsModal }) => {
    const dispatch = useDispatch<AppDispatch>()

    const topRef = useRef<HTMLDivElement | null>(null);
    const signType = useParams<{ signType: string }>().signType;
    const [showSelfSignWarnModal, setShowSelfSignWarnModal] = useState(false)
    const [editRecipient, setEditRecipient] = useState({})
    const [editRecipientCurrentEmail, setEditRecipientCurrentEmail] = useState('')
    const [editCase, setEditCase] = useState<string>("")

    const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients)

    const globalLoader = useSelector((state: RootState) => state.loader)


    // Handle Recipient Process - START
    const handleRecipientAdd = async () => {
        let minRoutingOrder = getMinRoutingOrder({ recipients: selectedRecipients });

        const recipientsData = selectedRecipients.map((recipient, index) => ({
            id: "id" in recipient ? recipient.id : null,
            routingOrder: "routingOrder" in recipient && recipient.routingOrder ? recipient.routingOrder : 1,
            provideOwnTags: userData.email === recipient.email && (recipient.routingOrder ?? 1) === minRoutingOrder ? true : false,
            type: recipient.type,
            firstName: recipient.firstName,
            lastName: recipient.lastName,
            authType: "NONE",
            deliveryMethod: "EMAIL",
            email: recipient.email,
            hostName: recipient.hostName,
            hostEmail: recipient.hostEmail,
            company: "",
            title: "",
            website: "",
            phone: "",
            accessCode: "",
            accessCodeDelivery: true,
            language: "en",
            name: `${recipient.firstName} ${recipient.lastName}`,
            roleName: recipient.roleName,
            allowSenderToEdit: recipient.allowSenderToEdit,
            allowSenderToDelete: recipient.allowSenderToDelete,
        }));

        let recipientsDataTemp = recipientsData;
        let recipientId = null;

        if (signType === SignTypeEnum.selfSign) {
            dispatch(removeAllRecipients());
            await Promise.all(
                selectedRecipients.map((recipient) => dispatch(removeRecipientAsync({
                    recipientId: recipient.id,
                    accountId,
                    transactionId,
                    email: recipient.email,
                })))
            );

            recipientsDataTemp = [{
                id: null,
                routingOrder: 1,
                provideOwnTags: true,
                type: recipientType.SIGNER,
                firstName: userData.firstName,
                lastName: userData.lastName,
                authType: "NONE",
                deliveryMethod: "EMAIL",
                email: userData.email,
                hostName: "",
                hostEmail: "",
                company: "",
                title: "",
                website: "",
                phone: "",
                accessCode: "",
                accessCodeDelivery: true,
                language: userData.language ? userData.language : "en",
                name: `${userData.firstName} ${userData.lastName}`,
                roleName: "",
                allowSenderToEdit: true,
                allowSenderToDelete: true,
            }]

            try {
                const basePath = `/api/v1/accounts/${accountId}/transactions/${transactionId}/recipients`;
                const res = await api.post(basePath, recipientsDataTemp)
                recipientId = res.data[0].id;
            } catch (error) {
                console.log("Error Creating Self Sign Recipient", error.message)
            }

        } else {
            if (!accountId || !transactionId) return;
            dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
        }
    }

    // Handle Recipient Process - END

    return (
        <>
            {(signType !== SignTypeEnum.selfSign || showSelfSignWarnModal) && <>
                <div className="flex flex-col gap-4 align-start">
                    {isModal && <div className="flex justify-between items-center">
                        <p className="font-medium">Recipients</p>
                        <IoMdClose
                            onClick={() => {
                                handleRecipientAdd()
                                setEditRecipientsModal(false)
                            }}
                            className="text-xl text-slate-400 cursor-pointer" />
                    </div>}
                    <div id="recipient_cards_con"
                        className={`${submitError && submitError.showError && (submitError.duplicateEmailSameRoutingOrder || submitError.invalidRecipientLastName || submitError.invalidRecipientEmail) ? "border border-red-500 rounded-sm p-2 ring-2 ring-red-300" : ""}`}>
                        <RecipientCards
                            userEmail={userData.email}
                            transactionTemplateToggle={transactionTemplateToggle}
                            setEditRecipient={setEditRecipient}
                            setEditCase={setEditCase}
                            editRecipient={editRecipient}
                            setEditRecipientCurrentEmail={setEditRecipientCurrentEmail}
                            editRecipientCurrentEmail={editRecipientCurrentEmail}
                        />
                        {submitError && submitError.showError && <p
                            className="text-xs text-right px-2 pt-2 text-red-500">
                            {submitError.duplicateEmailSameRoutingOrder && `Each Signing order must have unique emails, ${submitError && submitError.email}`}
                            {!submitError.recipients && !submitError.duplicateEmailSameRoutingOrder && submitError.invalidRecipientEmail && `Invalid email address, ${submitError && submitError.email}`}
                            {!submitError.recipients && !submitError.duplicateEmailSameRoutingOrder && submitError.invalidRecipientLastName && `Last name cannot be empty.`}
                        </p>}
                    </div>
                    <div
                        ref={topRef}
                        className={`relative mt-4 mb-2 w-full bg-[var(--mainViewBg)] ${globalLoader.isLoading ? 'pointer-events-none' : ''} ${submitError && submitError.showError && submitError.recipients ? "border border-red-500 rounded-sm p-2 ring-2 ring-red-300" : ""}`}
                    >
                        <RecipientAddCard
                            transactionTemplateToggle={transactionTemplateToggle}
                            editRecipient={editRecipient}
                            editCase={editCase}
                            setEditRecipient={setEditRecipient}
                            setEditCase={setEditCase}
                            topRef={topRef}
                            setEditRecipientCurrentEmail={setEditRecipientCurrentEmail} />

                        {submitError && submitError.showError && <p
                            className="text-xs text-right px-2 pt-2 text-red-500">
                            {submitError.recipients && "At least one recipient is required."}
                        </p>}
                    </div>
                </div>
            </>}
        </>
    )
}

export default RecipientsCon