@redneckz/wildless-cms-uni-blocks 0.14.0 → 0.14.2

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'}
+  />
+);

package/src/components/OfficesAtmsMap/useOfficesAtmsMap.ts

@@ -0,0 +1,118 @@
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { IconName } from '../../icons/IconName';
+import { fetchJSON } from '../../utils/fetchJSON';
+
+const MAP_URL = {
+  offices: '/api/v1/branches',
+  atms: '/api/v1/atms',
+};
+const EMPTY_VALUE = [];
+
+export type DataType = keyof typeof MAP_URL;
+
+export interface Currency {
+  buyExchangeRate?: number;
+  saleExchangeRate?: number;
+  currency?: {
+    id?: number;
+    code?: string;
+    currency?: string;
+    name?: string;
+  };
+}
+
+export interface ExchangeRate {
+  currencies?: Currency[];
+}
+
+export type WorkScheduleWeek = {
+  title?: string;
+  status?: boolean;
+  workTime?: string;
+  lunchHour?: string;
+  hasLunch?: boolean;
+};
+
+export type NearbyOffices = {
+  title?: string;
+  time?: string;
+  distance?: string;
+  icon?: 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 type SafeBoxCaseTariff = {
+  id?: number;
+  tariffType?: string;
+  tariffValue?: number;
+  tariffTypeDescription?: string;
+};
+
+export type SafeBoxCase = {
+  id?: number;
+  count?: number;
+  safeBoxCasesSize?: string;
+  tariffs: SafeBoxCaseTariff[];
+};
+
+export type SafeBoxCaseVolume = {
+  volume?: string;
+  safeBoxCases?: SafeBoxCase[];
+};
+
+export interface Branch {
+  name?: string;
+  address?: string;
+  phone?: string;
+  fax?: string;
+  phoneBusiness?: string;
+  phoneNatural?: string;
+  phoneCurrencyControl?: string;
+  phoneCallCentre?: string;
+  workSchedule?: WorkSchedule;
+  gpsLatitude?: number;
+  gpsLongitude?: number;
+  exchangeRate?: ExchangeRate;
+  safeBoxCaseVolumes?: SafeBoxCaseVolume[];
+}
+
+export interface Atm {
+  location?: string;
+  address?: string;
+  billAcceptorType?: string;
+  terminalType?: string;
+  billAcceptorEnable?: boolean;
+  atmAccess?: string;
+  atmCode?: string;
+  workTime?: string;
+  gpsLatitude?: number;
+  gpsLongitude?: number;
+}
+
+export function useOfficesAtmsMap(regionCode?: string, type: DataType = 'offices') {
+  const { data } = useAsyncData<Branch[] | Atm[], any, string | null>(
+    `${MAP_URL[type]}?regionCode=${regionCode}`,
+    fetchMap,
+  );
+
+  return data || EMPTY_VALUE;
+}
+
+const fetchMap = async (url: string): Promise<Branch[] | Atm[]> => {
+  const result = await fetchJSON<Branch[] | Atm[]>(url, { method: 'GET' });
+
+  return result || EMPTY_VALUE;
+};

package/src/components/PictureText/renderInsuranceSumMonth.tsx

@@ -4,18 +4,18 @@ import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
 export const renderInsuranceSumMonth = (sum?: number, monthLimit?: number) =>
   sum || monthLimit ? (
     <div className="flex flex-wrap xl:flex-nowrap xl:bg-main-divider xl:rounded-md p-xs gap-xl">
-      {Number(sum) > 0 ? renderValueBlock('Страховая сумма:', sum) : null}
-      {Number(monthLimit) > 0 ? renderValueBlock('Ежемесячный лимит:', monthLimit) : null}
+      {Number(sum) > 0 ? renderValueBlock('Страховая сумма', sum) : null}
+      {Number(monthLimit) > 0 ? renderValueBlock('Ежемесячный лимит', monthLimit) : null}
     </div>
   ) : null;
 
 const renderValueBlock = (title: string, value = 0) => (
-  <div className="basis-full flex flex-col-reverse sm:flex-row sm:justify-between items-baseline whitespace-pre">
-    <Text font="font-light" size="text-l">
+  <div className="basis-full flex flex-col-reverse sm:flex-row sm:justify-between sm:bg-main-divider sm:py-m sm:px-lg sm:rounded-md items-baseline whitespace-pre">
+    <Text font="font-light" size="text-l" color="text-secondary-text">
       {title}
     </Text>
-    <Text size="text-h6" color="text-primary-text">
+    <span className="font-sans text-h6 sm:text-primary-main text-primary-text">
       {toLocalNumberFormat(2)(value)} ₽
-    </Text>
+    </span>
   </div>
 );

package/src/components/ProductTile/ProductTile.fixture.mobile.tsx

@@ -1,10 +1,10 @@
 import '../../setup-fixture';
 
 import type { Picture } from '../../model/Picture';
-import type { ComplexBenefitContent } from '../../ui-kit/BenefitItem/BenefitItemContent';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { ProductTile } from './ProductTile';
 import type { ProductTileContent } from './ProductTileContent';
+import { BenefitTextProps } from '../../ui-kit/BenefitItem/renderBenefitText';
 
 const imageSize = {
   height: 200,
@@ -39,25 +39,28 @@ const building: Picture = {
   size: imageSize,
 };
 
-const benefits: ComplexBenefitContent[] = [
+const benefits: BenefitTextProps[] = [
   {
     type: 'default',
     label: 'до 5 млн Р',
     description: 'Кредитный лимит',
+    descriptionClassName: 'text-right',
   },
   {
     type: 'default',
     label: 'от 12,5%',
     description: 'Процентная ставка',
+    descriptionClassName: 'text-right',
   },
   {
     type: 'default',
     label: 'до 5 лет',
     description: 'Срок кредитования',
+    descriptionClassName: 'text-right',
   },
 ];
 
-const benefits2: ComplexBenefitContent[] = [
+const benefits2: BenefitTextProps[] = [
   {
     type: 'default',
     label: '1 год',
@@ -65,7 +68,7 @@ const benefits2: ComplexBenefitContent[] = [
   },
 ];
 
-const multilineBenefits: ComplexBenefitContent[] = [
+const multilineBenefits: BenefitTextProps[] = [
   {
     type: 'default',
     label: 'Широкий',

package/src/components/ProductTile/ProductTile.tsx

@@ -20,7 +20,7 @@ export const ProductTile = JSX<ProductTileProps>(
     <BlockWrapper className={className} padding="p-0" {...rest}>
       <BaseProductTile
         className="h-full"
-        defaultPadding="p-xl"
+        defaultPadding="p-4xl sm:p-xl"
         padding={padding}
         headlineVersion={headlineVersion}
         isTabularBenefits={isTabularBenefits}

package/src/icons/CloseIcon.svg

@@ -1,6 +1,6 @@
 <svg title="Крестик" isInverse="true" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.70304 5.11173C3.31449 4.72318 3.31449 4.09322 3.70304 3.70468C4.09159 3.31613 4.72155 3.31613 5.1101 3.70467L11.3313 9.92584C11.7198 10.3144 11.7198 10.9444 11.3313 11.3329C10.9427 11.7214 10.3128 11.7214 9.92421 11.3329L3.70304 5.11173Z" fill="#000000"/>
-<path d="M12.6679 14.0766C12.2793 13.688 12.2793 13.0581 12.6679 12.6695C13.0564 12.281 13.6864 12.281 14.0749 12.6695L20.2961 18.8907C20.6847 19.2792 20.6847 19.9092 20.2961 20.2977C19.9076 20.6863 19.2776 20.6863 18.8891 20.2977L12.6679 14.0766Z" fill="#000000"/>
-<path d="M14.0746 11.3316C13.6861 11.7202 13.0561 11.7202 12.6676 11.3316C12.279 10.9431 12.279 10.3131 12.6676 9.92457L18.8887 3.70341C19.2773 3.31486 19.9072 3.31486 20.2958 3.70341C20.6843 4.09195 20.6843 4.72191 20.2958 5.11046L14.0746 11.3316Z" fill="#000000"/>
-<path d="M5.11027 20.2262C4.72172 20.6147 4.09176 20.6147 3.70321 20.2262C3.31466 19.8376 3.31466 19.2077 3.70321 18.8191L9.92438 12.5979C10.3129 12.2094 10.9429 12.2094 11.3314 12.5979C11.72 12.9865 11.72 13.6164 11.3314 14.005L5.11027 20.2262Z" fill="#000000"/>
+<path d="M3.70304 5.11173C3.31449 4.72318 3.31449 4.09322 3.70304 3.70468C4.09159 3.31613 4.72155 3.31613 5.1101 3.70467L11.3313 9.92584C11.7198 10.3144 11.7198 10.9444 11.3313 11.3329C10.9427 11.7214 10.3128 11.7214 9.92421 11.3329L3.70304 5.11173Z" fill="currentColor"/>
+<path d="M12.6679 14.0766C12.2793 13.688 12.2793 13.0581 12.6679 12.6695C13.0564 12.281 13.6864 12.281 14.0749 12.6695L20.2961 18.8907C20.6847 19.2792 20.6847 19.9092 20.2961 20.2977C19.9076 20.6863 19.2776 20.6863 18.8891 20.2977L12.6679 14.0766Z" fill="currentColor"/>
+<path d="M14.0746 11.3316C13.6861 11.7202 13.0561 11.7202 12.6676 11.3316C12.279 10.9431 12.279 10.3131 12.6676 9.92457L18.8887 3.70341C19.2773 3.31486 19.9072 3.31486 20.2958 3.70341C20.6843 4.09195 20.6843 4.72191 20.2958 5.11046L14.0746 11.3316Z" fill="currentColor"/>
+<path d="M5.11027 20.2262C4.72172 20.6147 4.09176 20.6147 3.70321 20.2262C3.31466 19.8376 3.31466 19.2077 3.70321 18.8191L9.92438 12.5979C10.3129 12.2094 10.9429 12.2094 11.3314 12.5979C11.72 12.9865 11.72 13.6164 11.3314 14.005L5.11027 20.2262Z" fill="currentColor"/>
 </svg>

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

@@ -10,6 +10,8 @@ import { List } from '../List/List';
 import { RichText } from '../RichText/RichText';
 import { Tags } from '../Tags/Tags';
 import type { BaseProductTileContent } from './BaseProductTileContent';
+import type { HeadlineVersion } from '../../model/HeadlineType';
+import type { TextAlign } from '../Text/TextProps';
 
 interface BaseProductTileProps extends UniBlockProps, BaseProductTileContent {}
 
@@ -42,15 +44,7 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
     children,
   }) => {
     const img = image?.src ? <Img image={image} /> : null;
-    const headline = (
-      <Headline
-        title={title}
-        description={description}
-        headlineVersion={headlineVersion}
-        align={align}
-        isEmbedded={true}
-      />
-    );
+    const headline = renderHeadline({ title, description, headlineVersion, align });
     const filteredBenefits = benefits?.filter(
       (_) => _?.type === 'rte' || 'label' in _ || 'description' in _,
     );
@@ -66,7 +60,7 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
         isImageAlwaysOnRight={isImageAlwaysOnRight}
         buttons={renderButtonsSection(buttons)}
       >
-        <div className="flex flex-col gap-xl">
+        <div className="flex flex-col sm:gap-xl gap-4xl">
           {filteredBenefits?.length ? (
             <BenefitsList
               benefitsVersion={benefitsVersion}
@@ -90,3 +84,21 @@ const leftOrRightImage = (img: VNode, directionRight: boolean) =>
   directionRight ? { rightImage: img } : { leftImage: img };
 
 const renderTags = (tags: string[]) => (tags?.length ? <Tags tags={tags} /> : null);
+
+interface RenderHeadline {
+  title?: string;
+  description?: string;
+  headlineVersion?: HeadlineVersion;
+  align?: TextAlign;
+}
+
+const renderHeadline = ({ title, description, headlineVersion, align }: RenderHeadline) =>
+  title || description ? (
+    <Headline
+      title={title}
+      description={description}
+      headlineVersion={headlineVersion}
+      align={align}
+      isEmbedded={true}
+    />
+  ) : null;

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

@@ -16,9 +16,9 @@ interface BaseTileProps extends UniBlockProps {
 }
 
 const imageAlignmentMap: Record<Align, string> = {
-  start: '@lg:self-start',
-  center: '@lg:self-center',
-  end: '@lg:self-end',
+  start: '@xl:self-start',
+  center: '@xl:self-center',
+  end: '@xl:self-end',
 };
 
 export const BaseTile = JSX<BaseTileProps>(
@@ -47,7 +47,7 @@ export const BaseTile = JSX<BaseTileProps>(
       <div
         className={style(
           'grow relative flex justify-around @lg:justify-between items-stretch gap-3xl',
-          isImageAlwaysOnRight ? 'flex-row' : 'flex-col @lg:flex-row',
+          isImageAlwaysOnRight ? 'flex-row' : 'flex-col-reverse @lg:flex-row',
         )}
       >
         {renderImageContainer(leftImage, { imageAlign })}
@@ -67,7 +67,7 @@ export const BaseTile = JSX<BaseTileProps>(
           {buttons}
         </div>
         {renderImageContainer(rightImage, {
-          className: isImageAlwaysOnRight ? '' : '-order-1 @xl:order-1',
+          className: isImageAlwaysOnRight ? '' : '@xl:order-1',
           imageAlign,
         })}
       </div>

package/src/ui-kit/BenefitItem/renderBenefitIcon.tsx

@@ -10,7 +10,7 @@ export const renderBenefitIcon = (
   icon ? (
     <div
       className={style(
-        'w-12 h-12 min-w-12 box-border flex items-center justify-center rounded-icon',
+        'sm:w-12 sm:h-12 sm:min-w-12 w-11 h-11 min-w-11 box-border flex items-center justify-center rounded-icon',
         benefitsVersion === 'normal'
           ? 'bg-secondary-light text-primary-main'
           : 'bg-primary-main text-black group-data-secondary:bg-white/30 group-data-secondary:text-black',

package/src/ui-kit/BenefitItem/renderBenefitText.tsx

@@ -3,12 +3,20 @@ import type { ComplexBenefitContent } from './BenefitItemContent';
 import { renderBenefitDescription } from './renderBenefitDescription';
 import { renderBenefitLabel } from './renderBenefitLabel';
 
-export const renderBenefitText = (_: ComplexBenefitContent, i?: number) =>
+export type BenefitTextProps = ComplexBenefitContent & {
+  descriptionClassName?: string;
+};
+
+export const renderBenefitText = (_: BenefitTextProps, i?: number) =>
   _.type === 'rte' && '__html' in _ && _.__html ? (
     <RichText key={`rte-${i}`} {..._} />
   ) : (
     [
       'label' in _ ? renderBenefitLabel(_.label, i) : null,
-      'description' in _ ? renderBenefitDescription(_.description, i) : null,
+      'description' in _ ? (
+        <span key={String(i)} className={_.descriptionClassName}>
+          {renderBenefitDescription(_.description, i)}
+        </span>
+      ) : null,
     ]
   );

package/src/ui-kit/BenefitsList/BenefitsListProps.ts

@@ -2,4 +2,5 @@ import type { BenefitsListContent } from './BenefitsListContent';
 
 export interface BenefitsListProps extends BenefitsListContent {
   className?: string;
+  descriptionClassName?: string;
 }

package/src/ui-kit/Button/renderButtonsSection.tsx

@@ -18,7 +18,7 @@ export const renderButtonsSection = (
     <div
       className={style(
         'flex',
-        isVertical ? 'flex-col gap-xs justify-items-stretch' : 'flex-wrap gap-m',
+        isVertical ? 'flex-col gap-xs justify-items-stretch' : 'flex-wrap gap-lg sm:gap-m',
         className,
       )}
     >

package/src/ui-kit/InnerTable/renderInnerTableRow.tsx

@@ -1,6 +1,6 @@
-import type { RowsData } from './InnerTableProps';
 import { style } from '../../utils/style';
 import { getHorizontalShift } from './getHorizontalShift';
+import type { RowsData } from './InnerTableProps';
 
 export const renderInnerTableRow =
   (activeColumnIndex: number) => (rowData: RowsData[], rowIdx: number) => {
@@ -18,7 +18,7 @@ export const renderInnerTableRow =
     return (
       <div key={String(rowIdx)} className="flex border-main-divider border-b border-solid h-full">
         {headerColumn?.data ? (
-          <div className="text-xl font-light min-w-56 py-lg">{headerColumn.data}</div>
+          <div className="text-xl font-light w-56 min-w-56 py-lg">{headerColumn.data}</div>
         ) : null}
         <div className="flex flex-grow overflow-hidden">
           <div

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

@@ -21,8 +21,14 @@ export const Sitemap = JSX<SitemapProps>(({ className, topItems }) => {
   );
 });
 
+const FOOTER_AREA_KEY = 'footer';
+
 const renderColumn = (menuItem: TopMenuItemProps & { onClick: () => void }, index: number) => {
-  const { text, items, href, target, onClick } = menuItem;
+  const { text, items = [], href, target, onClick } = menuItem;
+
+  const visibleSubItems = items.filter(
+    (_) => !_.displayArea || _.displayArea.toLowerCase() === FOOTER_AREA_KEY,
+  );
 
   return (
     <div key={String(index)} className="flex flex-col gap-s w-1/4">
@@ -34,11 +40,9 @@ const renderColumn = (menuItem: TopMenuItemProps & { onClick: () => void }, inde
       >
         {text || `Раздел ${index}`}
       </a>
-      {items
-        ?.filter((_) => !_.displayArea || _.displayArea === 'Footer')
-        .map((_, i) => (
-          <ColumnItem key={String(i)} {..._} basePath={appendSlash(href)} index={i} />
-        ))}
+      {visibleSubItems.map((_, i) => (
+        <ColumnItem key={String(i)} {..._} basePath={appendSlash(href)} index={i} />
+      ))}
     </div>
   );
 };

package/src/ui-kit/Text/TextProps.ts

@@ -30,10 +30,12 @@ export type TextColor = BlockVersionMolecule<
   | 'text-primary-main'
   | 'text-secondary-text'
   | 'text-secondary-light'
+  | 'text-yellow'
   | 'text-error'
   | 'text-white'
   | 'text-white/80'
   | 'text-green'
+  | 'text-green-dark'
 >;
 
 /**