@propellerads/kyc-form 1.0.2 → 3.0.0

package/dist/index.esm.min.js

@@ -1,404 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import Button, { BUTTON_TYPE } from '@propellerads/button';
-import SuccessLabel from '@propellerads/success-label';
-import { Close, COLOR, SIZE, Delete, Pdf, Insert } from '@propellerads/icon';
-import styled from 'styled-components';
-import { errorColor, spacing, fontSmall, white, gray50, gray95, borderRadius, fontNormal, black } from '@propellerads/stylevariables';
-import ImageUploader, { DIRECTION } from '@propellerads/image-uploader';
-
-const StyledKYCErrorLabel = styled.div `
-  display: flex;
-  align-items: center;
-  color: ${errorColor};
-  margin-top: ${spacing * 2}px;
-  margin-bottom: ${spacing * 4}px;
-`;
-const StyledKYCErrorLabelIcon = styled.span `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 14px;
-  height: 14px;
-  border-radius: 100%;
-  background-color: ${errorColor};
-
-  &:before {
-    font-size: ${fontSmall};
-    color: ${white};
-    content: '!';
-  }
-`;
-const StyledKYCErrorLabelText = styled.span `
-  margin-left: ${spacing * 2}px;
-`;
-
-const KYCErrorLabel = (props) => {
-    return (React.createElement(StyledKYCErrorLabel, null,
-        props.isDocumentPartError ? (React.createElement(StyledKYCErrorLabelIcon, null)) : (React.createElement(Close, { color: COLOR.ERROR, hoverColor: COLOR.ERROR, size: SIZE.SMALL })),
-        React.createElement(StyledKYCErrorLabelText, null, props.label)));
-};
-
-const StyledKYCSucessScreen = styled.div `
-  display: flex;
-  flex-direction: column;
-`;
-const StyledKYCSucessScreenItem = styled.span `
-  margin-bottom: ${spacing * 8}px;
-`;
-const StyledKYCSucessScreenSuppport = styled.span `
-  color: ${gray50};
-`;
-const StyledKYCFailScreen = styled.div `
-  display: flex;
-  flex-direction: column;
-`;
-const StyledKYCFailScreenItem = styled.span `
-  margin-bottom: ${spacing * 6}px;
-`;
-
-var DOCUMENT_TYPES;
-(function (DOCUMENT_TYPES) {
-    DOCUMENT_TYPES["ID"] = "id";
-    DOCUMENT_TYPES["UB"] = "ub";
-    DOCUMENT_TYPES["ID_EXTRA"] = "id_extra";
-    DOCUMENT_TYPES["CARD"] = "bank_card";
-    DOCUMENT_TYPES["PAYMENT_SYSTEM_SCREEN"] = "payment_system_screen";
-    DOCUMENT_TYPES["ONLINE_BANKING_STATEMENT"] = "online_banking_statement";
-    DOCUMENT_TYPES["COMPANY_REGISTRATION_DOCUMENT"] = "company_registration_document";
-    DOCUMENT_TYPES["SELFIE_WITH_ID_CARD"] = "selfie_with_id_card_or_bank_card";
-})(DOCUMENT_TYPES || (DOCUMENT_TYPES = {}));
-var PART_TYPES;
-(function (PART_TYPES) {
-    PART_TYPES["ID_FRONT"] = "id_front";
-    PART_TYPES["ID_BACK"] = "id_back";
-    PART_TYPES["UB"] = "ub_item";
-    PART_TYPES["CARD"] = "card_item";
-    PART_TYPES["PAYMENT_SYSTEM_SCREEN"] = "screen_item";
-    PART_TYPES["ONLINE_BANKING_STATEMENT"] = "obs_item";
-    PART_TYPES["COMPANY_REGISTRATION_DOCUMENT"] = "crd_item";
-    PART_TYPES["SELFIE_WITH_ID_CARD"] = "selfie_item";
-})(PART_TYPES || (PART_TYPES = {}));
-
-const MAX_FILE_SIZE = 5242880;
-const MAX_EXTRA_PARTS_COUNT = 15;
-const PDF_MIME_TYPE = 'application/pdf';
-const HEIC_MIME_TYPE = 'image/heic';
-const ACCEPT_FORMATS = `.png,.jpg,.jpe,.jpeg,.pdf,image/png,image/jpeg,${PDF_MIME_TYPE},${HEIC_MIME_TYPE}`;
-const AVAILABLE_EXTRA_PARTS_DOCUMENTS = [
-    DOCUMENT_TYPES.CARD,
-];
-const OPTIONAL_DOCUMENT_PARTS = {
-    [DOCUMENT_TYPES.ID]: {
-        parts: [PART_TYPES.ID_BACK],
-    },
-    [DOCUMENT_TYPES.ID_EXTRA]: {
-        parts: [PART_TYPES.ID_BACK],
-    },
-};
-
-const KYCSucessScreen = (props) => {
-    const { elementId, title, description, support, } = props;
-    return (React.createElement(StyledKYCSucessScreen, { id: elementId },
-        React.createElement(StyledKYCSucessScreenItem, null,
-            React.createElement(SuccessLabel, { show: true, elementId: `${elementId}_success` }, title)),
-        description && (React.createElement(StyledKYCSucessScreenItem, null, description)),
-        support && (React.createElement(StyledKYCSucessScreenSuppport, null, support))));
-};
-const KYCFailScreen = (props) => {
-    const { elementId, title, support, } = props;
-    return (React.createElement(StyledKYCFailScreen, { id: elementId },
-        React.createElement(StyledKYCFailScreenItem, null,
-            React.createElement(KYCErrorLabel, { label: title, isDocumentPartError: false })),
-        support));
-};
-var KYCStatusScreen = {
-    KYCSucessScreen,
-    KYCFailScreen,
-};
-
-const StyledKYCFormItemFile = styled.div `
-  margin-top: ${spacing * 4}px;
-  margin-left: ${spacing * 4}px;
-`;
-const StyledKYCFormItemFileTitle = styled.div `
-  margin-bottom: ${spacing}px;
-`;
-const StyledKYCFormItemFilePreview = styled.div `
-  display: flex;
-  align-items: center;
-  background-color: ${gray95};
-  padding: ${spacing * 2}px;
-  border-radius: ${borderRadius}px;
-`;
-const StyledKYCFormItemFilePreviewName = styled.span `
-  width: 100%;
-  margin-left: ${spacing * 4}px;
-  margin-right: ${spacing * 2}px;
-`;
-const StyledKYCFormItemFilePreviewRemove = styled.span `
-  cursor: pointer !important;
-  margin-right: ${spacing * 2}px;
-`;
-const StyledKYCFormItemFileUploaderContainer = styled.div `
-  height: 66px;
-`;
-const StyledKYCFormItemFileExtraPart = styled.div `
-  display: flex;
-  flex-direction: column;
-  margin-top: ${spacing * 4}px;
-  margin-left: ${spacing * 4}px;
-`;
-const StyledKYCDocumentPartImgMiniature = styled.img `
-  width: auto;
-  height: 50px;
-  border-radius: ${borderRadius}px;
-`;
-const StyledKYCDocumentPartIconMiniature = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 50px;
-  height: 50px;
-  border-radius: ${borderRadius}px;
-  background-color: ${white};
-`;
-
-const isDocumentExtraPartAvailable = (documentType) => {
-    return AVAILABLE_EXTRA_PARTS_DOCUMENTS.includes(documentType);
-};
-const canAddExtraPart = (documentType, parts) => {
-    return isDocumentExtraPartAvailable(documentType)
-        && parts.every((part) => Boolean(part.data))
-        && parts.length < MAX_EXTRA_PARTS_COUNT
-        && parts.length > 0;
-};
-const canRemoveExtraPart = (documentType, parts) => {
-    return AVAILABLE_EXTRA_PARTS_DOCUMENTS.includes(documentType) && parts.length > 1;
-};
-const isDocumentsValid = (documents) => {
-    return documents.every((document) => {
-        return document.parts.every((part) => {
-            var _a, _b;
-            const isPartOptional = !!((_b = (_a = OPTIONAL_DOCUMENT_PARTS[document.type]) === null || _a === void 0 ? void 0 : _a.parts) === null || _b === void 0 ? void 0 : _b.find((value) => value === part.type));
-            return isPartOptional || Boolean(part.data);
-        });
-    });
-};
-const getMimeType = (partData) => {
-    var _a;
-    return (_a = partData === null || partData === void 0 ? void 0 : partData.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/)) === null || _a === void 0 ? void 0 : _a[0];
-};
-const isPDF = (partData) => {
-    const mimeType = getMimeType(partData);
-    return mimeType === PDF_MIME_TYPE;
-};
-const isHEIC = (partData) => {
-    const mimeType = getMimeType(partData);
-    return mimeType === HEIC_MIME_TYPE;
-};
-const isFileUniqueInDocument = (file, parts) => {
-    return parts.every((part) => part.data !== (file === null || file === void 0 ? void 0 : file.data));
-};
-const getFileBase64 = async (file) => {
-    const reader = new FileReader();
-    return new Promise((resolve, reject) => {
-        reader.onload = () => resolve(reader.result);
-        reader.onerror = (error) => reject(error);
-        reader.readAsDataURL(file);
-    });
-};
-
-const KYCDocumentPartMiniature = (props) => {
-    const isPDFPart = isPDF(props.data);
-    const isHEICPart = isHEIC(props.data);
-    if (isPDFPart || isHEICPart) {
-        return (React.createElement(StyledKYCDocumentPartIconMiniature, null,
-            isPDFPart && (React.createElement(Pdf, { color: COLOR.GRAY, hoverColor: COLOR.GRAY })),
-            isHEICPart && (React.createElement(Insert, { color: COLOR.GRAY, hoverColor: COLOR.GRAY }))));
-    }
-    return (React.createElement(StyledKYCDocumentPartImgMiniature, { src: props.data }));
-};
-const KYCFormItemFileExtraPart = (props) => {
-    const { elementId, title, uploaderLabels, onFileAdd, } = props;
-    return (React.createElement(StyledKYCFormItemFileExtraPart, { id: elementId },
-        title && (React.createElement(StyledKYCFormItemFileTitle, null, title)),
-        React.createElement(StyledKYCFormItemFileUploaderContainer, null,
-            React.createElement(ImageUploader, { title: uploaderLabels.title, action: uploaderLabels.action, maxSize: MAX_FILE_SIZE, acceptFormats: ACCEPT_FORMATS, elementId: `${elementId}_uploader`, direction: DIRECTION.ROW, onDrop: onFileAdd }))));
-};
-const KYCFormItemFile = (props) => {
-    const { name, title, data, error, elementId, uploaderLabels, onFileChange, onFileRemove, } = props;
-    return (React.createElement(StyledKYCFormItemFile, { id: elementId },
-        title && (React.createElement(StyledKYCFormItemFileTitle, null, title)),
-        data ? (React.createElement(StyledKYCFormItemFilePreview, null,
-            React.createElement(KYCDocumentPartMiniature, { data: data }),
-            React.createElement(StyledKYCFormItemFilePreviewName, null, name),
-            React.createElement(StyledKYCFormItemFilePreviewRemove, { onClick: onFileRemove },
-                React.createElement(Delete, { color: COLOR.BLUE, hoverColor: COLOR.BLUE })))) : (React.createElement(StyledKYCFormItemFileUploaderContainer, null,
-            React.createElement(ImageUploader, { title: uploaderLabels.title, action: uploaderLabels.action, maxSize: MAX_FILE_SIZE, acceptFormats: ACCEPT_FORMATS, elementId: `${elementId}_uploader`, direction: DIRECTION.ROW, onDrop: onFileChange }))),
-        error && (React.createElement(KYCErrorLabel, { label: error, isDocumentPartError: true }))));
-};
-var KYCDocumentParts = {
-    KYCFormItemFileExtraPart,
-    KYCFormItemFile,
-};
-
-const StyledKYCFormItem = styled.div `
-  margin-top: ${spacing * 6}px;
-`;
-const StyledKYCFormItemTitle = styled.div `
-  font-size: ${fontNormal}px;
-  font-weight: bold;
-  color: ${black};
-  margin-bottom: ${spacing}px;
-`;
-const StyledKYCFormItemDescription = styled.div `
-  font-size: ${fontSmall}px;
-  color: ${gray50};
-  margin-left: ${spacing * 4}px;
-`;
-
-const getErrorKey = (documentIndex, partIndex) => `[${documentIndex}].parts[${partIndex}].data`;
-const KYCFormItem = (props) => {
-    var _a;
-    const { type, index, uploaderLabels, documentLabels, elementId, parts, errors, onDocumentChange, } = props;
-    const [localErrors, setLocalErrors] = useState(new Map());
-    const isAddExtraPartAvailable = canAddExtraPart(type, parts);
-    const documentLabelsParts = documentLabels === null || documentLabels === void 0 ? void 0 : documentLabels.parts;
-    const [fileNames, setFileNames] = useState(new Map());
-    const setLocalErrorByPartIndex = (partIndex) => {
-        const newLocalErrors = new Map(localErrors);
-        newLocalErrors.set(getErrorKey(index, partIndex), uploaderLabels.oversizeError);
-        setLocalErrors(newLocalErrors);
-    };
-    const deleteLocalErrorByPartIndex = (partIndex) => {
-        const newLocalErrors = new Map(localErrors);
-        newLocalErrors.delete(getErrorKey(index, partIndex));
-        setLocalErrors(newLocalErrors);
-    };
-    const updateDocumentPart = (part, partIndex, data) => {
-        const newPart = {
-            ...part,
-            data,
-        };
-        const newParts = [...parts];
-        newParts.splice(partIndex, 1, newPart);
-        const newDocument = {
-            type,
-            parts: newParts,
-        };
-        onDocumentChange(newDocument);
-    };
-    const onFileChange = async (partIndex, file) => {
-        if (!file) {
-            setLocalErrorByPartIndex(partIndex);
-            return;
-        }
-        const part = parts[partIndex] || parts[0];
-        const data = await getFileBase64(file);
-        updateDocumentPart(part, partIndex, data);
-        const newFileNames = new Map(fileNames);
-        newFileNames.set(data, file.name);
-        setFileNames(newFileNames);
-        deleteLocalErrorByPartIndex(partIndex);
-    };
-    const onPartRemove = (partIndex) => {
-        const newParts = parts.filter((item, idx) => idx !== partIndex);
-        const newDocument = {
-            type,
-            parts: newParts,
-        };
-        onDocumentChange(newDocument);
-    };
-    const onFileRemove = (partIndex) => {
-        const isRemoveExtraPartAvailable = canRemoveExtraPart(type, parts);
-        if (isRemoveExtraPartAvailable) {
-            onPartRemove(partIndex);
-            return;
-        }
-        const part = parts[partIndex];
-        updateDocumentPart(part, partIndex);
-        const removedPart = parts[partIndex];
-        const newFileNames = new Map(fileNames);
-        if ((removedPart === null || removedPart === void 0 ? void 0 : removedPart.data) && isFileUniqueInDocument(removedPart, parts)) {
-            newFileNames.delete(removedPart === null || removedPart === void 0 ? void 0 : removedPart.data);
-        }
-        setFileNames(newFileNames);
-        deleteLocalErrorByPartIndex(partIndex);
-    };
-    const getFileName = (key) => {
-        if (!key) {
-            return undefined;
-        }
-        return fileNames.get(key);
-    };
-    return (React.createElement(StyledKYCFormItem, { id: elementId },
-        React.createElement(StyledKYCFormItemTitle, null,
-            index + 1,
-            ". ", documentLabels === null || documentLabels === void 0 ? void 0 :
-            documentLabels.title),
-        (documentLabels === null || documentLabels === void 0 ? void 0 : documentLabels.description) && (React.createElement(StyledKYCFormItemDescription, null, documentLabels === null || documentLabels === void 0 ? void 0 : documentLabels.description)),
-        parts.map((part, partIndex) => {
-            var _a;
-            let itemKey = `kyc-form_item_file_${part.type}`;
-            const isExtraPartAvailable = isDocumentExtraPartAvailable(type);
-            const partLabels = documentLabelsParts === null || documentLabelsParts === void 0 ? void 0 : documentLabelsParts[part.type];
-            const partTitle = isExtraPartAvailable ? undefined : partLabels === null || partLabels === void 0 ? void 0 : partLabels.title;
-            if (isDocumentExtraPartAvailable(type) && part.data) {
-                itemKey = `${itemKey}_${(_a = part.data) === null || _a === void 0 ? void 0 : _a.substr(-32)}`;
-                if (!isFileUniqueInDocument(part, parts)) {
-                    itemKey = `${itemKey}_${partIndex}`;
-                }
-            }
-            const partError = errors === null || errors === void 0 ? void 0 : errors[getErrorKey(index, partIndex)];
-            const localPartError = localErrors.get(getErrorKey(index, partIndex));
-            return (React.createElement(KYCDocumentParts.KYCFormItemFile, { title: partTitle, data: part.data, type: part.type, name: getFileName(part.data), uploaderLabels: uploaderLabels, error: localPartError || partError, key: itemKey, elementId: `${elementId}_part_${part.type}_${partIndex}`, onFileChange: (file) => onFileChange(partIndex, file), onFileRemove: () => onFileRemove(partIndex) }));
-        }),
-        isAddExtraPartAvailable && (React.createElement(KYCDocumentParts.KYCFormItemFileExtraPart, { elementId: `${elementId}_extra`, title: (_a = documentLabelsParts === null || documentLabelsParts === void 0 ? void 0 : documentLabelsParts[parts[0].type]) === null || _a === void 0 ? void 0 : _a.title, uploaderLabels: uploaderLabels, onFileAdd: (file) => onFileChange(parts.length, file) }))));
-};
-
-const StyledKYCForm = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  width: 100%;
-`;
-const StyledKYCFormTitle = styled.div `
-  font-size: ${fontNormal}px;
-`;
-const StyledKYCFormDocuments = styled.div `
-  width: 100%;
-  margin-bottom: ${spacing * 6}px;
-`;
-const StyledKYCFormButton = styled.div `
-  display: flex;
-  justify-content: flex-end;
-  width: 100%;
-`;
-
-const KYCForm = (props) => {
-    const { elementId, title, uploadButtonLabel, uploaderLabels, documentsLabels, documents, errors, isLoading, onUploadClick, } = props;
-    const [userDocuments, setUserDocuments] = useState(documents);
-    const [isButtonDisabled, setButtonDisabled] = useState(true);
-    useEffect(() => {
-        setUserDocuments(documents);
-    }, [documents]);
-    useEffect(() => {
-        const isValid = isDocumentsValid(userDocuments);
-        setButtonDisabled(!isValid);
-    }, [userDocuments]);
-    const onDocumentChange = (index, document) => {
-        const newDocuments = [...userDocuments];
-        newDocuments.splice(index, 1, document);
-        setUserDocuments(newDocuments);
-    };
-    return (React.createElement(StyledKYCForm, { id: elementId },
-        title && (React.createElement(StyledKYCFormTitle, null, title)),
-        React.createElement(StyledKYCFormDocuments, null, userDocuments.map((document, index) => (React.createElement(KYCFormItem, { index: index, type: document.type, parts: document.parts, documentLabels: documentsLabels[document.type], uploaderLabels: uploaderLabels, errors: errors, elementId: `${elementId}_item_${document.type}`, key: `kyc-form_item_${document.type}_${index}`, onDocumentChange: (document) => onDocumentChange(index, document) })))),
-        React.createElement(StyledKYCFormButton, null,
-            React.createElement(Button, { elementId: `${elementId}_button`, type: BUTTON_TYPE.PRIMARY, isDisabled: isButtonDisabled, isLoading: isLoading || false, onClick: () => onUploadClick(userDocuments) }, uploadButtonLabel))));
-};
-KYCForm.SucessScreen = KYCStatusScreen.KYCSucessScreen;
-KYCForm.FailScreen = KYCStatusScreen.KYCFailScreen;
-
-export default KYCForm;
-export { ACCEPT_FORMATS, AVAILABLE_EXTRA_PARTS_DOCUMENTS, DOCUMENT_TYPES, MAX_EXTRA_PARTS_COUNT, MAX_FILE_SIZE, OPTIONAL_DOCUMENT_PARTS, PART_TYPES, PDF_MIME_TYPE };