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

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

@@ -3,20 +3,18 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
 import ymaps from 'yandex-maps';
+import { style } from '../../utils/style';
 import { Icon } from '../Icon/Icon';
-import { MockPoints, mockPoints } from './mockPoints';
+import { ZoomButton } from './ZoomButton';
 import { renderClusterer } from './renderClusterer';
 import { renderOpenMap } from './renderOpenMap';
-import { renderSearchField } from './renderSearchField';
 import { renderUserGeolocation } from './renderUserGeolocation';
 import { useYandexMaps } from './useYandexMaps';
-import { ZoomButton } from './ZoomButton';
 
 interface YandexMapProps {
   points?: number[][];
   className?: string;
   zoom?: number;
-  showSearchField?: boolean;
 }
 
 const FULLSCREEN_STYLES = {
@@ -30,90 +28,84 @@ const FULLSCREEN_STYLES = {
   other: 'select-none cursor-pointer',
 };
 
+const DEFAULT_CENTER_COORDS = [55.753995, 37.614069];
+
 // TODO: Поле для поиска: невыяснено среди каких данных делать поиск (искать в имени офиса, в адресе, метро и т.д.).
 //       Сейчас реализован поиск среди тестовых данных
 // TODO: Также выяснить что делать когда ничего не найдено
 // TODO: На макетах также когда есть поле поиска нет кнопки открыть на карте.
-export const YandexMap = JSX<YandexMapProps>(
-  ({ points, className = '', zoom = 5, showSearchField = false }) => {
-    const map = useRef<ymaps.Map | null>(null);
-
-    const yandexMaps = useYandexMaps();
-
-    const [isFullScreen, setIsFullScreen] = useState();
-
-    const pointsCenter = points ? getCenterPoint(points) : [55.753995, 37.614069];
-
-    useEffect(() => {
-      if (!map?.current) {
-        yandexMaps?.ready(() => {
-          map.current = new yandexMaps.Map('map', {
-            center: pointsCenter,
-            zoom,
-            controls: [],
-            suppressMapOpenBlock: true,
-          });
-          renderClusterer(yandexMaps, map.current, points);
-        });
-      }
-    }, [yandexMaps, map, points]);
+export const YandexMap = JSX<YandexMapProps>(({ points, className = '', zoom = 5 }) => {
+  const map = useRef<ymaps.Map | null>(null);
 
-    useEffect(() => {
-      if (map.current && points?.length && yandexMaps) {
-        const newPoints = points.length < 1 ? normalizePoints(mockPoints) : points;
-        renderClusterer(yandexMaps, map.current, newPoints);
-      }
-    }, [map, points, yandexMaps]);
+  const yandexMaps = useYandexMaps();
+
+  const [isFullScreen, setIsFullScreen] = useState();
 
-    if (!yandexMaps) {
-      return null;
+  const pointsCenter = points ? getCenterPoint(points) : DEFAULT_CENTER_COORDS;
+
+  useEffect(() => {
+    if (!map?.current) {
+      yandexMaps?.ready(() => {
+        map.current = new yandexMaps.Map('map', {
+          center: pointsCenter,
+          zoom,
+          controls: [],
+          suppressMapOpenBlock: true,
+        });
+
+        renderClusterer(yandexMaps, map.current, points);
+      });
     }
 
-    const toggleFullscreen = () => {
-      const container = map.current.container;
-      if (!isFullScreen) {
-        container.enterFullscreen();
-      } else {
-        container.exitFullscreen();
+    if (map.current && yandexMaps) {
+      renderClusterer(yandexMaps, map.current, points);
+
+      if (!points?.length) {
+        map.current.setCenter(DEFAULT_CENTER_COORDS);
       }
-      setIsFullScreen(container.isFullscreen());
-    };
+    }
+  }, [yandexMaps, map, points]);
+
+  if (!yandexMaps) {
+    return null;
+  }
+
+  const toggleFullscreen = () => {
+    const container = map.current.container;
+    if (!isFullScreen) {
+      container.enterFullscreen();
+    } else {
+      container.exitFullscreen();
+    }
+    setIsFullScreen(container.isFullscreen());
+  };
 
-    const zIndex = isFullScreen ? 'z-[100000]' : 'z-10';
+  const zIndex = isFullScreen ? 'z-[100000]' : 'z-10';
 
-    const updatePointsToRender = (newPoints: MockPoints | null) => {
-      if (newPoints) {
-        const normalizedPoints = normalizePoints(newPoints);
-        setPointsToRender(normalizedPoints);
-      }
-    };
-
-    return (
-      <div id="map" className={`${isFullScreen ? '' : 'relative'} w-full ${className}`}>
-        <div className={`absolute flex left-2 top-4 w-1/2 ${zIndex}`}>
-          {showSearchField
-            ? renderSearchField(mockPoints, yandexMaps, updatePointsToRender)
-            : renderOpenMap(pointsCenter)}
-        </div>
-        <div
-          className={`${Object.values(FULLSCREEN_STYLES).join(
-            ' ',
-          )} ${zIndex} right-2 top-4 bg-white`}
-          onClick={toggleFullscreen}
-        >
-          <Icon name="FullScreenIcon" width="16" height="16" />
-        </div>
-        <div
-          className={`absolute right-2 top-52 z-10 w-12 overflow-hidden border border-transparent rounded-md ${zIndex}`}
-        >
-          <ZoomButton yandexMaps={map} />
-          <ZoomButton yandexMaps={map} direction="out" />
-        </div>
-        {renderUserGeolocation(map.current, yandexMaps, `right-2 top-80 ${zIndex}`)}
+  return (
+    <div id="map" className={style(!isFullScreen && 'relative', 'w-full', className)}>
+      <div className={style('absolute flex left-2 top-4 w-1/2', zIndex)}>
+        {renderOpenMap(pointsCenter)}
+      </div>
+      <div
+        className={style(Object.values(FULLSCREEN_STYLES), zIndex, 'right-2 top-4 bg-white')}
+        onClick={toggleFullscreen}
+      >
+        <Icon name="FullScreenIcon" width="16" height="16" />
       </div>
-    );
-  },
-);
+      <div
+        className={style(
+          'absolute right-2 top-52 z-10 w-12 overflow-hidden border border-transparent rounded-md',
+          zIndex,
+        )}
+      >
+        <ZoomButton yandexMaps={map} />
+        <ZoomButton yandexMaps={map} direction="out" />
+      </div>
+      {renderUserGeolocation(map.current, yandexMaps, style('right-2 top-80', zIndex))}
+    </div>
+  );
+});
 
 const getCenterPoint = (points: number[][]) => [
   getArraySumAndAverage(mapByIndex(points, 0)),
@@ -122,6 +114,5 @@ const getCenterPoint = (points: number[][]) => [
 
 const mapByIndex = (arr: number[][], index: number) => arr.map((a) => a[index]);
 
-const getArraySumAndAverage = (arr: number[][]) => arr.reduce((a, b) => a + b) / arr.length;
-
-const normalizePoints = (points: number[][]) => (points ? points.map((_) => _.coords) : null);
+const getArraySumAndAverage = (arr: number[][]) =>
+  arr.length && arr.reduce((a, b) => a + b) / arr.length;

package/mobile/src/ui-kit/YandexMap/renderClusterer.ts

@@ -13,7 +13,7 @@ export function renderClusterer(yandexMaps: typeof ymaps, map: ymaps.Map, points
   const clusterer = new yandexMaps.Clusterer({
     clusterIcons: [
       {
-        href: 'icons/MapMarkerClusterIcon.svg',
+        href: '/icons/MapMarkerClusterIcon.svg',
         size: [78, 84],
         offset: [-35, -50],
       },
@@ -30,7 +30,7 @@ export function renderClusterer(yandexMaps: typeof ymaps, map: ymaps.Map, points
         {},
         {
           iconLayout: 'default#image',
-          iconImageHref: 'icons/MapMarkerSingleIcon.svg',
+          iconImageHref: '/icons/MapMarkerSingleIcon.svg',
           iconImageSize: [78, 84],
           iconImageOffset: [-35, -50],
         },

package/mobile/src/ui-kit/YandexMap/renderSearchField.tsx

@@ -1,4 +1,5 @@
 import ymaps from 'yandex-maps';
+import { style } from '../../utils/style';
 import { Icon } from '../Icon/Icon';
 import type { MockPoints } from './mockPoints';
 
@@ -32,7 +33,7 @@ export const renderSearchField = (
   };
 
   return (
-    <div className={`${Object.values(styles).join(' ')} bg-white py-s pl-5xl pr-m w-full`}>
+    <div className={style(Object.values(styles), 'bg-white py-s pl-5xl pr-m w-full')}>
       <Icon
         name="LoupeIcon"
         iconVersion="black"

package/mobile/src/utils/fetchJSON.ts

@@ -20,5 +20,5 @@ export async function fetchJSONUnsafe<R = unknown>(url: string, options?: Reques
     },
   });
 
-  return await response.json();
+  return response.json();
 }

package/package.json

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

package/src/components/ApplicationForm/ApplicationFormAcquiring.tsx

@@ -51,7 +51,7 @@ export const ApplicationFormAcquiring = JSX<ApplicationFormsProps>((props) => {
           fullName,
           inn,
           name,
-          phone,
+          phone: phone.replace(/[^+\d]/g, ''),
         });
     },
     [onSubmit],

package/src/components/ApplicationForm/ApplicationFormBusinessCard.tsx

@@ -39,9 +39,9 @@ export const ApplicationFormBusinessCard = JSX<ApplicationFormsProps>((props) =>
           typeForm: 'bcrd',
           region: region?.text || '',
           name,
-          phone,
           inn,
           mail,
+          phone: phone.replace(/[^+\d]/g, ''),
         });
     },
     [onSubmit],

package/src/components/ApplicationForm/ApplicationFormCredit.tsx

@@ -49,7 +49,7 @@ export const ApplicationFormCredit = JSX<ApplicationFormsProps>(({ button, link,
           fullName,
           inn,
           name,
-          phone,
+          phone: phone.replace(/[^+\d]/g, ''),
           mail,
           region: region?.text || '',
           department: department?.text || '',

package/src/components/ApplicationForm/ApplicationFormDeposit.tsx

@@ -34,7 +34,7 @@ export const ApplicationFormDeposit = JSX<ApplicationFormsProps>((props) => {
         onSubmit({
           typeForm: 'dpst',
           name,
-          phone,
+          phone: phone.replace(/[^+\d]/g, ''),
         });
     },
     [onSubmit],

package/src/components/ApplicationForm/ApplicationFormWed.tsx

@@ -4,6 +4,7 @@ import { useForm } from '../../hooks/useForm';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { objectValidator } from '../../validation/objectValidator';
 import { isValidationSuccess } from '../../validation/validator';
+import { useGetRegions } from '../SafeDepositRental/useGetRegions';
 import type { ApplicationFormsProps } from './ApplicationFormsProps';
 import { Footnote } from './Footnote';
 import type { WedFormState } from './WedFormState';
@@ -13,7 +14,6 @@ import { renderSubmitButton } from './renderSubmitButton';
 import { renderWedDataOrganization } from './renderWedDataOrganization';
 import { renderWedTextarea } from './renderWedTextarea';
 import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
-import { useGetRegions } from '../SafeDepositRental/useGetRegions';
 
 const initialFormState: WedFormState = {
   fullName: '',
@@ -64,7 +64,7 @@ export const ApplicationFormWed = JSX<ApplicationFormsProps>((props) => {
         typeForm: 'KVED',
         fullName,
         name,
-        phone,
+        phone: phone.replace(/[^+\d]/g, ''),
         text,
         vedTypes: getVedTypes(vedTypes),
         PartnerComments: text,

package/src/components/Blocks.ts

@@ -23,7 +23,6 @@ import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { ContactsBlock } from './ContactsBlock/ContactsBlock';
 import { DepositFiltration } from './DepositFiltration/DepositFiltration';
 import { ErrorBlock } from './ErrorBlock/ErrorBlock';
-import { ExchangeRateOffice } from './ExchangeRateOffice/ExchangeRateOffice';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
 import { GracePeriod } from './GracePeriod/GracePeriod';
@@ -36,8 +35,7 @@ import { InvestmentInfo } from './InvestmentInfo/InvestmentInfo';
 import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { MortgageFiltration } from './MortgageFiltration/MortgageFiltration';
-import { OfficeMap } from './OfficeMap/OfficeMap';
-import { OfficeServicesBlock } from './OfficeServicesBlock/OfficeServicesBlock';
+import { OfficesAtmsMap } from './OfficesAtmsMap/OfficesAtmsMap';
 import { ParagraphBlock } from './ParagraphBlock/ParagraphBlock';
 import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
@@ -96,8 +94,7 @@ export const Blocks: BlocksRegistry = {
   LinkDocs,
   MobileAppTile,
   MortgageFiltration,
-  OfficeMap,
-  OfficeServicesBlock,
+  OfficesAtmsMap,
   ParagraphBlock,
   PictureText,
   Placeholder,
@@ -118,5 +115,4 @@ export const Blocks: BlocksRegistry = {
   Tile,
   VerticalLayout,
   Video,
-  ExchangeRateOffice,
 };

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

@@ -21,7 +21,7 @@ export const CARD: CarouselCardContent = {
 
 export default {
   default: (
-    <div className="container grid grid-cols-12">
+    <div className="@container container grid grid-cols-12">
       <CarouselCard className="col-span-12" {...CARD} />
     </div>
   ),

package/src/components/CarouselCard/CarouselCard.fixture.tsx

@@ -36,17 +36,17 @@ export const CARD_MINI: CarouselCardContent = {
 
 export default {
   default: (
-    <div className="container grid grid-cols-12">
+    <div className="@container container grid grid-cols-12">
       <CarouselCard className="col-span-12" {...CARD} />
     </div>
   ),
   new: (
-    <div className="container grid grid-cols-12">
+    <div className="@container container grid grid-cols-12">
       <CarouselCard className="col-span-12" {...CARD_NEW} />
     </div>
   ),
   mini: (
-    <div className="container grid grid-cols-12">
+    <div className="@container container grid grid-cols-12">
       <CarouselCard className="col-span-4" {...CARD_MINI} />
     </div>
   ),

package/src/components/CarouselCard/CarouselCard.tsx

@@ -10,12 +10,12 @@ import { titleSize } from './titleSize';
 export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {}
 
 const layerBaseStyle = 'z-10 border border-solid w-full h-full';
-const layerStyle = style(layerBaseStyle, 'absolute hidden sm:block border-transparent');
+const layerStyle = style(layerBaseStyle, 'absolute hidden @xl:block border-transparent');
 
 export const CarouselCard = JSX<CarouselCardProps>(
   ({ className, title, description, button, ...rest }) => (
     <BlockWrapper
-      className={style('sm:pl-6xl sm:pb-4xl', className)}
+      className={style('sm:pl-6xl sm:pb-4xl @container-normal', className)}
       defaultPadding="p-0"
       {...rest}
     >

package/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -15,7 +15,7 @@ export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
           title={title}
           headlineVersion="XS"
           image={icon}
-          imageOptions={{ directionRight: false, imageAlign: 'center' }}
+          imageOptions={{ directionRight: true, imageAlign: 'center' }}
           benefits={list?.map((_) => ({
             type: 'default',
             label: _.title,

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