@redneckz/wildless-cms-uni-blocks 0.7.6 → 0.7.8

package/src/components/Header/DropdownMenu.tsx

@@ -3,6 +3,7 @@ import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
 import type { LinkProps } from '../../model/LinkProps';
+import { style } from '../../utils/style';
 
 interface DropdownMenuProps {
   className?: string;
@@ -21,7 +22,7 @@ export const DropdownMenu = JSX<DropdownMenuProps>(({ className = '', items, act
 
   return (
     <div
-      className={`${visible ? 'bg-white rounded-md shadow-blue-gray' : ''} ${className}`}
+      className={style(visible ? 'bg-white rounded-md shadow-blue-gray' : '', className)}
       ref={ref}
     >
       <button
@@ -39,15 +40,16 @@ export const DropdownMenu = JSX<DropdownMenuProps>(({ className = '', items, act
           ))}
       </button>
       <div
-        className={`flex flex-col rounded-md bg-white p-6 pb-2 ${visible ? '' : 'hidden'}`}
+        className={style('flex flex-col rounded-md bg-white p-6 pb-2', visible ? '' : 'hidden')}
         aria-hidden={!visible}
       >
         {items?.map((item, i) => (
           <a
             key={item.href || String(i)}
-            className={`text-l-light pb-4 hover:text-primary-main ${
-              item === activeItem ? 'text-primary-main' : ''
-            }`}
+            className={style(
+              'text-l-light pb-4 hover:text-primary-main',
+              item === activeItem ? 'text-primary-main' : '',
+            )}
             {...link(item)}
           >
             {item.text}

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

@@ -2,7 +2,7 @@ import '../../setup-fixture';
 import { Header } from './Header';
 
 export default {
-  default: <Header />,
-  transparent: <Header bgColor="transparent" />,
-  'no submenu': <Header showSubMenu={false} />,
+  default: <Header chat="personal" />,
+  transparent: <Header bgColor="transparent" chat="personal" />,
+  'no submenu': <Header showSubMenu={false} chat="personal" />,
 };

package/src/components/Header/Header.tsx

@@ -10,6 +10,7 @@ import { useSWRResource } from '../../services/sitemap/useSWRResource';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Logo } from '../../ui-kit/Logo/Logo';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
+import { style } from '../../utils/style';
 import type { HeaderContent } from './HeaderContent';
 import { HeaderSecondaryMenu } from './HeaderSecondaryMenu';
 import { HeaderSubMenu } from './HeaderSubMenu';
@@ -24,9 +25,10 @@ const BG_COLOR_TO_BLOCK_VERSION: Record<BgColorVersion, BlockVersion> = {
 export const Header = JSX<HeaderProps>(
   ({
     bgColor = 'bg-white',
-    className = '',
+    className,
     showSubMenu = true,
     version = BG_COLOR_TO_BLOCK_VERSION[bgColor],
+    chat,
     ...rest
   }) => {
     const router = useRouter();
@@ -46,9 +48,11 @@ export const Header = JSX<HeaderProps>(
     return (
       <BlockWrapper
         tag="header"
-        className={`pt-6 px-20 ${className} ${
-          showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5'
-        }`}
+        className={style(
+          'pt-6 px-20',
+          showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5',
+          className,
+        )}
         version={version}
         {...rest}
       >
@@ -62,10 +66,14 @@ export const Header = JSX<HeaderProps>(
               foreignOffices={foreignOffices}
               defaultLocation={defaultLocation}
               officesLink={officesLink}
+              chat={chat}
             />
           </div>
           <div
-            className={`mt-6 h-px bg-main-divider${version === 'transparent' ? ' opacity-30' : ''}`}
+            className={style(
+              'mt-6 h-px bg-main-divider',
+              version === 'transparent' ? 'opacity-30' : '',
+            )}
           />
           {showSubMenu && activeTopItem?.items?.length ? (
             <HeaderSubMenu subItems={activeTopItem.items} />

package/src/components/Header/HeaderChatBotButton.tsx

@@ -0,0 +1,45 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useBool } from '../../hooks/useBool';
+import type { IconVersion } from '../../model/IconVersion';
+import { style } from '../../utils/style';
+import type { ChatBot as ChatBotWithEmptyOption } from './HeaderContent';
+import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
+import { useChatBot } from './useChatBot';
+
+export type ChatBot = Exclude<ChatBotWithEmptyOption, ''>;
+
+interface HeaderChatBotButtonProps {
+  className?: string;
+  iconVersion?: IconVersion;
+  chat?: ChatBot;
+  onClick?: () => void;
+}
+
+const CHAT_BUTTON_EXTERNAL_NAME = 'text-page__btn-chat';
+
+export const HeaderChatBotButton = JSX<HeaderChatBotButtonProps>((props) => {
+  const [loadRequested, { setTrue: load }] = useBool();
+
+  return loadRequested ? (
+    <HeaderChatBotButtonWithLoader {...props} />
+  ) : (
+    renderChatBotButton({ ...props, onClick: load })
+  );
+});
+
+const HeaderChatBotButtonWithLoader = JSX<HeaderChatBotButtonProps>(
+  ({ chat = 'personal', ...rest }) => {
+    useChatBot(chat);
+
+    return renderChatBotButton(rest);
+  },
+);
+
+const renderChatBotButton = ({ className, iconVersion, onClick }: HeaderChatBotButtonProps) => (
+  <HeaderSecondaryMenuButton
+    className={style(CHAT_BUTTON_EXTERNAL_NAME, className)}
+    image={{ icon: 'HeadphonesIcon', iconVersion }}
+    ariaLabel="Чат"
+    onClick={onClick}
+  />
+);

package/src/components/Header/HeaderContent.ts

@@ -7,6 +7,12 @@ import type { IconProps, Picture } from '../../model/Picture';
  */
 export type SubMenuItem = LinkProps & IconProps;
 
+/**
+ * @title Чат-бот
+ * @enumNames ["", "Для физических лиц", "Для юридических лиц"]
+ */
+export type ChatBot = '' | 'personal' | 'business';
+
 /**
  * @title Ссылка дополнительного меню
  * @required ["text", "href"]
@@ -28,11 +34,11 @@ export interface Logo {
 
 /**
  * @title Шапка (для мобильных горизонтальная прокрутка shift+mouseScroll)
- * @required ["defaultLocation", "topItems"]
  */
 export interface HeaderContent {
   /** @hidden */
   showSubMenu?: boolean;
   /** @hidden */
   bgColor?: BgColorVersion;
+  chat?: ChatBot;
 }

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -1,12 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '../../hooks/useBool';
 import { useLocation } from '../../hooks/useLocation';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { IconVersion } from '../../model/IconVersion';
 import type { ForeignOffice } from '../../services/sitemap/SitemapProps';
-import { Img } from '../../ui-kit/Img/Img';
 import { Location } from '../../ui-kit/Location/Location';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
+import { style } from '../../utils/style';
+import { HeaderChatBotButton } from './HeaderChatBotButton';
+import type { ChatBot } from './HeaderContent';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
 
 interface HeaderSecondaryMenuContent {
@@ -14,6 +16,7 @@ interface HeaderSecondaryMenuContent {
   defaultLocation?: string;
   officesLink?: string;
   foreignOffices?: ForeignOffice[];
+  chat?: ChatBot;
 }
 
 export interface HeaderSecondaryMenuProps extends HeaderSecondaryMenuContent {
@@ -21,22 +24,16 @@ export interface HeaderSecondaryMenuProps extends HeaderSecondaryMenuContent {
 }
 
 export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
-  ({ version, className, officesLink, defaultLocation = 'Москва', foreignOffices }) => {
-    const [isShowLocationModal, setShowLocationModal] = useState<boolean>(false);
+  ({ version, className, officesLink, defaultLocation = 'Москва', foreignOffices, chat }) => {
+    const [isShowLocationModal, { setTrue: showLocationModal, setFalse: hideLocationModal }] =
+      useBool();
 
     const [location, onChangeLocation] = useLocation(defaultLocation);
 
-    const showLocationModal = useCallback(() => {
-      setShowLocationModal(true);
-    }, []);
-    const hideLocationModal = useCallback(() => {
-      setShowLocationModal(false);
-    }, []);
-
     const iconVersion: IconVersion = version === 'transparent' ? 'white' : 'black';
 
     return (
-      <div className={`flex items-center ${className || ''}`}>
+      <div className={style('flex items-center', className)}>
         <TopItem
           className="mr-5"
           flat={true}
@@ -54,28 +51,21 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
             ariaLabel="Список всех доступных офисов и банкоматов"
           />
         ) : null}
+        {chat ? (
+          <HeaderChatBotButton className="mr-5" iconVersion={iconVersion} chat={chat} />
+        ) : null}
         <HeaderSecondaryMenuButton
-          className="mr-5 group/btn text-primary-text hover:text-primary-main group-data-transparent:text-white"
+          className="mr-5"
+          image={{ icon: 'LoupeIcon', iconVersion }}
           ariaLabel="Поиск по сайту"
-        >
-          <Img
-            image={{ icon: 'LoupeIcon', iconVersion }}
-            className="h-full pointer-events-none"
-            imageClassName="group-hover/btn:text-primary-hover group-hover/btn:invert-0 pointer-events-none"
-            asSVG
-          />
-        </HeaderSecondaryMenuButton>
+          disabled={true}
+        />
         <HeaderSecondaryMenuButton
-          className="group/btn min-w-8 min-h-8 text-secondary-light hover:text-secondary-hover group-data-transparent:text-white"
+          image={{ icon: 'GridIcon', iconVersion }}
           ariaLabel="Дополнительные ссылки"
-        >
-          <Img
-            image={{ icon: 'GridIcon', iconVersion }}
-            className="h-full bg-main-divider/20 rounded-full pointer-events-none"
-            imageClassName="group-hover/btn:text-primary-hover group-hover/btn:invert-0"
-            asSVG
-          />
-        </HeaderSecondaryMenuButton>
+          isRounded={true}
+          disabled={true}
+        />
         {isShowLocationModal ? (
           <Location
             currentLocation={location}

package/src/components/Header/HeaderSecondaryMenuButton.tsx

@@ -1,19 +1,38 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { Img } from '../../ui-kit/Img/Img';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import { style } from '../../utils/style';
 
-interface HeaderSecondaryMenuButtonProps {
+export interface HeaderSecondaryMenuButtonProps extends ImageContent {
   className?: string;
+  isRounded?: boolean;
+  disabled?: boolean;
   ariaLabel?: string;
+  onClick?: (ev?: { preventDefault: () => void }) => void;
 }
 
 export const HeaderSecondaryMenuButton = JSX<HeaderSecondaryMenuButtonProps>(
-  ({ className = '', children, ariaLabel }) => (
+  ({ className, isRounded, disabled, ariaLabel, image, onClick }) => (
     <button
+      className={style(
+        'group/btn border-0 p-0 flex items-center bg-inherit',
+        isRounded
+          ? 'w-8 h-8 text-secondary-light hover:text-secondary-hove'
+          : 'w-6 h-6 text-primary-text hover:text-primary-main',
+        'group-data-transparent:text-white',
+        className,
+      )}
       type="button"
-      className={`border-0 p-0 w-6 h-6 flex items-center bg-inherit cursor-pointer ${className}`}
-      disabled={true}
+      disabled={disabled}
       aria-label={ariaLabel}
+      onClick={onClick}
     >
-      {children}
+      <Img
+        image={image}
+        className={style('h-full', isRounded ? 'bg-main-divider/20 rounded-full' : '')}
+        imageClassName="group-hover/btn:text-primary-hover group-hover/btn:invert-0"
+        asSVG
+      />
     </button>
   ),
 );

package/src/components/Header/useChatBot.ts

@@ -0,0 +1,16 @@
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useExternalNS } from '../../hooks/useExternalNS';
+import { ChatBot } from './HeaderChatBotButton';
+
+const CHATBOT_NAMESPACE = 'chatbot';
+
+const CHATBOT_URL: Record<ChatBot, string> = {
+  personal: '//chat.mes.rshb.ru/assets/js/webchat_rshb',
+  business: '', //TODO: add url business chat
+};
+
+export const useChatBot = (chat: ChatBot) => {
+  useEffect(() => globalThis.localStorage?.setItem('webchat-keep-open', String(Date.now())), []);
+
+  return useExternalNS(CHATBOT_NAMESPACE, CHATBOT_URL[chat]);
+};

package/src/components/PictureText/PictureText.fixture.tsx

@@ -29,6 +29,14 @@ const imageInsurance: Picture = {
   ],
 };
 
+const imageMonitor: Picture = {
+  src: 'monitor.png',
+  format: 'webp',
+  alt: 'Управление несколькими счетами',
+  size: {
+    width: 420,
+  },
+};
 export const PICTURE_TEXT: PictureTextContent = {
   title: 'Обменивайте бонусы на путешествия',
   description:
@@ -36,11 +44,13 @@ export const PICTURE_TEXT: PictureTextContent = {
     'бонусные баллы на авиа и ж/д билеты, бронирование отелей и прокат автомобилей.',
   benefits: [
     {
+      type: 'default',
       label: 'Кредит по одному документу',
       description: 'До 300 тыс ₽ по упрощённой процедуре получения кредита',
       icon: { icon: 'DocumentTextIcon' },
     },
     {
+      type: 'default',
       label: 'Кредит на общих условиях',
       description: 'До 5 млн ₽ на общих условиях получения кредита',
       icon: { icon: 'DocumentTextIcon' },
@@ -54,19 +64,23 @@ export const INSURANCE_TEXT: PictureTextContent = {
   description: 'Покрываемые риски программы «Защита вас и ваших близких»',
   benefits: [
     {
+      type: 'default',
       label: 'Телесное повреждение',
       icon: { icon: 'ShieldTickIcon' },
     },
     {
+      type: 'default',
       label: 'Госпитализация застрахованного',
       description: 'Описание',
       icon: { icon: 'ShieldTickIcon' },
     },
     {
+      type: 'default',
       label: 'Сокращение численности работников организации и другой текст для теста длинны текста',
       icon: { icon: 'ShieldTickIcon' },
     },
     {
+      type: 'default',
       label: 'Смерть застрахованного',
       icon: { icon: 'ShieldTickIcon' },
     },
@@ -75,6 +89,24 @@ export const INSURANCE_TEXT: PictureTextContent = {
   sum: 500000,
 };
 
+export const BENEFITS_HTML_TEXT: PictureTextContent = {
+  title: '',
+  benefits: [
+    {
+      type: 'rte',
+      __html:
+        '<p class="h3">Управление несколькими счетами</p><p>Контролируйте баланс, пересылайте реквизиты  контрагентам и установите любимый счёт для регулярных платежей</p>',
+    },
+    {
+      type: 'rte',
+      __html:
+        '<p class="h3">Управление несколькими счетами</p><p>Контролируйте баланс, пересылайте реквизиты контрагентам и установите любимый счёт для регулярных платежей</p>',
+    },
+  ],
+
+  image: imageMonitor,
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
@@ -96,4 +128,9 @@ export default {
       <PictureText className="col-span-12" {...INSURANCE_TEXT} monthLimit={25000} />
     </div>
   ),
+  'benefits as html': (
+    <div className="container grid grid-cols-12">
+      <PictureText className="col-span-12" {...BENEFITS_HTML_TEXT} />
+    </div>
+  ),
 };

package/src/components/PictureText/PictureText.tsx

@@ -1,13 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
-import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 import { Headline } from '../Headline/Headline';
 import type { PictureTextContent } from './PictureTextContent';
+import { renderBenefit } from './renderBenefit';
 
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
@@ -39,17 +37,6 @@ export const PictureText = JSX<PictureTextProps>(
   ),
 );
 
-const renderBenefit = (version: BlockVersion) => (benefit: BenefitItemProps, i: number) =>
-  (
-    <BenefitItem
-      key={String(i)}
-      icon={benefit.icon}
-      label={benefit.label}
-      description={benefit.description}
-      version={version}
-    />
-  );
-
 function renderInsuranceSumMonth(sum?: number, monthLimit?: number) {
   return sum || monthLimit ? (
     <div className="bg-main-divider rounded-md flex mt-7 gap-6 px-5 py-4">

package/src/components/PictureText/PictureText.ui.json

@@ -5,6 +5,16 @@
     },
     "monthLimit": {
       "ui:field": "number"
+    },
+    "benefits": {
+      "items": {
+        "__html": {
+          "ui:widget": "html"
+        },
+        "type": {
+          "ui:widget": "hidden"
+        }
+      }
     }
   }
 }

package/src/components/PictureText/renderBenefit.tsx

@@ -0,0 +1,33 @@
+import { BlockVersion } from '../../model/BlockVersion';
+import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
+import type { ComplexBenefitProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import { assertUnreachable } from '../../utils/assertUnreachable';
+
+export const renderBenefit =
+  // Linter doesn't understand that switch processes all cases
+  // eslint-disable-next-line consistent-return
+  (version: BlockVersion) => (benefit: ComplexBenefitProps, i: number) => {
+    const { type } = benefit;
+
+    if (!(type === 'default' || type === 'rte')) {
+      return null;
+    }
+
+    switch (type) {
+      case 'default':
+        return (
+          <BenefitItem
+            key={String(i)}
+            icon={benefit.icon}
+            label={benefit.label}
+            description={benefit.description}
+            version={version}
+          />
+        );
+      case 'rte':
+        return <RichText __html={benefit.__html} />;
+      default:
+        assertUnreachable(benefit);
+    }
+  };

package/src/components/ProductTile/renderBenefit.tsx

@@ -29,7 +29,11 @@ export const renderBenefit =
           </Text>,
         ];
       case 'rte':
-        return <RichText __html={benefit.__html} />;
+        return (
+          <div className="col-span-2">
+            <RichText __html={benefit.__html} />
+          </div>
+        );
       default:
         assertUnreachable(benefit);
     }

package/src/hooks/useBool.ts

@@ -0,0 +1,19 @@
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+
+export function useBool(defaultValue = false): [
+  boolean,
+  {
+    setValue: (_: boolean) => void;
+    setTrue: () => void;
+    setFalse: () => void;
+    toggle: () => void;
+  },
+] {
+  const [value, setValue] = useState<boolean>(defaultValue);
+
+  const setTrue = useCallback(() => setValue(true), []);
+  const setFalse = useCallback(() => setValue(false), []);
+  const toggle = useCallback(() => setValue((_) => !_), []);
+
+  return [value, { setValue, setTrue, setFalse, toggle }];
+}

package/src/icons/HeadphonesIcon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" name="Наушники" fill="none" viewBox="0 0 24 23">
+  <path fill="currentColor" fill-rule="evenodd"
+    d="M2.002 19.612a3.025 3.025 0 0 1-2-2.965V13.48a2.948 2.948 0 0 1 1.53-2.561v-.272C1.504 5.437 5.237.98 10.334.14c5.098-.841 10.044 2.182 11.664 7.128.124.34.058.718-.17.995a.997.997 0 0 1-1.71-.299 8.484 8.484 0 0 0-3.999-4.85 8.505 8.505 0 0 0-8.417.215 8.657 8.657 0 0 0-4.17 7.378v1.009c0 .557-.448 1.008-1 1.008-.17 0-.5.393-.5.767v3.267c0 .557.447 1.008 1 1.008.552 0 1-.451 1-1.008v-2.26c0-.556.447-1.007 1-1.007.551 0 .999.45.999 1.008v2.259c.004.99-.472 1.92-1.276 2.488a2.978 2.978 0 0 1-2.753.366Zm19.876.222a3.022 3.022 0 0 0 2.12-2.885v-2.924a3.025 3.025 0 0 0-2-2.965 2.978 2.978 0 0 0-2.74.388 3.034 3.034 0 0 0-1.259 2.486v2.017c0 .557.448 1.008 1 1.008s1-.451 1-1.008v-2.017c0-.557.447-1.008 1-1.008.552 0 1 .451 1 1.008v3.025c0 .557-.448 1.009-1 1.009a.996.996 0 0 0-.73.316c-.189.203-.287.475-.27.753a2.008 2.008 0 0 1-2 1.956h-4v-.716c0-.557-.447-1.008-1-1.008-.551 0-.999.451-.999 1.008v1.715c0 .556.448 1.008 1 1.008h4.999a4.007 4.007 0 0 0 3.91-3.166h-.03Z"
+    clip-rule="evenodd" />
+</svg>