@redneckz/wildless-cms-uni-blocks 0.12.9 → 0.12.11

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

@@ -0,0 +1,147 @@
+/* eslint-disable max-lines, max-lines-per-function */
+import { JSX } from '@redneckz/uni-jsx';
+import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { style } from '../../utils/style';
+import type { RefinancingCalculatorParamsViewSettings } from './CalculatorContent';
+import { CalculatorValueBlock } from './CalculatorValueBlock';
+import {
+  DEFAULT_REFINANCING_MONTHS,
+  REFINANCING_DEFAULT_SUM,
+  REFINANCING_OLD_DEFAULT_SUM,
+} from './constants';
+import { Rate } from './Rate';
+import { renderFootnote } from './renderFootnote';
+import { renderMonthsInput } from './renderMonthsInput';
+import { renderWantedSumInput } from './renderWantedSumInput';
+import { RefinancingCalculatorProps } from './CalculatorContent';
+import {
+  RefinancingCalculatorParams,
+  useRefinancingCalculatorParams,
+} from './useRefinancingCalculatorParams';
+import { renderPaymentType } from './renderPaymentType';
+
+export interface RefinancingCalculatorProp extends RefinancingCalculatorProps {
+  className?: string;
+}
+
+export const RefinancingCalculatorForm = JSX<RefinancingCalculatorProp>(
+  ({ className, sourceBookDir, buttons, footnote, paramsViewSettings }) => {
+    const [userInputParams, { field }] = useForm({
+      isAnnuity: true,
+      isInsurance: true,
+      isSalaryClient: false,
+      isExtraMoney: false,
+      moneyValue: REFINANCING_DEFAULT_SUM,
+      oldMonthlyPayment: REFINANCING_OLD_DEFAULT_SUM,
+      monthsValue: DEFAULT_REFINANCING_MONTHS,
+      moneyExtra: REFINANCING_OLD_DEFAULT_SUM,
+    });
+
+    const calculatorParams = useRefinancingCalculatorParams(
+      userInputParams,
+      sourceBookDir,
+      paramsViewSettings,
+    );
+
+    return (
+      <section className={style('flex justify-between', className)}>
+        <div className="w-2/5">
+          {renderWantedSumInput({
+            title: 'Остаток долга в других банках, ₽ ',
+            step: 500,
+            min: calculatorParams.minSum,
+            max: calculatorParams.maxSum,
+            ...field('moneyValue'),
+            value: calculatorParams.moneyValue,
+          })}
+          {renderWantedSumInput({
+            title: 'Ежемесячный платеж в других банках, ₽',
+            isShowItems: false,
+            step: 500,
+            min: calculatorParams.minSumOld,
+            max: calculatorParams.maxSumOld,
+            ...field('oldMonthlyPayment'),
+            value: calculatorParams.oldMonthlyPayment,
+          })}
+          {renderMonthsInput({
+            title: 'Новый срок кредита, месяцев',
+            min: calculatorParams.minMonths,
+            max: calculatorParams.maxMonths,
+            ...field('monthsValue'),
+            value: calculatorParams.monthsValue,
+          })}
+          <div className={style('mt-7', calculatorParams.isExtraMoney ? 'mb-3' : '')}>
+            {renderCreditParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}
+          </div>
+          {calculatorParams.isExtraMoney
+            ? renderWantedSumInput({
+                title: 'Дополнительная сумма, ₽ ',
+                step: 500,
+                min: calculatorParams.minSumExtra,
+                max: calculatorParams.maxSumExtra,
+                ...field('moneyExtra'),
+                value: calculatorParams.moneyExtra,
+              })
+            : null}
+        </div>
+        <Rate
+          title="Ставка"
+          rate={calculatorParams.rate}
+          fractionDigits={1}
+          rateBlockClassName="tracking-[-25px]"
+          unit="%"
+        />
+        <div className="w-96">
+          <CalculatorValueBlock
+            title={'Ежемесячный платеж'}
+            value={calculatorParams.monthlyPayment}
+            postfix="₽"
+          />
+          {calculatorParams.benefit > 0 ? (
+            <CalculatorValueBlock
+              title={'Выгода в месяц'}
+              value={calculatorParams.benefit}
+              postfix="₽"
+            />
+          ) : null}
+          {renderPaymentType({ orientation: 'vertical', ...field('isAnnuity') })}
+          {renderButtonsSection(buttons, { className: 'mt-7', isVertical: true })}
+          {renderFootnote(footnote)}
+        </div>
+      </section>
+    );
+  },
+);
+
+const renderCreditParamsForm = (
+  params: RefinancingCalculatorParams & RefinancingCalculatorParamsViewSettings,
+  field: FormFieldRegisterer<any>,
+) => (
+  <div>
+    {params.isShowSalaryClient ? (
+      <Checkbox
+        text="Получаю зарплату на счёт в Россельхозбанке"
+        {...field('isSalaryClient')}
+        value={params.isSalaryClient}
+      />
+    ) : null}
+    {params.isShowInsurance ? (
+      <Checkbox
+        className="mt-3"
+        text="Комплексная страховая защита"
+        {...field('isInsurance')}
+        value={params.isInsurance}
+      />
+    ) : null}
+    {params.isShowExtraMoney ? (
+      <Checkbox
+        className="mt-3"
+        text="Получить дополнительную сумму"
+        {...field('isExtraMoney')}
+        value={params.isExtraMoney}
+      />
+    ) : null}
+  </div>
+);

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

@@ -12,10 +12,10 @@ export const UnknownRate = JSX<UnknownRateProps>(({ title = 'Ставка' }) =>
     <Text size="text-l" font="font-light" color="text-secondary-text">
       {title}
     </Text>
-    <div className="mt-1 pt-1 pl-5 pb-1.5">
+    <div className="mt-2xs pt-2xs pl-lg pb-xs">
       <Icon name="PercentIcon" width="90" height="85" />
     </div>
-    <div className="w-[250px] mt-3.5">
+    <div className="w-[250px] mt-m">
       <Paragraph size="text-xl" font="font-light" color="text-primary-text">
         Процентная ставка для срока <strong>1-30 дней</strong> устанавливается при обращении в Банк
       </Paragraph>

package/mobile/src/components/Calculator/checkRefinancingSourceBookRowCommonParams.ts

@@ -0,0 +1,45 @@
+import { RefinancingCalculatorParamsViewSettings } from './CalculatorContent';
+import {
+  CommonRefinancingParams,
+  RefinancingCalculatorUserInputParams,
+} from './useRefinancingCalculatorParams';
+
+interface CheckSourceBookRowProps {
+  row: CommonRefinancingParams;
+  userInputParams: RefinancingCalculatorUserInputParams;
+  paramsViewSettings?: RefinancingCalculatorParamsViewSettings;
+}
+
+interface CheckSourceBookRowFieldProps extends CheckSourceBookRowProps {
+  fieldKey: string;
+  viewSettingFieldKey: string;
+}
+
+export const checkRefinancingSourceBookRowCommonParams = (props: CheckSourceBookRowProps) =>
+  checkRowParam({
+    ...props,
+    fieldKey: 'isSalaryClient',
+    viewSettingFieldKey: 'isShowSalaryClient',
+  }) &&
+  checkRowParam({
+    ...props,
+    fieldKey: 'isInsurance',
+    viewSettingFieldKey: 'isShowInsurance',
+  }) &&
+  checkRowParam({
+    ...props,
+    fieldKey: 'isExtraMoney',
+    viewSettingFieldKey: 'isShowExtraMoney',
+  });
+
+const checkRowParam = ({
+  row,
+  userInputParams,
+  paramsViewSettings,
+  fieldKey,
+  viewSettingFieldKey,
+}: CheckSourceBookRowFieldProps) => {
+  const isExclude = paramsViewSettings ? !paramsViewSettings[viewSettingFieldKey] : false;
+
+  return isExclude || userInputParams[fieldKey] === row[fieldKey];
+};

package/mobile/src/components/Calculator/constants.ts

@@ -2,12 +2,22 @@ import { BonusCalculatorSourceBookParams } from './useBonusCalculatorParams';
 import { BusinessDepositCalculatorSourceBookParams } from './useBusinessDepositCalculatorParams';
 import { CreditCalculatorSourceBookRateParams } from './useCreditCalculatorParams';
 import { DepositCalculatorSourceBookParams } from './useDepositCalculatorParams';
+import { RefinancingCalculatorSourceBookRateParams } from './useRefinancingCalculatorParams';
 
 export const DEFAULT_MIN_SUM = 10000;
 export const DEFAULT_MAX_SUM = 5000000;
 export const CREDIT_DEFAULT_SUM = 200000;
+export const REFINANCING_DEFAULT_SUM = 700000;
+export const REFINANCING_DEFAULT_MAX_SUM = 3000000;
+export const REFINANCING_OLD_MIN_SUM = 0;
+export const REFINANCING_OLD_DEFAULT_SUM = 0;
+export const REFINANCING_OLD_MAX_SUM = 2500000;
+export const REFINANCING_EXTRA_MIN_SUM = 0;
+export const REFINANCING_EXTRA_MAX_SUM = 500000;
 export const DEPOSIT_DEFAULT_SUM = 20000;
 export const DEFAULT_MIN_MONTHS = 13;
+export const DEFAULT_REFINANCING_MIN_MONTHS = 13;
+export const DEFAULT_REFINANCING_MONTHS = 48;
 export const DEFAULT_MAX_MONTHS = 60;
 export const DEFAULT_MONTHS = Math.round((DEFAULT_MAX_MONTHS - DEFAULT_MIN_MONTHS) / 2);
 export const BUSINESS_DEFAULT_SUM = 100000;
@@ -33,6 +43,21 @@ export const DEFAULT_CREDIT_CALCULATOR_PARAMS: CreditCalculatorSourceBookRatePar
   isInsurance: true,
 };
 
+export const DEFAULT_REFINANCING_CALCULATOR_PARAMS: RefinancingCalculatorSourceBookRateParams = {
+  minSum: DEFAULT_MIN_SUM,
+  maxSum: REFINANCING_DEFAULT_MAX_SUM,
+  minSumOld: REFINANCING_OLD_MIN_SUM,
+  maxSumOld: REFINANCING_OLD_MAX_SUM,
+  minSumExtra: REFINANCING_EXTRA_MIN_SUM,
+  maxSumExtra: REFINANCING_EXTRA_MAX_SUM,
+  minMonths: DEFAULT_REFINANCING_MIN_MONTHS,
+  maxMonths: DEFAULT_MAX_MONTHS,
+  rate: 7.5,
+  isExtraMoney: false,
+  isSalaryClient: false,
+  isInsurance: true,
+};
+
 export const DEFAULT_TRAVEL_MIN_SUM = 6000;
 export const DEFAULT_REST_MIN_SUM = 6000;
 
@@ -77,3 +102,4 @@ export const CREDIT_CALC_DEFAULT_DIR = 'credit-calculator-data';
 export const BONUS_CALC_DEFAULT_DIR = 'bonus-calculator-data';
 export const DEPOSIT_CALC_DEFAULT_DIR = 'deposit-calculator-data';
 export const BUSINESS_DEPOSIT_CALC_DEFAULT_DIR = 'business-calculator-data';
+export const REFINANCING_CALC_DEFAULT_DIR = 'refinancing-calculator-data';

package/mobile/src/components/Calculator/getMonthlyPayment.ts

@@ -4,17 +4,27 @@
  */
 
 import { MONTHLY_INTEREST_RATE, MONTHS_IN_YEAR } from './constants';
-import type { CreditCalculatorUserInputParams } from './useCreditCalculatorParams';
 
-export const getMonthlyPayment = (rate: number, params: CreditCalculatorUserInputParams) => {
-  const { isAnnuity, moneyValue, monthsValue } = params;
+interface GetMonthlyPaymentParams {
+  isAnnuity: boolean;
+  moneyValue: number;
+  monthsValue: number;
+  moneyExtra?: number;
+}
+
+export const getMonthlyPayment = (rate: number, params: GetMonthlyPaymentParams) => {
+  const { isAnnuity, moneyValue, monthsValue, moneyExtra } = params;
 
   if (rate === 0) {
     return 0;
   } else if (isAnnuity) {
     const i = rate / MONTHLY_INTEREST_RATE; // Используется значение ставки в процентах
 
-    return moneyValue * (i + i / (Math.pow(1 + i, monthsValue) - 1));
+    if (moneyExtra) {
+      return (moneyValue + moneyExtra) * (i + i / (Math.pow(1 + i, monthsValue) - 1));
+    } else {
+      return moneyValue * (i + i / (Math.pow(1 + i, monthsValue) - 1));
+    }
   } else {
     return Math.round(moneyValue / monthsValue) + moneyValue * (rate / (MONTHS_IN_YEAR * 100)); // Используется значение ставки (rate) в процентах, делённое на сто.
   }

package/mobile/src/components/Calculator/getRefinancingCalculatorLimitParams.ts

@@ -0,0 +1,25 @@
+import { RefinancingCalculatorParamsViewSettings } from './CalculatorContent';
+import {
+  RefinancingCalculatorSourceBookLimitParams,
+  RefinancingCalculatorUserInputParams,
+} from './useRefinancingCalculatorParams';
+import { checkRefinancingSourceBookRowCommonParams } from './checkRefinancingSourceBookRowCommonParams';
+
+interface GetRefinancingCalculatorLimitParamsProps {
+  limitRows: RefinancingCalculatorSourceBookLimitParams[];
+  userInputParams: RefinancingCalculatorUserInputParams;
+  paramsViewSettings?: RefinancingCalculatorParamsViewSettings;
+}
+
+export const getRefinancingCalculatorLimitParams = ({
+  limitRows,
+  userInputParams,
+  paramsViewSettings,
+}: GetRefinancingCalculatorLimitParamsProps) =>
+  limitRows?.find((row) =>
+    checkRefinancingSourceBookRowCommonParams({
+      row,
+      userInputParams,
+      paramsViewSettings,
+    }),
+  );

package/mobile/src/components/Calculator/getRefinancingCalculatorRateParams.ts

@@ -0,0 +1,40 @@
+import { RefinancingCalculatorParamsViewSettings } from './CalculatorContent';
+import { DEFAULT_REFINANCING_CALCULATOR_PARAMS } from './constants';
+import { checkRangeByKeys } from './rangeHelpers';
+import {
+  RefinancingCalculatorSourceBookRateParams,
+  RefinancingCalculatorUserInputParams,
+} from './useRefinancingCalculatorParams';
+import { checkRefinancingSourceBookRowCommonParams } from './checkRefinancingSourceBookRowCommonParams';
+
+interface GetRefinancingCalculatorRateParamsProps {
+  rateRows: RefinancingCalculatorSourceBookRateParams[];
+  userInputParams: RefinancingCalculatorUserInputParams;
+  paramsViewSettings?: RefinancingCalculatorParamsViewSettings;
+  moneyValue: number;
+  monthsValue: number;
+  moneyExtra: number;
+  oldMonthlyPayment: number;
+}
+
+export const getRefinancingCalculatorRateParams = ({
+  rateRows = [],
+  userInputParams,
+  paramsViewSettings,
+  moneyValue,
+  monthsValue,
+  oldMonthlyPayment,
+  moneyExtra,
+}: GetRefinancingCalculatorRateParamsProps) =>
+  rateRows?.find(
+    (row) =>
+      checkRefinancingSourceBookRowCommonParams({
+        row,
+        userInputParams,
+        paramsViewSettings,
+      }) &&
+      checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], row) &&
+      checkRangeByKeys(oldMonthlyPayment, ['minSumOld', 'maxSumOld'], row) &&
+      checkRangeByKeys(moneyExtra, ['minSumExtra', 'maxSumExtra'], row) &&
+      checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], row),
+  ) || DEFAULT_REFINANCING_CALCULATOR_PARAMS;

package/mobile/src/components/Calculator/rangeHelpers.ts

@@ -1,6 +1,6 @@
+import { min } from '../../utils/minBy';
 import { max } from '../../utils/maxBy';
 import { mergeIntervals } from '../../utils/mergeIntervals';
-import { min } from '../../utils/minBy';
 
 export const getLimitRangeByKeys = <
   MinKey extends string,
@@ -26,8 +26,12 @@ export const getRangeByKeys = <
   [minKey, maxKey]: [MinKey, MaxKey],
   rows: T[] = [],
 ) => ({
-  [minKey]: rows.length ? min(rows.filter((row) => row[minKey]).map((row) => row[minKey])) : 0,
-  [maxKey]: rows.length ? max(rows.filter((row) => row[maxKey]).map((row) => row[maxKey])) : 0,
+  [minKey]: rows.length
+    ? min(rows.filter((row) => typeof row[minKey] === 'number').map((row) => row[minKey]))
+    : 0,
+  [maxKey]: rows.length
+    ? max(rows.filter((row) => typeof row[minKey] === 'number').map((row) => row[maxKey]))
+    : 0,
 });
 
 export const getMergeRangesByKeys = <

package/mobile/src/components/Calculator/useRefinancingCalculatorParams.ts

@@ -0,0 +1,136 @@
+import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { clamp } from '../../utils/clamp';
+import { DEFAULT_REFINANCING_CALCULATOR_PARAMS, REFINANCING_CALC_DEFAULT_DIR } from './constants';
+import { getLimitRangeByKeys } from './rangeHelpers';
+import { useCalculatorParams } from './useCalculatorParams';
+import { RefinancingCalculatorParamsViewSettings } from './CalculatorContent';
+import { getRefinancingCalculatorLimitParams } from './getRefinancingCalculatorLimitParams';
+import { getRefinancingCalculatorRateParams } from './getRefinancingCalculatorRateParams';
+import { getMonthlyPayment } from './getMonthlyPayment';
+
+export interface CommonRefinancingParams {
+  isSalaryClient: boolean;
+  isInsurance: boolean;
+  isExtraMoney: boolean;
+}
+export interface RefinancingCalculatorSourceBookRateParams extends CommonRefinancingParams {
+  minSum: number;
+  maxSum: number;
+  minSumOld: number;
+  maxSumOld: number;
+  minSumExtra: number;
+  maxSumExtra: number;
+  minMonths: number;
+  maxMonths: number;
+  rate: number;
+}
+
+export interface RefinancingCalculatorSourceBookLimitParams extends CommonRefinancingParams {
+  minSum: number;
+  maxSum: number;
+  minSumOld: number;
+  maxSumOld: number;
+  minSumExtra: number;
+  maxSumExtra: number;
+  minMonths: number;
+  maxMonths: number;
+}
+
+export interface RefinancingCalculatorUserInputParams extends CommonRefinancingParams {
+  isAnnuity: boolean;
+  moneyValue: number;
+  oldMonthlyPayment: number;
+  moneyExtra: number;
+  monthsValue: number;
+}
+
+export interface RefinancingCalculatorParams
+  extends RefinancingCalculatorSourceBookRateParams,
+    RefinancingCalculatorUserInputParams {
+  monthlyPayment: number;
+  benefit: number;
+}
+
+export type RefinancingCalculatorData = {
+  rateRows?: RefinancingCalculatorSourceBookRateParams[];
+  limitRows?: RefinancingCalculatorSourceBookLimitParams[];
+};
+
+export const useRefinancingCalculatorParams = (
+  userInputParams: RefinancingCalculatorUserInputParams,
+  sourceBookDir?: string,
+  paramsViewSettings?: RefinancingCalculatorParamsViewSettings,
+): RefinancingCalculatorParams => {
+  let { moneyValue, monthsValue, oldMonthlyPayment, moneyExtra } = userInputParams;
+  const data = useCalculatorParams<RefinancingCalculatorData>(
+    sourceBookDir || REFINANCING_CALC_DEFAULT_DIR,
+  );
+  const rateRows = data?.rateRows || [DEFAULT_REFINANCING_CALCULATOR_PARAMS];
+  const limitRows = data?.limitRows || [];
+  const sourceBookLimitParams = getRefinancingCalculatorLimitParams({
+    limitRows,
+    userInputParams,
+    paramsViewSettings,
+  });
+
+  const { minSum, maxSum } = getLimitRangeByKeys(
+    ['minSum', 'maxSum'],
+    sourceBookLimitParams,
+    rateRows,
+  );
+
+  const { minSumOld, maxSumOld } = getLimitRangeByKeys(
+    ['minSumOld', 'maxSumOld'],
+    sourceBookLimitParams,
+    rateRows,
+  );
+
+  const { minSumExtra, maxSumExtra } = getLimitRangeByKeys(
+    ['minSumExtra', 'maxSumExtra'],
+    sourceBookLimitParams,
+    rateRows,
+  );
+
+  const { minMonths, maxMonths } = getLimitRangeByKeys(
+    ['minMonths', 'maxMonths'],
+    sourceBookLimitParams,
+    rateRows,
+  );
+
+  moneyValue = clamp(moneyValue, minSum, maxSum);
+  oldMonthlyPayment = clamp(oldMonthlyPayment, minSumOld, maxSumOld);
+  moneyExtra = clamp(moneyExtra, minSumExtra, maxSumExtra);
+  monthsValue = clamp(monthsValue, minMonths, maxMonths);
+
+  const refinancingCalculatorSourceBookRateParams = getRefinancingCalculatorRateParams({
+    rateRows,
+    userInputParams,
+    paramsViewSettings,
+    moneyValue,
+    monthsValue,
+    oldMonthlyPayment,
+    moneyExtra,
+  });
+  const { rate } = refinancingCalculatorSourceBookRateParams;
+  const monthlyPayment = getMonthlyPayment(rate, userInputParams);
+
+  const benefit = userInputParams.oldMonthlyPayment - monthlyPayment;
+
+  return useMemo(
+    () => ({
+      ...refinancingCalculatorSourceBookRateParams,
+      ...userInputParams,
+      minSum,
+      maxSum,
+      minMonths,
+      maxMonths,
+      moneyValue,
+      monthsValue,
+      oldMonthlyPayment,
+      moneyExtra,
+      monthlyPayment,
+      benefit,
+    }),
+    [userInputParams, data],
+  );
+};

package/mobile/src/components/CardTransfer/CardTransfer.tsx

@@ -44,7 +44,7 @@ export const CardTransfer = JSX<CardTransferProps>(
     return (
       <BlockWrapper
         className={style('flex flex-col items-center', className)}
-        defaultPadding="p-default"
+        defaultPadding="p-6xl"
         {...rest}
       >
         {title ? (

package/mobile/src/components/Carousel/Carousel.tsx

@@ -101,7 +101,7 @@ Carousel.childrenTypes = [
   'CarouselEventCard',
 ];
 
-const getPaddingStyle = (isPadding: boolean): string => (isPadding ? 'p-default' : '');
+const getPaddingStyle = (isPadding: boolean): string => (isPadding ? 'p-6xl' : '');
 
 const getAlignStyle = (isAlignCenter: boolean): string =>
   isAlignCenter ? 'flex justify-center' : '';

package/mobile/src/components/CarouselBankHistoryCard/CarouselBankHistoryCard.tsx

@@ -9,7 +9,7 @@ interface CarouselBankHistoryCardProps extends CarouselBankHistoryCardContent, U
 
 export const CarouselBankHistoryCard = JSX<CarouselBankHistoryCardProps>(
   ({ title, description, className }) => (
-    <BlockWrapper className={style(className)} defaultPadding="p-default">
+    <BlockWrapper className={style(className)} defaultPadding="p-6xl">
       <Headline
         headlineVersion="S"
         title={title}

package/mobile/src/components/CarouselCard/CarouselCard.tsx

@@ -9,13 +9,13 @@ import { titleSize } from './titleSize';
 
 export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {}
 
-const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full sm:hidden';
+const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full hidden sm:block';
 
 export const CarouselCard = JSX<CarouselCardProps>(
   ({ className = '', button, description, title, carouselVersion = 'normal', version = '' }) => (
     <section
       className={style(
-        'flex pb-9 pl-12 sm:p-5 border-box h-full sm:max-w-[375px]',
+        'flex pl-6xl sm:p-lg border-box h-full sm:max-w-[375px]',
         getCardWidth(className, carouselVersion),
         className,
       )}

package/mobile/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -3,9 +3,8 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import type { ProductColorVersion } from '../../model/ProductColorVersion';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Headline } from '../Headline/Headline';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import type { CarouselCatalogCardContent } from './CarouselCatalogCardContent';
@@ -21,25 +20,22 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
   ({ className = '', title, description, image, price, button, colors, ...rest }) => (
     <BlockWrapper
       className={style(
-        'border box-border border-gray p-default sm:p-7 h-full flex flex-col justify-left',
+        'border box-border border-gray p-6xl sm:p-7 h-full flex flex-col justify-left gap-m',
         className,
       )}
       {...rest}
     >
-      {image?.src ? <Img className="mb-5 flex justify-center" image={image} /> : null}
-      {title ? (
-        <Heading headingType="h6" as="h4" className="text-left mb-1.5" title={title} />
-      ) : null}
-      {description ? (
-        <div className="mb-4">
-          <Paragraph size="text-m" align="text-left" font="font-light">
-            {description}
-          </Paragraph>
-        </div>
-      ) : null}
+      {image?.src ? <Img className="flex justify-center" image={image} /> : null}
+      <Headline
+        title={title}
+        description={description}
+        headlineVersion="XS"
+        isPadding={false}
+        align="text-left"
+      />
       {colors?.length ? (
-        <div className="flex mb-4 text-secondary-text">
-          <div className="mr-1.5">
+        <div className="flex text-secondary-text">
+          <div className="mr-xs">
             <Text size="text-s" align="text-left" font="font-light">
               Цвета:
             </Text>
@@ -52,7 +48,7 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
           {price}&nbsp;₽
         </Text>
       ) : null}
-      {renderButtonsSection([button], { buttonClassName: 'mt-5 w-full' })}
+      {renderButtonsSection([button], { buttonClassName: 'w-full' })}
     </BlockWrapper>
   ),
 );

package/mobile/src/components/CarouselEventCard/CarouselEventCard.tsx

@@ -18,7 +18,7 @@ export const CarouselEventCard = JSX<CarouselEventCardProps>(
           {icon?.icon ? <Img image={icon} /> : null}
           {icon?.src ? <Img image={icon} /> : null}
           {title ? (
-            <Heading headingType="h6" as="h4" className="text-left pt-3 mb-2" title={title} />
+            <Heading headingType="h6" as="h4" className="text-left pt-s mb-xs" title={title} />
           ) : null}
           {description ? (
             <div className="mb-4">

package/mobile/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -44,10 +44,10 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
     >
       <BaseTile
         className="h-full"
-        defaultPadding="p-m"
+        defaultPadding="p-xl"
         padding={padding}
         title={
-          title ? <Heading headingType="h4" as="h3" className="mb-3.5 z-10" title={title} /> : null
+          title ? <Heading headingType="h4" as="h3" className="mb-m z-10" title={title} /> : null
         }
         backImage={image?.src ? <Img image={image} /> : null}
       >

package/mobile/src/components/CarouselLinks/CarouselLinks.tsx

@@ -18,7 +18,7 @@ export const CarouselLinks = JSX<CarouselLinksProps>(
       className={style('flex w-full overflow-hidden justify-between', className)}
       {...rest}
     >
-      <div className="flex flex-col max-w-96 pr-m text-white text-xl font-light">
+      <div className="flex flex-col max-w-96 pr-xl text-white text-xl font-light">
         <Headline
           isPadding={false}
           title={title}
@@ -28,7 +28,7 @@ export const CarouselLinks = JSX<CarouselLinksProps>(
         />
         {additionalDescription ? (
           <Headline
-            className="pt-s"
+            className="pt-m"
             description={additionalDescription}
             align="text-left"
             isPadding={false}