@redneckz/wildless-cms-uni-blocks 0.5.14 → 0.6.15

package/src/components/MiniGallery/MiniGallery.fixture.tsx

@@ -1,6 +1,9 @@
 import type { Picture } from '../../model/Picture';
 import { context } from '../../react/setup-fixture';
-import { MiniGallery, MiniGalleryProps } from './MiniGallery';
+import { MiniGallery } from './MiniGallery';
+import type { MiniGalleryProps } from './MiniGallery';
+import type { GalleryCardProps } from '../Gallery/GalleryContent';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
 const image: Picture = {
   src: 'domovoj-kupon.png',
@@ -21,28 +24,28 @@ export const defaultProps: MiniGalleryProps = {
       title: 'Более 5000 товаров',
       description:
         'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
-      image,
+      icon: image,
     },
     {
       title: 'Более 1000 развлечений',
       description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
-      image,
+      icon: image,
     },
     {
       title: 'Фермерские продукты',
       description: 'Высокий процент даже при небольшой сумме денежных средств',
-      image,
+      icon: image,
     },
     {
       title: '«Моя выгода»',
       description:
         'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
-      image,
+      icon: image,
     },
     {
       title: 'Более 8888 развлечений',
       description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
-      image,
+      icon: image,
     },
   ],
 };
@@ -54,61 +57,81 @@ const onlyTitleProps: MiniGalleryProps = {
   cards: [
     {
       title: 'Более 5000 товаров',
-      image,
+      icon: image,
     },
     {
       title: 'Более 1000 развлечений',
-      image,
+      icon: image,
     },
     {
       title: 'Фермерские продукты',
-      image,
+      icon: image,
     },
     {
       title: '«Моя выгода»',
-      image,
+      icon: image,
     },
   ],
 };
 
+const additionalDescriptionCards: GalleryCardProps[] = [
+  {
+    title: 'Более 5000 товаров',
+    description: 'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+    additionalDescription: '01 января 2022',
+    icon: image,
+  },
+  {
+    title: 'Более 1000 развлечений',
+    description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
+    additionalDescription: '02 февраля 2022',
+    icon: image,
+  },
+  {
+    title: 'Фермерские продукты',
+    description: 'Высокий процент даже при небольшой сумме денежных средств',
+    additionalDescription: '03 марта 2022',
+    icon: image,
+  },
+  {
+    title: '«Моя выгода»',
+    description: 'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+    additionalDescription: '04 апреля 2022',
+    icon: image,
+  },
+  {
+    title: 'Более 8888 развлечений',
+    description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
+    additionalDescription: '05 мая 2022',
+    icon: image,
+  },
+];
+
 const additionalDescriptionProps: MiniGalleryProps = {
   title: 'Вы можете оплатить бонусными баллами',
   description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
   context,
-  cards: [
-    {
-      title: 'Более 5000 товаров',
-      description:
-        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
-      additionalDescription: '01 января 2022',
-      image,
-    },
-    {
-      title: 'Более 1000 развлечений',
-      description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
-      additionalDescription: '02 февраля 2022',
-      image,
-    },
-    {
-      title: 'Фермерские продукты',
-      description: 'Высокий процент даже при небольшой сумме денежных средств',
-      additionalDescription: '03 марта 2022',
-      image,
-    },
-    {
-      title: '«Моя выгода»',
-      description:
-        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
-      additionalDescription: '04 апреля 2022',
-      image,
-    },
-    {
-      title: 'Более 8888 развлечений',
-      description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
-      additionalDescription: '05 мая 2022',
-      image,
-    },
-  ],
+  cards: additionalDescriptionCards,
+};
+
+const button: ButtonWithIconProps = {
+  href: '/credit-cards',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'secondary',
+};
+
+const list = [{ text: 'Item 1' }, { text: 'Item 2' }, { text: 'Item 3' }];
+
+const combinedProps: MiniGalleryProps = {
+  title: 'Вы можете оплатить бонусными баллами',
+  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
+  context,
+  cards: additionalDescriptionCards.map((card, i) => ({
+    ...card,
+    button: button,
+    items: i % 2 ? list : undefined,
+  })),
 };
 
 export default {
@@ -127,4 +150,9 @@ export default {
       <MiniGallery className="col-span-12" {...additionalDescriptionProps} />
     </div>
   ),
+  'button, list, additional description': (
+    <div className="container grid grid-cols-12">
+      <MiniGallery className="col-span-12" {...combinedProps} />
+    </div>
+  ),
 };

package/src/components/MiniGallery/MiniGallery.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { GalleryInner } from '../Gallery/GalleryInner';
 import type { MiniGalleryContent } from './MiniGalleryContent';
 

package/src/components/MobileAppTile/MobileAppTile.fixture.tsx

@@ -64,6 +64,7 @@ export default {
         className="col-span-12"
         version="secondary"
         title="Обновлённое мобильное приложение «Урожай»"
+        description="Описание"
         image={image}
         qr={qr}
         headingType="h3"

package/src/components/MobileAppTile/MobileAppTile.mobile.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import type { MobileAppTileContent } from './MobileAppTileContent';
 
 import { Logo } from '../../ui-kit/Logo/Logo';

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { AlignText } from '../../model/AlignText';
 import { VersionStyleMap } from '../../model/BlockVersion';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -24,6 +25,8 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
     items,
     image,
     headingType = 'h4',
+    alignTitle = 'left',
+    description,
     ...rest
   }) => {
     const textColorClass = version === 'primary' ? 'text-primary-text' : '';
@@ -49,7 +52,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
                 as="h3"
                 title={title}
                 className={`whitespace-pre-wrap max-w-[509px] mb-6
-                  ${textColorClass}`}
+                  ${textColorClass} ${AlignText[alignTitle]}`}
               />
             ) : null
           }
@@ -59,6 +62,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
             ) : null
           }
         >
+          {renderDescription(description)}
           <div className="flex flex-1 items-center">
             {qr?.src ? (
               <div className={`flex justify-center mr-5 bg-white rounded-md ${containerStyle}`}>
@@ -87,3 +91,6 @@ const renderList = (version: ListItemVersion, items?: string[]) => {
     </span>
   );
 };
+
+const renderDescription = (description?: string) =>
+  description ? <p className="text-xl-light mb-5">{description}</p> : null;

package/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -1,3 +1,4 @@
+import type { AlignType } from '../../model/AlignType';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
@@ -12,6 +13,11 @@ export type MobileAppTileContent = HeadlineCommonProps &
   HeadingCommonProps &
   ButtonContent &
   ListContent & {
+    /**
+     * @title Выравнивание заголовка
+     * @default left
+     */
+    alignTitle?: AlignType;
     // TODO: description для мобильной версии
     /** @title QR-код */
     qr?: Picture;

package/src/components/OfficeMap/OfficeMap.fixture.tsx

@@ -0,0 +1,10 @@
+import { context } from '../../react/setup-fixture';
+import { OfficeMap } from './OfficeMap';
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <OfficeMap className="col-span-12" context={context} />
+    </div>
+  ),
+};

package/src/components/OfficeMap/OfficeMap.tsx

@@ -0,0 +1,80 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useOfficeMap } from '../../hooks/useOfficeMap';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { OFFICE_MAP } from './mockOfficeMap';
+import type { NearbyOffices, OfficeMapProps, WorkScheduleWeek } from './OfficeMapContent';
+import { renderCurrentDaySchedule, renderDay, renderNearbyOffice } from './renderFunctions';
+import { YandexMap } from './YandexMap';
+
+export const OfficeMap = JSX<UniBlockProps>(({ className = '' }) => {
+  const resultOfficeMap = useOfficeMap('063') || OFFICE_MAP;
+  const { name, address, gpsLatitude, gpsLongitude, workSchedule } =
+    resultOfficeMap as OfficeMapProps;
+  const {
+    workTime,
+    lunchHour,
+    workTimeSaturday,
+    lunchHourSaturday,
+    workingMonday,
+    workingTuesday,
+    workingWednesday,
+    workingThursday,
+    workingFriday,
+    workingSaturday,
+    workingSunday,
+  } = workSchedule;
+  const point = gpsLatitude && gpsLongitude ? [gpsLatitude, gpsLongitude] : null;
+
+  const workScheduleWeek: WorkScheduleWeek[] = [
+    { title: 'Понедельник', status: workingMonday, workTime, lunchHour },
+    { title: 'Вторник', status: workingTuesday, workTime, lunchHour },
+    { title: 'Среда', status: workingWednesday, workTime, lunchHour },
+    {
+      title: 'Четверг',
+      status: workingThursday,
+      workTime,
+      lunchHour: '13:00 - 14:00', // Добавлено для проверки
+      description: 'Не работает прием денег с 17:00 до 19:00', // Добавлено для проверки
+    },
+    { title: 'Пятница', status: workingFriday, workTime, lunchHour },
+    {
+      title: 'Суббота',
+      status: workingSaturday,
+      workTime: workTimeSaturday,
+      lunchHour: lunchHourSaturday,
+    },
+    { title: 'Воскресенье', status: workingSunday },
+  ];
+  // Добавлено для проверки
+  const nearbyOffices: NearbyOffices[] = [
+    { title: 'Деловой центр', time: '1 мин', distance: '~30 м.', icon: 'MetroIcon' },
+    { title: 'Выставочная', time: '5 мин', distance: '~120 м.', icon: 'MetroIcon' },
+    { title: 'Деловой центр', time: '8 мин', distance: '~350 м.', icon: 'MetroIcon' },
+  ];
+  const currentWeekDayInd = new Date().getDay();
+  const currentWeekDay =
+    currentWeekDayInd > 0 ? workScheduleWeek[currentWeekDayInd - 1] : workScheduleWeek[6];
+
+  return (
+    <div className={`flex flex-col font-sans bg-white w-full ${className}`}>
+      <div className="flex flex-col px-12 pt-12">
+        <div className="flex justify-between">
+          <div className="text-h2">{name}</div>
+          {renderCurrentDaySchedule(currentWeekDay)}
+        </div>
+        <div className="flex text-l-light pt-4">
+          <Icon name="GeolocationIcon" width="24" height="24" asSVG className="pr-1" />
+          {address}
+        </div>
+        <div className="flex pt-4">{nearbyOffices.map(renderNearbyOffice)}</div>
+      </div>
+      <div className="flex justify-between pt-8">
+        <div className="flex-grow h-full bg-gray">{point ? <YandexMap point={point} /> : null}</div>
+        <div className="w-[434px] pl-9 pr-12 pb-14">
+          <div className="flex flex-col">{workScheduleWeek.map(renderDay)}</div>
+        </div>
+      </div>
+    </div>
+  );
+});

package/src/components/OfficeMap/OfficeMapContent.ts

@@ -0,0 +1,38 @@
+import type { IconName } from '../../icons/IconName';
+
+export type WorkSchedule = {
+  workTime: string;
+  lunchHour: string;
+  workTimeSaturday: string;
+  lunchHourSaturday: string;
+  workingMonday: boolean;
+  workingTuesday: boolean;
+  workingWednesday: boolean;
+  workingThursday: boolean;
+  workingFriday: boolean;
+  workingSaturday: boolean;
+  workingSunday: boolean;
+};
+
+export interface OfficeMapProps {
+  name?: string;
+  address: string;
+  workSchedule: WorkSchedule;
+  gpsLatitude?: number;
+  gpsLongitude?: number;
+}
+
+export type WorkScheduleWeek = {
+  title?: string;
+  status?: boolean;
+  workTime?: string;
+  lunchHour?: string;
+  description?: string;
+};
+
+export type NearbyOffices = {
+  title?: string;
+  time?: string;
+  distance?: string;
+  icon?: IconName;
+};

package/src/components/OfficeMap/YandexMap.tsx

@@ -0,0 +1,41 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import ymaps from 'yandex-maps';
+import { renderClusterer } from '../SafeDepositRental/renderClusterer';
+import { useYandexMaps } from '../SafeDepositRental/useYandexMaps';
+
+interface YandexMapProps {
+  point: number[];
+}
+
+export const YandexMap = JSX<YandexMapProps>(({ point }) => {
+  const map = useRef<ymaps.Map | null>(null);
+
+  const yandexMaps = useYandexMaps();
+
+  useEffect(() => {
+    yandexMaps?.ready(() => {
+      map.current = new yandexMaps.Map('map', {
+        center: point,
+        zoom: 10,
+      });
+      renderClusterer(yandexMaps, map.current, [point]);
+    });
+  }, [map, point, yandexMaps]);
+
+  useEffect(() => {
+    if (map.current && point && yandexMaps) {
+      renderClusterer(yandexMaps, map.current, [point]);
+    }
+  }, [map, point, yandexMaps]);
+
+  if (!yandexMaps) {
+    return null;
+  }
+
+  return (
+    <div className="bg-white">
+      <div id="map" className="h-[560px]" />
+    </div>
+  );
+});

package/src/components/OfficeMap/mockOfficeMap.ts

@@ -0,0 +1,79 @@
+export const OFFICE_MAP = {
+  id: 123,
+  branchType: {
+    id: 7,
+    code: '21',
+    name: 'Отделение на балансе филиала',
+  },
+  shortName: 'Ейский ДО',
+  name: 'ДО   №3349/3/05',
+  address: '353682, Краснодарский край, г.Ейск, ул.Гоголя, 349/ ул.Баррикадная, 42/1',
+  lawAddress: '353682, Краснодарский край, г.Ейск, ул.Гоголя, 349/ ул.Баррикадная, 42/1',
+  openDate: '2000-12-05',
+  closeDate: null,
+  bik: '040349536',
+  corAcc: '30101810700000000536',
+  registrationNumber: '3349/3/05',
+  phone: '+7(XXX)XXX-XX-XX',
+  fax: '+7(XXX)XXX-XX-XY',
+  okpo: '55105921',
+  ogrn: '1027700342890',
+  kpp: '231002002',
+  inn: '7725114488',
+  branchCode: '0305',
+  upperBranchCode: '0300',
+  timeZone: '+03:00',
+  exchangeRate: {
+    currencies: [
+      {
+        buyExchangeRate: 0.0,
+        saleExchangeRate: 0.0,
+        currency: {
+          id: 3,
+          code: '156',
+          currency: 'CNY',
+          name: 'Китайский юань',
+        },
+      },
+      {
+        buyExchangeRate: 59.15,
+        saleExchangeRate: 69.25,
+        currency: {
+          id: 2,
+          code: '978',
+          currency: 'EUR',
+          name: 'Евро',
+        },
+      },
+      {
+        buyExchangeRate: 58.4,
+        saleExchangeRate: 70.05,
+        currency: {
+          id: 1,
+          code: '840',
+          currency: 'USD',
+          name: 'Американский доллар',
+        },
+      },
+    ],
+    lastUpdate: '2022-11-11 03:56:17',
+  },
+  workSchedule: {
+    id: 413,
+    workTime: '09.00–16.30',
+    lunchHour: 'без перерыва',
+    workTimeSaturday: '09.00–15.00',
+    lunchHourSaturday: 'без перерыва',
+    workingMonday: false,
+    workingTuesday: false,
+    workingWednesday: true,
+    workingThursday: true,
+    workingFriday: true,
+    workingSaturday: true,
+    workingSunday: false,
+  },
+  gpsLatitude: 46.709744,
+  gpsLongitude: 38.260703,
+  range: null,
+  safeBoxCaseVolumes: null,
+};

package/src/components/OfficeMap/renderFunctions.tsx

@@ -0,0 +1,69 @@
+import { NearbyOffices, WorkScheduleWeek } from './OfficeMapContent';
+import { Icon } from '../../ui-kit/Icon/Icon';
+
+export const renderCurrentDaySchedule = ({ lunchHour, status, workTime }: WorkScheduleWeek) => {
+  const hasTime = /\d+/gi.test(lunchHour as string);
+  const lunchHourText = hasTime ? `Перерыв ${lunchHour}` : lunchHour;
+
+  return status ? (
+    <div className="flex">
+      <div className="p-3 border rounded-md text-m flex items-center cursor-pointer text-primary-main border-green-light mr-4">
+        {workTime ? workTime : null}
+      </div>
+      <div className="p-3 border rounded-md text-m flex items-center cursor-pointer text-golden border-golden">
+        {lunchHour ? lunchHourText : null}
+      </div>
+    </div>
+  ) : (
+    <div className="flex">
+      <div className="p-3 border rounded-md text-m flex items-center cursor-pointer text-error border-error">
+        Выходной
+      </div>
+    </div>
+  );
+};
+
+export const renderNearbyOffice = ({ icon, title, distance, time }: NearbyOffices, inx: number) => (
+  <div className="flex mr-4" key={`nearbyOffice${inx}`}>
+    <Icon name={icon} width="16" height="16" asSVG className="mr-1" />
+    {title ? <span className="text-m">{title}&nbsp;</span> : null}
+    <span className="text-m-light">
+      {distance ? ` (${distance})` : null}
+      {time ? `, ${time}` : null}
+    </span>
+  </div>
+);
+export const renderDay = (
+  { title, status, workTime, lunchHour, description }: WorkScheduleWeek,
+  inx: number,
+) => (
+  <div
+    className="flex flex-col pb-3 border-b border-solid border-main-divider mb-3 last:border-0"
+    key={`day${inx}`}
+  >
+    <div className="flex justify-between items-center w-full pb-1 text-l text-primary-text">
+      <div>{title}</div>
+      {status ? null : <div className="text-m-light text-error">Выходной</div>}
+      {status && workTime ? <div>{workTime}</div> : null}
+    </div>
+    {status && lunchHour ? renderLunchHour(lunchHour) : null}
+    {description ? (
+      <div className="pb-1 text-s-light text-secondary-text">{description}</div>
+    ) : null}
+  </div>
+);
+
+const renderLunchHour = (lunchHour: string) => {
+  const hasTime = /\d+/gi.test(lunchHour);
+
+  return hasTime ? (
+    <div className="flex justify-between items-center w-full pb-1 text-m-light text-error">
+      <div>Перерыв</div>
+      <div>{lunchHour}</div>
+    </div>
+  ) : (
+    <div className="flex justify-between items-center w-full pb-1 text-m-light text-primary-main">
+      <div>{lunchHour}</div>
+    </div>
+  );
+};

package/src/components/OfficeServicesBlock/OfficeServicesBlock.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
@@ -26,7 +26,7 @@ export const OfficeServicesBlock = JSX<OfficeServicesBlockProps>(
   },
 );
 
-const renderListItems = (itemList: OfficeServicesBlockList, i) => (
+const renderListItems = (itemList: OfficeServicesBlockList, i: number) => (
   <li key={`list_item_${String(i)}`} className="flex mb-5 last:mb-0 list-none">
     {itemList.icon ? (
       <Img

package/src/components/OtherProducts/OtherProducts.tsx

@@ -1,21 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { JSXBlock } from '../../model/BlocksRegistry';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { OtherProductsContent } from './OtherProductsContent';
 
 export interface OtherProductsProps extends OtherProductsContent, UniBlockProps {}
 
-export const OtherProducts = JSX<OtherProductsProps>(
+export const OtherProducts: JSXBlock<OtherProductsProps> = JSX<OtherProductsProps>(
   ({ context, className = '', children, ...rest }) => (
     <BlockWrapper
       context={context}
       className={`font-sans text-primary-text ${className}`}
       {...rest}
     >
-      {children ? <div className="box-border1">{children}</div> : null}
+      {children}
     </BlockWrapper>
   ),
-) as JSXBlock<OtherProductsProps>;
+);
 
 OtherProducts.childrenTypes = ['OtherProductsItem'];

package/src/components/OtherProducts/OtherProductsContent.ts

@@ -1,6 +1,9 @@
+import type { ColorPalette } from '../../model/ContentPageDef';
 import type { TitleProps } from '../../model/HeadlineType';
 
 /**
  * @title Другие продукты
  */
-export type OtherProductsContent = TitleProps;
+export interface OtherProductsContent extends TitleProps {
+  colorPalette?: ColorPalette;
+}

package/src/components/OtherProductsItem/OtherProductsItem.example.json

@@ -1,3 +1,4 @@
 {
-  "label": "Другие продукты N"
+  "label": "Другие продукты N",
+  "isUnfolded": true
 }