@redneckz/wildless-cms-uni-blocks 0.14.989 → 0.14.990

package/mobile/src/ui-kit/Input/InputFile.tsx

@@ -0,0 +1,132 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { SUCCESS_STATUS, type ResponseData } from '../../api/sendFile';
+import { useDragAndDrop } from '../../hooks/useDragAndDrop';
+import { noop } from '../../utils/noop';
+import { style } from '../../utils/style';
+import { CloseButton } from '../DialogManager/CloseButton';
+import { ProgressBar } from '../ProgressBar/ProgressBar';
+import { getValidStyle } from './getValidStyle';
+import { type InputProps } from './InputProps';
+import { renderErrorText } from './renderErrorText';
+import { renderFileInput } from './renderFileInput';
+import { renderInfoText } from './renderInfoText';
+import { borderStyle, defaultStyle } from './styles';
+import { useVerifyFile } from './useVerifyFile';
+
+export const InputFile = JSX<InputProps>(
+  // eslint-disable-next-line max-lines-per-function
+  ({
+    key,
+    className,
+    id,
+    name,
+    type = 'file',
+    label,
+    valid = true,
+    pattern,
+    autoFocus = false,
+    extensions,
+    children,
+    onFocus,
+    onBlur,
+    maxSizeMB,
+    error,
+    onFileChanged = noop,
+  }) => {
+    const inputRef = useRef<HTMLInputElement | null>(null);
+    const [selectedFile, setSelectedFile] = useState<File | null>(null);
+    const [uploadError, setUploadError] = useState('');
+    const [uploadResponse, setUploadResponse] = useState<ResponseData | null>(null);
+
+    const { verifyFile, isFileUploading, progress } = useVerifyFile({
+      onUploadError: setUploadError,
+      onUploadResponse: setUploadResponse,
+      onFileSelected: setSelectedFile,
+      extensions,
+      maxSizeMB,
+    });
+
+    useEffect(() => {
+      if (autoFocus) {
+        inputRef.current?.focus();
+      }
+    }, [autoFocus, inputRef]);
+
+    const handleFileChange = async (file?: File) => {
+      handleResetFile();
+      if (file) {
+        await verifyFile({ file, onFileChanged });
+      }
+    };
+
+    const handleResetFile = () => {
+      setSelectedFile(null);
+      setUploadError('');
+      setUploadResponse(null);
+      onFileChanged('');
+    };
+
+    const { handleDrag, handleLeave, handleDrop, isDragActive } = useDragAndDrop({
+      onReset: handleResetFile,
+      onFileSelected: verifyFile,
+      uploadResponse,
+      onFileChanged,
+    });
+
+    const paddingStyle = children ? 'pr-3xl' : '';
+    const validStyle = getValidStyle(valid);
+    const activeDragStyle = isDragActive ? 'border-primary-hover' : '';
+
+    return (
+      <div
+        className={style('relative', className)}
+        onDragEnter={handleDrag}
+        onDragOver={handleDrag}
+        onDragLeave={handleLeave}
+        onDrop={handleDrop}
+      >
+        <label
+          className={style(
+            'h-14 cursor-pointer space-y-xs block',
+            defaultStyle,
+            paddingStyle,
+            borderStyle,
+            validStyle,
+            activeDragStyle,
+          )}
+        >
+          {isFileUploading ? (
+            <div>
+              <ProgressBar step={progress} isOnlyInteger={true} />
+            </div>
+          ) : (
+            renderFileInput({
+              label,
+              inputRef,
+              id,
+              key,
+              type,
+              name,
+              pattern,
+              disabled: Boolean(uploadResponse || isFileUploading),
+              onChange: handleFileChange,
+              onFocus,
+              onBlur,
+              extensions,
+              uploadResponse,
+              file: selectedFile,
+            })
+          )}
+        </label>
+        {uploadResponse?.status === SUCCESS_STATUS ? (
+          <CloseButton className="absolute top-0 right-0 z-10" onClose={handleResetFile} />
+        ) : null}
+
+        {renderInfoText(extensions, maxSizeMB)}
+        {renderErrorText(error || uploadError)}
+        {children}
+      </div>
+    );
+  },
+);

package/mobile/src/ui-kit/Input/InputFileControl.tsx

@@ -0,0 +1,22 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { getRequiredLabel } from '../../utils/getRequiredLabel';
+import { InputFile } from './InputFile';
+import { type InputProps } from './InputProps';
+
+export const InputFileControl = JSX<InputProps>(
+  ({ label, value = '', error, type, inputRef, required, ...rest }) => {
+    return (
+      <div ref={inputRef}>
+        <InputFile
+          type={type || 'file'}
+          aria-label={label}
+          label={getRequiredLabel({ label, required })}
+          valid={Boolean(!error)}
+          value={value}
+          error={error}
+          {...rest}
+        />
+      </div>
+    );
+  },
+);

package/mobile/src/ui-kit/Input/InputProps.ts

@@ -3,7 +3,16 @@ import { type DefaultControlType } from '../../model/DefaultControlType';
 import { type InputTypes } from '../../model/InputTypes';
 import { type PreventableEventWithTarget } from '../PreventableEvent';
 
-export interface InputProps<V = string> extends DefaultControlType, ControlProps<V> {
+export type FileInputProps = {
+  extensions?: string[];
+  maxSizeMB?: number;
+  onFileChanged?: (value: string) => void;
+};
+
+export interface InputProps<V = string>
+  extends DefaultControlType,
+    ControlProps<V>,
+    FileInputProps {
   id?: string;
   name?: string;
   type?: InputTypes;

package/mobile/src/ui-kit/Input/checks/checkFIleExtension.ts

@@ -0,0 +1,9 @@
+import { EXTENSIONS_ERROR_TEXT } from '../constants';
+
+export const checkFileExtension = async (file: File, extensions?: string[]): Promise<void> => {
+  const fileExt = file.name.split('.')[1];
+  console.log(fileExt, extensions);
+  if (!extensions?.includes(fileExt)) {
+    throw new Error(EXTENSIONS_ERROR_TEXT);
+  }
+};

package/mobile/src/ui-kit/Input/checks/checkFileMimeType.ts

@@ -0,0 +1,20 @@
+import { EXTENSIONS_ERROR_TEXT } from '../constants';
+
+const EXT_TO_MIME: Record<string, string> = {
+  pdf: 'application/pdf',
+  doc: 'application/msword',
+  docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+};
+
+export const checkFileMimeType = async (file?: File, extensions?: string[]): Promise<void> => {
+  const fileMimeType = file?.type ?? '';
+
+  const expectedMimeTypes = (extensions || [])
+    .map((ext) => EXT_TO_MIME[ext])
+    .filter((mime) => mime !== undefined);
+
+  if (!expectedMimeTypes.includes(fileMimeType)) {
+    throw new Error(EXTENSIONS_ERROR_TEXT);
+  }
+};

package/mobile/src/ui-kit/Input/checks/checkFileSignature.ts

@@ -0,0 +1,30 @@
+import { EXTENSIONS_ERROR_TEXT } from '../constants';
+import { getFileSignature } from './getFileSignature';
+
+const SIGNATURES: Record<string, string> = {
+  pdf: '25 50 44 46 2d',
+  docx: '50 4b 03 04',
+  pptx: '50 4b 03 04',
+  xlsx: '50 4b 03 04',
+  doc: 'D0 CF 11 E0 A1 B1 1A E1',
+};
+
+export const checkFileSignature = async (
+  file?: File,
+  expectedTypes?: (keyof typeof SIGNATURES)[],
+): Promise<void> => {
+  const hexSignature = await getFileSignature(file);
+
+  const isValid = (expectedTypes ?? []).some((type) => {
+    const expectedSignature = SIGNATURES[type]?.toLowerCase();
+
+    console.log(expectedSignature);
+    console.log(hexSignature);
+
+    return expectedSignature && hexSignature.startsWith(expectedSignature);
+  });
+
+  if (!isValid) {
+    throw new Error(EXTENSIONS_ERROR_TEXT);
+  }
+};

package/mobile/src/ui-kit/Input/checks/checkFileSize.ts

@@ -0,0 +1,10 @@
+import { EMPTY_FILE_ERROR_TEXT, MAX_SIZE_ERROR_TEXT } from '../constants';
+
+export const checkFileSize = async (file: File, maxSizeMB?: number): Promise<void> => {
+  if (maxSizeMB && file.size > maxSizeMB * 1024 * 1024) {
+    throw new Error(MAX_SIZE_ERROR_TEXT);
+  }
+  if (file.size === 0) {
+    throw new Error(EMPTY_FILE_ERROR_TEXT);
+  }
+};

package/mobile/src/ui-kit/Input/checks/getFileSignature.ts

@@ -0,0 +1,16 @@
+export const getFileSignature = (file?: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const buffer = reader.result as ArrayBuffer;
+      const bytes = new Uint8Array(buffer);
+      const hex = Array.from(bytes)
+        .map((b) => b.toString(16).padStart(2, '0'))
+        .join(' ');
+      resolve(hex);
+    };
+    reader.onerror = reject;
+
+    return file && reader.readAsArrayBuffer(file.slice(0, 8));
+  });
+};

package/mobile/src/ui-kit/Input/constants.ts

@@ -0,0 +1,6 @@
+export const ACCEPTED_EXTENSIONS_TEXT = 'Поддерживаемые форматы файлов';
+export const MAX_SIZE_TEXT = 'Максимальный размер файла';
+export const EMPTY_FILE_ERROR_TEXT = 'Ошибка загрузки файла. Убедитесь, что файл не пустой';
+export const EXTENSIONS_ERROR_TEXT = 'Файл не соответствует допустимым расширениям';
+export const MAX_SIZE_ERROR_TEXT = 'Файл превышает допустимый размер';
+export const DEFAULT_ERROR_TEXT = 'Ошибка при загрузке файла. Попробуйте загрузить файл позднее';

package/mobile/src/ui-kit/Input/renderFileInput.tsx

@@ -0,0 +1,87 @@
+import { SUCCESS_STATUS, type ResponseData } from '../../api/sendFile';
+import type { IconName } from '../../icons/IconName';
+import type { IconVersion } from '../../model/IconVersion';
+import { noop } from '../../utils/noop';
+import { style } from '../../utils/style';
+import { Icon } from '../Icon/Icon';
+import type { PreventableEvent, PreventableEventWithTargetFiles } from '../PreventableEvent';
+import type { InputProps } from './InputProps';
+import { renderLabel } from './renderLabel';
+
+const ICON_PROPS: { name: IconName; iconVersion: IconVersion; width: string; height: string } = {
+  name: 'DocIcon',
+  iconVersion: 'black',
+  width: '24',
+  height: '24',
+};
+
+interface InputFileProps extends InputProps<File> {
+  key?: string;
+  uploadResponse?: ResponseData | null;
+  file?: File | null;
+  onReset?: (e: PreventableEvent) => void;
+  isCustomValid?: boolean;
+}
+
+export const renderFileInput = ({
+  label,
+  inputRef,
+  id,
+  key,
+  type,
+  name,
+  pattern,
+  disabled,
+  onChange = noop,
+  onFocus,
+  onBlur,
+  extensions,
+  uploadResponse,
+  file,
+}: InputFileProps) => {
+  const ariaLabel = label ?? name ?? id;
+
+  return (
+    <div>
+      {uploadResponse?.status === SUCCESS_STATUS ? (
+        renderFileName(file)
+      ) : (
+        <div className="flex items-center space-x-2">
+          <Icon className="inline-block" {...ICON_PROPS} />
+          {renderLabel(label)}
+          <input
+            ref={inputRef}
+            className={style('h-14 hidden')}
+            id={id}
+            key={key}
+            type={type}
+            name={name || id}
+            pattern={pattern}
+            disabled={disabled}
+            aria-label={ariaLabel}
+            onChange={(e: PreventableEventWithTargetFiles) => {
+              e?.target?.files && onChange(e?.target?.files[0]);
+            }}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            accept={extensionsToAccept(extensions)}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+const extensionsToAccept = (extensions: string[] = []): string => {
+  return extensions
+    .map((ext) => {
+      const str = String(ext).trim();
+
+      return str.startsWith('.') ? str : '.' + str;
+    })
+    .map((ext) => ext.toLowerCase())
+    .filter((ext, index, arr) => arr.indexOf(ext) === index)
+    .join(', ');
+};
+
+const renderFileName = (file?: File | null | undefined) => <span>{file?.name}</span>;

package/mobile/src/ui-kit/Input/renderInfoText.tsx

@@ -0,0 +1,15 @@
+import { Text } from '../Text/Text';
+import { ACCEPTED_EXTENSIONS_TEXT, MAX_SIZE_TEXT } from './constants';
+
+export const renderInfoText = (extensions?: string[], maxSize?: number) => {
+  const extensionsMessage = extensions
+    ? `${ACCEPTED_EXTENSIONS_TEXT} - ${extensions.join(', ')}. `
+    : '';
+  const maxSizeMessage = maxSize ? `${MAX_SIZE_TEXT} - ${maxSize}Мб.` : '';
+
+  return (
+    <Text size="text-xs" font="font-light" color="text-secondary-text">
+      {extensionsMessage + maxSizeMessage}
+    </Text>
+  );
+};

package/mobile/src/ui-kit/Input/styles.ts

@@ -0,0 +1,2 @@
+export const defaultStyle = 'w-full border rounded-md text-primary-text outline-none p-m';
+export const borderStyle = 'border-dashed';

package/mobile/src/ui-kit/Input/useVerifyFile.ts

@@ -0,0 +1,100 @@
+import { useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { sendFile, SUCCESS_STATUS, type ResponseData } from '../../api/sendFile';
+import { animateStepWithMinDuration } from '../../utils/animateStepWithMinDuration';
+import { debounce } from '../../utils/debounce';
+import { noop } from '../../utils/noop';
+import { checkFileExtension } from './checks/checkFIleExtension';
+import { checkFileMimeType } from './checks/checkFileMimeType';
+import { checkFileSignature } from './checks/checkFileSignature';
+import { checkFileSize } from './checks/checkFileSize';
+import { DEFAULT_ERROR_TEXT } from './constants';
+import { type FileInputProps } from './InputProps';
+
+const DEBOUNCE_DELAY = 500;
+
+interface VerifyFileProps extends FileInputProps {
+  onUploadError?: (value: string) => void;
+  onFileSelected?: (value: File) => void;
+  onUploadResponse?: (value: ResponseData) => void;
+}
+
+export type VerifyFileParams = {
+  file: File;
+  onFileChanged?: (value: string) => void;
+};
+
+export const useVerifyFile = ({
+  onUploadError = noop,
+  onFileSelected = noop,
+  extensions,
+  maxSizeMB,
+  onUploadResponse = noop,
+}: VerifyFileProps) => {
+  const [progress, setProgress] = useState(0);
+  const [isFileUploading, setIsFileUploading] = useState(false);
+
+  const debouncedOnFileUploaded = useMemo(
+    () => debounce((isUploading: boolean) => setIsFileUploading(isUploading), DEBOUNCE_DELAY),
+    [setIsFileUploading],
+  );
+  const debouncedOnUploadError = useMemo(
+    () => debounce((message: string) => onUploadError(message), DEBOUNCE_DELAY),
+    [onUploadError],
+  );
+
+  const debouncedOnUploadResponse = useMemo(
+    () => debounce((response: ResponseData) => onUploadResponse(response), DEBOUNCE_DELAY),
+    [onUploadResponse],
+  );
+
+  const verifyFile = async ({ file, onFileChanged = noop }: VerifyFileParams) => {
+    onFileSelected(file);
+    setIsFileUploading(true);
+
+    const checks = [
+      () => checkFileExtension(file, extensions),
+      () => checkFileSize(file, maxSizeMB),
+      () => checkFileSignature(file, extensions),
+      () => checkFileMimeType(file, extensions),
+    ];
+
+    const checkProgressStep = 50 / checks.length;
+    let currentProgress = 0;
+
+    try {
+      for (let i = 0; i < checks.length; i++) {
+        const checkPromise = checks[i];
+
+        await checkPromise();
+
+        const targetProgress = (i + 1) * checkProgressStep;
+
+        await animateStepWithMinDuration({
+          from: currentProgress,
+          to: targetProgress,
+          onUpdate: setProgress,
+          minDuration: 300,
+        });
+
+        currentProgress = targetProgress;
+      }
+
+      const response = await sendFile({
+        file,
+        onProgress: setProgress,
+      });
+      debouncedOnUploadResponse(response);
+      onFileChanged(response?.fileId ?? '');
+      if (response?.status === SUCCESS_STATUS) {
+        debouncedOnFileUploaded?.(false);
+      }
+    } catch (e) {
+      const errorMessage = e instanceof Error ? e.message : DEFAULT_ERROR_TEXT;
+      debouncedOnUploadError(errorMessage);
+      onFileChanged('');
+    }
+    debouncedOnFileUploaded?.(false);
+  };
+
+  return { verifyFile, isFileUploading, progress };
+};

package/mobile/src/ui-kit/PreventableEvent.ts

@@ -4,3 +4,8 @@ export interface PreventableEvent {
 }
 
 export type PreventableEventWithTarget = PreventableEvent & { target?: EventTarget | null };
+
+export type PreventableEventWithTargetFiles = PreventableEvent & {
+  target?: HTMLInputElement | null;
+  dataTransfer?: DataTransfer;
+};

package/mobile/src/ui-kit/ProgressBar/ProgressBar.tsx

@@ -5,16 +5,21 @@ import type { DescriptionProps } from '../../model/HeadlineType';
 interface ProgressBarProps extends DescriptionProps {
   step?: number;
   showPercentage?: boolean;
+  isOnlyInteger?: boolean;
 }
 
 export const ProgressBar = JSX<ProgressBarProps>(
-  ({ step = 10, description, showPercentage = true }) => (
+  ({ step = 10, description, showPercentage = true, isOnlyInteger = false }) => (
     <div>
       <div className="h-4 w-full bg-gray relative">
         <div className="h-4 bg-green" style={{ width: `${step}%` }} />
       </div>
       <div className="relative">
-        {showPercentage ? <div className="absolute left-2/4 text-green">{step}%</div> : null}
+        {showPercentage ? (
+          <div className="absolute left-2/4 text-green">
+            {isOnlyInteger ? Math.round(step) : step}%
+          </div>
+        ) : null}
         {description ? <div className="text-right pr-m text-gray">{description}</div> : null}
       </div>
     </div>

package/mobile/src/utils/animateStepWithMinDuration.ts

@@ -0,0 +1,38 @@
+import { noop } from './noop';
+
+interface AnimateProgressProps {
+  from: number;
+  to: number;
+  onUpdate: (value: number) => void;
+  minDuration: number;
+}
+
+export const animateStepWithMinDuration = ({
+  from,
+  to,
+  onUpdate = noop,
+  minDuration = 300,
+}: AnimateProgressProps): Promise<void> => {
+  return new Promise((resolve) => {
+    const startTime = performance.now();
+
+    const animate = () => {
+      const currentTime = performance.now();
+      const elapsed = currentTime - startTime;
+      const animationProgress = Math.min(elapsed / minDuration, 1);
+      const easeProgress = 1 - Math.pow(1 - animationProgress, 3);
+      const value = from + (to - from) * easeProgress;
+
+      onUpdate(value);
+
+      if (animationProgress < 1) {
+        requestAnimationFrame(animate);
+      } else {
+        onUpdate(to);
+        resolve();
+      }
+    };
+
+    requestAnimationFrame(animate);
+  });
+};

package/mobile/src/utils/isDateValid.ts

@@ -0,0 +1,33 @@
+export const isDateValid = (
+  value: Date,
+  limits: {
+    minLimit?: Date;
+    maxLimit?: Date;
+  },
+): boolean => {
+  if (!value || isNaN(value.getTime())) {
+    return false;
+  }
+
+  const { minLimit, maxLimit } = limits;
+
+  const time = value.getTime();
+
+  return isValidMin(time, minLimit) && isValidMax(time, maxLimit);
+};
+
+const isValidMin = (time: number, minLimit?: Date | null): boolean => {
+  if (!minLimit || isNaN(minLimit.getTime())) {
+    return true;
+  }
+
+  return time > minLimit.getTime();
+};
+
+const isValidMax = (time: number, maxLimit?: Date | null): boolean => {
+  if (!maxLimit || isNaN(maxLimit.getTime())) {
+    return true;
+  }
+
+  return time < maxLimit.getTime();
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.989",
+  "version": "0.14.990",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -205,7 +205,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "106 kB",
+      "limit": "110 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/api/LeadServiceAPI.ts

@@ -1,4 +1,5 @@
 import { type JSONRecord, type JSONScalar } from '@redneckz/json-op';
+import { type EndpointType } from '../components/ApplicationForm/ApplicationFormContent';
 import { type Router } from '../external/useRouter';
 import { getUserTimezoneOffset } from '../utils/getTimezone';
 import { API_BASE_URI } from './apiBaseUrl';
@@ -42,15 +43,24 @@ type PhoneOnly = {
   phone?: string;
 };
 
+export type sendProps = {
+  body: LeadRequest;
+  router: Router;
+  endpoint?: EndpointType;
+};
+
 type SubmitBody = PhoneOnly | LeadRequest | CheckCodeProps | VerifiedLeadRequest;
 
 export function LeadServiceAPI() {
-  async function send(body: LeadRequest, router: Router, isIndividualType = false) {
-    const { serviceDirection } = body;
+  async function send({ body, router, endpoint }: sendProps) {
+    const calculatedEndpoint = endpoint && getEndpoint(endpoint, body);
+    const url = `${API_BASE_URI}/${calculatedEndpoint}`;
 
-    const isNaturalPerson = isIndividualType && serviceDirection !== 'Юридическое лицо / ИП';
-    const url = `${API_BASE_URI}${isNaturalPerson ? '/lead' : '/sendcorporatelead'}`;
-    const submitBody = getSubmitBody(body, isNaturalPerson, router);
+    const submitBody = getSubmitBody({
+      body,
+      endpoint,
+      router,
+    });
 
     try {
       const response = await LeadServiceFetch(url, submitBody);
@@ -88,8 +98,8 @@ export function LeadServiceAPI() {
   async function checkCode({ reqId, code, body }: CheckCodeProps): Promise<CheckCodeResponse> {
     const submitBody = {
       requestId: reqId,
-      confimationCode: code,
-      leadRequest: getSubmitBody(body, false),
+      confimationCode: code, // не исправлять опечатку!
+      leadRequest: getSubmitBody({ body }),
     };
     try {
       const response = await LeadServiceFetch(`${API_BASE_URI}/confirmCorporateLead`, submitBody);
@@ -100,9 +110,9 @@ export function LeadServiceAPI() {
     }
   }
 
-  async function sendPhoneCallRequest(body: LeadRequest, isNaturalPerson = false) {
+  async function sendPhoneCallRequest(body: LeadRequest, endpoint?: EndpointType) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const submitBody = getSubmitBody(body, isNaturalPerson);
+    const submitBody = getSubmitBody({ body, endpoint });
 
     const formatSubmitBody = getFormatCallbackSubmitBody(submitBody);
 
@@ -145,3 +155,13 @@ const getFormatCallbackSubmitBody = (submitBody: Partial<LeadRequest>): SubmitBo
     clientTimezone: getUserTimezoneOffset(),
   };
 };
+
+const getEndpoint = (endpoint: EndpointType, body: LeadRequest) => {
+  const { serviceDirection } = body;
+
+  if (endpoint === 'lead' && serviceDirection !== 'Юридическое лицо / ИП') {
+    return 'lead';
+  }
+
+  return endpoint;
+};