@redneckz/wildless-cms-uni-blocks 0.13.16 → 0.13.18

package/mobile/src/components/Calculator/CalculatorContent.ts

@@ -26,8 +26,6 @@ export interface RefinancingCalculatorParamsViewSettings {
   isShowSalaryClient?: boolean;
   /** @title Комплексная страховая защита */
   isShowInsurance?: boolean;
-  /** @title Получить дополнительную сумму */
-  isShowExtraMoney?: boolean;
 }
 
 export interface DepositCalculatorParamsViewSettings {
@@ -118,7 +116,7 @@ export type BonusCalculatorParamsDef = TitleProps &
 
 /**
  * @title Калькулятор рефинансирования
- * @default {"calcType": "BonusCalculatorForm"}
+ * @default {"calcType": "RefinancingCalculatorForm"}
  */
 export type RefinancingCalculatorParamsDef = TitleProps &
   RefinancingCalculatorProps & {

package/mobile/src/components/Calculator/RefinancingCalculatorForm.tsx

@@ -54,13 +54,12 @@ export const RefinancingCalculatorForm = JSX<RefinancingCalculatorProp>(
             title: 'Остаток долга в других банках, ₽ ',
             step: 500,
             min: calculatorParams.minSum,
-            max: calculatorParams.maxSum,
+            max: calculatorParams.maxSum - calculatorParams.maxSumExtra,
             ...field('moneyValue'),
             value: calculatorParams.moneyValue,
           })}
           {renderWantedSumInput({
             title: 'Ежемесячный платеж в других банках, ₽',
-            isShowItems: false,
             step: 500,
             min: calculatorParams.minSumOld,
             max: calculatorParams.maxSumOld,
@@ -131,12 +130,10 @@ const renderCreditParamsForm = (
         value={params.isInsurance}
       />
     ) : null}
-    {params.isShowExtraMoney ? (
-      <Checkbox
-        text="Получить дополнительную сумму"
-        {...field('isExtraMoney')}
-        value={params.isExtraMoney}
-      />
-    ) : null}
+    <Checkbox
+      text="Получить дополнительную сумму"
+      {...field('isExtraMoney')}
+      value={params.isExtraMoney}
+    />
   </div>
 );

package/mobile/src/components/Calculator/checkRefinancingSourceBookRowCommonParams.ts

@@ -25,11 +25,6 @@ export const checkRefinancingSourceBookRowCommonParams = (props: CheckSourceBook
     ...props,
     fieldKey: 'isInsurance',
     viewSettingFieldKey: 'isShowInsurance',
-  }) &&
-  checkRowParam({
-    ...props,
-    fieldKey: 'isExtraMoney',
-    viewSettingFieldKey: 'isShowExtraMoney',
   });
 
 const checkRowParam = ({

package/mobile/src/components/Calculator/getRefinancingCalculatorRateParams.ts

@@ -33,7 +33,7 @@ export const getRefinancingCalculatorRateParams = ({
         userInputParams,
         paramsViewSettings,
       }) &&
-      checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], row) &&
+      checkRangeByKeys(moneyValue + moneyExtra, ['minSum', 'maxSum'], row) &&
       checkRangeByKeys(oldMonthlyPayment, ['minSumOld', 'maxSumOld'], row) &&
       checkRangeByKeys(moneyExtra, ['minSumExtra', 'maxSumExtra'], row) &&
       checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], row),

package/mobile/src/components/Calculator/useRefinancingCalculatorParams.ts

@@ -78,6 +78,12 @@ export const useRefinancingCalculatorParams = (
     rateRows,
   );
 
+  const { minSumOld, maxSumOld } = getLimitRangeByKeys(
+    ['minSumOld', 'maxSumOld'],
+    sourceBookLimitParams,
+    rateRows,
+  );
+
   const { minMonths, maxMonths } = getLimitRangeByKeys(
     ['minMonths', 'maxMonths'],
     sourceBookLimitParams,
@@ -104,6 +110,8 @@ export const useRefinancingCalculatorParams = (
       ...userInputParams,
       minSum,
       maxSum,
+      minSumOld,
+      maxSumOld,
       minMonths,
       maxMonths,
       moneyValue,

package/mobile/src/components/Carousel/Carousel.tsx

@@ -13,7 +13,6 @@ import { renderCarouselCards } from './renderCarouselCards';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {
   itemCount?: number;
-  showDots?: boolean;
 }
 
 export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(

package/mobile/src/components/Carousel/CarouselContent.ts

@@ -23,5 +23,7 @@ export type CarouselContent = UniBlockContent & {
   isGap?: boolean;
   /** @title Не показывать контур на карточках */
   noCardBorder?: boolean;
+  /** @title Показывать навигационные точки */
+  showDots?: boolean;
   cardSize?: CardSizeMode;
 };

package/mobile/src/components/ContentPage/ContentPage.tsx

@@ -44,7 +44,7 @@ export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>(
               {renderBlocksList(slots?.header, { ...options, slotName: 'header' })}
             </div>
           ) : null}
-          <div className="container @lg:grid @lg:grid-cols-12 @lg:gap-2xs">
+          <div className="container space-y-px @lg:space-y-0 @lg:grid @lg:grid-cols-12 @lg:gap-2xs">
             {renderChildren({ block: data, options, extraProps: { className: 'scroll-mt-12' } })}
             {renderBlocksList(slots?.footer, { ...options, slotName: 'footer' })}
           </div>

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

@@ -1,19 +1,12 @@
 import type { BlocksRegistry } from '../../model/BlocksRegistry';
 import type { BlockDef, Slot } from '../../model/ContentPageDef';
 import { mapSlot } from './mapSlot';
+import { toMobileBlock } from './toMobileBlock';
 
 export function normalizeBlock<S extends Slot>(block?: S, blocksRegistry?: BlocksRegistry): S {
-  const { mobile, ...desktop } = (block || {}) as BlockDef;
-  const result = mobile
-    ? Object.assign(
-        {},
-        desktop,
-        mobile.style ? { style: mobile.style } : {},
-        mobile.content ? { content: mobile.content } : {},
-      )
-    : block;
+  const { mobile } = (block || {}) as BlockDef;
 
-  return mapSlot(filterBlocks(blocksRegistry))(result || {}) as S;
+  return mapSlot(filterBlocks(blocksRegistry))((mobile ? toMobileBlock(block) : block) || {}) as S;
 }
 
 const filterBlocks =

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

@@ -0,0 +1,11 @@
+import type { BlockDef } from '../../model/ContentPageDef';
+
+export function toMobileBlock(block: BlockDef = {}): BlockDef {
+  const { mobile, ...desktop } = block;
+
+  return {
+    ...desktop,
+    ...(mobile?.style ? { style: mobile.style } : {}),
+    ...(mobile?.content ? { content: mobile.content } : {}),
+  };
+}

package/mobile/src/components/ErrorBlock/ErrorBlock.example.json

@@ -1,9 +1,9 @@
 {
   "content": {
     "title": "Заголовок",
-    "subtitle": "Описание",
+    "description": "Описание",
     "error": {
-      "errorContentType": "Code",
+      "contentType": "Code",
       "code": "404",
       "image": {
         "format": "webp",

package/mobile/src/components/ErrorBlock/ErrorBlock.tsx

@@ -10,34 +10,28 @@ import { Headline } from '../Headline/Headline';
 export interface ErrorBlockProps extends ErrorBlockContent, UniBlockProps {}
 
 const renderErrorContent = (error: ErrorBlockContent['error']) => {
-  if (error?.errorContentType === 'Image' && error?.image) {
+  if (error?.contentType === 'Image' && error?.image) {
     return <Img image={error.image} />;
   }
 
-  if (error?.errorContentType === 'Code' && error.code) {
+  if (error?.contentType === 'Code' && error.code) {
     return <div className="font-mohave text-title-extra gradient-color-text">{error.code}</div>;
   }
 
   return null;
 };
 
-const getErrorBlockStyle = (text: string) => (text ? 'py-20' : 'mb-16 mt-24');
-
 export const ErrorBlock = JSX<ErrorBlockProps>(
-  ({ className = '', title, subtitle, error, button, ...rest }) => (
+  ({ className = '', title, description, error, button, ...rest }) => (
     <BlockWrapper
-      className={style('flex flex-col gap-lg justify-center items-center', className)}
-      defaultPadding={style('py-xs', getErrorBlockStyle(button?.text as string))}
+      className={style('flex flex-col gap-2xl justify-center items-center', className)}
+      defaultPadding={style('p-6xl')}
       version="transparent"
       {...rest}
     >
-      <div className="flex justify-center py-20">{renderErrorContent(error)}</div>
-      <Headline title={title} description={subtitle} headlineVersion="XL" isEmbedded={true} />
-      {button?.text ? (
-        <Button className="py-4 px-9" version={button?.version} {...button}>
-          {button.text}
-        </Button>
-      ) : null}
+      <div className="flex justify-center">{renderErrorContent(error)}</div>
+      <Headline title={title} description={description} headlineVersion="XL" isEmbedded={true} />
+      {button?.text ? <Button version={button?.version} text={button?.text} {...button} /> : null}
     </BlockWrapper>
   ),
 );

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

@@ -1,7 +1,7 @@
 {
   "content": {
     "error": {
-      "errorContentType": {
+      "contentType": {
         "ui:widget": "hidden"
       },
       "image": {

package/mobile/src/components/ErrorBlock/ErrorBlockContent.ts

@@ -1,4 +1,4 @@
-import type { SubtitleProps, TitleProps } from '../../model/HeadlineType';
+import type { DescriptionProps, TitleProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
@@ -8,14 +8,14 @@ import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
  */
 export type ErrorImageDef = ImageContent & {
   /** @default Image */
-  errorContentType: 'Image';
+  contentType: 'Image';
 };
 
 /**
  * @title Код ошибки
  */
 export type ErrorCodeDef = {
-  errorContentType: 'Code';
+  contentType: 'Code';
   code?: ErrorType;
 };
 
@@ -42,7 +42,7 @@ export type ErrorType =
  */
 export type ErrorBlockContent = UniBlockContent &
   TitleProps &
-  SubtitleProps & {
+  DescriptionProps & {
     error?: ErrorContentDef;
     /** @title Кнопка */
     button?: ButtonContent;

package/mobile/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -71,11 +71,7 @@ export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
               calcState.selectSell,
             ),
         })}
-        {button?.text ? (
-          <Button className="py-4 px-9" version={button?.version} {...button}>
-            {button.text}
-          </Button>
-        ) : null}
+        {button?.text ? <Button text={button.text} version={button?.version} {...button} /> : null}
       </div>
     );
   },

package/mobile/src/ui-kit/Button/ButtonInner.tsx

@@ -30,11 +30,11 @@ const getButtonStyle = (props: ButtonContent) => {
 
   const withTextStyle = `${aboveText ? 'py-2.5 px-9' : 'py-4 px-9'}`;
 
-  return [
+  return style(
     'group/btn items-center justify-center',
     isWithText(props) ? withTextStyle : 'h-12 w-12',
     rounded ? 'rounded-full' : '',
-  ].join(' ');
+  );
 };
 
 const isWithText = ({ text, aboveText, appendLeft }: ButtonProps) =>

package/package.json

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

package/src/components/Blocks.mobile.ts

@@ -16,6 +16,7 @@ import { CarouselProgramsCard } from './CarouselProgramsCard/CarouselProgramsCar
 import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
+import { ErrorBlock } from './ErrorBlock/ErrorBlock';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
 import { Header } from './Header/Header';
@@ -59,6 +60,7 @@ export const Blocks: BlocksRegistry = {
   CarouselRecommendationCard,
   CarouselTariffsCard,
   ComparisonTable,
+  ErrorBlock,
   ExchangeRateTile,
   Footer,
   Header,

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

@@ -65,7 +65,6 @@ const REFINANCING_CALCULATOR_BLOCK: RefinancingCalculatorParamsDef = {
   calcType: 'RefinancingCalculatorForm',
   paramsViewSettings: {
     isShowSalaryClient: true,
-    isShowExtraMoney: true,
     isShowInsurance: true,
   },
   buttons: [

package/src/components/Calculator/CalculatorContent.ts

@@ -26,8 +26,6 @@ export interface RefinancingCalculatorParamsViewSettings {
   isShowSalaryClient?: boolean;
   /** @title Комплексная страховая защита */
   isShowInsurance?: boolean;
-  /** @title Получить дополнительную сумму */
-  isShowExtraMoney?: boolean;
 }
 
 export interface DepositCalculatorParamsViewSettings {
@@ -118,7 +116,7 @@ export type BonusCalculatorParamsDef = TitleProps &
 
 /**
  * @title Калькулятор рефинансирования
- * @default {"calcType": "BonusCalculatorForm"}
+ * @default {"calcType": "RefinancingCalculatorForm"}
  */
 export type RefinancingCalculatorParamsDef = TitleProps &
   RefinancingCalculatorProps & {

package/src/components/Calculator/RefinancingCalculatorForm.tsx

@@ -54,13 +54,12 @@ export const RefinancingCalculatorForm = JSX<RefinancingCalculatorProp>(
             title: 'Остаток долга в других банках, ₽ ',
             step: 500,
             min: calculatorParams.minSum,
-            max: calculatorParams.maxSum,
+            max: calculatorParams.maxSum - calculatorParams.maxSumExtra,
             ...field('moneyValue'),
             value: calculatorParams.moneyValue,
           })}
           {renderWantedSumInput({
             title: 'Ежемесячный платеж в других банках, ₽',
-            isShowItems: false,
             step: 500,
             min: calculatorParams.minSumOld,
             max: calculatorParams.maxSumOld,
@@ -131,12 +130,10 @@ const renderCreditParamsForm = (
         value={params.isInsurance}
       />
     ) : null}
-    {params.isShowExtraMoney ? (
-      <Checkbox
-        text="Получить дополнительную сумму"
-        {...field('isExtraMoney')}
-        value={params.isExtraMoney}
-      />
-    ) : null}
+    <Checkbox
+      text="Получить дополнительную сумму"
+      {...field('isExtraMoney')}
+      value={params.isExtraMoney}
+    />
   </div>
 );

package/src/components/Calculator/checkRefinancingSourceBookRowCommonParams.ts

@@ -25,11 +25,6 @@ export const checkRefinancingSourceBookRowCommonParams = (props: CheckSourceBook
     ...props,
     fieldKey: 'isInsurance',
     viewSettingFieldKey: 'isShowInsurance',
-  }) &&
-  checkRowParam({
-    ...props,
-    fieldKey: 'isExtraMoney',
-    viewSettingFieldKey: 'isShowExtraMoney',
   });
 
 const checkRowParam = ({

package/src/components/Calculator/getRefinancingCalculatorRateParams.ts

@@ -33,7 +33,7 @@ export const getRefinancingCalculatorRateParams = ({
         userInputParams,
         paramsViewSettings,
       }) &&
-      checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], row) &&
+      checkRangeByKeys(moneyValue + moneyExtra, ['minSum', 'maxSum'], row) &&
       checkRangeByKeys(oldMonthlyPayment, ['minSumOld', 'maxSumOld'], row) &&
       checkRangeByKeys(moneyExtra, ['minSumExtra', 'maxSumExtra'], row) &&
       checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], row),

package/src/components/Calculator/useRefinancingCalculatorParams.ts

@@ -78,6 +78,12 @@ export const useRefinancingCalculatorParams = (
     rateRows,
   );
 
+  const { minSumOld, maxSumOld } = getLimitRangeByKeys(
+    ['minSumOld', 'maxSumOld'],
+    sourceBookLimitParams,
+    rateRows,
+  );
+
   const { minMonths, maxMonths } = getLimitRangeByKeys(
     ['minMonths', 'maxMonths'],
     sourceBookLimitParams,
@@ -104,6 +110,8 @@ export const useRefinancingCalculatorParams = (
       ...userInputParams,
       minSum,
       maxSum,
+      minSumOld,
+      maxSumOld,
       minMonths,
       maxMonths,
       moneyValue,

package/src/components/Carousel/Carousel.tsx

@@ -13,7 +13,6 @@ import { renderCarouselCards } from './renderCarouselCards';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {
   itemCount?: number;
-  showDots?: boolean;
 }
 
 export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(

package/src/components/Carousel/CarouselContent.ts

@@ -23,5 +23,7 @@ export type CarouselContent = UniBlockContent & {
   isGap?: boolean;
   /** @title Не показывать контур на карточках */
   noCardBorder?: boolean;
+  /** @title Показывать навигационные точки */
+  showDots?: boolean;
   cardSize?: CardSizeMode;
 };

package/src/components/ContentPage/ContentPage.tsx

@@ -44,7 +44,7 @@ export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>(
               {renderBlocksList(slots?.header, { ...options, slotName: 'header' })}
             </div>
           ) : null}
-          <div className="container @lg:grid @lg:grid-cols-12 @lg:gap-2xs">
+          <div className="container space-y-px @lg:space-y-0 @lg:grid @lg:grid-cols-12 @lg:gap-2xs">
             {renderChildren({ block: data, options, extraProps: { className: 'scroll-mt-12' } })}
             {renderBlocksList(slots?.footer, { ...options, slotName: 'footer' })}
           </div>

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

@@ -1,19 +1,12 @@
 import type { BlocksRegistry } from '../../model/BlocksRegistry';
 import type { BlockDef, Slot } from '../../model/ContentPageDef';
 import { mapSlot } from './mapSlot';
+import { toMobileBlock } from './toMobileBlock';
 
 export function normalizeBlock<S extends Slot>(block?: S, blocksRegistry?: BlocksRegistry): S {
-  const { mobile, ...desktop } = (block || {}) as BlockDef;
-  const result = mobile
-    ? Object.assign(
-        {},
-        desktop,
-        mobile.style ? { style: mobile.style } : {},
-        mobile.content ? { content: mobile.content } : {},
-      )
-    : block;
+  const { mobile } = (block || {}) as BlockDef;
 
-  return mapSlot(filterBlocks(blocksRegistry))(result || {}) as S;
+  return mapSlot(filterBlocks(blocksRegistry))((mobile ? toMobileBlock(block) : block) || {}) as S;
 }
 
 const filterBlocks =

package/src/components/ContentPage/toMobileBlock.ts

@@ -0,0 +1,11 @@
+import type { BlockDef } from '../../model/ContentPageDef';
+
+export function toMobileBlock(block: BlockDef = {}): BlockDef {
+  const { mobile, ...desktop } = block;
+
+  return {
+    ...desktop,
+    ...(mobile?.style ? { style: mobile.style } : {}),
+    ...(mobile?.content ? { content: mobile.content } : {}),
+  };
+}

package/src/components/ErrorBlock/ErrorBlock.example.json

@@ -1,9 +1,9 @@
 {
   "content": {
     "title": "Заголовок",
-    "subtitle": "Описание",
+    "description": "Описание",
     "error": {
-      "errorContentType": "Code",
+      "contentType": "Code",
       "code": "404",
       "image": {
         "format": "webp",

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

@@ -0,0 +1,52 @@
+import '../../setup-fixture';
+
+import type { Picture } from '../../model/Picture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { ErrorBlock } from './ErrorBlock';
+
+const image: Picture = {
+  src: 'error.png',
+  format: 'webp',
+  alt: 'Ошибка',
+  size: {
+    width: 460,
+    height: 294,
+  },
+};
+
+const buttonPrimary: ButtonProps = {
+  href: '/credit-cards',
+  text: 'Вернуться на главную',
+  target: '_blank',
+  version: 'primary',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <ErrorBlock
+        className="col-span-12"
+        title="Страница не найдена"
+        description="Возможно неправильно набран адрес или такой странице не существует"
+        error={{
+          contentType: 'Code',
+          code: '404',
+        }}
+        button={buttonPrimary}
+      />
+    </div>
+  ),
+  'error-with-image': (
+    <div className="container grid grid-cols-12">
+      <ErrorBlock
+        className="col-span-12"
+        title="Ваш браузер устарел"
+        description="Чтобы открыть наш сайт обновите Ваш браузер или скачайте обновленные версии браузеров"
+        error={{
+          contentType: 'Image',
+          image: image,
+        }}
+      />
+    </div>
+  ),
+};

package/src/components/ErrorBlock/ErrorBlock.fixture.tsx

@@ -27,9 +27,9 @@ export default {
       <ErrorBlock
         className="col-span-12"
         title="Страница не найдена"
-        subtitle="Возможно неправильно набран адрес или такой странице не существует"
+        description="Возможно неправильно набран адрес или такой странице не существует"
         error={{
-          errorContentType: 'Code',
+          contentType: 'Code',
           code: '404',
         }}
         button={buttonPrimary}
@@ -41,9 +41,9 @@ export default {
       <ErrorBlock
         className="col-span-12"
         title="Ваш браузер устарел"
-        subtitle="Чтобы открыть наш сайт обновите Ваш браузер или скачайте обновленные версии браузеров"
+        description="Чтобы открыть наш сайт обновите Ваш браузер или скачайте обновленные версии браузеров"
         error={{
-          errorContentType: 'Image',
+          contentType: 'Image',
           image: image,
         }}
       />

package/src/components/ErrorBlock/ErrorBlock.tsx

@@ -10,34 +10,28 @@ import { Headline } from '../Headline/Headline';
 export interface ErrorBlockProps extends ErrorBlockContent, UniBlockProps {}
 
 const renderErrorContent = (error: ErrorBlockContent['error']) => {
-  if (error?.errorContentType === 'Image' && error?.image) {
+  if (error?.contentType === 'Image' && error?.image) {
     return <Img image={error.image} />;
   }
 
-  if (error?.errorContentType === 'Code' && error.code) {
+  if (error?.contentType === 'Code' && error.code) {
     return <div className="font-mohave text-title-extra gradient-color-text">{error.code}</div>;
   }
 
   return null;
 };
 
-const getErrorBlockStyle = (text: string) => (text ? 'py-20' : 'mb-16 mt-24');
-
 export const ErrorBlock = JSX<ErrorBlockProps>(
-  ({ className = '', title, subtitle, error, button, ...rest }) => (
+  ({ className = '', title, description, error, button, ...rest }) => (
     <BlockWrapper
-      className={style('flex flex-col gap-lg justify-center items-center', className)}
-      defaultPadding={style('py-xs', getErrorBlockStyle(button?.text as string))}
+      className={style('flex flex-col gap-2xl justify-center items-center', className)}
+      defaultPadding={style('p-6xl')}
       version="transparent"
       {...rest}
     >
-      <div className="flex justify-center py-20">{renderErrorContent(error)}</div>
-      <Headline title={title} description={subtitle} headlineVersion="XL" isEmbedded={true} />
-      {button?.text ? (
-        <Button className="py-4 px-9" version={button?.version} {...button}>
-          {button.text}
-        </Button>
-      ) : null}
+      <div className="flex justify-center">{renderErrorContent(error)}</div>
+      <Headline title={title} description={description} headlineVersion="XL" isEmbedded={true} />
+      {button?.text ? <Button version={button?.version} text={button?.text} {...button} /> : null}
     </BlockWrapper>
   ),
 );

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

@@ -1,7 +1,7 @@
 {
   "content": {
     "error": {
-      "errorContentType": {
+      "contentType": {
         "ui:widget": "hidden"
       },
       "image": {