marco.pms.web/src/components/Directory/CardViewContact.jsx

import React, { useState } from "react";
import Avatar from "../common/Avatar";
import { getBucketNameById } from "./DirectoryUtils";
import { useActiveInActiveContact, useBuckets } from "../../hooks/useDirectory";
import { getPhoneIcon } from "./DirectoryUtils";
import { useDir } from "../../Context/DireContext";
import { useDirectoryContext } from "../../pages/Directory/DirectoryPage";
import ConfirmModal from "../common/ConfirmModal";
const CardViewContact = ({
  IsActive,
  contact,
  setSelectedContact,
  setIsOpenModal,
  setOpen_contact,
  setIsOpenModalNote,
  IsDeleted,
  restore,
}) => {
  const { data, setManageContact, setContactOpen } = useDirectoryContext();
  const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);

  const { mutate: ActiveInActive, isPending } = useActiveInActiveContact();
  const handleActiveInactive = (contactId) => {
    ActiveInActive({ contactId, contactStatus: !IsActive });
  };
  return (
    <>
      <ConfirmModal
        type="delete"
        header="Delete Contact"
        message="Are you sure you want delete?"
        onSubmit={handleActiveInactive}
        onClose={() => setIsDeleteModalOpen(false)}
        loading={isPending}
        paramData={contact.id}
        isOpen={IsDeleteModalOpen}
      />

      <div
        className="card text-start border-1"
        style={{ background: `${!IsActive ? "#f8f6f6" : ""}` }}
      >
        <div className="card-body  px-1 py-2 pb-0">
          <div className="d-flex justify-content-between">
            <div
              className={`d-flex align-items-center ${
                IsActive && "cursor-pointer"
              }`}
              onClick={() => {
                if (IsActive) {
                  setContactOpen({ contact: contact, Open: true });
                }
              }}
            >
              <Avatar
                size="xs"
                firstName={
                  (contact?.name || "").trim().split(" ")[0]?.charAt(0) || ""
                }
                lastName={
                  (contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""
                }
              />{" "}
              <span className="text-heading fs-6"> {contact?.name}</span>
            </div>
            <div>
              {IsActive && (
                <div className="dropdown z-2">
                  <button
                    type="button"
                    className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                  >
                    <i
                      className="bx bx-dots-vertical-rounded text-muted p-0"
                      data-bs-toggle="tooltip"
                      data-bs-offset="0,8"
                      data-bs-placement="top"
                      data-bs-custom-class="tooltip-dark"
                      title="More Action"
                    ></i>
                  </button>
                  <ul className="dropdown-menu dropdown-menu-end w-auto">
                    <li
                      onClick={() =>
                        setManageContact({
                          isOpen: true,
                          contactId: contact?.id,
                        })
                      }
                    >
                      <a className="dropdown-item px-2 cursor-pointer py-1">
                        <i className="bx bx-edit bx-xs text-primary  me-2"></i>
                        <span className="align-left ">Modify</span>
                      </a>
                    </li>
                    <li>
                      <a
                        className="dropdown-item  px-2 cursor-pointer py-1"
                        onClick={() => setIsDeleteModalOpen(true)}
                      >
                        <i className="bx bx-trash text-danger  bx-xs me-2"></i>
                        <span className="align-left">Delete</span>
                      </a>
                    </li>
                  </ul>
                </div>
              )}
              {!IsActive && (
                <i
                  className={`bx  ${
                    isPending ? "bx-loader-alt bx-spin" : "bx-recycle"
                  } me-1 text-primary cursor-pointer`}
                  title="Restore"
                  onClick={() => handleActiveInactive(contact.id)}
                ></i>
              )}
            </div>
          </div>

          <ul className="list-inline m-0 ps-4 d-flex align-items-start">
            <li className="list-inline-item text-break small px-1 ms-5">
              {contact?.organization}
            </li>
          </ul>
        </div>
        <div
          className={`card-footer text-start px-9 py-1 ${
            IsActive && "cursor-pointer"
          }`}
          onClick={() => {
            if (IsActive) {
              setIsOpenModalNote(true);
              setOpen_contact(contact);
            }
          }}
        >
          <hr className="my-0" />
          {contact?.designation && (
            <ul className="list-unstyled my-1 d-flex align-items-start  ms-2">
              <li className="me-2">
                <i className="fa-solid fa-id-badge ms-1"></i>
              </li>
              <li className="flex-grow-1 text-break small">
                {contact.designation}
              </li>
            </ul>
          )}
          {contact.contactEmails[0] && (
            <ul className="list-unstyled my-1 d-flex align-items-start   ms-2">
              <li className="me-2">
                <i className="bx bx-envelope bx-xs mt-1"></i>
              </li>
              <li className="flex-grow-1 text-break small">
                {contact.contactEmails[0].emailAddress}
              </li>
            </ul>
          )}

          {contact.contactPhones[0] && (
            <ul className="list-inline m-0  ms-2">
              <li className="list-inline-item me-1">
                <i
                  className={` ${getPhoneIcon(
                    contact.contactPhones[0].label
                  )} bx-xs`}
                ></i>
              </li>
              <li className="list-inline-item text-small">
                {contact.contactPhones[0]?.phoneNumber}
              </li>
            </ul>
          )}

          {contact?.tags?.length > 0 ? (
            <ul className="list-inline m-0 ms-2">
              <li className="list-inline-item me-2 my-1">
                <i className="fa-solid fa-tag fs-6 ms-1"></i>
              </li>
              {contact.tags.map((tag, index) => (
                <li key={index} className="list-inline-item text-small active">
                  {tag.name}
                </li>
              ))}
            </ul>
          ) : (
            <ul className="list-inline m-0 ms-2">
              <li className="list-inline-item me-2 my-1">
                <i className="fa-solid fa-tag fs-6 ms-1"></i>
              </li>
              <li className="list-inline-item text-small active">Other</li>
            </ul>
          )}

          <ul className="list-inline m-0   ms-2">
            {contact?.bucketIds?.map((bucketId) => (
              <li key={bucketId} className="list-inline-item me-1">
                <span
                  className="badge bg-label-primary rounded-pill d-flex align-items-center gap-1"
                  style={{ padding: "0.1rem 0.3rem" }}
                >
                  <i className="bx bx-pin bx-xs"></i>
                  <span className="small-text">
                    {getBucketNameById(data, bucketId)}
                  </span>
                </span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </>
  );
};

export default CardViewContact;