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

package/mobile/src/components/Blocks.ts

@@ -41,6 +41,8 @@ import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
+import { DepositFiltration } from './DepositFiltration/DepositFiltration';
+import { MortgageFiltration } from './MortgageFiltration/MortgageFiltration';
 
 export const Blocks: BlocksRegistry = {
   ApplicationForm,
@@ -60,6 +62,8 @@ export const Blocks: BlocksRegistry = {
   CarouselRecommendationCard,
   CarouselTariffsCard,
   ComparisonTable,
+  DepositFiltration,
+  MortgageFiltration,
   ErrorBlock,
   ExchangeRateTile,
   Footer,

package/mobile/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/mobile/src/components/Carousel/CarouselContent.ts

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

package/mobile/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/mobile/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/mobile/src/components/ContentPage/normalizeBlock.ts

@@ -1,19 +1,12 @@
 import type { BlocksRegistry } from '../../model/BlocksRegistry';
 import type { BlockDef, Slot } from '../../model/ContentPageDef';
 import { mapSlot } from './mapSlot';
+import { toMobileBlock } from './toMobileBlock';
 
 export function normalizeBlock<S extends Slot>(block?: S, blocksRegistry?: BlocksRegistry): S {
-  const { mobile, ...desktop } = (block || {}) as BlockDef;
-  const result = mobile
-    ? Object.assign(
-        {},
-        desktop,
-        mobile.style ? { style: mobile.style } : {},
-        mobile.content ? { content: mobile.content } : {},
-      )
-    : block;
+  const { mobile } = (block || {}) as BlockDef;
 
-  return mapSlot(filterBlocks(blocksRegistry))(result || {}) as S;
+  return mapSlot(filterBlocks(blocksRegistry))((mobile ? toMobileBlock(block) : block) || {}) as S;
 }
 
 const filterBlocks =

package/mobile/src/components/ContentPage/toMobileBlock.ts

@@ -0,0 +1,11 @@
+import type { BlockDef } from '../../model/ContentPageDef';
+
+export function toMobileBlock(block: BlockDef = {}): BlockDef {
+  const { mobile, ...desktop } = block;
+
+  return {
+    ...desktop,
+    ...(mobile?.style ? { style: mobile.style } : {}),
+    ...(mobile?.content ? { content: mobile.content } : {}),
+  };
+}

package/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/src/components/ProductBlock/ProductBlock.ui.json

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

package/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/src/components/StickyBottomMenu/StickyBottomMenu.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/mobile/src/components/StickyBottomMenu/StickyBottomMenuContent.ts

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

package/mobile/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>