@redneckz/wildless-cms-uni-blocks 0.2.52 → 0.2.55

package/src/ContentPage.page.json

@@ -42,7 +42,6 @@
             },
             "productBlock": {
               "title": "Ставка от 12,5% годовых на срок до 5 лет!»",
-              "description": "Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.",
               "items": [
                 "Потребительский кредит по специальной процентной ставке",
                 "Получите деньги без залога и поручительства",
@@ -62,8 +61,8 @@
                 "format": "webp",
                 "alt": "Кредит наличными",
                 "size": {
-                  "width": 220,
-                  "height": 220
+                  "width": 280,
+                  "height": 280
                 }
               }
             }
@@ -94,8 +93,8 @@
                 "title": "Рабочий",
                 "format": "webp",
                 "size": {
-                  "width": 220,
-                  "height": 220
+                  "width": 280,
+                  "height": 280
                 }
               }
             }
@@ -126,8 +125,8 @@
                 "title": "Кредитка",
                 "format": "webp",
                 "size": {
-                  "width": 220,
-                  "height": 220
+                  "width": 280,
+                  "height": 280
                 }
               }
             }
@@ -158,8 +157,8 @@
                 "title": "Кредитка",
                 "format": "webp",
                 "size": {
-                  "width": 220,
-                  "height": 220
+                  "width": 280,
+                  "height": 280
                 }
               }
             }
@@ -177,11 +176,13 @@
           "Кредиты наличными на любые цели",
           "Получите деньги без залога и поручителей"
         ],
-        "button": {
-          "text": "Подробнее",
-          "href": "/credit-cards",
-          "version": "secondary"
-        },
+        "buttons": [
+          {
+            "text": "Подробнее",
+            "href": "/credit-cards",
+            "version": "secondary"
+          }
+        ],
         "image": {
           "src": "money-1.png",
           "title": "деньги",
@@ -200,11 +201,13 @@
       "content": {
         "title": "Ипотека",
         "description": "Широкий выбор ипотечных программ с государственной поддержкой. Специальный предложения от 12,2 %",
-        "button": {
-          "text": "Подробнее",
-          "href": "/credits",
-          "version": "secondary"
-        },
+        "buttons": [
+          {
+            "text": "Подробнее",
+            "href": "/credits",
+            "version": "secondary"
+          }
+        ],
         "promo": true
       }
     },
@@ -214,11 +217,13 @@
       "content": {
         "title": "Банковские пластиковые карты",
         "items": ["Счета в разных валютах", "Бесплатное обслуживание", "Кэшбэк до 15% от покупок"],
-        "button": {
-          "text": "Подробнее",
-          "href": "/credits",
-          "version": "secondary"
-        },
+        "buttons": [
+          {
+            "text": "Подробнее",
+            "href": "/credits",
+            "version": "secondary"
+          }
+        ],
         "image": {
           "src": "credit-card-1.png",
           "title": "Кредитка",
@@ -236,11 +241,13 @@
       "content": {
         "title": "Премиальные продукты",
         "description": "Выделенные зоны обслуживания и персональный финансовый консультант. Полный спектр премиальных продуктов, подчеркивающих ваш статус",
-        "button": {
-          "text": "Подробнее",
-          "href": "/credits",
-          "version": "secondary"
-        },
+        "buttons": [
+          {
+            "text": "Подробнее",
+            "href": "/credits",
+            "version": "secondary"
+          }
+        ],
         "image": {
           "src": "column-1.png",
           "alt": "Column",
@@ -263,11 +270,13 @@
           "Площадки для создания комфортной жизни за городом",
           "Подробная база вакансий для жителей сельской местности"
         ],
-        "button": {
-          "text": "Подробнее",
-          "href": "/credits",
-          "version": "secondary"
-        },
+        "buttons": [
+          {
+            "text": "Подробнее",
+            "href": "/credits",
+            "version": "secondary"
+          }
+        ],
         "image": {
           "src": "globe-1.png",
           "title": "Глобус",
@@ -285,11 +294,13 @@
       "content": {
         "title": "Драгоценные металлы",
         "items": ["Счета в драгоценных металлах", "Слитки  и монеты из драгоценных металлов"],
-        "button": {
-          "text": "Подробнее",
-          "href": "/credits",
-          "version": "secondary"
-        }
+        "buttons": [
+          {
+            "text": "Подробнее",
+            "href": "/credits",
+            "version": "secondary"
+          }
+        ]
       }
     },
     {
@@ -298,11 +309,13 @@
       "content": {
         "title": "Банковские ячейки",
         "items": ["Полная конфиденциальность", "Разный размер ячеек", "Оформление доверенностей"],
-        "button": {
-          "text": "Подробнее",
-          "href": "/credits",
-          "version": "secondary"
-        }
+        "buttons": [
+          {
+            "text": "Подробнее",
+            "href": "/credits",
+            "version": "secondary"
+          }
+        ]
       }
     },
     {
@@ -315,11 +328,13 @@
           "Минимальная сумма вклада  от 3000 Р",
           "Минимальный срок вклада от 1 месяца"
         ],
-        "button": {
-          "text": "Подробнее",
-          "href": "/credits",
-          "version": "secondary"
-        }
+        "buttons": [
+          {
+            "text": "Подробнее",
+            "href": "/credits",
+            "version": "secondary"
+          }
+        ]
       }
     },
     {
@@ -329,11 +344,13 @@
         "title": "Акции и спецпредложения",
         "version": "secondary",
         "description": "Пенсионный кредит по специальной процентной ставке",
-        "button": {
-          "text": "Все акции",
-          "href": "/credits",
-          "version": "secondary"
-        }
+        "buttons": [
+          {
+            "text": "Все акции",
+            "href": "/credits",
+            "version": "secondary"
+          }
+        ]
       }
     },
     {
@@ -357,6 +374,67 @@
         "title": "Неизвестный блок"
       }
     },
+    {
+      "type": "ProductBlock",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Потребительский кредит наличными",
+        "description": "Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.",
+        "breadcrumbs": [
+          {
+            "text": "Главная",
+            "href": "/"
+          },
+          {
+            "text": "Кредитные карты",
+            "href": "/credit"
+          },
+          {
+            "text": "Кредитная карта Своя Union Pay"
+          }
+        ],
+        "benefits": [
+          {
+            "label": "До 5 млн ₽",
+            "description": "Кредитный лимит",
+            "icon": "EmptyWalletIcon"
+          },
+          {
+            "label": "От 16,9%",
+            "description": "Ставка по кредиту",
+            "icon": "PercentageSquareIcon"
+          },
+          {
+            "label": "До 5 лет",
+            "description": "Срок кредитования",
+            "icon": "CalendarIcon"
+          }
+        ],
+        "buttons": [
+          {
+            "href": "https://rshb.ru",
+            "text": "Оформить карту",
+            "target": "_blank",
+            "version": "primary"
+          },
+          {
+            "href": "https://rshb.ru",
+            "text": "Подробнее",
+            "target": "_blank",
+            "version": "secondary"
+          }
+        ],
+        "image": {
+          "src": "money-1.png",
+          "alt": "Кредиты в РСХБ",
+          "format": "webp",
+          "size": {
+            "width": 280,
+            "height": 280
+          }
+        }
+      }
+    },
     {
       "type": "ProductTile",
       "style": ["col-span-6"],
@@ -377,11 +455,13 @@
             "description": "до 5 лет"
           }
         ],
-        "button": {
-          "text": "Подробнее",
-          "href": "/credit-cards",
-          "version": "secondary"
-        },
+        "buttons": [
+          {
+            "text": "Подробнее",
+            "href": "/credit-cards",
+            "version": "secondary"
+          }
+        ],
         "image": {
           "src": "card-with-diamond.png",
           "alt": "Кредиты в РСХБ",
@@ -413,12 +493,14 @@
             "description": "до 3 лет"
           }
         ],
-        "button": {
-          "text": "Подробнее",
-          "href": "/credit-cards",
-          "target": "_blank",
-          "version": "secondary"
-        },
+        "buttons": [
+          {
+            "text": "Подробнее",
+            "href": "/credit-cards",
+            "target": "_blank",
+            "version": "secondary"
+          }
+        ],
         "image": {
           "src": "letter-with-money.png",
           "alt": "Пенсионный кредит в РСХБ",
@@ -450,12 +532,14 @@
             "description": "до 10 лет"
           }
         ],
-        "button": {
-          "text": "Подробнее",
-          "href": "/credit-cards",
-          "target": "_blank",
-          "version": "secondary"
-        },
+        "buttons": [
+          {
+            "text": "Подробнее",
+            "href": "/credit-cards",
+            "target": "_blank",
+            "version": "secondary"
+          }
+        ],
         "image": {
           "src": "building.png",
           "alt": "Кредит под залог недвижимости в РСХБ",
@@ -488,14 +572,66 @@
             "description": "до 150 лет"
           }
         ],
-        "button": {
-          "text": "Подробнее",
-          "href": "/credit-cards",
-          "target": "_blank",
-          "version": "secondary"
+        "buttons": [
+          {
+            "text": "Подробнее",
+            "href": "/credit-cards",
+            "target": "_blank",
+            "version": "secondary"
+          }
+        ]
+      }
+    },
+    {
+      "type": "Tile",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Рефинансирование кредитов",
+        "items": [
+          "Без справок и документов из других банков",
+          "Погашение ранее взятых кредитов в любых банках",
+          "Рефинансировать можно  кредит физического лица, кредитную карту, микрозайм или ипотеку"
+        ],
+        "buttons": [
+          {
+            "text": "Подробнее",
+            "href": "/credit-cards",
+            "target": "_blank",
+            "version": "secondary"
+          }
+        ],
+        "image": {
+          "src": "money-2.png",
+          "title": "Деньги",
+          "format": "webp",
+          "size": {
+            "width": 200,
+            "height": 200
+          }
         }
       }
     },
+    {
+      "type": "StepsBlock",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит",
+        "steps": [
+          {
+            "label": "Заявка на кредит",
+            "description": "Оставьте онлайн-заявку на потребительский кредит"
+          },
+          {
+            "label": "В случае одобрения",
+            "description": "Менеджер свяжется с вами и согласует встречу"
+          },
+          {
+            "label": "Получение наличных",
+            "description": "Получите наличные в отделении банка"
+          }
+        ]
+      }
+    },
     {
       "type": "Footer",
       "style": ["col-span-12"],

package/src/ContentPageContext.tsx

@@ -24,10 +24,13 @@ export type AsyncDataHook = <Data, Error = any>(
   fetcher: () => Promise<Data>,
 ) => { data?: Data; error?: Error };
 
+export type GeolocationHook = (defaultLocation: string) => [string, () => void];
+
 export interface ContentPageContext {
   useRouter: () => Router;
   useState: <State>(initialState: State) => [State, (_: State) => void];
   useAsyncData: AsyncDataHook;
+  useGeolocation: GeolocationHook;
   useLikeService: () => LikeService;
   useSearch: () => Search;
   handlerDecorator?: HandlerDecorator;

package/src/ExchangeRateTile.tsx

@@ -18,10 +18,12 @@ const CURRENCY_ICONS_MAP = {
   EUR: EuroIcon,
 };
 
-const button: ButtonProps = {
-  text: 'Все показатели',
-  href: 'https://cbr.ru/currency_base/daily/',
-};
+const buttons: ButtonProps[] = [
+  {
+    text: 'Все показатели',
+    href: 'https://cbr.ru/currency_base/daily/',
+  },
+];
 
 export const ExchangeRateTile = JSX<ExchangeRateTileProps>(({ className, context, title }) => {
   const { data } = context.useAsyncData(CBR_EXCHANGE_RATE_URL, fetchExchangeRate);
@@ -30,7 +32,7 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(({ className, context
       className={className}
       context={context}
       title={title || 'Курсы обмена валют'}
-      button={button}
+      buttons={buttons}
     >
       <table>
         <thead>

package/src/Header/Header.fixture.tsx

@@ -4,7 +4,7 @@ import { Header } from './Header';
 export default (
   <Header
     context={context}
-    location="Москва"
+    defaultLocation="Москва"
     topItems={[
       {
         href: 'https://rshb.ru/',

package/src/Header/Header.tsx

@@ -13,7 +13,7 @@ import { isTopItemActive } from './isTopItemActive';
 
 export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
-export const Header = JSX<HeaderProps>(({ className, location, context, topItems }) => {
+export const Header = JSX<HeaderProps>(({ className, defaultLocation, context, topItems }) => {
   const router = context.useRouter();
   const sitemap = useSitemap(context.useAsyncData);
   const { handlerDecorator } = context;
@@ -46,7 +46,11 @@ export const Header = JSX<HeaderProps>(({ className, location, context, topItems
       <div className="flex items-center">
         <Logo className="mr-8" />
         {topMenu}
-        <HeaderSecondaryMenu location={location} className="ml-auto" />
+        <HeaderSecondaryMenu
+          context={context}
+          className="ml-auto"
+          defaultLocation={defaultLocation}
+        />
       </div>
       <div className="mt-5 h-[1px] bg-main-divider" />
       <nav className="mt-5">{subMenu}</nav>

package/src/Header/HeaderContent.ts

@@ -1,6 +1,6 @@
 import type { TopMenuItem } from '../types';
 
 export interface HeaderContent {
-  location?: string;
+  defaultLocation?: string;
   topItems?: TopMenuItem[];
 }

package/src/Header/HeaderSecondaryMenu.tsx

@@ -2,41 +2,55 @@ import { JSX } from '@redneckz/uni-jsx';
 import { GridIcon, LoupeIcon, ProfileIcon } from '../Icons/index';
 import { TopItem } from '../ui-kit/TopItem';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
+import type { UniBlockProps } from '../types';
 
-interface HeaderSecondaryMenuProps {
-  location?: string;
+interface HeaderSecondaryMenuContent {
+  defaultLocation?: string;
   className?: string;
 }
 
-export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(({ location, className }) => {
-  return (
-    <div className={`flex items-center ${className || ''}`}>
-      <TopItem className="mr-5" flat={true} href="#" text={location} ariaLabel="Местоположение" />
-      <TopItem
-        className="mr-7"
-        flat={true}
-        href="#"
-        text="Офисы и банкоматы"
-        ariaLabel="Список всех доступных офисов и банкоматов"
-      />
-      <HeaderSecondaryMenuButton
-        className="mr-5 text-primary-text hover:text-primary-main"
-        ariaLabel="Поиск по сайту"
-      >
-        {LoupeIcon({ 'aria-hidden': true })}
-      </HeaderSecondaryMenuButton>
-      <HeaderSecondaryMenuButton
-        className="mr-5 text-primary-text hover:text-primary-main"
-        ariaLabel="Профиль"
-      >
-        {ProfileIcon({ 'aria-hidden': true })}
-      </HeaderSecondaryMenuButton>
-      <HeaderSecondaryMenuButton
-        className="mr-5 text-secondary-light hover:text-secondary-active min-w-[32px] min-h-[32px]"
-        ariaLabel="Дополнительные ссылки"
-      >
-        {GridIcon({ 'aria-hidden': true })}
-      </HeaderSecondaryMenuButton>
-    </div>
-  );
-});
+export interface HeaderSecondaryMenuProps extends HeaderSecondaryMenuContent, UniBlockProps {}
+
+export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
+  ({ context, className, defaultLocation = '' }) => {
+    const [city, getCity] = context.useGeolocation(defaultLocation);
+
+    return (
+      <div className={`flex items-center ${className || ''}`}>
+        <TopItem
+          className="mr-5"
+          flat={true}
+          href="#"
+          text={city}
+          ariaLabel="Местоположение"
+          onClick={getCity}
+        />
+        <TopItem
+          className="mr-7"
+          flat={true}
+          href="#"
+          text="Офисы и банкоматы"
+          ariaLabel="Список всех доступных офисов и банкоматов"
+        />
+        <HeaderSecondaryMenuButton
+          className="mr-5 text-primary-text hover:text-primary-main"
+          ariaLabel="Поиск по сайту"
+        >
+          {LoupeIcon({ 'aria-hidden': true })}
+        </HeaderSecondaryMenuButton>
+        <HeaderSecondaryMenuButton
+          className="mr-5 text-primary-text hover:text-primary-main"
+          ariaLabel="Профиль"
+        >
+          {ProfileIcon({ 'aria-hidden': true })}
+        </HeaderSecondaryMenuButton>
+        <HeaderSecondaryMenuButton
+          className="mr-5 text-secondary-light hover:text-secondary-active min-w-[32px] min-h-[32px]"
+          ariaLabel="Дополнительные ссылки"
+        >
+          {GridIcon({ 'aria-hidden': true })}
+        </HeaderSecondaryMenuButton>
+      </div>
+    );
+  },
+);

package/src/MobileAppTile.tsx

@@ -27,7 +27,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
                 title={title}
                 width="164"
                 height="164"
-                className="w-[90px] h-[90px] bg-secondary-light"
+                className="w-[90px] h-[90px] min-w-[90px] min-h-[90px] bg-secondary-light"
               />
             </a>
           )}

package/src/ProductBlock.fixture.tsx

@@ -7,8 +7,8 @@ const image: Picture = {
   src: 'money-1.png',
   format: 'webp',
   size: {
-    width: 300,
-    height: 300,
+    width: 280,
+    height: 280,
   },
 };
 
@@ -70,6 +70,7 @@ export default {
       context={context}
       title={'Оплата проходит \nв 180 странах мира'}
       breadcrumbs={[]}
+      description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
       items={[
         'Совершайте любые личные покупки',
         'Используйте корпоративную карту как обычную дебетовую, если вы ИП',

package/src/ProductBlock.tsx

@@ -2,13 +2,35 @@ import { JSX } from '@redneckz/uni-jsx';
 import { ProductBlockInner } from './ProductBlockInner';
 import type { ProductBlockInnerContent } from './ProductBlockInner';
 import type { UniBlockProps } from './types';
+import { Breadcrumb, BreadcrumbProps } from './ui-kit/Breadcrumb';
+import { useLink } from './useLink';
+import { joinList } from './utils/joinList';
 
-export interface ProductBlockProps extends ProductBlockInnerContent, UniBlockProps {}
+export interface ProductBlockProps extends ProductBlockInnerContent, UniBlockProps {
+  breadcrumbs?: BreadcrumbProps[];
+}
 
 export const ProductBlock = JSX<ProductBlockProps>((props) => {
-  const className = props.className;
+  const { context, className, breadcrumbs } = props;
+  const router = context.useRouter();
+  const { handlerDecorator } = context;
   return (
-    <section className={`bg-white p-11 pr-[7.5rem] ${className || ''}`}>
+    <section className={`font-sans bg-white pl-12 pr-[7.5rem] py-10 ${className || ''}`}>
+      {breadcrumbs?.length ? (
+        <div className="text-xs mb-6">
+          {joinList(<span className="text-secondary-text mx-2">/</span>)(
+            breadcrumbs.map((breadcrumb, i) => (
+              <Breadcrumb
+                key={String(i)}
+                {...useLink(
+                  { router, handlerDecorator },
+                  { className: 'text-secondary-text', ...breadcrumb },
+                )}
+              />
+            )),
+          )}
+        </div>
+      ) : null}
       <ProductBlockInner {...props} />
     </section>
   );