All files / src/components/Disputes/GiveDisputePanel/modals/EvidenceProvidedModal EvidenceProvidedModal.tsx

100% Statements 11/11
60% Branches 3/5
100% Functions 5/5
100% Lines 11/11

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96                                        1x 6x 6x 6x   6x           6x                       6x             12x   6x                   12x                                                 6x                
import NiceModal, { useModal } from "@ebay/nice-modal-react";
import GiveBaseModal from "@shared/modals/GiveBaseModal";
import TaskCard from "@features/Merchants/MerchantSidePanel/UnderwritingTasks/components/TaskCard";
import { Stack } from "@mui/material";
import GiveText from "@shared/Text/GiveText";
import { bytesToSize } from "@utils/index";
import { TMerchantDocument } from "@components/Merchants/MerchantPreview/data.types";
import GiveUploadStack from "@shared/FileUpload/GiveUploadStack";
import { useParseDocumentsList } from "@features/Merchants/MerchantSidePanel/GiveMerchantFile/components/DocumentsSection";
import { TCaseEvidence } from "@components/Disputes/utils/data.types";
 
type Props = {
  caseData: {
    action: string;
    note?: string;
    accID: number;
  };
  data: TCaseEvidence[];
};
 
const EvidenceProvidedModal = NiceModal.create(({ caseData, data }: Props) => {
  const { remove, visible } = useModal();
  const { parseDocumentsList } = useParseDocumentsList();
  const { action, note = "", accID } = caseData;
 
  const parsedFiles = data
    ? parseDocumentsList({
        useSizeMessage: true,
        useNotes: true,
        documents: data.map(
          (file) =>
            ({
              fileName: file?.fileName,
              fileURL: file?.fileURL,
              fileType: file?.fileType,
              fileSize: bytesToSize(file?.fileSize || 0)?.sizeString,
              notes: file?.notes,
            } as TMerchantDocument),
        ),
        id: accID,
      })
    : [];
 
  const sectionsList = [
    { title: "Case Action", value: action, hidden: !action },
    {
      title: "Case Notes",
      value: note,
      hidden: !note,
    },
  ].filter((section) => !section.hidden);
 
  return (
    <GiveBaseModal
      open={visible}
      onClose={remove}
      title="Evidence Provided"
      actionLabel="Close"
    >
      <Stack gap="20px">
        <TaskCard title="Evidence" sx={{ gap: "20px" }}>
          {sectionsList.map((section) => (
            <EvidenceItem key={section.title} {...section} />
          ))}
        </TaskCard>
        <TaskCard title="Documents" sx={{ padding: 0 }}>
          <GiveUploadStack
            items={parsedFiles}
            isHideDelete
            hideEditButtons
            customStyles={{
              border: "none",
              width: "100%",
              borderBottomLeftRadius: "20px",
              borderBottomRightRadius: "20px",
              padding: 0,
            }}
          />
        </TaskCard>
      </Stack>
    </GiveBaseModal>
  );
});
 
export default EvidenceProvidedModal;
 
function EvidenceItem({ title, value }: { title: string; value: string }) {
  return (
    <Stack gap="8px">
      <GiveText variant="bodyS" color="secondary">
        {title}
      </GiveText>
      <GiveText variant="bodyS">{value}</GiveText>
    </Stack>
  );
}