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

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

@@ -1,24 +1,23 @@
-import { useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLeadFormData } from '../../retail/hooks/useLeadFormData';
 import { type DictionaryItem } from '../../retail/model/LeadFormData';
 import { type Option } from '../../ui-kit/Select/Option';
-import {
-  type Cashback,
-  type CashbackCalculatorType,
-} from '../CashbackCalculatorLayout/CashbackCalculatorLayoutContent';
-import { type SelectedCategory } from './CashbackCalculator';
-import { DEFAULT_PREMIUM_CASHBACK, DEFAULT_STANDARD_CASHBACK } from './constants';
+import { type Cashback } from './CashbackCalculatorContent';
 
-const CashbackType = {
-  standard: DEFAULT_STANDARD_CASHBACK,
-  premium: DEFAULT_PREMIUM_CASHBACK,
-};
+const DEFAULT_CASHBACK: Cashback[] = [
+  {
+    id: 0,
+    percent: {
+      text: 'Категория 1% "На всё"',
+      key: '1',
+    },
+    sum: 5000,
+  },
+];
 
-export const useCashbackCalculator = (calculatorType: CashbackCalculatorType) => {
+export const useCashbackCalculator = () => {
   const { data } = useLeadFormData('CASHBACK_CATEGORY');
-  const [cashbacks, setCashbacks] = useState<Cashback[]>(CashbackType[calculatorType]);
-
-  const [selectedCategories, setSelectedCategories] = useState<SelectedCategory[]>([]);
+  const [cashbacks, setCashbacks] = useState<Cashback[]>(DEFAULT_CASHBACK);
 
   const categories: Option[] =
     data?.map((_: DictionaryItem) => ({
@@ -26,18 +25,11 @@ export const useCashbackCalculator = (calculatorType: CashbackCalculatorType) =>
       text: _.value,
     })) || [];
 
-  const filteredCategories = useMemo(() => {
-    const categoriesToRemove: Option[] = 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',
@@ -59,15 +51,14 @@ export const useCashbackCalculator = (calculatorType: CashbackCalculatorType) =>
 
   const onDeleteCashback = (id: number) => 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,
   };
 };

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

@@ -3,14 +3,7 @@ import { style } from '../../utils/style';
 import { type RichTextProps } from './RichTextProps';
 
 export const RichText = JSX<RichTextProps>(
-  ({
-    __html = '',
-    richVersion = '',
-    itemSize = 'list-m',
-    className,
-    isDotted = true,
-    children,
-  }) => {
+  ({ __html = '', richVersion = '', itemSize = 'list-m', isDotted = true, children }) => {
     const dotStyle = isDotted ? '' : 'without-dots';
 
     return __html || children ? (
@@ -22,7 +15,6 @@ export const RichText = JSX<RichTextProps>(
             itemSize,
             'md-container group-data-secondary:text-white group-data-gray:text-secondary-text',
             dotStyle,
-            className,
           )}
           dangerouslySetInnerHTML={__html ? { __html } : undefined}
         >

package/mobile/src/ui-kit/RichText/RichTextProps.ts

@@ -20,6 +20,4 @@ export type RichTextProps = BulletsProps & {
   richVersion?: RichVersion;
   /** @hidden */
   itemSize?: RichTextItemSize;
-  /** @hidden */
-  className?: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.1073",
+  "version": "0.14.1074",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -205,7 +205,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "130 kB",
+      "limit": "120 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/components/Blocks.ts

@@ -19,7 +19,6 @@ 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';
@@ -87,19 +86,18 @@ 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.example.json

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

package/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/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/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/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', ''));