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

package/src/components/CashbackCalculator/renderButtons.tsx

@@ -0,0 +1,38 @@
+import { Button } from '../../ui-kit/Button/Button';
+import { MAX_CATEGORIES } from './constants';
+
+type RenderButtonsProps = {
+  cashbacksLength: number;
+  onAddNewCashback: () => void;
+  onResetCashback: () => void;
+  calculatorType?: string;
+  maxCategories?: number;
+};
+
+export const renderButtons = ({
+  cashbacksLength,
+  onAddNewCashback,
+  onResetCashback,
+  calculatorType = 'standard',
+  maxCategories = MAX_CATEGORIES[calculatorType],
+}: RenderButtonsProps) => {
+  return (
+    <div className="w-full flex flex-col gap-lg">
+      {cashbacksLength < maxCategories ? (
+        <Button
+          className="self-start text-primary-main"
+          embedded
+          version="secondary"
+          onClick={onAddNewCashback}
+        >
+          {cashbacksLength ? 'Добавить ещё категорию' : 'Добавить категорию'}
+        </Button>
+      ) : null}
+      {cashbacksLength > 2 ? (
+        <Button className="self-start" version="secondary" onClick={onResetCashback}>
+          Сбросить все категории
+        </Button>
+      ) : null}
+    </div>
+  );
+};

package/src/components/CashbackCalculator/useCashbackCalculator.ts

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

package/src/components/CashbackCalculatorLayout/CashbackCalculatorLayout.example.json

@@ -0,0 +1,47 @@
+{
+  "content": {
+    "title": "Калькулятор расчёта баллов",
+    "description": "<p>Можно выбрать до 5 категорий для уровня программы лояльности «Стандарт», </br> до 7 категорий для уровня программы лояльности «Престиж»</p>",
+    "subtitle": "Выберите уровень программы лояльности",
+    "premiumCalculatorParams": {
+      "maxInputRange": 300000,
+      "maxCategories": 7,
+      "maxMonthCashback": 15000
+    },
+    "standardCalculatorParams": {
+      "maxInputRange": 300000,
+      "maxCategories": 5,
+      "maxMonthCashback": 5000
+    },
+    "deleteImage": {
+      "src": "IconDelete.svg",
+      "format": "webp",
+      "alt": "Иконка кнопки удаления блока кэшбека"
+    },
+    "infoImage": {
+      "src": "IconExchange.svg",
+      "format": "webp",
+      "alt": "Иконка информационного блока"
+    },
+    "image": {
+      "src": "money-1.png",
+      "format": "webp",
+      "alt": "Калькулятор кэшбека",
+      "size": {
+        "width": 540,
+        "height": 366
+      }
+    },
+    "button": {
+      "href": "/natural/debetcards/svoya-plus",
+      "text": "Оформить карту",
+      "target": "_self"
+    }
+  },
+  "blocks": [
+    {
+      "content": {},
+      "type": "CashbackCalculator"
+    }
+  ]
+}

package/src/components/CashbackCalculatorLayout/CashbackCalculatorLayout.fixture.tsx

@@ -0,0 +1,61 @@
+import { type Picture } from '../../model/Picture';
+import '../../setup-fixture';
+import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
+
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import { Blocks } from '../Blocks';
+import { CashbackCalculatorLayout } from './CashbackCalculatorLayout';
+
+const image: Picture = {
+  src: 'money-1.png',
+  format: 'webp',
+  alt: 'Потребительский кредит наличными',
+  size: {
+    width: 540,
+    height: 366,
+  },
+};
+
+const deleteImage: Picture = {
+  src: 'IconDelete.svg',
+  format: 'webp',
+  alt: 'Иконка кнопки удаления блока кэшбека',
+};
+
+const infoImage: Picture = {
+  src: 'IconExchange.svg',
+  format: 'webp',
+  alt: 'Иконка информационного блока',
+};
+
+const options: BlockRendererOptions = {
+  blocksRegistry: Blocks,
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <CashbackCalculatorLayout
+        title="Калькулятор расчёта баллов"
+        description="<p>Можно выбрать до 5 категорий для уровня программы лояльности «Стандарт», </br> до 7 категорий для уровня программы лояльности «Престиж»</p>"
+        subtitle="Выберите уровень программы лояльности"
+        image={image}
+        deleteImage={deleteImage}
+        infoImage={infoImage}
+        className="col-span-12"
+        options={options}
+        premiumCalculatorParams={{
+          maxInputRange: 300000,
+          maxCategories: 7,
+          maxMonthCashback: 15000,
+        }}
+        standardCalculatorParams={{
+          maxInputRange: 300000,
+          maxCategories: 5,
+          maxMonthCashback: 5000,
+        }}
+      />
+      <PopupManager />
+    </div>
+  ),
+};

package/src/components/CashbackCalculatorLayout/CashbackCalculatorLayout.tsx

@@ -0,0 +1,116 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { Picture } from '../../model/Picture';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { style } from '../../utils/style';
+import { Headline } from '../Headline/Headline';
+import { TabsLayout } from '../TabsLayout/TabsLayout';
+import type { Tab } from '../TabsLayout/TabsLayoutContent';
+import {
+  type CalculatorParams,
+  type CashbackCalculatorLayoutContent,
+  type CashbackCalculatorType,
+} from './CashbackCalculatorLayoutContent';
+
+const CALCULATOR_TABS: Tab[] = [
+  {
+    type: 'group',
+    description: 'с остатками на счетах до 2 999 999,99 руб*',
+    text: 'Стандарт',
+    tabName: 'standard',
+    selected: true,
+  },
+  {
+    type: 'group',
+    description: 'с остатками на счетах от 3 000 000,00 руб*',
+    text: 'Престиж',
+    tabName: 'premium',
+    selected: false,
+  },
+];
+
+const defaultInfoImage: Picture = {
+  src: 'IconExchange.svg',
+  format: 'webp',
+  alt: 'Иконка информационного блока',
+};
+
+interface CashbackCalculatorProps extends CashbackCalculatorLayoutContent, UniBlockProps {}
+
+export const CashbackCalculatorLayout = JSX<CashbackCalculatorProps>(
+  ({
+    premiumCalculatorParams = {},
+    standardCalculatorParams = {},
+    image,
+    deleteImage,
+    infoImage = defaultInfoImage,
+    button,
+    className = '',
+    options,
+    title,
+    description,
+    subtitle,
+    ...rest
+  }) => {
+    const calculatorProps = {
+      button,
+      deleteImage,
+      infoImage,
+      image,
+    };
+
+    const CalculatorStandardBlock = createCalculatorBlock(
+      'standard',
+      calculatorProps,
+      standardCalculatorParams,
+    );
+
+    const CalculatorPremiumBlock = createCalculatorBlock(
+      'premium',
+      calculatorProps,
+      premiumCalculatorParams,
+    );
+
+    const slots = {
+      standard: [CalculatorStandardBlock],
+      premium: [CalculatorPremiumBlock],
+    };
+
+    return (
+      <BlockWrapper
+        className={style('flex flex-col justify-center items-center gap-lg', className)}
+        defaultPadding={style('p-6xl')}
+        {...rest}
+      >
+        <Headline title={title} headlineVersion="XL" isEmbedded={true} />
+        <RichText __html={description} className="text-center" />
+        <Paragraph>{subtitle}</Paragraph>
+        <div className="container grid grid-cols-12">
+          <TabsLayout
+            className="col-span-12"
+            tabsType="animated"
+            tabs={CALCULATOR_TABS}
+            block={{ slots }}
+            options={options}
+          />
+        </div>
+      </BlockWrapper>
+    );
+  },
+);
+
+const createCalculatorBlock = (
+  calculatorType: CashbackCalculatorType,
+  calculatorProps: CashbackCalculatorLayoutContent,
+  calculatorParams: CalculatorParams,
+) => ({
+  type: 'CashbackCalculator',
+  content: {
+    calculatorType: calculatorType,
+    ...calculatorProps,
+    ...calculatorParams,
+  },
+  style: ['col-span-12'],
+});

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

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

package/src/components/CashbackCalculatorLayout/CashbackCalculatorLayoutContent.ts

@@ -0,0 +1,49 @@
+import {
+  type DescriptionProps,
+  type SubtitleProps,
+  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;
+};
+
+export type CalculatorParams = {
+  /** @title Максимальное значение поля «Сумма покупок в категории» */
+  maxInputRange?: number;
+  /** @title Максимальное количество выбранных категорий */
+  maxCategories?: number;
+  /** @title Максимальное количество баллов в месяц */
+  maxMonthCashback?: number;
+};
+
+/**
+ * @title Блок калькулятора кэшбека
+ */
+export type CashbackCalculatorLayoutContent = UniBlockContent &
+  TitleProps &
+  DescriptionProps &
+  SubtitleProps & {
+    /** @title Параметры калькулятора стандарт */
+    standardCalculatorParams?: CalculatorParams;
+    /** @title Параметры калькулятора престиж */
+    premiumCalculatorParams?: CalculatorParams;
+    /** @title Кнопка */
+    button?: LinkButtonContent;
+    /** @title Изображение */
+    image?: Picture;
+    /** @title Иконка кнопки удаления категории */
+    deleteImage?: Picture;
+    /** @title Иконка информационного блока */
+    infoImage?: Picture;
+    /** @hidden */
+    calculatorType?: CashbackCalculatorType;
+  };
+
+export type CashbackCalculatorType = 'standard' | 'premium';

package/src/retail/api/createParticipant.ts

@@ -12,7 +12,7 @@ interface CreateParticipantResponseType {
 
 export const createParticipant = (body: CreateParticipantType) =>
   fetchRetailJSON<CreateParticipantResponseType>(
-    '/external/public-data/createParticipant',
+    '/internal/entities/createParticipant',
     'POST',
     body,
   ).then((res) => res || null);

package/src/retail/model/ApplicationLeadFormTypes.ts

@@ -29,7 +29,7 @@ export interface CommonLeadProps {
 }
 
 export interface TaskDataProps {
-  participantId: string | number;
+  participantId?: string | number;
   formData: LeadFormState;
   referalData: ReferalData | null;
   marketingInfo: MarketingInfo | null;

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

@@ -3,7 +3,14 @@ import { style } from '../../utils/style';
 import { type RichTextProps } from './RichTextProps';
 
 export const RichText = JSX<RichTextProps>(
-  ({ __html = '', richVersion = '', itemSize = 'list-m', isDotted = true, children }) => {
+  ({
+    __html = '',
+    richVersion = '',
+    itemSize = 'list-m',
+    className,
+    isDotted = true,
+    children,
+  }) => {
     const dotStyle = isDotted ? '' : 'without-dots';
 
     return __html || children ? (
@@ -15,6 +22,7 @@ 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/src/ui-kit/RichText/RichTextProps.ts

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

package/bundle/components/CashbackCalculator/CashbackCalculatorContent.d.ts

@@ -1,25 +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 declare type Cashback = {
-    id: number;
-    percent: Option;
-    sum: number;
-};
-/**
- * @title Блок калькулятора кэшбека
- */
-export declare type CashbackCalculatorContent = UniBlockContent & TitleProps & {
-    /** @title Кнопка */
-    button?: LinkButtonContent;
-    /** @title Максимальное значение поля 'Сумма покупок в категории' */
-    maxInputRange?: number;
-    /** @title Изображение */
-    image?: Picture;
-    /** @title Иконка кнопки удаления категории */
-    deleteImage?: Picture;
-    /** @title Иконка информационного блока */
-    infoImage?: Picture;
-};

package/mobile/bundle/components/CashbackCalculator/CashbackCalculatorContent.d.ts

@@ -1,25 +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 declare type Cashback = {
-    id: number;
-    percent: Option;
-    sum: number;
-};
-/**
- * @title Блок калькулятора кэшбека
- */
-export declare type CashbackCalculatorContent = UniBlockContent & TitleProps & {
-    /** @title Кнопка */
-    button?: LinkButtonContent;
-    /** @title Максимальное значение поля 'Сумма покупок в категории' */
-    maxInputRange?: number;
-    /** @title Изображение */
-    image?: Picture;
-    /** @title Иконка кнопки удаления категории */
-    deleteImage?: Picture;
-    /** @title Иконка информационного блока */
-    infoImage?: Picture;
-};

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

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

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

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