@redneckz/wildless-cms-uni-blocks 0.14.547 → 0.14.549

package/mobile/src/components/CalculatorDeposit/CalculatorDeposit.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable max-lines, max-lines-per-function */
-import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { type JSONRefObject } from '../../data/JSONRefObject';
 import { useForm } from '../../hooks/useForm';
 import { Button } from '../../ui-kit/Button/Button';
@@ -18,20 +18,25 @@ import { type Option } from '../../ui-kit/Select/Option';
 import { SelectControl } from '../../ui-kit/Select/SelectControl';
 import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
-import { clamp } from '../../utils/clamp';
 import { style } from '../../utils/style';
 import { isDefaultParams } from '../CalculatorCredit/isDefaultParams';
-import { isNotRubles } from '././isNotRubles';
-import { type CalculatorDepositContent } from './CalculatorDepositContent';
+import { type CalculatorDepositContent, type DepositParams } from './CalculatorDepositContent';
 import {
   getDepositCalculatorParams,
   type DepositCalculatorData,
-  type DepositCalculatorRowsData,
   type DepositCalculatorSourceBookParams,
   type TariffsButtonContent,
 } from './getDepositCalculatorParams';
+import { isRubles } from './isRubles';
 import { renderDepositParamsForm } from './renderDepositParamsForm';
 import { renderDepositResult } from './renderDepositResult';
+import {
+  getRows,
+  normalizeCurrency,
+  normalizeMoneyValue,
+  normalizeMonthValue,
+  normalizeReplenishWithdrawn,
+} from './utils';
 
 const MAP = {
   isMonthlyInterestPayment: 'isMonthlyInterestPayment',
@@ -47,6 +52,7 @@ const DEFAULT_CURRENCY: Option = {
 };
 
 const DEPOSIT_DEFAULT_SUM = 20000;
+const DEPOSIT_DEFAULT_MONTHS = 1;
 
 export interface CalculatorDepositProps extends CalculatorDepositContent, UniBlockProps {
   className?: string;
@@ -65,81 +71,57 @@ export const CalculatorDeposit = UniBlock<CalculatorDepositProps>(
   }) => {
     const { rows } = calcSource ?? {};
     const currencyOptions = rows?.map((_) => _.currency) ?? [DEFAULT_CURRENCY];
-
-    const [userInputParams, { field }] = useForm({
-      moneyValue: getMoneyDefaultValue(defaultParams, DEPOSIT_DEFAULT_SUM),
-      monthsValue: getMonthsDefaultValue(defaultParams),
-      isMonthlyInterestPayment: Boolean(defaultParams?.isMonthlyInterestPayment),
-      isRemoteRegistration: Boolean(defaultParams?.isRemoteRegistration),
-      isReplenish: Boolean(defaultParams?.isReplenish),
-      isWithdrawn: Boolean(defaultParams?.isWithdrawn),
-      currency: DEFAULT_CURRENCY,
-    });
-    const currencyValue = field?.('currency')?.value;
-    const { onChange: setMonthsValue } = field('monthsValue');
-    const { onChange: setMoneyValue } = field('moneyValue');
-
-    const row = getRows(rows, currencyValue);
-    const [defParams, setDefParams] = useState(getDefaultParamsMax(rows?.[0]?.rates));
-
-    const calcParams = getDepositCalculatorParams(
-      userInputParams,
-      getRows(rows, currencyValue),
-      paramsViewSettings,
+    const normalize = useCallback(
+      (_: DepositParams) =>
+        !rows
+          ? _
+          : {
+              ..._,
+              ...normalizeReplenishWithdrawn(_),
+              ...normalizeMoneyValue(_, rows),
+              ...normalizeMonthValue(_, rows),
+              ...normalizeCurrency(_, rows),
+            },
+
+      [rows],
+    );
+    const [userInputParams, { field }] = useForm(
+      {
+        moneyValue: getMoneyDefaultValue(defaultParams, DEPOSIT_DEFAULT_SUM),
+        monthsValue: getMonthsDefaultValue(defaultParams, DEPOSIT_DEFAULT_MONTHS),
+        isMonthlyInterestPayment: Boolean(defaultParams?.isMonthlyInterestPayment),
+        isRemoteRegistration: Boolean(defaultParams?.isRemoteRegistration),
+        isReplenish: Boolean(defaultParams?.isReplenish),
+        isWithdrawn: Boolean(defaultParams?.isWithdrawn),
+        isNewClient: Boolean(defaultParams?.isNewClient),
+        currency: DEFAULT_CURRENCY,
+      },
+      { normalize },
     );
 
-    useEffect(() => {
-      if (currencyOptions?.[0]) {
-        field?.('currency')?.onChange?.(currencyOptions?.[0]);
-      }
-    }, [calcSource]);
+    const currencyValue = field?.('currency')?.value ?? DEFAULT_CURRENCY;
+    const isNewClient = field?.('isNewClient')?.value;
+    const row = getRows(rows, currencyValue);
+    const calcParams = getDepositCalculatorParams(userInputParams, row, paramsViewSettings);
+    const { rate, income, finalSum, type = '' } = calcParams;
 
     const handleDefaultParamsCals = () => {
       setDefaultParamsCalc({
         field,
-        defParams: defParams as DepositCalculatorSourceBookParams,
+        defParams: getDefaultParamsMax(row, isNewClient) as DepositCalculatorSourceBookParams,
         calcParams,
         monthsValue: 'minMonths',
         map: MAP,
       });
     };
 
-    const { defaultMonth, rate, income, finalSum, type = '' } = calcParams;
-
-    useEffect(() => {
-      setDefParams(getDefaultParamsMax(row));
-    }, [currencyValue, rows]);
-
-    useEffect(() => {
-      !userInputParams.monthsValue && setMonthsValue && setMonthsValue(defaultMonth);
-    }, [defaultMonth]);
-
-    useEffect(() => {
-      setMoneyValue &&
-        setMoneyValue(clamp(userInputParams.moneyValue, calcParams.minSum, calcParams.maxSum));
-    }, [calcParams.minSum, calcParams.maxSum, row]);
-
     useEffect(() => {
-      if (!isDefaultParams(defaultParams) && defParams) {
+      if (!isDefaultParams(defaultParams) && row) {
         handleDefaultParamsCals();
       }
-    }, [defParams, defaultParams]);
+    }, [defaultParams, rows]);
 
-    useEffect(() => {
-      setMoneyValue?.(clamp(userInputParams.moneyValue, calcParams.minSum, calcParams.maxSum));
-      if (isNotRubles(currencyValue?.key)) {
-        field?.('isReplenish')?.onChange?.(false);
-        field?.('isWithdrawn')?.onChange?.(false);
-      }
-    }, [currencyValue]);
-
-    useEffect(() => {
-      if (!isDefaultParams(defaultParams) && defParams) {
-        handleDefaultParamsCals();
-      }
-    }, [defaultParams, row, defParams]);
-
-    const isMaxRate = rate === defParams?.rate;
+    const isMaxRate = rate === getDefaultParamsMax(row, isNewClient)?.rate;
 
     return (
       <CalculatorLayout className={className} title={title} {...rest}>
@@ -188,7 +170,7 @@ export const CalculatorDeposit = UniBlock<CalculatorDepositProps>(
   },
 );
 
-const getStep = (key = '') => (isNotRubles(key) ? 100 : 1000);
+const getStep = (key = '') => (isRubles(key) ? 1000 : 100);
 
 const getTariffButton = (buttons: TariffsButtonContent[] = [], btnType = '') => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -203,9 +185,3 @@ const renderMaxRateButton = (handleDefaultParamsCals: () => void, isMaxRate = fa
       Показать максимальную ставку
     </Button>
   );
-
-const getRows = (rows?: DepositCalculatorRowsData[], currencyValue?: Option) => {
-  const { rates } = rows?.find((_) => _?.currency.key === currencyValue?.key) ?? {};
-
-  return rates ?? rows?.[0]?.rates;
-};

package/mobile/src/components/CalculatorDeposit/CalculatorDepositContent.ts

@@ -1,7 +1,9 @@
 import {
+  type CalcValueProps,
   type CommonCalculatorProps,
   type CommonDefaultParams,
 } from '../../ui-kit/Calculator/CalculatorProps';
+import { type Option } from '../../ui-kit/Select/Option';
 import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
 
 export interface CalculatorDepositParamsViewSettings {
@@ -19,10 +21,12 @@ export interface CalculatorDepositParamsViewSettings {
   isShowReplenish?: boolean;
   /** @title Снятие */
   isShowWithdrawn?: boolean;
+  /** @title Новый клиент */
+  isShowNewClient?: boolean;
 }
 
 export interface CommonDepositParams {
-  /** @title Возможность помолнять */
+  /** @title Возможность пополнять */
   isReplenish?: boolean;
   /** @title Возможно снимать */
   isWithdrawn?: boolean;
@@ -30,11 +34,16 @@ export interface CommonDepositParams {
   isMonthlyInterestPayment?: boolean;
   /** @title Дистанционное оформление */
   isRemoteRegistration?: boolean;
+  /** @title Новый клиент */
+  isNewClient?: boolean;
+  /** @title Валюта */
+  currency?: Option;
   /** @hidden */
   type?: string;
 }
 
 export interface DepositDefaultParams extends CommonDefaultParams, CommonDepositParams {}
+export interface DepositParams extends DepositDefaultParams, CalcValueProps {}
 
 /**
  * @title Калькулятор вкладов

package/mobile/src/components/CalculatorDeposit/getDepositCalculatorParams.ts

@@ -27,7 +27,9 @@ const DEFAULT_DEPOSIT_CALCULATOR_PARAMS: DepositCalculatorSourceBookParams = {
 
 export interface DepositCalculatorSourceBookParams
   extends CommonDepositParams,
-    CalcDefaultParamsProps {}
+    CalcDefaultParamsProps {
+  currency?: Option;
+}
 
 export interface DepositCalculatorUserInputParams extends CommonDepositParams, CalcValueProps {}
 
@@ -47,7 +49,7 @@ export type TariffsButtonContent = LinkButtonContent & {
 
 export type DepositCalculatorRowsData = {
   currency: Option;
-  rates?: DepositCalculatorSourceBookParams[];
+  rates: DepositCalculatorSourceBookParams[];
 };
 
 export type DepositCalculatorData = {
@@ -66,35 +68,38 @@ export const getDepositCalculatorParams = (
   const isExcludeRemoteRegistration = !paramsViewSettings?.isShowRemoteRegistration;
   const isExcludeReplenish = !paramsViewSettings?.isShowReplenish;
   const isExcludeWithdrawn = !paramsViewSettings?.isShowWithdrawn;
+  const isExcludeNewClient = !paramsViewSettings?.isShowNewClient;
   const depositCalculatorSourceBookParams =
-    rows?.find(
-      (row) =>
+    rows?.find((row) =>
+      [
         checkRowByParam({
           row,
           userInputParams,
           paramKey: 'isReplenish',
           isExclude: isExcludeReplenish,
-        }) &&
+        }),
         checkRowByParam({
           row,
           userInputParams,
           paramKey: 'isWithdrawn',
           isExclude: isExcludeWithdrawn,
-        }) &&
+        }),
         checkRowByParam({
           row,
           userInputParams,
           paramKey: 'isMonthlyInterestPayment',
           isExclude: isExcludeMonthlyInterestPayment,
-        }) &&
+        }),
         checkRowByParam({
           row,
           userInputParams,
           paramKey: 'isRemoteRegistration',
           isExclude: isExcludeRemoteRegistration,
-        }) &&
-        checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], row) &&
+        }),
+        isExcludeNewClient || userInputParams?.['isNewClient'] === row?.['isNewClient'],
+        checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], row),
         checkRangeByKeys(monthsValue || defaultMonth, ['minMonths', 'maxMonths'], row),
+      ].every(Boolean),
     ) || DEFAULT_DEPOSIT_CALCULATOR_PARAMS;
 
   const { rate } = depositCalculatorSourceBookParams;

package/mobile/src/components/CalculatorDeposit/isRubles.tsx

@@ -0,0 +1 @@
+export const isRubles = (currency = 'rub') => currency === 'rub';

package/mobile/src/components/CalculatorDeposit/renderDepositParamsForm.tsx

@@ -1,6 +1,7 @@
 import { type FormFieldRegisterer } from '../../hooks/useForm';
 import { renderBinaryRadioButtonGroup } from '../../ui-kit/Calculator/renderBinaryRadioButtonGroup';
 import { renderPayout } from '../../ui-kit/Calculator/renderPayout';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { type CalculatorDepositParamsViewSettings } from './CalculatorDepositContent';
 import { type DepositCalculatorParams } from './getDepositCalculatorParams';
 import { renderRegistrationType } from './renderRegistrationType';
@@ -41,7 +42,7 @@ export const renderDepositParamsForm = (
             })
           : null}
       </div>
-      {separatorStyles(params.isShowReplenish || params.isShowWithdrawn)}
+      {renderSeparator(params.isShowReplenish || params.isShowWithdrawn)}
       <div className="flex gap-lg">
         {params.isShowMonthlyInterestPayment
           ? renderPayout({
@@ -60,9 +61,11 @@ export const renderDepositParamsForm = (
             })
           : null}
       </div>
+      {renderSeparator(params.isShowNewClient)}
+      {params.isShowNewClient ? <Checkbox text="Новый вкладчик" {...field('isNewClient')} /> : null}
     </div>
   );
 };
 
-const separatorStyles = (isShow = false) =>
+const renderSeparator = (isShow = false) =>
   isShow ? <div className="border-b border-main-divider w-full"></div> : null;

package/mobile/src/components/CalculatorDeposit/utils.tsx

@@ -0,0 +1,37 @@
+import { getRangeByKeys } from '../../ui-kit/Calculator/rangeHelpers';
+import { type Option } from '../../ui-kit/Select/Option';
+import { clamp } from '../../utils/clamp';
+import { type DepositParams } from './CalculatorDepositContent';
+import { type DepositCalculatorRowsData } from './getDepositCalculatorParams';
+import { isRubles } from './isRubles';
+
+export const normalizeMonthValue = (_: DepositParams, rows?: DepositCalculatorRowsData[]) => {
+  const { minMonths, maxMonths } = getRangeByKeys(
+    ['minMonths', 'maxMonths'],
+    getRows(rows, _?.currency),
+  );
+  const monthsValue = _.monthsValue || Math.round((minMonths + maxMonths) / 2);
+
+  return { monthsValue: clamp(monthsValue, minMonths, maxMonths) };
+};
+
+export const normalizeMoneyValue = (_: DepositParams, rows?: DepositCalculatorRowsData[]) => {
+  const { minSum, maxSum } = getRangeByKeys(['minSum', 'maxSum'], getRows(rows, _?.currency));
+  const moneyValue = _.moneyValue || minSum;
+
+  return { moneyValue: clamp(moneyValue, minSum, maxSum) };
+};
+export const normalizeCurrency = (_: DepositParams, rows?: DepositCalculatorRowsData[]) => ({
+  currency: _?.currency ?? rows?.map((row) => row.currency)?.[0],
+});
+
+export const normalizeReplenishWithdrawn = (_: DepositParams) => {
+  const _isRubles = isRubles(_?.currency?.key);
+
+  return { isReplenish: _isRubles && _?.isReplenish, isWithdrawn: _isRubles && _?.isWithdrawn };
+};
+export const getRows = (rows?: DepositCalculatorRowsData[], currencyValue?: Option) => {
+  const { rates } = rows?.find((_) => _?.currency.key === currencyValue?.key) ?? {};
+
+  return rates ?? rows?.[0]?.rates;
+};

package/mobile/src/hooks/useForm.ts

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { type ControlProps } from '../ui-kit/ControlProps';
 import { type PreventableEvent, type PreventableEventWithTarget } from '../ui-kit/PreventableEvent';
 import { identity } from '../utils/fp/identity';
@@ -25,45 +25,59 @@ export interface FormOperatorProps<FormState extends Record<string, any>> {
   onSubmit?: (ev: PreventableEvent) => void;
 }
 
+// eslint-disable-next-line max-lines-per-function
 export const useForm = <FormState extends Record<string, any>>(
   initialState: FormState,
   {
     resetOnSubmit,
     onSubmit,
+    normalize,
   }: {
     resetOnSubmit?: boolean;
     onSubmit?: (_: FormState, ev: PreventableEventWithTarget) => void;
+    normalize?: (_: FormState) => FormState;
   } = {},
 ): [FormState, FormOperatorProps<FormState>] => {
-  const [formState, setFormState] = useState<FormState>(initialState);
-
+  const [formState, setFormStateUnsafe] = useState<FormState>(initialState);
+  const setFormState = useCallback(
+    normalize
+      ? (_: FormState | ((prev: FormState) => FormState)) =>
+          setFormStateUnsafe(
+            _ instanceof Function
+              ? (prev) => {
+                  const _normalize = normalize(_(prev));
+
+                  return shellowCompare(prev, _normalize) ? prev : _normalize;
+                }
+              : normalize(_),
+          )
+      : setFormStateUnsafe,
+    [normalize],
+  );
+  useEffect(() => {
+    if (normalize) {
+      setFormStateUnsafe(normalize);
+    }
+  }, [normalize]);
   const [isDirtyForm, setDirtyForm] = useState(false);
   const [dirtyFieldsMap, setDirtyFieldsMap] = useState<Partial<Record<keyof FormState, boolean>>>(
     {},
   );
 
-  const handlersMap = useRef<Partial<Record<keyof FormState, (value: any) => void>>>({});
-
   const field: FormFieldRegisterer<FormState> = useCallback(
     (fieldName, options) => {
       const { parse = identity, format = identity } = options || {};
 
-      if (!handlersMap.current) {
-        handlersMap.current = {};
-      }
-
-      handlersMap.current[fieldName] ||= (value) => {
-        setFormState((prev) => ({ ...prev, [fieldName]: parse(value) }));
-        setDirtyFieldsMap((prev) => ({ ...prev, [fieldName]: true }));
-      };
-
       return {
         value: format(formState[fieldName]) as any,
         isDirty: isDirtyForm || dirtyFieldsMap[fieldName],
-        onChange: handlersMap.current[fieldName],
+        onChange: (value) => {
+          setFormState((prev) => ({ ...prev, [fieldName]: parse(value) }));
+          setDirtyFieldsMap((prev) => ({ ...prev, [fieldName]: true }));
+        },
       };
     },
-    [formState, isDirtyForm, dirtyFieldsMap],
+    [setFormState, isDirtyForm, dirtyFieldsMap],
   );
 
   const update = useCallback((_: FormState) => {
@@ -99,3 +113,6 @@ export const useForm = <FormState extends Record<string, any>>(
     },
   ];
 };
+
+const shellowCompare = (a: Record<string, any>, b: Record<string, any>): boolean =>
+  Object.keys({ ...a, ...b }).every((key) => a[key] === b[key]);

package/mobile/src/hooks/useRegions.ts

@@ -8,10 +8,11 @@ export interface Region {
   code?: string;
   name?: string;
   slug?: string;
+  localities?: string[];
 }
 
-export function useRegions(): Region[] {
-  const { data } = useAsyncData(REGIONS_URL, fetchJSONUnsafe as FetchJSONUnsafeType<Region[]>);
+export function useRegions(url: string = REGIONS_URL): Region[] {
+  const { data } = useAsyncData(url, fetchJSONUnsafe as FetchJSONUnsafeType<Region[]>);
 
   return Array.isArray(data) ? data : [];
 }

package/mobile/src/ui-kit/BenefitsList/DefaultBenefitsList.tsx

@@ -1,34 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { deviation } from '../../utils/deviation';
 import { style } from '../../utils/style';
 import { BenefitItem } from '../BenefitItem/BenefitItem';
-import { type BenefitItemContent } from '../BenefitItem/BenefitItemContent';
 import { type BenefitsListProps } from './BenefitsListProps';
 
-const MAX_BENEFITS_LEN_DEVIATION = 16;
-
-const benefitLength = (_: BenefitItemContent) =>
-  Math.max(_?.label?.length || 0, _?.description?.length || 0, _?.__html?.length || 0);
-
-const isDistortedBenefits = (benefits: BenefitItemContent[]) =>
-  deviation(benefits.map(benefitLength)) > MAX_BENEFITS_LEN_DEVIATION;
-
-const hasIcon = (_: BenefitItemContent) =>
-  _ && 'icon' in _ && _.icon && (_.icon.icon || _.icon.src);
-
-const isTextualBenefits = (benefits: BenefitItemContent[]) => !benefits.some(hasIcon);
-
 export const DefaultBenefitsList = JSX<BenefitsListProps>(
   ({ className, benefitsVersion = 'normal', benefits }) =>
     benefits?.length ? (
-      <div
-        className={style(
-          'flex gap-x-m gap-y-s',
-          isDistortedBenefits(benefits) || isTextualBenefits(benefits) ? 'flex-col' : 'flex-wrap',
-          className,
-        )}
-        role="list"
-      >
+      <div className={style('flex gap-x-m gap-y-s flex-col', className)} role="list">
         {benefits.map((_, i) => (
           <BenefitItem key={String(i)} benefitsVersion={benefitsVersion} {..._} />
         ))}

package/mobile/src/ui-kit/Calculator/CalculatorStyle.tsx

@@ -1,5 +1,5 @@
 export const CalculatorStyle = {
   wrapper: 'flex flex-col justify-between @4xl:flex-row gap-x-4xl gap-y-7 @xl:gap-y-4xl',
   input: 'flex flex-col lg:max-w-80 lg:w-1/2 gap-2xl',
-  result: 'flex flex-col gap-y-xl min-w-60',
+  result: 'flex flex-col gap-y-xl min-w-52',
 };

package/mobile/src/ui-kit/Calculator/getDefaultParams.tsx

@@ -1,4 +1,3 @@
-import { type CreditCalculatorSourceBookParams } from '../../components/CalculatorCredit/CalculatorCreditContent';
 import { type DepositCalculatorSourceBookParams } from '../../components/CalculatorDeposit/getDepositCalculatorParams';
 import { type CalcDefaultParamsProps } from './CalculatorProps';
 
@@ -8,11 +7,12 @@ export const getDefaultParamsMin = (rateRows?: CalcDefaultParamsProps[]) =>
     rateRows,
   );
 export const getDefaultParamsMax = (
-  rateRows?: CreditCalculatorSourceBookParams[] | DepositCalculatorSourceBookParams[],
+  rateRows: DepositCalculatorSourceBookParams[] = [],
+  isNewClient = false,
 ) =>
   getDefaultParams(
     [(i: number, acc: number) => i > acc, (i, prev) => i?.minSum < prev?.minSum],
-    rateRows,
+    rateRows?.filter((_) => isNewClient === Boolean(_?.isNewClient)),
   );
 
 const getDefaultParams = (

package/package.json

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

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

@@ -826,5 +826,84 @@
         }
       }
     }
+  ],
+  [
+    "Выездной менеджер ФЛ",
+    {
+      "content": {
+        "version": "primary",
+        "padding": "",
+        "title": "Заявка на консультацию",
+        "typeForm": "OUTSERVICE",
+        "endpoint": "lead",
+        "sections": [
+          {
+            "inputs": [
+              {
+                "fieldType": "common",
+                "name": "product",
+                "required": true
+              },
+              {
+                "fieldType": "common",
+                "name": "region",
+                "required": true
+              },
+              {
+                "fieldType": "common",
+                "name": "localities",
+                "required": true
+              },
+              {
+                "fieldType": "common",
+                "name": "fullName",
+                "required": true
+              }
+            ]
+          },
+          {
+            "columns": 2,
+            "inputs": [
+              {
+                "fieldType": "common",
+                "name": "birthday",
+                "required": true
+              },
+              {
+                "fieldType": "common",
+                "name": "phone",
+                "required": true
+              },
+              {
+                "fieldType": "common",
+                "name": "email"
+              },
+              {
+                "fieldType": "common",
+                "name": "desiredMeetingDate"
+              }
+            ]
+          },
+          {
+            "inputs": [
+              {
+                "fieldType": "common",
+                "name": "consentDataProcessing",
+                "required": true
+              }
+            ]
+          }
+        ],
+        "button": {
+          "text": "Отправить заявку",
+          "version": "primary"
+        },
+        "link": {
+          "text": "Согласен на обработку персональных данных",
+          "href": "/privacy-policy",
+          "target": "_blank"
+        }
+      }
+    }
   ]
 ]

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

@@ -651,4 +651,38 @@ export default {
       <DialogManager />
     </div>
   ),
+  outservice: (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm
+        className="col-span-12"
+        title="Заявка на консультацию OUTSEVICE"
+        typeForm="OUTSERVICE"
+        endpoint="lead"
+        sections={[
+          {
+            inputs: [
+              { fieldType: 'common', name: 'product', required: true },
+              { fieldType: 'common', name: 'region', required: true },
+              { fieldType: 'common', name: 'localities', required: true },
+              { fieldType: 'common', name: 'fullName', required: true },
+            ],
+          },
+          {
+            columns: 2,
+            inputs: [
+              { fieldType: 'common', name: 'birthday', required: true },
+              { fieldType: 'common', name: 'phone', required: true },
+              { fieldType: 'common', name: 'email' },
+              { fieldType: 'common', name: 'desiredMeetingDate' },
+            ],
+          },
+          { inputs: [{ fieldType: 'common', name: 'consentDataProcessing', required: true }] },
+        ]}
+        button={button}
+        link={link}
+      />
+      <PopupManager />
+      <DialogManager />
+    </div>
+  ),
 };