@redneckz/wildless-cms-uni-blocks 0.13.24 → 0.14.1

package/src/components/MortgageFiltration/MortgageFiltration.example.json

@@ -53,7 +53,9 @@
       }
     },
     "hotFilters": [
-      { "text": "Все программы" },
+      {
+        "text": "Все программы"
+      },
       {
         "text": "Льготные программы",
         "filter": {
@@ -74,7 +76,12 @@
       },
       {
         "text": "Готовое жилье",
-        "filter": { "stage": ["built"], "categories": [], "extraOptions": [], "propertyType": [] }
+        "filter": {
+          "stage": ["built"],
+          "categories": [],
+          "extraOptions": [],
+          "propertyType": []
+        }
       },
       {
         "text": "Загородная недвижимость",

package/src/components/MortgageFiltration/MortgageFiltration.tsx

@@ -1,13 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm';
-import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BaseFiltrationInner } from '../../ui-kit/BaseFiltration/BaseFiltrationInner';
 import { renderFiltrationForm } from '../../ui-kit/BaseFiltration/renderFiltrationForm';
 import { useHotFilters } from '../../ui-kit/BaseFiltration/useHotFilters';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { TabsControl } from '../../ui-kit/TabsControl/TabsControl';
 import { style } from '../../utils/style';
+import { getBlocksToRender } from '../../ui-kit/BaseFiltration/getBlocksToRender';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import type {
   MortgageFiltrationContent,
   MortgageFiltrationSchema,
@@ -29,6 +30,8 @@ export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<Mortgag
     const [filtrationState, { field, reset, update: replaceFiltrationState }] =
       useForm(initialFiltrationState);
 
+    const blocksToRender = getBlocksToRender(rest.block?.blocks, filtrationState)();
+
     const handleFiltrationStateChange = useCallback(
       (_: MortgageFiltrationState = initialFiltrationState) => replaceFiltrationState(_),
       [],
@@ -50,7 +53,7 @@ export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<Mortgag
       >
         <TabsControl {...tabsControlProps} />
         {renderFiltrationForm({ field, reset, filtrationSchema, resetButton })}
-        <BaseFiltrationInner filtrationState={filtrationState} {...rest} />
+        <BaseFiltrationInner blocksToRender={blocksToRender} {...rest} />
       </BlockWrapper>
     );
   },

package/src/components/OfficesAtmsMap/Badge.tsx

@@ -0,0 +1,30 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Text } from '../../ui-kit/Text/Text';
+import type { TextColor } from '../../ui-kit/Text/TextProps';
+import { style } from '../../utils/style';
+
+const colorStyle: Record<string, { border: string; text: TextColor }> = {
+  yellow: { border: 'border-yellow-light', text: 'text-yellow' },
+  green: { border: 'border-green-light', text: 'text-green-dark' },
+  gray: { border: 'border-gray', text: 'text-secondary-text' },
+  red: { border: 'border-error', text: 'text-error' },
+};
+
+export interface BadgeProps {
+  className?: string;
+  color?: keyof typeof colorStyle;
+}
+
+export const Badge = JSX<BadgeProps>(({ className, children, color = 'gray' }) => (
+  <div
+    className={style(
+      'p-s border border-gray rounded-md flex items-center',
+      colorStyle[color].border,
+      className,
+    )}
+  >
+    <Text size="text-m" color={colorStyle[color].text}>
+      {children}
+    </Text>
+  </div>
+));

package/src/components/OfficesAtmsMap/CardCell.tsx

@@ -0,0 +1,40 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Text } from '../../ui-kit/Text/Text';
+import type { TextColor } from '../../ui-kit/Text/TextProps';
+import { style } from '../../utils/style';
+
+export interface CardCellProps {
+  className?: string;
+  label?: string;
+  value?: string;
+  subText?: string;
+  subColor?: TextColor;
+}
+
+export const CardCell = JSX<CardCellProps>(({ className, label, value, subText, subColor }) => {
+  const textItems = value?.split(',') ?? [];
+
+  if (!textItems.length && !subText) {
+    return null;
+  }
+
+  return (
+    <div className={style('flex gap-2xs flex-col h-full max-w-[300px]', className)}>
+      {label ? (
+        <Text color="text-secondary-text" font="font-light" size="text-m">
+          {label}
+        </Text>
+      ) : null}
+      {textItems.filter(Boolean).map((text, i) => (
+        <Text key={String(i)} size="text-l">
+          {text.trim()}
+        </Text>
+      ))}
+      {subText ? (
+        <Text color={subColor} size="text-m">
+          {subText}
+        </Text>
+      ) : null}
+    </div>
+  );
+});

package/src/components/OfficesAtmsMap/CardRow.tsx

@@ -0,0 +1,17 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+
+export interface CardRowProps {
+  className?: string;
+}
+
+export const CardRow = JSX<CardRowProps>(({ className, children }) => (
+  <div
+    className={style(
+      'flex border-t border-solid border-main-divider py-xl gap-x-6xl gap-y-xl',
+      className,
+    )}
+  >
+    {children}
+  </div>
+));

package/src/components/OfficesAtmsMap/OfficesAtmsMap.fixture.tsx

@@ -0,0 +1,41 @@
+import { OfficesAtmsMap } from './OfficesAtmsMap';
+import type { OfficesAtmsMapContent } from './OfficesAtmsMapContent';
+
+const OFFICE_MAP: OfficesAtmsMapContent = {
+  data: {
+    dataType: 'offices',
+  },
+};
+
+const ATM_MAP: OfficesAtmsMapContent = {
+  data: {
+    dataType: 'atms',
+    description:
+      'Держатели платежных карт Visa, MasterCard и МИР АО «Россельхозбанк» могут снимать без дополнительных комиссий наличные денежные средства в банкоматах банков-партнеров:',
+    list: [
+      { text: 'АО «Альфа-Банк»', image: { src: 'alphabank.svg', size: { width: 24, height: 24 } } },
+      {
+        text: 'ПАО «Промсвязьбанк»',
+        image: { src: 'psbbank.svg', size: { width: 24, height: 24 } },
+      },
+      { text: 'ПАО «РОСБАНК»', image: { src: 'rosbank.svg', size: { width: 24, height: 24 } } },
+      {
+        text: 'АО «Райффайзенбанк»',
+        image: { src: 'rayfbank.svg', size: { width: 24, height: 24 } },
+      },
+    ],
+  },
+};
+
+export default {
+  offices: (
+    <div className="container grid grid-cols-12">
+      <OfficesAtmsMap className="col-span-12" {...OFFICE_MAP} />
+    </div>
+  ),
+  atms: (
+    <div className="container grid grid-cols-12">
+      <OfficesAtmsMap className="col-span-12" {...ATM_MAP} />
+    </div>
+  ),
+};

package/src/components/OfficesAtmsMap/OfficesAtmsMap.tsx

@@ -0,0 +1,165 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
+import { useLocation } from '../../hooks/useLocation';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Button } from '../../ui-kit/Button/Button';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img/Img';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Text } from '../../ui-kit/Text/Text';
+import { YandexMap } from '../../ui-kit/YandexMap/YandexMap';
+import { style } from '../../utils/style';
+import type { AtmsDef, OfficesAtmsMapContent } from './OfficesAtmsMapContent';
+import { renderAtmCard } from './renderAtmCard';
+import { renderOfficeCard } from './renderOfficeCard';
+import { Atm, Branch, useOfficesAtmsMap } from './useOfficesAtmsMap';
+
+const INITIAL_FILTRATION_OFFICES_STATE = {
+  safeBoxCaseVolumes: false,
+  workingSaturday: false,
+};
+
+const INITIAL_FILTRATION_ATMS_STATE = {
+  terminalTypeAtms: true,
+  terminalTypeTerm: false,
+  workAllTime: false,
+  billAcceptorEnable: false,
+};
+
+const FILTRATION_LABELS = {
+  safeBoxCaseVolumes: 'Аренда индивидуальных сейфовых ячеек',
+  workingSaturday: 'Открыты по субботам',
+  terminalTypeAtms: 'Банкоматы',
+  terminalTypeTerm: 'Терминалы',
+  workAllTime: 'Круглосуточно',
+  billAcceptorEnable: 'Прием наличных',
+};
+
+const FILTRATION_BRANCHES_PREDICATES = {
+  safeBoxCaseVolumes: (item: Branch) => Boolean(item.safeBoxCaseVolumes),
+  workingSaturday: (item: Branch) => Boolean(item.workSchedule?.workingSaturday),
+};
+
+const FILTRATION_ATMS_PREDICATES = {
+  terminalTypeAtms: (item: Atm) => item.terminalType?.toLowerCase() === 'банкомат',
+  terminalTypeTerm: (item: Atm) => item.terminalType?.toLowerCase() === 'терминал',
+  workAllTime: (item: Atm) => item.workTime?.toLowerCase() === 'круглосуточно',
+  billAcceptorEnable: (item: Atm) => Boolean(item.billAcceptorEnable),
+};
+
+export interface OfficesAtmsMapProps extends OfficesAtmsMapContent, UniBlockProps {}
+
+export const OfficesAtmsMap = JSX<OfficesAtmsMapProps>(({ data, className = '', ...rest }) => {
+  const dataType = data?.dataType ?? 'offices';
+  const initialState =
+    dataType === 'offices' ? INITIAL_FILTRATION_OFFICES_STATE : INITIAL_FILTRATION_ATMS_STATE;
+  const [filtrationState, { field, reset }] = useForm(initialState);
+
+  const [currentLocation] = useLocation();
+
+  const [regionCode, title] = useMemo(
+    () => [currentLocation?.code || '000', getTitle(currentLocation?.name, dataType)],
+    [currentLocation, dataType],
+  );
+
+  const officesAtmsData = useOfficesAtmsMap(regionCode, dataType);
+
+  const filteredOfficesAtmsData = filterOfficesAtms(officesAtmsData, filtrationState);
+
+  const lengthOfficesAtms = filteredOfficesAtmsData.length;
+
+  const points = filteredOfficesAtmsData
+    .map((_: Branch | Atm) => [_.gpsLatitude, _.gpsLongitude].filter(Boolean) as number[])
+    .filter((_) => _ && _.length === 2);
+
+  return (
+    <BlockWrapper
+      version="transparent"
+      className={style('grid grid-cols-12 gap-1', className)}
+      defaultPadding="p-0"
+      {...rest}
+    >
+      <div className="col-span-12 bg-white">
+        <div className="pt-6xl px-6xl">
+          <div className="flex gap-2 pb-2xl">
+            <Heading headingType="h2">{title}</Heading>
+            {lengthOfficesAtms ? (
+              <Text size="text-h2" color="text-secondary-text">{`(${lengthOfficesAtms})`}</Text>
+            ) : null}
+          </div>
+          {data && 'description' in data ? renderDescriptionBlock(data) : null}
+          {renderFiltrationForm(Object.keys(initialState), { field, reset })}
+        </div>
+        <div className="h-[600px]">
+          <YandexMap points={points} className="h-full" />
+        </div>
+      </div>
+      {filteredOfficesAtmsData.map(dataType === 'offices' ? renderOfficeCard : renderAtmCard)}
+    </BlockWrapper>
+  );
+});
+
+const filterOfficesAtms = (data: Branch[] | Atm[], filtrationState: Record<string, boolean>) => {
+  const truthyFilters = Object.keys(filtrationState).filter((key) => filtrationState[key]);
+
+  return 'name' in data
+    ? (data as Branch[]).filter(filterOffices(truthyFilters))
+    : (data as Atm[]).filter(filterAtms(truthyFilters));
+};
+
+const filterOffices = (filters: string[]) => (item: Branch) =>
+  filters.every((filterName) => FILTRATION_BRANCHES_PREDICATES[filterName](item));
+
+const filterAtms = (filters: string[]) => (item: Atm) =>
+  filters.every((filterName) => FILTRATION_ATMS_PREDICATES[filterName](item));
+
+const getTitle = (name = '', dataType = 'offices') =>
+  dataType === 'offices' ? `Офисы филиала ${name}` : `Банкоматы филиала ${name}`;
+
+const renderFiltrationForm = (
+  filters: string[],
+  { field, reset }: { field: FormFieldRegisterer<any>; reset: () => void },
+) => (
+  <div className="pb-2xl">
+    {filters?.length ? (
+      <div className="flex flex-wrap gap-3xl pb-2xl">
+        {filters.map((key) => (
+          <Checkbox key={key} text={FILTRATION_LABELS[key]} {...field(key)} />
+        ))}
+      </div>
+    ) : null}
+    <Button
+      version="transparent"
+      className="text-secondary-text [&>*]:p-0"
+      onClick={reset}
+      text="Очистить фильтр"
+      appendRight={<Icon name="CloseIcon" width="16" height="16" />}
+    />
+  </div>
+);
+
+const renderDescriptionBlock = ({ description, list }: AtmsDef) => (
+  <div className="p-xl mb-2xl border border-gray rounded-md">
+    <Paragraph size="text-l" font="font-light">
+      {description}
+    </Paragraph>
+    {list?.length ? (
+      <div className="flex gap-2xl flex-wrap pt-xs">
+        {list.map((item, i) => (
+          <div key={String(i)} className="flex gap-xs items-center">
+            {item?.image ? <Img image={item.image} /> : null}
+            {item?.text ? (
+              <Text size="text-m" font="font-light">
+                {item.text}
+              </Text>
+            ) : null}
+          </div>
+        ))}
+      </div>
+    ) : null}
+  </div>
+);

package/src/components/OfficesAtmsMap/OfficesAtmsMapContent.ts

@@ -0,0 +1,40 @@
+import { EmptyOption } from '../../model/EmptyOptionType';
+import type { UniBlockContent } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
+
+/**
+ * @title Пункт
+ */
+export type ItemList = {
+  text?: string;
+  image?: Picture;
+};
+
+/**
+ * @title Офисы
+ * @default {"dataType": "offices"}
+ */
+export type OfficesDef = {
+  dataType: 'offices';
+};
+
+/**
+ * @title Банкоматы
+ * @default {"dataType": "atms"}
+ */
+export type AtmsDef = {
+  dataType: 'atms';
+  /** @title Описание */
+  description: string;
+  /** @title Список */
+  list?: ItemList[];
+};
+
+/**
+ * @title Данные
+ */
+export type OfficesAtmsBlockDef = EmptyOption | OfficesDef | AtmsDef;
+
+export type OfficesAtmsMapContent = UniBlockContent & {
+  data?: OfficesAtmsBlockDef;
+};

package/src/components/OfficesAtmsMap/renderAtmCard.tsx

@@ -0,0 +1,60 @@
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Text } from '../../ui-kit/Text/Text';
+import { Badge } from './Badge';
+import { CardCell } from './CardCell';
+import { CardRow } from './CardRow';
+import { Atm } from './useOfficesAtmsMap';
+
+export const renderAtmCard = (
+  {
+    location,
+    address,
+    billAcceptorType,
+    terminalType,
+    billAcceptorEnable,
+    atmCode = '',
+    atmAccess = '',
+    workTime,
+  }: Atm,
+  index: number,
+) => {
+  const additionalInfo = [
+    {
+      label: 'Устройство',
+      value: capitalizedFirstLetter(terminalType),
+    },
+    { label: 'Модуль приема наличных', value: billAcceptorEnable ? 'Да' : 'Нет' },
+    {
+      label: 'Прием наличных пачкой',
+      value: billAcceptorType === 'банкомат принимает пачками' ? 'Да' : 'Нет',
+    },
+    {
+      label: 'Доступность',
+      value: ['внешняя установка', 'территория банка'].includes(atmAccess) ? 'Общедоступный' : '',
+    },
+    { label: 'Регистрационный номер', value: atmCode },
+  ];
+
+  return (
+    <div key={String(index)} className="bg-white col-span-12 p-3xl border-green border">
+      <div className="flex justify-between">
+        <Text size="text-h4">{capitalizedFirstLetter(location)}</Text>
+        <Badge color="green">{capitalizedFirstLetter(workTime)}</Badge>
+      </div>
+      {address ? (
+        <div className="flex pb-xl pt-xs gap-2xs">
+          <Icon name="GeolocationIcon" width="24" height="24" />
+          <Text size="text-l">{address}</Text>
+        </div>
+      ) : null}
+      <CardRow className="flex-wrap">{additionalInfo?.map(renderInfo)}</CardRow>
+    </div>
+  );
+};
+
+const renderInfo = (item: Record<string, string>, index: number) => (
+  <CardCell key={String(index)} {...item} />
+);
+
+const capitalizedFirstLetter = (text?: string) =>
+  text ? `${text?.charAt(0)?.toUpperCase()}${text?.slice(1)}` : '';

package/src/components/OfficesAtmsMap/renderCurrentDaySchedule.tsx

@@ -0,0 +1,2 @@
+import { Badge } from './Badge';
+import type { WorkScheduleWeek } from './useOfficesAtmsMap';

package/src/components/OfficesAtmsMap/renderDay.tsx

@@ -0,0 +1,2 @@
+import { CardCell } from './CardCell';
+import type { WorkScheduleWeek } from './useOfficesAtmsMap';

package/src/components/OfficesAtmsMap/renderLunchHour.tsx

@@ -0,0 +1,28 @@
+import { Text } from '../../ui-kit/Text/Text';
+
+export const renderLunchHour = (lunchHour: string) => {
+  const hasLunch = /\d+/gi.test(lunchHour);
+
+  return hasLunch ? (
+    <div className="flex flex-row w-full pb-2xs">
+      <div className="pr-s">
+        <Text size="text-l" color="text-error">
+          Перерыв
+        </Text>
+      </div>
+      <div>
+        <Text size="text-l" color="text-error">
+          {lunchHour}
+        </Text>
+      </div>
+    </div>
+  ) : (
+    <div className="items-center w-full pb-2xs">
+      <div>
+        <Text size="text-m" color="text-primary-main" font="font-light">
+          {lunchHour}
+        </Text>
+      </div>
+    </div>
+  );
+};

package/src/components/OfficesAtmsMap/renderOfficeCard.tsx

@@ -0,0 +1,121 @@
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Text } from '../../ui-kit/Text/Text';
+import { Badge } from './Badge';
+import { CardCell } from './CardCell';
+import { CardRow } from './CardRow';
+import { Branch, Currency, WorkSchedule, WorkScheduleWeek } from './useOfficesAtmsMap';
+
+const WEEKDAY_MAP = [
+  ['Понедельник', 'workingMonday'],
+  ['Вторник', 'workingTuesday'],
+  ['Среда', 'workingWednesday'],
+  ['Четверг', 'workingThursday'],
+  ['Пятница', 'workingFriday'],
+  ['Суббота', 'workingSaturday'],
+  ['Воскресенье', 'workingSunday'],
+];
+
+const currentWeekDayIdx = new Date().getDay();
+
+export const renderOfficeCard = (
+  {
+    name,
+    address,
+    phone,
+    fax,
+    phoneBusiness,
+    phoneNatural,
+    phoneCallCentre,
+    phoneCurrencyControl,
+    workSchedule,
+    exchangeRate,
+  }: Branch,
+  index: number,
+) => {
+  const workScheduleWeek = workSchedule ? getWorkScheduleWeek(workSchedule) : null;
+  const [currentWeekDay] = workScheduleWeek?.slice(currentWeekDayIdx - 1) ?? [];
+
+  return (
+    <div key={String(index)} className="bg-white col-span-12 p-3xl border-green border">
+      <div className="flex justify-between">
+        <Text size="text-h4">{name}</Text>
+        {renderCurrentDaySchedule(currentWeekDay)}
+      </div>
+      {address ? (
+        <div className="flex pb-xl pt-xs gap-2xs">
+          <Icon name="GeolocationIcon" width="24" height="24" />
+          <Text size="text-l">{address}</Text>
+        </div>
+      ) : null}
+      <CardRow className="flex-wrap">
+        <CardCell label="Факс" value={fax} />
+        <CardCell label="Телефон филиала" value={phone} />
+        <CardCell label="Для обращений юридических лиц" value={phoneBusiness} />
+        <CardCell label="Обслуживание физических лиц" value={phoneNatural} />
+        <CardCell label="Для консультаций по валютному контролю" value={phoneCurrencyControl} />
+        <CardCell label="Контакт-центр" value={phoneCallCentre} />
+      </CardRow>
+      {workScheduleWeek?.length ? <CardRow>{workScheduleWeek?.map(renderDay)}</CardRow> : null}
+      {exchangeRate?.currencies?.length ? (
+        <CardRow className="flex-wrap">{exchangeRate?.currencies?.map(renderCurrency)}</CardRow>
+      ) : null}
+    </div>
+  );
+};
+
+const getWorkScheduleWeek = (workSchedule?: WorkSchedule): WorkScheduleWeek[] =>
+  WEEKDAY_MAP.map(([title, key]) => {
+    const dayOff = ['workingSaturday', 'workingSunday'].includes(key);
+
+    return {
+      title,
+      status: Boolean(workSchedule?.[key]),
+      workTime: dayOff ? workSchedule?.workTimeSaturday : workSchedule?.workTime,
+      lunchHour: dayOff ? workSchedule?.lunchHourSaturday : workSchedule?.lunchHour,
+      get hasLunch() {
+        return /\d+/.test(this.lunchHour ?? '');
+      },
+    };
+  });
+
+export const renderCurrency = (
+  { currency, buyExchangeRate, saleExchangeRate }: Currency,
+  i: number,
+) => (
+  <div key={String(i)} className="flex gap-lg h-full">
+    {currency?.currency ? <CardCell label="Валюта" value={currency.currency} /> : null}
+    {buyExchangeRate ? <CardCell label="Купить" value={String(buyExchangeRate)} /> : null}
+    {saleExchangeRate ? <CardCell label="Продать" value={String(saleExchangeRate)} /> : null}
+  </div>
+);
+
+//TODO: Add logic time https://github.com/redneckz/wildless-cms-uni-blocks/pull/1549
+export const renderCurrentDaySchedule = (workScheduleWeek?: WorkScheduleWeek) => {
+  if (!workScheduleWeek) {
+    return null;
+  }
+
+  const { lunchHour, status, workTime, hasLunch } = workScheduleWeek;
+
+  return status ? (
+    <div className="flex gap-s">
+      {workTime ? <Badge color="green">{workTime}</Badge> : null}
+      {lunchHour && hasLunch ? <Badge color="yellow">{lunchHour}</Badge> : null}
+    </div>
+  ) : (
+    <Badge color="red">Выходной</Badge>
+  );
+};
+
+export const renderDay = (
+  { title, status, workTime, lunchHour, hasLunch }: WorkScheduleWeek,
+  index: number,
+) => (
+  <CardCell
+    key={String(index)}
+    label={title}
+    value={status && workTime ? workTime : ''}
+    subText={!status ? 'Выходной' : lunchHour}
+    subColor={!status || hasLunch ? 'text-error' : 'text-green-dark'}
+  />
+);