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

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];
 };

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/components/DebitForm/utils.ts

@@ -9,6 +9,6 @@ export const debitProgrammIdToCardCodesMap = {
   44: 'appetit_debit_card',
   46: 'owner_debit_card_plus',
   47: 'owner_debit_card_pens_plus',
-  48: 'penzamolinvest_debit_card',
-  49: 'novye_fermi_debit_card',
+  48: 'salary_debit_card_48',
+  49: 'salary_debit_card_49',
 };

package/mobile/src/retail/components/DraftDialog/creditProgramCodes.ts

@@ -27,8 +27,8 @@ const debitCardCodesToProgrammIdMap = {
   appetit_debit_card: '44',
   owner_debit_card_plus: '46',
   owner_debit_card_pens_plus: '47',
-  penzamolinvest_debit_card: '48',
-  novye_fermi_debit_card: '49',
+  salary_debit_card_48: '48',
+  salary_debit_card_49: '49',
 };
 
 const cardCodesToProgrammIdMap = {

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.1075",
   "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;
+  };