All files / src/features/EnterprisePortal/EnterpriseSettings/components GiveEnterpriseDocumentsUploader.tsx

0% Statements 0/19
0% Branches 0/8
0% Functions 0/4
0% Lines 0/18

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 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128                                                                                                                                                                                                                                                               
import RESOURCE_BASE, {
  OPERATIONS,
  NEW_ACTION_DENY_MESSAGE,
} from "@constants/permissions";
import { useGetCurrentMerchantId } from "@hooks/common";
import { useListBusinessDetailsDocuments } from "@hooks/enterprise-api/merchants/underwriting/useListUnderwritingDocuments";
import { Stack } from "@mui/material";
import { useAppSelector } from "@redux/hooks";
import { GiveWithMissingPermissionModule } from "@common/GiveWithMissingPermissionModule";
import { WithAccessControl } from "features/Permissions/AccessControl";
import { useQueryClient } from "react-query";
import GiveDocumentsSkeleton from "@components/Settings/Business/Documents/GiveDocumentsSkeleton";
import ErrorCatcher from "@common/Error/ErrorCatcher";
import { useGetUploadFilePermission } from "@hooks/merchant-api/manage-money/useUploadBankAccountDocument";
import {
  AcceptAllowedGeneralDocumentsTypes,
  MAX_UPLOAD_SIZE,
  useUploadFiles,
} from "@hooks/upload-api/uploadHooks";
import GiveUploadArea from "@shared/FileUpload/GiveUploadArea";
import GiveUploadStack from "@shared/FileUpload/GiveUploadStack";
import GiveText from "@shared/Text/GiveText";
import GiveTooltip from "@shared/Tooltip/GiveTooltip";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import GiveMotionWrapper from "@shared/Motion/GiveMotionWrapper";
import { FILES_UPLOAD_GENERAL_LABEL } from "@constants/constants";
import { useParseDocumentsList } from "@features/Merchants/MerchantSidePanel/GiveMerchantFile/components/DocumentsSection";
 
const GiveEnterpriseDocumentsUploader = () => {
  const hasNotBusinessDetailsDocsPermission = useAppSelector(
    (state) => state.app.permissions?.["list-business-details-documents"],
  );
  const queryClient = useQueryClient();
  const { merchantId } = useGetCurrentMerchantId();
  const { isMobileView } = useCustomThemeV2();
  const { parseDocumentsList } = useParseDocumentsList();
 
  const { data, isLoading } = useListBusinessDetailsDocuments({
    id: merchantId,
    filter: "",
    queryKey: "list-enterprise-business-details-documents",
    isMerchantPortal: false, // Enterprise portal
    showConversationFiles: false,
  });
 
  const isUploadAllowed = useGetUploadFilePermission(true); // true = isEnterprise
 
  const { handleUpload } = useUploadFiles();
 
  const drop = async (files: File | File[]) => {
    const fileArray = Array.isArray(files) ? files : [files];
 
    await handleUpload({
      list: fileArray.map((file) => ({ file })),
      merchantId,
      resourceID: merchantId,
      attachmentType: "underwriting_profile",
      label: "",
      tag: "provider business details upload",
      refetcherKey: ["list-enterprise-business-details-documents"],
    });
 
    queryClient.invalidateQueries("list-enterprise-business-details-documents");
  };
 
  if (isLoading) return <GiveDocumentsSkeleton />;
 
  const parsedData = parseDocumentsList({
    documents: data,
    id: merchantId,
  });
 
  return (
    <GiveWithMissingPermissionModule
      sectionName="Documents section"
      notAuthorized={hasNotBusinessDetailsDocsPermission}
    >
      <Stack gap={isMobileView ? 5 : 4}>
        <GiveMotionWrapper delay={50}>
          <GiveText color="primary" fontSize="18px">
            Secure Document Upload
          </GiveText>
        </GiveMotionWrapper>
 
        <GiveMotionWrapper delay={100}>
          <GiveTooltip
            width="compact"
            alignment="left"
            title={NEW_ACTION_DENY_MESSAGE}
            color="default"
            disableHoverListener={isUploadAllowed}
          >
            <GiveUploadArea
              message={FILES_UPLOAD_GENERAL_LABEL}
              disabled={!isUploadAllowed}
              uploadFunction={drop}
              accept={AcceptAllowedGeneralDocumentsTypes}
              maxFiles={5}
              multiple
              isMobile={isMobileView}
              maxSizeInBytes={MAX_UPLOAD_SIZE.value}
            />
          </GiveTooltip>
        </GiveMotionWrapper>
        <WithAccessControl
          resource={RESOURCE_BASE.FILES}
          operation={OPERATIONS.LIST}
          withPortal
        >
          <ErrorCatcher errorID="EnterpriseDocumentItem">
            {parsedData?.length > 0 && (
              <GiveMotionWrapper delay={150}>
                <GiveUploadStack
                  items={parsedData}
                  customStyles={{ width: "100%" }}
                  isHideDelete={true}
                />
              </GiveMotionWrapper>
            )}
          </ErrorCatcher>
        </WithAccessControl>
      </Stack>
    </GiveWithMissingPermissionModule>
  );
};
 
export default GiveEnterpriseDocumentsUploader;