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

package/mobile/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/mobile/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;
+};

package/mobile/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/mobile/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/mobile/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/mobile/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/{src/components/CashbackCalculator/CashbackCalculator.ui.json → mobile/src/components/CashbackCalculatorLayout/CashbackCalculatorLayout.ui.json}

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

package/mobile/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/mobile/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/mobile/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/mobile/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/mobile/src/ui-kit/RichText/RichTextProps.ts

@@ -20,4 +20,6 @@ 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.1069",
+  "version": "0.14.1071",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -205,7 +205,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "120 kB",
+      "limit": "130 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/components/ApplicationLeadForm/useApplicationLeadApi.tsx

@@ -152,26 +152,11 @@ export const useApplicationLeadApi = ({
     try {
       startSending();
       const transformedFormData = transformFormData(formData);
-      const participantData = await createParticipant({
-        phone: formatPhone(transformedFormData.phone as string),
-        email: transformedFormData.email as string,
-      });
-
       const referalData = leadFormStore.referalData;
       const marketingInfo = sessionStore.marketingInfo;
 
-      if (!participantData) {
-        throw new Error();
-      }
-
-      const { participantId, userId } = participantData;
-
-      if (!participantId) {
-        throw new Error();
-      }
       const common: CommonLeadProps = {
         programId,
-        userId,
         productType,
         sendAspects,
         verifyPhoneDialog,
@@ -179,23 +164,17 @@ export const useApplicationLeadApi = ({
       };
 
       const taskData: TaskDataProps = {
-        participantId,
         formData: transformedFormData,
         referalData,
         marketingInfo,
         saveUserData,
       };
 
-      const sendCurrentTask = createSendCurrentTaskNew({
-        common,
-        taskData,
-        consentBkiDialog,
-      });
-
       const handleSuccessVerify = createHandleSuccessVerifyNew({
         common,
+        taskData,
         draftDialog,
-        sendCurrentTask,
+        consentBkiDialog,
       });
 
       const acceptedConsents = getAcceptedConsents(transformedFormData, productType);
@@ -233,6 +212,11 @@ const createSendCurrentTaskNew =
     const { programId, userId, productType, sendAspects, verifyPhoneDialog, handleFailSendForm } =
       common;
     const { participantId, formData, referalData, marketingInfo, saveUserData } = taskData;
+
+    if (!participantId) {
+      throw new Error();
+    }
+
     const taskId = await updateUserDataNewMicroservice({
       programId,
       participantId,
@@ -257,17 +241,51 @@ const createSendCurrentTaskNew =
 const createHandleSuccessVerifyNew =
   ({
     common,
+    taskData,
     draftDialog,
-    sendCurrentTask,
+    consentBkiDialog,
   }: {
     common: CommonLeadProps;
+    taskData: TaskDataProps;
     draftDialog: any;
-    sendCurrentTask: () => Promise<void>;
+    consentBkiDialog: ReturnType<typeof useConsentBkiDialog>;
   }) =>
   async () => {
-    const { verifyPhoneDialog, sendAspects, handleFailSendForm, userId, programId, productType } =
-      common;
+    const { programId, productType, sendAspects, verifyPhoneDialog, handleFailSendForm } = common;
+    const { formData } = taskData;
+
     try {
+      const participantData = await createParticipant({
+        phone: formatPhone(formData.phone as string),
+        email: formData.email as string,
+      });
+
+      if (!participantData) {
+        throw new Error();
+      }
+
+      const { participantId, userId } = participantData;
+
+      if (!participantId) {
+        throw new Error();
+      }
+
+      const updatedCommon: CommonLeadProps = {
+        ...common,
+        userId,
+      };
+
+      const updatedTaskData: TaskDataProps = {
+        ...taskData,
+        participantId,
+      };
+
+      const sendCurrentTask = createSendCurrentTaskNew({
+        common: updatedCommon,
+        taskData: updatedTaskData,
+        consentBkiDialog,
+      });
+
       const lastTaskId = await getLastTaskStatus({ userId, programId });
 
       if (lastTaskId) {
@@ -283,7 +301,8 @@ const createHandleSuccessVerifyNew =
       } else {
         await sendCurrentTask();
       }
-    } catch {
+    } catch (error) {
+      console.error('Error in handleSuccessVerify:', error);
       handleFailSendForm();
     }
   };