@redneckz/wildless-cms-uni-blocks 0.3.57 → 0.3.58

package/src/components/Calculator/renderCalculatorList.tsx

@@ -0,0 +1,43 @@
+import type { JSXBlock } from '../../components/ContentPage/ContentPage';
+import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
+import type { CalculatorBlockDef } from './CalculatorContent';
+import { EmbeddableCalcBlocks, EmbeddableCalcProps } from './EmbeddableCalcBlocks';
+
+type EmbeddableCalcBlocks = {
+  blockCalcTabs?: CalculatorBlockDef[];
+  context: ContentPageContext;
+  className?: string;
+};
+
+export const renderCalculatorList = ({
+  blockCalcTabs,
+  context,
+  className,
+}: EmbeddableCalcBlocks) => {
+  return blockCalcTabs?.length ? blockCalcTabs.map(renderBlock({ context, className })) : null;
+};
+
+const renderBlock =
+  ({ context, className }: any) =>
+  (blockCalcTabs: CalculatorBlockDef, i: number) => {
+    const type = blockCalcTabs?.calcType;
+    if (!type || !(type in EmbeddableCalcBlocks)) {
+      return null;
+    }
+    const EmbeddedBlock: JSXBlock<EmbeddableCalcProps> = EmbeddableCalcBlocks[type];
+    return (
+      <section
+        key={`${String(i)}`}
+        className={`box-border relative flex grow-0 shrink-0 basis-full ${className}`}
+        role="listitem"
+      >
+        <div className={`box-border p-9 w-full`}>
+          <EmbeddedBlock
+            context={context}
+            {...blockCalcTabs}
+            className="!p-0 flex justify-between"
+          />
+        </div>
+      </section>
+    );
+  };

package/src/components/Calculator/renderInitialFeeInput.tsx

@@ -0,0 +1,37 @@
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
+import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { DEFAULT_MAX_SUM, DEFAULT_MIN_SUM } from './constants';
+import type { CalculatorParams } from './CalculatorContent';
+
+const STEP_MONEY = 1000;
+
+interface RenderWantedSumInputProps {
+  calculatorParams: CalculatorParams;
+  moneyValue: number | undefined;
+  defaultSum: number;
+  setMoneyValue: InputRangeProps['onChange'];
+}
+
+export function renderInitialFeeInput(props: RenderWantedSumInputProps) {
+  const { calculatorParams, moneyValue, defaultSum, setMoneyValue } = props;
+
+  const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM;
+  const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM;
+
+  return (
+    <InputRange
+      className="mt-6"
+      title="Первоначальный взнос, ₽ "
+      items={[
+        `От ${addSpacesBetweenNumbers(minSum)} рублей`,
+        `До ${addSpacesBetweenNumbers(maxSum)} рублей`,
+      ]}
+      min={minSum}
+      max={maxSum}
+      step={STEP_MONEY}
+      value={moneyValue || defaultSum}
+      onChange={setMoneyValue}
+    />
+  );
+}

package/src/components/Calculator/renderMonthsInput.tsx

@@ -0,0 +1,34 @@
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
+
+const STEP_MONTHS = 1;
+
+interface RenderMonthsInputProps {
+  title: string;
+  minMonths: number;
+  maxMonths: number;
+  monthsValue: number | undefined;
+  defaultMonths: number;
+  setMonthsValue: InputRangeProps['onChange'];
+}
+
+export function renderMonthsInput(props: RenderMonthsInputProps) {
+  const { title, minMonths, maxMonths, monthsValue, defaultMonths, setMonthsValue } = props;
+  const monthText = (month) => {
+    const text = Number(month) % 10 === 1 ? 'месяца' : 'месяцев';
+    return `${month} ${text}`;
+  };
+
+  return (
+    <InputRange
+      className="mt-6"
+      title={title}
+      items={[`От ${monthText(minMonths)}`, `До ${monthText(maxMonths)}`]}
+      min={minMonths}
+      max={maxMonths}
+      step={STEP_MONTHS}
+      value={monthsValue || defaultMonths}
+      onChange={setMonthsValue}
+    />
+  );
+}

package/src/components/Calculator/renderProposal.tsx

@@ -0,0 +1,14 @@
+import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { Button } from '../../ui-kit/Button/Button';
+
+export function renderProposal(monthlyPayment: number) {
+  return (
+    <div className="box-border ">
+      <div className="text-base font-light">Ежемесячный платёж</div>
+      <div className="text-title mb-3 font-normal">
+        {addSpacesBetweenNumbers(Math.round(monthlyPayment))} ₽
+      </div>
+      <Button className="mt-[50px] w-full" text="Отправить заявку" version="primary" href="#" />
+    </div>
+  );
+}

package/src/components/Calculator/renderProposalMortgage.tsx

@@ -0,0 +1,17 @@
+import { CalculatorValueBlock } from './CalculatorValueBlock';
+
+type porposalMortgage = {
+  credit: number;
+  period: number;
+  taxRefund: number;
+};
+
+export function renderProposalMortgage({ credit, period, taxRefund }: porposalMortgage) {
+  return (
+    <div>
+      {<CalculatorValueBlock title="Сумма кредита" value={credit} postfix="₽" />}
+      {<CalculatorValueBlock title="Срок" value={period} postfix="лет" />}
+      {<CalculatorValueBlock title="Налоговый вычет" value={taxRefund} postfix="₽" />}
+    </div>
+  );
+}

package/src/components/Calculator/renderRate.tsx

@@ -0,0 +1,23 @@
+type rateType = {
+  rate: number;
+  title?: string;
+  sup?: string;
+  className?: string;
+};
+
+export function renderRate({ rate, title, sup, className = '' }: rateType) {
+  const rateFormat = String(rate).replace('.', ',');
+  return (
+    <div>
+      <div className="text-sm font-light ml-3">{title}</div>
+      <div className="flex justify-start">
+        <span
+          className={`calc-rate-text font-mohave text-[200px] leading-[250px] pr-4 mt-[-16px] ${className}`}
+        >
+          {rateFormat}
+        </span>
+        {sup ? <span className="calc-rate-text text-[65px] leading-[75px]">{sup}</span> : ''}
+      </div>
+    </div>
+  );
+}

package/src/components/Calculator/renderRealEstateValue.tsx

@@ -0,0 +1,33 @@
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
+import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { DEFAULT_MAX_SUM, DEFAULT_MIN_SUM } from './constants';
+import type { CalculatorParams } from './CalculatorContent';
+
+const STEP_MONEY = 1000;
+
+interface RenderRealEstateValueInputProps {
+  calculatorParams: CalculatorParams;
+  moneyValue: number | undefined;
+  defaultSum: number;
+  setMoneyValue: InputRangeProps['onChange'];
+}
+
+export function renderRealEstateValue(props: RenderRealEstateValueInputProps) {
+  const { calculatorParams, moneyValue, defaultSum, setMoneyValue } = props;
+
+  const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM;
+  const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM;
+
+  return (
+    <InputRange
+      title="Стоимость недвижимости, ₽ "
+      items={[`От ${addSpacesBetweenNumbers(minSum)} ₽`, `До ${addSpacesBetweenNumbers(maxSum)} ₽`]}
+      min={minSum}
+      max={maxSum}
+      step={STEP_MONEY}
+      value={moneyValue || defaultSum}
+      onChange={setMoneyValue}
+    />
+  );
+}

package/src/components/Calculator/renderWantedSumInput.tsx

@@ -0,0 +1,49 @@
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
+import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { DEFAULT_MAX_SUM, DEFAULT_MIN_SUM } from './constants';
+import type { CalculatorParams } from './CalculatorContent';
+
+const STEP_MONEY = 1000;
+
+interface RenderWantedSumInputProps {
+  className?: string;
+  title: string;
+  isShowItems?: boolean;
+  calculatorParams: CalculatorParams;
+  moneyValue: number | undefined;
+  defaultSum: number;
+  setMoneyValue: InputRangeProps['onChange'];
+}
+
+export function renderWantedSumInput(props: RenderWantedSumInputProps) {
+  const {
+    title,
+    className = '',
+    calculatorParams,
+    moneyValue,
+    defaultSum,
+    setMoneyValue,
+    isShowItems = true,
+  } = props;
+
+  const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM;
+  const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM;
+  const items = [
+    `От ${addSpacesBetweenNumbers(minSum)} ₽`,
+    `До ${addSpacesBetweenNumbers(maxSum)} ₽`,
+  ];
+
+  return (
+    <InputRange
+      className={className}
+      title={title}
+      items={isShowItems ? items : []}
+      min={minSum}
+      max={maxSum}
+      step={STEP_MONEY}
+      value={moneyValue || defaultSum}
+      onChange={setMoneyValue}
+    />
+  );
+}

package/src/components/ContentPage/ContentPage.page.json

@@ -61,11 +61,12 @@
       "type": "ProductGallery",
       "style": ["col-span-12"],
       "content": {
+        "version": "secondary",
         "slides": [
           {
             "nav": {
               "title": "Деньги на любые цели",
-              "desc": "Ставка от 12,5% годовых на срок до 5 лет"
+              "description": "Ставка от 12,5% годовых на срок до 5 лет"
             },
             "productBlock": {
               "title": "Ставка от 12,5% годовых на срок до 5 лет!»",
@@ -79,7 +80,7 @@
                   "href": "https://rshb.ru",
                   "text": "Подробнее",
                   "target": "_blank",
-                  "version": "primary"
+                  "version": "secondary"
                 }
               ],
               "image": {
@@ -103,7 +104,7 @@
           {
             "nav": {
               "title": "Для людей в возрасте",
-              "desc": "Ставка от 12,5% годовых на срок до 3 лет"
+              "description": "Ставка от 12,5% годовых на срок до 3 лет"
             },
             "productBlock": {
               "title": "Ставка от 12,5% годовых на срок до 3 лет!»",
@@ -117,7 +118,7 @@
                   "href": "https://rshb.ru",
                   "text": "Подробнее",
                   "target": "_blank",
-                  "version": "primary"
+                  "version": "secondary"
                 }
               ],
               "image": {
@@ -141,7 +142,7 @@
           {
             "nav": {
               "title": "Выгодно покупать",
-              "desc": "Дополнительные бонусные баллы за покупки"
+              "description": "Дополнительные бонусные баллы за покупки"
             },
             "productBlock": {
               "title": "Дополнительные бонусные баллы за покупки!»",
@@ -150,7 +151,7 @@
                   "href": "https://rshb.ru",
                   "text": "Подробнее",
                   "target": "_blank",
-                  "version": "primary"
+                  "version": "secondary"
                 }
               ],
               "image": {
@@ -168,7 +169,7 @@
           {
             "nav": {
               "title": "Карты Unionpay",
-              "desc": "Кэшбэк до 20% у партнеров"
+              "description": "Кэшбэк до 20% у партнеров"
             },
             "productBlock": {
               "title": "Карты Unionpay»",
@@ -182,7 +183,7 @@
                   "href": "https://rshb.ru",
                   "text": "Подробнее",
                   "target": "_blank",
-                  "version": "primary"
+                  "version": "secondary"
                 }
               ],
               "image": {

package/src/components/ContentPage/ContentPage.tsx

@@ -19,8 +19,8 @@ export type BlockDecorator<VNode = any> = (
   index?: number | string,
 ) => any;
 
-export type JSXBlock = (
-  props: PropsWithChildren<UniBlockProps & BlockContent, any>,
+export type JSXBlock<BlockProps = BlockContent> = (
+  props: PropsWithChildren<UniBlockProps & BlockProps, any>,
   context?: any,
 ) => any;
 

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

@@ -1,7 +1,7 @@
 import type { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
 import { ProductBlock } from './ProductBlock';
-import { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
 const title = 'Кредит до 5 000 000 Р\nбез залога и поручителей';

package/src/components/ProductGallery/ProductGallery.example.json

@@ -10,14 +10,13 @@
         "image": {
           "format": "webp",
           "size": {
-            "width": 234,
-            "height": 234
+            "width": 608,
+            "height": 299
           }
         },
+        "version": "primary",
         "description": "Описание",
-        "isDotted": "true",
-        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
-        "version": "primary"
+        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
       }
     },
     {
@@ -30,14 +29,13 @@
         "image": {
           "format": "webp",
           "size": {
-            "width": 234,
-            "height": 234
+            "width": 608,
+            "height": 299
           }
         },
+        "version": "primary",
         "description": "Описание",
-        "isDotted": "true",
-        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
-        "version": "primary"
+        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
       }
     }
   ]

package/src/components/ProductGallery/ProductGallery.fixture.tsx

@@ -1,16 +1,16 @@
 import { context } from '../../setup-fixture';
 import { ProductGallery } from './ProductGallery';
 import type { Picture } from '../../model/Picture';
-import type { ProductSlide } from './ProductGalleryContent';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
-const moneyImage: Picture = {
-  src: 'money-1.png',
+const percentImage: Picture = {
+  src: '3-6-percent.png',
   format: 'webp',
   size: {
-    width: 234,
-    height: 234,
+    width: 338,
+    height: 420,
   },
-  alt: 'Варианты потребительского кредита',
+  alt: 'Ставка от 3,6% годовых',
 };
 
 const worker: Picture = {
@@ -31,113 +31,155 @@ const creditCard: Picture = {
   },
 };
 
-const slides: ProductSlide[] = [
-  {
-    nav: {
-      title: 'Деньги на любые цели',
-      description: 'Ставка от 12,5% годовых на срок до 5 лет',
-    },
-    productBlock: {
-      title: 'Ставка от 12,5% годовых на срок до 5 лет!',
-      headingType: 'h2',
-      items: [
-        'Потребительский кредит по специальной процентной ставке',
-        'Получите деньги без залога и поручительства',
-        'Кредитный лимит до 5 млн рублей',
-      ],
-      buttons: [
-        {
-          href: 'https://rshb.ru',
-          text: 'Подробнее',
-          target: '_blank',
-          version: 'primary',
-        },
-      ],
-      version: 'primary',
-      image: moneyImage,
-    },
-  },
-  {
-    nav: {
-      title: 'Для людей в возрасте',
-      description: 'Ставка от 12,5% годовых на срок до 3 лет',
-    },
-    productBlock: {
-      title: 'Ставка от 12,5% годовых на срок до 3 лет!',
-      headingType: 'h2',
-      items: [
-        'Потребительский кредит по специальной процентной ставке',
-        'Получите деньги без залога и поручительства',
-        'Кредитный лимит до 5 млн рублей',
-      ],
-      buttons: [
-        {
-          href: 'https://rshb.ru',
-          text: 'Подробнее',
-          target: '_blank',
-          version: 'primary',
-        },
-      ],
-      version: 'secondary',
-      image: worker,
-    },
-  },
+const items = [
+  'Потребительский кредит по специальной процентной ставке',
+  'Получите деньги без залога и поручительства',
+  'Кредитный лимит до 5 млн рублей',
+];
+const buttons: ButtonWithIconProps[] = [
   {
-    nav: {
-      title: 'Выгодно покупать',
-      description: 'Дополнительные бонусные баллы за покупки',
-    },
-    productBlock: {
-      title: 'Дополнительные бонусные баллы за покупки!',
-      headingType: 'h2',
-      items: [
-        'Потребительский кредит по специальной процентной ставке',
-        'Получите деньги без залога и поручительства',
-        'Кредитный лимит до 5 млн рублей',
-      ],
-      buttons: [
-        {
-          href: 'https://rshb.ru',
-          text: 'Подробнее',
-          target: '_blank',
-          version: 'primary',
-        },
-      ],
-      version: 'primary',
-      image: creditCard,
-    },
+    href: 'https://rshb.ru',
+    text: 'Подробнее',
+    target: '_blank',
+    version: 'primary',
   },
+];
+
+const buttonsSecondary: ButtonWithIconProps[] = [
   {
-    nav: {
-      title: 'Карты Unionpay',
-      description: 'Кэшбэк до 20% у партнеров',
-    },
-    productBlock: {
-      title: 'Карты Unionpay',
-      headingType: 'h2',
-      items: [
-        'Потребительский кредит по специальной процентной ставке',
-        'Получите деньги без залога и поручительства',
-        'Кредитный лимит до 5 млн рублей',
-      ],
-      buttons: [
-        {
-          href: 'https://rshb.ru',
-          text: 'Подробнее',
-          target: '_blank',
-          version: 'primary',
-        },
-      ],
-      version: 'secondary',
-      image: creditCard,
-    },
+    href: 'https://rshb.ru',
+    text: 'Подробнее',
+    target: '_blank',
+    version: 'secondary',
   },
 ];
 
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <ProductGallery className="col-span-12" context={context} slides={slides} />
+      <ProductGallery
+        className="col-span-12"
+        context={context}
+        slides={[
+          {
+            nav: {
+              title: 'Кредит по одному документу',
+              description: 'Ставка от 5,5% годовых',
+            },
+            productBlock: {
+              title: 'Кредит по одному документу',
+              description: 'Ставка от 5,5% годовых',
+              headingType: 'h2',
+              items,
+              buttons,
+              image: percentImage,
+            },
+          },
+          {
+            nav: {
+              title: 'Для людей в возрасте',
+              description: 'Ставка до 7% годовых',
+            },
+            productBlock: {
+              title: 'Ставка от 12,5% годовых на срок до 3 лет!',
+              headingType: 'h2',
+              items,
+              buttons,
+              image: worker,
+            },
+          },
+          {
+            nav: {
+              title: 'Выгодно покупать',
+              description: 'Ставка от 5% годовых',
+            },
+            productBlock: {
+              title: 'Дополнительные бонусные баллы за покупки!',
+              headingType: 'h2',
+              items,
+              buttons,
+              image: creditCard,
+            },
+          },
+          {
+            nav: {
+              title: 'Карты Unionpay',
+              description: '120 дней льготный период',
+            },
+            productBlock: {
+              title: 'Карты Unionpay',
+              headingType: 'h2',
+              items,
+              buttons,
+              image: creditCard,
+            },
+          },
+        ]}
+      />
+    </div>
+  ),
+  primary: (
+    <div className="container grid grid-cols-12">
+      <ProductGallery
+        className="col-span-12"
+        context={context}
+        version={'secondary'}
+        slides={[
+          {
+            nav: {
+              title: 'Кредит по одному документу',
+              description: 'Ставка от 5,5% годовых',
+            },
+            productBlock: {
+              title: 'Кредит по одному документу',
+              description: 'Кредит наличными без залога и поручительства, только по паспорту',
+              headingType: 'h2',
+              items,
+              buttons: buttonsSecondary,
+              image: percentImage,
+            },
+          },
+          {
+            nav: {
+              title: 'Для людей в возрасте',
+              description: 'Ставка до 7% годовых',
+            },
+            productBlock: {
+              title: 'Ставка от 12,5% годовых на срок до 3 лет!',
+              headingType: 'h2',
+              items,
+              buttons: buttonsSecondary,
+              image: worker,
+            },
+          },
+          {
+            nav: {
+              title: 'Выгодно покупать',
+              description: 'Ставка от 5% годовых',
+            },
+            productBlock: {
+              title: 'Дополнительные бонусные баллы за покупки!',
+              headingType: 'h2',
+              items,
+              buttons: buttonsSecondary,
+              image: creditCard,
+            },
+          },
+          {
+            nav: {
+              title: 'Карты Unionpay',
+              description: '120 дней льготный период',
+            },
+            productBlock: {
+              title: 'Карты Unionpay',
+              headingType: 'h2',
+              items,
+              buttons: buttonsSecondary,
+              image: creditCard,
+            },
+          },
+        ]}
+      />
     </div>
   ),
 };