@woovi/ui 4.0.942

package/src/icons/SocPanelIcon.tsx

@@ -0,0 +1,48 @@
+type Props = {
+  size: number;
+  viewBox?: string;
+};
+
+const SocPanelIcon = ({ size, viewBox }: Props) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    xmlSpace='preserve'
+    style={{
+      enableBackground: `new ${viewBox}`,
+    }}
+    viewBox={viewBox}
+    height={size}
+  >
+    <path
+      d='M269.9 197.9 220.3 229l-105.8 41.5h-14.1L188 55l14.5 11.1 66.6 99.3z'
+      style={{
+        fillRule: 'evenodd',
+        clipRule: 'evenodd',
+        fill: '#ff3600',
+      }}
+    />
+    <path
+      d='m188 55-2.8-12.6L110 11.3 78.9 37.2 10.7 216.4l5.2 19.3 20 15.5 37 14.1 27.5 5.2z'
+      style={{
+        fillRule: 'evenodd',
+        clipRule: 'evenodd',
+        fill: '#0063ff',
+      }}
+    />
+    <path
+      d='M114.7 3.6c-5.3-.2-10.5.8-15.4 2.7-4.9 1.9-9.4 4.8-13.1 8.5-3.7 3.7-6.7 8.1-8.7 13L6.4 203.9c-3.7 9.1-3.7 19.4-.1 28.5C10 241.6 17 249 26 253.1l44.2 20.4c8.6 4 18 6.1 27.5 6.3s18.9-1.6 27.7-5.2L256 220.8c2.9-1.2 5.6-2.7 8.1-4.6 1.9-1.4 3.8-3 5.4-4.8 3.8-4.1 6.7-8.9 8.4-14.1 1.7-5.3 2.3-10.8 1.7-16.3-.6-5.5-2.4-10.8-5.3-15.5L208.1 56.1c-7-11.6-17.4-20.8-29.7-26.5L129.9 7.2c-4.8-2.2-9.9-3.4-15.2-3.6zM106 23.4c2.6-1 5.4-1.5 8.1-1.4 2.8.1 5.5.7 8 1.9l48.4 22.4c2.9 1.3 5.6 2.9 8.2 4.7l-85 210.1c-5.5-.6-10.8-2.1-15.8-4.4l-44.2-20.4c-4.7-2.2-8.4-6.1-10.3-10.8-1.9-4.7-1.9-10 0-14.8l71.2-176c1-2.5 2.6-4.8 4.5-6.8 2-1.9 4.3-3.5 6.9-4.5zm8.5 235.6 78.1-193 66 108.9c1.1 1.7 1.8 3.6 2.3 5.6.2.8.3 1.6.4 2.5.3 2.9 0 5.7-.9 8.5-.9 2.7-2.4 5.2-4.4 7.4a20.5 20.5 0 0 1-5 3.9c-.7.4-1.4.7-2.1 1l-130.6 53.9c-1.2.5-2.5.9-3.8 1.3z'
+      style={{
+        fillRule: 'evenodd',
+        clipRule: 'evenodd',
+        fill: '#010005',
+      }}
+    />
+  </svg>
+)
+
+SocPanelIcon.defaultProps = {
+  viewBox: '0 0 283.5 283.5',
+  size: 24,
+};
+
+export default SocPanelIcon

package/src/icons/WabizIcon.tsx

@@ -0,0 +1,42 @@
+
+/* eslint-disable @woovi/no-hex-colors */
+type Props = {
+  size: number;
+  color?: string;
+  viewBox?: string;
+};
+
+const WabizIcon = (props: Props) => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      xmlSpace='preserve'
+      id='Layer_1'
+      x={0}
+      y={0}
+      width={props.size}
+      height={props.size}
+      viewBox='0 0 393 393'
+      {...props}
+    >
+      <style>{'.st1{fill:#fff}'}</style>
+      <path
+        d='M331.4 393H61.6C27.6 393 0 365.5 0 331.4V61.6C0 27.6 27.6 0 61.6 0h269.9c34 0 61.6 27.6 61.6 61.6v269.9c-.1 34-27.6 61.5-61.7 61.5z'
+        style={{
+          fill: props.color,
+        }}
+      />
+      <path
+        d='m131.8 204.8 43.4-43.4c5.7-5.7 5.7-15 0-20.7l-13-13c-5.7-5.7-15-5.7-20.7 0l-34.8 34.8-34.8-34.8c-5.7-5.7-15-5.7-20.7 0l-13 13c-5.7 5.7-5.7 15 0 20.7l43.4 43.4c.5.7 1 1.4 1.6 2l13 13c2.9 2.9 6.7 4.3 10.5 4.3s7.6-1.4 10.5-4.3l13-13c.6-.6 1.2-1.3 1.6-2M258.5 146.7l-13-13c-5.7-5.7-15-5.7-20.7 0L127 231.5c-5.7 5.7-5.7 15 0 20.7l13 13c5.7 5.7 15 5.7 20.7 0l97.8-97.8c5.7-5.7 5.7-14.9 0-20.7M354.9 231.6l-43.4-43.4c-.5-.7-1-1.4-1.6-2l-13-13c-2.9-2.9-6.7-4.3-10.5-4.3s-7.6 1.4-10.5 4.3l-13 13c-.6.6-1.2 1.3-1.6 2l-43.4 43.4c-5.7 5.7-5.7 15 0 20.7l13 13c5.7 5.7 15 5.7 20.7 0l34.8-34.8 34.8 34.8c5.7 5.7 15 5.7 20.7 0l13-13c5.7-5.7 5.7-15 0-20.7'
+        className='st1'
+      />
+    </svg>
+  );
+}
+
+WabizIcon.defaultProps = {
+  color: '#72ba00',
+  size: 32,
+};
+
+export default WabizIcon;

package/src/icons/WakeIcon.tsx

@@ -0,0 +1,45 @@
+type Props = {
+  size: number;
+  color?: string;
+  viewBox?: string;
+};
+
+const WakeIcon = ({ size, color, viewBox }: Props) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={size}
+    height={size}
+    viewBox={viewBox}
+    color={color}
+  >
+    <path d='M51.2762 0H46.1914V22.4778H51.2762V0Z' fill='#1A1A1A' />
+    <path
+      d='M60.8644 16.775V22.5842L46.2188 14.151V8.34351L60.8644 16.775Z'
+      fill='#1A1A1A'
+    />
+    <path
+      d='M46.1914 13.9701V19.9918L60.9556 11.5587V5.53857L46.1914 13.9701Z'
+      fill='#C505F2'
+    />
+    <path
+      d='M20.2774 4.8313L17.6222 14.417L14.9914 4.91932L15.0157 4.8313H14.9654H10.163H10.1143L10.1387 4.91932L7.50785 14.417L4.85268 4.8313H0L2.22996 12.9489L2.25268 12.8725L4.88838 22.4781H5.34768H5.36716H9.88063H9.90011H10.1257L12.5764 13.6364L15.0027 22.4781H15.462H15.4799H19.995H20.0145H20.24L25.1284 4.8313H20.2774Z'
+      fill='#1A1A1A'
+    />
+    <path
+      d='M31.1741 16.9577C32.0261 17.8611 33.0665 18.3129 34.36 18.3129C35.6535 18.3129 36.6938 17.8611 37.5442 16.9245C38.3963 15.9895 38.8377 14.8918 38.8377 13.6014C38.8377 12.311 38.3963 11.2133 37.5442 10.3098C36.6938 9.40641 35.6518 8.95469 34.36 8.95469C33.0665 8.95469 32.0261 9.40641 31.1741 10.3098C30.3545 11.2133 29.9439 12.311 29.9439 13.6014C29.9422 14.925 30.3529 16.0227 31.1741 16.9577ZM38.8377 4.84275H43.5054V22.4763H38.8377V20.6678C37.356 22.1857 35.5885 22.9263 33.5079 22.9263C31.0475 22.9263 28.9977 22.0229 27.3893 20.2476C25.781 18.4407 24.9922 16.2137 24.9922 13.535C24.9922 10.8878 25.8118 8.69396 27.4218 6.95187C29.0301 5.20977 31.0799 4.33789 33.5079 4.33789C35.5902 4.33789 37.356 5.11345 38.8377 6.66124V4.84275Z'
+      fill='#1A1A1A'
+    />
+    <path
+      d='M67.0985 11.763H75.2361C74.7622 9.73024 73.3112 8.47141 71.2614 8.47141C69.2441 8.47141 67.6357 9.69703 67.0985 11.763ZM79.8404 15.3767H67.131C67.7298 17.6037 69.3074 18.7015 71.8295 18.7015C73.7851 18.7015 75.5818 18.1219 77.2226 16.9909L79.1782 20.4435C77.0651 22.0893 74.543 22.8964 71.6103 22.8964C68.551 22.8964 66.2172 21.993 64.5764 20.2177C62.968 18.4424 62.1484 16.2486 62.1484 13.6346C62.1484 10.9558 62.9989 8.76204 64.6722 7.01828C66.3438 5.24297 68.5511 4.37109 71.263 4.37109C73.8176 4.37109 75.8999 5.1782 77.5391 6.75921C79.1783 8.34022 79.9995 10.5025 79.9995 13.246C79.9978 13.8604 79.9362 14.5712 79.8404 15.3767Z'
+      fill='#1A1A1A'
+    />
+  </svg>
+);
+
+WakeIcon.defaultProps = {
+  viewBox: '0 0 80 23',
+  color: '#C505F2',
+  size: 50,
+};
+
+export default WakeIcon;

package/src/import/Dropzone.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const Dropzone = styled.div`
+  padding: 20px 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(96, 115, 137, 0.05);
+  border: 1px dashed #ccc;
+  border-radius: 8px;
+`;
+
+export default Dropzone;

package/src/import/DropzoneFile.tsx

@@ -0,0 +1,278 @@
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+import _Icon from '@mui/material/Icon';
+import _IconButton from '@mui/material/IconButton';
+import { getTime } from 'date-fns';
+import mime from 'mime-types';
+import type { ReactNode } from 'react';
+import { useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { useTranslation } from 'react-i18next';
+import { Text } from 'rebass';
+import styled from 'styled-components';
+
+import _Dropzone from './Dropzone';
+import BoxFlex from '../mui/BoxFlex';
+import Typography from '../mui/Typography';
+
+const Dropzone = styled(_Dropzone)`
+  flex-direction: column;
+  gap: 10px;
+`;
+
+const RemovePreviewIcon = styled(_Icon).attrs({
+  children: 'close',
+})`
+  color: ${(props) => props.theme.primaryDarkerColor};
+`;
+
+const IconButton = styled(_IconButton)`
+  width: 30px;
+  height: 30px;
+`;
+
+const FilePreview = styled.div`
+  display: flex;
+  max-width: 265px;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 600;
+  color: ${(props) => props.theme.primaryDarkerColor};
+`;
+
+const FileName = styled.p`
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const TextHover = styled(Text)`
+  && {
+    cursor: pointer;
+    color: ${(props) => props.theme.primaryLighterColor};
+  }
+`;
+
+export const allowedMimeTypes = [
+  'audio/mp3',
+  'audio/ogg',
+  'audio/wav',
+  'video/mp4',
+  'image/*',
+  'application/pdf',
+  'text/plain',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  'application/msword',
+  'text/csv',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+];
+
+type OnDropFileArgs = {
+  files: File[];
+  multiple?: boolean;
+  onChange: (files: File | File[]) => void;
+};
+
+type RenderPreviewArgs = {
+  file?: File;
+  files: File[];
+  multiple: boolean | null;
+  onRemoveFile?: (index?: number) => void;
+  allowRemoval: boolean | null;
+};
+
+type File = any;
+
+type Props = {
+  file?: File;
+  files?: File[];
+  multiple?: boolean;
+  onChange: (files: File | File[]) => void;
+  onRemoveFile: (index?: number) => void;
+  isImagePreview?: boolean;
+  allowRemoval?: boolean;
+  isLoading?: boolean;
+  dataComplete?: boolean;
+  shouldUseOriginalName?: boolean;
+  allowedTypes?: string[];
+  description?: ReactNode;
+};
+
+const DropzoneFile = ({
+  file,
+  files = [],
+  multiple = true,
+  onRemoveFile: onRemoveFileProp,
+  onChange,
+  isImagePreview = false,
+  allowRemoval = true,
+  isLoading,
+  dataComplete,
+  shouldUseOriginalName,
+  allowedTypes = allowedMimeTypes,
+  ...props
+}: Props) => {
+  const { t } = useTranslation();
+  const [imagePreview, setImagePreview] = useState<File | string>(() => {
+    if (!!file?.url) {
+      return file?.url.split('/smart/')[1];
+    }
+
+    return file;
+  });
+
+  const onRemoveFile = (e) => {
+    e.stopPropagation();
+    onRemoveFileProp();
+  };
+
+  const generateFileName = (file: File, index: number): string => {
+    const extension = mime.extension(file.type);
+
+    return `${getTime(new Date())}-${index}.${extension}`;
+  };
+
+  const secureFiles = (files: File[]): File[] => {
+    return files.map((file, index) => {
+      const fileName = shouldUseOriginalName
+        ? file.name
+        : generateFileName(file, index);
+
+      const options = {
+        lastModified: file.lastModified,
+        lastModifiedDate: file.lastModifiedDate,
+        type: file.type,
+      };
+
+      return new File([file], fileName, options);
+    });
+  };
+
+  const onDropAccepted = ({ multiple, onChange, files }: OnDropFileArgs) => {
+    const securedFiles = secureFiles(files);
+
+    if (multiple) {
+      return onChange(securedFiles);
+    }
+
+    return onChange(securedFiles[0]);
+  };
+
+  const renderPreview = ({
+    file,
+    files,
+    multiple,
+    onRemoveFile,
+    allowRemoval,
+  }: RenderPreviewArgs) => {
+    if (multiple && files.length) {
+      return files.map((file, index) => (
+        <BoxFlex key={index}>
+          <Typography>{file.name}</Typography>
+          {onRemoveFile && (
+            <IconButton onClick={() => onRemoveFile(index)} size='large'>
+              <RemovePreviewIcon />
+            </IconButton>
+          )}
+        </BoxFlex>
+      ));
+    }
+
+    if (file) {
+      if (file instanceof File && isImagePreview) {
+        const reader = new FileReader();
+
+        reader.addEventListener('load', () => {
+          setImagePreview(reader.result);
+        });
+        reader.readAsDataURL(file);
+      }
+
+      return (
+        <BoxFlex
+          sx={{
+            alignItems: 'center',
+            flexDirection: 'column',
+            img: {
+              width: 'auto',
+              height: 'auto',
+              maxWidth: '265px',
+            },
+            backgroundColor: 'rgba(96, 115, 137, 0.19)',
+            p: isImagePreview ? '10px' : '0 10px',
+          }}
+        >
+          {isImagePreview ? <img src={imagePreview} alt='preview' /> : null}
+          <FilePreview>
+            <FileName>{file.name}</FileName>
+
+            {onRemoveFile && !!allowRemoval && (
+              <IconButton onClick={onRemoveFile} size='large'>
+                <RemovePreviewIcon />
+              </IconButton>
+            )}
+          </FilePreview>
+        </BoxFlex>
+      );
+    }
+
+    return null;
+  };
+
+  const accept = allowedTypes.reduce(
+    (acc, key) => ({
+      ...acc,
+      [key]: [],
+    }),
+    {},
+  );
+
+  const { getRootProps, getInputProps } = useDropzone({
+    onDropAccepted: (files) => {
+      onDropAccepted({
+        multiple,
+        onChange,
+        files,
+      });
+    },
+    accept,
+  });
+
+  const description = props.description ?? (
+    <BoxFlex sx={{ alignItems: 'center', gap: '15px' }}>
+      <CloudUploadIcon color='secondary' fontSize='large' />
+      <Typography>
+        {t('Drag and drop or')}{' '}
+        <TextHover as='span'>{t('choose a file')}</TextHover>{' '}
+        {t('to upload your data')}
+      </Typography>
+    </BoxFlex>
+  );
+
+  return (
+    <Dropzone {...getRootProps()} {...props}>
+      <input data-testid='input-drop' {...getInputProps()} />
+      {description}
+      {dataComplete && (
+        <Typography sx={{ fontSize: '12px', padding: '15px' }}>
+          {t('File uploaded successfully. Click the go forward button')}
+        </Typography>
+      )}
+      {isLoading && (
+        <Typography sx={{ fontSize: '12px', padding: '15px' }}>
+          {t('We are analyzing your file, this may take a while...')}
+        </Typography>
+      )}
+      {renderPreview({
+        file,
+        files,
+        multiple,
+        onRemoveFile,
+        allowRemoval,
+      })}
+    </Dropzone>
+  );
+};
+
+export default DropzoneFile;

package/src/import/xlsx/Import.tsx

@@ -0,0 +1,161 @@
+import type { Dispatch, SetStateAction } from 'react';
+import { useMemo, useCallback } from 'react';
+import 'react-datasheet/lib/react-datasheet.css';
+import type { TFunction } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
+import type { Row } from 'react-table';
+import { Flex, Text } from 'rebass';
+
+import { IMPORT_STATUS, ImportTable } from '@woovi/table';
+
+import { EditableCell, getColumnType } from './ImportUtils';
+
+type Props = {
+  isProcessing: boolean;
+  setShowReport: (v: boolean) => void;
+  data: any[];
+  setData: Dispatch<SetStateAction<any[]>>;
+  setSelectedData: Dispatch<SetStateAction<Array<Row<any>>>>;
+  firstImport: boolean;
+  selectedData: Array<Row<any>>;
+  dataImportTable: any[];
+  getInvalidFieldsMessage: (field: any, t: TFunction) => string[];
+  getReferences: (row: any) => any;
+  setIsNextEnabled: (isNextEnabled: boolean) => void;
+};
+const Import = ({
+  data,
+  setData,
+  isProcessing,
+  setSelectedData,
+  firstImport,
+  selectedData,
+  dataImportTable,
+  getInvalidFieldsMessage,
+  getReferences,
+  setIsNextEnabled,
+  customColumnValidation = {},
+}: Props) => {
+  const { t } = useTranslation();
+
+  const updateMyData = async (rowIndex, columnId, value) => {
+    const updateRowData = {
+      ...data[rowIndex],
+      [columnId]: value,
+    };
+
+    const getNewData = async () => {
+      const newDataRow = await getReferences(updateRowData, t, data);
+
+      const invalidFields = Object.values(newDataRow).filter(
+        (item) => typeof item?.isValid === 'boolean' && !item?.isValid,
+      );
+
+      const getValueMessage = () => {
+        if (!newDataRow.importStatus?.value?.message.length) {
+          return [];
+        }
+
+        return newDataRow.importStatus?.value?.message;
+      };
+
+      if (!!invalidFields?.length) {
+        return {
+          ...newDataRow,
+          importStatus: {
+            ...newDataRow.importStatus,
+            value: {
+              status: IMPORT_STATUS.ERROR,
+              message: [
+                ...getInvalidFieldsMessage(invalidFields, t),
+                ...getValueMessage(),
+              ],
+            },
+          },
+        };
+      }
+
+      return newDataRow;
+    };
+
+    const updatedData = await getNewData();
+
+    setData((old) =>
+      old.map((row, index) => {
+        if (index === rowIndex) {
+          return updatedData;
+        }
+
+        return row;
+      }),
+    );
+  };
+
+  const renderRowSubComponent = useCallback(({ row }) => {
+    const importStatus = row.original.importStatus;
+
+    return (
+      <Flex flexDirection='column'>
+        <Text fontSize='12px' fontWeight='600' mr='5px'>
+          {t('Status')}:
+        </Text>
+        {importStatus.value?.message?.map((message, index) => {
+          return (
+            <Text fontSize='12px' mr='5px' key={index}>
+              {`- ${message}`}
+            </Text>
+          );
+        })}
+      </Flex>
+    );
+  }, []);
+
+  const columns = useMemo(() => {
+    return dataImportTable.map(({ name, requiredMessage }) => ({
+      Header: name,
+      accessor: name,
+      columnType: getColumnType(name),
+      customColumnValidation,
+      requiredMessage,
+      Cell: EditableCell,
+    }));
+  }, []);
+
+  const setSelectedDataFn = (selectedData: any[]) => {
+    if (selectedData.length === 0) {
+      setIsNextEnabled(false);
+      setSelectedData(selectedData);
+
+      return;
+    }
+
+    setIsNextEnabled(true);
+    setSelectedData(selectedData);
+  };
+
+  return (
+    <Flex flexDirection='column' mt='20px'>
+      <Flex justifyContent='flex-end' height='19px' mb='20px'>
+        {!!selectedData.length && (
+          <Text fontSize='14px' fontWeight='600'>
+            {selectedData.length}{' '}
+            {t('Row selected', { count: selectedData.length })}
+          </Text>
+        )}
+      </Flex>
+      <ImportTable
+        columns={columns}
+        data={data}
+        updateMyData={updateMyData}
+        setSelectedData={setSelectedDataFn}
+        renderRowSubComponent={renderRowSubComponent}
+        setData={setData}
+        isProcessing={isProcessing}
+        firstImport={firstImport}
+        dataImportTable={dataImportTable}
+      />
+    </Flex>
+  );
+};
+
+export default Import;

package/src/import/xlsx/ImportDropzone.tsx

@@ -0,0 +1,120 @@
+import { useSnackbar } from 'notistack';
+import { useTranslation } from 'react-i18next';
+import * as XLSX from 'xlsx';
+
+import { DropzoneFile } from '@woovi/ui';
+
+import { getData, validateHeader } from './ImportUtils';
+
+type Props = {
+  isLoading: boolean;
+  setIsLoading: (v: boolean) => void;
+  setShowReport: (v: boolean) => void;
+  clearData: () => void;
+  dataComplete: boolean;
+  sheet: File;
+  setSheet: (file: File) => void;
+  setData: (data: any[]) => void;
+  setFirstData: (data: any[]) => void;
+  setFirstImport: (firstImport: boolean) => void;
+  dataImportTable: any[];
+};
+const ImportDropzone = ({
+  isLoading,
+  setIsLoading,
+  setSheet,
+  setData,
+  clearData,
+  sheet,
+  dataComplete,
+  setShowReport,
+  setFirstData,
+  setFirstImport,
+  dataImportTable,
+}: Props) => {
+  const { t } = useTranslation();
+  const { enqueueSnackbar } = useSnackbar();
+
+  const onChangeFile = (file: File | File[]) => {
+    setData([]);
+    setShowReport(false);
+    setIsLoading(true);
+    setSheet(file);
+    setFirstImport(false);
+
+    const reader = new FileReader();
+    const rABS = !!reader.readAsBinaryString;
+
+    reader.onload = async (e) => {
+      /* Parse data */
+      const bstr = e.target.result;
+
+      const wb = XLSX.read(bstr, {
+        type: rABS ? 'binary' : 'array',
+        cellDates: true,
+      });
+
+      /* Get first worksheet */
+      const wsname = wb.SheetNames[0];
+      const ws = wb.Sheets[wsname];
+      /* Convert array of arrays */
+      const dataRaw = XLSX.utils.sheet_to_json(ws, {
+        header: 1,
+        raw: true,
+      });
+
+      const [header, ...excelData] = dataRaw;
+
+      const headerMatch = validateHeader({
+        header,
+        defaultHeader: dataImportTable,
+      });
+
+      if (!headerMatch) {
+        setIsLoading(false);
+        setSheet(null);
+        enqueueSnackbar(
+          t(
+            'Error: excel out of the template. Do not remove columns or edit titles.',
+          ),
+          {
+            variant: 'error',
+          },
+        );
+
+        return null;
+      }
+
+      const newData = getData({
+        excelData: excelData,
+        dataImportTable,
+        header,
+        t,
+      });
+
+      setFirstData(newData);
+      setIsLoading(false);
+    };
+
+    if (rABS) {
+      reader.readAsBinaryString(file);
+    } else {
+      reader.readAsArrayBuffer(file);
+    }
+  };
+
+  return (
+    <DropzoneFile
+      file={sheet}
+      onChange={onChangeFile}
+      onRemoveFile={(e) => clearData(e)}
+      allowRemoval={!!sheet}
+      multiple={false}
+      isLoading={isLoading}
+      dataComplete={dataComplete}
+      shouldUseOriginalName
+    />
+  );
+};
+
+export default ImportDropzone;