@redneckz/wildless-cms-uni-blocks 0.5.9 → 0.5.11

package/src/components/ContentPage/ContentPage.tsx

@@ -1,121 +1,73 @@
-import type { UNIComponent } from '@redneckz/uni-jsx';
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockDef, ContentPageDef, UniBlockProps } from '../../types';
+import type { BlockAncestors, BlockDecorator } from '../../model/BlockDecorator';
+import type { BlocksRegistry } from '../../model/BlocksRegistry';
+import type { BlockDef, ContentPageDef, UniBlockProps } from '../../model/ContentPageDef';
 import { style2className } from '../../utils/style2className';
-import type { BlockContent } from '../BlockContent';
 import { LikeControl } from '../LikeControl/LikeControl';
-import { Placeholder } from '../Placeholder/Placeholder';
-import { ContentPageContext } from './ContentPageContext';
+import type { ContentPageContext } from './ContentPageContext';
+import { renderBlock } from './renderBlock';
 
-interface BlockDecoratorProps<VNode> {
-  blockClassName: string;
-  block: BlockDef;
-  render: (props: { blockClassName: string; block: BlockDef }) => VNode;
-}
-
-export type BlockDecorator<VNode = any> = (
-  props: BlockDecoratorProps<VNode>,
-  index?: number | string,
-) => any;
-
-export type JSXBlock<BlockProps = BlockContent> = UNIComponent<BlockProps & UniBlockProps>;
-
-export type BlocksRegistry = Record<string, JSXBlock>;
-
-export interface ContentPageProps extends UniBlockProps {
+interface ContentPageProps extends UniBlockProps {
   blocksRegistry: BlocksRegistry;
   data?: ContentPageDef;
   blockDecorator?: BlockDecorator;
 }
 
-export interface RenderBlockFunc {
-  block: BlockDef;
-  page: ContentPageDef;
-  blockDecorator: BlockDecorator;
-  blocksRegistry: BlocksRegistry;
-  context: ContentPageContext;
-}
-
 const defaultBlockDecorator: BlockDecorator = ({ blockClassName, block, render }) =>
   render({ blockClassName, block });
 
-export const ContentPage = JSX<ContentPageProps>(
-  ({
-    className = '',
-    context,
-    blocksRegistry,
-    data = {},
-    blockDecorator = defaultBlockDecorator,
-  }) => {
-    const { style: pageStyle, blocks, slots = {}, likeControl, colorPalette = 'pc' } = data;
-    const { header } = slots;
+export const ContentPage = JSX<ContentPageProps>((props) => {
+  const { className = '', context, data = {} } = props;
 
-    return (
-      <section
-        className={`relative ${style2className(pageStyle)} ${className}`}
-        data-theme={colorPalette}
-      >
-        {header?.blocks?.length ? (
-          <div className={`${style2className(header?.style)}`}>
-            {header.blocks.map((block, i) =>
-              renderBlock({ block, page: data, blockDecorator, blocksRegistry, context }, i),
-            )}
-          </div>
-        ) : null}
+  const { style: pageStyle, blocks, slots, likeControl, colorPalette = 'pc' } = data;
 
-        {blocks?.length ? (
-          <div className="container grid grid-cols-12 gap-1">
-            {blocks.map((block, i) =>
-              renderBlock({ block, blockDecorator, blocksRegistry, context, page: data }, i),
-            )}
-          </div>
-        ) : null}
+  const blocksListRenderer = renderBlocksList(props);
 
-        {likeControl ? (
-          <div className="flex items-end absolute bottom-0 right-0 h-full pointer-events-none">
-            <LikeControl
-              key="LikeControl"
-              className="rounded-tl-lg sticky bottom-0 pointer-events-auto"
-              context={context}
-            />
-          </div>
-        ) : null}
-      </section>
-    );
-  },
-);
+  return (
+    <section
+      className={`relative ${style2className(pageStyle)} ${className}`}
+      data-theme={colorPalette}
+    >
+      {slots?.header?.blocks?.length ? (
+        <div className={`${style2className(slots.header.style)}`}>
+          {blocksListRenderer(slots.header.blocks, ['header'])}
+        </div>
+      ) : null}
+
+      {blocks?.length ? (
+        <div className="container grid grid-cols-12 gap-1">{blocksListRenderer(blocks)}</div>
+      ) : null}
 
-function renderBlock(
-  { block, blockDecorator, blocksRegistry, context, page }: RenderBlockFunc,
-  i: number,
-) {
-  const { type } = block;
-  if (!(type && type in blocksRegistry)) {
-    console.warn(`No block with "${type}" is registered`);
-  }
-  const BlockComponent = blocksRegistry[type || 'Placeholder'] || Placeholder;
+      {likeControl ? renderLikeControl(context) : null}
+    </section>
+  );
+});
 
-  return blockDecorator(
-    {
-      blockClassName: `scroll-mt-12 ${style2className(block.style)}`,
-      block,
-      render: (props) => {
-        const { version, content, anchor, labels } = props.block;
+function renderBlocksList({ blocksRegistry, data, blockDecorator, context }: ContentPageProps) {
+  return (blocks: BlockDef[], ancestors?: BlockAncestors) =>
+    blocks.map((block, i) =>
+      renderBlock(
+        block,
+        {
+          key: `${block.type || '#'}-${i}`,
+          blocksRegistry,
+          page: data || {},
+          blockDecorator: blockDecorator || defaultBlockDecorator,
+          context,
+        },
+        ancestors,
+      ),
+    );
+}
 
-        return (
-          <BlockComponent
-            key={`${type}-${i}`}
-            className={props.blockClassName}
-            version={version}
-            context={context}
-            page={page}
-            anchor={anchor}
-            labels={labels}
-            {...content}
-          />
-        );
-      },
-    },
-    `block-${i}`,
+function renderLikeControl(context: ContentPageContext) {
+  return (
+    <div className="flex items-end absolute bottom-0 right-0 h-full pointer-events-none">
+      <LikeControl
+        key="LikeControl"
+        className="rounded-tl-lg sticky bottom-0 pointer-events-auto"
+        context={context}
+      />
+    </div>
   );
 }

package/src/components/ContentPage/ContentPageHead.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { ContentPageMeta } from '../../model/ContentPageDef';
 import { VNode as _VNode } from '../../model/VNode';
-import type { ContentPageMeta } from '../../types';
 export interface ContentPageHeadProps {
   HeadComponent: <Props, Context, VNode = _VNode>(props: Props, context?: Context) => VNode;
   data: ContentPageMeta;

package/src/components/ContentPage/computeAPIFallback.ts

@@ -1,5 +1,5 @@
-import type { Fallback, FallbackMap } from '../../types/Fallback';
-import type { BlocksRegistry } from './ContentPage';
+import type { BlocksRegistry } from '../../model/BlocksRegistry';
+import type { Fallback, FallbackMap } from '../../model/Fallback';
 
 interface FallbackData {
   key: string;

package/src/components/ContentPage/filterBlocks.mobile.ts

@@ -1,5 +1,5 @@
-import { BlockDef } from '../../types';
-import { BlocksRegistry } from './ContentPage';
+import type { BlocksRegistry } from '../../model/BlocksRegistry';
+import type { BlockDef } from '../../model/ContentPageDef';
 import { isBlockInRegistry } from './isBlockInRegistry';
 import { normalizeBlock } from './normalizeBlock';
 

package/src/components/ContentPage/filterBlocks.ts

@@ -1,5 +1,5 @@
-import { BlockDef } from '../../types';
-import { BlocksRegistry } from './ContentPage';
+import type { BlocksRegistry } from '../../model/BlocksRegistry';
+import type { BlockDef } from '../../model/ContentPageDef';
 import { isBlockInRegistry } from './isBlockInRegistry';
 import { normalizeBlock } from './normalizeBlock';
 

package/src/components/ContentPage/isBlockInRegistry.ts

@@ -1,4 +1,4 @@
-import { BlocksRegistry } from './ContentPage';
+import type { BlocksRegistry } from '../../model/BlocksRegistry';
 
 export function isBlockInRegistry(blockType: string | undefined, registry: BlocksRegistry) {
   return (blockType || '') in registry;

package/src/components/ContentPage/normalizeBlock.mobile.ts

@@ -1,4 +1,4 @@
-import { BlockDef } from '../../types';
+import { BlockDef } from '../../model/ContentPageDef';
 
 export function normalizeBlock(block: BlockDef) {
   const { mobile, ...rest } = block;

package/src/components/ContentPage/normalizeBlock.ts

@@ -1,4 +1,4 @@
-import { BlockDef } from '../../types';
+import { BlockDef } from '../../model/ContentPageDef';
 
 export function normalizeBlock(block: BlockDef) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/src/components/ContentPage/normalizePage.ts

@@ -1,5 +1,5 @@
-import type { ContentPageDef, Slot } from '../../types';
-import { BlocksRegistry } from './ContentPage';
+import type { BlocksRegistry } from '../../model/BlocksRegistry';
+import type { ContentPageDef, Slot } from '../../model/ContentPageDef';
 import { filterBlocks } from './filterBlocks';
 
 export const normalizePage =

package/src/components/ContentPage/renderBlock.tsx

@@ -0,0 +1,62 @@
+import { BlockAncestors, BlockDecorator, DEFAULT_SLOT_NAME } from '../../model/BlockDecorator';
+import type { BlocksRegistry } from '../../model/BlocksRegistry';
+import type { BlockDef, ContentPageDef } from '../../model/ContentPageDef';
+import { style2className } from '../../utils/style2className';
+import type { ContentPageContext } from './ContentPageContext';
+
+interface RenderBlockOptions {
+  key: string;
+  page: ContentPageDef;
+  blockDecorator: BlockDecorator;
+  blocksRegistry: BlocksRegistry;
+  context: ContentPageContext;
+}
+
+export function renderBlock(
+  block: BlockDef,
+  options: RenderBlockOptions,
+  ancestors: BlockAncestors = [DEFAULT_SLOT_NAME], // Recursion context
+) {
+  const { key, page, blockDecorator, blocksRegistry, context } = options;
+  const { type } = block;
+
+  if (!(type && type in blocksRegistry)) {
+    console.warn(`No block with "${type}" is registered`);
+  }
+
+  const BlockComponent = type && blocksRegistry[type];
+
+  return blockDecorator(
+    {
+      blockClassName: `scroll-mt-12 ${style2className(block.style)}`, // TODO scroll-mt-12 ? here?
+      block,
+      ancestors,
+      // Adjusted by decorator block and blockClassName
+      render: ({ block: adjustedBlock, blockClassName: adjustedBlockClassName }) => {
+        const { version, content, anchor, labels, blocks: childBlocks } = adjustedBlock;
+
+        const children = childBlocks
+          ? childBlocks.map((_, j) =>
+              renderBlock(_, { ...options, key: `${options.key}-${j}` }, [...ancestors, block]),
+            )
+          : null;
+
+        return BlockComponent ? (
+          <BlockComponent
+            key={key}
+            className={adjustedBlockClassName}
+            version={version}
+            context={context}
+            page={page}
+            anchor={anchor}
+            labels={labels}
+            {...content}
+          >
+            {children}
+          </BlockComponent>
+        ) : null;
+      },
+    },
+    key,
+  );
+}

package/src/components/ErrorBlock/ErrorBlock.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../types';
-import type { ErrorBlockContent } from './ErrorBlockContent';
 import { useLink } from '../../hooks/useLink';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { Button } from '../../ui-kit/Button/Button';
-import { Img } from '../../ui-kit/Img/Img';
 import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import type { ErrorBlockContent } from './ErrorBlockContent';
 
 export interface ErrorBlockProps extends ErrorBlockContent, UniBlockProps {}
 

package/src/components/ErrorBlock/ErrorBlock.ui.json

@@ -0,0 +1,12 @@
+{
+  "content": {
+    "error": {
+      "errorContentType": {
+        "ui:widget": "hidden"
+      },
+      "image": {
+        "ui:field": "picture"
+      }
+    }
+  }
+}

package/src/components/ExchangeRateTile/CurrentLocation.tsx

@@ -14,7 +14,7 @@ export const CurrentLocation = JSX<CurrentLocationProps>(
       <div className="ml-3">
         {address ? <p className="text-primary-main  m-0 mb-1 text-l">{address}</p> : null}
         {distance ? (
-          <p className="text-secondary-text m-0 text-m">
+          <p className="text-secondary-text m-0 text-m-light">
             Курс указан для ближайшего офиса - {distance}
           </p>
         ) : null}

package/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -1,13 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
-import type { UniBlockProps } from '../../types';
 import { Button } from '../../ui-kit/Button/Button';
-import { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { renderInput } from './renderInput';
 import { calculateResult, formatValue } from './calculateResult';
 import { callbackCurrencySelect } from './callbackCurrencySelect';
 import { Currency } from './CurrencyProps';
-import { renderInput } from './renderInput';
+import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+
 export interface ExchangeCurrencyItem {
   code?: Currency;
   buy?: number;

package/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useExchangeRates } from '../../hooks/useExchangeRates';
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { BaseTile } from '../BaseTile/BaseTile';
@@ -30,12 +30,15 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
     return (
       <BlockWrapper
         context={context}
-        className={`bg-white text-primary-text font-sans p-9 box-border ${className}`}
+        className={`bg-white text-primary-text font-sans p-9 box-border min-h-[320px] 
+          ${className}`}
         {...rest}
       >
         <BaseTile
           context={context}
-          title={<Heading headingType="h4" title={title} className="whitespace-pre-wrap text-h4" />}
+          title={
+            <Heading headingType="h4" title={title} className="whitespace-pre-wrap text-h4 mb-5" />
+          }
         >
           <div className="flex">
             <div className="mr-14 pt-4">

package/src/components/ExchangeRateTile/ExchangeRateTile.ui.json

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

package/src/components/ExchangeRateTile/renderInput.tsx

@@ -1,6 +1,6 @@
 import { Input } from '../../ui-kit/Input/Input';
-import { SelectCustom } from '../../ui-kit/SelectCustom/SelectCustom';
-import type { OptionProps } from '../../ui-kit/SelectCustom/SelectCustom';
+import { Select } from '../../ui-kit/Select/Select';
+import type { OptionProps } from '../../ui-kit/Select/Select';
 import type { Currency } from './CurrencyProps';
 import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
 
@@ -28,7 +28,7 @@ export function renderInput(props: InputProps) {
         onChange={setValue}
       />
       {ratesOptions.length ? (
-        <SelectCustom
+        <Select
           isBorder={false}
           onChange={(_) => setSelected(_.key as Currency)}
           options={ratesOptions}

package/src/components/Footer/Contacts.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { Button } from '../../ui-kit/Button/Button';
 import type { ContactInfo } from './FooterContent';
 

package/src/components/Footer/Footer.mobile.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { Accordion } from '../Accordion/Accordion';
 import { MobileAppTile } from '../MobileAppTile/MobileAppTile';
 import { Contacts } from './Contacts';
@@ -9,7 +9,7 @@ import { SocialMedia } from './SocialMedia';
 import { TextInformation } from './TextInformation';
 
 import { useSitemap } from '../../services/sitemap/useSitemap';
-import type { Fallback } from '../../types/Fallback';
+import type { Fallback } from '../../model/Fallback';
 import { Button } from '../../ui-kit/Button/Button';
 import { Img } from '../../ui-kit/Img/Img';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';

package/src/components/Footer/Footer.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../types';
-import type { Fallback } from '../../types/Fallback';
+import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { Fallback } from '../../model/Fallback';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Logo } from '../../ui-kit/Logo/Logo';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';

package/src/components/Footer/Footer.ui.json

@@ -0,0 +1,11 @@
+{
+  "content": {
+    "subMenu": {
+      "items": {
+        "icon": {
+          "ui:field": "icon"
+        }
+      }
+    }
+  }
+}

package/src/components/Footer/FooterLink.ts

@@ -1,5 +1,5 @@
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import type { LinkProps } from '../../model/LinkProps';
-import type { UniBlockProps } from '../../types';
 
 export interface FooterLink extends UniBlockProps {
   links?: LinkProps[];

package/src/components/Footer/HorizontalNavigation.mobile.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import { HorizontalNavigationLink } from './HorizontalNavigationLink';
-import type { UniBlockProps } from '../../types';
-import type { FooterLink } from './FooterLink';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import type { TitleProps } from '../../model/HeadlineType';
+import type { FooterLink } from './FooterLink';
+import { HorizontalNavigationLink } from './HorizontalNavigationLink';
 
 export interface HorizontalNavigationProps extends FooterLink, UniBlockProps, TitleProps {}
 

package/src/components/Footer/HorizontalNavigation.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import { HorizontalNavigationLink } from './HorizontalNavigationLink';
-import type { UniBlockProps } from '../../types';
-import type { FooterLink } from './FooterLink';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import type { TitleProps } from '../../model/HeadlineType';
+import type { FooterLink } from './FooterLink';
+import { HorizontalNavigationLink } from './HorizontalNavigationLink';
 
 export interface HorizontalNavigationProps extends FooterLink, UniBlockProps, TitleProps {}
 

package/src/components/Footer/MediaButton.tsx

@@ -50,7 +50,7 @@ export const MediaButton = JSX<MediaButtonProps>(({ href, version = 'primary' })
 
   const classes =
     version === 'secondary'
-      ? 'bg-secondary-light hover:bg-secondary-hover'
+      ? 'bg-white hover:bg-secondary-hover'
       : 'border-solid border-[1px] border-main-divider hover:border-transparent hover:bg-primary-main';
 
   const isPrimary = version === 'primary';

package/src/components/Footer/Sitemap.tsx

@@ -1,11 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import type { LinkProps } from '../../model/LinkProps';
 import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
 import type { TopMenuItem } from '../../services/sitemap/SitemapProps';
 import { useSitemap } from '../../services/sitemap/useSitemap';
-import type { UniBlockProps } from '../../types';
-import type { Fallback } from '../../types/Fallback';
+import type { Fallback } from '../../model/Fallback';
 
 export interface SitemapProps extends UniBlockProps {
   items?: TopMenuItem[];

package/src/components/Footer/SocialMedia.mobile.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import type { LinkProps } from '../../model/LinkProps';
-import type { UniBlockProps } from '../../types';
 import { MediaButton } from './MediaButton';
 
 export interface SocialMediaProps extends UniBlockProps {

package/src/components/Footer/SocialMedia.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import type { LinkProps } from '../../model/LinkProps';
-import type { UniBlockProps } from '../../types';
 import { MediaButton } from './MediaButton';
 
 export interface SocialMediaProps extends UniBlockProps {

package/src/components/Gallery/Gallery.ui.json

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

package/src/components/Gallery/GalleryInner.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import type { GalleryVersion } from '../../model/GalleryVersion';
-import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { galleryLengthForScrollMap } from './constants';

package/src/components/Gallery/GalleryProps.ts

@@ -1,4 +1,4 @@
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import type { GalleryContent } from './GalleryContent';
 
 export interface GalleryProps extends GalleryContent, UniBlockProps {}

package/src/components/GracePeriod/GracePeriod.fixture.tsx

@@ -58,7 +58,7 @@ export const GRACE_PERIOD: GracePeriodContent = {
       greenText: 'начинается с первого числа каждого месяца',
       month: [
         {
-          text: 'Август',
+          name: 'Август',
           image: august,
         },
       ],
@@ -68,11 +68,11 @@ export const GRACE_PERIOD: GracePeriodContent = {
       greenText: '(минимальный платеж, 3% от суммы задолженности)',
       month: [
         {
-          text: 'Сентябрь',
+          name: 'Сентябрь',
           image: september,
         },
         {
-          text: 'Октябрь',
+          name: 'Октябрь',
           image: october,
         },
       ],
@@ -82,7 +82,7 @@ export const GRACE_PERIOD: GracePeriodContent = {
       greenText: 'беспроцентного 3-х месячного периода',
       month: [
         {
-          text: 'Ноябрь',
+          name: 'Ноябрь',
           image: november,
         },
       ],
@@ -92,7 +92,7 @@ export const GRACE_PERIOD: GracePeriodContent = {
       greenText: '',
       month: [
         {
-          text: 'Декабрь',
+          name: 'Декабрь',
           image: december,
         },
       ],

package/src/components/GracePeriod/GracePeriod.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import type { GracePeriodContent } from './GracePeriodContent';
 
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -47,7 +47,7 @@ const renderCalendar = (calendar) => {
     }));
 
   return (
-    <div className="w-full flex flex-col justify-center mt-[54px]">
+    <div className="w-full flex flex-col justify-center mt-13">
       <div className="flex w-full mb-3 text-h6 text-center">
         {mappedCalendar.map((_) => renderMonthNames(_, colSize))}
       </div>
@@ -71,13 +71,14 @@ const renderCalendar = (calendar) => {
 };
 
 const renderMonthNames = (item, colSize) =>
-  item.month.map((_, i) => (
+  item.month?.map((_, i) => (
     <div key={`monthName-${i}`} style={{ flexBasis: `${colSize}%` }}>
-      {_.text}
+      {_.name}
     </div>
   ));
+
 const renderMonthImages = (item) =>
-  item.month.map((_) =>
+  item.month?.map((_) =>
     _.image?.src ? (
       <div
         key={`monthImage-${_.image.src}`}