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

package/src/api/getSubmitBody.ts

@@ -1,4 +1,6 @@
 import type { JSONRecord, JSONScalar } from '@redneckz/json-op';
+import { type EndpointType } from '../components/ApplicationForm/ApplicationFormContent';
+import { ENDPOINT_MAPPING } from '../components/ApplicationForm/constants';
 import type { Router } from '../external/useRouter';
 import { formatDate } from '../utils/formatDate';
 import { formatPhone } from '../utils/formatPhone';
@@ -10,7 +12,19 @@ type PFFormData = {
   partnerSymbolCode?: string;
 };
 
-export const getSubmitBody = (body: LeadRequest, isNaturalPerson: boolean, router?: Router) => {
+type submitBodyProps = {
+  body: LeadRequest;
+  endpoint?: EndpointType;
+  isNaturalPerson?: boolean;
+  router?: Router;
+};
+
+type DateField = [string, string];
+
+export const getSubmitBody = ({ body, endpoint, router }: submitBodyProps) => {
+  const isNaturalPerson = endpoint && ENDPOINT_MAPPING[endpoint].isNaturalEndpoint;
+  const withTypeForm = endpoint && ENDPOINT_MAPPING[endpoint].withTypeForm;
+
   const {
     typeForm,
     region,
@@ -18,7 +32,6 @@ export const getSubmitBody = (body: LeadRequest, isNaturalPerson: boolean, route
     email,
     birthday,
     desiredMeetingDate,
-    inn,
     fullRegion,
     addressBranch,
     secondaryPhone = '',
@@ -27,17 +40,23 @@ export const getSubmitBody = (body: LeadRequest, isNaturalPerson: boolean, route
     partnerName,
     russianPhone,
     partnerSymbolCode,
+    internshipEndDate,
+    internshipStartDate,
     ...staticBody
   } = body;
 
   return {
-    typeForm,
+    ...(withTypeForm ? { typeForm } : {}),
     ...getRegion(region, isNaturalPerson),
     ...getEmail(email, isNaturalPerson),
     ...getPhone(phone),
     ...getPhone(russianPhone),
-    ...getFormatDate(desiredMeetingDate as string, 'desiredMeetingDate'),
-    ...(isNaturalPerson ? getFormatDate(birthday as string) : { inn }),
+    ...(isNaturalPerson ? getFormatDate([[birthday as string, 'birthday']]) : { birthday }),
+    ...getFormatDate([
+      [desiredMeetingDate as string, 'desiredMeetingDate'],
+      [internshipEndDate as string, 'internshipEndDate'],
+      [internshipStartDate as string, 'internshipStartDate'],
+    ]),
     ...(typeForm === 'FEEDBACK'
       ? {}
       : {
@@ -64,8 +83,10 @@ export const getPhoneBody = (phone?: string) => {
 
 export const getPhone = (phone?: string) => (phone ? { phone: formatPhone(phone) } : {});
 
-const getFormatDate = (date?: string, key = 'birthday') =>
-  date ? { [key]: formatDate(date) } : {};
+const getFormatDate = (dates: DateField[]): Record<string, string> =>
+  Object.fromEntries(
+    dates.filter(([value]) => value).map(([value, key]) => [key, formatDate(value)]),
+  );
 
 const getRegion = (region: JSONRecord | JSONScalar | null, isNaturalPerson = true) => ({
   [isNaturalPerson ? 'regionBranch' : 'region']: region,

package/src/api/sendFile.ts

@@ -0,0 +1,97 @@
+import { DEFAULT_ERROR_TEXT } from '../ui-kit/Input/constants';
+import { noop } from '../utils/noop';
+import { API_BASE_URI } from './apiBaseUrl';
+
+const FILE_CHECK_URL = 'uploadFile';
+export const SUCCESS_STATUS = 'SUCCESS';
+export const ERROR_STATUS = 'ERROR';
+export type StatusType = typeof SUCCESS_STATUS | typeof ERROR_STATUS;
+type ErrorCode = '0' | '1';
+
+export interface CheckFileProps {
+  file: File;
+  onProgress?: (value: number) => void;
+}
+
+export type ResponseData = {
+  status?: StatusType;
+  fileId?: string;
+  errorDesc?: string;
+  errorCode?: ErrorCode;
+};
+
+export async function sendFile({ file, onProgress = noop }: CheckFileProps): Promise<ResponseData> {
+  return new Promise((resolve, reject) => {
+    const formData = new FormData();
+    formData.append('file', file);
+
+    let processingAnimation: number | undefined = undefined;
+
+    const xhr = new XMLHttpRequest();
+    let lastProgress: number;
+    xhr.upload.onprogress = (event) => {
+      if (event.lengthComputable) {
+        const percentComplete = (event.loaded / event.total) * 50;
+        onProgress(percentComplete);
+      }
+    };
+
+    xhr.upload.onload = () => {
+      let current = 50;
+      onProgress(current);
+
+      processingAnimation = window.setInterval(() => {
+        current += 0.2;
+        lastProgress = current;
+        if (current < 90) {
+          onProgress(current);
+        } else {
+          onProgress(90);
+          window.clearInterval(processingAnimation);
+        }
+      }, 100);
+    };
+
+    xhr.onload = async () => {
+      try {
+        const response: ResponseData = JSON.parse(xhr.responseText);
+        if (response.status === 'SUCCESS') {
+          window.clearInterval(processingAnimation);
+          await animateToFull(lastProgress, onProgress);
+          resolve(response);
+        } else {
+          reject(new Error(response.errorDesc ?? DEFAULT_ERROR_TEXT));
+        }
+      } catch (e) {
+        reject(new Error(DEFAULT_ERROR_TEXT));
+      }
+    };
+
+    xhr.onerror = () => {
+      reject(new Error(DEFAULT_ERROR_TEXT));
+    };
+
+    xhr.open('POST', `${API_BASE_URI}/${FILE_CHECK_URL}`);
+    xhr.send(formData);
+  });
+}
+
+const animateToFull = (current: number, onProgress: (value: number) => void): Promise<void> =>
+  new Promise((resolve) => {
+    let value = current;
+    const increment = (100 - current) / 30;
+    const interval = 16;
+
+    const step = () => {
+      value += increment;
+      if (value >= 100) {
+        onProgress(100);
+        resolve();
+      } else {
+        onProgress(value);
+        setTimeout(step, interval);
+      }
+    };
+
+    step();
+  });

package/src/components/ApplicationForm/ApplicationForm.example.json

@@ -1590,5 +1590,197 @@
         }
       }
     }
+  ],
+  [
+    "Форма практики",
+    {
+      "content": {
+        "version": "primary",
+        "padding": "",
+        "title": "Подать заявку на прохождение практики",
+        "typeForm": "PRACTICE",
+        "endpoint": "practice",
+        "sections": [
+          { "title": "О себе", "inputs": [] },
+          {
+            "inputs": [
+              {
+                "name": "fullname",
+                "required": true
+              }
+            ]
+          },
+          {
+            "columns": 2,
+            "inputs": [
+              {
+                "name": "birthday",
+                "required": true
+              },
+              {
+                "name": "phone",
+                "required": true
+              },
+              {
+                "name": "email",
+                "required": true
+              },
+              {
+                "name": "cityOfResidence",
+                "required": true
+              },
+              {
+                "name": "internshipStartDate",
+                "required": true
+              },
+              {
+                "name": "internshipEndDate",
+                "required": true
+              }
+            ]
+          },
+          {
+            "title": "Образование и опыт",
+            "columns": 2,
+            "inputs": [
+              { "name": "university", "required": true },
+              { "name": "fieldOfStudy", "required": true },
+              { "name": "courseYear", "required": true },
+              { "name": "graduationYear", "required": true },
+              { "name": "averageGrade", "required": true },
+              { "name": "educationLevel", "required": true }
+            ]
+          },
+          {
+            "inputs": [
+              {
+                "name": "skillsAndKnowledge",
+                "placeholder": "Навыки и знания. Что умеете делать?",
+                "required": true
+              }
+            ]
+          },
+          {
+            "inputs": [
+              {
+                "name": "fileUpload",
+                "label": "Прикрепите ваше резюме",
+                "extensions": ["pdf", "doc", "docx", "pptx"],
+                "maxSizeMB": 10
+              },
+              { "name": "fileId" }
+            ]
+          }
+        ],
+        "button": {
+          "text": "Отправить заявку",
+          "version": "primary"
+        },
+        "link": {
+          "text": "Согласен на обработку персональных данных",
+          "href": "/privacy-policy",
+          "target": "_blank"
+        }
+      }
+    }
+  ],
+  [
+    "Форма стажировки",
+    {
+      "content": {
+        "version": "primary",
+        "padding": "",
+        "title": "Подать заявку на прохождение стажировки",
+        "typeForm": "INTERN",
+        "endpoint": "internship",
+        "sections": [
+          {
+            "title": "О себе",
+            "inputs": []
+          },
+          { "inputs": [{ "name": "fullName", "required": true }] },
+          {
+            "columns": 2,
+            "inputs": [
+              {
+                "name": "birthday",
+                "required": true
+              },
+              {
+                "name": "phone",
+                "required": true
+              },
+              {
+                "name": "email",
+                "required": true
+              },
+              {
+                "name": "cityOfResidence",
+                "required": true
+              },
+              {
+                "name": "internshipDirection",
+                "required": true
+              },
+              {
+                "name": "workingHours",
+                "required": true
+              }
+            ]
+          },
+          {
+            "title": "Образование и опыт",
+            "columns": 2,
+            "inputs": [
+              { "name": "university", "required": true },
+              { "name": "fieldOfStudy", "required": true },
+              { "name": "courseYear", "required": true },
+              { "name": "graduationYear", "required": true },
+              { "name": "averageGrade", "required": true },
+              { "name": "educationLevel", "required": true }
+            ]
+          },
+          {
+            "inputs": [
+              {
+                "name": "skillsAndKnowledge",
+                "placeholder": "Навыки и знания. Что умеете делать?",
+                "required": true
+              },
+              {
+                "name": "workExperience",
+                "placeholder": "Опыт работы или стажировки",
+                "required": true
+              },
+              {
+                "name": "motivationForInternship",
+                "placeholder": "Почему хотите пойти на стажировку?",
+                "required": true
+              }
+            ]
+          },
+          {
+            "inputs": [
+              {
+                "name": "fileUpload",
+                "label": "Прикрепите ваше резюме",
+                "extensions": ["pdf", "doc", "docx", "pptx"],
+                "maxSizeMB": 10
+              },
+              { "name": "fileId" }
+            ]
+          }
+        ],
+        "button": {
+          "text": "Отправить заявку",
+          "version": "primary"
+        },
+        "link": {
+          "text": "Согласен на обработку персональных данных",
+          "href": "/privacy-policy",
+          "target": "_blank"
+        }
+      }
+    }
   ]
 ]

package/src/components/ApplicationForm/ApplicationForm.fixture.tsx

@@ -969,6 +969,138 @@ export default {
       <DialogManager />
     </div>
   ),
+  practice: (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm
+        className="col-span-12"
+        title="Заявка на прохождение практики"
+        endpoint="practice"
+        sections={[
+          { title: 'О себе', inputs: [] },
+          { inputs: [{ name: 'fullName', required: true }] },
+          {
+            columns: 2,
+            inputs: [
+              { name: 'birthday', required: true },
+              { name: 'phone', required: true },
+              { name: 'email', required: true },
+              { name: 'cityOfResidence', required: true },
+              { name: 'internshipStartDate', required: true },
+              { name: 'internshipEndDate', required: true },
+            ],
+          },
+          {
+            title: 'Образование и опыт',
+            columns: 2,
+            inputs: [
+              { name: 'university', required: true },
+              { name: 'fieldOfStudy', required: true },
+              { name: 'courseYear', required: true },
+              { name: 'graduationYear', required: true },
+              { name: 'averageGrade', required: true },
+              { name: 'educationLevel', required: true },
+            ],
+          },
+          {
+            inputs: [
+              {
+                name: 'skillsAndKnowledge',
+                placeholder: 'Навыки и знания. Что умеете делать?',
+                required: true,
+              },
+            ],
+          },
+          {
+            inputs: [
+              {
+                name: 'fileUpload',
+                label: 'Прикрепите ваше резюме',
+                extensions: ['pdf', 'doc', 'docx', 'pptx'],
+                maxSizeMB: 10,
+              },
+              { name: 'fileId' },
+            ],
+          },
+          { inputs: [{ name: 'consentDataProcessing', required: true }] },
+        ]}
+        button={button}
+        link={link}
+      />
+      <PopupManager />
+      <DialogManager />
+    </div>
+  ),
+  intern: (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm
+        className="col-span-12"
+        title="Заявка на прохождение стажировки"
+        endpoint="internship"
+        sections={[
+          { title: 'О себе', inputs: [] },
+          { inputs: [{ name: 'fullName', required: true }] },
+          {
+            columns: 2,
+            inputs: [
+              { name: 'birthday', required: true },
+              { name: 'phone', required: true },
+              { name: 'email', required: true },
+              { name: 'cityOfResidence', required: true },
+              { name: 'internshipDirection', required: true },
+              { name: 'workingHours', required: true },
+            ],
+          },
+          {
+            title: 'Образование и опыт',
+            columns: 2,
+            inputs: [
+              { name: 'university', required: true },
+              { name: 'fieldOfStudy', required: true },
+              { name: 'courseYear', required: true },
+              { name: 'graduationYear', required: true },
+              { name: 'averageGrade', required: true },
+              { name: 'educationLevel', required: true },
+            ],
+          },
+          {
+            inputs: [
+              {
+                name: 'skillsAndKnowledge',
+                placeholder: 'Навыки и знания. Что умеете делать?',
+                required: true,
+              },
+              {
+                name: 'workExperience',
+                placeholder: 'Опыт работы или стажировки',
+                required: true,
+              },
+              {
+                name: 'motivationForInternship',
+                placeholder: 'Почему хотите пойти на стажировку?',
+                required: true,
+              },
+            ],
+          },
+          {
+            inputs: [
+              {
+                name: 'fileUpload',
+                label: 'Прикрепите ваше резюме',
+                extensions: ['pdf', 'doc', 'docx', 'pptx'],
+                maxSizeMB: 10,
+              },
+              { name: 'fileId' },
+            ],
+          },
+          { inputs: [{ name: 'consentDataProcessing', required: true }] },
+        ]}
+        button={button}
+        link={link}
+      />
+      <PopupManager />
+      <DialogManager />
+    </div>
+  ),
   withSnowplow: (
     <div className="container grid grid-cols-12">
       <ApplicationForm

package/src/components/ApplicationForm/ApplicationForm.tsx

@@ -11,7 +11,11 @@ import { ResponseTypeDialog } from '../../ui-kit/ResponseTypeDialog/ResponseType
 import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
-import { type ApplicationFormContent, type FieldDef } from './ApplicationFormContent';
+import {
+  type ApplicationFormContent,
+  type EndpointType,
+  type FieldDef,
+} from './ApplicationFormContent';
 import { getFormatData } from './getFormatData';
 import { getInitialFormState, type FormState } from './getInitialFormState';
 import {
@@ -72,19 +76,21 @@ export const ApplicationForm = UniBlock<ApplicationFormProps>(
       async (formData: FormState, ev: PreventableEventWithTarget) => {
         const formatData = getFormatData({ ...formData, ...additionalParams });
 
-        await executeHandler(endpoint ?? 'default', {
-          formatData,
-          ev,
-          typeForm,
-          data,
-          aspects,
-          router,
-          responseTypeDialog,
-          verifyPhoneDialog,
-          onSuccess,
+        await executeHandler(
+          {
+            formatData,
+            ev,
+            typeForm,
+            data,
+            aspects,
+            router,
+            responseTypeDialog,
+            verifyPhoneDialog,
+            onSuccess,
+            withSnowplow,
+          },
           endpoint,
-          withSnowplow,
-        });
+        );
       },
       [typeForm],
     );
@@ -118,7 +124,7 @@ export const ApplicationForm = UniBlock<ApplicationFormProps>(
   },
 );
 
-const executeHandler = async (endpoint: string, context: HandlerProps): Promise<void> => {
-  const handler = handlerMap[endpoint] || handlerMap.default;
-  await handler(context);
+const executeHandler = async (context: HandlerProps, endpoint?: EndpointType): Promise<void> => {
+  const handler = (endpoint && handlerMap[endpoint]) || handlerMap.default;
+  await handler({ ...context, endpoint });
 };

package/src/components/ApplicationForm/ApplicationFormContent.ts

@@ -32,18 +32,32 @@ export type FilledByEsiaProps = {
   filledByEsia?: boolean;
 };
 
+/** @hidden */
+export type FileProps = {
+  maxSize?: number;
+  extensions?: string[];
+};
+
 export type FieldDef = Required &
   LabelProps &
   ConditionFieldProps &
   FilledByEsiaProps &
-  PlaceholderProps & {
+  PlaceholderProps &
+  FileProps & {
     name?: NameFieldDef;
     dadata?: boolean;
     defaultValue?: string;
+    customName?: string;
   };
 
 /** @hidden */
-export type EndpointType = 'lead' | 'initcorporatelead' | 'sendcorporatelead' | 'callback';
+export type EndpointType =
+  | 'lead'
+  | 'initcorporatelead'
+  | 'sendcorporatelead'
+  | 'callback'
+  | 'practice'
+  | 'internship';
 
 /**
  * @title Секция полей ввода

package/src/components/ApplicationForm/constants.ts

@@ -0,0 +1,33 @@
+import type { EndpointType } from './ApplicationFormContent';
+
+type EndpointInfo = {
+  withTypeForm: boolean;
+  isNaturalEndpoint: boolean;
+};
+
+export const ENDPOINT_MAPPING: Record<EndpointType, EndpointInfo> = {
+  lead: {
+    withTypeForm: true,
+    isNaturalEndpoint: true,
+  },
+  sendcorporatelead: {
+    withTypeForm: true,
+    isNaturalEndpoint: false,
+  },
+  practice: {
+    withTypeForm: false,
+    isNaturalEndpoint: true,
+  },
+  internship: {
+    withTypeForm: false,
+    isNaturalEndpoint: true,
+  },
+  initcorporatelead: {
+    withTypeForm: false,
+    isNaturalEndpoint: false,
+  },
+  callback: {
+    withTypeForm: false,
+    isNaturalEndpoint: true,
+  },
+};

package/src/components/ApplicationForm/handlers.ts

@@ -5,9 +5,11 @@ import { type Aspects } from '../../hooks/useAspects/useAspects';
 import { type AspectsDef, type SnowplowEventAspect } from '../../model/AspectsProps';
 import { type PreventableEventWithTarget } from '../../ui-kit/PreventableEvent';
 import { noop } from '../../utils/noop';
+import { type EndpointType } from './ApplicationFormContent';
 
 export type HandlerProps = {
   formatData: LeadRequest;
+  endpoint?: EndpointType;
   data?: AspectsDef[];
   aspects?: Aspects;
   ev: PreventableEventWithTarget;
@@ -16,7 +18,6 @@ export type HandlerProps = {
   verifyPhoneDialog?: any;
   responseTypeDialog?: any;
   onSuccess?: () => void;
-  endpoint?: string;
   withSnowplow?: boolean;
 };
 
@@ -61,8 +62,9 @@ export const handleCallback = async ({
   typeForm,
   responseTypeDialog,
   onSuccess = noop,
+  endpoint,
 }: HandlerProps) => {
-  const response = await API.sendPhoneCallRequest(formatData);
+  const response = await API.sendPhoneCallRequest(formatData, endpoint);
 
   onSuccess();
 
@@ -92,7 +94,7 @@ export const handleDefault = async ({
   endpoint,
   withSnowplow,
 }: HandlerProps) => {
-  const response = await API.send(formatData, router, endpoint === 'lead');
+  const response = await API.send({ body: formatData, router, endpoint });
   const ok = Boolean(response);
 
   responseTypeDialog.open({ ok });