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

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

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/CreditCardForm/FailedStatusContent.tsx

@@ -4,7 +4,7 @@ import { FormStatus } from '../../retail/components/FormStatus/FormStatus';
 export const FailedStatusContent = JSX(() => (
   <FormStatus
     title="Благодарим Вас за ожидание"
-    description="В настоящий момент Банк не может одобрить Вашу заявку на кредит. Попробуйте подать заявку позже. Спасибо за обращение в АО «Россельхозбанк»."
+    description="В настоящий момент Банк не может одобрить Вашу заявку на кредитную карту. Попробуйте подать заявку позже. Спасибо за обращение в АО «Россельхозбанк»."
     buttonText="Вернуться на главную"
   />
 ));

package/mobile/src/components/CreditCardForm/PendingStatusContent.tsx

@@ -10,7 +10,7 @@ export const PendingStatusContent = JSX(({ onExpire }: { onExpire: () => void })
       interval={300}
       title="Заявка успешно отправлена"
       description="Не закрывайте окно, скоро сообщим результат"
-      sectionInfoTitle="Заявленные условия по кредиту"
+      sectionInfoTitle="Заявленные условия по кредитной карте"
       sectionInfo={[
         {
           label: 'Название продукта',

package/mobile/src/components/CreditCardForm/ReworkStatusContent.tsx

@@ -26,11 +26,11 @@ export const ReworkStatusContent = JSX(() => {
 
   return (
     <FormStatus
-      title="Благодарим вас за ожидание, но нам требуется больше времени для принятия решения"
+      title="Благодарим Вас за ожидание, но нам требуется больше времени для принятия решения"
       description={
         isCourierDelivery
           ? ''
-          : 'Посетите выбранное отделение банка с необходимыми документами и так завершите оформление кредита.'
+          : 'Посетите выбранное отделение банка с необходимыми документами и так завершите оформление кредитной карты.'
       }
       sectionAdditionalTitle={isCourierDelivery ? 'Адрес доставки' : 'В отделении Банка'}
       sectionInfoAdditional={infoAdditional}

package/mobile/src/components/CreditCardForm/SuccessStatusCardContent.tsx

@@ -8,8 +8,8 @@ export const SuccessStatusCardContent = JSX(() => {
 
   return (
     <FormStatus
-      title="Банк одобрил вам кредит"
-      description="Обратитесь в отделение банка, чтобы завершить оформление и получить ваш кредит"
+      title="Банк одобрил Вам кредитную карту"
+      description="Обратитесь в отделение банка, чтобы завершить оформление и получить Вашу кредитную карту"
       sectionInfo={getSectionInfo(statusInfo)}
       buttonText="Вернуться на главную"
     />

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.1072",
+  "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 @@
+{}