All files / src/components/Merchants/MerchantPreview/hooks useBusinessOwnerIDUploader.ts

54.34% Statements 25/46
24.32% Branches 9/37
37.5% Functions 3/8
55.81% Lines 24/43

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                                  19x         6x 6x   6x   6x   6x   6x   6x   6x             6x 1x   1x       1x   1x         6x 6x     6x 6x                               6x                       6x         6x                               6x         6x                     19x  
import { IFileWithMeta } from "react-dropzone-uploader";
import { downloadDocument } from "@hooks/common/documents/utils";
import { useFormContext } from "react-hook-form";
import { useCustomTheme } from "@theme/hooks/useCustomTheme";
import { TMerchantDocument } from "../data.types";
import { useEffect, useRef, useState } from "react";
import { extractExtensionFromURL } from "@utils/helpers";
import { getOwnerIdImage } from "../utils";
import { useDocumentPreview } from "@hooks/common/documents";
 
type Props = {
  merchantId: number;
  fileId?: number;
  idFile?: TMerchantDocument;
  idImageUrl?: string;
};
 
export const useBusinessOwnerIDUploader = ({
  merchantId,
  idFile,
  idImageUrl,
}: Props) => {
  const [idUrl, setIdUrl] = useState("");
  const isMount = useRef(false);
 
  const { isDesktopView } = useCustomTheme();
 
  const { setValue, watch } = useFormContext();
 
  const { files = { allFiles: [] } } = watch();
 
  const file = files.allFiles[0] || {};
 
  const isLocalFile = !!file.meta;
 
  const ownerIDImage = getOwnerIdImage(
    isLocalFile,
    file.meta?.previewUrl,
    idFile?.fileURL as string,
    idImageUrl,
  );
 
  useEffect(() => {
    Iif (isMount.current) return;
 
    Iif (idFile && !isLocalFile) {
      setValue("files", { allFiles: [idFile] });
    }
 
    setIdUrl(ownerIDImage);
 
    Iif (isBlob(ownerIDImage)) {
      isMount.current = true;
    }
  }, [file.meta?.previewUrl, isLocalFile, ownerIDImage]);
 
  const idName = isLocalFile ? file.meta?.name : file?.fileName;
  const idFileType = isLocalFile
    ? file?.meta?.type.split("/")[1]
    : file?.fileType;
  const idFileId = isLocalFile ? file?.meta?.id : file.id;
  const deleteID = async () => {
    setValue("files", { allFiles: [] }, { shouldDirty: true });
    setValue("idImageUrl", null, { shouldDirty: true });
    setIdUrl("");
 
    if (isLocalFile) {
      files?.allFiles?.forEach((file: IFileWithMeta) => {
        if (typeof file?.remove === "function") {
          file.remove();
        }
      });
    } else if (idFile) {
      setValue("uploadedfiles", watch("files"), { shouldDirty: true });
    }
  };
 
  const downloadFile = async () => {
    if (idUrl) {
      await downloadDocument(
        {
          fileName: idName || "business-owner",
          fileURL: idUrl,
        },
        isDesktopView,
      );
    }
  };
 
  const { handlePreview } = useDocumentPreview({
    merchantID: merchantId,
    handlers: { handleDownload: downloadFile },
  });
 
  const previewDocument = () => {
    // if no file url, skip preview
    if (!idUrl) return;
    const extension = idFileType ? "" : extractExtensionFromURL(idUrl);
 
    const fileToPreview = {
      fileURL: idUrl,
      fileName: idName || "business-owner." + extension,
      fileType: idFileType || extension,
      id: idFileId || 1,
      tag: "legal_principal",
    } as TMerchantDocument;
 
    handlePreview(fileToPreview, [fileToPreview]);
  };
 
  const updateIdUrl = (url: string) => {
    setIdUrl(url);
    setValue("idImageUrl", url, { shouldDirty: true });
  };
 
  return {
    deleteID,
    downloadFile,
    file,
    previewDocument,
    isLocalFile,
    idUrl,
    updateIdUrl,
  };
};
 
const isBlob = (input?: string) => input?.includes("blob:");