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

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 });

package/src/components/ApplicationForm/useVerifyPhoneDialogSubmit.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { LeadServiceAPI, type LeadRequest } from '../../api/LeadServiceAPI';
+import { useRouter } from '../../external/useRouter';
 import { getTimer } from '../../utils/getTimer';
 const API = LeadServiceAPI();
 
@@ -18,6 +19,7 @@ export const useVerifyPhoneDialogSubmit = ({
   reqId,
 }: useVerifyPhoneDialogSubmitProps) => {
   const timer = Math.max(getTimer(Date.now()), 0);
+  const router = useRouter();
 
   const [errorText, setErrorText] = useState('');
   const [isLoading, { setTrue: startLoading, setFalse: endLoading }] = useBool(false);
@@ -34,6 +36,7 @@ export const useVerifyPhoneDialogSubmit = ({
         code: values.join(''),
         body: formatData,
         reqId,
+        router,
       });
       if (response?.errorDesc) {
         setErrorText(response?.errorDesc);

package/src/hooks/useDragAndDrop.ts

@@ -0,0 +1,48 @@
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import type { ResponseData } from '../api/sendFile';
+import { type VerifyFileParams } from '../ui-kit/Input/useVerifyFile';
+import type {
+  PreventableEventWithTarget,
+  PreventableEventWithTargetFiles,
+} from '../ui-kit/PreventableEvent';
+
+interface DragAndDropProps {
+  onFileSelected: (props: VerifyFileParams) => Promise<void>;
+  onReset: () => void;
+  uploadResponse: ResponseData | null;
+  onFileChanged?: (value: string) => void;
+}
+
+export const useDragAndDrop = ({
+  onFileSelected,
+  onReset,
+  uploadResponse,
+  onFileChanged,
+}: DragAndDropProps) => {
+  const [isDragActive, setIsDragActive] = useState(false);
+
+  const handleDrag = (e: PreventableEventWithTarget) => {
+    e.preventDefault();
+    if (uploadResponse) {
+      return;
+    }
+    setIsDragActive(true);
+  };
+
+  const handleLeave = () => setIsDragActive(false);
+
+  const handleDrop = async (e: PreventableEventWithTargetFiles) => {
+    e.preventDefault();
+    if (uploadResponse) {
+      return;
+    }
+    onReset();
+    setIsDragActive(false);
+    const file = e.dataTransfer?.files?.[0];
+    if (file) {
+      await onFileSelected({ file, onFileChanged });
+    }
+  };
+
+  return { handleDrag, handleLeave, handleDrop, isDragActive };
+};

package/src/model/FormTypeFieldDef.ts

@@ -25,4 +25,5 @@ export type FormTypeFieldDef =
   | 'INVESTADVISER'
   | 'FINOMBUDSMAN'
   | 'PF'
-  | 'UNIVERSAL';
+  | 'UNIVERSAL'
+  | 'PRACTICE';

package/src/model/InputTypes.ts

@@ -1 +1 @@
-export type InputTypes = 'text' | 'number' | 'hidden';
+export type InputTypes = 'text' | 'number' | 'hidden' | 'file';

package/src/ui-kit/FormField/CustomFieldProps.ts

@@ -7,6 +7,7 @@ export interface CustomFieldProps {
   input?: FieldDef;
   url?: string;
   params?: Record<string, any>;
+  label?: string;
 }
 
 export interface CustomFieldPropsWithTypeForm extends CustomFieldProps {

package/src/ui-kit/FormField/Fields/AddressBranchField.tsx

@@ -7,7 +7,7 @@ import { SelectControl } from '../../Select/SelectControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { getPremium } from '../getPremium';
 
-interface RegionFieldProps extends CustomFieldProps {
+export interface RegionFieldProps extends CustomFieldProps {
   isPremium?: boolean;
 }
 

package/src/ui-kit/FormField/Fields/AverageGradeField.tsx

@@ -0,0 +1,14 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { InputControl } from '../../Input/InputControl';
+import { type CustomFieldProps } from '../CustomFieldProps';
+
+export const AverageGradeField = JSX<CustomFieldProps>(({ field, input }) => {
+  return (
+    <InputControl
+      label="Средний балл обучения"
+      type="number"
+      {...field(input?.name ?? '')}
+      {...input}
+    />
+  );
+});

package/src/ui-kit/FormField/Fields/BirthdayField.tsx

@@ -2,10 +2,15 @@ import { JSX } from '@redneckz/uni-jsx';
 import { DatePickerControl } from '../../DatePicker/DatePickerControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 
-export const BirthdayField = JSX<CustomFieldProps>(({ field, input }) => (
-  <DatePickerControl
-    label={input?.label || 'Дата рождения'}
-    {...field(input?.name ?? '')}
-    {...input}
-  />
-));
+export const BirthdayField = JSX<CustomFieldProps>(({ field, input }) => {
+  const today = new Date();
+
+  return (
+    <DatePickerControl
+      label={input?.label || 'Дата рождения'}
+      {...field(input?.name ?? '')}
+      maxDate={today}
+      {...input}
+    />
+  );
+});

package/src/ui-kit/FormField/Fields/CommentField.tsx

@@ -6,7 +6,7 @@ export const CommentField = JSX<CustomFieldProps>(({ field, input }) => (
   <InputControl
     className="col-span-2"
     {...field(input?.name ?? '')}
-    placeholder="Ваше сообщение"
+    placeholder={input?.placeholder ?? 'Ваше сообщение'}
     isTextarea={true}
     {...input}
   />

package/src/ui-kit/FormField/Fields/FileIdField.tsx

@@ -0,0 +1,7 @@
+import { UniBlock } from '../../../UniBlock/UniBlock';
+import { InputControl } from '../../Input/InputControl';
+import { type PartnerFieldWithRefProps } from './PartnerSymbolCodeField';
+
+export const FileIdField = UniBlock<PartnerFieldWithRefProps>(({ field, input = {} }) => (
+  <InputControl {...field(input.name ?? '')} {...input} type="hidden" />
+));

package/src/ui-kit/FormField/Fields/FileUpload.tsx

@@ -0,0 +1,22 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { InputFileControl } from '../../Input/InputFileControl';
+import { type CustomFieldProps } from '../CustomFieldProps';
+
+export const FileUploadField = JSX<CustomFieldProps>(({ field, input }) => {
+  const [fileId, setFileId] = useState<string>('');
+
+  useEffect(() => {
+    field('fileId')?.onChange?.(fileId);
+  }, [fileId]);
+
+  return (
+    <InputFileControl
+      type="file"
+      label={input?.name ?? ''}
+      {...field(input?.name ?? '')}
+      {...input}
+      onFileChanged={setFileId}
+    />
+  );
+});

package/src/ui-kit/FormField/Fields/InternshipEndDateField.tsx

@@ -0,0 +1,38 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { isDateValid } from '../../../utils/isDateValid';
+import { DatePickerControl } from '../../DatePicker/DatePickerControl';
+import { type CustomFieldProps } from '../CustomFieldProps';
+
+const INTERNSHIP_END_DATE_ERROR = 'Некорректно заполненное поле';
+
+export const InternshipEndDateField = JSX<CustomFieldProps>(({ field, input }) => {
+  const [startDate, setStartDate] = useState<Date>();
+  const [internshipEndDateError, setInternshipEndDateError] = useState('');
+  const [internshipEndDateValue, setInternshipEndDateValue] = useState<Date>();
+
+  useEffect(() => {
+    setStartDate(field('internshipStartDate').value as Date);
+  }, [field('internshipStartDate').value]);
+
+  const handleInputChange = (value: Date) => {
+    setInternshipEndDateValue(value);
+    field(input?.name ?? '')?.onChange?.(value);
+    setInternshipEndDateError(
+      isDateValid(value, { minLimit: startDate }) ? '' : INTERNSHIP_END_DATE_ERROR,
+    );
+  };
+
+  return (
+    <DatePickerControl
+      label={input?.label || 'Дата окончания практики'}
+      {...field(input?.name ?? '')}
+      {...input}
+      value={internshipEndDateValue}
+      error={field(input?.name ?? '')?.error || internshipEndDateError}
+      errors={[field(input?.name ?? '')?.error || internshipEndDateError]}
+      onChange={handleInputChange}
+      minDate={startDate}
+    />
+  );
+});

package/src/ui-kit/FormField/Fields/InternshipStartDateField.tsx

@@ -0,0 +1,38 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { isDateValid } from '../../../utils/isDateValid';
+import { DatePickerControl } from '../../DatePicker/DatePickerControl';
+import { type CustomFieldProps } from '../CustomFieldProps';
+
+const INTERNSHIP_START_DATE_ERROR = 'Некорректно заполненное поле';
+
+export const InternshipStartDateField = JSX<CustomFieldProps>(({ field, input }) => {
+  const [endDate, setEndDate] = useState<Date>();
+  const [internshipStartDateError, setInternshipStartDateError] = useState('');
+  const [internshipStartDateValue, setInternshipStartDateValue] = useState<Date>();
+
+  useEffect(() => {
+    setEndDate(field('internshipEndDate').value as Date);
+  }, [field('internshipEndDate').value]);
+
+  const handleInputChange = (value: Date) => {
+    setInternshipStartDateValue(value);
+    field(input?.name ?? '')?.onChange?.(value);
+    setInternshipStartDateError(
+      isDateValid(value, { maxLimit: endDate }) ? '' : INTERNSHIP_START_DATE_ERROR,
+    );
+  };
+
+  return (
+    <DatePickerControl
+      label={input?.label || 'Дата начала практики'}
+      {...field(input?.name ?? '')}
+      {...input}
+      value={internshipStartDateValue}
+      error={internshipStartDateError || field(input?.name ?? '')?.error}
+      errors={[internshipStartDateError ?? field(input?.name ?? '')?.error]}
+      onChange={handleInputChange}
+      maxDate={endDate}
+    />
+  );
+});

package/src/ui-kit/FormField/Fields/SelectField.tsx

@@ -0,0 +1,12 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { type Option } from '../../Select/Option';
+import { SelectControl } from '../../Select/SelectControl';
+import { type CustomFieldProps } from '../CustomFieldProps';
+
+export interface SelectFieldProps extends CustomFieldProps {
+  options: Option[];
+}
+
+export const SelectField = JSX<SelectFieldProps>(({ field, input, label, options }) => (
+  <SelectControl label={label} options={options} {...field(input?.name ?? '')} {...input} />
+));

package/src/ui-kit/FormField/Fields/TextField.tsx

@@ -0,0 +1,7 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { InputControl } from '../../Input/InputControl';
+import { type CustomFieldProps } from '../CustomFieldProps';
+
+export const TextField = JSX<CustomFieldProps>(({ field, input, label }) => (
+  <InputControl label={label} maxLength={60} {...field(input?.name ?? '')} {...input} />
+));