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

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="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."

package/src/components/ProductBlock/ProductBlock.tsx

@@ -5,25 +5,36 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { style } from '../../utils/style';
 import type { ProductBlockContent } from './ProductBlockContent';
 import { renderBackwardButton } from './renderBackwardButton';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import type { PreventableEvent } from '../../ui-kit/PreventableEvent';
+import { useRouter } from '../../hooks/useRouter';
 
 export interface ProductBlockProps extends UniBlockProps, ProductBlockContent {}
 
 export const ProductBlock = JSX<ProductBlockProps>(
-  ({ className, padding, backwardButton, ...rest }) => (
-    <BlockWrapper
-      className={style('overflow-hidden flex flex-col gap-3xl box-border', className)}
-      defaultPadding="p-6xl"
-      padding={padding}
-      {...rest}
-    >
-      {backwardButton?.text
-        ? renderBackwardButton(
-            backwardButton,
-            !rest.version || rest.version === 'primary' ? 'primary' : 'white',
-          )
-        : null}
+  ({ className, padding, backwardButton, ...rest }) => {
+    const router = useRouter();
+    const handleClick = useCallback((ev?: PreventableEvent) => {
+      ev?.preventDefault();
+      router.back();
+    }, []);
 
-      <BaseProductTile className="grow h-full" {...rest} />
-    </BlockWrapper>
-  ),
+    return (
+      <BlockWrapper
+        className={style('overflow-hidden flex flex-col gap-3xl box-border', className)}
+        defaultPadding="p-6xl"
+        padding={padding}
+        {...rest}
+      >
+        {backwardButton
+          ? renderBackwardButton(
+              !rest.version || rest.version === 'primary' ? 'primary' : 'white',
+              handleClick,
+            )
+          : null}
+
+        <BaseProductTile className="grow h-full" {...rest} />
+      </BlockWrapper>
+    );
+  },
 );

package/src/components/ProductBlock/ProductBlock.ui.json

@@ -1,13 +1,5 @@
 {
   "content": {
-    "backwardButton": {
-      "icon": {
-        "ui:field": "icon"
-      },
-      "iconRight": {
-        "ui:field": "icon"
-      }
-    },
     "benefits": {
       "items": {
         "__html": {

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,12 +1,11 @@
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { BaseProductTileContent } from '../../ui-kit/BaseProductTile/BaseProductTileContent';
-import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 
 /**
  * @title Продуктовый блок
  */
 export type ProductBlockContent = UniBlockContent &
   BaseProductTileContent & {
-    /** @title Кнопка возврата */
-    backwardButton?: ButtonContent;
+    /** @title Отображать кнопку возврата */
+    backwardButton?: boolean;
   };

package/src/components/ProductBlock/renderBackwardButton.tsx

@@ -1,33 +1,28 @@
 import type { ButtonVersion } from '../../model/ButtonVersion';
 import { Button } from '../../ui-kit/Button/Button';
 import { Img } from '../../ui-kit/Img/Img';
-import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
+import { getRegularButtonClasses } from '../../ui-kit/Button/getRegularButtonClasses';
 
-export function renderBackwardButton(
-  { text, href, target, icon }: ButtonContent,
-  version: ButtonVersion,
-) {
+export function renderBackwardButton(version: ButtonVersion, handleClick: () => void) {
   const iconVersion = version === 'primary' ? 'white' : 'black';
-  const commonProps = { text, href, target, ariaLabel: text };
+  const className = 'w-12 h-12 min-h-12 min-w-12 flex items-center justify-center';
+  const text = 'Вернуться назад';
 
   return (
     <div className="flex items-center gap-s">
-      <Button
-        className="w-12 h-12 min-h-12 min-w-12 flex items-center justify-center"
-        version={version}
-        rounded
-        {...commonProps}
+      <div
+        className={getRegularButtonClasses({ className, version, rounded: true })}
+        onClick={handleClick}
       >
         <Img
           className="w-4 h-4"
           image={{
-            ...icon,
-            icon: icon?.icon || 'ArrowLeftIcon',
-            iconVersion: icon?.iconVersion || iconVersion,
+            icon: 'ArrowLeftIcon',
+            iconVersion: iconVersion,
           }}
         />
-      </Button>
-      <Button version="link" {...commonProps} />
+      </div>
+      <Button version="link" text={text} ariaLabel={text} onClick={handleClick} />
     </div>
   );
 }

package/src/components/StickyBottomMenu/ActiveSubMenu.tsx

@@ -6,12 +6,12 @@ interface ActiveSubMenuProps {
   activeMenuSubItems?: LinkProps[];
   basePath?: string;
 }
-export const ActiveSubMenu = JSX<ActiveSubMenuProps>(({ activeMenuSubItems, basePath }) => {
-  return activeMenuSubItems ? (
+export const ActiveSubMenu = JSX<ActiveSubMenuProps>(({ activeMenuSubItems, basePath }) =>
+  activeMenuSubItems ? (
     <div className="mb-5">
       {activeMenuSubItems.map((_, i) => (
         <ActiveSubMenuItem item={_} key={String(i)} basePath={basePath} />
       ))}
     </div>
-  ) : null;
-});
+  ) : null,
+);

package/src/components/StickyBottomMenu/ActiveSubMenuItem.tsx

@@ -3,6 +3,9 @@ import { projectSettings } from '../../ProjectSettings';
 import { useLink } from '../../hooks/useLink';
 import type { LinkProps } from '../../model/LinkProps';
 import { Img } from '../../ui-kit/Img/Img';
+import { useRouter } from '../../hooks/useRouter';
+import { isHrefActive } from '../Header/isHrefActive';
+import { style } from '../../utils/style';
 
 interface ActiveSubMenuItemProps {
   item: LinkProps;
@@ -15,10 +18,15 @@ export const ActiveSubMenuItem = JSX<ActiveSubMenuItemProps>(({ item, basePath }
 
   const link = useLink({ isRemote: isAnotherPortal, basePath });
   const { href, target, onClick } = link(item);
+  const router = useRouter();
+  const isActive = isHrefActive(router)({ href });
 
   return (
     <a
-      className="py-3 text-h5 font-light flex justify-between cursor-pointer"
+      className={style(
+        isActive ? 'text-primary-main' : 'text-primary-text',
+        `py-3 text-h5 font-light flex justify-between cursor-pointer`,
+      )}
       href={href}
       target={target}
       onClick={onClick}

package/src/components/StickyBottomMenu/RenderItem.tsx

@@ -6,13 +6,14 @@ import { style } from '../../utils/style';
 import type { MenuItemProps } from './StickyBottomMenuProps';
 
 interface RenderItemProps {
+  isActive?: boolean;
   item: MenuItemProps;
   onClick?: () => void;
 }
 
-export const RenderItem = JSX<RenderItemProps>(({ item, onClick }) => {
+export const RenderItem = JSX<RenderItemProps>(({ isActive, item, onClick }) => {
   const isAnotherPortal = projectSettings?.BASE_PATH
-    ? !item.url?.startsWith(projectSettings?.BASE_PATH)
+    ? !item.href?.startsWith(projectSettings?.BASE_PATH)
     : true;
 
   const link = useLink({ isRemote: isAnotherPortal });
@@ -21,15 +22,17 @@ export const RenderItem = JSX<RenderItemProps>(({ item, onClick }) => {
     target,
     onClick: handleClick,
   } = link({
-    href: item.url,
+    href: item.href,
     target: '_self',
   });
+  const isActiveItem = item?.icon?.icon === 'BurgerIcon' ? item.isActive : isActive;
+  const iconVersion = isActiveItem ? 'color' : 'black';
 
   return (
     <a
       className={style(
-        item.isActive ? 'text-primary-main' : 'text-primary-text',
-        `w-10 m-4 flex justify-center items-center flex-col text-[10px] cursor-pointer`,
+        isActiveItem ? 'text-primary-main' : 'text-primary-text',
+        `w-10 m-4 flex justify-center items-center flex-col text-xs cursor-pointer`,
       )}
       onClick={() => (item?.icon?.icon === 'BurgerIcon' && onClick ? onClick() : handleClick())}
       href={href}
@@ -39,7 +42,7 @@ export const RenderItem = JSX<RenderItemProps>(({ item, onClick }) => {
         className="w-6 h-6"
         image={{
           icon: item?.icon?.icon,
-          iconVersion: item?.icon?.iconVersion || 'black',
+          iconVersion: iconVersion,
         }}
       />
       {item.title}

package/src/components/StickyBottomMenu/RenderMenuItems.tsx

@@ -0,0 +1,24 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { MenuItemProps } from './StickyBottomMenuProps';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { RenderItem } from './RenderItem';
+import { useActiveRoute } from '../../hooks/useActiveRoute';
+
+interface RenderMenuItems {
+  menuItems: MenuItemProps[];
+  onClick?: () => void;
+}
+
+export const RenderMenuItems = JSX<RenderMenuItems>(({ menuItems, onClick }) => {
+  const [activeIndex] = useActiveRoute(menuItems);
+
+  return (
+    <BlockWrapper className="sticky bottom-0 left-0 right-0 bg-transparent z-[100]" padding="p-0">
+      <div className="ml-auto container bg-white flex justify-center shadow-blue-gray">
+        {menuItems.map((_, i) => (
+          <RenderItem key={String(i)} isActive={i === activeIndex} item={_} onClick={onClick} />
+        ))}
+      </div>
+    </BlockWrapper>
+  );
+});

package/src/components/StickyBottomMenu/StickyBottomMenu.example.json

@@ -4,28 +4,28 @@
     "menuItems": [
       {
         "title": "Кредиты",
-        "url": "#EmptyWalletIcon",
+        "href": "#EmptyWalletIcon",
         "icon": {
           "icon": "EmptyWalletIcon"
         }
       },
       {
         "title": "Карты",
-        "url": "#CardIcon",
+        "href": "#CardIcon",
         "icon": {
           "icon": "CardIcon"
         }
       },
       {
         "title": "Вклады",
-        "url": "#SafeIcon",
+        "href": "#SafeIcon",
         "icon": {
           "icon": "SafeIcon"
         }
       },
       {
         "title": "Инвестиции",
-        "url": "#ChartIcon",
+        "href": "#ChartIcon",
         "icon": {
           "icon": "ChartIcon"
         }

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

@@ -6,22 +6,22 @@ import type { MenuItem } from './StickyBottomMenuContent';
 const MENU_ITEMS: MenuItem[] = [
   {
     title: 'Кредиты',
-    url: '#EmptyWalletIcon',
+    href: '#EmptyWalletIcon',
     icon: { icon: 'EmptyWalletIcon' },
   },
   {
     title: 'Карты',
-    url: '#CardIcon',
+    href: '#CardIcon',
     icon: { icon: 'CardIcon' },
   },
   {
     title: 'Вклады',
-    url: '#SafeIcon',
+    href: '#SafeIcon',
     icon: { icon: 'SafeIcon' },
   },
   {
     title: 'Инвестиции',
-    url: '#ChartIcon',
+    href: '#ChartIcon',
     icon: { icon: 'ChartIcon' },
   },
 ];

package/src/components/StickyBottomMenu/StickyBottomMenu.fixture.tsx

@@ -6,22 +6,22 @@ import type { MenuItem } from './StickyBottomMenuContent';
 export const MENU_ITEMS: MenuItem[] = [
   {
     title: 'Кредиты',
-    url: '#EmptyWalletIcon',
+    href: '#EmptyWalletIcon',
     icon: { icon: 'EmptyWalletIcon' },
   },
   {
     title: 'Карты',
-    url: '#CardIcon',
+    href: '#CardIcon',
     icon: { icon: 'CardIcon' },
   },
   {
     title: 'Вклады',
-    url: '#SafeIcon',
+    href: '#SafeIcon',
     icon: { icon: 'SafeIcon' },
   },
   {
     title: 'Инвестиции',
-    url: '#ChartIcon',
+    href: '#ChartIcon',
     icon: { icon: 'ChartIcon' },
   },
 ];

package/src/components/StickyBottomMenu/StickyBottomMenu.mobile.tsx

@@ -4,7 +4,7 @@ import { projectSettings } from '../../ProjectSettings';
 import { useSWRResource } from '../../hooks/useSWRResource';
 import { BurgerMenuDialog } from './BurgerMenuDialog';
 import type { MenuItemProps, StickyBottomMenuProps } from './StickyBottomMenuProps';
-import { renderMenuItems } from './renderMenuItems';
+import { RenderMenuItems } from './RenderMenuItems';
 import { useBurgerMenuDialog } from './useBurgerMenuDialog';
 
 export const StickyBottomMenu = JSX<StickyBottomMenuProps>(({ ...rest }) => {
@@ -36,7 +36,7 @@ export const StickyBottomMenu = JSX<StickyBottomMenuProps>(({ ...rest }) => {
 
   return (
     <div className="contents">
-      {renderMenuItems(menuItemsWithButton, toggle)}
+      {<RenderMenuItems menuItems={menuItemsWithButton} onClick={toggle} />}
       {isBurgerMenuDialogOpen ? <BurgerMenuDialog /> : null}
     </div>
   );

package/src/components/StickyBottomMenu/StickyBottomMenuContent.ts

@@ -7,7 +7,7 @@ export interface MenuItem {
   /** @title Название */
   title?: string;
   /** @title Адрес */
-  url?: string;
+  href?: string;
   /** @title Иконка */
   icon?: Picture;
 }

package/src/components/StickyBottomMenu/TopItemMobile.tsx

@@ -9,7 +9,7 @@ interface TopItemProps {
 }
 
 export const TopItemMobile = ({ item, isActive, onClick }: TopItemProps) => (
-  <button type="button" onClick={onClick}>
+  <button type="button" className="relative" onClick={onClick}>
     <span className={style('whitespace-nowrap', isActive ? 'text-primary-main' : '')}>
       {item.text}
     </span>