@redneckz/wildless-cms-uni-blocks 0.14.935 → 0.14.936

package/mobile/src/components/CashbackCalculator/CashbackCalculator.tsx

@@ -0,0 +1,117 @@
+import { JSX } from '@redneckz/uni-jsx';
+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 UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { style } from '../../utils/style';
+import { Headline } from '../Headline/Headline';
+import { type Cashback, type CashbackCalculatorContent } from './CashbackCalculatorContent';
+import { CashbackCalculatorResult } from './CashbackCalculatorResult';
+import { CashbackCategory } from './CashbackCategory';
+import { useCashbackCalculator } from './useCashbackCalculator';
+
+const INCREASED_PERCENTS = ['5', '10', '15'];
+
+const MAX_CATEGORIES = 5;
+
+const INFO_BLOCK_HTML = `<p>Полученные баллы можно конвертировать в рубли и компенсировать покупки у партнеров. Подробнее в <a href='#docs'>документах</a></p>`;
+
+interface CashbackCalculatorProps extends CashbackCalculatorContent, UniBlockProps {}
+
+export const CashbackCalculator = JSX<CashbackCalculatorProps>(
+  ({
+    maxInputRange = 300000,
+    image,
+    deleteImage,
+    infoImage,
+    isMultiple = false,
+    className = '',
+    ...rest
+  }) => {
+    const {
+      cashbacks,
+      categories,
+      onAddNewCashback,
+      onChangeCashback,
+      onDeleteCashback,
+      onResetCashback,
+    } = useCashbackCalculator(isMultiple);
+
+    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-6xl')}
+        {...rest}
+      >
+        <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.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} />
+            <LinkButton
+              className="w-full @lg:w-auto self-start"
+              href="#zayavka"
+              text="Оформить карту"
+              version="primary"
+            />
+          </div>
+          {img}
+        </div>
+      </BlockWrapper>
+    );
+  },
+);
+
+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 showIncreasedPercents = (currentCashback: Cashback, cashback: Cashback[]) =>
+  INCREASED_PERCENTS.includes(currentCashback.percent.key) ||
+  !cashback.some((_) => INCREASED_PERCENTS.includes(_.percent.key));

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

@@ -0,0 +1,15 @@
+{
+  "style": {
+    "ui:options": {
+      "minCols": 12
+    }
+  },
+  "content": {
+    "deleteImage": {
+      "ui:field": "picture"
+    },
+    "infoImage": {
+      "ui:field": "picture"
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+import { type TitleProps } from '../../model/HeadlineType';
+import { type Picture } from '../../model/Picture';
+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 Максимальное значение поля 'Сумма покупок в категории' */
+    maxInputRange?: number;
+    /** @title Изображение */
+    image?: Picture;
+    /** @title Иконка кнопки удаления категории */
+    deleteImage?: Picture;
+    /** @title Иконка информационного блока */
+    infoImage?: Picture;
+    /** @title Предзаполнение дефолтного значения несколькими категориями */
+    isMultiple?: boolean;
+  };

package/mobile/src/components/CashbackCalculator/CashbackCalculatorResult.tsx

@@ -0,0 +1,66 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Text } from '../../ui-kit/Text/Text';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
+import { Headline } from '../Headline/Headline';
+import { type Cashback } from './CashbackCalculatorContent';
+
+const MAX_MONTH_CASHBACK = 5000;
+const MAX_YEAR_CASHBACK = 60000;
+
+export type CashbackCalculatorResultProps = UniBlockProps & {
+  cashbacks: Cashback[];
+};
+
+type ResultTextProps = {
+  text: string;
+  value: number;
+};
+
+const ResultText = JSX<ResultTextProps>(({ text, value }) => (
+  <div className="space-y-xs w-full">
+    <Text size="text-m" color="text-primary-text" font="font-light">
+      {text}
+    </Text>
+    <div className="w-full text-2xl bg-main-gray px-4 py-3 rounded-md">{`${toLocalNumberFormat()(
+      value,
+    )} ₽`}</div>
+  </div>
+));
+
+export const CashbackCalculatorResult = JSX<CashbackCalculatorResultProps>(({ cashbacks }) => {
+  const { mounth, year } = getResult(cashbacks);
+
+  return (
+    <div className="w-full flex flex-col gap-lg">
+      <Headline
+        title="Результат расчета"
+        description="Категории кешбэка предварительно"
+        headlineVersion="XS"
+        isEmbedded={true}
+        align="text-left"
+      />
+      <div className="flex flex-col @xs:flex-row gap-lg">
+        <ResultText text="Баллов в месяц" value={mounth} />
+        <ResultText text="Баллов в год" value={year} />
+      </div>
+    </div>
+  );
+});
+
+const getResult = (cashbacks: Cashback[]) => {
+  return cashbacks.reduce(
+    (acc, val) => {
+      const mounthSum = (Number(val.percent.key) / 100) * val.sum;
+
+      return {
+        mounth: Math.min(acc.mounth + mounthSum, MAX_MONTH_CASHBACK),
+        year: Math.min(acc.year + mounthSum * 12, MAX_YEAR_CASHBACK),
+      };
+    },
+    {
+      mounth: 0,
+      year: 0,
+    },
+  );
+};

package/mobile/src/components/CashbackCalculator/CashbackCategory.tsx

@@ -0,0 +1,143 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+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 { 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 { 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;
+}
+
+export const CashbackCategory = JSX<CashbackCategoryProps>(
+  ({
+    categories,
+    cashback,
+    showIncreasedPercents,
+    maxInputRange,
+    deleteImage,
+    onDelete,
+    onChange,
+  }) => {
+    const [currentCategory, setCurrentCategory] = useState(getRandomElement(categories));
+    const isMainCashback = cashback.id === 0;
+    const onChangePercent = (value: Option) => {
+      onChange({
+        ...cashback,
+        percent: value,
+      });
+    };
+
+    const onChangeSum = (value: number) => {
+      onChange({
+        ...cashback,
+        sum: value,
+      });
+    };
+
+    return (
+      <div className="w-full space-y-m">
+        <div className="space-y-xs">
+          <Text size="text-m" color="text-primary-text" font="font-light">
+            Выберите категорию кешбэка
+          </Text>
+          <div className="flex gap-m">
+            <Select
+              className="w-full"
+              isManualInput={isMainCashback}
+              placeholder="Выберите кэшбэк"
+              options={getPercentCategories(isMainCashback, showIncreasedPercents)}
+              value={cashback.percent}
+              onChange={onChangePercent}
+            />
+            {!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 ? (
+          <Select
+            label="Выберите катеорию"
+            placeholder="Выберите катеорию"
+            options={categories}
+            value={currentCategory}
+            onChange={setCurrentCategory}
+          />
+        ) : null}
+        <InputRange
+          step={500}
+          title="Сумма покупок в категории"
+          min={0}
+          max={maxInputRange}
+          value={cashback.sum}
+          onChange={onChangeSum}
+        />
+      </div>
+    );
+  },
+);
+
+const getRandomElement = <T,>(arr?: T[]): T | undefined =>
+  arr?.[new Date().getTime().toString().slice(-1)];
+
+const getPercentCategories = (isMainCashback: boolean, showIncreasedPercents: boolean) => {
+  if (isMainCashback) {
+    return [];
+  } else if (showIncreasedPercents) {
+    return AllPercentCategories;
+  } else {
+    return PercentCategoriesWithoutIncreased;
+  }
+};

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

@@ -0,0 +1,93 @@
+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 } from './CashbackCalculatorContent';
+
+const DEFAULT_MULTIPLE_CASHBACK: Cashback[] = [
+  {
+    id: 0,
+    percent: {
+      text: 'Категория на кешбэк 1%',
+      key: '1',
+    },
+    sum: 5000,
+  },
+  {
+    id: 1,
+    percent: {
+      text: 'Категория на кешбэк 1,5%',
+      key: '1.5',
+    },
+    sum: 5000,
+  },
+  {
+    id: 2,
+    percent: {
+      text: 'Категория на кешбэк 1,5%',
+      key: '1.5',
+    },
+    sum: 5000,
+  },
+];
+
+const DEFAULT_CASHBACK: Cashback[] = [
+  {
+    id: 0,
+    percent: {
+      text: 'Категория на кешбэк 1%',
+      key: '1',
+    },
+    sum: 5000,
+  },
+];
+
+export const useCashbackCalculator = (isMultiple: boolean) => {
+  const { data } = useLeadFormData('CASHBACK_CATEGORY');
+  const [cashbacks, setCashbacks] = useState<Cashback[]>(
+    isMultiple ? DEFAULT_MULTIPLE_CASHBACK : DEFAULT_CASHBACK,
+  );
+
+  const categories: Option[] =
+    data?.map((_: DictionaryItem) => ({
+      key: _.key || '',
+      text: _.value,
+    })) || [];
+
+  const onAddNewCashback = () =>
+    setCashbacks((_) => [
+      ..._,
+      {
+        id: _[_.length - 1].id + 1,
+        percent: {
+          text: 'Категория на кешбэк 1,5%',
+          key: '1.5',
+        },
+        sum: 5000,
+      },
+    ]);
+
+  const onChangeCashback = (item: Cashback) =>
+    setCashbacks((prev) =>
+      prev.map((_) => {
+        if (_.id === item.id) {
+          return item;
+        }
+
+        return _;
+      }),
+    );
+
+  const onDeleteCashback = (id: number) => setCashbacks((prev) => prev.filter((_) => _.id !== id));
+
+  const onResetCashback = () => setCashbacks(DEFAULT_CASHBACK);
+
+  return {
+    cashbacks,
+    categories,
+    onAddNewCashback,
+    onChangeCashback,
+    onDeleteCashback,
+    onResetCashback,
+  };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.935",
+  "version": "0.14.936",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/Blocks.mobile.ts

@@ -17,6 +17,7 @@ import { Carousel } from './Carousel/Carousel';
 import { CarouselCatalogCard } from './CarouselCatalogCard/CarouselCatalogCard';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
+import { CashbackCalculator } from './CashbackCalculator/CashbackCalculator';
 import { CreditCardForm } from './CreditCardForm/CreditCardForm';
 import { CreditForm } from './CreditForm/CreditForm';
 import { DebitForm } from './DebitForm/DebitForm';
@@ -86,4 +87,5 @@ export const Blocks: BlocksRegistry = {
   CreditCardForm,
   CreditForm,
   DebitForm,
+  CashbackCalculator,
 };

package/src/components/Blocks.ts

@@ -17,6 +17,7 @@ import { Carousel } from './Carousel/Carousel';
 import { CarouselCatalogCard } from './CarouselCatalogCard/CarouselCatalogCard';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
+import { CashbackCalculator } from './CashbackCalculator/CashbackCalculator';
 import { ContactsBlock } from './ContactsBlock/ContactsBlock';
 import { CreditCardForm } from './CreditCardForm/CreditCardForm';
 import { CreditForm } from './CreditForm/CreditForm';
@@ -90,4 +91,5 @@ export const Blocks: BlocksRegistry = {
   CreditCardForm,
   CreditForm,
   DebitForm,
+  CashbackCalculator,
 };

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

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

package/src/components/CashbackCalculator/CashbackCalculator.fixture.mobile.tsx

@@ -0,0 +1,45 @@
+import { type Picture } from '../../model/Picture';
+import '../../setup-fixture';
+import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
+
+import { CashbackCalculator } from './CashbackCalculator';
+
+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: 'Потребительский кредит наличными',
+  size: {
+    width: 280,
+    height: 280,
+  },
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <CashbackCalculator
+        image={image}
+        deleteImage={deleteImage}
+        infoImage={infoImage}
+        isMultiple={false}
+      />
+      <PopupManager />
+    </div>
+  ),
+};

package/src/components/CashbackCalculator/CashbackCalculator.fixture.tsx

@@ -0,0 +1,54 @@
+import { type Picture } from '../../model/Picture';
+import '../../setup-fixture';
+import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
+
+import { CashbackCalculator } from './CashbackCalculator';
+
+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: 'Иконка информационного блока',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <CashbackCalculator
+        image={image}
+        deleteImage={deleteImage}
+        infoImage={infoImage}
+        isMultiple={false}
+        className="col-span-12"
+      />
+      <PopupManager />
+    </div>
+  ),
+  multiple: (
+    <div className="container grid grid-cols-12">
+      <CashbackCalculator
+        image={image}
+        deleteImage={deleteImage}
+        infoImage={infoImage}
+        isMultiple={true}
+        className="col-span-12"
+      />
+      <PopupManager />
+    </div>
+  ),
+};