@redneckz/wildless-cms-uni-blocks 0.14.1069 → 0.14.1071

package/src/components/Blocks.ts

@@ -19,6 +19,7 @@ import { CarouselCatalogCard } from './CarouselCatalogCard/CarouselCatalogCard';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { CashbackCalculator } from './CashbackCalculator/CashbackCalculator';
+import { CashbackCalculatorLayout } from './CashbackCalculatorLayout/CashbackCalculatorLayout';
 import { ContactsBlock } from './ContactsBlock/ContactsBlock';
 import { CreditCardForm } from './CreditCardForm/CreditCardForm';
 import { CreditForm } from './CreditForm/CreditForm';
@@ -86,18 +87,19 @@ export const Blocks: BlocksRegistry = {
   RollupItem,
   StepsBlock,
   StickyBottomMenu,
+  TextBlock,
   TabsLayout,
   TariffsTable,
-  TextBlock,
   VerticalLayout,
   Video,
   ApplicationLeadForm,
   CreditCardForm,
   CreditForm,
   DebitForm,
-  CashbackCalculator,
   CalculatorRko,
   RkoTariffCardsTable,
   RatesTable,
   ReferalForm,
+  CashbackCalculator,
+  CashbackCalculatorLayout,
 };

package/src/components/CashbackCalculator/CashbackCalculator.tsx

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

package/src/components/CashbackCalculator/CashbackCalculatorContent.ts

@@ -1,28 +0,0 @@
-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/src/components/CashbackCalculator/CashbackCalculatorResult.tsx

@@ -1,16 +1,13 @@
 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 './CashbackCalculatorContent';
-
-const MAX_MONTH_CASHBACK = 5000;
-const MAX_YEAR_CASHBACK = 60000;
+import { type Cashback } from '../CashbackCalculatorLayout/CashbackCalculatorLayoutContent';
 
 export type CashbackCalculatorResultProps = UniBlockProps & {
   cashbacks: Cashback[];
+  maxMonthCashback: number;
 };
 
 type ResultTextProps = {
@@ -29,34 +26,37 @@ const ResultText = JSX<ResultTextProps>(({ text, value }) => (
   </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} />
+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>
       </div>
-    </div>
-  );
-});
+    );
+  },
+);
 
-const getResult = (cashbacks: Cashback[]) => {
+const getResult = (cashbacks: Cashback[], maxMonthCashback: number) => {
   return cashbacks.reduce(
     (acc, val) => {
-      const mounthSum = (Number(val.percent.key) / 100) * val.sum;
+      const mounthSum = (formatKey(val.percent.key) / 100) * val.sum;
 
       return {
-        mounth: Math.min(acc.mounth + mounthSum, MAX_MONTH_CASHBACK),
-        year: Math.min(acc.year + mounthSum * 12, MAX_YEAR_CASHBACK),
+        month: Math.min(acc.month + mounthSum, maxMonthCashback),
+        year: Math.min(acc.year + mounthSum * 12, maxMonthCashback * 12),
       };
     },
     {
-      mounth: 0,
+      month: 0,
       year: 0,
     },
   );
 };
+
+const formatKey = (key: string) => Number(key.replace('-main', ''));

package/src/components/CashbackCalculator/CashbackCategory.tsx

@@ -4,107 +4,88 @@ 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 { 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',
-  },
-];
+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';
 
 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,
+    deleteImage = defaultDeleteImage,
+    isMainCashbackAdded = false,
+    calculatorType = 'standard',
     onDelete,
     onChange,
+    isShowDisclaimer = false,
+    onChangeCategory = noop,
   }) => {
     const [currentCategory, setCurrentCategory] = useState(getRandomElement(categories));
-    const isMainCashback = cashback.id === 0;
-    const onChangePercent = (value: Option) => {
-      onChange({
-        ...cashback,
-        percent: value,
-      });
-    };
+    const isMainCashback = cashback.percent.key === MAIN_CASHBACK_KEY[calculatorType];
+
+    const onChangePercent = createChangeHandler(cashback, 'percent', onChange);
+    const onChangeSum = createChangeHandler(cashback, 'sum', onChange);
 
-    const onChangeSum = (value: number) => {
-      onChange({
-        ...cashback,
-        sum: value,
-      });
+    const onChangeCashbackCategory = (value: Option) => {
+      setCurrentCategory(value);
+      onChangeCategory((prev) => updateSelectedCategories(prev, cashback, value));
     };
 
     return (
       <div className="w-full space-y-m">
         <div className="space-y-xs">
-          <Text size="text-m" color="text-primary-text" font="font-light">
+          <Paragraph size="text-m" color="text-primary-text" font="font-light">
             Выберите категорию
-          </Text>
+          </Paragraph>
+          {isShowDisclaimer ? (
+            <Text size="text-s" color="text-primary-text" font="font-light" className="italic">
+              Категории покупок для расчёта баллов предварительные
+            </Text>
+          ) : null}
           <div className="flex gap-m">
             <Select
               className="w-full"
               isManualInput={isMainCashback}
               placeholder="Выберите категорию"
-              options={getPercentCategories(isMainCashback, showIncreasedPercents)}
+              options={getPercentCategories(isMainCashbackAdded, calculatorType)}
               value={cashback.percent}
               onChange={onChangePercent}
             />
-            {!isMainCashback ? (
-              <Button
-                version="secondary"
-                onClick={() => onDelete(cashback.id)}
-                shape="round"
-                className="px-4 rounded-md"
-              >
-                <Img image={deleteImage} />
-              </Button>
-            ) : null}
+            <Button
+              version="secondary"
+              onClick={() => onDelete(cashback.id)}
+              shape="round"
+              className="px-4 rounded-md"
+            >
+              <Img image={deleteImage} />
+            </Button>
           </div>
         </div>
         {categories?.length && !isMainCashback ? (
@@ -113,7 +94,7 @@ export const CashbackCategory = JSX<CashbackCategoryProps>(
             placeholder="Выберите категорию покупок"
             options={categories}
             value={currentCategory}
-            onChange={setCurrentCategory}
+            onChange={onChangeCashbackCategory}
           />
         ) : null}
         <InputRange
@@ -132,12 +113,29 @@ export const CashbackCategory = JSX<CashbackCategoryProps>(
 const getRandomElement = <T,>(arr?: T[]): T | undefined =>
   arr?.[new Date().getTime().toString().slice(-1)];
 
-const getPercentCategories = (isMainCashback: boolean, showIncreasedPercents: boolean) => {
-  if (isMainCashback) {
-    return [];
-  } else if (showIncreasedPercents) {
-    return AllPercentCategories;
-  } else {
-    return PercentCategoriesWithoutIncreased;
+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 index = prev.findIndex((item) => item.id === cashback.id);
+
+  if (index !== -1) {
+    const updated = [...prev];
+    updated[index] = newItem;
+
+    return updated;
+  }
+
+  return [...prev, newItem];
 };

package/src/components/CashbackCalculator/constants.ts

@@ -0,0 +1,97 @@
+import type { Option } from '../../ui-kit/Select/Option';
+import { type Cashback } from '../CashbackCalculatorLayout/CashbackCalculatorLayoutContent';
+
+export const ALL_PERCENT_STANDARD_CATEGORIES: Option[] = [
+  {
+    text: 'Категория 1% «На всё»',
+    key: '1-main',
+  },
+  {
+    text: 'Категория 1,5%',
+    key: '1.5',
+  },
+  {
+    text: 'Категория 3%',
+    key: '3',
+  },
+  {
+    text: 'Категория 5%',
+    key: '5',
+  },
+  {
+    text: 'Категория 10%',
+    key: '10',
+  },
+  {
+    text: 'Категория 15%',
+    key: '15',
+  },
+];
+
+export const ALL_PERCENT_PREMIUM_CATEGORIES: Option[] = [
+  {
+    text: 'Категория 1,5% «На всё»',
+    key: '1.5-main',
+  },
+  {
+    text: 'Категория 1,5%',
+    key: '1.5',
+  },
+  {
+    text: 'Категория 3%',
+    key: '3',
+  },
+  {
+    text: 'Категория 5%',
+    key: '5',
+  },
+  {
+    text: 'Категория 10%',
+    key: '10',
+  },
+  {
+    text: 'Категория 15%',
+    key: '15',
+  },
+];
+
+export const MAIN_CASHBACK_KEY = {
+  standard: '1-main',
+  premium: '1.5-main',
+};
+
+export const DEFAULT_STANDARD_CASHBACK: Cashback[] = [
+  {
+    id: 0,
+    percent: {
+      text: 'Категория 1% «На всё»',
+      key: '1-main',
+    },
+    sum: 5000,
+  },
+];
+
+export const DEFAULT_PREMIUM_CASHBACK: Cashback[] = [
+  {
+    id: 0,
+    percent: {
+      text: 'Категория 1,5% «На всё»',
+      key: '1.5-main',
+    },
+    sum: 5000,
+  },
+];
+
+// export const INCREASED_PERCENTS = ['5', '10', '15'];
+
+export const MAX_CATEGORIES = {
+  standard: 5,
+  premium: 7,
+};
+
+export const INFO_BLOCK_HTML = `<p>Полученные баллы можно конвертировать в рубли и компенсировать покупки у партнеров.</p>`;
+
+export const MAX_MONTH_CASHBACK: Record<string, number> = {
+  standard: 5000,
+  premium: 15000,
+};

package/src/components/CashbackCalculator/getPercentCategories.ts

@@ -0,0 +1,24 @@
+import {
+  ALL_PERCENT_PREMIUM_CATEGORIES,
+  ALL_PERCENT_STANDARD_CATEGORIES,
+  MAIN_CASHBACK_KEY,
+} from './constants';
+
+export const getPercentCategories = (isMainCashbackAdded: boolean, calculatorType: string) => {
+  const allPercentCategories =
+    calculatorType === 'premium' ? ALL_PERCENT_PREMIUM_CATEGORIES : ALL_PERCENT_STANDARD_CATEGORIES;
+
+  let updatedCategories = allPercentCategories;
+
+  if (!isMainCashbackAdded) {
+    return allPercentCategories;
+  }
+
+  if (isMainCashbackAdded) {
+    updatedCategories = updatedCategories.filter(
+      (_) => _.key !== MAIN_CASHBACK_KEY[calculatorType],
+    );
+  }
+
+  return updatedCategories;
+};