@redneckz/wildless-cms-uni-blocks 0.4.6 → 0.4.7

package/mobile/src/components/__snapshots__/Blocks.spec.tsx.snap

@@ -145,6 +145,17 @@ exports[`Blocks ComparisonTable should render block "ComparisonTable" without co
 </section>
 `;
 
+exports[`Blocks ErrorBlock should render block "ErrorBlock" without content 1`] = `
+<section
+  class="flex flex-col justify-center items-center "
+  role="listitem"
+>
+  <div
+    class="flex justify-center mb-7"
+  />
+</section>
+`;
+
 exports[`Blocks ExchangeRateTile should render block "ExchangeRateTile" without content 1`] = `
 <section
   class="bg-white text-primary-text font-sans p-9 box-border "
@@ -666,6 +677,12 @@ exports[`Blocks Navigation should render block "Navigation" without content 1`]
 </section>
 `;
 
+exports[`Blocks OfficeServicesBlock should render block "OfficeServicesBlock" without content 1`] = `
+<section
+  class="font-sans bg-white p-12 flex flex-col "
+/>
+`;
+
 exports[`Blocks OtherProducts should render block "OtherProducts" without content 1`] = `
 <section
   class="font-sans text-primary-text "
@@ -869,20 +886,15 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               Город
             </span>
             <select
-              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
+              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
+              placeholder="12321321312"
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
                 class=""
-                value="Москва"
+                value=""
               >
-                Москва
-              </option>
-              <option
-                class=""
-                value="Краснодар"
-              >
-                Краснодар
+                Выберите значение
               </option>
             </select>
           </div>
@@ -897,32 +909,15 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               Отделение
             </span>
             <select
-              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
+              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
+              placeholder="12321321312"
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
                 class=""
-                value="выберите отделение"
-              >
-                выберите отделение
-              </option>
-              <option
-                class=""
-                value="МоскваОфис1"
-              >
-                МоскваОфис1
-              </option>
-              <option
-                class=""
-                value="МоскваОфис2"
+                value=""
               >
-                МоскваОфис2
-              </option>
-              <option
-                class=""
-                value="МоскваОфис3"
-              >
-                МоскваОфис3
+                Выберите отделение
               </option>
             </select>
           </div>
@@ -985,29 +980,18 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
             <span
               class="block text-m-light mb-2"
             >
-              Размер ячейки
+              Размер
             </span>
             <select
-              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
+              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
+              placeholder="12321321312"
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
                 class=""
-                value="маленькая"
-              >
-                маленькая
-              </option>
-              <option
-                class=""
-                value="средняя"
-              >
-                средняя
-              </option>
-              <option
-                class=""
-                value="большая"
+                value=""
               >
-                большая
+                Выберите размер
               </option>
             </select>
           </div>
@@ -1022,26 +1006,15 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               Параметры ячейки, мм (ВхШхД)
             </span>
             <select
-              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
+              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
+              placeholder="12321321312"
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
                 class=""
-                value="125x225x375"
-              >
-                125x225x375
-              </option>
-              <option
-                class=""
-                value="200x300x400"
+                value=""
               >
-                200x300x400
-              </option>
-              <option
-                class=""
-                value="300x400x500"
-              >
-                300x400x500
+                Выберите параметр ячейки
               </option>
             </select>
           </div>
@@ -1063,7 +1036,8 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               class="flex items-center relative cursor-pointer"
             >
               <input
-                class="appearance-none flex justify-center items-center w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
+                checked=""
+                class="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
                 name="contractType"
                 type="radio"
                 value="option1"
@@ -1080,8 +1054,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               class="flex items-center relative cursor-pointer"
             >
               <input
-                checked=""
-                class="appearance-none flex justify-center items-center w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
+                class="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
                 name="contractType"
                 type="radio"
                 value="option2"
@@ -1146,7 +1119,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
           <span
             class="text-h3"
           >
-            26 ₽
+            0 ₽
           </span>
         </div>
       </div>

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

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BenefitItemProps, BenefitItemCommonProps } from './BenefitItemProps';
-import { Img } from '../Img/Img';
 import type { BlockVersion } from '../../model/BlockVersion';
+import { Img } from '../Img/Img';
+import type { BenefitItemCommonProps, BenefitItemProps } from './BenefitItemProps';
 
 export interface BenefitGeneralProps extends BenefitItemProps, BenefitItemCommonProps {}
 
@@ -25,15 +25,18 @@ export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
   } = props;
 
   const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
+  const listItemAlign = description ? 'items-start' : 'items-center';
 
   return (
-    <div className={`flex items-start gap-5 ${className}`}>
+    <div className={`flex gap-5 ${listItemAlign} ${className}`}>
       {icon ? (
-        <Img
-          className={renderBenefitIconBgStyle(version, benefitsVersion)}
-          image={{ ...icon, iconVersion: isIconWhite ? 'white' : 'normal' }}
-          asSVG
-        />
+        <div className={renderBenefitIconBgStyle(version, benefitsVersion)}>
+          <Img
+            className="w-[24px] h-[24px]"
+            image={{ ...icon, iconVersion: isIconWhite ? 'white' : 'normal' }}
+            asSVG
+          />
+        </div>
       ) : null}
       <div className="gap-0.5">
         {label ? <div className={`text-h6 ${titleStyleMap[version]}`}>{label}</div> : null}
@@ -54,5 +57,5 @@ function renderBenefitIconBgStyle(version, benefitsVersion) {
     bgColorStyle = 'bg-secondary-light text-primary-main';
   }
 
-  return `w-[50px] h-[50px] min-w-[50px] rounded-full p-[10px] box-border ${bgColorStyle}`;
+  return `w-[50px] h-[50px] min-w-[50px] rounded-full p-[10px] box-border flex items-center justify-center ${bgColorStyle}`;
 }

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

@@ -41,7 +41,7 @@ export const InputRange = JSX<InputRangeProps>(
     return (
       <div className={className}>
         <label className="block relative">
-          {title ? <span className="text-m font-light">{title}</span> : null}
+          {title ? <span className="text-m-light">{title}</span> : null}
           <input
             className={`m-0 mt-2 font-sans text-h3 w-full h-14 border border-solid border-main-stroke rounded-md
                         outline-none p-0 pl-4 box-border text-primary-text hover:border-primary-hover focus:border-primary-focus ${DISABLED_INPUT_CLASSES}`}

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

@@ -5,7 +5,7 @@ export const Radio = JSX<RadioProps>(({ name, text, value, checked, onChange, cl
   <div className={className}>
     <label className="flex items-center relative cursor-pointer">
       <input
-        className="appearance-none flex justify-center items-center w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
+        className="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
         type="radio"
         value={value}
         name={name}

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

@@ -22,6 +22,7 @@ export const Select = JSX<SelectProps>(
         name={name || id}
         value={value}
         onChange={(e) => onChange(e.target.value as string)}
+        placeholder="12321321312"
       >
         {children}
       </select>

package/mobile/src/ui-kit/Select/SelectOption.tsx

@@ -4,12 +4,13 @@ export interface SelectOptionProps {
   className?: string;
   value?: string;
   selected?: boolean;
+  disabled?: boolean;
 }
 
 export const SelectOption = JSX<SelectOptionProps>(
-  ({ className = '', value, selected, children }) => {
+  ({ className = '', value, selected, disabled = false, children }) => {
     return (
-      <option className={className} value={`${value}`} selected={selected}>
+      <option className={className} value={`${value}`} selected={selected} disabled={disabled}>
         {children}
       </option>
     );

package/package.json

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

package/src/common.css

@@ -72,7 +72,7 @@ html {
     width: 100%;
   }
 
-  .calc-rate-text {
+  .gradient-color-text {
     background: linear-gradient(180deg, #42ab44 0%, #f6db7d 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;

package/src/components/BlockContent.ts

@@ -13,6 +13,7 @@ import type { LinkDocsContent } from './LinkDocs/LinkDocsContent';
 import type { LinkListContent } from './LinkList/LinkListContent';
 import type { MobileAppTileContent } from './MobileAppTile/MobileAppTileContent';
 import type { NavigationContent } from './Navigation/NavigationContent';
+import type { OfficeServicesBlockContent } from './OfficeServicesBlock/OfficeServicesBlockContent';
 import type { PictureTextContent } from './PictureText/PictureTextContent';
 import type { PlaceholderContent } from './Placeholder/PlaceholderContent';
 import type { ProductBlockContent } from './ProductBlock/ProductBlockContent';
@@ -25,6 +26,7 @@ import type { TabsContent } from './Tabs/TabsContent';
 import type { TariffsTableContent } from './TariffsTable/TariffsTableContent';
 import type { TextBlockContent } from './TextBlock/TextBlockContent';
 import type { TileContent } from './Tile/TileContent';
+import type { ErrorBlockContent } from './ErrorBlock/ErrorBlockContent';
 
 /**
  * @hidden
@@ -56,4 +58,6 @@ export type BlockContent =
   | LinkListContent
   | BonusBenefitsBlockContent
   | SafeDepositRentalContent
-  | TabsContent;
+  | TabsContent
+  | ErrorBlockContent
+  | OfficeServicesBlockContent;

package/src/components/Blocks.ts

@@ -3,8 +3,8 @@ import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { Bonus } from './Bonus/Bonus';
 import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
 import { Calculator } from './Calculator/Calculator';
-import { Catalog } from './Catalog/Catalog';
 import { CardTransfer } from './CardTransfer/CardTransfer';
+import { Catalog } from './Catalog/Catalog';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
@@ -17,6 +17,7 @@ import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MiniGallery } from './MiniGallery/MiniGallery';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { Navigation } from './Navigation/Navigation';
+import { OfficeServicesBlock } from './OfficeServicesBlock/OfficeServicesBlock';
 import { OtherProducts } from './OtherProducts/OtherProducts';
 import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
@@ -31,6 +32,7 @@ import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
+import { ErrorBlock } from './ErrorBlock/ErrorBlock';
 
 export const Blocks = {
   Accordion,
@@ -66,4 +68,6 @@ export const Blocks = {
   BonusBenefitsBlock,
   SafeDepositRental,
   Tabs,
+  ErrorBlock,
+  OfficeServicesBlock,
 };

package/src/components/Calculator/BonusCalculatorForm.tsx

@@ -39,7 +39,7 @@ export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
           {renderWantedSumInput(
             'Сумма покупок в остальных категориях, ₽',
             {
-              className: 'mt-6',
+              className: 'mt-7',
               minSum: minSumOther,
               maxSum: maxSumOther,
               moneyValue: restExpenseValue,

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

@@ -52,6 +52,7 @@ const DEPOSIT_CALCULATOR_BLOCK: DepositCalculatorParamsDef = {
 };
 
 const BONUS_CALCULATOR_BLOCK: BonusCalculatorParamsDef = {
+  title: 'Обменивайте баллы на путешествия',
   calcType: 'BonusCalculatorForm',
   buttons: buttons,
 };

package/src/components/Calculator/Calculator.tsx

@@ -75,9 +75,11 @@ function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps)
 
   const btnClassName = isActiveBtn
     ? 'h-[88px] w-[387px] min-w-[387px] p-5 border-none bg-primary-main text-white'
-    : `h-[77px] w-[322px] min-w-[322px] px-5 py-4 ease-in duration-300 bg-white text-primary-text`;
+    : `h-[77px] w-[328px] min-w-[328px] px-5 py-4 ease-in duration-300 bg-white text-primary-text`;
   const btnTitleClassName = isActiveBtn ? 'text-xl mb-1.5' : `text-l mb-[3px]`;
-  const btnDescClassName = isActiveBtn ? 'text-l font-light text-white' : `text-m font-light`;
+  const btnDescClassName = isActiveBtn
+    ? 'text-l-light text-white'
+    : `text-m-light text-secondary-text`;
   const iconClassName = isActiveBtn ? '' : `text-primary-main`;
 
   return (
@@ -86,7 +88,7 @@ function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps)
       key={String(i)}
       onClick={onClick}
       aria-label={tab?.title}
-      className={`box-border font-sans relative border border-main-stroke cursor-pointer text-left border-b-0 flex hover:h-[88px]
+      className={`box-border relative border border-main-stroke cursor-pointer text-left border-b-0 flex hover:h-[88px]
       ${btnClassName}`}
     >
       <Img
@@ -98,7 +100,7 @@ function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps)
       />
       <div className="border-0">
         <div className={`${btnTitleClassName}`}>{tab?.title}</div>
-        <div className={`text-secondary-text ${btnDescClassName}`}>{tab.description}</div>
+        <div className={`${btnDescClassName}`}>{tab.description}</div>
       </div>
     </button>
   );

package/src/components/Calculator/CalculatorContent.ts

@@ -1,6 +1,7 @@
 import type { EmptyOption } from '../../model/EmptyOptionType';
 import type { Picture } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { TitleProps } from '../../model/HeadlineType';
 
 export interface CommonCalculatorProps {
   /** @title Кнопки */
@@ -115,7 +116,8 @@ export interface CalculatorParams {
  * @title Кредитный калькулятор
  * @default {"calcType": "CreditCalculatorForm"}
  */
-export type CreditCalculatorParamsDef = CreditCalculatorParams &
+export type CreditCalculatorParamsDef = TitleProps &
+  CreditCalculatorParams &
   CommonCalculatorProps & {
     calcType: 'CreditCalculatorForm';
   };
@@ -124,7 +126,8 @@ export type CreditCalculatorParamsDef = CreditCalculatorParams &
  * @title Ипотечный калькулятор
  * @default {"calcType": "MortgageCalculatorForm"}
  */
-export type MortgageCalculatorParamsDef = MortgageCalculatorParams &
+export type MortgageCalculatorParamsDef = TitleProps &
+  MortgageCalculatorParams &
   CommonCalculatorProps & {
     calcType: 'MortgageCalculatorForm';
   };
@@ -133,7 +136,8 @@ export type MortgageCalculatorParamsDef = MortgageCalculatorParams &
  * @title Калькулятор вкладов
  * @default {"calcType": "DepositCalculatorForm"}
  */
-export type DepositCalculatorParamsDef = DepositCalculatorParams &
+export type DepositCalculatorParamsDef = TitleProps &
+  DepositCalculatorParams &
   CommonCalculatorProps & {
     calcType: 'DepositCalculatorForm';
   };
@@ -142,7 +146,8 @@ export type DepositCalculatorParamsDef = DepositCalculatorParams &
  * @title Калькулятор бонусов
  * @default {"calcType": "BonusCalculatorForm"}
  */
-export type BonusCalculatorParamsDef = BonusCalculatorParams &
+export type BonusCalculatorParamsDef = TitleProps &
+  BonusCalculatorParams &
   CommonCalculatorProps & {
     calcType: 'BonusCalculatorForm';
   };
@@ -171,10 +176,10 @@ export interface CalculatorNav {
 /**
  * @title Вкладка
  */
-export interface CalculatorTab {
+export type CalculatorTab = TitleProps & {
   nav?: CalculatorNav;
   calculatorBlock?: CalculatorBlockDef;
-}
+};
 
 /**
  * @title Калькулятор

package/src/components/Calculator/CalculatorValueBlock.tsx

@@ -13,7 +13,7 @@ export const CalculatorValueBlock = JSX<CalculatorValueBlockProps>(
   ({ title, value, postfix = '', prefix, className = '' }) => {
     return (
       <div className={`mb-5 ${className}`}>
-        {title ? <div className="text-l-light">{title}</div> : null}
+        {title ? <div className="text-l-light text-secondary-text">{title}</div> : null}
         {value ? (
           <div className="text-h3">
             {prefix} {addSpacesBetweenNumbers(Math.round(value))} {postfix}

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -55,7 +55,7 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
             setMoneyValue,
           )}
           {renderMonthsInput('Срок кредита, месяцев', calculatorParams, setMonthsValue)}
-          <div className="pt-7">
+          <div className="mt-7">
             <Checkbox
               text="Получаю зарплату на счёт в Россельхозбанке"
               checked={isSalaryClient}

package/src/components/Calculator/MortgageCalculatorForm.tsx

@@ -32,8 +32,6 @@ export const MortgageCalculatorForm = JSX<MortgageCalculatorProp>(
     const maxMonths = /* calculatorParams?.maxMonths || */ DEFAULT_MAX_MONTHS;
 
     const rate = getCreditRate({ calculatorParams, isInsurance: isInsurance });
-
-    const monthlyPayment = 777777; // TODO: hardcode
     const proposalMortgageValue = { credit: 3892000, period: 15, taxRefund: 650000 }; // TODO: hardcode
 
     return (
@@ -60,17 +58,13 @@ export const MortgageCalculatorForm = JSX<MortgageCalculatorProp>(
             <Checkbox text="Страхование жизни" checked={isInsurance} onChange={toggleIsInsurance} />
             <Checkbox
               className="mt-4"
-              text="Страхование жизни, злоровья и временной утраты трудоспособности"
+              text="Страхование жизни, здоровья и временной утраты трудоспособности"
               checked={isFullInsurance}
               onChange={toggleIsFullInsurance}
             />
           </div>
         </div>
-        <div>
-          <Rate rate={rate} rateBlockClassName="tracking-[-25px]" unit="%" />
-
-          <CalculatorValueBlock title="Ежемесячный платеж" value={monthlyPayment} postfix="₽" />
-        </div>
+        <Rate rate={rate} rateBlockClassName="tracking-[-25px]" unit="%" />
         <div>
           <div className="w-[351px]">{renderProposalMortgage(proposalMortgageValue)}</div>
           {renderButtonSection(context, buttons)}

package/src/components/Calculator/Rate.tsx

@@ -9,14 +9,14 @@ export interface RateProps {
 
 export const Rate = JSX<RateProps>(({ rate, title = 'Ставка', unit, rateBlockClassName }) => (
   <div>
-    <div className="text-l-light ml-3">{title}</div>
+    <div className="text-l-light text-secondary-text">{title}</div>
     <div className="flex justify-start">
       <span
-        className={`block calc-rate-text font-mohave text-title-huge pr-6 -mt-4 ${rateBlockClassName}`}
+        className={`block gradient-color-text font-mohave text-title-huge pr-6 -mt-4 ${rateBlockClassName}`}
       >
         {String(rate).replace('.', ',')}
       </span>
-      {unit ? <span className="calc-rate-text text-[65px] leading-[75px]">{unit}</span> : ''}
+      {unit ? <span className="gradient-color-text text-[65px] leading-[75px]">{unit}</span> : ''}
     </div>
   </div>
 ));

package/src/components/Calculator/renderCalculatorBlock.tsx

@@ -1,6 +1,7 @@
 import type { JSXBlock } from '../ContentPage/ContentPage';
 import type { CalculatorBlockDef } from './CalculatorContent';
 import { EmbeddableCalcBlocks, EmbeddableCalcProps } from './EmbeddableCalcBlocks';
+import { Heading } from '../../ui-kit/Heading/Heading';
 
 export const renderCalculatorBlock =
   ({ context, className }: any) =>
@@ -18,6 +19,7 @@ export const renderCalculatorBlock =
         role="listitem"
       >
         <div className="box-border p-9 w-full">
+          {block?.title ? <Heading className="text-center mb-6" title={block.title} /> : null}
           <EmbeddedBlock context={context} {...block} className="flex justify-between" />
         </div>
       </section>

package/src/components/Calculator/renderInitialFeeInput.tsx

@@ -17,7 +17,7 @@ export function renderInitialFeeInput(title, props: RenderWantedSumInputParams,
 
   return (
     <InputRange
-      className="mt-6"
+      className="mt-7"
       title={title}
       items={[
         `От ${addSpacesBetweenNumbers(minSum)} рублей`,

package/src/components/Calculator/renderMonthsInput.tsx

@@ -19,7 +19,7 @@ export function renderMonthsInput(title: string, params: RenderMonthsInputParams
 
   return (
     <InputRange
-      className="mt-6"
+      className="mt-7"
       title={title}
       items={[`От ${monthText(minMonths)}`, `До ${monthText(maxMonths)}`]}
       min={minMonths}

package/src/components/Calculator/renderProposalMortgage.tsx

@@ -6,11 +6,16 @@ type porposalMortgage = {
   taxRefund: number;
 };
 
+const monthlyPayment = 777777; // TODO: hardcode
+
 export function renderProposalMortgage({ credit, period, taxRefund }: porposalMortgage) {
   return (
     <div>
-      {<CalculatorValueBlock title="Сумма кредита" value={credit} postfix="₽" />}
-      {<CalculatorValueBlock title="Срок" value={period} postfix="лет" />}
+      <div className="flex justify-between">
+        {<CalculatorValueBlock title="Сумма кредита" value={credit} postfix="₽" />}
+        {<CalculatorValueBlock title="Срок" value={period} postfix="лет" className="w-[120px]" />}
+      </div>
+      {<CalculatorValueBlock title="Ежемесячный платеж" value={monthlyPayment} postfix="₽" />}
       {<CalculatorValueBlock title="Налоговый вычет" value={taxRefund} postfix="₽" />}
     </div>
   );

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

@@ -0,0 +1,13 @@
+{
+  "title": "Страница не найдена",
+  "subtitle": "Возможно неправильно набран адрес или такой странице не существует",
+  "error": {
+    "errorContentType": "Code",
+    "code": 404
+  },
+  "button": {
+    "text": "Вернуться на главную",
+    "version": "primary",
+    "target": "_blank"
+  }
+}