@redneckz/wildless-cms-uni-blocks 0.14.577 → 0.14.578

package/mobile/src/components/OfficesAtmsMap/renderButtonsGroup.tsx

@@ -12,20 +12,22 @@ export const renderButtonsGroup = (
   const businessButtonVersion = getVersion(activeButton === 'business');
 
   const handleClick = (e: any, key: string, branches: Branch[]) => {
-    if (e.currentTarget === e.target && key === 'business') {
-      branches.filter(
-        (branch) =>
-          branch.workSchedule &&
-          branch.workSchedule.businessScheduleVisibleTag &&
-          !branch.workSchedule.businessScheduleDescription,
-      );
-    }
+    const filteredBranches =
+      e.currentTarget === e.target && key === 'business' ? filterBranches(branches) : branches;
 
     onButtonClick(key);
 
-    return branches;
+    return filteredBranches;
   };
 
+  const filterBranches = (branches: Branch[]) =>
+    branches.filter(
+      (branch) =>
+        branch.workSchedule &&
+        branch.workSchedule.businessScheduleVisibleTag &&
+        !branch.workSchedule.businessScheduleDescription,
+    );
+
   return (
     <div className="flex gap-lg flex-col sm:flex-row pb-lg">
       <Button data-id="all" onClick={(e) => handleClick(e, 'all', data)} version={allButtonVersion}>

package/mobile/src/components/OfficesAtmsMap/renderFiltrationForm.tsx

@@ -56,7 +56,7 @@ export const renderFiltrationForm = ({
 };
 
 export const renderFoldButton =
-  (reset: () => void, onlyOffice?: boolean) =>
+  (reset: () => void, onlyOffice = false) =>
   ({ isUnfolded, onToggle }: FoldablePartProps) => {
     const labels = ['Больше фильтров', 'Меньше фильтров'];
     const icons: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];

package/mobile/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.tsx

@@ -74,7 +74,7 @@ const renderDescriptionBlock = (props: RichTextProps) => (
 interface renderBlockProps {
   label?: string;
   data?: string;
-  iconName?: IconName | undefined;
+  iconName?: IconName;
   dataColor?: TextColor;
 }
 

package/mobile/src/hooks/useLeadFormData.ts

@@ -0,0 +1,18 @@
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { type LeadProps } from '../ui-kit/FormField/SelectField';
+import { fetchJSON } from '../utils/fetchJSON';
+
+export const useLeadFormData = (typeField: string) => {
+  const { data, error } = useAsyncData(
+    `https://portal-ui-cc.cprb.dev.rshbdev.ru/light-api-cash/v1/dictionary?dictionaryType=${typeField}`,
+    fetchData,
+  );
+
+  return { data, error };
+};
+
+const fetchData = async (url: string): Promise<LeadProps[]> => {
+  const result = await fetchJSON<LeadProps[]>(url, { method: 'POST' });
+
+  return result || [];
+};

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

@@ -28,7 +28,7 @@ const secondaryButtonStyleMap: Record<ButtonVersion, string> = {
 export interface ButtonProps extends ControlStateProps, ARIAProps {
   className?: string;
   version?: ButtonVersion;
-  type?: 'button' | 'submit' | 'reset' | undefined;
+  type?: 'button' | 'submit' | 'reset';
   rounded?: boolean;
   role?: string;
   onClick?: (ev?: PreventableEvent) => void;

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

@@ -10,8 +10,8 @@ interface RenderCalendarCellsParams {
   totalDays: number;
   currentYear: number;
   currentMonth: number;
-  min?: Date | undefined;
-  max?: Date | undefined;
+  min?: Date;
+  max?: Date;
   onDateClick: (date: Date) => void;
 }
 
@@ -68,7 +68,7 @@ const checkIsToday = (currentDate: Date, today: Date | undefined) =>
 const checkIsDisabled = (currentDate: Date, min: Date | undefined, max: Date | undefined) =>
   (min && currentDate.getTime() < min.getTime()) || (max && currentDate.getTime() > max.getTime());
 
-const getDayStyles = (isToday: boolean | undefined, isDisabled: boolean | undefined) =>
+const getDayStyles = (isToday = false, isDisabled = false) =>
   style(
     'p-s text-center rounded-md border',
     {

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

@@ -7,8 +7,8 @@ import { useDialogManager } from './useDialogManager';
 import { useDialogsList } from './useDialogsList';
 
 export const DialogManager = JSX(() => {
-  const handleCloseAll = useCallback((dialogs: DialogOpenAction[]) => {
-    for (const _ of dialogs) {
+  const handleCloseAll = useCallback((dialogActions: DialogOpenAction[]) => {
+    for (const _ of dialogActions) {
       _?.onClose && _.onClose();
     }
   }, []);

package/mobile/src/ui-kit/FormField/Fields/AmountWorkersField.tsx

@@ -0,0 +1,18 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLeadFormData } from '../../../hooks/useLeadFormData';
+import { type CustomFieldProps } from '../CustomFieldProps';
+import { SelectField } from '../SelectField';
+
+export const AmountWorkersField = JSX<CustomFieldProps>(({ field, input }) => {
+  const { data: amountWorkers } = useLeadFormData('EMPLOYEES_NUMBER');
+
+  return (
+    <SelectField
+      field={field}
+      source={amountWorkers || []}
+      label="Количество работающих в организации"
+      fieldName="amountWorkers"
+      input={input}
+    />
+  );
+});

package/mobile/src/ui-kit/FormField/Fields/EducationField.tsx

@@ -0,0 +1,18 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLeadFormData } from '../../../hooks/useLeadFormData';
+import { type CustomFieldProps } from '../CustomFieldProps';
+import { SelectField } from '../SelectField';
+
+export const EducationField = JSX<CustomFieldProps>(({ field, input }) => {
+  const { data: education } = useLeadFormData('EDUCATION_LEVEL');
+
+  return (
+    <SelectField
+      field={field}
+      source={education || []}
+      label="Образование"
+      fieldName="education"
+      input={input}
+    />
+  );
+});

package/mobile/src/ui-kit/FormField/Fields/EmployerActivitiesField.tsx

@@ -0,0 +1,18 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLeadFormData } from '../../../hooks/useLeadFormData';
+import { type CustomFieldProps } from '../CustomFieldProps';
+import { SelectField } from '../SelectField';
+
+export const EmployerActivitiesField = JSX<CustomFieldProps>(({ field, input }) => {
+  const { data: employerActivities } = useLeadFormData('ORGANIZATION_ACTIVITY_TYPE');
+
+  return (
+    <SelectField
+      field={field}
+      source={employerActivities || []}
+      label="Вид деятельности организации-работодателя"
+      fieldName="employerActivities"
+      input={input}
+    />
+  );
+});

package/mobile/src/ui-kit/FormField/Fields/EmployerOrganizationField.tsx

@@ -0,0 +1,18 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLeadFormData } from '../../../hooks/useLeadFormData';
+import { type CustomFieldProps } from '../CustomFieldProps';
+import { SelectField } from '../SelectField';
+
+export const EmployerOrganizationField = JSX<CustomFieldProps>(({ field, input }) => {
+  const { data: employerOrganization } = useLeadFormData('ORGANIZATION_KIND');
+
+  return (
+    <SelectField
+      field={field}
+      source={employerOrganization || []}
+      label="Вид организации работодателя"
+      fieldName="employerOrganization"
+      input={input}
+    />
+  );
+});

package/mobile/src/ui-kit/FormField/Fields/EmploymentField.tsx

@@ -0,0 +1,18 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLeadFormData } from '../../../hooks/useLeadFormData';
+import { type CustomFieldProps } from '../CustomFieldProps';
+import { SelectField } from '../SelectField';
+
+export const EmploymentField = JSX<CustomFieldProps>(({ field, input }) => {
+  const { data: employment } = useLeadFormData('EMPLOYMENT_TYPE');
+
+  return (
+    <SelectField
+      field={field}
+      source={employment || []}
+      label="Информация о трудоустройстве"
+      fieldName="employment"
+      input={input}
+    />
+  );
+});

package/mobile/src/ui-kit/FormField/Fields/HousingField.tsx

@@ -0,0 +1,18 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLeadFormData } from '../../../hooks/useLeadFormData';
+import { type CustomFieldProps } from '../CustomFieldProps';
+import { SelectField } from '../SelectField';
+
+export const HousingField = JSX<CustomFieldProps>(({ field, input }) => {
+  const { data: housing } = useLeadFormData('HOUSE_TYPE');
+
+  return (
+    <SelectField
+      field={field}
+      source={housing || []}
+      label="Тип жилья"
+      fieldName="housing"
+      input={input}
+    />
+  );
+});

package/mobile/src/ui-kit/FormField/Fields/OrganizationField.tsx

@@ -0,0 +1,18 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLeadFormData } from '../../../hooks/useLeadFormData';
+import { type CustomFieldProps } from '../CustomFieldProps';
+import { SelectField } from '../SelectField';
+
+export const OrganizationField = JSX<CustomFieldProps>(({ field, input }) => {
+  const { data: organization } = useLeadFormData('ORGANIZATION_TYPE');
+
+  return (
+    <SelectField
+      field={field}
+      source={organization || []}
+      label="Тип организации"
+      fieldName="organization"
+      input={input}
+    />
+  );
+});

package/mobile/src/ui-kit/FormField/Fields/PositionOrganizationField.tsx

@@ -0,0 +1,18 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLeadFormData } from '../../../hooks/useLeadFormData';
+import { type CustomFieldProps } from '../CustomFieldProps';
+import { SelectField } from '../SelectField';
+
+export const PositionOrganizationField = JSX<CustomFieldProps>(({ field, input }) => {
+  const { data: positionOrganization } = useLeadFormData('POSITION');
+
+  return (
+    <SelectField
+      field={field}
+      source={positionOrganization || []}
+      label="Должность в организации"
+      fieldName="positionOrganization"
+      input={input}
+    />
+  );
+});

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

@@ -0,0 +1,37 @@
+import { UniBlock } from '../../UniBlock/UniBlock';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { SelectControl } from '../Select/SelectControl';
+import { type CustomFieldProps } from './CustomFieldProps';
+import { validatorObj } from './getObjectValidator';
+import { getValidation } from './getValidation';
+
+export interface LeadProps {
+  type: string;
+  key: string;
+  value: string;
+  displayOrder: number;
+  description: string;
+}
+
+export interface SelectFieldProps extends CustomFieldProps, UniBlockProps {
+  source?: LeadProps[];
+  label: string;
+  fieldName: string;
+}
+
+export const SelectField = UniBlock<SelectFieldProps>(
+  ({ field, source, label, fieldName, input }) => {
+    const leadDescription = (source && source?.map((_: LeadProps) => _.description)) || [];
+
+    return (
+      <SelectControl
+        placeholder="Выберите из списка"
+        label={label}
+        options={arrayToOptions(leadDescription)}
+        {...getValidation(field(fieldName), validatorObj[fieldName], input?.required)}
+      />
+    );
+  },
+);
+
+const arrayToOptions = (array?: string[]) => (array ?? []).map((_) => ({ key: _, value: _ }));

package/mobile/src/ui-kit/FormField/dataSources.ts

@@ -0,0 +1,3 @@
+export const PRODUCT_REF = {
+  $ref: '/wcms-resources/outservice-productlist.json',
+};

package/mobile/src/ui-kit/FormField/getField.tsx

@@ -6,6 +6,7 @@ import { InputControl } from '../Input/InputControl';
 import { AcquiringField } from './Fields/AcquiringField';
 import { AddressBranchField } from './Fields/AddressBranchField';
 import { AmountField } from './Fields/AmountField';
+import { AmountWorkersField } from './Fields/AmountWorkersField';
 import { AnnualRevenueField } from './Fields/AnnualRevenueField';
 import { BankEmpoleeField } from './Fields/BankEmpoleeField';
 import { BirthdayField } from './Fields/BirthdayField';
@@ -18,18 +19,25 @@ import { ConsentPhotoFlg } from './Fields/ConsentPhotoField';
 import { ConsentProviderField } from './Fields/ConsentProviderField';
 import { ConsentToReceiveMaterialsField } from './Fields/ConsentToReceiveMaterialsField';
 import { DesiredMeetingDateField } from './Fields/DesiredMeetingDateField';
+import { EducationField } from './Fields/EducationField';
 import { EmailField } from './Fields/EmailField';
+import { EmployerActivitiesField } from './Fields/EmployerActivitiesField';
+import { EmployerOrganizationField } from './Fields/EmployerOrganizationField';
+import { EmploymentField } from './Fields/EmploymentField';
 import { FeedbackMethodField } from './Fields/FeedbackMethodField';
 import { FeedbackTypeField } from './Fields/FeedbackTypeField';
 import { FullNameField } from './Fields/FullNameField';
+import { HousingField } from './Fields/HousingField';
 import { InnField } from './Fields/InnField';
 import { IsClientField } from './Fields/IsClientField';
 import { LocalitiesField } from './Fields/LocalitiesField';
 import { MiddleNameField } from './Fields/MiddleNameField';
 import { NameField } from './Fields/NameField';
 import { OnlineCheckoutField } from './Fields/OnlineCheckoutField';
+import { OrganizationField } from './Fields/OrganizationField';
 import { PartnerCommentsField } from './Fields/PartnerCommentsField';
 import { PhoneField } from './Fields/PhoneField';
+import { PositionOrganizationField } from './Fields/PositionOrganizationField';
 import { PosTerminalField } from './Fields/PosTerminalField';
 import { ProcessPersonalDataField } from './Fields/ProcessPersonalDataField';
 import { ProductField } from './Fields/ProductField';
@@ -100,6 +108,14 @@ export const getField =
       ) : (
         <RegionField field={field} input={input} url={getRegionUrl(typeForm)} />
       ),
+      education: <EducationField field={field} input={input} />,
+      housing: <HousingField field={field} input={input} />,
+      employment: <EmploymentField field={field} input={input} />,
+      organization: <OrganizationField field={field} input={input} />,
+      amountWorkers: <AmountWorkersField field={field} input={input} />,
+      employerActivities: <EmployerActivitiesField field={field} input={input} />,
+      employerOrganization: <EmployerOrganizationField field={field} input={input} />,
+      positionOrganization: <PositionOrganizationField field={field} input={input} />,
     };
 
     return isRenderField({ input, field }) ? (

package/mobile/src/ui-kit/FormField/getObjectValidator.tsx

@@ -19,6 +19,14 @@ export const validatorObj: Record<string, Validator> = {
   phone: phoneValidator,
   secondaryPhone: phoneValidator,
   birthday: defaultValidator,
+  education: defaultValidator,
+  housing: defaultValidator,
+  employment: defaultValidator,
+  organization: defaultValidator,
+  amountWorkers: defaultValidator,
+  employerActivities: defaultValidator,
+  employerOrganization: defaultValidator,
+  positionOrganization: defaultValidator,
   email: defaultValidator,
   fullName: nameValidator,
   inn: innValidator,

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

@@ -10,7 +10,9 @@ export const PhoneInput = JSX<InputProps>(({ children, onChange, ...inputProps }
     [onChange],
   );
   const handleBlur = useCallback((v: string) => {
-    v === '+7 (' ? onChange && onChange('') : null;
+    if (v === '+7 (') {
+      onChange && onChange('');
+    }
   }, []);
 
   return (

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

@@ -1,24 +1,19 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
 
 interface ProgressBarProps {
   step?: number;
   description?: string;
 }
 
-export const ProgressBar = JSX<ProgressBarProps>(({ step = 10, description }) => {
-  const [progressPercent, setProgressPercent] = useState(0);
-
-  return (
-    <div>
-      <div className="h-4 w-full bg-gray relative">
-        <div className="h-4 bg-green" style={{ width: `${progressPercent}%` }} />
-      </div>
-      <div className="relative">
-        <div className="absolute left-2/4 text-green">{progressPercent}%</div>
-        {description ? <div className="text-right mr-4 text-gray">{description}</div> : null}
-      </div>
+export const ProgressBar = JSX<ProgressBarProps>(({ step = 10, description }) => (
+  <div>
+    <div className="h-4 w-full bg-gray relative">
+      <div className="h-4 bg-green" style={{ width: `${step}%` }} />
+    </div>
+    <div className="relative">
+      <div className="absolute left-2/4 text-green">{step}%</div>
+      {description ? <div className="text-right mr-4 text-gray">{description}</div> : null}
     </div>
-  );
-});
+  </div>
+));

package/mobile/src/ui-kit/VerifyPhoneDialog/InputCode.tsx

@@ -81,7 +81,7 @@ export const InputCode = JSX<InputCodeProps>(({ values, setValues, hasError }) =
   );
 });
 
-const getInputStyle = (index: number, values: string[], hasError?: boolean) => {
+const getInputStyle = (index: number, values: string[], hasError = false) => {
   const isInputEmpty = !values[index];
 
   return `w-16 h-20 text-3xl text-center p-2 m-2 border ${

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.577",
+  "version": "0.14.578",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -210,7 +210,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "70 kB",
+      "limit": "71 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/components/ApplicationForm/ApplicationFormContent.ts

@@ -17,12 +17,20 @@ export type SubmitButtonProps = TextProps & {
 /**
  * @title Название поля ввода
  * @required
- * @enumNames ["Фамилия", "Имя", "Отчество", "Email", "Телефон", "ФИО", "ИНН", "Комментарий", "Регион", "Регион выездной сервис", "Адрес", "Тип формы", "День рождения", "Клиент банка", "Согласие на получение материалов", "Тип эквайринга", "Онлайн касса", "POS-терминал", "Направление обслуживания", "Ультра/Премиум", "Тип обратной связи", "Способ получения ответа", "Банковский служащий", "Дата и время обращени", "Дополнительный телефон", "ВЭД", "Срок (месяцев)", "Сумма ₽", "Годовой доход", "Количество объектов инкассации", "День встречи", "Продукт", "Комментарий партнёров", "Согласие на обработку"]
+ * @enumNames ["Фамилия", "Имя", "Отчество", "Email", "Телефон", "ФИО", "ИНН", "Комментарий", "Регион", "Регион выездной сервис", "Адрес", "Тип формы", "День рождения", "Клиент банка", "Согласие на получение материалов", "Тип эквайринга", "Онлайн касса", "POS-терминал", "Направление обслуживания", "Ультра/Премиум", "Тип обратной связи", "Способ получения ответа", "Банковский служащий", "Дата и время обращения", "Дополнительный телефон", "ВЭД", "Срок (месяцев)", "Сумма ₽", "Годовой доход", "Количество объектов инкассации", "День встречи", "Продукт", "Комментарий партнёров", "Согласие на обработку", "Образование", "Тип жилья", "Информация о трудоустройстве", "Тип организации", "Количество работающих в организации", "Вид деятельности работодателя", "Вид организации работодателя", "Должность в организации"]
  */
 export type NameFieldDef =
   | 'surname'
   | 'name'
   | 'middleName'
+  | 'education'
+  | 'housing'
+  | 'employment'
+  | 'organization'
+  | 'amountWorkers'
+  | 'employerActivities'
+  | 'employerOrganization'
+  | 'positionOrganization'
   | 'email'
   | 'phone'
   | 'fullName'

package/src/components/ApplicationLeadForm/ApplicationLeadFormContent.ts

@@ -18,12 +18,20 @@ export type SubmitButtonProps = TextProps & {
 /**
  * @title Название поля ввода
  * @required
- * @enumNames ["Фамилия", "Имя", "Отчество", "Email", "Телефон", "ФИО", "ИНН", "Комментарий", "Регион", "Регион выездной сервис", "Адрес", "Тип формы", "День рождения", "Клиент банка", "Согласие на получение материалов", "Тип эквайринга", "Онлайн касса", "POS-терминал", "Направление обслуживания", "Ультра/Премиум", "Тип обратной связи", "Способ получения ответа", "Банковский служащий", "Дата и время обращени", "Дополнительный телефон", "ВЭД", "Срок (месяцев)", "Сумма ₽", "Годовой доход", "Количество объектов инкассации", "День встречи", "Продукт", "Комментарий партнёров", "Согласие на обработку"]
+ * @enumNames ["Фамилия", "Имя", "Отчество", "Email", "Телефон", "ФИО", "ИНН", "Комментарий", "Регион", "Регион выездной сервис", "Адрес", "Тип формы", "День рождения", "Клиент банка", "Согласие на получение материалов", "Тип эквайринга", "Онлайн касса", "POS-терминал", "Направление обслуживания", "Ультра/Премиум", "Тип обратной связи", "Способ получения ответа", "Банковский служащий", "Дата и время обращения", "Дополнительный телефон", "ВЭД", "Срок (месяцев)", "Сумма ₽", "Годовой доход", "Количество объектов инкассации", "День встречи", "Продукт", "Комментарий партнёров", "Согласие на обработку", "Образование", "Тип жилья", "Информация о трудоустройстве", "Тип организации", "Количество работающих в организации", "Вид деятельности работодателя", "Вид организации работодателя", "Должность в организации"]
  */
 export type NameFieldDef =
   | 'surname'
   | 'name'
   | 'middleName'
+  | 'education'
+  | 'housing'
+  | 'employment'
+  | 'organization'
+  | 'amountWorkers'
+  | 'employerActivities'
+  | 'employerOrganization'
+  | 'positionOrganization'
   | 'email'
   | 'phone'
   | 'fullName'

package/src/components/ApplicationLeadForm/getInitialFormState.tsx

@@ -18,6 +18,14 @@ export interface FormState {
   birthday?: Date;
   phone?: string;
   secondaryPhone?: string;
+  education?: string;
+  housing?: string;
+  employment?: string;
+  organization?: string;
+  amountWorkers?: string;
+  employerActivities?: string;
+  employerOrganization?: string;
+  positionOrganization?: string;
   email?: string;
   acquiringType?: Option;
   serviceType?: Option;

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -72,7 +72,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
             )}
             renderFoldButton={
               cardCells.length >= visibleCellsCount
-                ? renderFoldButton(isVisible, options?.parent, data)
+                ? renderFoldButton(options?.parent, data, isVisible)
                 : null
             }
           />
@@ -84,25 +84,27 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
   },
 );
 
-const renderFoldButton = (isUnfolded?: boolean, parent?: Slot, data?: AspectsDef[]) => (): VNode =>
-  (
-    <button
-      className="w-full cursor-pointer text-primary-main pt-lg flex justify-between items-center"
-      onClick={() => {
-        if (parent !== undefined) {
-          defaultEventBus.fire('fold', { type: 'fold', isUnfolded: !isUnfolded, parent });
-        }
-      }}
-      type="button"
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...(isUnfolded ? getAspectsAttributes(data) : {})}
-    >
-      <div>{isUnfolded ? 'Скрыть' : 'Подробнее о тарифе'}</div>
-      <Icon
-        className="text-primary-text"
-        name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
-        width="16"
-        height="16"
-      />
-    </button>
-  );
+const renderFoldButton =
+  (parent?: Slot, data?: AspectsDef[], isUnfolded = false) =>
+  (): VNode =>
+    (
+      <button
+        className="w-full cursor-pointer text-primary-main pt-lg flex justify-between items-center"
+        onClick={() => {
+          if (parent !== undefined) {
+            defaultEventBus.fire('fold', { type: 'fold', isUnfolded: !isUnfolded, parent });
+          }
+        }}
+        type="button"
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...(isUnfolded ? getAspectsAttributes(data) : {})}
+      >
+        <div>{isUnfolded ? 'Скрыть' : 'Подробнее о тарифе'}</div>
+        <Icon
+          className="text-primary-text"
+          name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
+          width="16"
+          height="16"
+        />
+      </button>
+    );

package/src/components/Footer/SocialMedia.tsx

@@ -75,8 +75,11 @@ export const SocialMedia = JSX<SocialMediaProps>(
 const getStretchedStyle = (stretched = false) =>
   stretched ? 'flex-1 @lg:flex-initial justify-center' : '';
 
-const getClassName = (hasText: boolean, stretched: boolean, showButtonText = false): string =>
-  style(
+const getClassName = (hasText: boolean, stretched: boolean, showButtonText = false): string => {
+  const textStyleCondition = showButtonText ? !hasText : true;
+
+  return style(
     hasText || stretched ? 'basis-full' : '',
-    stretched && (showButtonText ? !hasText : true) ? 'flex-nowrap' : '',
+    stretched && textStyleCondition ? 'flex-nowrap' : '',
   );
+};

package/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -76,19 +76,20 @@ const renderInvestmentColumn = (
 ) => {
   const isSecondColumn = i === 1;
   const isLastColumn = i === arr.length - 1;
+  const reversedCells = column.cells?.reverse() || [];
 
   return (
     <div
       key={`column_${i}`}
       className={`${getColumnClasses(isSecondColumn, isLastColumn, column.cells)}`}
     >
-      {column.cells?.length ? (
+      {reversedCells.length ? (
         <div
           className={`w-full ${
             isLastColumn ? 'border-4 border-green-more-dark p-1.5 min-w-72' : ''
           }`}
         >
-          {column.cells.reverse().map(renderInvestmentCell)}
+          {reversedCells.map(renderInvestmentCell)}
         </div>
       ) : null}
     </div>