@redneckz/wildless-cms-uni-blocks 0.14.201 → 0.14.202

package/src/components/ApplicationFormCustom/ApplicationFormCustom.fixture.tsx

@@ -1,7 +1,20 @@
+import { type LinkProps } from '../../model/LinkProps';
 import '../../setup-fixture';
 
 import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
 import { ApplicationFormCustom } from './ApplicationFormCustom';
+import { type SubmitButtonProps } from './ApplicationFormCustomContent';
+
+const button: SubmitButtonProps = {
+  text: 'Отправить заявку',
+  version: 'primary',
+};
+
+const link: LinkProps = {
+  text: 'Согласен на обработку персональных данных',
+  href: '/privacy-policy',
+  target: '_blank',
+};
 
 export default {
   default: (
@@ -10,42 +23,76 @@ export default {
         className="col-span-12"
         title="Заголовок"
         typeForm={'CORRUPTION'}
-        inputs={[
-          { name: 'name', required: true },
-          { name: 'middleName' },
-          { name: 'consentDataProcessing', required: true },
+        sections={[
+          {
+            inputs: [
+              { name: 'name', required: true },
+              { name: 'middleName' },
+              { name: 'consentDataProcessing', required: true },
+            ],
+          },
         ]}
-        button={{
-          text: 'Отправить заявку',
-          version: 'primary',
-        }}
-        link={{
-          text: 'Согласен на обработку персональных данных',
-          href: '/privacy-policy',
-          target: '_blank',
-        }}
+        button={button}
+        link={link}
         endpoint="lead"
       />
       <PopupManager />
     </div>
   ),
-  withoutAgreement: (
+  antiFraud: (
     <div className="container grid grid-cols-12">
       <ApplicationFormCustom
         className="col-span-12"
-        title="Заголовок"
-        typeForm={'CORRUPTION'}
-        inputs={[{ name: 'name', required: true }, { name: 'middleName' }]}
-        button={{
-          text: 'Отправить заявку',
-          version: 'primary',
-        }}
+        title="Сообщить о возможных мошеннических действиях"
+        typeForm={'ANTIFRAUD'}
+        endpoint="lead"
+        sections={[
+          {
+            inputs: [
+              { name: 'surname', required: true },
+              { name: 'name', required: true },
+              { name: 'middleName' },
+              { name: 'phone', required: true },
+              { name: 'birthday', required: true },
+              { name: 'client' },
+              { name: 'comment', required: true },
+              { name: 'consentDataProcessing', required: true },
+            ],
+          },
+        ]}
+        button={button}
+        link={link}
+      />
+      <PopupManager />
+    </div>
+  ),
+  businessCard: (
+    <div className="container grid grid-cols-12">
+      <ApplicationFormCustom
+        className="col-span-12"
+        title="Заявка на выпуск бизнес-карты"
+        typeForm="BCRD"
+        endpoint="sendcorporatelead"
+        sections={[
+          {
+            inputs: [{ name: 'region', required: true }],
+          },
+          {
+            inputs: [
+              { name: 'name', required: true },
+              { name: 'phone', required: true },
+              { name: 'inn', required: true },
+              { name: 'email', required: true },
+            ],
+            columns: 2,
+          },
+        ]}
+        button={button}
         link={{
-          text: 'обработкой персональных данных',
+          text: 'условиями передачи данных',
           href: '/privacy-policy',
           target: '_blank',
         }}
-        endpoint="lead"
       />
       <PopupManager />
     </div>
@@ -56,56 +103,46 @@ export default {
         className="col-span-12"
         title="Сообщить о коррупции"
         typeForm={'CORRUPTION'}
-        inputs={[
-          { name: 'surname', required: true },
-          { name: 'name', required: true },
-          { name: 'middleName' },
-          { name: 'phone', required: true },
-          { name: 'region', required: true },
-          { name: 'email' },
-          { name: 'comment', required: true },
-          { name: 'consentDataProcessing', required: true },
+        endpoint="lead"
+        sections={[
+          {
+            inputs: [
+              { name: 'surname', required: true },
+              { name: 'name', required: true },
+              { name: 'middleName' },
+              { name: 'phone', required: true },
+              { name: 'region', required: true },
+              { name: 'email' },
+              { name: 'comment', required: true },
+              { name: 'consentDataProcessing', required: true },
+            ],
+          },
         ]}
-        button={{
-          text: 'Отправить заявку',
-          version: 'primary',
-        }}
-        link={{
-          text: 'Согласен на обработку персональных данных',
-          href: '/privacy-policy',
-          target: '_blank',
-        }}
-        formColumns={1}
+        button={button}
+        link={link}
       />
       <PopupManager />
     </div>
   ),
-  antiFraud: (
+  selfCollection: (
     <div className="container grid grid-cols-12">
       <ApplicationFormCustom
         className="col-span-12"
-        title="Сообщить о возможных мошеннических действиях"
-        typeForm={'ANTIFRAUD'}
-        inputs={[
-          { name: 'surname', required: true },
-          { name: 'name', required: true },
-          { name: 'middleName' },
-          { name: 'phone', required: true },
-          { name: 'birthday', required: true },
-          { name: 'client' },
-          { name: 'comment', required: true },
-          { name: 'consentDataProcessing', required: true },
+        title="Самоинкассация (ЮЛ)"
+        typeForm="SELFCOLLECTION"
+        endpoint="sendcorporatelead"
+        sections={[
+          {
+            inputs: [
+              { name: 'fullName', required: true },
+              { name: 'region', required: true },
+              { name: 'phone', required: true },
+              { name: 'consentDataProcessing', required: true },
+            ],
+          },
         ]}
-        formColumns={1}
-        button={{
-          text: 'Отправить заявку',
-          version: 'primary',
-        }}
-        link={{
-          text: 'Согласен на обработку персональных данных',
-          href: '/privacy-policy',
-          target: '_blank',
-        }}
+        button={button}
+        link={link}
       />
       <PopupManager />
     </div>

package/src/components/ApplicationFormCustom/ApplicationFormCustom.tsx

@@ -10,8 +10,11 @@ import { isValidationSuccess } from '../../validation/validator';
 import { formStyle } from '../ApplicationForm/formStyle';
 import { getFormatData } from '../ApplicationForm/getFormatData';
 import { renderAgreementSubmit } from '../ApplicationForm/renderAgreementSubmit';
-import { type ApplicationFormCustomContent, type FieldDef } from './ApplicationFormCustomContent';
-import { columnStyle } from './columnStyle';
+import {
+  type ApplicationFormCustomContent,
+  type FieldDef,
+  type FormColumnsCount,
+} from './ApplicationFormCustomContent';
 import { getField } from './getField';
 import { getInitialFormState } from './getInitialFormState';
 import { getObjectValidator } from './getObjectValidator';
@@ -20,11 +23,10 @@ interface ApplicationFormCustomProps extends ApplicationFormCustomContent, UniBl
 const API = LeadServiceAPI();
 
 export const ApplicationFormCustom = JSX<ApplicationFormCustomProps>(
-  ({ className, title, typeForm = '', inputs = [], button, link, formColumns = 2, endpoint }) => {
+  ({ className, title, typeForm = '', sections = [], button, link, endpoint }) => {
+    const inputs = (sections?.flatMap((_) => _?.inputs) || []) as FieldDef[];
     const initialFormState = getInitialFormState(inputs, typeForm);
-
     const [responseType, setResponseType] = useState<'OK' | 'Fail' | ''>('');
-
     const feedbackValidator = objectValidator(getObjectValidator(inputs));
 
     const handleSubmit = useCallback(async (data: Record<string, any>) => {
@@ -47,9 +49,15 @@ export const ApplicationFormCustom = JSX<ApplicationFormCustomProps>(
         title={title}
         responseType={responseType}
       >
-        <form className={columnStyle[formColumns]} onSubmit={onSubmit}>
-          {inputs.map((_, index) => (
-            <div key={String(index)}>{getField(_, field)}</div>
+        <form className="" onSubmit={onSubmit}>
+          {sections.map((_, i) => (
+            <div
+              key={`section-${i}`}
+              className={style(inputColumnStyles(_.columns), 'grid gap-x-m')}
+            >
+              {_?.title ? <div className="@xl:text-center @xl:col-span-2">{_.title}</div> : null}
+              {_?.inputs?.map(getField(field))}
+            </div>
           ))}
           {renderAgreementSubmit(
             fieldName ? field('consentDataProcessing') : undefined,
@@ -62,5 +70,8 @@ export const ApplicationFormCustom = JSX<ApplicationFormCustomProps>(
   },
 );
 
+const inputColumnStyles = (column: FormColumnsCount | undefined) =>
+  column === 2 ? '@xl:grid-cols-2' : '';
+
 const getConsentDataProcessing = (inputs: FieldDef[]) =>
   inputs.find((_) => _?.name === 'consentDataProcessing');

package/src/components/ApplicationFormCustom/ApplicationFormCustom.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/ApplicationFormCustom/ApplicationFormCustomContent.ts

@@ -1,3 +1,5 @@
+/* eslint-disable max-len */
+
 import { type LabelProps, type TitleProps } from '../../model/HeadlineType';
 import { type LinkButtonVersion } from '../../model/LinkButtonVersion';
 import { type LinkProps } from '../../model/LinkProps';
@@ -16,11 +18,10 @@ export interface SubmitButtonProps {
   text?: string;
   version?: LinkButtonVersion;
 }
-
 /**
  * @title Название поля ввода
  * @required
- * @enumNames ["Фамилия", "Имя", "Отчество", "Email", "Телефон", "Комментарий", "Регион", "Тип формы", "День рождения", "Подзаголовок","Клиент банка", "Согласие на обработку"]
+ * @enumNames ["Фамилия", "Имя", "Отчество", "Email", "Телефон", "ФИО", "ИНН", "Комментарий", "Регион", "Тип формы", "День рождения", "Клиент банка", "Продукт", "Согласие на обработку"]
  */
 export type NameFieldDef =
   | 'surname'
@@ -28,12 +29,14 @@ export type NameFieldDef =
   | 'middleName'
   | 'email'
   | 'phone'
+  | 'fullName'
+  | 'inn'
   | 'comment'
   | 'region'
   | 'typeForm'
   | 'birthday'
-  | 'legend'
   | 'client'
+  | 'product'
   | 'consentDataProcessing';
 
 export type FieldDef = Required &
@@ -44,9 +47,16 @@ export type FieldDef = Required &
 /**
  * @title Тип формы
  * @required
- * @enumNames ["Факты коррупции", "Эквайринг", "Предупреждение о мошенничестве", "Заявка на бизнес-карту", "Самоинкассация", "Заявка для ФЛ"]
+ * @enumNames ["", "Эквайринг", "Предупреждение о мошенничестве", "Заявка на бизнес-карту", "Факты коррупции", "Самоинкассация", "Заявка для ФЛ"]
  */
-type TypeFormFieldDef = 'CORRUPTION' | 'ACQR' | 'ANTIFRAUD' | 'BCRD' | 'SELFCOLLECTION' | 'DPST';
+type TypeFormFieldDef =
+  | ''
+  | 'ACQR'
+  | 'ANTIFRAUD'
+  | 'BCRD'
+  | 'CORRUPTION'
+  | 'SELFCOLLECTION'
+  | 'DPST';
 
 /**
  * @title Количество колнок
@@ -60,6 +70,14 @@ export type FormColumnsCount = 1 | 2;
  */
 export type EndpointType = 'lead' | 'sendcorporatelead';
 
+/**
+ * @title Секция полей ввода
+ */
+export type SectionsProps = TitleProps & {
+  columns?: FormColumnsCount;
+  inputs?: FieldDef[];
+};
+
 /**
  * @title Форма заявки настраиваемая
  */
@@ -68,7 +86,6 @@ export type ApplicationFormCustomContent = UniBlockContent &
     button?: SubmitButtonProps;
     link?: LinkProps;
     typeForm?: TypeFormFieldDef;
-    inputs?: FieldDef[];
-    formColumns?: FormColumnsCount;
+    sections?: SectionsProps[];
     endpoint?: EndpointType;
   };

package/src/components/ApplicationFormCustom/contants.tsx

@@ -0,0 +1,6 @@
+import { type Option } from '../../ui-kit/Select/Option';
+
+export const SERVICE_TYPES: Option[] = [
+  { key: 'ULTRASERVICE', text: 'Ультра' },
+  { key: 'PREMIUMSERVICE', text: 'Премиум' },
+];

package/src/components/ApplicationFormCustom/getField.tsx

@@ -1,63 +1,69 @@
 import { type FieldProps, type FormFieldRegisterer } from '../../hooks/useForm';
 import { CheckboxWithError } from '../../ui-kit/Checkbox/CheckboxWithError';
-import { Heading } from '../../ui-kit/Heading/Heading';
+import { DatePickerControl } from '../../ui-kit/DatePicker/DatePickerControl';
 import { InputControl } from '../../ui-kit/Input/InputControl';
 import { type Validator } from '../../validation/validator';
 import { withValidator } from '../../validation/withValidator';
-import { DatePickerControl } from '../ApplicationForm/DatePickerControl';
 import { PhoneInputControl } from '../ApplicationForm/PhoneInputControl';
 import { RegionField } from '../ApplicationForm/RegionField';
-import { defaultValidator, nameValidator, phoneValidator } from '../ApplicationForm/validators';
 import { type FieldDef } from './ApplicationFormCustomContent';
+import { validatorObj } from './getObjectValidator';
 
-export const getField = (input: FieldDef, field: FormFieldRegisterer<any>) => {
+export const getField = (field: FormFieldRegisterer<any>) => (input: FieldDef, index: number) => {
   const { required } = input;
   const InputsMap = {
     surname: (
-      <InputControl label="Фамилия" {...getValidation(field('surname'), nameValidator, required)} />
+      <InputControl
+        label="Фамилия"
+        {...getValidation(field('surname'), validatorObj.surname, required)}
+      />
+    ),
+    name: (
+      <InputControl label="Имя" {...getValidation(field('name'), validatorObj.name, required)} />
     ),
-    name: <InputControl label="Имя" {...getValidation(field('name'), nameValidator, required)} />,
     middleName: (
       <InputControl label="Отчество (Обязательно, при наличии)" {...field('middleName')} />
     ),
     phone: (
       <PhoneInputControl
         label="Телефон"
-        {...getValidation(field('phone'), phoneValidator, required)}
+        {...getValidation(field('phone'), validatorObj.phone, required)}
       />
     ),
     email: (
       <InputControl
         label="Электронная почта"
-        {...getValidation(field('email'), defaultValidator, required)}
+        {...getValidation(field('email'), validatorObj.email, required)}
+      />
+    ),
+    fullName: (
+      <InputControl
+        label="ФИО"
+        {...getValidation(field('fullName'), validatorObj.fullName, required)}
       />
     ),
+    inn: <InputControl label="ИНН" {...getValidation(field('inn'), validatorObj.inn, required)} />,
     comment: (
       <InputControl
         className="col-span-2"
-        {...getValidation(field('comment'), defaultValidator, required)}
+        {...getValidation(field('comment'), validatorObj.comment, required)}
         placeholder="Ваше сообщение"
         isTextarea={true}
       />
     ),
-    region: <RegionField field={field} />,
-    client: (
-      <CheckboxWithError {...field('isClient')} text='Являюсь клиентом банка АО "Россельхозбанк"' />
-    ),
+    region: <RegionField field={field} input={input} />,
     birthday: (
       <DatePickerControl
         label="Дата рождения"
-        {...getValidation(field('birthday'), defaultValidator, required)}
+        {...getValidation(field('birthday'), validatorObj.birthday, required)}
       />
     ),
-    legend: (
-      <legend className="w-full col-span-2">
-        <Heading title={input.label} headingType="h6" className="@xl:text-center" />
-      </legend>
+    client: (
+      <CheckboxWithError {...field('isClient')} text='Являюсь клиентом банка АО "Россельхозбанк"' />
     ),
   };
 
-  return InputsMap[input.name];
+  return <div key={String(index)}>{InputsMap[input.name]}</div>;
 };
 
 const getValidation = (field: FieldProps<any>, validator: Validator, required = false) =>

package/src/components/ApplicationFormCustom/getInitialFormState.tsx

@@ -24,6 +24,7 @@ const initialFormState = {
   birthday: undefined,
   comment: '',
   consentDataProcessing: false,
+  product: '',
 };
 
 export const getInitialFormState = (inputs: FieldDef[], typeForm = ''): FormState => {

package/src/components/ApplicationFormCustom/getObjectValidator.tsx

@@ -1,21 +1,25 @@
 import { type Validator } from '../../validation/validator';
 import {
   checkboxValidator,
+  defaultSelectValidator,
   defaultValidator,
+  innValidator,
   nameValidator,
   phoneValidator,
 } from '../ApplicationForm/validators';
 import { type FieldDef } from './ApplicationFormCustomContent';
 import { getNamesFromInput } from './getNamesFromInput';
 
-const validator: Record<string, Validator> = {
+export const validatorObj: Record<string, Validator> = {
   typeForm: defaultValidator,
   surname: nameValidator,
   name: nameValidator,
-  region: defaultValidator,
+  region: defaultSelectValidator,
   phone: phoneValidator,
   birthday: defaultValidator,
   email: defaultValidator,
+  fullName: defaultValidator,
+  inn: innValidator,
   comment: defaultValidator,
   consentDataProcessing: checkboxValidator,
 };
@@ -25,5 +29,5 @@ export const getObjectValidator = (inputs: FieldDef[]): Record<string, Validator
     inputs.filter((_: FieldDef) => ('required' in _ ? _.required : false)),
   );
 
-  return Object.fromEntries(requiredInputs.map((_) => [_, validator?.[_]]));
+  return Object.fromEntries(requiredInputs.map((_) => [_, validatorObj?.[_]]));
 };

package/src/ui-kit/DatePicker/DatePicker.tsx

@@ -8,9 +8,9 @@ import { style } from '../../utils/style';
 import { type ControlProps } from '../ControlProps';
 import { Icon } from '../Icon/Icon';
 import { type IconName } from '../Icon/IconProps';
+import { renderLabel } from '../Input/renderLabel';
 import { Paragraph } from '../Paragraph/Paragraph';
 import { Select } from '../Select/Select';
-import { Text } from '../Text/Text';
 import { Calendar } from './Calendar';
 import { months } from './months';
 import { useDatePickerManager } from './useDatePickerManager';
@@ -66,43 +66,43 @@ export const DatePicker = JSX<DatePickerProps>(
     });
 
     return (
-      <div className={style(className, 'relative')} ref={ref}>
-        <Text size="text-m" font-weight="font-light">
-          {label}
-        </Text>
-        {renderDatePickerForm(handleChangeVisibleCalendar, value, valid)}
-        {showCalendar ? (
-          <div className="absolute bg-white z-20 select-none">
-            <div className="flex gap-s">
-              <div className="my-auto" onClick={handlePrevMonth}>
-                <Icon {...ICON_PROPS} className="-rotate-90 cursor-pointer" />
+      <div className={style('space-y-xs', className)} ref={ref}>
+        {renderLabel(label)}
+        <div className="relative">
+          {renderDatePickerForm(handleChangeVisibleCalendar, value, valid)}
+          {showCalendar ? (
+            <div className="absolute bg-white z-20 select-none">
+              <div className="flex gap-s">
+                <div className="my-auto" onClick={handlePrevMonth}>
+                  <Icon {...ICON_PROPS} className="-rotate-90 cursor-pointer" />
+                </div>
+                <Select
+                  onChange={handleSelectMonth}
+                  value={{ key: months[selectedMonth] }}
+                  options={monthsOptions}
+                  {...SELECT_PROPS}
+                />
+                <Select
+                  onChange={handleSelectYear}
+                  value={{ key: String(selectedYear) }}
+                  options={yearsOptions}
+                  {...SELECT_PROPS}
+                />
+                <div className="my-auto" onClick={handleNextMonth}>
+                  <Icon {...ICON_PROPS} className="rotate-90 cursor-pointer" />
+                </div>
               </div>
-              <Select
-                onChange={handleSelectMonth}
-                value={{ key: months[selectedMonth] }}
-                options={monthsOptions}
-                {...SELECT_PROPS}
+              <Calendar
+                today={value}
+                currentMonth={selectedMonth}
+                currentYear={selectedYear}
+                onDateSelect={onChange}
+                min={minDate}
+                max={maxDate}
               />
-              <Select
-                onChange={handleSelectYear}
-                value={{ key: String(selectedYear) }}
-                options={yearsOptions}
-                {...SELECT_PROPS}
-              />
-              <div className="my-auto" onClick={handleNextMonth}>
-                <Icon {...ICON_PROPS} className="rotate-90 cursor-pointer" />
-              </div>
             </div>
-            <Calendar
-              today={value}
-              currentMonth={selectedMonth}
-              currentYear={selectedYear}
-              onDateSelect={onChange}
-              min={minDate}
-              max={maxDate}
-            />
-          </div>
-        ) : null}
+          ) : null}
+        </div>
       </div>
     );
   },

package/src/ui-kit/DatePicker/DatePickerControl.tsx

@@ -0,0 +1,26 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+import { renderErrorText } from '../Input/renderErrorText';
+import { DatePicker } from './DatePicker';
+
+export interface DatePickerControlProps {
+  className?: string;
+  label: string;
+  value?: Date;
+  error?: string;
+  errors?: string[];
+  onChange?: (value: Date) => void;
+}
+
+export const DatePickerControl = JSX<DatePickerControlProps>(
+  ({ className, label, error, ...rest }) => (
+    <div className={style('shrink-0 w-full', className)}>
+      <DatePicker
+        label={label && rest?.errors ? `${label}*` : label}
+        valid={Boolean(!error)}
+        {...rest}
+      />
+      {renderErrorText(error)}
+    </div>
+  ),
+);

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

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
 import { style } from '../../utils/style';
-import { Text } from '../Text/Text';
 import { type InputProps } from './InputProps';
+import { renderLabel } from './renderLabel';
 
 export const Input = JSX<InputProps>(
   ({
@@ -42,8 +42,8 @@ export const Input = JSX<InputProps>(
 
     return (
       <div className={style('relative', className)}>
-        <label>
-          {label ? renderLabel(label) : null}
+        <label className="space-y-xs">
+          {renderLabel(label)}
           {isTextarea ? (
             <textarea
               className={style('block resize-y min-h-24', defaultStyle, validStyle)}
@@ -79,14 +79,6 @@ export const Input = JSX<InputProps>(
   },
 );
 
-const renderLabel = (label: string) => (
-  <div className="mb-xs">
-    <Text size="text-m" font="font-light">
-      {label}
-    </Text>
-  </div>
-);
-
 const getValidStyle = (valid: boolean) =>
   valid
     ? 'border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'

package/src/ui-kit/Input/renderErrorText.tsx

@@ -1,7 +1,7 @@
 import { Text } from '../Text/Text';
 
 export const renderErrorText = (error: string | undefined) => (
-  <div className="h-4">
+  <div className="h-6">
     {error ? (
       <Text size="text-xs" font="font-light" color="text-error">
         {error}

package/src/ui-kit/Input/renderLabel.tsx

@@ -0,0 +1,8 @@
+import { Text } from '../Text/Text';
+
+export const renderLabel = (label?: string) =>
+  label ? (
+    <Text size="text-m" color="text-primary-text" font="font-light">
+      {label}
+    </Text>
+  ) : null;