@redneckz/wildless-cms-uni-blocks 0.10.3 → 0.10.5

package/mobile/src/ui-kit/LinkWrapper/LinkWrapper.tsx

@@ -7,16 +7,19 @@ interface LinkWrapperProps {
   className?: string;
   href?: string;
   target?: Target;
+  isRemote?: boolean;
 }
 
-export const LinkWrapper = JSX<LinkWrapperProps>(({ className = '', href, target, children }) => {
-  const link = useLink();
-  const linkProps = link({ href, target });
-  const Tag = href ? 'a' : 'div';
+export const LinkWrapper = JSX<LinkWrapperProps>(
+  ({ className = '', href, target, isRemote = false, children }) => {
+    const link = useLink({ isRemote });
+    const linkProps = link({ href, target });
+    const Tag = href ? 'a' : 'div';
 
-  return (
-    <Tag className={style('block', className)} {...(href ? linkProps : {})}>
-      {children}
-    </Tag>
-  );
-});
+    return (
+      <Tag className={style('block', className)} {...(href ? linkProps : {})}>
+        {children}
+      </Tag>
+    );
+  },
+);

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

@@ -49,7 +49,7 @@ const ColumnItem = JSX<ColumnItemProps>(({ text, index, basePath, ...rest }) =>
   const isAnotherPortal =
     projectSettings.BASE_PATH && basePath ? !projectSettings.BASE_PATH.startsWith(basePath) : false;
 
-  const link = useLink({ isRemote: isAnotherPortal });
+  const link = useLink({ isRemote: isAnotherPortal, basePath });
   const { href, target, onClick } = link(rest);
 
   return (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.10.3",
+  "version": "0.10.5",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/CarouselLinks/CarouselLinks.tsx

@@ -30,7 +30,7 @@ export const CarouselLinks = JSX<CarouselLinksProps>(
             <Headline
               className="pt-6"
               isPadding={false}
-              description={description}
+              description={additionalDescription}
               align="text-left"
             />
           ) : null}

package/src/components/ContentPage/ContentPage.tsx

@@ -7,6 +7,7 @@ import type { BlocksRegistry } from '../../model/BlocksRegistry';
 import type { ContentPageDef } from '../../model/ContentPageDef';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { useBlockRouterProvider } from '../../services/BlockRouter/useBlockRouterProvider';
+import { CookiePopup } from '../../ui-kit/CookiePopup/CookiePopup';
 import { useDialogHandlers } from '../../ui-kit/Dialog/useDialogHandlers';
 import { style } from '../../utils/style';
 import { LikeControl } from '../LikeControl/LikeControl';
@@ -68,6 +69,10 @@ export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>((pr
           : null}
       </div>
       {likeControl ? renderLikeControl() : null}
+      <CookiePopup
+        termLink={{ href: '/pd-policy#cookie', target: '_blank' }}
+        personalDataPolicyLink={{ href: '/pd-policy', target: '_blank' }}
+      />
     </section>
   );
 });

package/src/components/Header/InternetBankButton.tsx

@@ -13,16 +13,18 @@ const BUTTON_STYLE = {
   transparent: 'text-white hover:text-primary-hover',
 };
 
-export const InternetBankButton = JSX<InternetBankButtonProps>(({ version, internetBankUrl }) => (
-  <Button
-    href={internetBankUrl}
-    ariaLabel="Интернет-банк"
-    target="_blank"
-    className={style(
-      'py-3 ml-3 text-l font-light whitespace-nowrap hover:text-primary-main',
-      BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default'],
-    )}
-  >
-    Интернет-банк
-  </Button>
-));
+export const InternetBankButton = JSX<InternetBankButtonProps>(({ version, internetBankUrl }) =>
+  internetBankUrl ? (
+    <Button
+      href={internetBankUrl}
+      ariaLabel="Интернет-банк"
+      target="_blank"
+      className={style(
+        'py-3 ml-3 text-l font-light whitespace-nowrap hover:text-primary-main',
+        BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default'],
+      )}
+    >
+      Интернет-банк
+    </Button>
+  ) : null,
+);

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

@@ -0,0 +1,64 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import type { LinkCommonProps } from '../../model/LinkProps';
+import { style } from '../../utils/style';
+import { CloseButton } from '../Dialog/CloseButton';
+import { useDialogProps } from '../Dialog/useDialogProps';
+import { LinkWrapper } from '../LinkWrapper/LinkWrapper';
+import { Paragraph } from '../Paragraph/Paragraph';
+
+export interface CookiePopupProps {
+  termLink?: LinkCommonProps;
+  personalDataPolicyLink?: LinkCommonProps;
+}
+
+export const COOKIE_DIALOG_ID = 'cookie';
+export const LOCAL_STORAGE_NAME = 'cookieClose';
+
+export const CookiePopup = JSX<CookiePopupProps>(({ termLink, personalDataPolicyLink }) => {
+  const { isOpened, onClose } = useDialogProps(
+    COOKIE_DIALOG_ID,
+    !globalThis.localStorage?.getItem(LOCAL_STORAGE_NAME),
+  );
+
+  const handleClose = useCallback(() => {
+    globalThis.localStorage?.setItem(LOCAL_STORAGE_NAME, 'true');
+
+    onClose && onClose();
+  }, [onClose]);
+
+  return isOpened ? (
+    <div className="container z-40 fixed bottom-0 left-0 right-0 pointer-events-none">
+      <div className="bg-white m-6 p-6 rounded-md flex items-center pointer-events-auto shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
+        <div className="flex-1">
+          <Paragraph size="text-s-light" color="text-primary-text">
+            АО «Россельхозбанк» использует
+            <LinkWrapper
+              isRemote
+              className={style(getStyleLinkWrapper(termLink?.href))}
+              {...termLink}
+            >
+              cookie
+            </LinkWrapper>
+            (файлы с данными о прошлых посещениях сайта) для персонализации сервисов и удобства
+            пользователей. Вы можете запретить сохранение cookie в настройках своего браузера.
+            <LinkWrapper
+              isRemote
+              className={style(getStyleLinkWrapper(personalDataPolicyLink?.href))}
+              {...personalDataPolicyLink}
+            >
+              Обработка Ваших персональных данных
+            </LinkWrapper>
+            производится в соответствии с требованиями Федерального закона от 27.07.2006 № 152-Ф3 «О
+            персональных данных».
+          </Paragraph>
+        </div>
+        <div className="w-24 flex justify-end">
+          <CloseButton className="bg-main-gray rounded-md" onClick={handleClose} />
+        </div>
+      </div>
+    </div>
+  ) : null;
+});
+
+const getStyleLinkWrapper = (href?: string) => ['inline mx-1', href ? 'text-green-dark' : ''];

package/src/ui-kit/Dialog/CloseButton.tsx

@@ -11,7 +11,7 @@ interface CloseButtonProps {
 export const CloseButton = JSX<CloseButtonProps>(({ className, onClick }) => (
   <button
     className={style(
-      'visible peer-placeholder-shown:invisible w-6 h-6 p-1 bg-transparent border-none',
+      'flex justify-center items-center w-12 h-12 p-1 bg-transparent border-none',
       className,
     )}
     onClick={onClick}

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

@@ -36,7 +36,7 @@ export const Dialog = JSX<DialogProps>(({ className, isOpened, head, children, o
     >
       <div className="relative container pb-12 min-h-full">
         <div className="sticky bg-white pt-6 top-0">
-          <CloseButton className="absolute top-3 -right-6" onClick={onClose} />
+          <CloseButton className="absolute top-10 -right-12" onClick={onClose} />
           {head}
         </div>
         {children}

package/src/ui-kit/Dialog/useDialogProps.ts

@@ -7,8 +7,9 @@ import { useDialogHandlers } from './useDialogHandlers';
 
 export function useDialogProps(
   id: string,
+  initOpen = false,
 ): DialogProps & DialogInitialParams & { wasOpened: boolean } {
-  const [isOpened, { setTrue: open, setFalse: close }] = useBool();
+  const [isOpened, { setTrue: open, setFalse: close }] = useBool(initOpen);
   const [params, setParams] = useState<DialogInitialParams>({ id });
 
   const wasOpened = useRef(isOpened);

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

@@ -7,16 +7,19 @@ interface LinkWrapperProps {
   className?: string;
   href?: string;
   target?: Target;
+  isRemote?: boolean;
 }
 
-export const LinkWrapper = JSX<LinkWrapperProps>(({ className = '', href, target, children }) => {
-  const link = useLink();
-  const linkProps = link({ href, target });
-  const Tag = href ? 'a' : 'div';
+export const LinkWrapper = JSX<LinkWrapperProps>(
+  ({ className = '', href, target, isRemote = false, children }) => {
+    const link = useLink({ isRemote });
+    const linkProps = link({ href, target });
+    const Tag = href ? 'a' : 'div';
 
-  return (
-    <Tag className={style('block', className)} {...(href ? linkProps : {})}>
-      {children}
-    </Tag>
-  );
-});
+    return (
+      <Tag className={style('block', className)} {...(href ? linkProps : {})}>
+        {children}
+      </Tag>
+    );
+  },
+);

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

@@ -49,7 +49,7 @@ const ColumnItem = JSX<ColumnItemProps>(({ text, index, basePath, ...rest }) =>
   const isAnotherPortal =
     projectSettings.BASE_PATH && basePath ? !projectSettings.BASE_PATH.startsWith(basePath) : false;
 
-  const link = useLink({ isRemote: isAnotherPortal });
+  const link = useLink({ isRemote: isAnotherPortal, basePath });
   const { href, target, onClick } = link(rest);
 
   return (

package/tailwind.config.cjs

@@ -216,6 +216,7 @@ module.exports = {
             end: 'rgba(var(--color-gradient-to), <alpha-value>)',
           },
           disabled: 'rgba(242, 242, 242, <alpha-value>)',
+          gray: 'rgba(235, 237, 240, <alpha-value>)',
         },
         primary: {
           main: 'rgba(var(--color-primary-main), <alpha-value>)',