= (props) => ;\n","import { FeedbackDialog } from '@ori-ui/components';\nimport { Button, styled } from '@ori-ui/mui';\nimport useTestId from '@ori/testid-generator';\nimport React from 'react';\n\nimport { Localization } from '../../Localization';\nimport { defaultTranslations } from '../../constants/defaultTranslations_simplified-registration-BrandPartner';\nimport { useTranslations } from '../../hooks/useTranslations_simplified-registration-BrandPartner';\nimport type { IConfirmDialogProps } from '../../interfaces';\nimport { TranslationKey } from '../../models';\n\nconst StyledFeedbackDialog = styled(FeedbackDialog)(({ theme }) => ({\n '& .MuiPaper-root': {\n maxWidth: '600px',\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n maxWidth: '100%',\n position: 'absolute',\n bottom: 0,\n margin: 0,\n borderBottomLeftRadius: 0,\n borderBottomRightRadius: 0,\n },\n },\n}));\n\nconst ButtonDelete = styled(Button)(({ theme }) => ({\n background: theme.palette.error.main,\n color: theme.palette.primary.contrastText,\n '&:hover, &:focus': {\n background: theme.palette.error.main,\n color: theme.palette.primary.contrastText,\n },\n}));\n\nconst ButtonCancel = styled(Button)(({ theme }) => ({\n textDecoration: 'underline',\n '&:hover, &:focus': {\n background: 'inherit',\n textDecoration: 'underline',\n boxShadow: 'none',\n },\n}));\n\nconst children = (props: IConfirmDialogProps) => {props.children}
;\n\nconst withConfirm =\n (WrappedComponent: React.ComponentType
) =>\n (props: P) => {\n const { opened, handleConfirm, handleCancel } = props;\n const { formatMessage } = useTranslations();\n const { getTestIdProps } = useTestId();\n\n return (\n \n \n ,\n \n \n ,\n ]}\n >\n \n \n );\n };\n\nexport const ConfirmDeleteDialog = withConfirm(children);\n","import { useToken } from '@ori/auth';\nimport type { AxiosError, AxiosRequestConfig } from 'axios';\nimport axios from 'axios';\nimport useSWR from 'swr';\n\nimport { useConfiguration, useNotificationData } from '../../../contexts';\nimport { useTranslations } from '../../../hooks/useTranslations_simplified-registration-BrandPartner';\nimport { MessageType } from '../../../interfaces';\nimport { TranslationKey } from '../../TranslationKey_simplified-registration-BrandPartner';\n\nconst axiosClient = axios.create();\n\nconst getEncodedFile = (blob: Blob): string => URL.createObjectURL(blob);\n\ninterface FetcherParams {\n url: string;\n tenant: string;\n registrationId: string;\n formattedToken: string;\n previewSize?: { height?: number; width?: number };\n}\n\nexport function useDocumentThumb(\n customerId: number | null,\n documentId?: number | null,\n previewSize?: { height?: number; width?: number },\n) {\n const { globalApiUrl, tenant, registrationId } = useConfiguration();\n const { formattedToken } = useToken();\n const { formatMessage } = useTranslations();\n\n const {\n context: { notificationData },\n } = useNotificationData();\n const { setNotificationData } = notificationData;\n\n const errorMeesage = formatMessage(TranslationKey.cannotGetData);\n\n const thumbUrl = `${globalApiUrl}/customers/${customerId}/documents/${documentId}/image`;\n const shouldFetch = Boolean(customerId && documentId && documentId !== -1);\n const fetchKey = shouldFetch ? `thumb-${customerId}-${documentId}` : null;\n\n const fetcher = async ({\n url,\n tenant,\n registrationId,\n formattedToken,\n previewSize,\n }: FetcherParams): Promise => {\n try {\n const headers: AxiosRequestConfig['headers'] = {\n 'x-tenant-context': tenant,\n 'x-registration-id': registrationId,\n Authorization: formattedToken,\n };\n const response = await axiosClient.get(url, {\n headers,\n responseType: 'blob',\n params: previewSize,\n });\n return getEncodedFile(response.data);\n } catch (error) {\n setNotificationData({\n isOpen: true,\n message: errorMeesage,\n type: MessageType.error,\n messageId: 'cannotGetData',\n });\n const axiosError = error as AxiosError;\n throw new Error(axiosError.message);\n }\n };\n\n const { data: documentURL } = useSWR(\n fetchKey ? [fetchKey, { url: thumbUrl, tenant, registrationId, formattedToken, previewSize }] : null,\n () => fetcher({ url: thumbUrl, tenant, registrationId, formattedToken, previewSize }),\n );\n\n return documentURL;\n}\n","import { useToken } from '@ori/auth';\nimport type { AxiosError, AxiosRequestConfig } from 'axios';\nimport axios from 'axios';\nimport useSWR from 'swr';\n\nimport { useConfiguration, useNotificationData } from '../../../contexts';\nimport { useTranslations } from '../../../hooks/useTranslations_simplified-registration-BrandPartner';\nimport { MessageType } from '../../../interfaces';\nimport { TranslationKey } from '../../TranslationKey_simplified-registration-BrandPartner';\n\nconst axiosClient = axios.create();\n\nconst getEncodedFile = (blob: Blob): string => URL.createObjectURL(blob);\n\ninterface FetcherParams {\n url: string;\n tenant: string;\n registrationId: string;\n formattedToken: string;\n previewSize?: { height?: number; width?: number };\n}\n\nexport function useDocumentThumbDetail(\n customerId: number | null,\n documentId?: number | null,\n previewSize?: { height?: number; width?: number },\n) {\n const { globalApiUrl, tenant, registrationId } = useConfiguration();\n const { formattedToken } = useToken();\n const { formatMessage } = useTranslations();\n\n const {\n context: { notificationData },\n } = useNotificationData();\n const { setNotificationData } = notificationData;\n\n const errorMeesage = formatMessage(TranslationKey.cannotGetData);\n\n const thumbDetailUrl = `${globalApiUrl}/customers/${customerId}/documents/${documentId}/image`;\n\n const shouldFetch = Boolean(customerId && documentId && documentId !== -1);\n const fetchKey = shouldFetch ? `thumbDetail-${customerId}-${documentId}` : null;\n\n const fetcher = async ({\n url,\n tenant,\n registrationId,\n formattedToken,\n previewSize,\n }: FetcherParams): Promise => {\n try {\n const headers: AxiosRequestConfig['headers'] = {\n 'x-tenant-context': tenant,\n 'x-registration-id': registrationId,\n Authorization: formattedToken,\n };\n const response = await axiosClient.get(url, {\n headers,\n responseType: 'blob',\n params: previewSize,\n });\n return getEncodedFile(response.data);\n } catch (error) {\n setNotificationData({\n isOpen: true,\n message: errorMeesage,\n type: MessageType.error,\n messageId: 'cannotGetData',\n });\n const axiosError = error as AxiosError;\n throw new Error(axiosError.message);\n }\n };\n\n const { data: documentURL } = useSWR(\n fetchKey ? [fetchKey, { url: thumbDetailUrl, tenant, registrationId, formattedToken, previewSize }] : null,\n () => fetcher({ url: thumbDetailUrl, tenant, registrationId, formattedToken, previewSize }),\n );\n\n return documentURL;\n}\n","import { IconButton } from '@ori-ui/components';\nimport { Document, Clear } from '@ori-ui/icons';\nimport { Tooltip, Avatar, Dialog, DialogContent, DialogTitle, styled } from '@ori-ui/mui';\nimport useTestId from '@ori/testid-generator';\nimport type { MouseEvent, FC, ReactElement } from 'react';\nimport { useState, useEffect, useCallback } from 'react';\n\nimport { Localization } from '../../Localization';\nimport { defaultTranslations } from '../../constants/defaultTranslations_simplified-registration-BrandPartner';\nimport type { IThumb, IDetailImage } from '../../interfaces';\nimport { TranslationKey } from '../../models';\nimport { useDocumentThumb, useDocumentThumbDetail, useRegistrationData } from '../../models/api';\nimport { Loading } from '../Loading';\n\nconst imagePreviewThumbSize = 80;\nconst imagePreviewDetailSize = 500;\n\nconst StyledDialogContent = styled(DialogContent)(({ theme }) => ({\n position: 'relative',\n minWidth: '60px',\n minHeight: '40px',\n}));\n\nconst CloseButton = styled(IconButton)(({ theme }) => ({\n position: 'absolute',\n top: 0,\n right: '6px',\n}));\n\nconst StyledAvatar = styled(Avatar)(({ theme }) => ({\n width: '80px',\n height: '80px',\n borderRadius: 0,\n background: 'transparent',\n color: theme.palette.text.primary,\n textDecoration: 'none',\n cursor: 'pointer',\n}));\n\nconst DocumentIcon = styled(Document)(({ theme }) => ({\n fontSize: '38px',\n}));\n\ninterface IThumbWithDetailProps {\n fileName: string;\n documentId: number;\n}\n\nexport const ThumbWithDetail: FC = (props) => {\n const { fileName, documentId } = props;\n\n const [detailOpened, setDetailOpened] = useState(false);\n const [imageThumb, setImageThumb] = useState({});\n const [imageDetail, setImageDetail] = useState({});\n\n const { data: registrationData } = useRegistrationData();\n\n const customerId = registrationData?.customerId ?? null;\n\n const documentThumbUrl = useDocumentThumb(customerId, documentId, {\n height: imagePreviewThumbSize,\n width: imagePreviewThumbSize,\n });\n\n const documentThumbDetailUrl = useDocumentThumbDetail(customerId, documentId, {\n height: imagePreviewDetailSize,\n width: imagePreviewDetailSize,\n });\n\n const { getTestIdProps } = useTestId();\n\n const mountOrUpdate = useCallback(() => {\n if (\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- is not always truthy we need this conditon\n imageThumb &&\n !imageThumb[documentId] &&\n /\\.(jpg|jpeg|png|bmp)$/gi.test(fileName) &&\n documentId > 0 &&\n customerId\n ) {\n const currentImages = {};\n setImageThumb({ ...currentImages, [documentId]: documentThumbUrl });\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps --- not needed other property\n }, [customerId, documentId, fileName, imageThumb]);\n\n useEffect(() => {\n mountOrUpdate();\n }, [customerId, mountOrUpdate]);\n\n const getDetailImage = (fileNameProperty: string) => {\n const imgUrl = imageDetail[documentId];\n if (imgUrl && detailOpened) {\n return (\n \n );\n }\n\n return ;\n };\n\n const handleOpenDetail = (event: MouseEvent) => {\n event.preventDefault();\n setDetailOpened(true);\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- is not always truthy we need this conditon\n if (imageDetail && !imageDetail[documentId] && customerId) {\n const currentImages = {};\n setImageDetail({ ...currentImages, [documentId]: documentThumbDetailUrl });\n // await fetchImageDetail(customerId, documentId);\n }\n };\n\n const handleDetailClose = () => {\n setDetailOpened(false);\n };\n\n const getAvatar = (): ReactElement => {\n if (/\\.(jpg|jpeg|png|bmp)$/gi.test(fileName) && documentId > 0) {\n const thumb = imageThumb[documentId];\n\n return (\n \n }\n onClick={handleOpenDetail}\n {...getTestIdProps('thum-with-detail-tooltip-open-detail')}\n >\n \n \n );\n }\n\n return ;\n };\n\n const avatar = getAvatar();\n const detailImage = getDetailImage(fileName);\n\n return (\n <>\n {avatar}\n \n \n );\n};\n","import { useToken } from '@ori/auth';\nimport type { AxiosRequestConfig, AxiosResponse } from 'axios';\nimport axios from 'axios';\nimport useSWR from 'swr';\n\nimport { useConfiguration } from '../../../contexts';\n\nconst axiosClient = axios.create();\n\nconst getEncodedFile = (blob: Blob): string => URL.createObjectURL(blob);\n\nexport function useCustomerDocument(customerId: number | null, documentId?: number | null) {\n const { globalApiUrl, tenant, registrationId } = useConfiguration();\n const { formattedToken } = useToken();\n const shouldFetch = Boolean(\n customerId !== null && documentId !== null && documentId !== undefined && documentId !== -1,\n );\n const url = `${globalApiUrl}/customers/${customerId}/documents/${documentId}`;\n\n const { data: document } = useSWR(shouldFetch ? url.toString() : null, async (requestUrl: string) => {\n const headers: AxiosRequestConfig['headers'] = {\n 'x-tenant-context': tenant,\n 'x-registration-id': registrationId,\n };\n headers.Authorization = formattedToken;\n const { data } = await axiosClient\n .get(requestUrl, {\n headers,\n responseType: 'blob',\n })\n .then((blob) => blob)\n .catch((error: AxiosResponse) => error);\n\n return data;\n });\n\n return document === undefined ? undefined : getEncodedFile(document);\n}\n","import { Tooltip, styled, useTheme } from '@ori-ui/mui';\nimport type { GlobalCustomersDocumentApprovalDtoApprovalState } from '@ori/global-api-client-react';\nimport useTestId from '@ori/testid-generator';\nimport type { FC, ReactElement } from 'react';\n\nimport { Localization } from '../../Localization';\nimport { defaultTranslations } from '../../constants/defaultTranslations_simplified-registration-BrandPartner';\nimport { TranslationKey } from '../../models';\n\nconst RootContainer = styled('div')(({ theme }) => ({\n fontSize: '12px',\n fontWeight: 'bold',\n lineHeight: '17px',\n textTransform: 'uppercase',\n}));\n\nconst StyledSpanLabel = styled('span')(({ theme }) => ({\n padding: '2px 15px',\n borderRadius: '5px',\n color: theme.palette.primary.contrastText,\n}));\n\ninterface IDocumentStateProps {\n state: GlobalCustomersDocumentApprovalDtoApprovalState;\n reason?: string;\n}\n\nexport const DocumentState: FC = (props) => {\n const { state, reason }: IDocumentStateProps = props;\n\n const theme = useTheme();\n\n const { getTestIdProps } = useTestId();\n\n const getLocalization = (approvalState: GlobalCustomersDocumentApprovalDtoApprovalState): ReactElement => {\n switch (approvalState) {\n case 'Approved':\n return (\n \n );\n case 'Pending':\n return (\n \n );\n case 'Rejected':\n return (\n \n );\n default:\n return (\n \n );\n }\n };\n\n const getStateColor = (approvalState: GlobalCustomersDocumentApprovalDtoApprovalState): string => {\n switch (approvalState) {\n case 'Approved':\n return theme.palette.secondary.main;\n case 'Pending':\n return theme.palette.warning.main;\n default:\n return 'transparent';\n }\n };\n\n const stateElement = (\n \n {getLocalization(state)}\n \n );\n\n if (reason) {\n return (\n \n {stateElement}\n \n );\n }\n\n return stateElement;\n};\n","import { Clear, ErrorCircle } from '@ori-ui/icons';\nimport { styled, LinearProgress } from '@ori-ui/mui';\n\nconst flexCenter = {\n display: 'flex',\n alignItems: 'center',\n};\n\nexport const StyledListItem = styled('li')(({ theme }) => ({\n position: 'relative',\n borderBottom: `1px solid ${theme.palette.grey[200]}`,\n '&:last-child': {\n borderBottom: 'none',\n },\n}));\n\nexport const StyledDivContent = styled('div')(({ theme }) => ({\n ...flexCenter,\n justifyContent: 'space-between',\n}));\n\nexport const StyledSpanInfo = styled('span')(({ theme }) => ({\n ...flexCenter,\n maxWidth: 'calc(100% - 50px)',\n width: '100%',\n}));\n\nexport const StyledSpanThumb = styled('span')(({ theme }) => ({\n ...flexCenter,\n justifyContent: 'center',\n minWidth: '80px',\n minHeight: '80px',\n marginRight: theme.spacing(3),\n}));\n\nexport const StyledSpanActions = styled('span')(({ theme }) => ({\n ...flexCenter,\n justifyContent: 'flex-end',\n}));\n\nexport const StyledSpanFile = styled('span')(({ theme }) => ({\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n width: '100%',\n}));\n\nexport const StyledSpanFileName = styled('span')(({ theme }) => ({\n display: 'block',\n overflow: 'hidden',\n color: theme.palette.text.primary,\n fontSize: '14px',\n lineHeight: '19px',\n textOverflow: 'ellipsis',\n whitespace: 'nowrap',\n}));\n\nexport const StyledSpanFileNameLink = styled('a')(({ theme }) => ({\n display: 'block',\n overflow: 'hidden',\n color: theme.palette.text.primary,\n fontSize: '14px',\n lineHeight: '19px',\n textOverflow: 'ellipsis',\n whitespace: 'nowrap',\n cursor: 'pointer',\n '&:hover': {\n color: theme.palette.primary.main,\n textDecoration: 'underline',\n },\n}));\n\nexport const StyledSpanFileSize = styled('span')(({ theme }) => ({\n color: theme.palette.grey.A700,\n fontSize: '11px',\n lineHeight: '18px',\n}));\n\nexport const StyledErrorIcon = styled(ErrorCircle)(({ theme }) => ({\n color: theme.palette.error.main,\n fontSize: '35px',\n lineHeight: '24px',\n}));\n\nexport const StyledDeleteIcon = styled(Clear)(({ theme }) => ({\n fontSize: '23px',\n lineHeight: '16px',\n '&:hover': {\n background: 'transparent',\n color: theme.palette.primary.main,\n },\n marginRight: theme.spacing(3),\n}));\n\nexport const StyledProgress = styled(LinearProgress)(({ theme }) => ({\n position: 'absolute',\n right: 0,\n bottom: '5px',\n left: 0,\n}));\n","import type {\n GlobalCustomersDocumentApprovalDto,\n GlobalCustomersDocumentApprovalDtoApprovalState,\n} from '@ori/global-api-client-react';\nimport type { FC, MouseEvent, ReactElement } from 'react';\n\nimport type { IDocumentsInfo } from '../../interfaces';\nimport { useCustomerDocument, useRegistrationData } from '../../models/api';\nimport { DocumentState } from '../Document/DocumentState';\nimport {\n StyledSpanFile,\n StyledSpanFileName,\n StyledSpanFileNameLink,\n StyledSpanFileSize,\n} from './DocumentItemStyledComponents';\n\ninterface IDocumentItemFileProps {\n document: IDocumentsInfo;\n visibleApprovalState?: boolean;\n}\n\nconst bytesInKb = 1024;\n\nexport const DocumentItemFile: FC = (props) => {\n const { document, visibleApprovalState } = props;\n\n const { data: registrationData } = useRegistrationData();\n\n const customerId = registrationData?.customerId ?? null;\n\n const documentItemUrl = useCustomerDocument(customerId, document.documentId);\n\n const handleDownloadDocument = (event: MouseEvent) => {\n const link = event.target as HTMLLinkElement;\n\n if (!link.href) {\n event.preventDefault();\n\n const documentUrl = documentItemUrl ?? '';\n if (documentUrl !== '') {\n link.href = documentUrl;\n link.click();\n }\n }\n };\n\n const getDocumentItemLink = () => {\n const { fileName, documentId }: IDocumentsInfo = document;\n\n if (fileName && documentId && documentId < 0) {\n return {fileName};\n }\n\n if (fileName) {\n return {fileName};\n }\n\n return null;\n };\n\n const getDocumentSize = () => {\n const { fileSize }: IDocumentsInfo = document;\n const hundred = 100;\n const size = Math.round((fileSize ? fileSize / bytesInKb / bytesInKb : 0) * hundred) / hundred;\n\n return {size} MB;\n };\n\n const getApprovalState = (approval?: GlobalCustomersDocumentApprovalDto): ReactElement | null => {\n if (visibleApprovalState) {\n // if there is no approval information in document data,\n // it is automatically in \"Pending\" state\n let approvalState: GlobalCustomersDocumentApprovalDtoApprovalState = 'Pending';\n let approvalReason;\n\n if (approval?.approvalState) {\n const { approvalState: state, reason }: GlobalCustomersDocumentApprovalDto = approval;\n approvalState = state;\n approvalReason = reason;\n }\n\n return (\n \n );\n }\n\n return null;\n };\n\n return (\n \n {getDocumentItemLink()}\n {getDocumentSize()}\n {getApprovalState(document.approval)}\n \n );\n};\n","import { Tooltip, Typography } from '@ori-ui/mui';\nimport useTestId from '@ori/testid-generator';\nimport type { FC } from 'react';\nimport { useState } from 'react';\n\nimport { Localization } from '../../Localization';\nimport { defaultTranslations } from '../../constants/defaultTranslations_simplified-registration-BrandPartner';\nimport type { IDocumentItemProps, IDocumentsInfo } from '../../interfaces';\nimport { TranslationKey } from '../../models';\nimport { ConfirmDeleteDialog } from '../ConfirmDeleteDialog';\nimport { ThumbWithDetail } from '../ThumbWithDetail';\nimport { DocumentItemFile } from './DocumentItemFile';\nimport {\n StyledDeleteIcon,\n StyledDivContent,\n StyledErrorIcon,\n StyledListItem,\n StyledProgress,\n StyledSpanActions,\n StyledSpanInfo,\n StyledSpanThumb,\n} from './DocumentItemStyledComponents';\n\nexport const DocumentItem: FC = (props) => {\n const {\n onDocumentRemove,\n document,\n isShowApprovalState,\n canDelete,\n errorMessage,\n isDeleteConfirmationRequired,\n uploadProgress,\n } = props;\n\n const [confirmOpened, setConfirmOpened] = useState(false);\n const { getTestIdProps } = useTestId();\n\n const confirmDelete = () => setConfirmOpened(true);\n\n const confirmCanceled = () => setConfirmOpened(false);\n\n const removeDocument = () => {\n if (onDocumentRemove && document.documentId) {\n onDocumentRemove(document.documentId);\n }\n };\n\n const deleteDocument = () => {\n if (onDocumentRemove) {\n onDocumentRemove(document.documentId);\n }\n\n setConfirmOpened(false);\n };\n\n const getDeleteButton = () => {\n // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions -- can be falsy\n const deleteAction = (errorMessage ?? !isDeleteConfirmationRequired) ? removeDocument : confirmDelete;\n\n if (canDelete ?? errorMessage) {\n return (\n \n );\n }\n\n return null;\n };\n\n const getProgressBar = () => {\n if (uploadProgress) {\n return (\n \n );\n }\n\n return null;\n };\n\n const getThumb = () => {\n const { fileName, documentId }: IDocumentsInfo = document;\n if (fileName && documentId) {\n return (\n \n );\n }\n\n return null;\n };\n\n const getError = () => {\n if (errorMessage) {\n return (\n \n \n \n );\n }\n\n return null;\n };\n\n return (\n \n \n \n {getThumb()}\n \n \n \n {getError()}\n {getDeleteButton()}\n \n \n {getProgressBar()}\n \n \n \n \n \n \n );\n};\n","import type { IDocumentItemProps, IDocumentsInfo, IDocumentsInfoStoreData } from '../../interfaces';\nimport { DocumentItem } from '../DocumentItem';\n\nconst mapToDocumentItemProps = (\n documentStoreData: IDocumentsInfoStoreData,\n canDelete: boolean,\n isShowApprovalState: boolean,\n deleteConfirmationRequired: boolean,\n removeDocument?: (documentId: number) => void,\n): IDocumentItemProps => {\n const document: IDocumentsInfo = {\n approval: documentStoreData.approval,\n documentId: documentStoreData.documentId,\n fileName: documentStoreData.fileName ?? '',\n fileSize: documentStoreData.fileSize,\n };\n\n return {\n document,\n canDelete,\n isShowApprovalState,\n onDocumentRemove: removeDocument,\n isDeleteConfirmationRequired: deleteConfirmationRequired || false,\n };\n};\n\nconst getFilesInProgress = (filesInProgress: IDocumentItemProps[], removeFile?: (fileKey: number) => void) => {\n const filesItems = filesInProgress.map((document) => ({\n ...document,\n onDocumentRemove: removeFile,\n }));\n\n return filesItems;\n};\n\nconst isDocumentPending = (document: IDocumentsInfoStoreData): boolean =>\n !document.approval || document.approval.approvalState === 'Pending';\n\nconst renderDocumentItem = (documentProps: IDocumentItemProps, key: number) => (\n \n);\n\nexport { mapToDocumentItemProps, getFilesInProgress, isDocumentPending, renderDocumentItem };\n","import { ArrowDownThin, HelpCircle } from '@ori-ui/icons';\nimport { styled, CircularProgress, Typography } from '@ori-ui/mui';\n\nexport const RootContainer = styled('div')(({ theme }) => ({\n position: 'relative',\n width: '100%',\n}));\n\nexport const StyledTitle = styled(Typography)(({ theme }) => ({\n marginLeft: theme.spacing(1),\n}));\n\nexport const StyledRequiredDocument = styled('div')(({ theme }) => ({\n color: theme.palette.error.dark,\n}));\n\nexport const StyledDivHeader = styled('div')(({ theme }) => ({\n display: 'flex',\n alignItems: 'flex-end',\n justifyContent: 'space-between',\n marginTop: theme.spacing(6),\n}));\n\nexport const StyledHelpCircle = styled(HelpCircle)(({ theme }) => ({\n marginRight: theme.spacing(3),\n color: theme.palette.grey[300],\n fontSize: '29px',\n}));\n\nexport const StyledLabel = styled('span')(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-start',\n}));\n\nexport const StyledList = styled('ul')(({ theme }) => ({\n margin: 0,\n padding: 0,\n listStyle: 'none',\n}));\n\nexport const StyledListPending = styled('ul')(({ theme }) => ({\n margin: 0,\n padding: 0,\n listStyle: 'none',\n position: 'relative',\n zIndex: 2,\n overflow: 'hidden',\n borderRadius: '5px',\n boxShadow: '0 0 7px 0 rgba(0, 0, 0, 0.3)',\n}));\n\nexport const StyledDivWrapper = styled('div')<{ ownerState: { hasDocuments?: boolean } }>(\n ({ theme, ownerState: { hasDocuments = false } }) => ({\n marginBottom: hasDocuments ? theme.spacing(4) : theme.spacing(0),\n position: 'relative',\n }),\n);\n\nexport const StyledDivUploader = styled('div')(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n paddingBottom: theme.spacing(4),\n}));\n\nexport const StyledDivHistory = styled('div')(({ theme }) => ({\n borderTop: `1px solid ${theme.palette.grey[200]}`,\n}));\n\nexport const StyledExpanedIcon = styled(ArrowDownThin)(({ theme }) => ({\n flexDirection: 'row-reverse',\n padding: '5px 10px',\n transition: 'transform 0.3s ease-out',\n fontSize: '22px',\n lineHeight: '23px',\n margin: '0 5px',\n cursor: 'pointer',\n}));\n\nexport const StyledDivExpander = styled('div')(({ theme }) => ({\n borderBottom: `1px solid ${theme.palette.grey[200]}`,\n}));\n\nexport const StyledDivFileInput = styled('div')(({ theme }) => ({\n display: 'flex',\n width: '100%',\n '& > form': {\n width: '100%',\n minWidth: '120px',\n },\n}));\n\nexport const StyledProgress = styled(CircularProgress)(({ theme }) => ({\n marginRight: theme.spacing(2),\n}));\n\nexport const StyledDivBoxExpandHistory = styled('div')(({ theme }) => ({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n cursor: 'pointer',\n fontSize: '14px',\n transition: 'all 0.3s ease-out',\n '&:hover': {\n color: theme.palette.primary.main,\n },\n}));\n","import type { FC } from 'react';\n\nimport { Localization } from '../../Localization';\nimport { defaultTranslations } from '../../constants/defaultTranslations_simplified-registration-BrandPartner';\nimport type { IDocumentItemProps, IDocumentsInfo2, IDocumentsInfoStoreData } from '../../interfaces';\nimport { TranslationKey } from '../../models';\nimport { DocumentItem } from '../DocumentItem';\nimport {\n StyledDivBoxExpandHistory,\n StyledDivExpander,\n StyledDivHistory,\n StyledExpanedIcon,\n StyledList,\n} from './DocumentStyledComponents';\n\ninterface IDocumentHistoryProps {\n temporaryDocument: boolean;\n historyExpanded: boolean;\n documentIds?: number[];\n documentTypeId: number;\n deleteConfirmationRequired: boolean;\n editableDocument?: boolean;\n histroyDocumentsInfoData?: IDocumentsInfo2[];\n removeDocument?: (documentId: number) => void;\n handleToggleClick: () => void;\n documentPending: (document: IDocumentsInfoStoreData) => boolean;\n mapToDocumentItemProps: (\n documentStoreData: IDocumentsInfoStoreData,\n canDelete: boolean,\n isShowApprovalState: boolean,\n deleteConfirmationRequired: boolean,\n removeDocument?: (documentId: number) => void,\n ) => IDocumentItemProps;\n}\n\nconst renderDocumentItem = (documentProps: IDocumentItemProps, key: number) => (\n \n);\n\nexport const DocumentHistory: FC = (props) => {\n const {\n temporaryDocument,\n historyExpanded,\n documentIds,\n documentTypeId,\n deleteConfirmationRequired,\n histroyDocumentsInfoData,\n handleToggleClick,\n documentPending,\n mapToDocumentItemProps,\n removeDocument,\n } = props;\n\n const getInfoByType = (typeId?: number, includeTemporary?: boolean) =>\n histroyDocumentsInfoData\n ?.filter((info) => {\n const isTemporary = includeTemporary ?? false;\n\n return info.documentTypeId === typeId && (!info.isTemporary || isTemporary);\n })\n .sort((a, b) => {\n if (a.createdDate.getTime() && b.createdDate.getTime()) {\n return a.createdDate.getTime() - b.createdDate.getTime();\n }\n\n return 0;\n }) as IDocumentsInfoStoreData[];\n\n const getHistoryDocuments = (): IDocumentItemProps[] => {\n if (!documentIds?.length) {\n return [];\n }\n\n const documentItems: IDocumentItemProps[] = getInfoByType(documentTypeId, temporaryDocument)\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- we need this condition\n ?.filter((document) => documentIds.includes(document.documentId) && !documentPending(document))\n .map((document) => mapToDocumentItemProps(document, false, true, deleteConfirmationRequired, removeDocument));\n\n return documentItems;\n };\n\n const renderHistory = () => {\n const documents = getHistoryDocuments();\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- is not alway truthy we need this condition\n const existingDocuments = documents && documents.length > 0;\n if (!existingDocuments) {\n return null;\n }\n\n return (\n \n \n {documents.map(renderDocumentItem)}\n \n handleToggleClick()}>\n \n \n \n \n );\n };\n\n const documentsHistory = renderHistory();\n\n return {documentsHistory};\n};\n","import { CheckHeavy } from '@ori-ui/icons';\nimport useTestId from '@ori/testid-generator';\nimport type { FC } from 'react';\n\nimport { Localization } from '../../Localization';\nimport { defaultTranslations } from '../../constants/defaultTranslations_simplified-registration-BrandPartner';\nimport { TranslationKey } from '../../models';\nimport { StyledProgress } from './DocumentStyledComponents';\n\ninterface IDocumentLoadingProgressProps {\n uploading: boolean;\n uploadFinished: boolean;\n}\n\nconst classes = {\n uploadProgress: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-end',\n fontSize: '16px',\n fontWeight: 'bold',\n lineHeight: '23px',\n },\n uploadProgressDone: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-end',\n fontSize: '16px',\n fontWeight: 'bold',\n lineHeight: '23px',\n '&::before': {\n margin: '-4px 8px 0 10px',\n fontSize: '22px',\n lineHeight: '22px',\n },\n },\n};\n\nexport const DocumentLoadingProgress: FC = (props) => {\n const { uploading, uploadFinished } = props;\n const { getTestIdProps } = useTestId();\n\n const renderLoadingProgress = () => {\n const progressSize = 16;\n const textUploading = (\n \n );\n const textDone = (\n \n );\n const progress = (\n \n );\n\n return (\n \n {uploading ? progress : null}\n {uploadFinished ? textDone : textUploading}\n \n );\n };\n\n const documentLoadingProgress = uploading || (uploadFinished && renderLoadingProgress());\n\n return {documentLoadingProgress}
;\n};\n","import type {\n GlobalCustomerRegistrationsRegistrationLegalDetailsDto,\n GlobalCustomersDocumentTypeDto,\n} from '@ori/global-api-client-react';\nimport type { StaticCustomersMetadataIdentityCardDocumentPropertyDto } from '@ori/static-api-client-react';\nimport type { FC } from 'react';\nimport { useState } from 'react';\nimport { useFormContext } from 'react-hook-form';\n\nimport { Localization } from '../../Localization';\nimport { defaultTranslations } from '../../constants/defaultTranslations_simplified-registration-BrandPartner';\nimport type { IDocumentItemProps, IDocumentsInfoStoreData } from '../../interfaces';\nimport { TranslationKey } from '../../models';\nimport { useCustomerDocumentsInfos } from '../../models/api';\nimport { DatePickerField, SelectFormFieldByConfig, TextFormFieldByConfig } from '../FieldsByConfig';\nimport type { IFileUploadResult, IUploaderProps, IUploadResult } from '../Uploader';\nimport { Uploader } from '../Uploader';\nimport { getFilesInProgress, isDocumentPending, mapToDocumentItemProps, renderDocumentItem } from './DocumentActions';\nimport { DocumentHistory } from './DocumentHistory';\nimport { DocumentLoadingProgress } from './DocumentLoadingProgress';\nimport { StyledDivFileInput, StyledDivUploader, StyledDivWrapper, StyledListPending } from './DocumentStyledComponents';\n\ninterface IDocumentContentProps {\n documentTypeId: number;\n documentIds: number[];\n deleteConfirmationRequired?: boolean;\n editableDocument?: boolean;\n handleDocumentsChange?: (documentIds: number[]) => void;\n documentType?: GlobalCustomersDocumentTypeDto;\n documentInpuName: string;\n configDocument?: StaticCustomersMetadataIdentityCardDocumentPropertyDto;\n documentIsRequired: boolean;\n}\n\nexport const DocumentContent: FC = (props) => {\n const {\n documentIds,\n documentTypeId,\n deleteConfirmationRequired,\n documentType,\n editableDocument,\n documentInpuName,\n configDocument,\n documentIsRequired,\n handleDocumentsChange,\n } = props;\n\n const isTemporaryDocument = true;\n const hasDocuments = documentIds.length > 0;\n\n const [isHistoryExpanded, setIsHistoryExpanded] = useState(false);\n const [isUploading, setIsUploading] = useState(false);\n const [isUploadFinished, setIsUploadFinished] = useState(false);\n const [filesInProgress, setFilesInProgress] = useState([]);\n const [fetchKey, setFetchKey] = useState('');\n\n const { watch } = useFormContext();\n const values = watch();\n\n const { data: documentsInfoData } = useCustomerDocumentsInfos(fetchKey);\n\n const isDeleteConfirmationRequired = deleteConfirmationRequired ?? false;\n\n const setDefaultState = () => {\n setIsHistoryExpanded(false);\n setIsUploading(false);\n setIsUploadFinished(false);\n };\n\n const removeFile = (fileKey: number) => {\n setDefaultState();\n setFilesInProgress((previousState) =>\n previousState.filter((documentData) => documentData.document.documentId !== fileKey),\n );\n };\n\n const fileUploadFinished = (fileUploadResult: IFileUploadResult) => {\n const { isSuccess, fileKey, message }: IFileUploadResult = fileUploadResult;\n\n if (!isSuccess && fileKey < 0 && Boolean(message)) {\n setDefaultState();\n setFilesInProgress((previousState) =>\n previousState.map((documentData) => {\n const copyDocumentData = { ...documentData };\n if (copyDocumentData.document.documentId === fileKey) {\n copyDocumentData.errorMessage = message;\n }\n\n return copyDocumentData;\n }),\n );\n }\n };\n\n const uploadProgress = (progress: number, fileKey: number) => {\n setDefaultState();\n setFilesInProgress((previousState) =>\n previousState.map((documentData) => {\n const copyDocumentData = { ...documentData };\n if (copyDocumentData.document.documentId === fileKey) {\n copyDocumentData.uploadProgress = progress;\n }\n\n return copyDocumentData;\n }),\n );\n };\n\n const uploadStart = (files: FileList) => {\n const negativeOne = -1;\n // eslint-disable-next-line unicorn/prefer-spread -- we want this writing\n const uploadFilesInProgress: IDocumentItemProps[] = Array.from(files).map((file, key) => ({\n document: {\n documentId: (key + 1) * negativeOne,\n fileName: file.name,\n fileSize: file.size,\n },\n isDeleteConfirmationRequired: false,\n }));\n\n setFilesInProgress(uploadFilesInProgress);\n setIsUploading(true);\n };\n\n const showUploadFinishedMessage = () => {\n setIsUploadFinished(true);\n setIsUploading(false);\n\n const messageHideTimeout = 2000;\n setTimeout(() => {\n setIsUploadFinished(false);\n setIsUploading(false);\n }, messageHideTimeout);\n };\n\n const triggerDocumentsChange = (propertyDocumentIds: number[]) => {\n if (handleDocumentsChange) {\n handleDocumentsChange(propertyDocumentIds);\n }\n };\n\n const uploadFinished = (result: IUploadResult) => {\n showUploadFinishedMessage();\n setFetchKey(Date.now().toString());\n const uploadedDocuments = result.uploadedFiles.filter((d) => d.documentId && d.documentId > 0 && d.isSuccess);\n\n if (uploadedDocuments.length === 0) {\n return;\n }\n const uploadedDocumentIds = uploadedDocuments.map((d) => d.documentId ?? 0);\n const correctDocumentIds = documentIds.length > 0 ? documentIds : [];\n const newDocumentIds = documentType?.allowMultipleDocuments\n ? [...correctDocumentIds, ...uploadedDocumentIds]\n : uploadedDocumentIds.slice(0, 1);\n\n triggerDocumentsChange(newDocumentIds);\n\n uploadedDocuments.forEach((d) => removeFile(d.fileKey));\n };\n\n const removeDocument = (documentId: number) => {\n const newDocuments = documentIds.filter((id) => id !== documentId);\n\n triggerDocumentsChange(newDocuments);\n };\n\n const getInfoByType = (typeId?: number, includeTemporary?: boolean) =>\n documentsInfoData\n ?.filter((info) => {\n const isTemporary = includeTemporary ?? false;\n\n return info.documentTypeId === typeId && (!info.isTemporary || isTemporary);\n })\n .sort((a, b) => {\n if (a.createdDate.getTime() && b.createdDate.getTime()) {\n return a.createdDate.getTime() - b.createdDate.getTime();\n }\n\n return 0;\n }) as IDocumentsInfoStoreData[];\n\n const getDocuments = () => {\n if (documentIds.length === 0) {\n return [];\n }\n const items = documentsInfoData ? getInfoByType(documentTypeId, isTemporaryDocument) : [];\n const documentItems: IDocumentItemProps[] = items\n .filter((document) => documentIds.includes(document.documentId) && isDocumentPending(document))\n .map((document) =>\n mapToDocumentItemProps(document, Boolean(editableDocument), true, isDeleteConfirmationRequired, removeDocument),\n );\n\n return documentItems;\n };\n\n const renderDocuments = () => {\n const getfilesInProgress: IDocumentItemProps[] = getFilesInProgress(filesInProgress, removeFile);\n const documents: IDocumentItemProps[] = getDocuments();\n\n const documentsToRender = [...documents, ...getfilesInProgress];\n\n if (documentsToRender.length > 0) {\n return {documentsToRender.map(renderDocumentItem)};\n }\n\n return null;\n };\n\n const handleToggleClick = () => {\n setDefaultState();\n setIsHistoryExpanded(!isHistoryExpanded);\n };\n\n let fileInputProps: IUploaderProps = {\n isTemporary: isTemporaryDocument,\n handleFileUploaded: fileUploadFinished,\n handleUploadFinished: uploadFinished,\n handleUploadStart: uploadStart,\n handleFileUploadProgress: uploadProgress,\n inputName: documentInpuName,\n isRequired: documentIsRequired,\n };\n\n if (documentType) {\n fileInputProps = {\n ...fileInputProps,\n accept: documentType.supportedMimeTypes,\n documentTypeId: documentType.documentTypeId,\n maxFileSize: documentType.maxDataSize,\n isMultiple: documentType.allowMultipleDocuments,\n };\n }\n\n const uploaderDocument = () =>\n editableDocument ? (\n \n \n \n \n \n ) : null;\n\n const documentCardTypeField = (\n \n }\n title={\n \n }\n placeholder={\n \n }\n {...configDocument?.cardType}\n />\n );\n\n const documentCardNumberField = (\n \n }\n {...configDocument?.cardNumber}\n />\n );\n\n const disabledForIdentityCardTypes = configDocument?.expiration?.disabledForIdentityCardTypes;\n\n const disableExpirationField = disabledForIdentityCardTypes?.find(\n (cardType: string) => cardType === values.identityCard?.cardType,\n );\n\n const expirationDocumentField = !disableExpirationField && (\n \n }\n invalidMsg={TranslationKey.validationDateRegex}\n {...configDocument?.expiration}\n />\n );\n\n const documents = renderDocuments();\n const uploader = uploaderDocument();\n\n return (\n <>\n {documentCardTypeField}\n {documentCardNumberField}\n {expirationDocumentField}\n \n {uploader}\n \n {documents}\n {documentIds.length > 0 && (\n \n )}\n \n \n );\n};\n","import { Tooltip } from '@ori-ui/mui';\nimport type { GlobalCustomersDocumentTypeDto } from '@ori/global-api-client-react';\nimport useTestId from '@ori/testid-generator';\nimport type { ReactElement, FC } from 'react';\n\nimport { StyledDivHeader, StyledHelpCircle, StyledLabel, StyledRequiredDocument } from './DocumentStyledComponents';\n\ninterface IDocumentHeaderProps {\n label?: ReactElement;\n documentType?: GlobalCustomersDocumentTypeDto;\n requiredDocument: boolean;\n}\n\nexport const DocumentHeader: FC = (props) => {\n const { documentType, label, requiredDocument } = props;\n const { getTestIdProps } = useTestId();\n\n const description = documentType?.description && (\n \n \n \n );\n\n return (\n \n \n {label}\n {requiredDocument ? * : null}\n {description}\n \n \n );\n};\n","import { Typography } from '@ori-ui/mui';\nimport type { GlobalCustomersDocumentTypeDto } from '@ori/global-api-client-react';\nimport type { StaticCustomersMetadataIdentityCardDocumentPropertyDto } from '@ori/static-api-client-react';\nimport type { ReactElement, FC } from 'react';\n\nimport { useCustomerDocumentsInfos, useDocumentTypes } from '../../models/api';\nimport { Loading } from '../Loading';\nimport { DocumentContent } from './DocumentContent';\nimport { DocumentHeader } from './DocumentHeader';\nimport { RootContainer } from './DocumentStyledComponents';\n\ninterface IDocumentProps {\n documentTypeId: number;\n documentLabel: ReactElement;\n documentInfoText: ReactElement;\n documentIds: number[];\n handleDocumentsChange?: (documentIds: number[]) => void;\n isDeleteConfirmationRequired?: boolean;\n editableDocument?: boolean;\n config?: StaticCustomersMetadataIdentityCardDocumentPropertyDto;\n name: string;\n isRequired?: boolean;\n}\n\nexport const Document: FC = (props) => {\n const {\n documentIds,\n documentTypeId,\n isDeleteConfirmationRequired,\n editableDocument,\n name,\n config,\n isRequired,\n documentLabel,\n documentInfoText,\n handleDocumentsChange,\n } = props;\n\n const { data: documentsTypeData } = useDocumentTypes();\n const { data: documentsInfoData } = useCustomerDocumentsInfos();\n\n const getTypeById = (documentTypeIdProperty: number): GlobalCustomersDocumentTypeDto | undefined =>\n documentsTypeData?.find((type) => type.documentTypeId === documentTypeIdProperty);\n\n const isLoading = !documentsTypeData || !documentsInfoData;\n\n const documentType = getTypeById(documentTypeId);\n\n return (\n \n \n \n {documentInfoText}\n \n \n {isLoading ? : null}\n \n );\n};\n","import { Grid, styled, Typography } from '@ori-ui/mui';\nimport type {\n GlobalCustomerRegistrationsRegistrationLegalDetailsDto,\n GlobalCustomersCustomerDocumentDto,\n GlobalCustomersCustomerDocumentsDto,\n} from '@ori/global-api-client-react';\nimport type { StaticCustomerRegistrationsMetadataRegistrationLegalDetailsMetadataDto } from '@ori/static-api-client-react';\nimport useTestId from '@ori/testid-generator';\nimport type { FC, ReactElement } from 'react';\nimport { useState } from 'react';\nimport { useFormContext } from 'react-hook-form';\n\nimport { Localization } from '../../../Localization';\nimport { defaultTranslations } from '../../../constants/defaultTranslations_simplified-registration-BrandPartner';\nimport type { ILocalizationKey } from '../../../interfaces';\nimport { TranslationKey } from '../../../models';\nimport { Document } from '../../Document';\n\nconst RootContainer = styled('div')(({ theme }) => ({\n position: 'relative',\n}));\n\nexport interface ILegalDocumentsProps {\n documentsConfig?: StaticCustomerRegistrationsMetadataRegistrationLegalDetailsMetadataDto;\n}\n\nexport const LegalDocuments: FC = (props) => {\n const { documentsConfig } = props;\n const [localDocuments, setLocalDocuments] = useState();\n\n const { getTestIdProps } = useTestId();\n\n const { setValue, watch, trigger } = useFormContext();\n\n const values = watch();\n\n const getDocumentLabel = (localization: ILocalizationKey) => (\n \n \n \n );\n\n const updateIdentityCard = (documentIds: number[]) => {\n const documents: GlobalCustomersCustomerDocumentDto[] = documentIds.map((id) => ({\n documentId: id,\n }));\n\n setLocalDocuments({ ...documents, documentsCollection: documents });\n setValue('identityCard.documentsCollection', documents as never);\n trigger('identityCard.documentsCollection');\n };\n\n const updateAdditionalIdentityCard = (documentIds: number[]) => {\n const documents: GlobalCustomersCustomerDocumentDto[] = documentIds.map((id) => ({\n documentId: id,\n }));\n\n setLocalDocuments({ ...documents, documentsCollection: documents });\n setValue('additionalIdentityCard.documentsCollection', documents as never);\n trigger('additionalIdentityCard.documentsCollection');\n };\n\n const getDocumentIds = (documents?: GlobalCustomersCustomerDocumentsDto): number[] => {\n if (!documents) {\n return [];\n }\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- we need this condition\n return documents.documentsCollection?.map((d) => d.documentId);\n };\n\n const renderIdentityCardDocument = (): ReactElement | null => {\n const config = documentsConfig?.identityCard;\n const isAvailable = config?.isAvailable ?? false;\n const isEditable = config?.isEditable ?? false;\n\n const idCardDocumentInfoText = (\n \n );\n\n if (!isAvailable) {\n return null;\n }\n\n const documentTypeId = config?.documentTypeId ?? 0;\n const correctDocuments = values.identityCard ?? localDocuments;\n\n return (\n \n );\n };\n\n const renderAdditionalIdentityCardDocument = (): ReactElement | null => {\n const config = documentsConfig?.additionalIdentityCard;\n const isAvailable = config?.isAvailable ?? false;\n const isEditable = config?.isEditable ?? false;\n\n const additionalDocumentInfoText = (\n \n );\n\n if (!isAvailable) {\n return null;\n }\n\n const documentTypeId = config?.documentTypeId ?? 0;\n const correctDocuments = values.additionalIdentityCard ?? localDocuments;\n\n return (\n \n );\n };\n\n const idCard = renderIdentityCardDocument();\n const additionalIdCard = renderAdditionalIdentityCardDocument();\n\n const documentsAvailableContent = (\n \n {idCard}\n {additionalIdCard}\n \n );\n\n const documentsContent =\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing --- we want logical operator\n documentsConfig?.identityCard?.isAvailable || documentsConfig?.additionalIdentityCard?.isAvailable\n ? documentsAvailableContent\n : null;\n\n return {documentsContent};\n};\n","import { Typography, Grid } from '@ori-ui/mui';\nimport type { GlobalCustomerRegistrationsRegistrationLegalDetailsDto } from '@ori/global-api-client-react';\nimport type {\n StaticCustomerRegistrationsMetadataRegistrationLegalDetailsMetadataDto,\n StaticCustomersMetadataApprovalPropertyDto,\n} from '@ori/static-api-client-react';\nimport useTestId from '@ori/testid-generator';\nimport type { FC } from 'react';\nimport { useForm, FormProvider } from 'react-hook-form';\n\nimport { ContentKeys, Localization } from '../../../Localization';\nimport { defaultTranslations } from '../../../constants/defaultTranslations_simplified-registration-BrandPartner';\nimport {\n useStepperData,\n useVirtualPageAnalyticsData,\n useFormError,\n useConfiguration,\n GetContent,\n} from '../../../contexts';\nimport { TranslationKey } from '../../../models';\nimport { CheckboxFormFieldByConfig } from '../../FieldsByConfig';\nimport { FormValidationSummary } from '../../FormValidationSummary';\nimport { TermsConditionsCheckbox } from '../../TermsConditionsCheckbox';\nimport { LegalDetailApprovals } from './LegalDetailApprovals';\nimport { LegalDocuments } from './LegalDocuments';\nimport {\n StyledForm,\n BackButtton,\n ConditionTitle,\n ConditionsInfoWrapper,\n DocumentInfoWrapper,\n StyledArrowIcon,\n SubmitButtton,\n StyledLink,\n} from './StyledComponentsLegalForm';\n\ninterface ILegalDetailsFormProps {\n initialData?: GlobalCustomerRegistrationsRegistrationLegalDetailsDto;\n config?: StaticCustomerRegistrationsMetadataRegistrationLegalDetailsMetadataDto;\n isSuccessSubmit: boolean;\n onSubmitForm: (data: GlobalCustomerRegistrationsRegistrationLegalDetailsDto) => void;\n}\n\nexport const LegalDetailsForm: FC = (props) => {\n const { initialData, config, isSuccessSubmit, onSubmitForm } = props;\n const {\n context: { stepperData },\n } = useStepperData();\n const { activeStep, setActiveStep, stepsOrder } = stepperData;\n\n const { getTestIdProps } = useTestId();\n\n const { customerServiceUrl } = useConfiguration();\n\n const methods = useForm({\n defaultValues: initialData,\n reValidateMode: 'onChange',\n shouldFocusError: true,\n mode: 'all',\n });\n\n const { watch, formState } = methods;\n const { isValid, isSubmitting } = formState;\n\n const values = watch();\n\n const {\n context: { errorData },\n } = useFormError();\n const { customErrors } = errorData;\n\n const identityErr = Object.keys(values.identityCard ?? {}).map((value) => `identityCard.${value}`);\n const prevValues = Object.keys(values);\n const identityValues = identityErr;\n const newValues = [...prevValues, ...identityValues];\n\n const invalidCodeErrors = customErrors?.filter(\n (er) => !newValues.map((val) => val.toLowerCase()).includes(er.fieldName?.toLowerCase() ?? ''),\n );\n\n const availableApprovals =\n config?.approvals &&\n Object.values(config.approvals).filter(\n (approval: StaticCustomersMetadataApprovalPropertyDto) => approval.isAvailable,\n );\n const {\n virtualPageAnalyticsContext: { virtualPageAnalyticsData },\n } = useVirtualPageAnalyticsData();\n const { setPreviousStep } = virtualPageAnalyticsData;\n\n const handleBack = () => {\n setPreviousStep(stepsOrder[activeStep]);\n setActiveStep(activeStep - 1);\n };\n\n const isAnyAprrovalAvailable = Boolean(availableApprovals && availableApprovals.length > 0);\n\n const isAnyDocumentAvailable =\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- we need logical operator ||\n config?.identityCard?.isAvailable || config?.additionalIdentityCard?.isAvailable;\n\n return (\n \n \n \n {isAnyDocumentAvailable ? (\n \n \n \n \n \n \n \n \n ) : null}\n \n \n \n \n \n \n \n \n \n \n \n {isAnyAprrovalAvailable ? (\n \n ) : null}\n \n \n \n \n ),\n LegalDocument2_Link: (\n \n {' '}\n \n ),\n LegalDocument3_Link: (\n \n \n \n ),\n LegalDocument4_Link: (\n \n \n \n ),\n LegalDocument5_Link: (\n \n \n \n ),\n LegalDocument6_Link: (\n \n \n \n ),\n LegalDocument7_Link: (\n \n \n \n ),\n LegalDocument8_Link: (\n \n \n \n ),\n }}\n />\n {config?.confirmation1?.validation?.isMandatory ? ' *' : null}\n \n }\n value={values.confirmation1}\n {...config?.confirmation1}\n />\n \n \n \n \n ),\n LegalDocument2_Link: (\n \n \n \n ),\n LegalDocument3_Link: (\n \n \n \n ),\n LegalDocument4_Link: (\n \n \n \n ),\n LegalDocument5_Link: (\n \n \n \n ),\n LegalDocument6_Link: (\n \n \n \n ),\n LegalDocument7_Link: (\n \n \n \n ),\n LegalDocument8_Link: (\n \n \n \n ),\n }}\n />\n {config?.confirmation2?.validation?.isMandatory ? ' *' : null}\n \n }\n value={values.confirmation2}\n {...config?.confirmation2}\n />\n \n \n \n \n \n \n handleBack()}\n >\n \n \n \n \n \n );\n};\n","import * as UserRegisteredEvent from '@ori-events/user-registered';\nimport { Typography, styled } from '@ori-ui/mui';\nimport { Placement } from '@ori/analytics-data';\nimport {\n useApiClient,\n updateCustomerRegistration,\n updateCustomerRegistrationLegalDetails,\n getCustomerRegistrationAnalytics,\n HttpStatusCodes,\n} from '@ori/global-api-client-react';\nimport type {\n AxiosError,\n GlobalCustomerRegistrationsAnalyticsDto,\n GlobalCustomerRegistrationsRegistrationLegalDetailsDto,\n} from '@ori/global-api-client-react';\nimport type { FC } from 'react';\nimport { useState, useEffect } from 'react';\nimport type { SubmitHandler } from 'react-hook-form';\n\nimport { Localization } from '../../Localization';\nimport { defaultTranslations } from '../../constants/defaultTranslations_simplified-registration-BrandPartner';\nimport {\n useConfiguration,\n useFormError,\n useNotificationData,\n useRegistrationStatus,\n useVirtualPageAnalyticsData,\n} from '../../contexts';\nimport type { IErrors } from '../../interfaces';\nimport { MessageType } from '../../interfaces';\nimport { FetchResult, TranslationKey } from '../../models';\nimport { useLegalData, useLegalMetadata } from '../../models/api';\nimport { applyNegative, scrollTopFunctionHelper, virtualPageEventDispatch } from '../../utils';\nimport { BasicSkeleton } from '../BasicSkeleton';\nimport { LegalDetailsForm } from '../Forms';\nimport { StyledTitle } from './StepsStyledComponents';\n\nconst RootContainer = styled('div')(({ theme }) => ({\n position: 'relative',\n width: '100%',\n}));\n\nconst ContentWrapper = styled('div')(({ theme }) => ({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n flexDirection: 'column',\n}));\n\nconst handleUserRegisteredEvent = (analyticsData: GlobalCustomerRegistrationsAnalyticsDto) => {\n const { consultantNumber, customerTypeId, registrationChannel, sponsorNumber, visitorSegment } = analyticsData;\n\n // workaround: date object contains client's timezone althrougt API returns only date portion\n const signUpDate = analyticsData.signUpDate ?? new Date();\n const signUpDateOffset = signUpDate.getTimezoneOffset() * 60000;\n const signUpDateWithoutOffset = new Date(signUpDate.getTime() - signUpDateOffset);\n const registerEventData: UserRegisteredEvent.Data = {\n registeredUserId: consultantNumber.toString(),\n customerTypeId: customerTypeId.toString(),\n registrationChannel: registrationChannel ?? '',\n registrationType: 'Self',\n sponsorNumber: sponsorNumber?.toString() ?? '',\n signUpDate: signUpDateWithoutOffset.toISOString(),\n visitorSegment: visitorSegment.toString(),\n placement: Placement.JoinUs,\n };\n window.dispatchEvent(\n new CustomEvent(UserRegisteredEvent.Name, {\n detail: registerEventData,\n }),\n );\n};\n\nexport const LegalStep: FC = () => {\n const {\n context: { notificationData },\n } = useNotificationData();\n const { setNotificationData } = notificationData;\n\n const { setFinished } = useRegistrationStatus();\n\n const [submitSuccess, setSubmitSuccess] = useState(false);\n\n const { registrationId } = useConfiguration();\n\n const { data: legalConfig } = useLegalMetadata();\n\n const isNegativeApprovals = Boolean(legalConfig?.approvals?.shared?.displayAsNegative);\n\n // initial data\n const { data: legalInitialData } = useLegalData(isNegativeApprovals);\n\n const {\n context: { errorData },\n } = useFormError();\n const { setErrorData, customErrors } = errorData;\n\n const api = useApiClient();\n\n const {\n virtualPageAnalyticsContext: { virtualPageAnalyticsData },\n } = useVirtualPageAnalyticsData();\n const { setPreviousStep, previousStep } = virtualPageAnalyticsData;\n\n const getCorrectSubmitData = (data: GlobalCustomerRegistrationsRegistrationLegalDetailsDto) => {\n let correctData = data;\n\n const emptyIDCard = {\n documentsCollection: [],\n };\n\n if (!data.identityCard?.documentsCollection) {\n correctData = { ...data, identityCard: { ...data.identityCard, ...emptyIDCard } };\n }\n\n if (!data.additionalIdentityCard?.documentsCollection) {\n correctData = { ...correctData, additionalIdentityCard: emptyIDCard };\n }\n\n return correctData;\n };\n\n const getAnalyticsData = async (): Promise => {\n try {\n const response = await getCustomerRegistrationAnalytics(api, registrationId);\n const result = new FetchResult(response.status);\n if (result.isSuccess()) {\n return response.data;\n }\n } catch (error: unknown) {\n setNotificationData({\n isOpen: true,\n message: (\n \n ),\n type: MessageType.error,\n });\n }\n\n return undefined;\n };\n\n useEffect(() => {\n scrollTopFunctionHelper();\n }, []);\n\n useEffect(() => {\n virtualPageEventDispatch('LegalInformationStep', previousStep, registrationId);\n setPreviousStep('LegalInformationStep');\n // eslint-disable-next-line react-hooks/exhaustive-deps -- virtual page event should be fired exacly once, no need to reevaluate\n }, []);\n\n const handleUpdateRegistration = async () => {\n try {\n const updateResponse = await updateCustomerRegistration(api, registrationId, {\n loginType: 'Email',\n registrationId,\n currentStep: 'SubmitStep',\n });\n const result = new FetchResult(updateResponse.status);\n\n if (result.isSuccess()) {\n setSubmitSuccess(true);\n setFinished(true);\n const analyticsData = await getAnalyticsData();\n if (analyticsData !== undefined) {\n handleUserRegisteredEvent(analyticsData);\n }\n if (customErrors && customErrors.length > 0) {\n setErrorData([]);\n }\n }\n } catch (error: unknown) {\n const errorResponse = error as AxiosError;\n if (errorResponse.response?.status === HttpStatusCodes.status400BadRequest) {\n const { Errors } = errorResponse.response.data as IErrors;\n const submitErrors = Errors?.map((er) => ({\n fieldName: er.PropertyName,\n errorCode: er.Code,\n }));\n if (submitErrors?.length && submitErrors.length > 0) {\n setErrorData(submitErrors);\n } else {\n setErrorData([]);\n }\n } else {\n setNotificationData({\n isOpen: true,\n message: (\n \n ),\n type: MessageType.error,\n });\n }\n }\n };\n\n const onSubmit: SubmitHandler = async (data) => {\n const submitData = getCorrectSubmitData(data);\n const currentSubmitData: GlobalCustomerRegistrationsRegistrationLegalDetailsDto = {\n ...submitData,\n approvals: submitData.approvals && applyNegative(submitData.approvals, isNegativeApprovals),\n };\n try {\n const updateResponseLegal = await updateCustomerRegistrationLegalDetails(api, registrationId, currentSubmitData);\n const result = new FetchResult(updateResponseLegal.status);\n\n if (result.isSuccess()) {\n await handleUpdateRegistration();\n }\n } catch (error: unknown) {\n const errorResponse = error as AxiosError;\n if (errorResponse.response?.status === HttpStatusCodes.status400BadRequest) {\n const { Errors } = errorResponse.response.data as IErrors;\n const submitErrors = Errors?.map((er) => ({\n fieldName: er.PropertyName,\n errorCode: er.Code,\n }));\n if (submitErrors?.length && submitErrors.length > 0) {\n setErrorData(submitErrors);\n } else {\n setErrorData([]);\n }\n } else {\n setNotificationData({\n isOpen: true,\n message: (\n \n ),\n type: MessageType.error,\n });\n }\n }\n };\n\n if (!legalInitialData) {\n return ;\n }\n\n return (\n \n \n \n \n \n \n \n \n\n \n \n \n );\n};\n","import type {\n ApiClient,\n StaticCustomerRegistrationsMetadataRegistrationSponsorDetailsMetadataDto,\n} from '@ori/static-api-client-react';\nimport {\n getTenantCustomerRegistrationsMetadatumSponsorDetailsMetadata,\n useApiClient,\n} from '@ori/static-api-client-react';\nimport useSWR from 'swr';\n\nimport { useConfiguration, useNotificationData } from '../../../contexts';\nimport { useTranslations } from '../../../hooks/useTranslations_simplified-registration-BrandPartner';\nimport { MessageType, type IRegistrationType } from '../../../interfaces';\nimport { FetchResult } from '../../FetchResult';\nimport { TranslationKey } from '../../TranslationKey_simplified-registration-BrandPartner';\n\nasync function fetchSponsorMetadata(api: ApiClient, tenant: string, registrationType: IRegistrationType) {\n const emptySponsorMetadata: StaticCustomerRegistrationsMetadataRegistrationSponsorDetailsMetadataDto = {};\n\n try {\n const response = await getTenantCustomerRegistrationsMetadatumSponsorDetailsMetadata(api, tenant, registrationType);\n\n return new FetchResult(\n response.status,\n response.data,\n );\n } catch (error: unknown) {\n return FetchResult.errorFor(emptySponsorMetadata);\n }\n}\n\nexport const useSponsorMetadata = () => {\n const { tenant, registrationType } = useConfiguration();\n const { formatMessage } = useTranslations();\n const staticApi = useApiClient();\n\n const {\n context: { notificationData },\n } = useNotificationData();\n const { setNotificationData } = notificationData;\n\n const errorMeesage = formatMessage(TranslationKey.cannotGetData);\n\n return useSWR(\n [tenant, registrationType, 'sponsorMetadata'],\n async () => {\n const result = await fetchSponsorMetadata(staticApi, tenant, registrationType);\n if (result.isSuccess() && result.response) {\n return result.response;\n }\n throw new Error('request failed fetch sponsor metadata');\n },\n {\n onError(err?: FetchResult) {\n if (err) {\n setNotificationData({\n isOpen: true,\n message: errorMeesage,\n type: MessageType.error,\n messageId: 'cannotGetData',\n });\n }\n },\n },\n );\n};\n","import {\n getCustomerRegistrationSponsorDetails,\n type ApiClient,\n type GlobalCustomerRegistrationsRegistrationSponsorDetailsDto,\n useApiClient,\n} from '@ori/global-api-client-react';\nimport useSWR from 'swr';\n\nimport { useConfiguration, useNotificationData } from '../../../contexts';\nimport { useTranslations } from '../../../hooks/useTranslations_simplified-registration-BrandPartner';\nimport { MessageType } from '../../../interfaces';\nimport { FetchResult } from '../../FetchResult';\nimport { TranslationKey } from '../../TranslationKey_simplified-registration-BrandPartner';\n\nasync function fetchSponsorData(api: ApiClient, registrationIdParam: string) {\n const emptySponsorData: GlobalCustomerRegistrationsRegistrationSponsorDetailsDto = {};\n\n try {\n const response = await getCustomerRegistrationSponsorDetails(api, registrationIdParam);\n\n return new FetchResult(response.status, response.data);\n } catch (error: unknown) {\n return FetchResult.errorFor(emptySponsorData);\n }\n}\n\nexport const useSponsorData = () => {\n const { registrationId } = useConfiguration();\n const { formatMessage } = useTranslations();\n const api = useApiClient();\n const {\n context: { notificationData },\n } = useNotificationData();\n const { setNotificationData } = notificationData;\n\n const errorMeesage = formatMessage(TranslationKey.cannotGetData);\n\n return useSWR(\n [registrationId, 'sponsorData'],\n async () => {\n const result = await fetchSponsorData(api, registrationId);\n if (result.isSuccess() && result.response) {\n return result.response;\n }\n throw new Error('request failed fetch sponsor data');\n },\n {\n onError(err?: FetchResult) {\n if (err) {\n setNotificationData({\n isOpen: true,\n message: errorMeesage,\n type: MessageType.error,\n messageId: 'cannotGetData',\n });\n }\n },\n },\n );\n};\n","import {\n getCustomerRegistrationSponsorDetailsSponsorInfo,\n type ApiClient,\n type GlobalCustomerRegistrationsRegistrationSponsorInfoDto,\n useApiClient,\n} from '@ori/global-api-client-react';\nimport useSWR from 'swr';\n\nimport { useConfiguration, useNotificationData } from '../../../contexts';\nimport { useTranslations } from '../../../hooks/useTranslations_simplified-registration-BrandPartner';\nimport { MessageType } from '../../../interfaces';\nimport { FetchResult } from '../../FetchResult';\nimport { TranslationKey } from '../../TranslationKey_simplified-registration-BrandPartner';\n\nasync function fetchSponsorInfoData(api: ApiClient, registrationIdParam: string) {\n const emptySponsorInfoData: GlobalCustomerRegistrationsRegistrationSponsorInfoDto = {};\n\n try {\n const response = await getCustomerRegistrationSponsorDetailsSponsorInfo(api, registrationIdParam);\n\n return new FetchResult(response.status, response.data);\n } catch (error: unknown) {\n return FetchResult.errorFor(emptySponsorInfoData);\n }\n}\n\nexport const useSponsorInfoData = (refetchKey?: string) => {\n const { registrationId } = useConfiguration();\n const { formatMessage } = useTranslations();\n const api = useApiClient();\n const {\n context: { notificationData },\n } = useNotificationData();\n const { setNotificationData } = notificationData;\n\n const errorMeesage = formatMessage(TranslationKey.cannotGetData);\n\n return useSWR(\n [registrationId, refetchKey, 'sponsorInfoData'],\n async () => {\n const result = await fetchSponsorInfoData(api, registrationId);\n if (result.isSuccess() && result.response) {\n return result.response;\n }\n throw new Error('request failed fetch sponsor info data');\n },\n {\n onError(err?: FetchResult) {\n if (err) {\n setNotificationData({\n isOpen: true,\n message: errorMeesage,\n type: MessageType.error,\n messageId: 'cannotGetData',\n });\n }\n },\n },\n );\n};\n","import { useToken } from '@ori/auth';\nimport type { AxiosRequestConfig, AxiosResponse } from 'axios';\nimport axios from 'axios';\nimport useSWR from 'swr';\n\nimport { useConfiguration } from '../../../contexts';\n\nconst axiosClient = axios.create();\n\nconst getEncodedImage = (blob: Blob): string => URL.createObjectURL(blob);\n\nexport function useSponsorImage(registrationId: string, profileImageDocumentId?: number | null) {\n const { globalApiUrl, tenant } = useConfiguration();\n const { formattedToken } = useToken();\n const shouldFetch = Boolean(profileImageDocumentId !== null && profileImageDocumentId !== undefined);\n const url = `${globalApiUrl}/customerRegistrations/${registrationId}/sponsorDetails/profileImage`;\n\n const { data: sponsorImage } = useSWR(shouldFetch ? url.toString() : null, async (requestUrl: string) => {\n const headers: AxiosRequestConfig['headers'] = {\n 'x-tenant-context': tenant,\n };\n headers.Authorization = formattedToken;\n const { data } = await axiosClient\n .get(requestUrl, {\n headers,\n responseType: 'blob',\n })\n .then((blob) => blob)\n .catch((error: AxiosResponse) => error);\n\n return data;\n });\n\n return sponsorImage === undefined ? undefined : getEncodedImage(sponsorImage);\n}\n","import { Typography, styled, Button, Avatar } from '@ori-ui/mui';\nimport type { GlobalCustomerRegistrationsRegistrationSponsorInfoDto } from '@ori/global-api-client-react';\nimport useTestId from '@ori/testid-generator';\nimport type { ReactElement, FC } from 'react';\n\nimport { Localization } from '../../../Localization';\nimport { defaultTranslations } from '../../../constants/defaultTranslations_simplified-registration-BrandPartner';\nimport { useConfiguration, useStepperData, useVirtualPageAnalyticsData } from '../../../contexts';\nimport { TranslationKey } from '../../../models';\nimport { removeAfterDash, stringAvatar } from '../../../utils';\n\ninterface ISponsorBoxProps {\n sponsorDetailInfo: GlobalCustomerRegistrationsRegistrationSponsorInfoDto;\n title: ReactElement;\n isVisibleNextButton: boolean;\n sponsorImage?: string;\n}\n\nconst RootContainer = styled('div')(({ theme }) => ({\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n}));\n\nconst StyledAvatar = styled(Avatar)(({ theme }) => ({\n width: '120px',\n height: '120px',\n marginBottom: theme.spacing(2),\n color: theme.palette.text.primary,\n textDecoration: 'none',\n}));\n\nconst StyledNameLabel = styled(Typography)(({ theme }) => ({\n marginBottom: theme.spacing(1),\n}));\n\nconst StyledTitle = styled(Typography)(({ theme }) => ({\n marginBottom: theme.spacing(4),\n fontWeight: 'bold',\n}));\n\nconst NexButtton = styled(Button)(({ theme }) => ({\n minWidth: '330px',\n marginTop: theme.spacing(8),\n}));\n\nexport const SponsorBox: FC = (props) => {\n const { referral } = useConfiguration();\n const { sponsorDetailInfo, title, isVisibleNextButton, sponsorImage } = props;\n const { consultantNumber, fullName } = sponsorDetailInfo;\n\n const internationalPbs = referral?.ReferralType === 'InternationalPbs';\n\n const sponsorName = internationalPbs && referral.InternationalPbsCode ? referral.InternationalPbsCode : fullName;\n\n const avatarName = internationalPbs ? removeAfterDash(sponsorName ?? '') : stringAvatar(sponsorName ?? '');\n\n const {\n context: { stepperData },\n } = useStepperData();\n const { activeStep, setActiveStep, stepsOrder } = stepperData;\n const {\n virtualPageAnalyticsContext: { virtualPageAnalyticsData },\n } = useVirtualPageAnalyticsData();\n const { setPreviousStep } = virtualPageAnalyticsData;\n\n const { getTestIdProps } = useTestId();\n\n const handleNextStep = () => {\n setPreviousStep(stepsOrder[activeStep]);\n setActiveStep(activeStep + 1);\n };\n\n return (\n \n \n {title}\n \n {fullName ? {avatarName} : null}\n \n {sponsorName}\n \n {internationalPbs ? null : (\n \n {consultantNumber}\n \n )}\n\n {isVisibleNextButton ? (\n handleNextStep()}\n {...getTestIdProps('sponsorBox-next-step-btn')}\n >\n \n \n ) : null}\n \n );\n};\n","import { Toggle } from '@ori-ui/components';\nimport { ArrowLeftThin } from '@ori-ui/icons';\nimport {\n Box,\n Button,\n FormControlLabel,\n Grid,\n Radio,\n RadioGroup,\n styled,\n InputLabel,\n Typography,\n Select,\n MenuItem,\n FormControl,\n} from '@ori-ui/mui';\nimport type {\n GlobalCustomerRegistrationsRegistrationSponsorDetailsDto,\n GlobalCustomerRegistrationsRegistrationSponsorInfoDto,\n} from '@ori/global-api-client-react';\nimport type {\n StaticCustomerRegistrationsMetadataRegistrationSponsorDetailsMetadataDto,\n StaticCustomerRegistrationsMetadataRegistrationSponsorDetailsMetadataDtoPreselectedSponsorSelectionMethod,\n} from '@ori/static-api-client-react';\nimport useTestId from '@ori/testid-generator';\nimport type { ChangeEvent, FC } from 'react';\nimport { useEffect, useState } from 'react';\nimport { FormProvider, useForm } from 'react-hook-form';\n\nimport { Localization } from '../../../Localization';\nimport { defaultTranslations } from '../../../constants/defaultTranslations_simplified-registration-BrandPartner';\nimport { useStepperData, useFormError, useVirtualPageAnalyticsData } from '../../../contexts';\nimport { TranslationKey } from '../../../models';\nimport { useAddressFormatMetadata } from '../../../models/api';\nimport { getOptionLabelSingleLine, defaultAddressFormat } from '../../../utils';\nimport { AddressAutocomplete } from '../../AddressAutocomplete';\nimport { TextFormFieldByConfig } from '../../FieldsByConfig';\nimport { FormValidationSummary } from '../../FormValidationSummary';\nimport { SponsorBox } from './SponsorBox';\n\nenum selectBpVariant {\n findSponsor = 'SponsorLocator',\n knowSponsorNumber = 'ManualInput',\n}\n\nconst StyledForm = styled('form')(({ theme }) => ({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n flexDirection: 'column',\n width: '100%',\n marginTop: theme.spacing(8),\n}));\n\nconst SubmitButtton = styled(Button)(({ theme }) => ({\n minWidth: '330px',\n marginTop: theme.spacing(3),\n}));\n\nconst FindButtton = styled(Button)(({ theme }) => ({\n width: '330px',\n maxWidth: '100%',\n height: '35px',\n margin: '0 auto',\n marginBottom: theme.spacing(10),\n}));\n\nconst BackButtton = styled(Button)(({ theme }) => ({\n display: 'flex',\n justifyContent: 'space-between',\n minWidth: '60px',\n marginTop: theme.spacing(2),\n}));\n\nconst StyledArrowIcon = styled(ArrowLeftThin)(({ theme }) => ({\n marginRight: theme.spacing(1),\n}));\n\nconst StyledFormControlLabel = styled(FormControlLabel)(({ theme }) => ({\n alignItems: 'center',\n marginBottom: theme.spacing(3),\n}));\n\nconst AddressAutocompleteWrapper = styled('div')(({ theme }) => ({\n marginBottom: theme.spacing(6),\n}));\n\nconst StyledToggle = styled(Toggle)(({ theme }) => ({\n cursor: 'pointer',\n}));\n\nconst StyledSingleLineLabel = styled(Typography)(({ theme }) => ({\n display: 'flex',\n width: '100%',\n marginBottom: theme.spacing(2),\n marginTop: theme.spacing(5),\n}));\n\ninterface IConnectToBPFormProps {\n initialData?: GlobalCustomerRegistrationsRegistrationSponsorDetailsDto;\n config?: StaticCustomerRegistrationsMetadataRegistrationSponsorDetailsMetadataDto;\n sponsorInfo?: GlobalCustomerRegistrationsRegistrationSponsorInfoDto;\n profileSponsorImage?: string;\n isDefaultAddress: boolean;\n isSuccessSubmit: boolean;\n onSubmitForm: (data: GlobalCustomerRegistrationsRegistrationSponsorDetailsDto) => void;\n}\n\nexport const ConnectToBPForm: FC = (props) => {\n const { initialData, config, sponsorInfo, profileSponsorImage, isDefaultAddress, isSuccessSubmit, onSubmitForm } =\n props;\n const {\n context: { stepperData },\n } = useStepperData();\n const { activeStep, setActiveStep, stepsOrder } = stepperData;\n\n const defaultSelectSponsorType = config?.preselectedSponsorSelectionMethod ?? 'ManualInput';\n\n const {\n context: { errorData },\n } = useFormError();\n const { setErrorData, customErrors } = errorData;\n\n const [selectSponsorType, setSelectSponsorType] = useState(defaultSelectSponsorType);\n const [country, setCountry] = useState(false);\n const [resetKey, setResetKey] = useState(0);\n\n const { getTestIdProps } = useTestId();\n\n const methods = useForm({\n defaultValues: initialData,\n reValidateMode: 'onChange',\n mode: 'all',\n });\n\n const { formState, watch, setValue } = methods;\n\n const { isValid, isSubmitting } = formState;\n const countryOptions = config?.address?.country?.availableOptions ?? [];\n\n const values = watch();\n\n const invalidCodeErrors = customErrors?.filter(\n (er) =>\n !Object.keys(values)\n .map((val) => val.toLowerCase())\n .includes(er.fieldName?.toLowerCase() ?? ''),\n );\n\n const countryFieldName = 'address.country';\n\n const { data: formatAddressFields } = useAddressFormatMetadata('SingleLine');\n\n const {\n virtualPageAnalyticsContext: { virtualPageAnalyticsData },\n } = useVirtualPageAnalyticsData();\n const { setPreviousStep } = virtualPageAnalyticsData;\n\n const handleChangeSponsorFindType = (event: ChangeEvent) => {\n setSelectSponsorType(\n event.target\n .value as StaticCustomerRegistrationsMetadataRegistrationSponsorDetailsMetadataDtoPreselectedSponsorSelectionMethod,\n );\n setResetKey(Date.now());\n methods.reset(initialData);\n methods.clearErrors();\n setCountry(false);\n if (customErrors && customErrors.length > 0) {\n setErrorData([]);\n }\n setErrorData([]);\n };\n\n const handleBack = () => {\n setPreviousStep(stepsOrder[activeStep]);\n setActiveStep(activeStep - 1);\n };\n\n const handleNext = () => {\n setPreviousStep(stepsOrder[activeStep]);\n setActiveStep(activeStep + 1);\n };\n\n useEffect(() => {\n if (values.address?.zipcode) {\n setSelectSponsorType(selectBpVariant.findSponsor);\n }\n }, [values.address?.zipcode]);\n\n useEffect(() => {\n if (config?.address?.country?.isAvailable && selectSponsorType === selectBpVariant.findSponsor) {\n setValue(countryFieldName, countryOptions[0]);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps --- not needed other property\n }, [selectSponsorType]);\n\n const isKnowSponsorNumber = selectSponsorType === selectBpVariant.knowSponsorNumber;\n const isFindSponsorSelected = selectSponsorType === selectBpVariant.findSponsor;\n\n const getAddressAutocomplete = () => {\n if (config?.address?.searchOptions?.isEnabled) {\n return (\n \n }\n />\n );\n }\n\n return null;\n };\n\n const handleChangeCountry = (countryProperty: boolean | string) => {\n setCountry(countryProperty);\n if (typeof countryProperty === 'boolean') {\n if (countryProperty) {\n setValue(countryFieldName, countryOptions[1]);\n } else {\n setValue(countryFieldName, countryOptions[0]);\n }\n } else {\n setValue(countryFieldName, countryProperty);\n }\n };\n\n const getCountryField = () => {\n if (countryOptions.length === 2) {\n return (\n \n \n );\n }\n return (\n \n \n \n }\n onChange={(e) => handleChangeCountry(e.target.value)}\n >\n {countryOptions.sort().map((opt) => (\n \n {opt}\n \n ))}\n \n \n );\n };\n\n const getCorrectSubmitButton = () => {\n if (isFindSponsorSelected) {\n return (\n handleNext()}\n {...getTestIdProps('submit-btn-sponsorForm')}\n >\n \n \n );\n }\n\n return (\n \n \n \n );\n };\n\n const addressAutocomplete = getAddressAutocomplete();\n\n const countryField = getCountryField();\n\n const noneSponsorLocator = !config?.address?.country?.isAvailable && !config?.address?.zipcode?.isAvailable;\n const isCountryOrZipcode = values.address?.country ?? values.address?.zipcode;\n\n const isDisabledFind = noneSponsorLocator ? false : !isCountryOrZipcode;\n const submitButton = getCorrectSubmitButton();\n\n const knowSponsorLabelVariant = sponsorInfo?.consultantNumber ? 'body2' : 'body1';\n\n const formatedAddress = values.address?.zipcode\n ? getOptionLabelSingleLine(0, values.address, formatAddressFields ?? defaultAddressFormat)\n : null;\n\n const singleLineAddress =\n config?.address?.searchOptions?.isEnabled && formatedAddress ? (\n <>\n \n \n \n \n {formatedAddress}\n \n \n ) : null;\n\n return (\n \n \n \n {sponsorInfo?.consultantNumber ? (\n \n }\n />\n ) : (\n \n \n \n \n }\n disabled={Boolean(sponsorInfo?.consultantNumber)}\n label={\n \n \n \n }\n />\n {isKnowSponsorNumber ? (\n \n }\n {...config?.sponsorNumber}\n allowOnlyNumbers\n isEditable={isKnowSponsorNumber}\n validation={{ isMandatory: isKnowSponsorNumber }}\n />\n ) : null}\n \n \n