@redneckz/wildless-cms-uni-blocks 0.14.1073 → 0.14.1074

package/mobile/lib/components/CashbackCalculator/useCashbackCalculator.js

@@ -1,27 +1,26 @@
-import { useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLeadFormData } from '../../retail/hooks/useLeadFormData.js';
-import { DEFAULT_PREMIUM_CASHBACK, DEFAULT_STANDARD_CASHBACK } from './constants.js';
-const CashbackType = {
-    standard: DEFAULT_STANDARD_CASHBACK,
-    premium: DEFAULT_PREMIUM_CASHBACK,
-};
-export const useCashbackCalculator = (calculatorType) => {
+const DEFAULT_CASHBACK = [
+    {
+        id: 0,
+        percent: {
+            text: 'Категория 1% "На всё"',
+            key: '1',
+        },
+        sum: 5000,
+    },
+];
+export const useCashbackCalculator = () => {
     const { data } = useLeadFormData('CASHBACK_CATEGORY');
-    const [cashbacks, setCashbacks] = useState(CashbackType[calculatorType]);
-    const [selectedCategories, setSelectedCategories] = useState([]);
+    const [cashbacks, setCashbacks] = useState(DEFAULT_CASHBACK);
     const categories = data?.map((_) => ({
         key: _.key || '',
         text: _.value,
     })) || [];
-    const filteredCategories = useMemo(() => {
-        const categoriesToRemove = selectedCategories.map((obj) => obj.category);
-        const keysToRemove = new Set(categoriesToRemove.map((item) => item.key));
-        return categories.filter((item) => !keysToRemove.has(item.key));
-    }, [selectedCategories, categories]);
     const onAddNewCashback = () => setCashbacks((_) => [
         ..._,
         {
-            id: _ && _.length > 0 ? _[_.length - 1]?.id + 1 : 1,
+            id: _[_.length - 1].id + 1,
             percent: {
                 text: 'Категория 1,5%',
                 key: '1.5',
@@ -36,15 +35,14 @@ export const useCashbackCalculator = (calculatorType) => {
         return _;
     }));
     const onDeleteCashback = (id) => setCashbacks((prev) => prev.filter((_) => _.id !== id));
-    const onResetCashback = () => setCashbacks(CashbackType[calculatorType]);
+    const onResetCashback = () => setCashbacks(DEFAULT_CASHBACK);
     return {
         cashbacks,
-        categories: filteredCategories,
+        categories,
         onAddNewCashback,
         onChangeCashback,
         onDeleteCashback,
         onResetCashback,
-        onChangeCategory: setSelectedCategories,
     };
 };
 //# sourceMappingURL=useCashbackCalculator.js.map

package/mobile/lib/components/CashbackCalculator/useCashbackCalculator.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCashbackCalculator.js","sourceRoot":"","sources":["../../../src/components/CashbackCalculator/useCashbackCalculator.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useCashbackCalculator.js","sourceRoot":"","sources":["../../../src/components/CashbackCalculator/useCashbackCalculator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAKrE,MAAM,gBAAgB,GAAe;IACnC;QACE,EAAE,EAAE,CAAC;QACL,OAAO,EAAE;YACP,IAAI,EAAE,uBAAuB;YAC7B,GAAG,EAAE,GAAG;SACT;QACD,GAAG,EAAE,IAAI;KACV;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACxC,MAAM,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,mBAAmB,CAAC,CAAC;IACtD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAa,gBAAgB,CAAC,CAAC;IAEzE,MAAM,UAAU,GACd,IAAI,EAAE,GAAG,CAAC,CAAC,CAAiB,EAAE,EAAE,CAAC,CAAC;QAChC,GAAG,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE;QAChB,IAAI,EAAE,CAAC,CAAC,KAAK;KACd,CAAC,CAAC,IAAI,EAAE,CAAC;IAEZ,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAC5B,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;QAClB,GAAG,CAAC;QACJ;YACE,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC;YAC1B,OAAO,EAAE;gBACP,IAAI,EAAE,gBAAgB;gBACtB,GAAG,EAAE,KAAK;aACX;YACD,GAAG,EAAE,IAAI;SACV;KACF,CAAC,CAAC;IAEL,MAAM,gBAAgB,GAAG,CAAC,IAAc,EAAE,EAAE,CAC1C,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CACpB,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;QACb,IAAI,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,EAAE;YACpB,OAAO,IAAI,CAAC;SACb;QAED,OAAO,CAAC,CAAC;IACX,CAAC,CAAC,CACH,CAAC;IAEJ,MAAM,gBAAgB,GAAG,CAAC,EAAU,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;IAEjG,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC;IAE7D,OAAO;QACL,SAAS;QACT,UAAU;QACV,gBAAgB;QAChB,gBAAgB;QAChB,gBAAgB;QAChB,eAAe;KAChB,CAAC;AACJ,CAAC,CAAC"}

package/mobile/lib/components/GalleryLayout/utils.d.ts

@@ -8,7 +8,6 @@ export declare const modifyBlock: (block: BlockDef, i: number) => {
         __html?: string | undefined;
         richVersion?: import("../../ui-kit/RichText/RichTextProps").RichVersion | undefined;
         itemSize?: import("../../ui-kit/RichText/RichTextProps").RichTextItemSize | undefined;
-        className?: string | undefined;
     } & import("../../ui-kit/Tags/TagsContent").TagsContent & import("../../ui-kit/LinkButton/ButtonsSectionContent").ButtonsSectionContent & import("../../ui-kit/Img/ImgProps").ImageContent & import("../../ui-kit/BaseProductTile/BaseProductTileContent").PriceListProps & {
         imageOptions?: import("../../ui-kit/BaseProductTile/BaseProductTileContent").TileImageOptions | undefined;
         isFullWidthTitle?: boolean | undefined;

package/mobile/lib/ui-kit/RichText/RichText.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
 import { style } from '../../utils/style.js';
-export const RichText = JSX(({ __html = '', richVersion = '', itemSize = 'list-m', className, isDotted = true, children, }) => {
+export const RichText = JSX(({ __html = '', richVersion = '', itemSize = 'list-m', isDotted = true, children }) => {
     const dotStyle = isDotted ? '' : 'without-dots';
     return __html || children ? (
     /* Attribute [data-component] need for correct render in wcms editor. Do not remove. */
-    _jsx("div", { "data-component": "rich-text-container", children: _jsx("div", { className: style(richVersion, itemSize, 'md-container group-data-secondary:text-white group-data-gray:text-secondary-text', dotStyle, className), dangerouslySetInnerHTML: __html ? { __html } : undefined, children: children }) })) : null;
+    _jsx("div", { "data-component": "rich-text-container", children: _jsx("div", { className: style(richVersion, itemSize, 'md-container group-data-secondary:text-white group-data-gray:text-secondary-text', dotStyle), dangerouslySetInnerHTML: __html ? { __html } : undefined, children: children }) })) : null;
 });
 //# sourceMappingURL=RichText.js.map

package/mobile/lib/ui-kit/RichText/RichText.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichText.js","sourceRoot":"","sources":["../../../src/ui-kit/RichText/RichText.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAG1C,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CACzB,CAAC,EACC,MAAM,GAAG,EAAE,EACX,WAAW,GAAG,EAAE,EAChB,QAAQ,GAAG,QAAQ,EACnB,SAAS,EACT,QAAQ,GAAG,IAAI,EACf,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC;IAEhD,OAAO,MAAM,IAAI,QAAQ,CAAC,CAAC,CAAC;IAC1B,uFAAuF;IACvF,gCAAoB,qBAAqB,YACvC,cACE,SAAS,EAAE,KAAK,CACd,WAAW,EACX,QAAQ,EACR,kFAAkF,EAClF,QAAQ,EACR,SAAS,CACV,EACD,uBAAuB,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,SAAS,YAEvD,QAAQ,GACL,GACF,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC"}
+{"version":3,"file":"RichText.js","sourceRoot":"","sources":["../../../src/ui-kit/RichText/RichText.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAG1C,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CACzB,CAAC,EAAE,MAAM,GAAG,EAAE,EAAE,WAAW,GAAG,EAAE,EAAE,QAAQ,GAAG,QAAQ,EAAE,QAAQ,GAAG,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE;IACpF,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC;IAEhD,OAAO,MAAM,IAAI,QAAQ,CAAC,CAAC,CAAC;IAC1B,uFAAuF;IACvF,gCAAoB,qBAAqB,YACvC,cACE,SAAS,EAAE,KAAK,CACd,WAAW,EACX,QAAQ,EACR,kFAAkF,EAClF,QAAQ,CACT,EACD,uBAAuB,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,SAAS,YAEvD,QAAQ,GACL,GACF,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC"}

package/mobile/lib/ui-kit/RichText/RichTextProps.d.ts

@@ -16,7 +16,5 @@ export declare type RichTextProps = BulletsProps & {
     richVersion?: RichVersion;
     /** @hidden */
     itemSize?: RichTextItemSize;
-    /** @hidden */
-    className?: string;
 };
 export {};

package/mobile/src/components/CashbackCalculator/CashbackCalculator.example.json

@@ -0,0 +1 @@
+{}

package/mobile/src/components/CashbackCalculator/CashbackCalculator.tsx

@@ -1,24 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { type Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Button } from '../../ui-kit/Button/Button';
 import { Img } from '../../ui-kit/Img/Img';
 import { InfoCard } from '../../ui-kit/InfoCard/InfoCard';
 import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
-import type { LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
-import { RichText } from '../../ui-kit/RichText/RichText';
-import { type Option } from '../../ui-kit/Select/Option';
-import { Text } from '../../ui-kit/Text/Text';
+import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
-import {
-  type CalculatorParams,
-  type CashbackCalculatorLayoutContent,
-} from '../CashbackCalculatorLayout/CashbackCalculatorLayoutContent';
+import { Headline } from '../Headline/Headline';
+import { type Cashback, type CashbackCalculatorContent } from './CashbackCalculatorContent';
 import { CashbackCalculatorResult } from './CashbackCalculatorResult';
 import { CashbackCategory } from './CashbackCategory';
-import { INFO_BLOCK_HTML, MAIN_CASHBACK_KEY, MAX_MONTH_CASHBACK } from './constants';
-import { renderButtons } from './renderButtons';
 import { useCashbackCalculator } from './useCashbackCalculator';
 
 const defaultButton: LinkButtonContent = {
@@ -27,25 +19,22 @@ const defaultButton: LinkButtonContent = {
   target: '_self',
 };
 
-interface CashbackCalculatorProps
-  extends CalculatorParams,
-    CashbackCalculatorLayoutContent,
-    UniBlockProps {}
+const INCREASED_PERCENTS = ['5', '10', '15'];
 
-export type SelectedCategory = {
-  id: number;
-  category: Option;
-};
+const MAX_CATEGORIES = 5;
+
+const INFO_BLOCK_HTML = `<p>Полученные баллы можно конвертировать в рубли и компенсировать покупки у партнеров. Подробнее в <a href='#docs'>документах</a></p>`;
+
+interface CashbackCalculatorProps extends CashbackCalculatorContent, UniBlockProps {}
 
 export const CashbackCalculator = JSX<CashbackCalculatorProps>(
-  // eslint-disable-next-line max-lines-per-function
   ({
     maxInputRange = 300000,
-    maxCategories,
-    calculatorType = 'standard',
-    maxMonthCashback = MAX_MONTH_CASHBACK[calculatorType],
-    button = defaultButton,
+    image,
+    deleteImage,
+    infoImage,
     className = '',
+    button = defaultButton,
     ...rest
   }) => {
     const {
@@ -55,53 +44,41 @@ export const CashbackCalculator = JSX<CashbackCalculatorProps>(
       onChangeCashback,
       onDeleteCashback,
       onResetCashback,
-      onChangeCategory,
-    } = useCashbackCalculator(calculatorType);
-
-    const { deleteImage, infoImage, image } = rest;
-    const [isMainCashbackAdded, setIsMainCashbackAdded] = useState(false);
+    } = useCashbackCalculator();
 
-    useEffect(() => {
-      setIsMainCashbackAdded(
-        Boolean(cashbacks.find((item) => item.percent.key === MAIN_CASHBACK_KEY[calculatorType])),
-      );
-    }, [cashbacks]);
+    const img = image?.src ? (
+      <Img image={image} className="hidden w-full @xl:block" imageClassName="justify-self-center" />
+    ) : null;
 
     return (
       <BlockWrapper
         className={style('flex flex-col justify-center items-center gap-lg', className)}
-        defaultPadding={style('p-0')}
+        defaultPadding={style('p-6xl')}
         {...rest}
       >
-        <div className="flex flex-row items-start gap-lg mt-5">
+        <Headline
+          title="Калькулятор расчета баллов"
+          description="Можно выбрать не более 5 категорий, одна из них из повышенной категории"
+          headlineVersion="XL"
+          isEmbedded={true}
+        />
+        <div className="flex flex-row items-start gap-lg">
           <div className="w-full flex flex-col justify-center items-center gap-lg">
-            {cashbacks.length
-              ? cashbacks.map((_, index) => (
-                  <CashbackCategory
-                    key={String(_.id)}
-                    categories={categories}
-                    cashback={_}
-                    maxInputRange={maxInputRange}
-                    deleteImage={deleteImage}
-                    onDelete={onDeleteCashback}
-                    onChange={onChangeCashback}
-                    isMainCashbackAdded={isMainCashbackAdded}
-                    calculatorType={calculatorType}
-                    isShowDisclaimer={index === 0}
-                    onChangeCategory={onChangeCategory}
-                  />
-                ))
-              : renderNoCategoryText()}
-            {renderButtons({
-              cashbacksLength: cashbacks.length,
-              onAddNewCashback: onAddNewCashback,
-              onResetCashback: onResetCashback,
-              calculatorType: calculatorType,
-              maxCategories,
-            })}
-            <CashbackCalculatorResult cashbacks={cashbacks} maxMonthCashback={maxMonthCashback} />
+            {cashbacks.map((_) => (
+              <CashbackCategory
+                key={String(_.id)}
+                categories={categories}
+                cashback={_}
+                showIncreasedPercents={showIncreasedPercents(_, cashbacks)}
+                maxInputRange={maxInputRange}
+                deleteImage={deleteImage}
+                onDelete={onDeleteCashback}
+                onChange={onChangeCashback}
+              />
+            ))}
+            {renderButtons(cashbacks.length, onAddNewCashback, onResetCashback)}
+            <CashbackCalculatorResult cashbacks={cashbacks} />
             <InfoCard __html={INFO_BLOCK_HTML} image={infoImage} />
-            <RichText __html='* Подробнее по условиям и начислениям можно узнать во вкладке <a href="#docs">документы</a>' />
             <LinkButton
               className="w-full @lg:w-auto self-start"
               href={button.href}
@@ -110,20 +87,39 @@ export const CashbackCalculator = JSX<CashbackCalculatorProps>(
               version="primary"
             />
           </div>
-          {renderImage(image)}
+          {img}
         </div>
       </BlockWrapper>
     );
   },
 );
 
-const renderNoCategoryText = () => (
-  <Text align="text-left" className="w-full">
-    Категория не выбрана
-  </Text>
-);
+const renderButtons = (
+  cashbacksLength: number,
+  onAddNewCashback: () => void,
+  onResetCashback: () => void,
+) => {
+  return (
+    <div className="w-full flex flex-col gap-lg">
+      {cashbacksLength < MAX_CATEGORIES ? (
+        <Button
+          className="self-start text-primary-main"
+          embedded
+          version="secondary"
+          onClick={onAddNewCashback}
+        >
+          Добавить еще
+        </Button>
+      ) : null}
+      {cashbacksLength > 2 ? (
+        <Button className="self-start" version="secondary" onClick={onResetCashback}>
+          Сбросить все категории
+        </Button>
+      ) : null}
+    </div>
+  );
+};
 
-const renderImage = (image: Picture = {}) =>
-  image?.src ? (
-    <Img image={image} className="hidden w-full @xl:block" imageClassName="justify-self-center" />
-  ) : null;
+const showIncreasedPercents = (currentCashback: Cashback, cashback: Cashback[]) =>
+  INCREASED_PERCENTS.includes(currentCashback.percent.key) ||
+  !cashback.some((_) => INCREASED_PERCENTS.includes(_.percent.key));

package/mobile/src/components/{CashbackCalculatorLayout/CashbackCalculatorLayout.ui.json → CashbackCalculator/CashbackCalculator.ui.json}

@@ -10,12 +10,6 @@
     },
     "infoImage": {
       "ui:field": "picture"
-    },
-    "image": {
-      "ui:field": "picture"
-    },
-    "description": {
-      "ui:widget": "html"
     }
   }
 }

package/mobile/src/components/CashbackCalculator/CashbackCalculatorContent.ts

@@ -0,0 +1,28 @@
+import { type TitleProps } from '../../model/HeadlineType';
+import { type Picture } from '../../model/Picture';
+import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
+import { type Option } from '../../ui-kit/Select/Option';
+import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
+
+export type Cashback = {
+  id: number;
+  percent: Option;
+  sum: number;
+};
+
+/**
+ * @title Блок калькулятора кэшбека
+ */
+export type CashbackCalculatorContent = UniBlockContent &
+  TitleProps & {
+    /** @title Кнопка */
+    button?: LinkButtonContent;
+    /** @title Максимальное значение поля 'Сумма покупок в категории' */
+    maxInputRange?: number;
+    /** @title Изображение */
+    image?: Picture;
+    /** @title Иконка кнопки удаления категории */
+    deleteImage?: Picture;
+    /** @title Иконка информационного блока */
+    infoImage?: Picture;
+  };

package/mobile/src/components/CashbackCalculator/CashbackCalculatorResult.tsx

@@ -1,13 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Heading } from '../../ui-kit/Heading/Heading';
+import { RichText } from '../../ui-kit/RichText/RichText';
 import { Text } from '../../ui-kit/Text/Text';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
-import { type Cashback } from '../CashbackCalculatorLayout/CashbackCalculatorLayoutContent';
+import { type Cashback } from './CashbackCalculatorContent';
+
+const MAX_MONTH_CASHBACK = 5000;
+const MAX_YEAR_CASHBACK = 60000;
 
 export type CashbackCalculatorResultProps = UniBlockProps & {
   cashbacks: Cashback[];
-  maxMonthCashback: number;
 };
 
 type ResultTextProps = {
@@ -26,37 +29,34 @@ const ResultText = JSX<ResultTextProps>(({ text, value }) => (
   </div>
 ));
 
-export const CashbackCalculatorResult = JSX<CashbackCalculatorResultProps>(
-  ({ cashbacks, maxMonthCashback }) => {
-    const { month, year } = getResult(cashbacks, maxMonthCashback);
-
-    return (
-      <div className="w-full flex flex-col gap-lg">
-        <Heading className="text-left" headingType="h5" as="h2" title="Результат расчета" />
-        <div className="flex flex-col @xs:flex-row gap-lg">
-          <ResultText text="Баллов в месяц" value={month} />
-          <ResultText text="Баллов в год" value={year} />
-        </div>
+export const CashbackCalculatorResult = JSX<CashbackCalculatorResultProps>(({ cashbacks }) => {
+  const { mounth, year } = getResult(cashbacks);
+
+  return (
+    <div className="w-full flex flex-col gap-lg">
+      <Heading className="text-left" headingType="h5" as="h2" title="Результат расчета" />
+      <RichText __html='Категории покупок для расчета баллов предварительные.<br />Подробнее по условиям и начислениям можно узнать во вкладке <a href="#docs">документы</a>' />
+      <div className="flex flex-col @xs:flex-row gap-lg">
+        <ResultText text="Баллов в месяц" value={mounth} />
+        <ResultText text="Баллов в год" value={year} />
       </div>
-    );
-  },
-);
+    </div>
+  );
+});
 
-const getResult = (cashbacks: Cashback[], maxMonthCashback: number) => {
+const getResult = (cashbacks: Cashback[]) => {
   return cashbacks.reduce(
     (acc, val) => {
-      const mounthSum = (formatKey(val.percent.key) / 100) * val.sum;
+      const mounthSum = (Number(val.percent.key) / 100) * val.sum;
 
       return {
-        month: Math.min(acc.month + mounthSum, maxMonthCashback),
-        year: Math.min(acc.year + mounthSum * 12, maxMonthCashback * 12),
+        mounth: Math.min(acc.mounth + mounthSum, MAX_MONTH_CASHBACK),
+        year: Math.min(acc.year + mounthSum * 12, MAX_YEAR_CASHBACK),
       };
     },
     {
-      month: 0,
+      mounth: 0,
       year: 0,
     },
   );
 };
-
-const formatKey = (key: string) => Number(key.replace('-main', ''));

package/mobile/src/components/CashbackCalculator/CashbackCategory.tsx

@@ -4,88 +4,107 @@ import { type Picture } from '../../model/Picture';
 import { Button } from '../../ui-kit/Button/Button';
 import { Img } from '../../ui-kit/Img/Img';
 import { InputRange } from '../../ui-kit/InputRange/InputRange';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { type Option } from '../../ui-kit/Select/Option';
 import { Select } from '../../ui-kit/Select/Select';
 import { Text } from '../../ui-kit/Text/Text';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
-import { noop } from '../../utils/noop';
-import { type Cashback } from '../CashbackCalculatorLayout/CashbackCalculatorLayoutContent';
-import { type SelectedCategory } from './CashbackCalculator';
-import { MAIN_CASHBACK_KEY } from './constants';
-import { getPercentCategories } from './getPercentCategories';
+import { type Cashback } from './CashbackCalculatorContent';
+
+const AllPercentCategories: Option[] = [
+  {
+    text: 'Категория 1,5%',
+    key: '1.5',
+  },
+  {
+    text: 'Категория 3%',
+    key: '3',
+  },
+  {
+    text: 'Категория 5%',
+    key: '5',
+  },
+  {
+    text: 'Категория 10%',
+    key: '10',
+  },
+  {
+    text: 'Категория 15%',
+    key: '15',
+  },
+];
+
+const PercentCategoriesWithoutIncreased: Option[] = [
+  {
+    text: 'Категория 1,5%',
+    key: '1.5',
+  },
+  {
+    text: 'Категория 3%',
+    key: '3',
+  },
+];
 
 export interface CashbackCategoryProps extends UniBlockProps {
   categories?: Option[];
   cashback: Cashback;
+  showIncreasedPercents: boolean;
   maxInputRange: number;
   deleteImage?: Picture;
   onDelete: (id: number) => void;
   onChange: (item: Cashback) => void;
-  isMainCashbackAdded?: boolean;
-  calculatorType?: string;
-  isShowDisclaimer?: boolean;
-  onChangeCategory: (item: (prev: SelectedCategory[]) => any) => void;
 }
 
-const defaultDeleteImage: Picture = {
-  src: 'IconDelete.svg',
-  format: 'webp',
-  alt: 'Иконка кнопки удаления блока кэшбека',
-};
-
 export const CashbackCategory = JSX<CashbackCategoryProps>(
   ({
     categories,
     cashback,
+    showIncreasedPercents,
     maxInputRange,
-    deleteImage = defaultDeleteImage,
-    isMainCashbackAdded = false,
-    calculatorType = 'standard',
+    deleteImage,
     onDelete,
     onChange,
-    isShowDisclaimer = false,
-    onChangeCategory = noop,
   }) => {
     const [currentCategory, setCurrentCategory] = useState(getRandomElement(categories));
-    const isMainCashback = cashback.percent.key === MAIN_CASHBACK_KEY[calculatorType];
-
-    const onChangePercent = createChangeHandler(cashback, 'percent', onChange);
-    const onChangeSum = createChangeHandler(cashback, 'sum', onChange);
+    const isMainCashback = cashback.id === 0;
+    const onChangePercent = (value: Option) => {
+      onChange({
+        ...cashback,
+        percent: value,
+      });
+    };
 
-    const onChangeCashbackCategory = (value: Option) => {
-      setCurrentCategory(value);
-      onChangeCategory((prev) => updateSelectedCategories(prev, cashback, value));
+    const onChangeSum = (value: number) => {
+      onChange({
+        ...cashback,
+        sum: value,
+      });
     };
 
     return (
       <div className="w-full space-y-m">
         <div className="space-y-xs">
-          <Paragraph size="text-m" color="text-primary-text" font="font-light">
+          <Text size="text-m" color="text-primary-text" font="font-light">
             Выберите категорию
-          </Paragraph>
-          {isShowDisclaimer ? (
-            <Text size="text-s" color="text-primary-text" font="font-light" className="italic">
-              Категории покупок для расчёта баллов предварительные
-            </Text>
-          ) : null}
+          </Text>
           <div className="flex gap-m">
             <Select
               className="w-full"
               isManualInput={isMainCashback}
               placeholder="Выберите категорию"
-              options={getPercentCategories(isMainCashbackAdded, calculatorType)}
+              options={getPercentCategories(isMainCashback, showIncreasedPercents)}
               value={cashback.percent}
               onChange={onChangePercent}
             />
-            <Button
-              version="secondary"
-              onClick={() => onDelete(cashback.id)}
-              shape="round"
-              className="px-4 rounded-md"
-            >
-              <Img image={deleteImage} />
-            </Button>
+            {!isMainCashback ? (
+              <Button
+                version="secondary"
+                onClick={() => onDelete(cashback.id)}
+                shape="round"
+                className="px-4 rounded-md"
+              >
+                <Img image={deleteImage} />
+              </Button>
+            ) : null}
           </div>
         </div>
         {categories?.length && !isMainCashback ? (
@@ -94,7 +113,7 @@ export const CashbackCategory = JSX<CashbackCategoryProps>(
             placeholder="Выберите категорию покупок"
             options={categories}
             value={currentCategory}
-            onChange={onChangeCashbackCategory}
+            onChange={setCurrentCategory}
           />
         ) : null}
         <InputRange
@@ -113,29 +132,12 @@ export const CashbackCategory = JSX<CashbackCategoryProps>(
 const getRandomElement = <T,>(arr?: T[]): T | undefined =>
   arr?.[new Date().getTime().toString().slice(-1)];
 
-const createChangeHandler =
-  <T, K extends keyof T>(obj: T, field: K, onChange: (value: T) => void) =>
-  (value: T[K]) => {
-    onChange({
-      ...obj,
-      [field]: value,
-    });
-  };
-
-const updateSelectedCategories = (prev: SelectedCategory[], cashback: Cashback, value: Option) => {
-  const newItem = { id: cashback.id, category: value };
-
-  if (prev.length === 0) {
-    return [newItem];
+const getPercentCategories = (isMainCashback: boolean, showIncreasedPercents: boolean) => {
+  if (isMainCashback) {
+    return [];
+  } else if (showIncreasedPercents) {
+    return AllPercentCategories;
+  } else {
+    return PercentCategoriesWithoutIncreased;
   }
-  const index = prev.findIndex((item) => item.id === cashback.id);
-
-  if (index !== -1) {
-    const updated = [...prev];
-    updated[index] = newItem;
-
-    return updated;
-  }
-
-  return [...prev, newItem];
 };