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

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

@@ -34,7 +34,6 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        showDots={true}
         block={{
           type: 'Carousel',
           blocks: [
@@ -50,7 +49,6 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        showDots={true}
         block={{
           type: 'Carousel',
           blocks: new Array(3).fill({
@@ -92,7 +90,6 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        showDots={true}
         block={{
           type: 'Carousel',
           blocks: new Array(3).fill({
@@ -108,7 +105,6 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        showDots={true}
         block={{
           type: 'Carousel',
           blocks: new Array(3).fill({
@@ -124,7 +120,6 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        showDots={true}
         block={{
           type: 'Carousel',
           blocks: new Array(3).fill({
@@ -140,7 +135,6 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        showDots={true}
         block={{
           type: 'Carousel',
           blocks: new Array(3).fill({
@@ -156,7 +150,6 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        showDots={true}
         block={{
           type: 'Carousel',
           blocks: new Array(3).fill({
@@ -172,7 +165,6 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        showDots={true}
         block={{
           type: 'Carousel',
           blocks: new Array(3).fill({

package/src/components/Carousel/Carousel.tsx

@@ -22,7 +22,6 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
     visibleItemCount = 0,
     noCardBorder,
     isAlignCenter,
-    showDots,
     arrowsPadded = true,
     isGap = true,
     cardSize = 'normal',
@@ -66,15 +65,13 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
             activeIndex={activeIndex}
             itemCount={count}
           />
-          {showDots ? (
-            <SwipeListControlDots
-              containerRef={containerRef}
-              activeIndex={dotsActiveIndex}
-              dotCount={count}
-              listType="horizontal-list"
-            />
-          ) : null}
         </div>
+        <SwipeListControlDots
+          containerRef={containerRef}
+          activeIndex={dotsActiveIndex}
+          dotCount={count}
+          listType="horizontal-list"
+        />
       </BlockWrapper>
     );
   },

package/src/components/Carousel/CarouselContent.ts

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

package/src/components/CarouselLinks/CarouselLinks.tsx

@@ -57,7 +57,6 @@ const renderLinks = (links: LinkProps[], maxLinksCount: number) => {
       version="secondary"
       itemCount={itemCount}
       arrowsPadded={false}
-      showDots={false}
     >
       {new Array(itemCount).fill(null).map((_, groupIndex) => (
         <div

package/src/components/ContentPage/ContentPage.tsx

@@ -49,9 +49,9 @@ export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>(
             {renderBlocksList(slots?.footer, { ...options, slotName: 'footer' })}
           </div>
           {likeControl ? renderLikeControl() : null}
+          <StickyBottomMenu />
+          <DialogManager />
         </section>
-        <StickyBottomMenu />
-        <DialogManager />
         <CookiePopup
           termLink={{ href: '/pd-policy#cookie', target: '_blank' }}
           personalDataPolicyLink={{ href: '/pd-policy', target: '_blank' }}

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

@@ -0,0 +1,203 @@
+import '../../setup-fixture';
+
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import { Blocks } from '../Blocks';
+import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
+import { DepositFiltration } from './DepositFiltration';
+import type { DepositFiltrationContent } from './DepositFiltrationContent';
+
+const CURRENCY_RUB = {
+  currency: ['rub'],
+};
+
+const CURRENCY_USD = {
+  currency: ['usd'],
+};
+
+const CURRENCY_EUR = {
+  currency: ['eur'],
+};
+
+const OPTIONS_ADD = {
+  options: ['add'],
+};
+
+const OPTIONS_WITHDRAWAL = {
+  options: ['withdrawal'],
+};
+
+const OPTIONS_PENSIONER = {
+  options: ['pensioner'],
+};
+
+const OPTIONS_ONLINE = {
+  options: ['online'],
+};
+
+const PERCENTS_IN_THE_END = {
+  percents: ['inTheEnd'],
+};
+
+const PERCENTS_EACH_MONTH = {
+  percents: ['eachMonth'],
+};
+
+const generateBlock = (...presets: any[]) => ({
+  type: 'ProductTile',
+  style: ['col-span-6'],
+  content: { ...presets.reduce((acc, p) => ({ ...acc, ...p })) },
+});
+
+const SCHEMA: DepositFiltrationContent['filtrationSchema'] = {
+  currency: {
+    title: 'Валюта',
+    type: 'array',
+    items: {
+      type: 'string',
+      enum: ['rub', 'usd', 'eur'],
+      enumNames: ['Рубль', 'Доллар', 'Евро'],
+    },
+  },
+  options: {
+    title: 'Опции',
+    type: 'array',
+    items: {
+      type: 'string',
+      enum: ['add', 'withdrawal', 'pensioner', 'online'],
+      enumNames: ['Пополнение', 'Снятие', 'Я пенсионер', 'Открытие онлайн'],
+    },
+  },
+  percents: {
+    title: 'Выплата процентов',
+    type: 'array',
+    items: {
+      type: 'string',
+      enum: ['inTheEnd', 'eachMonth'],
+      enumNames: ['В конце срока', 'Ежемесячно'],
+    },
+  },
+  sum: {
+    title: 'Сумма',
+    type: 'object',
+    properties: {
+      min: {
+        title: 'Минимум',
+        type: 'number',
+      },
+      max: {
+        title: 'Максимум',
+        type: 'number',
+      },
+    },
+  },
+  period: {
+    title: 'Срок',
+    type: 'object',
+    properties: {
+      min: {
+        title: 'Минимум',
+        type: 'number',
+      },
+      max: {
+        title: 'Максимум',
+        type: 'number',
+      },
+    },
+  },
+};
+
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <DepositFiltration
+        className="col-span-12"
+        label="Другие ипотечные программы"
+        filtrationSchema={SCHEMA}
+        topItemsCount={2}
+        sumInput={{ title: 'Сумма' }}
+        periodInput={{ title: 'Срок, месяцев', min: 3, max: 60 }}
+        resetButton={{ text: 'Очистить фильтры', version: 'secondary' }}
+        notFound={{
+          title: 'Нет подходящей программы',
+          description: 'Попробуйте очистить фильтры',
+        }}
+        block={{
+          type: 'DepositFiltration',
+          blocks: [
+            generateBlock(
+              PRODUCT_TILE,
+              CURRENCY_RUB,
+              OPTIONS_WITHDRAWAL,
+              OPTIONS_PENSIONER,
+              PERCENTS_IN_THE_END,
+              {
+                sum: { min: 500, max: 5000 },
+                period: { min: 9, max: 38 },
+              },
+            ),
+            generateBlock(
+              PRODUCT_TILE,
+              CURRENCY_RUB,
+              OPTIONS_ADD,
+              OPTIONS_ONLINE,
+              PERCENTS_EACH_MONTH,
+              {
+                sum: { min: 500, max: 1000 },
+                period: { min: 9, max: 38 },
+              },
+            ),
+            generateBlock(
+              PRODUCT_TILE,
+              CURRENCY_USD,
+              OPTIONS_WITHDRAWAL,
+              OPTIONS_PENSIONER,
+              PERCENTS_EACH_MONTH,
+              {
+                sum: { min: 500, max: 1500 },
+                period: { min: 9, max: 38 },
+              },
+            ),
+            generateBlock(
+              PRODUCT_TILE,
+              CURRENCY_USD,
+              OPTIONS_ADD,
+              OPTIONS_PENSIONER,
+              PERCENTS_EACH_MONTH,
+              {
+                sum: { min: 500, max: 1000 },
+                period: { min: 9, max: 38 },
+              },
+            ),
+            generateBlock(
+              PRODUCT_TILE,
+              CURRENCY_RUB,
+              OPTIONS_ADD,
+              OPTIONS_ONLINE,
+              PERCENTS_IN_THE_END,
+              {
+                sum: { min: 500, max: 1000 },
+                period: { min: 9, max: 38 },
+              },
+            ),
+            generateBlock(
+              PRODUCT_TILE,
+              CURRENCY_EUR,
+              OPTIONS_ADD,
+              OPTIONS_PENSIONER,
+              PERCENTS_EACH_MONTH,
+              {
+                sum: { min: 500, max: 1000 },
+                period: { min: 9, max: 38 },
+              },
+            ),
+          ],
+        }}
+        options={options}
+      />
+    </div>
+  ),
+};

package/src/components/Footer/iconsMap.ts

@@ -37,4 +37,9 @@ export const ICONS_MAP: Array<IconsMapItem> = [
     iconMapped: { icon: 'YoutubeIcon' },
     label: 'Youtube',
   },
+  {
+    origins: ['rutube.com'],
+    iconMapped: { icon: 'RutubeIcon' },
+    label: 'Rutube',
+  },
 ];

package/src/components/Header/HeaderTop.tsx

@@ -34,42 +34,48 @@ export const HeaderTop = JSX<HeaderTopProps>(({ bgColor, logo, internetBankUrl,
   return (
     <div className="flex items-center justify-between w-full">
       {isRootLocation ? (
-        <Logo className="mt-2xs" bgColor={bgColor} logo={logo} />
+        <div>
+          <Logo className="my-2xs" bgColor={bgColor} logo={logo} />
+        </div>
       ) : (
         renderBackButton(onClick)
       )}
       {internetBankUrl ? (
-        <Button
-          href={internetBankUrl}
-          ariaLabel="Войти"
-          target="_blank"
-          className={style(
-            'p-s text-s whitespace-nowrap text-primary-main hover:text-primary-hover',
-            BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default'],
-          )}
-        >
-          Войти
-        </Button>
+        <div>
+          <Button
+            href={internetBankUrl}
+            ariaLabel="Войти"
+            target="_blank"
+            className={style(
+              'p-s text-s whitespace-nowrap text-primary-main hover:text-primary-hover',
+              BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default'],
+            )}
+          >
+            Войти
+          </Button>
+        </div>
       ) : null}
     </div>
   );
 });
 
 const renderBackButton = (onClick: (ev?: PreventableEvent) => void) => (
-  <button
-    className="flex items-center text-l mt-2xs"
-    aria-label="Вернуться назад"
-    onClick={onClick}
-  >
-    <Img
-      className="w-6 h-6"
-      image={{
-        icon: 'ChevronLeftIcon',
-        iconVersion: 'black',
-      }}
-      width="24"
-      height="24"
-    />
-    Вернуться назад
-  </button>
+  <div>
+    <button
+      className="flex items-center text-l my-2xs"
+      aria-label="Вернуться назад"
+      onClick={onClick}
+    >
+      <Img
+        className="w-6 h-6"
+        image={{
+          icon: 'ChevronLeftIcon',
+          iconVersion: 'black',
+        }}
+        width="24"
+        height="24"
+      />
+      Вернуться назад
+    </button>
+  </div>
 );

package/src/components/Header/isHrefActive.ts

@@ -3,4 +3,6 @@ import { isURL, withoutQuery } from '../../utils/url';
 export const isHrefActive =
   (router: { href?: string; pathname: string }) =>
   ({ href }: { href?: string }): boolean =>
-    withoutQuery(isURL(href) ? router.href : router.pathname).startsWith(withoutQuery(href));
+    !href
+      ? false
+      : withoutQuery(isURL(href) ? router.href : router.pathname).startsWith(withoutQuery(href));

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

@@ -0,0 +1,205 @@
+import '../../setup-fixture';
+
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import { Blocks } from '../Blocks';
+import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
+import { MortgageFiltration } from './MortgageFiltration';
+import type {
+  MortgageFiltrationContent,
+  MortgageFiltrationHotFilter,
+} from './MortgageFiltrationContent';
+
+const PROPERTY_APARTMENT = {
+  propertyType: ['apartment'],
+};
+
+const PROPERTY_FLAT = {
+  propertyType: ['flat'],
+};
+
+const PROPERTY_HOUSE = {
+  propertyType: ['house'],
+};
+
+const STAGE_BUILT = {
+  stage: ['built'],
+};
+
+const STAGE_IN_PROGRESS = {
+  stage: ['inProgress'],
+};
+
+const EXTRA_MORTGAGE = {
+  extraOptions: ['preferentialMortgage'],
+};
+
+const EXTRA_CHILDREN = {
+  extraOptions: ['children'],
+};
+
+const CATEGORY_IT = {
+  categories: ['IT'],
+};
+
+const CATEGORY_SALARY = {
+  categories: ['salaryClient'],
+};
+
+const generateBlock = (...presets: any[]) => ({
+  type: 'ProductTile',
+  style: ['col-span-6'],
+  content: { ...presets.reduce((acc, p) => ({ ...acc, ...p })) },
+});
+
+const SCHEMA: MortgageFiltrationContent['filtrationSchema'] = {
+  propertyType: {
+    title: 'Тип недвижимости',
+    type: 'array',
+    items: {
+      type: 'string',
+      enum: ['flat', 'apartment', 'house', 'storeRoom', 'parkingSpace', 'suburban'],
+      enumNames: [
+        'Квартира',
+        'Апартаменты',
+        'Жилой дом',
+        'Кладовая',
+        'Машино-место',
+        'Загородная недвижимость',
+      ],
+    },
+  },
+  stage: {
+    title: 'Этап строительства',
+    type: 'array',
+    items: {
+      type: 'string',
+      enum: ['built', 'inProgress'],
+      enumNames: ['Готовое жильё', 'Строящиеся'],
+    },
+  },
+  categories: {
+    title: 'Категории',
+    type: 'array',
+    items: {
+      type: 'string',
+      enum: ['salaryClient', 'IT', 'youngFamily', 'military', 'medicalWorker', 'scientist'],
+      enumNames: [
+        'Зарплатный клиент',
+        'IT-специалист',
+        'Молодая семья',
+        'Военнослужащий',
+        'Медицинский работник',
+        'Научный сотрудник',
+      ],
+    },
+  },
+  extraOptions: {
+    title: 'Дополнительно',
+    type: 'array',
+    items: {
+      type: 'string',
+      enum: ['preferentialMortgage', 'children', 'refinancing'],
+      enumNames: ['Льготная ипотека', 'Дети', 'Рефинансирование'],
+    },
+  },
+};
+
+const HOT_FILTERS: MortgageFiltrationHotFilter[] = [
+  { text: 'Все программы' },
+  {
+    text: 'Льготные программы',
+    filter: {
+      categories: [],
+      extraOptions: ['preferentialMortgage'],
+      propertyType: [],
+      stage: [],
+    },
+  },
+  {
+    text: 'Строящееся жилье',
+    filter: { stage: ['inProgress'], categories: [], extraOptions: [], propertyType: [] },
+  },
+  {
+    text: 'Готовое жилье',
+    filter: { stage: ['built'], categories: [], extraOptions: [], propertyType: [] },
+  },
+  {
+    text: 'Загородная недвижимость',
+    filter: { propertyType: ['suburban'], categories: [], extraOptions: [], stage: [] },
+  },
+  {
+    text: 'Рефинансирование',
+    filter: { categories: [], extraOptions: ['refinancing'], propertyType: [], stage: [] },
+  },
+];
+
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <MortgageFiltration
+        className="col-span-12"
+        label="Другие ипотечные программы"
+        filtrationSchema={SCHEMA}
+        topItemsCount={2}
+        hotFilters={HOT_FILTERS}
+        resetButton={{ text: 'Очистить фильтры', version: 'secondary' }}
+        notFound={{
+          title: 'Нет подходящей программы',
+          description: 'Попробуйте очистить фильтры',
+        }}
+        block={{
+          type: 'MortgageFiltration',
+          blocks: [
+            generateBlock(
+              PRODUCT_TILE,
+              PROPERTY_APARTMENT,
+              STAGE_IN_PROGRESS,
+              EXTRA_MORTGAGE,
+              CATEGORY_IT,
+            ),
+            generateBlock(
+              PRODUCT_TILE,
+              PROPERTY_APARTMENT,
+              STAGE_BUILT,
+              EXTRA_CHILDREN,
+              CATEGORY_SALARY,
+            ),
+            generateBlock(
+              PRODUCT_TILE,
+              PROPERTY_FLAT,
+              STAGE_IN_PROGRESS,
+              EXTRA_MORTGAGE,
+              CATEGORY_SALARY,
+            ),
+            generateBlock(
+              PRODUCT_TILE,
+              PROPERTY_FLAT,
+              STAGE_BUILT,
+              EXTRA_MORTGAGE,
+              CATEGORY_SALARY,
+            ),
+            generateBlock(
+              PRODUCT_TILE,
+              PROPERTY_APARTMENT,
+              STAGE_BUILT,
+              EXTRA_CHILDREN,
+              CATEGORY_IT,
+            ),
+            generateBlock(
+              PRODUCT_TILE,
+              PROPERTY_HOUSE,
+              STAGE_BUILT,
+              EXTRA_MORTGAGE,
+              CATEGORY_SALARY,
+            ),
+          ],
+        }}
+        options={options}
+      />
+    </div>
+  ),
+};

package/src/components/ProductBlock/ProductBlock.example.json

@@ -3,10 +3,7 @@
     "title": "Продукт",
     "description": "Описание",
     "headlineVersion": "XL",
-    "backwardButton": {
-      "text": "Кнопка возврата",
-      "icon": { "icon": "ArrowLeftIcon" }
-    },
+    "backwardButton": false,
     "image": {
       "format": "webp",
       "size": {

package/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -67,12 +67,6 @@ const items = [
   'Расходы для бизнеса на УСН 15% позволят снизить налоговую базу',
 ];
 
-const backwardButton: ButtonContent = {
-  href: 'https://rshb.ru',
-  text: 'Все кредитные карты',
-  icon: { icon: 'ArrowLeftIcon' },
-};
-
 export const PRODUCT_BLOCK: ProductBlockContent = {
   title: 'Оплата проходит в 180 странах мира',
   headlineVersion: 'L',
@@ -81,7 +75,7 @@ export const PRODUCT_BLOCK: ProductBlockContent = {
 };
 
 const PRODUCT_BLOCK_WITH_BACK_BUTTON: ProductBlockContent = {
-  backwardButton,
+  backwardButton: true,
   headlineVersion: 'L',
   title: 'Потребительский кредит наличными',
   description:
@@ -102,7 +96,7 @@ export default {
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         benefits={benefits}
         benefitsVersion="normal"
-        backwardButton={backwardButton}
+        backwardButton={true}
         buttons={buttons}
         image={image}
       />
@@ -157,7 +151,7 @@ export default {
     <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
-        backwardButton={backwardButton}
+        backwardButton={true}
         headlineVersion="XL"
         title="Потребительский кредит наличными"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."