All files / src/features/Merchants/MerchantSidePanel/Modals/Signature Sign.tsx

90.9% Statements 10/11
50% Branches 3/6
100% Functions 2/2
100% Lines 10/10

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                    3x 3x 3x 3x 3x     2x 1x   1x 1x     2x                        
import { Box } from "@mui/material";
import { dataURLtoFile } from "@utils/assets";
import React, { Dispatch, SetStateAction } from "react";
import { breakpoints } from "@theme/v2/breakpoints";
import SignatureCanvas from "features/Merchants/MerchantSidePanel/Modals/Signature/SignatureCanvas";
 
interface Props {
  setFileToUpload: Dispatch<SetStateAction<File | null>>;
}
 
const isMobile = window.innerWidth <= (breakpoints?.values?.v2_sm || 0);
const HORIZONTAL_PADDING_AND_OFFSET = 40;
const CANVAS_MOBILE_WIDTH = window.innerWidth - HORIZONTAL_PADDING_AND_OFFSET;
const CANVAS_DESKTOP_WIDTH = 683;
const CANVAS_HEIGHT = 184;
 
function Sign({ setFileToUpload }: Props) {
  const handleSetDataUrl = async (e: any) => {
    Iif (!e) return;
 
    const file = await dataURLtoFile(e, "signature.png");
    setFileToUpload(file);
  };
 
  return (
    <Box mt="16px">
      <SignatureCanvas
        setDataURL={handleSetDataUrl}
        height={CANVAS_HEIGHT}
        width={isMobile ? CANVAS_MOBILE_WIDTH : CANVAS_DESKTOP_WIDTH}
      />
    </Box>
  );
}
 
export default Sign;