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

package/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/src/components/ProductGallery/ProductGalleryContent.ts

@@ -1,4 +1,5 @@
 import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
+import type { BlockVersion } from '../../model/BlockVersion';
 
 /** @title Кнопка под слайдом */
 interface ProductGalleryNav {
@@ -19,17 +20,13 @@ export interface ProductSlide {
 }
 
 /**
- * @title Продуктовая галерея (для мобильных горизонтальная прокрутка shift+mouseScroll)
+ * @title Продуктовая галерея
  */
 export interface ProductGalleryContent {
-  /**
-   * @title Задержка
-   * @hidden //! temporary not used
-   */
-  duration?: number;
   /**
    * @title Слайды
    * @minItems 2
    */
   slides?: ProductSlide[];
+  version?: BlockVersion;
 }

package/mobile/src/icons/SafeIcon.svg

@@ -1 +1,7 @@
-<svg title="Сейф" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 12.83V15c0 5 2 7 7 7h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 19h8c2 0 3-1 3-3V8c0-2-1-3-3-3H8C6 5 5 6 5 8v8c0 2 1 3 3 3Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M5 9.5h2.48a2.5 2.5 0 0 1 0 5H5" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M19 9.99h-3M19 14h-3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.2 12h.1" stroke="#000000" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg title="Сейф" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2 12.83V15c0 5 2 7 7 7h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M5 9.5h2.48a2.5 2.5 0 0 1 0 5H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8 19h8c2 0 3-1 3-3V8c0-2-1-3-3-3H8C6 5 5 6 5 8v8c0 2 1 3 3 3Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M19 9.99h-3M19 14h-3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M7.2 12h.1" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/mobile/src/types.ts

@@ -77,3 +77,5 @@ export interface DaDataSuggestion<T> {
 export interface DaDataAddress {
   city?: string | null;
 }
+
+export type FuncSetNumber = (value: number) => void;

package/mobile/src/ui-kit/BlocksList/renderBlocksList.tsx

@@ -13,7 +13,7 @@ type EmbeddableBlocksProps = {
 export const renderBlocksList = ({ blocks, context, className, columns }: EmbeddableBlocksProps) =>
   blocks?.length ? blocks.map(renderBlock({ context, className, columns })) : null;
 
-export const renderBlock =
+const renderBlock =
   ({ context, columns, className }: EmbeddableBlocksProps) =>
   (block: BlockDef, i: number) => {
     const type = block?.blockListType;

package/mobile/src/ui-kit/Checkbox/Checkbox.tsx

@@ -32,9 +32,7 @@ export const Checkbox = JSX<CheckboxProps>(({ text, checked, onChange, className
         fill="white"
         viewBox="0 0 11 9"
       />
-      {text ? (
-        <span className="font-sans ml-3 text-sm leading-5 cursor-pointer">{text}</span>
-      ) : null}
+      {text ? <span className="font-sans ml-3 text-m-base cursor-pointer">{text}</span> : null}
     </label>
   </div>
 ));

package/mobile/src/ui-kit/InputRange/InputRange.tsx

@@ -20,19 +20,15 @@ export const InputRange = JSX<InputRangeProps>(
     return (
       <div className={className}>
         <label className="block relative">
-          {title ? (
-            <span className="absolute text-xs text-secondary-text top-1 mt-0.5 pl-4 ml-0.5">
-              {title}
-            </span>
-          ) : null}
+          {title ? <span className="text-base text-secondary-text pl-4">{title}</span> : null}
           <input
-            className={`m-0 font-sans text-sm w-full h-12 border border-solid border-main-stroke rounded-md
-                        outline-none p-0 pl-4 m-0 box-border text-primary-text ${ title ? 'pt-4' : '' }`}
+            className={`m-0 mt-[5px] font-sans text-title w-full h-14 border border-solid border-main-stroke rounded-md
+                        outline-none p-0 pl-4 box-border text-primary-text`}
             value={addSpacesBetweenNumbers(value)}
             onChange={(e) => handleChange(e.target.value)}
             onBlur={handleBlur}
           />
-          <div className="absolute inset-x-0 top-[35px] px-4 leading-[18px]">
+          <div className="absolute inset-x-0 bottom-[-4px] px-4 leading-[18px]">
             <input
               className="box-border w-full m-0 cursor-pointer slider"
               type="range"
@@ -47,7 +43,9 @@ export const InputRange = JSX<InputRangeProps>(
         </label>
         <div className="flex justify-between my-3">
           {items.map((item, i) => (
-            <span key={String(i)} className="text-xs leading-[14px] text-secondary-text pl-4"> {item} </span>
+            <span key={String(i)} className="text-sm leading-[14px] text-secondary-text pl-4">
+              {item}
+            </span>
           ))}
         </div>
       </div>

package/mobile/src/ui-kit/InputRange/InputRangeProps.ts

@@ -1,3 +1,5 @@
+import type { FuncSetNumber } from '../../types';
+
 export interface InputRangeProps {
   className?: string;
   items?: string[];
@@ -6,5 +8,5 @@ export interface InputRangeProps {
   step?: number;
   value?: number;
   title?: string;
-  onChange?: (value: number) => void;
+  onChange?: FuncSetNumber;
 }

package/mobile/src/ui-kit/Tabs/TabsProps.ts

@@ -1,4 +1,5 @@
 import type { Picture } from '../../model/Picture';
+import { FuncSetNumber } from '../../types';
 
 /**
  * @title Вкладка
@@ -11,7 +12,7 @@ export interface Tab {
   icon?: Picture;
 }
 
-export type TabClickHandler = (value: number) => void;
+export type TabClickHandler = FuncSetNumber;
 
 export interface TabsProps {
   tabs?: Tab[];

package/package.json

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

package/src/common.css

@@ -72,6 +72,13 @@ html {
     width: 100%;
   }
 
+  .calc-rate-text {
+    background: linear-gradient(180deg, #42ab44 0%, #f6db7d 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-fill-color: transparent;
+  }
+
   input[type='range'].slider {
     -webkit-appearance: none;
     height: 4px;

package/src/components/Blocks.ts

@@ -2,6 +2,7 @@ import { Accordion } from './Accordion/Accordion';
 import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { Bonus } from './Bonus/Bonus';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
+import { Calculator } from './Calculator/Calculator';
 import { CreditCalculator } from './CreditCalculator/CreditCalculator';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
@@ -19,7 +20,6 @@ import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
-import { ProductGalleryGreen } from './ProductGalleryGreen/ProductGalleryGreen';
 import { ProductTile } from './ProductTile/ProductTile';
 import { PromoTile } from './PromoTile/PromoTile';
 import { Recommendation } from './Recommendation/Recommendation';
@@ -34,6 +34,7 @@ export const Blocks = {
   BenefitsBlock,
   Bonus,
   ComparisonTable,
+  Calculator,
   CreditCalculator,
   ExchangeRateTile,
   Footer,
@@ -48,7 +49,6 @@ export const Blocks = {
   PictureText,
   ProductBlock,
   ProductGallery,
-  ProductGalleryGreen,
   ProductTile,
   PromoTile,
   OtherProducts,

package/src/components/Calculator/BonusCalculatorForm.tsx

@@ -0,0 +1,71 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { CalculatorValueBlock } from './CalculatorValueBlock';
+import { getDefaultSum } from './getDefaultSum';
+import { renderWantedSumInput } from './renderWantedSumInput';
+import { renderRate } from './renderRate';
+import { renderButtonSection } from './renderButtonSection';
+import { BonusCalculatorParams, CommonCalculatorProps } from './CalculatorContent';
+
+export interface BonusCalculatorProp
+  extends BonusCalculatorParams,
+    CommonCalculatorProps,
+    UniBlockProps {}
+
+export const BonusCalculatorForm = JSX<BonusCalculatorProp>(
+  ({
+    context,
+    className = '',
+    buttons,
+    bonus,
+    minSumTrip,
+    maxSumTrip,
+    minSumOther,
+    maxSumOther,
+  }) => {
+    const [bonusTripValue, setBonusTripValue] = context.useState<number | undefined>(undefined);
+    const [bonusOtherValue, setBonusOtherValue] = context.useState<number | undefined>(undefined);
+    const calculatorTripParams = { minSum: minSumTrip, maxSum: maxSumTrip };
+    const calculatorOtherParams = { minSum: minSumOther, maxSum: maxSumOther };
+
+    const incomeBonus = 948841;
+    const bonusOrDef = bonus || 2528;
+
+    return (
+      <section className={className}>
+        <div className="w-[468px]">
+          {renderWantedSumInput({
+            title: 'Сумма покупок в категории путешествия, ₽',
+            calculatorParams: calculatorTripParams,
+            moneyValue: bonusTripValue,
+            defaultSum: getDefaultSum(calculatorTripParams),
+            setMoneyValue: setBonusTripValue,
+            isShowItems: false,
+          })}
+          {renderWantedSumInput({
+            className: 'mt-6',
+            title: 'Сумма покупок в остальных категориях, ₽',
+            calculatorParams: calculatorOtherParams,
+            moneyValue: bonusOtherValue,
+            defaultSum: getDefaultSum(calculatorOtherParams),
+            setMoneyValue: setBonusOtherValue,
+            isShowItems: false,
+          })}
+        </div>
+        <div>
+          {bonusOrDef
+            ? renderRate({
+                rate: bonusOrDef,
+                title: 'Баллов за месяц',
+                className: 'tracking-[-14px]',
+              })
+            : null}
+        </div>
+        <div className="w-[240px]">
+          {incomeBonus ? <CalculatorValueBlock title="Баллов за год" value={incomeBonus} /> : null}
+          {renderButtonSection(context, buttons)}
+        </div>
+      </section>
+    );
+  },
+);

package/src/components/Calculator/Calculator.fixture.tsx

@@ -0,0 +1,131 @@
+import { context } from '../../setup-fixture';
+import { Calculator } from './Calculator';
+
+import type {
+  CreditCalculatorParamsDef,
+  MortgageCalculatorParamsDef,
+  DepositCalculatorParamsDef,
+  BonusCalculatorParamsDef,
+} from './CalculatorContent';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+
+const buttons: ButtonWithIconProps[] = [
+  {
+    href: 'https://rshb.ru',
+    text: 'Отправить заявку',
+    target: '_blank',
+    version: 'primary',
+  },
+  {
+    href: 'https://rshb.ru',
+    text: 'Подробные условия',
+    target: '_blank',
+    version: 'secondary',
+  },
+];
+
+const CREDIT_CALCULATOR_BLOCK: CreditCalculatorParamsDef = {
+  calcType: 'CreditCalculatorForm',
+  isAnnuity: true,
+  minSum: 30000,
+  maxSum: 5000000,
+  minMonths: 1,
+  maxMonths: 84,
+  rateWithInsurance: 10.2,
+  rateWithoutInsurance: 10.7,
+  buttons: buttons,
+};
+
+const MORTGAGE_CALCULATOR_BLOCK: MortgageCalculatorParamsDef = {
+  calcType: 'MortgageCalculatorForm',
+  isAnnuity: true,
+  minSum: 15000,
+  maxSum: 7500000,
+  minMonths: 2,
+  maxMonths: 120,
+  rateWithInsurance: 4,
+  rateWithoutInsurance: 5.5,
+  buttons: buttons,
+};
+
+const DEPOSIT_CALCULATOR_BLOCK: DepositCalculatorParamsDef = {
+  calcType: 'DepositCalculatorForm',
+  minSum: 50000,
+  maxSum: 5000000,
+  minMonths: 2,
+  maxMonths: 120,
+  rate: 5.9,
+  buttons: buttons,
+};
+
+const BONUS_CALCULATOR_BLOCK: BonusCalculatorParamsDef = {
+  calcType: 'BonusCalculatorForm',
+  bonus: 2528,
+  minSumTrip: 1,
+  maxSumTrip: 200000,
+  minSumOther: 1,
+  maxSumOther: 500000,
+  buttons: buttons,
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Calculator
+        className="col-span-12"
+        context={context}
+        calcTabs={[
+          {
+            nav: {
+              title: 'Кредит на любые цели',
+              description: 'Ставка от 5,5% до 5 лет',
+              icon: { icon: 'CalendarIcon' },
+            },
+            calculatorBlock: CREDIT_CALCULATOR_BLOCK,
+          },
+          {
+            nav: {
+              title: 'Ипотека с господдержкой',
+              description: 'Ставка от 6%, срок до 30 лет',
+              icon: { icon: 'WalletAdd2Icon' },
+            },
+            calculatorBlock: MORTGAGE_CALCULATOR_BLOCK,
+          },
+          {
+            nav: {
+              title: 'Вклад «Доходный»',
+              description: 'Ставка до 7% до 15 лет',
+              icon: { icon: 'SafeIcon' },
+            },
+            calculatorBlock: DEPOSIT_CALCULATOR_BLOCK,
+          },
+          {
+            nav: {
+              title: 'Обменивайте баллы на путешествия',
+              icon: { icon: 'PercentageSquareIcon' },
+            },
+            calculatorBlock: BONUS_CALCULATOR_BLOCK,
+          },
+        ]}
+      />
+    </div>
+  ),
+  single: (
+    <div className="container grid grid-cols-12">
+      <Calculator
+        className="col-span-12"
+        context={context}
+        calcTabs={[
+          {
+            nav: {
+              title: 'Кредит на любые цели',
+              description: 'Ставка от 5,5% до 5 лет',
+              icon: { icon: 'CalendarIcon' },
+            },
+            calculatorBlock: CREDIT_CALCULATOR_BLOCK,
+          },
+        ]}
+      />
+    </div>
+  ),
+};