@redneckz/wildless-cms-uni-blocks 0.12.13 → 0.13.0

package/src/components/Header/Header.fixture.tsx

@@ -1,10 +1,19 @@
 import '../../setup-fixture';
 
-import type { SitemapData } from '../../services/sitemap/SitemapData';
+import { DialogManager } from '../../ui-kit/DialogManager/DialogManager';
 import { Header } from './Header';
-import sitemap from './sitemap.wcms-resource.json';
 
 export default {
-  default: <Header sitemap={sitemap as SitemapData} />,
-  transparent: <Header bgColor="transparent" sitemap={sitemap as SitemapData} />,
+  default: (
+    <div>
+      <Header />
+      <DialogManager />
+    </div>
+  ),
+  transparent: (
+    <div>
+      <Header bgColor="transparent" />
+      <DialogManager />
+    </div>
+  ),
 };

package/src/components/Header/Header.mobile.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { BlockVersion } from '../../model/BlockVersion';
+import { useSitemap } from '../../services/sitemap/useSitemap';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { HeaderProps } from './HeaderProps';
 import { HeaderTop } from './HeaderTop';
@@ -11,12 +12,12 @@ const BG_COLOR_TO_BLOCK_VERSION: Record<BgColorVersion, BlockVersion> = {
 };
 
 export const Header = JSX<HeaderProps>(
-  ({ bgColor = 'bg-white', version = BG_COLOR_TO_BLOCK_VERSION[bgColor], sitemap, ...rest }) => {
-    const { logo, internetBankUrl } = sitemap || {};
+  ({ bgColor = 'bg-white', version = BG_COLOR_TO_BLOCK_VERSION[bgColor], ...rest }) => {
+    const { logo, internetBankUrl } = useSitemap(rest.options?.page?.fallback);
 
     return (
       <BlockWrapper tag="header" defaultPadding="" version={version} {...rest}>
-        <div className="container px-4 py-2xs box-border">
+        <div className="container px-5 py-2xs box-border">
           <HeaderTop
             bgColor={bgColor}
             logo={logo}

package/src/components/Header/Header.tsx

@@ -2,7 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useRouter } from '../../hooks/useRouter';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { BlockVersion } from '../../model/BlockVersion';
-import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
+import { useSitemap } from '../../services/sitemap/useSitemap';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Logo } from '../../ui-kit/Logo/Logo';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
@@ -10,6 +10,7 @@ import { style } from '../../utils/style';
 import type { HeaderProps } from './HeaderProps';
 import { HeaderSecondaryMenu } from './HeaderSecondaryMenu';
 import { HeaderSubMenu } from './HeaderSubMenu';
+import { isTopItemActive } from './isTopItemActive';
 
 const BG_COLOR_TO_BLOCK_VERSION: Record<BgColorVersion, BlockVersion> = {
   'bg-white': 'primary',
@@ -17,17 +18,12 @@ const BG_COLOR_TO_BLOCK_VERSION: Record<BgColorVersion, BlockVersion> = {
 };
 
 export const Header = JSX<HeaderProps>(
-  ({
-    className,
-    bgColor = 'bg-white',
-    version = BG_COLOR_TO_BLOCK_VERSION[bgColor],
-    sitemap,
-    location,
-    ...rest
-  }) => {
+  ({ className, bgColor = 'bg-white', version = BG_COLOR_TO_BLOCK_VERSION[bgColor], ...rest }) => {
     const router = useRouter();
 
-    const { topItems, logo, officesLink, internetBankUrl } = sitemap || {};
+    const { topItems, logo, officesLink, internetBankUrl, defaultLocation } = useSitemap(
+      rest.options?.page?.fallback,
+    );
     const activeTopItem = topItems?.find(isTopItemActive(router));
 
     return (
@@ -51,8 +47,8 @@ export const Header = JSX<HeaderProps>(
             <HeaderSecondaryMenu
               version={version}
               className="ml-auto"
-              locationName={location?.name}
               officesLink={officesLink}
+              defaultLocation={defaultLocation}
             />
           </div>
           <div

package/src/components/Header/HeaderProps.ts

@@ -1,9 +1,4 @@
-import { RegionData } from '../../hooks/useLocation';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import type { SitemapData } from '../../services/sitemap/SitemapData';
 import type { HeaderContent } from './HeaderContent';
 
-export interface HeaderProps extends HeaderContent, UniBlockProps {
-  sitemap?: SitemapData;
-  location?: RegionData;
-}
+export interface HeaderProps extends HeaderContent, UniBlockProps {}

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -1,18 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useLocation } from '../../hooks/useLocation';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { IconVersion } from '../../model/IconVersion';
-import { useDialog } from '../../ui-kit/Dialog/useDialog';
-import { LOCATION_DIALOG_ID } from '../../ui-kit/LocationDialog/LocationDialog';
-import { SEARCH_DIALOG_ID } from '../../ui-kit/SearchDialog/SearchDialog';
+import { useLocationDialog } from '../../ui-kit/LocationDialog/useLocationDialog';
+import { useSearchDialog } from '../../ui-kit/SearchDialog/useSearchDialog';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import { style } from '../../utils/style';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
 
 interface HeaderSecondaryMenuContent {
   version?: BlockVersion;
-  locationName?: string;
   officesLink?: string;
+  defaultLocation?: string;
 }
 
 export interface HeaderSecondaryMenuProps extends HeaderSecondaryMenuContent {
@@ -20,23 +20,25 @@ export interface HeaderSecondaryMenuProps extends HeaderSecondaryMenuContent {
 }
 
 export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
-  ({ className, version, locationName: location, officesLink }) => {
+  ({ className, version, officesLink, defaultLocation }) => {
     const iconVersion: IconVersion = version === 'transparent' ? 'white' : 'black';
 
-    const { open: openLocationModal } = useDialog(LOCATION_DIALOG_ID);
-    const handleOpenLocationModal = useCallback(() => openLocationModal(), []);
+    const [currentLocation] = useLocation(defaultLocation);
 
-    const { open: openSearchModal } = useDialog(SEARCH_DIALOG_ID);
-    const handleOpenSearchModal = useCallback(() => openSearchModal(), []);
+    const searchDialog = useSearchDialog();
+    const openSearchDialog = useCallback(() => searchDialog.open(), []);
+
+    const locationDialog = useLocationDialog();
+    const openLocationDialog = useCallback(() => locationDialog.open(), []);
 
     return (
       <div className={style('flex items-center gap-5', className)}>
-        <TopItem flat={true} href="#" text={location} onClick={handleOpenLocationModal} />
+        <TopItem flat={true} href="#" text={currentLocation?.name} onClick={openLocationDialog} />
         {officesLink ? <TopItem flat={true} href={officesLink} text="Офисы и банкоматы" /> : null}
         <HeaderSecondaryMenuButton
           image={{ icon: 'LoupeIcon', iconVersion }}
           ariaLabel="Поиск"
-          onClick={handleOpenSearchModal}
+          onClick={openSearchDialog}
         />
       </div>
     );

package/src/components/Header/HeaderSubMenu.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useRouter } from '../../hooks/useRouter';
-import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
+import { findActiveSubItem } from './findActiveSubItem';
 import { style } from '../../utils/style';
 import { DropdownMenu } from './DropdownMenu';
 import { HeaderSubMenuItem } from './HeaderSubMenuItem';

package/src/components/Header/HeaderTop.tsx

@@ -8,6 +8,8 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import { Img } from '../../ui-kit/Img/Img';
 import { useRouter } from '../../hooks/useRouter';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { projectSettings } from '../../ProjectSettings';
+import type { PreventableEvent } from '../../ui-kit/PreventableEvent';
 
 export interface HeaderTopProps {
   bgColor?: BgColorVersion;
@@ -23,26 +25,18 @@ const BUTTON_STYLE = {
 
 export const HeaderTop = JSX<HeaderTopProps>(({ bgColor, logo, internetBankUrl, version }) => {
   const router = useRouter();
-  const isRootLocation = router.pathname === '/';
-  const onClick = useCallback(() => {
+  const isRootLocation = projectSettings.BASE_PATH?.startsWith(router.pathname);
+  const onClick = useCallback((e) => {
+    e.preventDefault();
     router.back();
   }, []);
 
   return (
     <div className="flex items-center justify-between w-full">
       {isRootLocation ? (
-        <Logo bgColor={bgColor} logo={logo} />
+        <Logo className="mt-2xs" bgColor={bgColor} logo={logo} />
       ) : (
-        <Button className="flex items-center text-l" ariaLabel="Вернуться назад" onClick={onClick}>
-          <Img
-            className="w-6 h-6"
-            image={{
-              icon: 'ChevronLeft',
-              iconVersion: 'black',
-            }}
-          />
-          Вернуться назад
-        </Button>
+        renderBackButton(onClick)
       )}
       {internetBankUrl ? (
         <Button
@@ -50,7 +44,7 @@ export const HeaderTop = JSX<HeaderTopProps>(({ bgColor, logo, internetBankUrl,
           ariaLabel="Войти"
           target="_blank"
           className={style(
-            'p-s my-2xs text-s whitespace-nowrap text-primary-main hover:text-primary-hover',
+            'p-s text-s whitespace-nowrap text-primary-main hover:text-primary-hover',
             BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default'],
           )}
         >
@@ -60,3 +54,22 @@ export const HeaderTop = JSX<HeaderTopProps>(({ bgColor, logo, internetBankUrl,
     </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>
+);

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.fixture.tsx

@@ -1,9 +1,9 @@
 import '../../setup-fixture';
 
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import { InsuranceAmountBlock } from './InsuranceAmountBlock';
 
-const buttonPrimary: ButtonWithIconProps = {
+const buttonPrimary: ButtonContent = {
   href: '/insurance',
   text: 'Выбрать программу',
   target: '_blank',

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockContent.ts

@@ -1,7 +1,7 @@
 import type { TitleProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { IconProps } from '../../model/Picture';
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 
 /**
  * @title Кнопка выбора программы
@@ -31,5 +31,5 @@ export type InsuranceAmountBlockContent = UniBlockContent &
     /** @title Список вкладок */
     insuranceTabs?: InsuranceAmountBlockTab[];
     /** @title Кнопка */
-    button?: ButtonProps;
+    button?: ButtonContent;
   };

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -2,15 +2,15 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useCarouselControls } from '../../hooks/useCarouselControls';
 import { Button } from '../../ui-kit/Button/Button';
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { Img } from '../../ui-kit/Img/Img';
 import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
 import type { CardItem, InsuranceAmountBlockTab } from './InsuranceAmountBlockContent';
+import type { ButtonCommonContent } from '../../ui-kit/Button/ButtonContent';
 
 export interface InsuranceAmountBlockInnerProps extends InsuranceAmountBlockTab {
   className?: string;
-  button?: ButtonProps;
+  button?: ButtonCommonContent;
 }
 
 type InsuranceGalleryProps = {

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

@@ -20,24 +20,13 @@ const listItems = [
   'Копите бонусные баллы',
 ];
 
-const button1: ButtonProps = {
+const buttonStore: ButtonProps = {
   text: 'App Store',
   href: 'apps.apple.com',
   version: 'primary',
 };
 
-const button2: ButtonProps = {
-  text: 'Google Play',
-  href: 'play.google.com',
-  version: 'secondary',
-};
-const button3: ButtonProps = {
-  text: 'Google Play',
-  href: 'play.google.com',
-  version: 'secondary',
-};
-
-const button4: ButtonProps = {
+const buttonPlay: ButtonProps = {
   text: 'Google Play',
   href: 'play.google.com',
   version: 'secondary',
@@ -54,10 +43,10 @@ export default {
         title="Мобильное приложение!"
         buttons={[
           {
-            ...button1,
+            ...buttonStore,
             version: 'secondary',
           },
-          button2,
+          buttonPlay,
         ]}
       />
     </div>
@@ -72,12 +61,12 @@ export default {
         title="Мобильное приложение!"
         buttons={[
           {
-            ...button1,
+            ...buttonStore,
             version: 'secondary',
           },
-          button2,
-          button3,
-          button4,
+          buttonPlay,
+          buttonPlay,
+          buttonPlay,
         ]}
       />
     </div>

package/src/components/MobileAppTile/MobileAppTile.fixture.tsx

@@ -1,8 +1,8 @@
 import '../../setup-fixture';
 
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import { MobileAppTile } from './MobileAppTile';
 import type { Picture } from '../../model/Picture';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
+import { MobileAppTile } from './MobileAppTile';
 
 const image: Picture = {
   src: 'icon-phone.png',
@@ -30,7 +30,7 @@ const listItems = [
   'Копите бонусные баллы',
 ];
 
-const button1: ButtonWithIconProps = {
+const buttonStore: ButtonContent = {
   aboveText: 'Загрузите в',
   text: 'App Store',
   icon: { icon: 'AppleIcon', iconVersion: 'white' },
@@ -38,7 +38,7 @@ const button1: ButtonWithIconProps = {
   version: 'primary',
 };
 
-const button2: ButtonWithIconProps = {
+const buttonPlay: ButtonContent = {
   aboveText: 'Доступно в',
   text: 'Google Play',
   icon: { icon: 'PlayMarketIcon' },
@@ -60,14 +60,12 @@ export default {
         items={listItems}
         buttons={[
           {
-            ...button1,
+            ...buttonStore,
             icon: { icon: 'AppleIcon' },
             version: 'secondary',
           },
-          button2,
-          button2,
-          button1,
-          button2,
+          buttonPlay,
+          buttonPlay,
         ]}
       />
     </div>
@@ -80,7 +78,7 @@ export default {
         qr={qr}
         headingType="h3"
         items={listItems}
-        buttons={[button1, button2]}
+        buttons={[buttonStore, buttonPlay]}
       />
     </div>
   ),
@@ -92,13 +90,13 @@ export default {
         qr={qr}
         headingType="h3"
         items={listItems}
-        buttons={[button1, button2]}
+        buttons={[buttonStore, buttonPlay]}
       />
     </div>
   ),
   'without-image-and-list': (
     <div className="container grid grid-cols-12">
-      <MobileAppTile className="col-span-8" qr={qr} buttons={[button1, button2]} />
+      <MobileAppTile className="col-span-8" qr={qr} buttons={[buttonStore, buttonPlay]} />
     </div>
   ),
 };

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -50,6 +50,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
               />
             ) : null
           }
+          rightImage={image?.src ? <Img className="hidden lg:block" image={image} /> : null}
           buttons={renderButtonsSection(buttons, { isVertical: buttons.length > 4 })}
         >
           {renderDescription(description)}
@@ -60,7 +61,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
               </div>
             ) : null}
             {renderList(items)}
-            {image?.src ? <Img image={image} /> : null}
+            {image?.src ? <Img className="lg:hidden" image={image} /> : null}
           </div>
         </BaseTile>
       </BlockWrapper>

package/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -2,10 +2,10 @@ import type { AlignType } from '../../model/AlignType';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
-import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
+import type { ButtonsSectionContent } from '../../ui-kit/Button/ButtonsSectionContent';
 
 /**
  * @title Мобильное приложение
@@ -13,7 +13,7 @@ import type { ListContent } from '../../ui-kit/List/ListContent';
 export type MobileAppTileContent = UniBlockContent &
   HeadlineCommonProps &
   HeadingCommonProps &
-  ButtonContent &
+  ButtonsSectionContent &
   ListContent &
   ImageContent & {
     /** @title Выравнивание заголовка */

package/src/components/MortgageFiltration/HotFilterRecord.ts

@@ -0,0 +1,14 @@
+import { arrCmp, combineBoolCmps, objCmp, scalarCmp } from '../../utils/BoolComparator';
+
+export type HotFilterRecord = {
+  /** @title Тип недвижимости */
+  propertyType?: string[];
+  /** @title Этап строительства */
+  stage?: string[];
+  /** @title Категории */
+  categories?: string[];
+  /** @title Дополнительно */
+  extraOptions?: string[];
+};
+
+export const hotFilterRecordCmp = objCmp<string[]>(combineBoolCmps(scalarCmp, arrCmp()));

package/src/components/MortgageFiltration/MortgageFiltration.example.json

@@ -6,8 +6,15 @@
         "type": "array",
         "items": {
           "type": "string",
-          "enum": ["flat", "apartment", "house", "storeRoom", "parkingSpace"],
-          "enumNames": ["Квартира", "Апартаменты", "Жилой дом", "Кладовая", "Машино-место"]
+          "enum": ["flat", "apartment", "house", "storeRoom", "parkingSpace", "suburban"],
+          "enumNames": [
+            "Квартира",
+            "Апартаменты",
+            "Жилой дом",
+            "Кладовая",
+            "Машино-место",
+            "Загородная недвижимость"
+          ]
         }
       },
       "stage": {
@@ -40,11 +47,54 @@
         "type": "array",
         "items": {
           "type": "string",
-          "enum": ["preferentialMortgage", "children"],
-          "enumNames": ["Льготная ипотека", "Дети"]
+          "enum": ["preferentialMortgage", "children", "refinancing"],
+          "enumNames": ["Льготная ипотека", "Дети", "Рефинансирование"]
         }
       }
     },
+    "hotFilters": [
+      { "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": []
+        }
+      }
+    ],
     "resetButton": {
       "text": "Очистить фильтры",
       "version": "secondary"