@redneckz/wildless-cms-uni-blocks 0.6.26 → 0.6.28

package/mobile/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -31,7 +31,6 @@ export interface InvestmentInfoProps extends InvestmentInfoContent, UniBlockProp
 
 export const InvestmentInfo = JSX<InvestmentInfoProps>((props) => {
   const {
-    context,
     className = '',
     items,
     isDotted,
@@ -45,11 +44,7 @@ export const InvestmentInfo = JSX<InvestmentInfoProps>((props) => {
   }
 
   return (
-    <BlockWrapper
-      className={`font-sans bg-white px-9 py-12 ${className}`}
-      context={context}
-      {...rest}
-    >
+    <BlockWrapper className={`font-sans bg-white px-9 py-12 ${className}`} {...rest}>
       <div className="container text-m-light">
         {colums?.length ? (
           <div>

package/mobile/src/components/LikeControl/LikeControl.tsx

@@ -1,24 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { handlerDecorator } from '../../hooks/handlerDecorator';
 import { useLikeService } from '../../hooks/useLikeService';
-import { defaultHandlerDecorator } from '../../hooks/useLink';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { useRouter } from '../../hooks/useRouter';
 import { LikeButton } from '../../ui-kit/Button/LikeButton';
 
-export const LikeControl = JSX<UniBlockProps>(({ className, context, ...rest }) => {
-  const { useRouter, handlerDecorator = defaultHandlerDecorator } = context;
+interface LikeControlProps {
+  className?: string;
+}
 
+export const LikeControl = JSX<LikeControlProps>(({ className = '' }) => {
   const router = useRouter();
   const likeService = useLikeService(router.pathname);
 
   return (
-    <BlockWrapper
-      tag="div"
-      context={context}
-      className={`border-main border-2 border-solid bg-white flex w-[125px] items-center justify-center gap-3 p-2 font-sans ${
-        className || ''
-      }`}
-      {...rest}
+    <div
+      className={`border-main border-2 border-solid bg-white flex w-[125px] items-center justify-center gap-3 p-2 font-sans ${className}`}
     >
       <LikeButton
         onClick={handlerDecorator(likeService.like)}
@@ -30,6 +26,6 @@ export const LikeControl = JSX<UniBlockProps>(({ className, context, ...rest })
         ariaLabel="Поставить отметку «дизлайк»"
       />
       <span className="select-none">{likeService.likeCount}</span>
-    </BlockWrapper>
+    </div>
   );
 });

package/mobile/src/components/LinkDocs/LinkDocs.tsx

@@ -10,36 +10,29 @@ export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
 export const LinkDocs = JSX<LinkDocsProps>(
   ({
     className = '',
-    context,
     title,
     description,
     icon = { icon: 'DocIconMonoColor' },
     documents,
     orientation = 'vertical',
     hasBorder = true,
-  }) => {
-    return (
-      <section
-        className={`font-sans text-primary-text py-6 px-4 bg-white overflow-x-hidden ${className}`}
-      >
-        <Headline
-          className={`!p-0 ${description ? 'gap-2' : 'gap-5'}`}
-          title={title}
-          description={description}
-          context={context}
-          align="center"
-        />
-        {orientation === 'vertical' ? (
-          <LinkDocsVerticalList hasBorder={hasBorder} documents={documents} icon={icon} />
-        ) : (
-          <LinkDocsHorizontalList
-            context={context}
-            hasBorder={hasBorder}
-            documents={documents}
-            icon={icon}
-          />
-        )}
-      </section>
-    );
-  },
+    ...rest
+  }) => (
+    <section
+      className={`font-sans text-primary-text py-6 px-4 bg-white overflow-x-hidden ${className}`}
+    >
+      <Headline
+        className={`!p-0 ${description ? 'gap-2' : 'gap-5'}`}
+        title={title}
+        description={description}
+        align="center"
+        {...rest}
+      />
+      {orientation === 'vertical' ? (
+        <LinkDocsVerticalList hasBorder={hasBorder} documents={documents} icon={icon} />
+      ) : (
+        <LinkDocsHorizontalList hasBorder={hasBorder} documents={documents} icon={icon} />
+      )}
+    </section>
+  ),
 );

package/mobile/src/components/LinkDocs/LinkDocsHorizontalList.tsx

@@ -2,27 +2,20 @@ import { JSX } from '@redneckz/uni-jsx';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
 import { LinkDocsListItem } from './LinkDocsListItem';
 import type { LinkDocsVerticalListProps } from './LinkDocsVerticalList';
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 
-export interface LinkDocsHorizontalListProps extends LinkDocsVerticalListProps {
-  context: ContentPageContext;
-}
-
-export const LinkDocsHorizontalList = JSX<LinkDocsHorizontalListProps>(
-  ({ context, hasBorder = true, documents, icon }) => {
-    return (
-      <SwipeListControl context={context} className="text-s text-primary-main mt-5">
-        {documents?.length
-          ? documents.map((doc, i) => (
-              <LinkDocsListItem
-                key={String(i)}
-                className={hasBorder ? 'rounded-md border-main-stroke border border-solid p-4' : ''}
-                doc={doc}
-                icon={icon}
-              />
-            ))
-          : null}
-      </SwipeListControl>
-    );
-  },
+export const LinkDocsHorizontalList = JSX<LinkDocsVerticalListProps>(
+  ({ hasBorder = true, documents, icon }) => (
+    <SwipeListControl className="text-s text-primary-main mt-5">
+      {documents?.length
+        ? documents.map((doc, i) => (
+            <LinkDocsListItem
+              key={String(i)}
+              className={hasBorder ? 'rounded-md border-main-stroke border border-solid p-4' : ''}
+              doc={doc}
+              icon={icon}
+            />
+          ))
+        : null}
+    </SwipeListControl>
+  ),
 );

package/mobile/src/components/LinkList/LinkList.tsx

@@ -6,15 +6,13 @@ import type { LinkListContent } from './LinkListContent';
 
 export interface LinkListProps extends LinkListContent, UniBlockProps {}
 
-export const LinkList = JSX<LinkListProps>(({ className = '', documents, ...rest }) => {
-  return (
-    <BlockWrapper className={`font-sans bg-white mt-[10px] ${className}`} {...rest}>
-      <ul className="flex flex-col text-s text-secondary-text p-0">
-        {documents?.length ? renderLinkListItem(documents) : null}
-      </ul>
-    </BlockWrapper>
-  );
-});
+export const LinkList = JSX<LinkListProps>(({ className = '', documents, ...rest }) => (
+  <BlockWrapper className={`font-sans bg-white mt-[10px] ${className}`} {...rest}>
+    <ul className="flex flex-col text-s text-secondary-text p-0">
+      {documents?.length ? renderLinkListItem(documents) : null}
+    </ul>
+  </BlockWrapper>
+));
 
 const renderLinkListItem = (documents: LinkProps[]) => {
   return documents.map((doc, i) => {

package/mobile/src/components/OfficeMap/OfficeMap.tsx

@@ -2,14 +2,16 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { YandexMap } from '../../ui-kit/YandexMap/YandexMap';
-import { OFFICE_MAP } from './mockOfficeMap';
 import { nearbyOffices } from './nearbyOffices';
 import type { OfficeMapProps, WorkScheduleWeek } from './OfficeMapContent';
 import { renderCurrentDaySchedule, renderDay, renderNearbyOffice } from './renderFunctions';
 import { useOfficeMap } from './useOfficeMap';
 
 export const OfficeMap = JSX<UniBlockProps>(({ className = '' }) => {
-  const resultOfficeMap = useOfficeMap('063') || OFFICE_MAP;
+  // TODO: useOfficeMap endpoint had use /api/v1/branches. This endpoint now is`t correct/
+  // TODO: useOfficeMap has return MOCK OBJECT!
+  // TODO: Fix this when endpoint /api/v1/branches (or new endpoint) had returning right data
+  const resultOfficeMap = useOfficeMap('000');
   const { name, address, gpsLatitude, gpsLongitude, workSchedule } =
     resultOfficeMap as OfficeMapProps;
   const {

package/mobile/src/components/OfficeMap/useOfficeMap.ts

@@ -1,5 +1,6 @@
 import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
 import { fetchJSON } from '../../utils/fetchJSON';
+import { OFFICE_MAP } from './mockOfficeMap';
 
 const OFFICE_MAP_URL = '/api/v1/branches';
 
@@ -10,8 +11,10 @@ export function useOfficeMap(regionCode?: string) {
     regionCode ? `${OFFICE_MAP_URL}?regionCode=${regionCode}` : undefined,
     fetchOfficeMap,
   );
+  console.warn('WARNING!!!  Hook useOfficeMap RETURN MOCK object for testing!');
+  console.log('Hook useOfficeMap get this data:', data);
 
-  return data;
+  return OFFICE_MAP;
 }
 
 const fetchOfficeMap = (url?: string) => {

package/mobile/src/components/OfficeServicesBlock/OfficeServicesBlock.tsx

@@ -3,30 +3,23 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import type {
   OfficeServicesBlockContent,
   OfficeServicesBlockList,
 } from './OfficeServicesBlockContent';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 
 export interface OfficeServicesBlockProps extends OfficeServicesBlockContent, UniBlockProps {}
 
 export const OfficeServicesBlock = JSX<OfficeServicesBlockProps>(
-  ({ className = '', context, title, servicesList, anchor = '', ...rest }) => {
-    return (
-      <BlockWrapper
-        context={context}
-        id={anchor}
-        className={`font-sans bg-white p-8 flex flex-col ${className}`}
-        {...rest}
-      >
-        {title ? <Heading headingType="h5" className="mb-5" title={title} /> : null}
-        {servicesList?.length ? (
-          <ul className="list-none m-0 p-0">{servicesList.map(renderListItems)}</ul>
-        ) : null}
-      </BlockWrapper>
-    );
-  },
+  ({ className = '', title, servicesList, ...rest }) => (
+    <BlockWrapper className={`font-sans bg-white p-8 flex flex-col ${className}`} {...rest}>
+      {title ? <Heading headingType="h5" className="mb-5" title={title} /> : null}
+      {servicesList?.length ? (
+        <ul className="list-none m-0 p-0">{servicesList.map(renderListItems)}</ul>
+      ) : null}
+    </BlockWrapper>
+  ),
 );
 
 const renderListItems = (itemList: OfficeServicesBlockList, i: number) => (

package/mobile/src/components/OtherProducts/OtherProducts.tsx

@@ -6,12 +6,8 @@ import type { OtherProductsContent } from './OtherProductsContent';
 export interface OtherProductsProps extends OtherProductsContent, UniBlockProps {}
 
 export const OtherProducts: JSXBlock<OtherProductsProps> = JSX<OtherProductsProps>(
-  ({ context, className = '', children, ...rest }) => (
-    <BlockWrapper
-      context={context}
-      className={`font-sans text-primary-text ${className}`}
-      {...rest}
-    >
+  ({ className = '', children, ...rest }) => (
+    <BlockWrapper className={`font-sans text-primary-text ${className}`} {...rest}>
       {children}
     </BlockWrapper>
   ),

package/mobile/src/components/PictureText/PictureText.tsx

@@ -15,7 +15,6 @@ export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 export const PictureText = JSX<PictureTextProps>(
   ({
     className = '',
-    context,
     title,
     description,
     image,
@@ -25,34 +24,31 @@ export const PictureText = JSX<PictureTextProps>(
     monthLimit,
     directionRight = false,
     ...rest
-  }) => {
-    return (
-      <BlockWrapper
-        className={`relative font-sans py-12 px-24 ${VersionStyleMap[version]} ${className}`}
-        context={context}
+  }) => (
+    <BlockWrapper
+      className={`relative font-sans py-12 px-24 ${VersionStyleMap[version]} ${className}`}
+      {...rest}
+    >
+      <Headline
+        className="!p-0"
+        title={title}
+        description={description}
+        headlineVersion="M"
+        bgColorHeadline={version}
+        align="center"
         {...rest}
-      >
-        <Headline
-          context={context}
-          className="!p-0"
-          title={title}
-          description={description}
-          headlineVersion="M"
-          bgColorHeadline={version}
-          align="center"
-        />
-        <div className={'flex justify-center gap-[122px] mt-[30px]'}>
-          {image?.src ? <Img className={directionRight ? 'order-2' : ''} image={image} /> : null}
-          <div className="w-[558px] m-auto">
-            {benefits?.length ? (
-              <div className="flex flex-col gap-4">{benefits.map(renderBenefit(version))}</div>
-            ) : null}
-            {renderInsuranceSumMonth(Number(sum), Number(monthLimit))}
-          </div>
+      />
+      <div className={'flex justify-center gap-[122px] mt-[30px]'}>
+        {image?.src ? <Img className={directionRight ? 'order-2' : ''} image={image} /> : null}
+        <div className="w-[558px] m-auto">
+          {benefits?.length ? (
+            <div className="flex flex-col gap-4">{benefits.map(renderBenefit(version))}</div>
+          ) : null}
+          {renderInsuranceSumMonth(Number(sum), Number(monthLimit))}
         </div>
-      </BlockWrapper>
-    );
-  },
+      </div>
+    </BlockWrapper>
+  ),
 );
 
 const renderBenefit = (version: BlockVersion) => (benefit: BenefitItemProps, i: number) =>

package/mobile/src/components/Placeholder/Placeholder.tsx

@@ -7,28 +7,25 @@ import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import { Headline } from '../Headline/Headline';
 import type { PlaceholderContent } from './PlaceholderContent';
 
-export interface PlaceholderProps extends PlaceholderContent, UniBlockProps {
-  className?: string;
-}
+export interface PlaceholderProps extends PlaceholderContent, UniBlockProps {}
 
 const GOLDEN_RATIO = 1.618;
 
 export const Placeholder = JSX<PlaceholderProps>(
-  ({ className, context, title, description = 'Блок в разработке...', ...rest }) => {
+  ({ className, title, description = 'Блок в разработке...', ...rest }) => {
     return (
       <BlockWrapper
-        context={context}
         className={`bg-white text-primary-text font-sans p-9 box-border ${className} ${getTileRightPadding(
           className,
         )} ${getTileMinHeight(className)} `}
         {...rest}
       >
         <Headline
-          context={context}
           className="!p-0 max-w-[600px]"
           title={title}
           description={description}
           headlineVersion={getTileHeadingType(className)}
+          {...rest}
         />
         <figure className="m-0 min-w-[80%]">{renderShimmer()}</figure>
       </BlockWrapper>

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

@@ -15,10 +15,7 @@ export type ProductBlockInnerProps = ProductBlockInnerContent & UniBlockProps;
 export const ProductBlockInner = JSX<ProductBlockInnerProps>(
   ({
     className = '',
-    context,
-    title,
     headlineVersion = 'L',
-    description,
     benefits,
     benefitsVersion = 'normal',
     buttons,
@@ -27,28 +24,22 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     version = 'primary',
     isDotted = true,
     label,
+    ...rest
   }) => {
     return (
       <div className={`w-full ${className}`}>
         <div>
           {label ? renderLabel(label, version) : null}
           <Headline
-            context={context}
             className="!p-0 max-w-[600px]"
-            title={title}
-            description={description}
             bgColorHeadline={version}
             headlineVersion={headlineVersion}
+            {...rest}
           />
           <BaseTile
-            context={context}
             buttons={
               buttons?.length ? (
-                <ButtonSection
-                  context={context}
-                  buttons={buttons}
-                  className="flex flex-col mt-5 gap-2.5"
-                />
+                <ButtonSection buttons={buttons} className="flex flex-col mt-5 gap-2.5" />
               ) : null
             }
           >

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

@@ -1,7 +1,7 @@
+import type { ButtonVersion } from '../../model/ButtonVersion';
 import { Button } from '../../ui-kit/Button/Button';
-import { Img } from '../../ui-kit/Img/Img';
 import type { BackwardButtonProps } from '../../ui-kit/Button/ButtonProps';
-import type { ButtonVersion } from '../../model/ButtonVersion';
+import { Img } from '../../ui-kit/Img/Img';
 
 export function renderBackwardButton(
   button: BackwardButtonProps,
@@ -12,6 +12,7 @@ export function renderBackwardButton(
   const iconVersion = version === 'primary' ? 'white' : 'black';
   const backwardIcon = button?.icon || { icon: 'ArrowLeftIcon' };
 
+  // TODO Move click handler to Button
   return (
     <div className={`flex items-center cursor-pointer ${className}`} onClick={onClick}>
       <Button

package/mobile/src/components/ProductGallery/ProductGallery.tsx

@@ -1,21 +1,120 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import type { BlockVersion } from '../../model/BlockVersion';
+import { VersionStyleMap } from '../../model/BlockVersion';
+import { BorderVersionStyleMap } from '../../model/BorderVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
-import { ProductGalleryBlock } from './ProductGalleryBlock';
-import type { ProductGalleryContent } from './ProductGalleryContent';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
+import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
+import type { ProductGalleryContent, ProductGalleryNav } from './ProductGalleryContent';
 
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 
-export const ProductGallery = JSX<ProductGalleryProps>(({ className, context, slides = [] }) => {
-  const galleryBlocks = slides.map((s) => s.productBlock);
+interface RenderNavButtonProps {
+  slide?: ProductGalleryNav;
+  i: number;
+  activeSlideIndex?: number;
+  onClick: () => void;
+  version: BlockVersion;
+}
+
+type StyleType = {
+  title: string;
+  text: string;
+};
+
+const productBlockStyleMap: Record<BlockVersion, StyleType> = {
+  primary: { title: 'text-secondary-text', text: 'text-secondary-text' },
+  secondary: { title: 'text-white', text: 'text-white/80' },
+};
+
+export const ProductGallery = JSX<ProductGalleryProps>(
+  ({ className = '', slides = [], version = 'primary', ...rest }) => {
+    const galleryNav = slides.map((s) => s.nav);
+    const galleryBlocks = slides.map((s) => s.productBlock);
+    const [activeSlideIndex, setActiveSlideIndex] = useState(0);
+
+    return (
+      <BlockWrapper
+        className={`box-border pt-[50px] overflow-hidden relative font-sans w-100 mb-6 ${className}
+        ${VersionStyleMap[version]}`}
+        {...rest}
+      >
+        <div
+          className="flex duration-1000 pb-14"
+          style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
+          role="list"
+        >
+          {galleryBlocks.map((_, i) => renderProductBlock({ ..._, ...rest, version }, i))}
+        </div>
+
+        <div className="flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border h-28">
+          {galleryNav.map((slide, i) =>
+            renderNavButton({
+              slide,
+              i,
+              activeSlideIndex,
+              onClick: () => setActiveSlideIndex(i),
+              version,
+            }),
+          )}
+        </div>
+      </BlockWrapper>
+    );
+  },
+);
+
+function renderProductBlock(block: ProductBlockInnerContent & UniBlockProps, i: number) {
+  const { version } = block;
+  const additionalClass = version ? productBlockStyleMap[version].title : '';
 
   return (
-    <section className={`font-sans bg-white overflow-hidden w-100 pb-6 ${className || ''}`}>
-      <SwipeListControl context={context}>
-        {galleryBlocks.map((block, i) => (
-          <ProductGalleryBlock key={String(i)} block={block} context={context} />
-        ))}
-      </SwipeListControl>
+    <section
+      key={String(i)}
+      className="box-border relative flex grow-0 shrink-0 basis-full"
+      role="listitem"
+    >
+      <div className="flex grow">
+        <ProductBlockInner
+          className={`pl-[50px] z-10 ${additionalClass}`}
+          textBlockClassName="mb-[154px]"
+          headlineVersion="XXL"
+          {...block}
+        />
+      </div>
     </section>
   );
-});
+}
+
+function renderNavButton({ slide, i, activeSlideIndex, onClick, version }: RenderNavButtonProps) {
+  const isActiveBtn = i === activeSlideIndex;
+
+  const btnClassName = isActiveBtn
+    ? 'bg-white shadow-dark-blue/42 min-w-[350px] border-none p-6'
+    : `min-w-[290px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10 px-6 py-5 backdrop-blur
+      ${VersionStyleMap[version]}`;
+  const btnTitleClassName = isActiveBtn
+    ? 'text-primary-text !text-h6 p-2'
+    : `text-l pb-1 ${productBlockStyleMap[version].title}`;
+  const btnDescClassName = isActiveBtn
+    ? 'text-secondary-text text-l-light'
+    : `text-m-light ${productBlockStyleMap[version].text}`;
+
+  return (
+    <button
+      type="button"
+      key={String(i)}
+      onClick={onClick}
+      aria-label={slide?.title}
+      className={`box-border relative overflow-hidden border border-white/50 cursor-pointer text-left mx-1 grow basis-0
+        ${btnClassName} ${BorderVersionStyleMap[version]}
+      `}
+    >
+      <div className="border-0 px-6">
+        <div className={`last:pb-0 ${btnTitleClassName}`}>{slide?.title}</div>
+        <div className={`text-secondary-text  ${btnDescClassName}`}>{slide?.description}</div>
+      </div>
+    </button>
+  );
+}

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -14,7 +14,6 @@ export interface ProductTileProps extends ProductTileContent, UniBlockProps {}
 
 export const ProductTile = JSX<ProductTileProps>(
   ({
-    context,
     className = '',
     title,
     headlineVersion = 'S',
@@ -25,39 +24,32 @@ export const ProductTile = JSX<ProductTileProps>(
     image,
     version = 'primary',
     ...rest
-  }) => {
-    return (
-      <BlockWrapper
-        context={context}
-        className={`overflow-hidden font-sans p-9 box-border relative justify-between grid min-h-[364px]
+  }) => (
+    <BlockWrapper
+      className={`overflow-hidden font-sans p-9 box-border relative justify-between grid min-h-[364px]
           ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)}`}
+      {...rest}
+    >
+      <Headline
+        className={`!p-0 !bg-transparent z-10 ${title || description ? 'mb-3.5' : ''}`}
+        as="h2"
+        title={title}
+        description={description}
+        headlineVersion={headlineVersion}
+        bgColorHeadline={version}
+        align="left"
         {...rest}
-      >
-        <Headline
-          context={context}
-          className={`!p-0 !bg-transparent z-10 ${title || description ? 'mb-3.5' : ''}`}
-          as="h2"
-          title={title}
-          description={description}
-          headlineVersion={headlineVersion}
-          bgColorHeadline={version}
-          align="left"
-        />
-        {renderBenefits(benefits, version, image)}
-        {additionalDescription
-          ? renderAdditionalDescription(additionalDescription, image, version)
-          : null}
-        {buttons?.length ? (
-          <ButtonSection
-            context={context}
-            buttons={buttons}
-            className="flex self-end mt-5 gap-4 z-10 text-l"
-          />
-        ) : null}
-        {image?.src ? <Img className="absolute right-0 bottom-0" image={image} /> : null}
-      </BlockWrapper>
-    );
-  },
+      />
+      {renderBenefits(benefits, version, image)}
+      {additionalDescription
+        ? renderAdditionalDescription(additionalDescription, image, version)
+        : null}
+      {buttons?.length ? (
+        <ButtonSection buttons={buttons} className="flex self-end mt-5 gap-4 z-10 text-l" />
+      ) : null}
+      {image?.src ? <Img className="absolute right-0 bottom-0" image={image} /> : null}
+    </BlockWrapper>
+  ),
 );
 
 function renderBenefits(benefits: TextBenefit[], version: BlockVersion, image?: Picture) {