@redneckz/wildless-cms-uni-blocks 0.14.301 → 0.14.303

package/src/components/Footer/Footer.tsx

@@ -19,39 +19,60 @@ const LEFT_COL_WIDTH = 'w-52';
 export const Footer = UniBlock<FooterProps>(({ className, footer, ...rest }) => {
   const sitemap = rest.options?.page?.sitemap ?? {};
   const { logo } = sitemap;
-  const { documents, relatedEnterprises, contacts, socialMedia, mobileApps } = footer ?? {};
+  const { dataFooter, ...logoProps } = logo ?? {};
+  const {
+    documents,
+    relatedEnterprises,
+    contacts,
+    socialMedia,
+    mobileApps,
+    feedbackButton,
+    isOldVersionButton,
+    license,
+    otherLinks = [],
+  } = footer ?? {};
 
   const handleOnClick = useCallback(() => {
     const [name, oldValue, newValue] = COOKIE_REPLACE;
     mapCookie(name, (value) => value?.replace(oldValue, newValue));
   }, []);
 
+  const linkStyle = '!text-left text-s font-light';
+
   return (
     <BlockWrapper tag="footer" className={className} {...rest}>
-      <div className="flex items-stretch gap-3xl pb-3xl ">
-        <Logo className={LEFT_COL_WIDTH} logo={logo} />
+      <div className="flex items-stretch gap-3xl pb-3xl">
+        <Logo className={LEFT_COL_WIDTH} logo={logoProps} data={dataFooter} />
         <SearchBar className="grow" {...sitemap} />
       </div>
-      <div className="flex items-stretch gap-6xl">
+      <div className="flex items-center @lg:items-stretch gap-6xl flex-col @lg:flex-row">
         <div className={style(LEFT_COL_WIDTH, 'flex flex-col shrink-0 overflow-hidden space-y-xl')}>
           <Contacts items={contacts} />
+          {feedbackButton ? <LinkButton className="w-full mt-xs" {...feedbackButton} /> : null}
           <SocialMedia media={socialMedia}>Соцсети</SocialMedia>
           <SocialMedia media={mobileApps} showButtonText={false}>
             Мобильное приложение
           </SocialMedia>
-          <LinkButton
-            version="link"
-            href="https://old.rshb.ru"
-            className="!text-left text-s font-light"
-            onClick={handleOnClick}
-          >
-            Вернуться на прежнюю версию сайта
-          </LinkButton>
+          {isOldVersionButton ? (
+            <LinkButton
+              version="link"
+              href="https://old.rshb.ru"
+              className={linkStyle}
+              onClick={handleOnClick}
+            >
+              Вернуться на прежнюю версию сайта
+            </LinkButton>
+          ) : null}
+          {otherLinks.map((_, i) => (
+            <LinkButton key={String(i)} className={linkStyle} version="link" {..._}>
+              {_?.text}
+            </LinkButton>
+          ))}
         </div>
-        <Sitemap className="flex-grow" {...sitemap} />
+        <Sitemap className="flex-grow flex-wrap" {...sitemap} />
       </div>
       <HorizontalNavigation className="mt-xl" links={relatedEnterprises} />
-      <TextInformation links={documents} />
+      <TextInformation links={documents} license={license} />
     </BlockWrapper>
   );
 });

package/src/components/Footer/FooterLink.ts

@@ -3,4 +3,5 @@ import { type LinkProps } from '../../model/LinkProps';
 export interface FooterLink {
   className?: string;
   links?: LinkProps[];
+  license?: string;
 }

package/src/components/Footer/HorizontalNavigation.tsx

@@ -8,7 +8,7 @@ export interface HorizontalNavigationProps extends FooterLink, TitleProps {}
 export const HorizontalNavigation = JSX<HorizontalNavigationProps>(({ className = '', links }) => (
   <div className={className}>
     {links?.length ? (
-      <div className="flex justify-between items-center gap-lg py-lg border-solid border-x-0 border-y border-y-main-divider">
+      <div className="flex justify-between items-center gap-lg py-lg border-solid border-x-0 border-y border-y-main-divider flex-col @sm:flex-row">
         {links.map((_, i) => (
           <HorizontalNavigationLink
             key={String(i)}

package/src/components/Footer/SocialMedia.tsx

@@ -18,6 +18,10 @@ export interface SocialMediaProps {
 
 export const SocialMedia = JSX<SocialMediaProps>(
   ({ className = '', media, showButtonText, stretched, version = 'white', children }) => {
+    if (!media?.length) {
+      return null;
+    }
+
     const [hasText, setHasText] = useState<boolean | undefined>();
     const buttons: LinkButtonContent[] | undefined = media?.map((_) => {
       const { href, icon, text } = _;
@@ -40,7 +44,7 @@ export const SocialMedia = JSX<SocialMediaProps>(
     const buttonClassName = style(
       'border border-solid hover:border-transparent group-data-primary:border-main-divider border-main-divider group-data-gray:border-green group/media',
       showButtonText && hasText ? '' : 'basis-auto',
-      stretched ? 'flex-1 justify-center' : '',
+      getStretchedStyle(stretched),
     );
 
     return (
@@ -60,3 +64,5 @@ export const SocialMedia = JSX<SocialMediaProps>(
     );
   },
 );
+
+const getStretchedStyle = (stretched?: boolean) => (stretched ? 'flex-1 justify-center' : '');

package/src/components/Footer/TextInformation.tsx

@@ -4,11 +4,11 @@ import { style } from '../../utils/style';
 import { type FooterLink } from './FooterLink';
 import { TextInformationLink } from './TextInformationLink';
 
-export const TextInformation = JSX<FooterLink>(({ className = '', links }) => (
+export const TextInformation = JSX<FooterLink>(({ className = '', links, license }) => (
   <div className={style('@container', className)}>
     <div className="pt-lg">
       <Text size="text-xs" font="font-light" color="text-secondary-text">
-        {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
+        {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0${license}`}
       </Text>
     </div>
     {links?.length ? (

package/src/components/Header/Header.tsx

@@ -27,6 +27,7 @@ export const Header = UniBlock<HeaderProps>(
   }) => {
     const sitemap = rest.options?.page?.sitemap ?? {};
     const { topItems, logo } = sitemap;
+    const { dataFooter, ...logoProps } = logo ?? {};
     const [, activeTopItem] = useActiveRoute(topItems);
     const { internetBankUrl } = portal || {};
 
@@ -44,18 +45,18 @@ export const Header = UniBlock<HeaderProps>(
       >
         <div className="container">
           <div className="flex items-center">
-            <Logo className="mr-3xl" bgColor={bgColor} logo={customLogo ?? logo} />
+            <Logo
+              className="mr-3xl"
+              bgColor={bgColor}
+              logo={customLogo ?? logoProps}
+              data={dataFooter}
+            />
             {topItems?.filter(isVisibleItem).map((_, i) => (
               <TopItem key={String(i)} active={_ === activeTopItem} data={_.dataHeader} {..._} />
             ))}
             <HeaderSecondaryMenu version={version} className="ml-auto" {...sitemap} />
           </div>
-          <div
-            className={style(
-              'mt-xl h-px bg-main-divider',
-              version === 'transparent' ? 'opacity-30' : '',
-            )}
-          />
+          <div className={style('mt-xl h-px bg-main-divider', getVersionStyle(version))} />
           {activeTopItem?.items?.length ? (
             <HeaderSubMenu
               subItems={activeTopItem.items}
@@ -68,3 +69,5 @@ export const Header = UniBlock<HeaderProps>(
     );
   },
 );
+
+const getVersionStyle = (version: BlockVersion) => (version === 'transparent' ? 'opacity-30' : '');

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { type SitemapData } from '../../data/SitemapData';
+import { getAspectsWithInclude } from '../../hooks/useAspects/aspects/getAspectsWithInclude';
 import { useLocation } from '../../hooks/useLocation';
 import { type BlockVersion } from '../../model/BlockVersion';
 import { type IconVersion } from '../../model/IconVersion';
@@ -10,11 +11,6 @@ import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import { style } from '../../utils/style';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
 
-const MINDBOX_ASPECT = 'mindboxEvent';
-const MINDBOX_CATEGORY = 'header';
-const MINDBOX_EVENT_REGION_CLICK = 'headerRegionClick';
-const MINDBOX_EVENT_SEARCH_CLICK = 'headerSearchClick';
-
 interface HeaderSecondaryMenuContent extends SitemapData {
   version?: BlockVersion;
 }
@@ -42,16 +38,7 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
             flat={true}
             href="#"
             text={currentLocation?.name}
-            data={[
-              {
-                aspectName: MINDBOX_ASPECT,
-                params: {
-                  eventAction: MINDBOX_EVENT_REGION_CLICK,
-                  eventCategory: MINDBOX_CATEGORY,
-                  eventValueText: currentLocation?.name ?? '',
-                },
-              },
-            ]}
+            data={getAspectsWithInclude(rest?.branches?.dataClick, currentLocation?.name ?? '')}
             onClick={openLocationDialog}
           />
         ) : null}
@@ -60,15 +47,7 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           image={{ icon: 'LoupeIcon', iconVersion }}
           ariaLabel="Поиск"
           onClick={openSearchDialog}
-          data={[
-            {
-              aspectName: MINDBOX_ASPECT,
-              params: {
-                eventAction: MINDBOX_EVENT_SEARCH_CLICK,
-                eventCategory: MINDBOX_CATEGORY,
-              },
-            },
-          ]}
+          data={rest?.search?.data}
         />
       </div>
     );

package/src/data/FooterData.ts

@@ -34,5 +34,9 @@ export interface FooterData {
   contacts?: ContactGroup[];
   socialMedia?: LinkButtonContent[];
   mobileApps?: LinkButtonContent[];
+  feedbackButton?: LinkButtonContent;
+  otherLinks?: LinkProps[];
+  isOldVersionButton?: boolean;
+  license?: string;
   horizontalNavigationTitle?: string; // TODO: для мобильной версии
 }

package/src/data/SitemapData.ts

@@ -1,4 +1,4 @@
-import { type AspectsDef } from '../model/AspectsProps';
+import { type AspectsDef, type AspectsProps } from '../model/AspectsProps';
 import { type LinkProps } from '../model/LinkProps';
 import { type LogoType } from '../model/LogoType';
 import { type IconProps, type Picture } from '../model/Picture';
@@ -6,7 +6,6 @@ import { type IconProps, type Picture } from '../model/Picture';
 export interface SitemapLinkProps extends LinkProps {
   displayArea?: string;
   dataHeader?: AspectsDef[];
-  dataFooter?: AspectsDef[];
 }
 
 /**
@@ -47,6 +46,10 @@ export type BranchesSitemap = {
   default?: string;
   /** @title Отображать выбор филиалов */
   visible?: boolean;
+  /** @title Дополнительные атрибуты для слика по региону*/
+  dataClick?: AspectsDef[];
+  /** @title Дополнительные атрибуты для выбора региона*/
+  dataSelect?: AspectsDef[];
 };
 
 export interface SitemapData {
@@ -56,4 +59,5 @@ export interface SitemapData {
   foreignOffices?: ForeignOfficeProps[];
   branches?: BranchesSitemap;
   officesAtms?: LinkProps;
+  search?: AspectsProps & { placeholder: string };
 }

package/src/hooks/useAspects/aspects/getAspectsWithInclude.tsx

@@ -0,0 +1,8 @@
+import { type AspectsDef } from '../../../model/AspectsProps';
+import { type AspectsAttribute } from '../useAspects';
+
+export const getAspectsWithInclude = (data?: AspectsDef[], include?: string): AspectsDef[] =>
+  data?.map(({ aspectName, params }: AspectsAttribute) => ({
+    aspectName,
+    params: aspectName === 'mindboxEvent' ? { ...params, eventValueText: include } : params,
+  })) as AspectsDef[];

package/src/model/LogoType.ts

@@ -1,8 +1,14 @@
 import { type ImageContent } from '../ui-kit/Img/ImgProps';
-import { type AspectsProps } from './AspectsProps';
+import { type AspectsDef } from './AspectsProps';
 import { type TitleProps } from './HeadlineType';
 
 /**
  * @title Логотип
  */
-export type LogoType = ImageContent & TitleProps & AspectsProps;
+export type LogoType = ImageContent &
+  TitleProps & {
+    /** @title Дополнительные атрибуты для шапки */
+    dataHeader?: AspectsDef[];
+    /** @title Дополнительные атрибуты для подвала */
+    dataFooter?: AspectsDef[];
+  };

package/src/ui-kit/LocationDialog/LocationDialog.tsx

@@ -72,11 +72,13 @@ export const LocationDialog = JSX<LocationDialogProps>(({ foreignOffices, branch
               ({ name }) =>
                 name && jaroWinklerDistance(name.toLowerCase())(query.toLowerCase()) >= 0.8,
             )
-            .map(renderRegion(handleChangeLocation))}
+            .map(renderRegion(branches?.dataSelect, handleChangeLocation))}
         </div>
       ) : (
         <div className="columns-1 sm:columns-5">
-          {Array.from(regionsGroupByLetter.entries()).map(renderRegionGroup(handleChangeLocation))}
+          {Array.from(regionsGroupByLetter.entries()).map(
+            renderRegionGroup(handleChangeLocation, branches?.dataSelect),
+          )}
         </div>
       )}
       {renderForeignOffices(foreignOffices)}

package/src/ui-kit/LocationDialog/renderRegion.tsx

@@ -1,34 +1,26 @@
+import { getAspectsWithInclude } from '../../hooks/useAspects/aspects/getAspectsWithInclude';
 import { type Region } from '../../hooks/useRegions';
+import { type AspectsDef } from '../../model/AspectsProps';
 import { LinkWrapper } from '../LinkWrapper/LinkWrapper';
 import { Text } from '../Text/Text';
 
-const MINDBOX_ASPECT = 'mindboxEvent';
-const MINDBOX_CATEGORY = 'header';
-const MINDBOX_EVENT_REGION_NEW_CLICK = 'headerRegionNewSelect';
-
-export const renderRegion = (onChangeLocation?: (region: Region) => void) => (region: Region) =>
-  region.name ? (
-    <LinkWrapper
-      key={String(region.id)}
-      isRemote
-      href={`/branches/${region.slug}`}
-      className="mb-xs sm:mb-2xs hover:text-primary-hover"
-      onClick={() => {
-        onChangeLocation && onChangeLocation(region);
-      }}
-      data={[
-        {
-          aspectName: MINDBOX_ASPECT,
-          params: {
-            eventAction: MINDBOX_EVENT_REGION_NEW_CLICK,
-            eventCategory: MINDBOX_CATEGORY,
-            eventValueText: region.name,
-          },
-        },
-      ]}
-    >
-      <Text size="text-l" font="font-light">
-        {region.name}
-      </Text>
-    </LinkWrapper>
-  ) : null;
+export const renderRegion =
+  (data: AspectsDef[] | undefined, onChangeLocation?: (region: Region) => void) =>
+  (region: Region) => {
+    return region.name ? (
+      <LinkWrapper
+        key={String(region.id)}
+        isRemote
+        href={`/branches/${region.slug}`}
+        className="mb-xs sm:mb-2xs hover:text-primary-hover"
+        onClick={() => {
+          onChangeLocation && onChangeLocation(region);
+        }}
+        data={getAspectsWithInclude(data, region.name)}
+      >
+        <Text size="text-l" font="font-light">
+          {region.name}
+        </Text>
+      </LinkWrapper>
+    ) : null;
+  };

package/src/ui-kit/LocationDialog/renderRegionGroup.tsx

@@ -1,15 +1,16 @@
 import { type Region } from '../../hooks/useRegions';
+import { type AspectsDef } from '../../model/AspectsProps';
 import { Text } from '../Text/Text';
 import { renderRegion } from './renderRegion';
 
 export const renderRegionGroup =
-  (onChangeLocation?: (region: Region) => void) =>
+  (onChangeLocation?: (region: Region) => void, data?: AspectsDef[]) =>
   ([letter, regions]: [string, Region[]]) =>
     (
       <div key={letter} className="break-inside-avoid mb-2xl w-56">
         <div className="mb-s">
           <Text size="text-h6">{letter}</Text>
         </div>
-        {regions.map(renderRegion(onChangeLocation))}
+        {regions.map(renderRegion(data, onChangeLocation))}
       </div>
     );

package/src/ui-kit/Logo/Logo.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type AspectsDef } from '../../model/AspectsProps';
 import { type BgColorVersion } from '../../model/BgColorVersion';
 import { type LogoType } from '../../model/LogoType';
 import { getAspectsAttributes } from '../../utils/dataAttributes';
@@ -16,6 +17,7 @@ export interface LogoProps {
   bgColor?: string;
   showTitle?: boolean;
   logo?: LogoType;
+  data?: AspectsDef[];
 }
 
 const TEXT_COLOR: Record<BgColorVersion, TextColor> = {
@@ -32,6 +34,7 @@ export const Logo = JSX<Partial<LogoProps>>(
     targetBlank,
     bgColor = 'bg-white',
     showTitle = true,
+    data,
   }) => (
     <a
       className={style('inline-flex items-center font-sans no-underline', className)}
@@ -39,7 +42,7 @@ export const Logo = JSX<Partial<LogoProps>>(
       target={targetBlank ? '_blank' : '_self'}
       aria-label={logo?.title ?? 'Россельхозбанк'}
       // eslint-disable-next-line react/jsx-props-no-spreading
-      {...getAspectsAttributes(logo?.data)}
+      {...getAspectsAttributes(data)}
     >
       {renderImage(bgColor, logo?.image, ICON_SIZE)}
       {showTitle

package/src/ui-kit/SearchBar/SearchBar.tsx

@@ -12,7 +12,7 @@ interface SearchBarProps extends SitemapData {
 
 const MIN_QUERY_LEN = 3;
 
-export const SearchBar = JSX<SearchBarProps>(({ className, ...rest }) => {
+export const SearchBar = JSX<SearchBarProps>(({ className, search, ...rest }) => {
   const [value, setValue] = useState('');
 
   const resetQueryOnDialogClose = useCallback(() => setValue(''), []);
@@ -30,7 +30,11 @@ export const SearchBar = JSX<SearchBarProps>(({ className, ...rest }) => {
 
   return (
     <div className={style('relative', className)} role="search">
-      <SearchInput value={value} onChange={handleInitialInputChange} />
+      <SearchInput
+        value={value}
+        placeholder={search?.placeholder}
+        onChange={handleInitialInputChange}
+      />
       <CloseButton className="absolute top-0 right-0 sm:hidden" onClose={resetQueryOnDialogClose} />
     </div>
   );

package/src/ui-kit/Sitemap/Sitemap.tsx

@@ -29,7 +29,7 @@ const renderColumn = (menuItem: TopMenuItemProps & { onClick: () => void }, inde
   const visibleSubItems = items.filter(isVisibleItem);
 
   return (
-    <div key={String(index)} className="flex flex-col gap-s w-1/4">
+    <div key={String(index)} className="flex flex-col gap-s @sm:w-full @md:w-1/4">
       <a
         className="leading-5 text-l text-primary-text hover:text-primary-main no-underline"
         href={href}