@redneckz/wildless-cms-uni-blocks 0.5.13 → 0.5.15

package/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/src/components/OtherProducts/OtherProducts.example.json

@@ -1,56 +1,3 @@
 {
-  "title": "Другие продукты",
-  "blockItems": [
-    {
-      "label": "Другие продукты 1",
-      "blocks": [
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок",
-          "description": "Описание текстового блока",
-          "style": ["col-span-12"]
-        },
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок №2",
-          "description": "Описание текстового блока №2",
-          "style": ["col-span-12"]
-        }
-      ]
-    },
-    {
-      "label": "Другие продукты 2",
-      "blocks": [
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок",
-          "description": "Описание текстового блока",
-          "style": ["col-span-12"]
-        },
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок №2",
-          "description": "Описание текстового блока №2",
-          "style": ["col-span-12"]
-        }
-      ]
-    },
-    {
-      "label": "Другие продукты 3",
-      "blocks": [
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок",
-          "description": "Описание текстового блока",
-          "style": ["col-span-12"]
-        },
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок №2",
-          "description": "Описание текстового блока №2",
-          "style": ["col-span-12"]
-        }
-      ]
-    }
-  ]
+  "title": "Другие продукты"
 }

package/mobile/src/components/OtherProducts/OtherProducts.tsx

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

package/mobile/src/components/OtherProducts/OtherProducts.ui.json

@@ -1,76 +1 @@
-{
-  "content": {
-    "blockItems": {
-      "items": {
-        "blocks": {
-          "items": {
-            "blockListType": {
-              "ui:widget": "hidden"
-            },
-            "image": {
-              "ui:field": "picture"
-            },
-            "benefitList": {
-              "items": {
-                "description": {
-                  "benefitType": {
-                    "ui:widget": "hidden"
-                  }
-                },
-                "icon": {
-                  "ui:field": "icon"
-                }
-              }
-            },
-            "style": {
-              "ui:field": "style"
-            },
-            "benefits": {
-              "items": {
-                "icon": {
-                  "ui:field": "icon"
-                }
-              }
-            },
-            "buttons": {
-              "items": {
-                "icon": {
-                  "ui:field": "icon"
-                },
-                "iconRight": {
-                  "ui:field": "icon"
-                }
-              }
-            },
-            "icon": {
-              "ui:field": "icon"
-            },
-            "backwardButton": {
-              "icon": {
-                "ui:field": "icon"
-              },
-              "iconRight": {
-                "ui:field": "icon"
-              }
-            },
-            "cards": {
-              "items": {
-                "image": {
-                  "ui:field": "picture"
-                },
-                "button": {
-                  "icon": {
-                    "ui:field": "icon"
-                  },
-                  "iconRight": {
-                    "ui:field": "icon"
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
+{}

package/mobile/src/components/OtherProducts/OtherProductsContent.ts

@@ -1,27 +1,9 @@
 import type { ColorPalette } from '../../model/ContentPageDef';
 import type { TitleProps } from '../../model/HeadlineType';
-import type { BlockDef } from '../../ui-kit/BlocksList/BlocksListProps';
-
-/**
- * @title Элемент списка
- */
-export interface BlockItemCommonProps {
-  /**
-   * @title Название
-   * @default Список
-   */
-  label?: string;
-  /** @title Отображать в раскрытом виде */
-  isUnfolded?: boolean;
-  /** @title Блоки */
-  blocks?: BlockDef[];
-}
 
 /**
  * @title Другие продукты
  */
-export type OtherProductsContent = TitleProps & {
-  /** @title Список */
-  blockItems?: BlockItemCommonProps[];
+export interface OtherProductsContent extends TitleProps {
   colorPalette?: ColorPalette;
-};
+}

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

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

package/mobile/src/components/OtherProductsItem/OtherProductsItem.tsx

@@ -0,0 +1,47 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { getParentBlockContent } from '../../model/getParentBlockContent';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+import type { OtherProductsContent } from '../OtherProducts/OtherProductsContent';
+import type { OtherProductsItemContent } from './OtherProductsItemContent';
+
+export interface OtherProductsItemProps extends OtherProductsItemContent, UniBlockProps {}
+
+const icons: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
+
+export const OtherProductsItem: JSXBlock<OtherProductsItemProps> = JSX<OtherProductsItemProps>(
+  ({ className, page, ancestors, label = '', isUnfolded: unfoldedByDefault, children }) => {
+    const { colorPalette } = getParentBlockContent(ancestors, {} as OtherProductsContent);
+
+    return (
+      <div className={`border-0 border-b border-solid border-main-divider ${className}`}>
+        <Foldable
+          unfoldedByDefault={unfoldedByDefault}
+          renderFoldableSection={({ isUnfolded }) => (
+            <div className="box-border">
+              <FoldableSection
+                className="grid grid-cols-12 gap-1 border-box"
+                isUnfolded={isUnfolded}
+              >
+                {children}
+              </FoldableSection>
+            </div>
+          )}
+          renderFoldButton={({ isUnfolded, onToggle }) => (
+            <DefaultFoldButton
+              label={label}
+              icon={icons[Number(isUnfolded)]}
+              dataTheme={page?.colorPalette || colorPalette}
+              onClick={onToggle}
+            />
+          )}
+        />
+      </div>
+    );
+  },
+);
+
+OtherProductsItem.childrenTypes = []; // All types of blocks are suitable

package/mobile/src/components/OtherProductsItem/OtherProductsItem.ui.json

@@ -0,0 +1 @@
+{}

package/mobile/src/components/OtherProductsItem/OtherProductsItemContent.ts

@@ -0,0 +1,13 @@
+/**
+ * @title Элемент списка
+ */
+export interface OtherProductsItemContent {
+  /**
+   * @title Название
+   * @default Список
+   */
+  label?: string;
+
+  /** @title Отображать в раскрытом виде */
+  isUnfolded?: boolean;
+}

package/mobile/src/components/PictureText/PictureText.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import { VersionStyleMap } from '../../model/BlockVersion';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+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';

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

@@ -1 +1,10 @@
-{}
+{
+  "content": {
+    "sum": {
+      "ui:field": "number"
+    },
+    "monthLimit": {
+      "ui:field": "number"
+    }
+  }
+}

package/mobile/src/components/Placeholder/Placeholder.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 { getTileHeadingType } from '../BaseTile/getTileHeadingType';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';

package/mobile/src/components/ProductBlock/ProductBlock.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { VersionStyleMap } from '../../model/BlockVersion';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import type { ProductBlockContent } from './ProductBlockContent';
 import { ProductBlockInner } from './ProductBlockInner';
 

package/mobile/src/components/ProductBlock/ProductBlockContent.ts

@@ -28,7 +28,7 @@ export type ProductBlockInnerContent = HeadlineProps &
     /**
      * @title Список преимуществ
      * @minItems 2
-     * @maxItems 3
+     * @maxItems 4
      */
     benefits?: BenefitItemProps[];
     benefitsVersion?: IconVersion;