@redneckz/wildless-cms-uni-blocks 0.12.11 → 0.12.13

package/src/BlockRenderer/renderBlockList.tsx

@@ -3,11 +3,18 @@ import { DEFAULT_SLOT_NAME } from '../model/BlockDecorator';
 import type { BlockDef } from '../model/ContentPageDef';
 import type { VNode } from '../model/VNode';
 import type { BlockRendererOptions } from './BlockRendererOptions';
-import { renderBlock } from './renderBlock';
+import { ExtraProps, renderBlock } from './renderBlock';
+
+export type ChildRenderProps = (
+  block: BlockDef,
+  options: BlockRendererOptions,
+  i?: number,
+) => VNode;
 
 export interface BlocksListRendererProps extends BlockRendererOptions {
   slotName?: SlotName;
-  renderProps?: (block: BlockDef, options: BlockRendererOptions) => VNode;
+  extraProps?: ExtraProps;
+  renderProps?: ChildRenderProps;
 }
 
 const EMPTY_ANCESTORS: BlockAncestors = [];
@@ -18,16 +25,26 @@ export const renderBlocksList = (
     key,
     ancestors = EMPTY_ANCESTORS,
     slotName = DEFAULT_SLOT_NAME,
-    renderProps = renderBlock,
+    extraProps,
+    renderProps = renderBlock as ChildRenderProps,
     ...options
   }: BlocksListRendererProps,
-): VNode[] =>
-  (blocks || []).map((_: BlockDef, j: number) =>
-    renderProps(_, {
-      ...options,
-      key: `${key ? key : _.type}-${j}`,
-      ancestors: options.parent
-        ? [...(ancestors || EMPTY_ANCESTORS), [options.parent, slotName]]
-        : ancestors,
-    }),
+): VNode[] => {
+  const renderChildBlock: ChildRenderProps = extraProps
+    ? (childBlock, childOptions) => renderBlock(childBlock, childOptions, extraProps)
+    : renderProps;
+
+  return (blocks || []).map((_: BlockDef, i: number) =>
+    renderChildBlock(
+      _,
+      {
+        ...options,
+        key: `${key ? key : _.type}-${i}`,
+        ancestors: options.parent
+          ? [...(ancestors || EMPTY_ANCESTORS), [options.parent, slotName]]
+          : ancestors,
+      },
+      i,
+    ),
   );
+};

package/src/BlockRenderer/renderChildren.ts

@@ -1,18 +1,19 @@
-import type { BlockDef } from '../model/ContentPageDef';
 import type { UniBlockProps } from '../model/JSXBlock';
 import type { VNode } from '../model/VNode';
-import type { BlockRendererOptions } from './BlockRendererOptions';
-import { renderBlocksList } from './renderBlockList';
+import type { ExtraProps } from './renderBlock';
+import { ChildRenderProps, renderBlocksList } from './renderBlockList';
 
 interface ChildrenRendererProps extends UniBlockProps {
   children?: VNode;
-  renderProps?: (block: BlockDef, options: BlockRendererOptions) => VNode;
+  extraProps?: ExtraProps;
+  renderProps?: ChildRenderProps;
 }
 
 export function renderChildren({
-  children,
   block,
   options,
+  children,
+  extraProps,
   renderProps,
 }: ChildrenRendererProps): VNode[] | null {
   if (children) {
@@ -20,6 +21,6 @@ export function renderChildren({
   }
 
   return block && options
-    ? renderBlocksList(block.blocks, { ...options, parent: block, renderProps })
+    ? renderBlocksList(block.blocks, { ...options, parent: block, extraProps, renderProps })
     : null;
 }

package/src/common.css

@@ -249,7 +249,7 @@ html {
   }
 
   .md-container strong {
-    @apply font-bold;
+    @apply font-normal;
   }
 
   .striped.md-container table {

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

@@ -1,9 +1,9 @@
 import '../../setup-fixture';
 
 import { ApplicationForm } from './ApplicationForm';
-import type { ApplicationFormContent } from './ApplicationFormContent';
+import type { ApplicationFormBlockDef, ApplicationFormContent } from './ApplicationFormContent';
 
-const ApplicationFormProps: ApplicationFormContent = {
+const formBlockProps: ApplicationFormBlockDef = {
   title: 'Форма заявки',
   button: {
     text: 'Отправить заявку',
@@ -13,32 +13,66 @@ const ApplicationFormProps: ApplicationFormContent = {
     text: 'условиями передачи данных',
     href: '#',
   },
+  formType: 'ApplicationFormCredit',
+};
+
+const ApplicationFormCredit: ApplicationFormContent = {
+  formBlock: { ...formBlockProps, formType: 'ApplicationFormCredit' },
+};
+
+const ApplicationFormAcquiring: ApplicationFormContent = {
+  formBlock: { ...formBlockProps, formType: 'ApplicationFormAcquiring' },
+};
+
+const ApplicationFormBusinessCard: ApplicationFormContent = {
+  formBlock: { ...formBlockProps, formType: 'ApplicationFormBusinessCard' },
+};
+
+const ApplicationFormDeposit: ApplicationFormContent = {
+  formBlock: { ...formBlockProps, formType: 'ApplicationFormDeposit' },
+};
+
+const ApplicationFormWed: ApplicationFormContent = {
+  formBlock: { ...formBlockProps, formType: 'ApplicationFormWed' },
+};
+
+const ApplicationFormGrantSupport: ApplicationFormContent = {
+  formBlock: {
+    ...formBlockProps,
+    formType: 'ApplicationFormGrantSupport',
+    sourceBookDir: 'regions-grant-support',
+  },
 };
 
 export default {
   credit: (
     <div className="container grid grid-cols-12">
-      <ApplicationForm className="col-span-12" {...ApplicationFormProps} typeForm="credit" />
+      <ApplicationForm className="col-span-12" {...ApplicationFormCredit} />
     </div>
   ),
   acquiring: (
     <div className="container grid grid-cols-12">
-      <ApplicationForm className="col-span-12" {...ApplicationFormProps} typeForm="acquiring" />
+      <ApplicationForm className="col-span-12" {...ApplicationFormAcquiring} />
     </div>
   ),
   'business-card': (
     <div className="container grid grid-cols-12">
-      <ApplicationForm className="col-span-12" {...ApplicationFormProps} typeForm="business-card" />
+      <ApplicationForm className="col-span-12" {...ApplicationFormBusinessCard} />
     </div>
   ),
   deposit: (
     <div className="container grid grid-cols-12">
-      <ApplicationForm className="col-span-12" {...ApplicationFormProps} typeForm="deposit" />
+      <ApplicationForm className="col-span-12" {...ApplicationFormDeposit} />
     </div>
   ),
   wed: (
     <div className="container grid grid-cols-12">
-      <ApplicationForm className="col-span-12" {...ApplicationFormProps} typeForm="wed" />
+      <ApplicationForm className="col-span-12" {...ApplicationFormWed} />
+    </div>
+  ),
+  'grant-support': (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm className="col-span-12" {...ApplicationFormGrantSupport} />
     </div>
   ),
 };

package/src/components/ApplicationForm/ApplicationForm.fixture.tsx

@@ -1,9 +1,9 @@
 import '../../setup-fixture';
 
 import { ApplicationForm } from './ApplicationForm';
-import type { ApplicationFormContent } from './ApplicationFormContent';
+import type { ApplicationFormBlockDef, ApplicationFormContent } from './ApplicationFormContent';
 
-const ApplicationFormProps: ApplicationFormContent = {
+const formBlockProps: ApplicationFormBlockDef = {
   title: 'Форма заявки',
   button: {
     text: 'Отправить заявку',
@@ -13,32 +13,66 @@ const ApplicationFormProps: ApplicationFormContent = {
     text: 'условиями передачи данных',
     href: '#',
   },
+  formType: 'ApplicationFormCredit',
+};
+
+const ApplicationFormCredit: ApplicationFormContent = {
+  formBlock: { ...formBlockProps, formType: 'ApplicationFormCredit' },
+};
+
+const ApplicationFormAcquiring: ApplicationFormContent = {
+  formBlock: { ...formBlockProps, formType: 'ApplicationFormAcquiring' },
+};
+
+const ApplicationFormBusinessCard: ApplicationFormContent = {
+  formBlock: { ...formBlockProps, formType: 'ApplicationFormBusinessCard' },
+};
+
+const ApplicationFormDeposit: ApplicationFormContent = {
+  formBlock: { ...formBlockProps, formType: 'ApplicationFormDeposit' },
+};
+
+const ApplicationFormWed: ApplicationFormContent = {
+  formBlock: { ...formBlockProps, formType: 'ApplicationFormWed' },
+};
+
+const ApplicationFormGrantSupport: ApplicationFormContent = {
+  formBlock: {
+    ...formBlockProps,
+    formType: 'ApplicationFormGrantSupport',
+    sourceBookDir: 'regions-grant-support',
+  },
 };
 
 export default {
   credit: (
     <div className="container grid grid-cols-12">
-      <ApplicationForm className="col-span-12" {...ApplicationFormProps} typeForm="credit" />
+      <ApplicationForm className="col-span-12" {...ApplicationFormCredit} />
     </div>
   ),
   acquiring: (
     <div className="container grid grid-cols-12">
-      <ApplicationForm className="col-span-12" {...ApplicationFormProps} typeForm="acquiring" />
+      <ApplicationForm className="col-span-12" {...ApplicationFormAcquiring} />
     </div>
   ),
   'business-card': (
     <div className="container grid grid-cols-12">
-      <ApplicationForm className="col-span-12" {...ApplicationFormProps} typeForm="business-card" />
+      <ApplicationForm className="col-span-12" {...ApplicationFormBusinessCard} />
     </div>
   ),
   deposit: (
     <div className="container grid grid-cols-12">
-      <ApplicationForm className="col-span-12" {...ApplicationFormProps} typeForm="deposit" />
+      <ApplicationForm className="col-span-12" {...ApplicationFormDeposit} />
     </div>
   ),
   wed: (
     <div className="container grid grid-cols-12">
-      <ApplicationForm className="col-span-12" {...ApplicationFormProps} typeForm="wed" />
+      <ApplicationForm className="col-span-12" {...ApplicationFormWed} />
+    </div>
+  ),
+  'grant-support': (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm className="col-span-12" {...ApplicationFormGrantSupport} />
     </div>
   ),
 };

package/src/components/ApplicationForm/ApplicationForm.tsx

@@ -4,29 +4,22 @@ import { CorporateLeadAPI } from '../../api/CorporateLeadAPI';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { ApplicationFormAcquiring } from './ApplicationFormAcquiring';
-import { ApplicationFormBusinessCard } from './ApplicationFormBusinessCard';
-import type { ApplicationFormContent } from './ApplicationFormContent';
-import { ApplicationFormCredit } from './ApplicationFormCredit';
-import { ApplicationFormDeposit } from './ApplicationFormDeposit';
-import type { ApplicationFormsProps } from './ApplicationFormsProps';
-import { ApplicationFormWed } from './ApplicationFormWed';
+import type { ApplicationFormBlockDef, ApplicationFormContent } from './ApplicationFormContent';
+import { EmbeddableForms } from './EmbeddableForms';
 import { ResponseNotification } from './ResponseNotification';
 
 export interface ApplicationFormProps extends ApplicationFormContent, UniBlockProps {}
 
-const COMPONENTS_MAP = {
-  credit: (props: ApplicationFormsProps) => <ApplicationFormCredit {...props} />,
-  acquiring: (props: ApplicationFormsProps) => <ApplicationFormAcquiring {...props} />,
-  'business-card': (props: ApplicationFormsProps) => <ApplicationFormBusinessCard {...props} />,
-  deposit: (props: ApplicationFormsProps) => <ApplicationFormDeposit {...props} />,
-  wed: (props: ApplicationFormsProps) => <ApplicationFormWed {...props} />,
-};
-
 const API = CorporateLeadAPI();
 
 export const ApplicationForm = JSX<ApplicationFormProps>((props) => {
-  const { className, title, typeForm = 'credit', button, link, ...rest } = props;
+  const { className, formBlock, ...rest } = props;
+
+  // const type = formBlock?.formType;
+  // if (!type || !(type in EmbeddableForms)) {
+  //   return null;
+  // }
+  // const EmbeddedForm = EmbeddableForms[type];
 
   const [responseType, setResponseType] = useState<'OK' | 'Fail' | ''>('');
 
@@ -40,12 +33,31 @@ export const ApplicationForm = JSX<ApplicationFormProps>((props) => {
   return (
     <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
       <div className="container max-w-[978px]">
-        {title ? (
-          <Heading headingType="h3" title={title} className="mb-4 sm:mb-8 sm:text-center" />
+        {formBlock?.title ? (
+          <Heading
+            headingType="h3"
+            title={formBlock.title}
+            className="mb-4 sm:mb-8 sm:text-center"
+          />
         ) : null}
-        {COMPONENTS_MAP[typeForm]({ button, link, onSubmit: handleSubmit })}
+        {/* <EmbeddedForm {...formBlock} onSubmit={handleSubmit} /> */}
+        {formBlock ? renderEmbeddedForm(formBlock, handleSubmit) : null}
+        {/* {COMPONENTS_MAP[typeForm]({ button, link, onSubmit: handleSubmit })} */}
         {responseType ? <ResponseNotification responseType={responseType} /> : null}
       </div>
     </BlockWrapper>
   );
 });
+
+const renderEmbeddedForm = (
+  formBlock: ApplicationFormBlockDef,
+  handleSubmit: (data: Record<string, string>) => Promise<'OK' | 'Fail'>,
+) => {
+  const type = formBlock?.formType;
+  if (!type || !(type in EmbeddableForms)) {
+    return null;
+  }
+  const EmbeddedForm = EmbeddableForms[type];
+
+  return <EmbeddedForm {...formBlock} onSubmit={handleSubmit} />;
+};

package/src/components/ApplicationForm/ApplicationForm.ui.json

@@ -0,0 +1,12 @@
+{
+  "content": {
+    "formBlock": {
+      "formType": {
+        "ui:widget": "hidden"
+      },
+      "sourceBookDir": {
+        "ui:widget": "sourceBook"
+      }
+    }
+  }
+}

package/src/components/ApplicationForm/ApplicationFormContent.ts

@@ -13,17 +13,76 @@ export interface SubmitButtonProps extends ButtonAdditionalProps {
   version?: ButtonVersion;
 }
 
+export type CommonApplicationFormProps = TitleProps & {
+  button?: SubmitButtonProps;
+  /** @title Условия передачи данных */
+  link?: LinkProps;
+};
+
+export type ApplicationFormBlockDef =
+  | BusinessCardFormParamsDef
+  | WedFormParamsDef
+  | DepositFormParamsDef
+  | CreditFormParamsDef
+  | AcquiringFormParamsDef
+  | GrantSupportFormParamsDef;
+
+/**
+ * @title Бизнес-карта
+ * @default {"formType": "ApplicationFormBusinessCard"}
+ */
+export type BusinessCardFormParamsDef = CommonApplicationFormProps & {
+  formType: 'ApplicationFormBusinessCard';
+};
+
+/**
+ * @title ВЭД
+ * @default {"formType": "ApplicationFormWed"}
+ */
+export type WedFormParamsDef = CommonApplicationFormProps & {
+  formType: 'ApplicationFormWed';
+};
+
+/**
+ * @title Депозит
+ * @default {"formType": "ApplicationFormDeposit"}
+ */
+export type DepositFormParamsDef = CommonApplicationFormProps & {
+  formType: 'ApplicationFormDeposit';
+};
+
+/**
+ * @title Кредит
+ * @default {"formType": "ApplicationFormCredit"}
+ */
+export type CreditFormParamsDef = CommonApplicationFormProps & {
+  formType: 'ApplicationFormCredit';
+};
+
+/**
+ * @title Эквайринг
+ * @default {"formType": "ApplicationFormAcquiring"}
+ */
+export type AcquiringFormParamsDef = CommonApplicationFormProps & {
+  formType: 'ApplicationFormAcquiring';
+};
+
+/**
+ * @title Грантовая поддержка
+ * @default {"formType": "ApplicationFormGrantSupport"}
+ */
+export type GrantSupportFormParamsDef = CommonApplicationFormProps & {
+  formType: 'ApplicationFormGrantSupport';
+  /** @title Адрес справочника */
+  sourceBookDir?: string;
+};
+
 /**
  * @title Форма заявки
  */
-export type ApplicationFormContent = UniBlockContent &
-  TitleProps & {
-    /**
-     * @title Вид заявки
-     * @enumNames ["Бизнес-карта", "ВЭД", "Депозит", "Кредит", "Эквайринг"]
-     */
-    typeForm?: 'business-card' | 'wed' | 'deposit' | 'credit' | 'acquiring';
-    button?: SubmitButtonProps;
-    /** @title Условия передачи данных */
-    link?: LinkProps;
-  };
+export type ApplicationFormContent = UniBlockContent & {
+  /**
+   * @title Вид заявки
+   */
+  formBlock?: ApplicationFormBlockDef;
+};

package/src/components/ApplicationForm/ApplicationFormGrantSupport.tsx

@@ -0,0 +1,51 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useSWRResource } from '../../hooks/useSWRResource';
+import { RegionsGrantSupportData } from '../../services/regionsGrantSupport/RegionsGrantSupportData';
+import { Button } from '../../ui-kit/Button/Button';
+import { getRegularButtonClasses } from '../../ui-kit/Button/getRegularButtonClasses';
+import { style } from '../../utils/style';
+import type { ApplicationFormsProps } from './ApplicationFormsProps';
+import { SelectControl } from './SelectControl';
+
+export const ApplicationFormGrantSupport = JSX<ApplicationFormsProps>((props) => {
+  const { button, sourceBookDir } = props;
+
+  const { regions } = useSWRResource<RegionsGrantSupportData>(
+    sourceBookDir || 'regions-grant-support',
+  );
+
+  const [region, setRegion] = useState({ key: '' });
+
+  const buttonStyle = getRegularButtonClasses({
+    className: 'text-white',
+    version: button?.version,
+  });
+
+  const regionHref = regions?.find((_) => _.name === region.key)?.href;
+
+  return (
+    <div className="container space-y-s sm:space-y-lg">
+      {regions ? (
+        <SelectControl
+          label="Ваш регион"
+          placeholder="Выберите регион"
+          options={regions.map(({ name = '' }) => ({ key: name }))}
+          value={region}
+          onChange={setRegion}
+        />
+      ) : null}
+      {regionHref ? (
+        <div className="text-center">
+          <Button
+            href={regionHref}
+            target="_blank"
+            className={style('p-4 w-full sm:w-auto', buttonStyle)}
+          >
+            {button?.text ? button.text : 'Перейти'}
+          </Button>
+        </div>
+      ) : null}
+    </div>
+  );
+});

package/src/components/ApplicationForm/ApplicationFormsProps.ts

@@ -4,5 +4,6 @@ import type { SubmitButtonProps } from './ApplicationFormContent';
 export interface ApplicationFormsProps<S extends Record<string, any> = Record<string, any>> {
   button?: SubmitButtonProps;
   link?: LinkProps;
+  sourceBookDir?: string;
   onSubmit: (data: S) => void;
 }

package/src/components/ApplicationForm/EmbeddableForms.tsx

@@ -0,0 +1,15 @@
+import { ApplicationFormAcquiring } from './ApplicationFormAcquiring';
+import { ApplicationFormBusinessCard } from './ApplicationFormBusinessCard';
+import { ApplicationFormCredit } from './ApplicationFormCredit';
+import { ApplicationFormDeposit } from './ApplicationFormDeposit';
+import { ApplicationFormGrantSupport } from './ApplicationFormGrantSupport';
+import { ApplicationFormWed } from './ApplicationFormWed';
+
+export const EmbeddableForms = {
+  ApplicationFormBusinessCard,
+  ApplicationFormWed,
+  ApplicationFormDeposit,
+  ApplicationFormCredit,
+  ApplicationFormAcquiring,
+  ApplicationFormGrantSupport,
+};

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -31,7 +31,7 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(
 const renderBenefit = (benefit: BenefitBlockItemProps, i: number) => (
   <div
     key={String(i)}
-    className="flex gap-m items-center md:basis-1/2 md:max-w-[400px]"
+    className="flex gap-m items-center md:basis-1/2 md:max-w-[500px]"
     role="listitem"
   >
     {benefit?.icon?.icon ? (

package/src/components/Blocks.mobile.ts

@@ -13,9 +13,11 @@ import { CarouselCard } from './CarouselCard/CarouselCard';
 import { CarouselCatalogCard } from './CarouselCatalogCard/CarouselCatalogCard';
 import { CarouselProductCard } from './CarouselProductCard/CarouselProductCard';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
+import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
+import { HorizontalLayout } from './HorizontalLayout/HorizontalLayout';
 import { ImgBlock } from './ImgBlock/ImgBlock';
 import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
@@ -25,6 +27,7 @@ import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
 import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RollupItem } from './RollupItem/RollupItem';
+import { SafeDepositRental } from './SafeDepositRental/SafeDepositRental';
 import { StepsBlock } from './StepsBlock/StepsBlock';
 import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
@@ -46,6 +49,7 @@ export const Blocks: BlocksRegistry = {
   Footer,
   Header,
   Headline,
+  HorizontalLayout,
   ImgBlock,
   LinkDocs,
   MobileAppTile,
@@ -58,8 +62,10 @@ export const Blocks: BlocksRegistry = {
   TextBlock,
   RichTextBlock,
   RollupItem,
+  SafeDepositRental,
   VerticalLayout,
   CarouselRecommendationCard,
+  ExchangeRateTile,
   CarouselProgramsCard,
   ProductGallery,
   BenefitsBlock,

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

@@ -0,0 +1,72 @@
+import '../../setup-fixture';
+
+import type { Picture } from '../../model/Picture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { Bonus } from './Bonus';
+import type { BonusContent } from './BonusContent';
+
+const imageSize = {
+  height: 242,
+  width: 242,
+};
+
+const cardWithMoney: Picture = {
+  src: 'card-with-diamond.png',
+  alt: 'Кредиты в РСХБ',
+  format: 'webp',
+  size: imageSize,
+};
+
+const buttons: ButtonProps[] = [
+  {
+    text: 'Установить',
+    href: '/credit-cards',
+    version: 'secondary',
+  },
+];
+
+export const BONUS: BonusContent = {
+  title: 'Начисление баллов',
+  description:
+    /* eslint-disable max-len */
+    'Получайте 1% бонусными баллами с любых покупок и 1,5% баллами с покупок в категории «Путешествия». Обменивайте бонусные баллы на авиа и ж/д билеты, бронирование отелей и прокат автомобилей.',
+  bonusItems: [
+    {
+      title: '5 баллов за каждые 100 ₽',
+      description:
+        'Повышенное начисление баллов за операции оплаты товаров и услуг в сети АЗС Роснефть',
+      bonusItemContent: {
+        bonusType: 'count',
+        bonusCount: '5',
+        bonusName: 'баллов',
+      },
+    },
+    {
+      title: '1 балл за каждые 100 ₽',
+      description: 'За остальные операции оплаты товаров и услуг',
+      bonusItemContent: {
+        bonusType: 'count',
+        bonusCount: '1',
+        bonusName: 'балл',
+      },
+    },
+    {
+      title: '300 приветственных баллов',
+      description:
+        'За операции оплаты товаров и услуг на общую сумму 1 000 рублей и более в течение первых двух месяцев после получения карты',
+      bonusItemContent: {
+        bonusType: 'image',
+        image: cardWithMoney,
+      },
+      buttons,
+    },
+  ],
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Bonus className="col-span-12" {...BONUS} />
+    </div>
+  ),
+};