@redneckz/wildless-cms-uni-blocks 0.14.26 → 0.14.27

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

@@ -6,7 +6,7 @@ import { Img } from '../Img/Img';
 
 export const NotFound = JSX<NotFoundContent>(({ title, description }) => (
   <div className="bg-white p-6xl py-20 flex gap-s flex-col @xl:items-center">
-    <Img image={{ icon: 'MagnifierIcon' }} width="120" height="120" />
+    <Img image={{ icon: 'MagnifierIcon', iconVersion: 'normal' }} width="120" height="120" />
     <Headline
       title={title}
       description={description}

package/mobile/src/ui-kit/SearchDialog/SearchInput.tsx

@@ -28,7 +28,7 @@ export const SearchInput = JSX<SearchInputProps>(
         </div>
         <input
           className={style(
-            'h-12 w-full px-10 text-l text-black outline-none box-border border border-solid rounded-md',
+            'h-14 w-full px-10 text-l text-black outline-none box-border border border-solid rounded-md',
             'border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text',
           )}
           value={value}

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

@@ -59,7 +59,7 @@ export const Select = JSX<SelectProps>(
         <div className={style('relative', isOpen ? 'z-20' : 'z-10')} ref={inputRef}>
           <div
             className={style(
-              'text-l flex justify-between items-center text-primary-text cursor-pointer relative z-10',
+              'h-14 text-l flex justify-between items-center text-primary-text cursor-pointer relative z-10',
               getBorderStyle(isBorder, valid),
             )}
             onClick={isOpen ? handleClose : open}

package/package.json

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

package/src/api/{CorporateLeadAPI.ts → LeadServiceAPI.ts}

@@ -12,10 +12,12 @@ export interface DaDataResult {
   suggestions?: DaDataSuggestion<DaDataAddress>[];
 }
 
-export function CorporateLeadAPI() {
-  async function send(body: Record<string, string>) {
+export function LeadServiceAPI() {
+  async function send(body: Record<string, string>, isIndividualType?: boolean) {
+    const url = isIndividualType ? '/api/v1/lead' : '/api/v1/sendcorporatelead';
+
     try {
-      const response = await fetch('/api/v1/sendcorporatelead', {
+      const response = await fetch(url, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         mode: 'cors',

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

@@ -48,6 +48,14 @@ const ApplicationFormGrantSupport: ApplicationFormContent = {
   },
 };
 
+const ApplicationFormIndividuals: ApplicationFormContent = {
+  formBlock: {
+    ...formBlockProps,
+    formType: 'ApplicationFormIndividuals',
+    product: 'product',
+  },
+};
+
 export default {
   credit: (
     <div className="container grid grid-cols-12">
@@ -85,4 +93,10 @@ export default {
       <PopupManager />
     </div>
   ),
+  individuals: (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm className="col-span-12" {...ApplicationFormIndividuals} />
+      <PopupManager />
+    </div>
+  ),
 };

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

@@ -48,6 +48,14 @@ const ApplicationFormGrantSupport: ApplicationFormContent = {
   },
 };
 
+const ApplicationFormIndividuals: ApplicationFormContent = {
+  formBlock: {
+    ...formBlockProps,
+    formType: 'ApplicationFormIndividuals',
+    product: 'product',
+  },
+};
+
 export default {
   credit: (
     <div className="container grid grid-cols-12">
@@ -85,4 +93,10 @@ export default {
       <PopupManager />
     </div>
   ),
+  individuals: (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm className="col-span-12" {...ApplicationFormIndividuals} />
+      <PopupManager />
+    </div>
+  ),
 };

package/src/components/ApplicationForm/ApplicationForm.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { CorporateLeadAPI } from '../../api/CorporateLeadAPI';
+import { LeadServiceAPI } from '../../api/LeadServiceAPI';
 import { type UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -13,19 +13,22 @@ import { ResponseNotification } from './ResponseNotification';
 
 export interface ApplicationFormProps extends ApplicationFormContent, UniBlockProps {}
 
-const API = CorporateLeadAPI();
+const API = LeadServiceAPI();
 
 export const ApplicationForm = JSX<ApplicationFormProps>((props) => {
   const { className, formBlock, ...rest } = props;
 
   const [responseType, setResponseType] = useState<'OK' | 'Fail' | ''>('');
 
-  const handleSubmit = useCallback(async (data: Record<string, any>) => {
-    const status = (await API.send(data)) ? 'OK' : 'Fail';
-    setResponseType(status);
+  const handleSubmit = useCallback(
+    async (data: Record<string, any>, isIndividualType?: boolean) => {
+      const status = (await API.send(data, isIndividualType)) ? 'OK' : 'Fail';
+      setResponseType(status);
 
-    return status;
-  }, []);
+      return status;
+    },
+    [],
+  );
 
   return (
     <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
@@ -42,7 +45,10 @@ export const ApplicationForm = JSX<ApplicationFormProps>((props) => {
 
 const renderEmbeddedForm = (
   formBlock: ApplicationFormBlockDef,
-  handleSubmit: (data: Record<string, string>) => Promise<'OK' | 'Fail'>,
+  handleSubmit: (
+    data: Record<string, string>,
+    isIndividualType?: boolean,
+  ) => Promise<'OK' | 'Fail'>,
 ) => {
   const type = formBlock?.formType;
   if (!type || !(type in EmbeddableForms)) {

package/src/components/ApplicationForm/ApplicationForm.ui.json

@@ -4,8 +4,11 @@
       "formType": {
         "ui:widget": "hidden"
       },
-      "sourceBookDir": {
-        "ui:widget": "sourceBook"
+      "product": {
+        "ui:widget": "sourceBookDataDropdown",
+        "ui:options": {
+          "sourceName": "products"
+        }
       }
     }
   }

package/src/components/ApplicationForm/ApplicationFormContent.ts

@@ -74,6 +74,17 @@ export type GrantSupportFormParamsDef = TitleProps & {
   sourceBookDir?: string;
 };
 
+/**
+ * @title Заявка для ФЛ
+ */
+export type IndividualsFormParamsDef = TitleProps & {
+  /** @default ApplicationFormIndividuals */
+  formType: 'ApplicationFormIndividuals';
+  button?: SubmitButtonProps;
+  /** @title Продукт */
+  product?: string;
+};
+
 /**
  * @title Настройки формы
  */
@@ -83,7 +94,8 @@ export type ApplicationFormBlockDef =
   | DepositFormParamsDef
   | CreditFormParamsDef
   | AcquiringFormParamsDef
-  | GrantSupportFormParamsDef;
+  | GrantSupportFormParamsDef
+  | IndividualsFormParamsDef;
 
 /**
  * @title Форма заявки

package/src/components/ApplicationForm/ApplicationFormDeposit.tsx

@@ -23,9 +23,7 @@ const depositValidator = objectValidator({
   phone: phoneValidator,
 });
 
-export const ApplicationFormDeposit = JSX<ApplicationFormsProps>((props) => {
-  const { button, link, onSubmit } = props;
-
+export const ApplicationFormDeposit = JSX<ApplicationFormsProps>(({ button, link, onSubmit }) => {
   const handleSubmit = useCallback(
     (formState: DepositFormState) => {
       const { name, phone } = formState;

package/src/components/ApplicationForm/ApplicationFormGrantSupport.tsx

@@ -31,7 +31,7 @@ export const ApplicationFormGrantSupport = JSX<ApplicationFormsProps>((props) =>
           label="Ваш регион"
           placeholder="Выберите регион"
           isSearch={true}
-          options={regions.map(({ name = '' }) => ({ key: name }))}
+          options={regions.map(({ name = '' }) => ({ key: name, text: name }))}
           value={region}
           onChange={setRegion}
         />

package/src/components/ApplicationForm/ApplicationFormIndividuals.tsx

@@ -0,0 +1,74 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useForm } from '../../hooks/useForm';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { objectValidator } from '../../validation/objectValidator';
+import { isValidationSuccess } from '../../validation/validator';
+import { withValidator } from '../../validation/withValidator';
+import { type ApplicationFormsProps } from './ApplicationFormsProps';
+import { Footnote } from './Footnote';
+import { type IndividualsFormState } from './IndividualsFormState';
+import { renderIndividualsFields } from './renderIndividualsFields';
+import { renderSubmitButton } from './renderSubmitButton';
+import { defaultValidator, nameValidator, phoneValidator } from './validators';
+
+const initialFormState: IndividualsFormState = {
+  surname: '',
+  name: '',
+  middleName: '',
+  phone: '',
+  mail: '',
+  date: undefined,
+  consentDataProcessing: true,
+};
+
+const individualsValidator = objectValidator({
+  surname: nameValidator,
+  name: nameValidator,
+  middleName: nameValidator,
+  phone: phoneValidator,
+  mail: defaultValidator,
+  date: defaultValidator,
+});
+
+export const ApplicationFormIndividuals = JSX<ApplicationFormsProps>((props) => {
+  const { button, link, product, onSubmit } = props;
+
+  const handleSubmit = useCallback(
+    (formState: IndividualsFormState) => {
+      const { surname, name, middleName, phone, mail, date, consentDataProcessing } = formState;
+
+      isValidationSuccess(individualsValidator(formState)) &&
+        onSubmit(
+          {
+            typeForm: 'dpst',
+            surname,
+            name,
+            middleName,
+            mail,
+            consentDataProcessing,
+            phone: phone.replace(/[^+\d]/g, ''),
+            date: date?.toISOString().slice(0, 10) || '',
+            product: product || '',
+          },
+          true,
+        );
+    },
+    [onSubmit],
+  );
+
+  const [, { field, ...formProps }] = useForm(initialFormState, handleSubmit);
+
+  return (
+    <form className="container space-y-s" onSubmit={formProps.onSubmit}>
+      {renderIndividualsFields(field)}
+      <div className="@xl:flex justify-between items-center">
+        <div className="@xl:mb-0 mb-2 flex items-center gap-3">
+          <Checkbox {...withValidator(field('consentDataProcessing'), defaultValidator)} />
+          <Footnote text="Согласен с " link={link} />
+        </div>
+        {renderSubmitButton(button)}
+      </div>
+    </form>
+  );
+});

package/src/components/ApplicationForm/ApplicationFormsProps.ts

@@ -5,5 +5,6 @@ export interface ApplicationFormsProps<S extends Record<string, any> = Record<st
   button?: SubmitButtonProps;
   link?: LinkProps;
   sourceBookDir?: string;
-  onSubmit: (data: S) => void;
+  product?: string;
+  onSubmit: (data: S, isIndividualType?: boolean) => void;
 }

package/src/components/ApplicationForm/DatePickerControl.tsx

@@ -0,0 +1,33 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { DatePicker } from '../../ui-kit/DatePicker/DatePicker';
+import { Text } from '../../ui-kit/Text/Text';
+
+export interface DatePickerControlProps {
+  className: string;
+  label: string;
+  value?: Date;
+  error?: string;
+  onChange?: (value: Date) => void;
+}
+
+export const DatePickerControl = JSX<DatePickerControlProps>(
+  ({ className, label, value = undefined, error, onChange }) => (
+    <div className={className}>
+      {label ? (
+        <div className="mb-xs">
+          <Text size="text-m" font="font-light">
+            {label}
+          </Text>
+        </div>
+      ) : null}
+      <DatePicker value={value} onChange={onChange} valid={Boolean(!error)} />
+      <div className="h-2">
+        {error ? (
+          <Text size="text-xs" font="font-light" color="text-error">
+            {error}
+          </Text>
+        ) : null}
+      </div>
+    </div>
+  ),
+);

package/src/components/ApplicationForm/EmbeddableForms.tsx

@@ -3,6 +3,7 @@ import { ApplicationFormBusinessCard } from './ApplicationFormBusinessCard';
 import { ApplicationFormCredit } from './ApplicationFormCredit';
 import { ApplicationFormDeposit } from './ApplicationFormDeposit';
 import { ApplicationFormGrantSupport } from './ApplicationFormGrantSupport';
+import { ApplicationFormIndividuals } from './ApplicationFormIndividuals';
 import { ApplicationFormWed } from './ApplicationFormWed';
 
 export const EmbeddableForms = {
@@ -12,4 +13,5 @@ export const EmbeddableForms = {
   ApplicationFormCredit,
   ApplicationFormAcquiring,
   ApplicationFormGrantSupport,
+  ApplicationFormIndividuals,
 };

package/src/components/ApplicationForm/Footnote.tsx

@@ -5,12 +5,13 @@ import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
 
 interface FootnoteProps {
+  text?: string;
   link?: LinkProps;
 }
 
-export const Footnote = JSX<FootnoteProps>(({ link }) => (
+export const Footnote = JSX<FootnoteProps>(({ text, link }) => (
   <Paragraph size="text-s" font="font-light" color="text-secondary-text">
-    <Text>Нажимая кнопку, вы подтверждаете согласие с </Text>
+    <Text>{text || 'Нажимая кнопку, вы подтверждаете согласие с '}</Text>
     {link ? (
       <Button
         href={link.href}

package/src/components/ApplicationForm/IndividualsFormState.ts

@@ -0,0 +1,9 @@
+export interface IndividualsFormState {
+  surname: string;
+  name: string;
+  middleName: string;
+  phone: string;
+  mail: string;
+  date: Date | undefined;
+  consentDataProcessing: boolean;
+}

package/src/components/ApplicationForm/renderIndividualsFields.tsx

@@ -0,0 +1,46 @@
+import { type FormFieldRegisterer } from '../../hooks/useForm';
+import { withValidator } from '../../validation/withValidator';
+import { DatePickerControl } from './DatePickerControl';
+import { type IndividualsFormState } from './IndividualsFormState';
+import { InputControl } from './InputControl';
+import { PhoneInputControl } from './PhoneInputControl';
+import { defaultValidator, nameValidator, phoneValidator } from './validators';
+
+export const renderIndividualsFields = (field: FormFieldRegisterer<IndividualsFormState>) => (
+  <div className="@xl:flex @xl:justify-between @xl:gap-lg">
+    <div className="@xl:w-1/2 space-y-s">
+      <InputControl
+        className="shrink-0 w-full"
+        label="Фамилия"
+        {...withValidator(field('surname'), nameValidator)}
+      />
+      <InputControl
+        className="shrink-0 w-full"
+        label="Отчество"
+        {...withValidator(field('middleName'), nameValidator)}
+      />
+      <PhoneInputControl
+        className="shrink-0 w-full"
+        label="Телефон"
+        {...withValidator(field('phone'), phoneValidator)}
+      />
+    </div>
+    <div className="@xl:w-1/2 space-y-s">
+      <InputControl
+        className="shrink-0 w-full"
+        label="Имя"
+        {...withValidator(field('name'), nameValidator)}
+      />
+      <DatePickerControl
+        className="shrink-0 w-full"
+        label="Дата рождения"
+        {...withValidator(field('date'), defaultValidator)}
+      />
+      <InputControl
+        className="shrink-0 w-full"
+        label="Электронная почта"
+        {...withValidator(field('mail'), defaultValidator)}
+      />
+    </div>
+  </div>
+);

package/src/components/Blocks.mobile.ts

@@ -40,7 +40,6 @@ import { StickyBottomMenu } from './StickyBottomMenu/StickyBottomMenu';
 import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
-import { Tile } from './Tile/Tile';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 
 export const Blocks: BlocksRegistry = {
@@ -85,6 +84,5 @@ export const Blocks: BlocksRegistry = {
   Tabs,
   TariffsTable,
   TextBlock,
-  Tile,
   VerticalLayout,
 };

package/src/components/Blocks.ts

@@ -52,7 +52,6 @@ import { SwipeListControlBlock } from './SwipeListControlBlock/SwipeListControlB
 import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
-import { Tile } from './Tile/Tile';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 import { Video } from './Video/Video';
 
@@ -110,7 +109,6 @@ export const Blocks: BlocksRegistry = {
   Tabs,
   TariffsTable,
   TextBlock,
-  Tile,
   VerticalLayout,
   Video,
 };

package/src/components/Calculator/Calculator.mobile.tsx

@@ -12,8 +12,8 @@ import { EmbeddableCalcBlocks } from './EmbeddableCalcBlocks';
 
 export interface CalculatorProps extends CalculatorContent, UniBlockProps {}
 
-export const Calculator = JSX<CalculatorProps>(({ className, calculatorTabs = [] }) => (
-  <BlockWrapper className={className} defaultPadding="p-0">
+export const Calculator = JSX<CalculatorProps>(({ className, calculatorTabs = [], ...rest }) => (
+  <BlockWrapper className={className} defaultPadding="p-0" {...rest}>
     {renderTabs(calculatorTabs)}
   </BlockWrapper>
 ));
@@ -28,7 +28,7 @@ const renderCalculator = (tab: CalculatorTab) => {
   const EmbeddedBlock = EmbeddableCalcBlocks[type];
 
   return (
-    <div>
+    <div className="p-xl">
       {tab?.calculatorBlock?.title ? (
         <Heading className="mb-lg" title={tab?.calculatorBlock?.title} />
       ) : null}
@@ -45,7 +45,7 @@ const renderTabs = (tabs: CalculatorTab[]) => {
   const isSingleTab = tabs.length === 1;
 
   if (isSingleTab) {
-    return <BlockWrapper>{renderCalculator(tabs[0])}</BlockWrapper>;
+    return renderCalculator(tabs[0]);
   }
 
   return tabs.map((tab, index) => (
@@ -54,9 +54,7 @@ const renderTabs = (tabs: CalculatorTab[]) => {
       isFoldButtonOnTop
       unfoldedByDefault={index === 0}
       renderFoldableSection={({ isUnfolded }) => (
-        <FoldableSection isUnfolded={isUnfolded}>
-          <BlockWrapper>{renderCalculator(tab)}</BlockWrapper>
-        </FoldableSection>
+        <FoldableSection isUnfolded={isUnfolded}>{renderCalculator(tab)}</FoldableSection>
       )}
       renderFoldButton={renderFoldButton(tab)}
     />

package/src/components/Carousel/renderCarouselCards.tsx

@@ -68,7 +68,7 @@ const cardStyle = (
     CARD_SIZE_MAP[cardSize], // TODO fix для RecommendationCard
     someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl sm:pt-16' : 'pt-3xl'),
     showBorder &&
-      'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider',
+      'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider h-full',
   );
 
 const isCardHighlighted = (_: BlockDef | undefined) =>

package/src/components/CarouselCard/CarouselCard.tsx

@@ -19,7 +19,7 @@ export const CarouselCard = JSX<CarouselCardProps>(
       defaultPadding="p-0"
       {...rest}
     >
-      <div className="relative">
+      <div className="relative h-full">
         <div className={style(layerStyle, 'top-9 right-12 bg-green-dark')} />
         <div className={style(layerStyle, 'top-6 right-8 bg-green')} />
         <div className={style(layerStyle, 'top-3 right-4 bg-green-light')} />

package/src/components/CarouselCard/titleSize.tsx

@@ -1 +1 @@
-export const titleSize = 'L';
+export const titleSize = 'XS';

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -25,7 +25,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
     const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
 
     return (
-      <BlockWrapper className={style('flex flex-col', className)} defaultPadding="p-3xl" {...rest}>
+      <BlockWrapper className={style('flex flex-col', className)} defaultPadding="p-2xl" {...rest}>
         {isIcon(icon) ? (
           <div className="self-center">
             <Img image={icon} />
@@ -34,7 +34,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
         {title ? (
           <Heading className={style('pt-xs', align)} headingType="h5" title={title} />
         ) : null}
-        {button ? <Button className="w-full mt-m" {...button} /> : null}
+        {button ? <Button className="w-full mt-m mb-lg" {...button} /> : null}
         {cardCells.length ? (
           <Foldable
             renderFoldableSection={({ isUnfolded }) => (

package/src/components/Footer/Footer.mobile.tsx

@@ -45,10 +45,12 @@ export const Footer = JSX<FooterProps>(({ className, ...rest }) => {
         <SocialMedia className="mb-xl" media={socialMedia} stretched={true}>
           Соцсети
         </SocialMedia>
-        <Text size="text-s" font="font-light" color="text-secondary-text">
-          Мобильное приложение
-        </Text>
-        <div className="mt-xs">{mobileApps?.map(renderButton)}</div>
+        <div className="mb-xl">
+          <div className="flex flex-col gap-4 mb-xs">{mobileApps?.map(renderButton)}</div>
+          <Text size="text-s" font="font-light" color="text-secondary-text">
+            Мобильное приложение
+          </Text>
+        </div>
       </div>
       <div className="py-lg border-t border-main-divider">
         <HorizontalNavigationLink
@@ -74,7 +76,7 @@ const renderButton = ({ href = '/', text }: LinkProps, i: number) => {
   return (
     <Button
       key={String(i)}
-      className="w-full mb-lg"
+      className="w-full"
       text={text || label}
       version="secondary"
       href={href}

package/src/components/Footer/HorizontalNavigation.mobile.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type TitleProps } from '../../model/HeadlineType';
 import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
 import { type FooterLink } from './FooterLink';
 import { HorizontalNavigationLink } from './HorizontalNavigationLink';
 
@@ -8,7 +9,7 @@ export interface HorizontalNavigationProps extends FooterLink, TitleProps {}
 
 export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
   ({ title, links, className = '' }) => (
-    <div className={className}>
+    <div className={style('flex flex-col gap-4', className)}>
       <Text size="text-l" font="font-normal">
         {title}
       </Text>

package/src/components/Footer/SocialMedia.tsx

@@ -39,23 +39,23 @@ export const SocialMedia = JSX<SocialMediaProps>(
 
     const buttonClassName = style(
       'border border-solid hover:border-transparent group-data-primary:border-main-divider border-main-divider group-data-gray:border-green group/media',
-      showButtonText && hasText ? '' : ' basis-auto',
+      showButtonText && hasText ? '' : 'basis-auto',
       stretched ? 'flex-1 justify-center' : '',
     );
 
     return (
-      <div className="flex flex-col sm:flex-col-reverse gap-xs">
-        {children ? (
-          <Text size="text-s" font="font-light" color="text-secondary-text">
-            {children}
-          </Text>
-        ) : null}
-        <div className={style('flex gap-xs', className)}>
+      <div className={style('flex flex-col gap-xs', className)}>
+        <div className="flex gap-xs">
           {renderButtonsSection(buttons, {
             className: stretched ? 'w-full' : '',
             buttonClassName,
           })}
         </div>
+        {children ? (
+          <Text size="text-s" font="font-light" color="text-secondary-text">
+            {children}
+          </Text>
+        ) : null}
       </div>
     );
   },

package/src/components/Footer/iconsMap.ts

@@ -35,4 +35,8 @@ export const ICONS_MAP: Array<IconsMapItem> = [
     origins: ['rutube.ru'],
     iconMapped: { icon: 'RutubeIcon' },
   },
+  {
+    origins: ['dzen.ru'],
+    iconMapped: { icon: 'DzenIcon' },
+  },
 ];

package/src/components/OfficesAtmsMap/OfficesAtmsMap.ui.json

@@ -1 +1,16 @@
-{}
+{
+  "content": {
+    "data": {
+      "dataType": {
+        "ui:widget": "hidden"
+      },
+      "list": {
+        "items": {
+          "image": {
+            "ui:field": "picture"
+          }
+        }
+      }
+    }
+  }
+}