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

package/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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;

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

@@ -6,7 +6,7 @@ import { type IconVersion } from '../../model/IconVersion';
 import { style } from '../../utils/style';
 import { Icon } from '../Icon/Icon';
 import { Input } from '../Input/Input';
-import { Text } from '../Text/Text';
+import { renderLabel } from '../Input/renderLabel';
 import { formatOption } from './formatOption';
 import { type Option } from './Option';
 import { useSelectPopup } from './useSelectPopup';
@@ -21,9 +21,11 @@ export type SelectProps = LabelProps & {
   isSearch?: boolean;
   onChange?: (value: Option) => void;
   iconVersion?: IconVersion;
+  disabled?: boolean;
 };
 
 export const Select = JSX<SelectProps>(
+  // eslint-disable-next-line complexity
   ({
     className,
     label,
@@ -35,9 +37,12 @@ export const Select = JSX<SelectProps>(
     isSearch = false,
     iconVersion,
     onChange,
+    disabled,
   }) => {
     const [isOpen, { setFalse: close, setTrue: open }] = useBool();
     const [query, setQuery] = useState('');
+    const isDisabled = disabled || options.length === 0;
+    const hasOpen = isOpen && !isDisabled;
 
     const handleClose = useCallback(() => {
       setQuery('');
@@ -55,22 +60,22 @@ export const Select = JSX<SelectProps>(
     });
 
     return (
-      <div className={className}>
+      <div className={style('space-y-xs', className)}>
         {renderLabel(label)}
-        <div className={style('relative', isOpen ? 'z-20' : 'z-10')} ref={inputRef}>
+        <div className={style('relative', hasOpen ? 'z-20' : 'z-10')} ref={inputRef}>
           <div
             className={style(
-              'h-14 text-l flex justify-between items-center text-primary-text cursor-pointer relative z-10',
-              getBorderStyle(isBorder, valid),
+              'h-14 text-l flex justify-between items-center text-primary-text relative z-10',
+              getStyle(isBorder, valid, isDisabled),
             )}
-            onClick={isOpen ? handleClose : open}
+            onClick={hasOpen ? handleClose : open}
           >
             <p className="p-m pr-8 flex items-center overflow-hidden text-ellipsis">
               {formatOption(value) || placeholder}
             </p>
-            {renderIcon(isOpen, iconVersion)}
+            {renderIcon(hasOpen, iconVersion)}
           </div>
-          {isSearch && isOpen ? (
+          {isSearch && hasOpen ? (
             <div className={style('absolute top-0 w-full z-20')}>
               <Input type="text" autoFocus value={query} onChange={setQuery} />
             </div>
@@ -81,15 +86,6 @@ export const Select = JSX<SelectProps>(
   },
 );
 
-const renderLabel = (label?: string) =>
-  label ? (
-    <div className="mb-xs">
-      <Text size="text-m" color="text-primary-text" font="font-light">
-        {label}
-      </Text>
-    </div>
-  ) : null;
-
 const renderIcon = (isOpen: boolean, iconVersion?: IconVersion) => (
   <Icon
     className={style('absolute right-3', isOpen ? '' : 'rotate-180')}
@@ -100,8 +96,10 @@ const renderIcon = (isOpen: boolean, iconVersion?: IconVersion) => (
   />
 );
 
-const getBorderStyle = (isBorder: boolean, valid: boolean) =>
+const getStyle = (isBorder: boolean, valid: boolean, disabled: boolean) =>
   style(
-    isBorder ? 'border rounded-md hover:border-primary-hover' : '',
-    valid ? ' border-gray' : 'border-error',
+    isBorder ? 'border rounded-md ' : '',
+    isBorder && !disabled ? 'hover:border-primary-hover' : '',
+    disabled ? 'bg-main-divider' : 'cursor-pointer ',
+    valid ? 'border-gray' : 'border-error',
   );

package/mobile/src/{components/ApplicationForm → ui-kit/Select}/SelectControl.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { renderErrorText } from '../../ui-kit/Input/renderErrorText';
-import { Select, type SelectProps } from '../../ui-kit/Select/Select';
+import { renderErrorText } from '../Input/renderErrorText';
+import { Select, type SelectProps } from './Select';
 
 interface SelectControlProps extends SelectProps {
   label?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.201",
+  "version": "0.14.202",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/ApplicationForm/AddressBranchField.tsx

@@ -2,8 +2,8 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useBranches } from '../../hooks/useBranches';
 import { type FormFieldRegisterer } from '../../hooks/useForm';
 import { usePremiumBranchesByRegions } from '../../hooks/usePremiumBranchesByRegions';
+import { SelectControl } from '../../ui-kit/Select/SelectControl';
 import { withValidator } from '../../validation/withValidator';
-import { SelectControl } from './SelectControl';
 import { defaultSelectValidator } from './validators';
 
 interface RegionFieldProps {
@@ -12,22 +12,21 @@ interface RegionFieldProps {
   isPremium?: boolean;
 }
 
-export const AddressBranchField = JSX<RegionFieldProps>(
-  ({ field, regionKey, isPremium = false }) => {
-    const addressBranch = isPremium
-      ? usePremiumBranchesByRegions().find((_) => _?.region === regionKey)?.branches
-      : useBranches(regionKey).filter((branch) => branch?.address);
+export const AddressBranchField = JSX<RegionFieldProps>(({ field, isPremium = false }) => {
+  const regionKey = field('region')?.value?.key as string;
+  const addressBranch = isPremium
+    ? usePremiumBranchesByRegions().find((_) => _?.region === regionKey)?.branches
+    : useBranches(regionKey).filter((branch) => branch?.address);
 
-    return (
-      <SelectControl
-        label="Адрес"
-        placeholder="Выберите адрес"
-        options={(addressBranch || []).map(({ address = '' }) => ({
-          key: address,
-          text: address,
-        }))}
-        {...withValidator(field('addressBranch'), defaultSelectValidator)}
-      />
-    );
-  },
-);
+  return (
+    <SelectControl
+      label="Адрес"
+      placeholder="Выберите адрес"
+      options={(addressBranch || []).map(({ address = '' }) => ({
+        key: address,
+        text: address,
+      }))}
+      {...withValidator(field('addressBranch'), defaultSelectValidator)}
+    />
+  );
+});

package/src/components/ApplicationForm/ApplicationFieldsetLayout.tsx

@@ -7,7 +7,7 @@ export interface ApplicationFieldsetLayoutProp {
 
 export const ApplicationFieldsetLayout = JSX<ApplicationFieldsetLayoutProp>(
   ({ title, children }) => (
-    <fieldset className="grid @xl:flex @xl:justify-between gap-lg border-b border-b-main-divider @xl:border-none">
+    <fieldset className="grid @xl:flex @xl:justify-between gap-m border-b border-b-main-divider @xl:border-none">
       {title ? (
         <legend className="w-full">
           <Heading title={title} headingType="h6" className="@xl:text-center" />

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

@@ -5,7 +5,7 @@
         "text": "Отправить заявку",
         "version": "primary"
       },
-      "formType": "ApplicationFormBusinessCard"
+      "formType": "ApplicationFormFeedbackCard"
     },
     "version": "primary"
   }

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

@@ -28,10 +28,6 @@ const ApplicationFormAcquiring: ApplicationFormContent = {
   formBlock: { ...formBlockProps, formType: 'ApplicationFormAcquiring' },
 };
 
-const ApplicationFormBusinessCard: ApplicationFormContent = {
-  formBlock: { ...formBlockProps, formType: 'ApplicationFormBusinessCard' },
-};
-
 const ApplicationFormDeposit: ApplicationFormContent = {
   formBlock: { ...formBlockProps, formType: 'ApplicationFormDeposit' },
 };
@@ -62,14 +58,6 @@ const ApplicationFormFeedback: ApplicationFormContent = {
   formBlock: { ...formBlockProps, formType: 'ApplicationFormFeedback' },
 };
 
-const ApplicationFormSelfCollection: ApplicationFormContent = {
-  formBlock: {
-    ...formBlockProps,
-    formType: 'ApplicationFormSelfCollection',
-    title: 'Факты коррупции',
-  },
-};
-
 const ApplicationFormUltraPremium: ApplicationFormContent = {
   formBlock: {
     ...formBlockProps,
@@ -91,13 +79,6 @@ export default {
       <PopupManager />
     </div>
   ),
-  'business-card': (
-    <div className="container grid grid-cols-12">
-      <ApplicationForm className="col-span-12" {...ApplicationFormBusinessCard} />
-      <PopupManager />
-    </div>
-  ),
-
   deposit: (
     <div className="container grid grid-cols-12">
       <ApplicationForm className="col-span-12" {...ApplicationFormDeposit} />
@@ -128,12 +109,6 @@ export default {
       <PopupManager />
     </div>
   ),
-  'self-collection': (
-    <div className="container grid grid-cols-12">
-      <ApplicationForm className="col-span-12" {...ApplicationFormSelfCollection} />
-      <PopupManager />
-    </div>
-  ),
   'ultra-premium': (
     <div className="container grid grid-cols-12">
       <ApplicationForm className="col-span-12" {...ApplicationFormUltraPremium} />