@redneckz/wildless-cms-uni-blocks 0.6.40 → 0.6.42

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -0,0 +1,62 @@
+import { BaseTile } from '../BaseTile/BaseTile';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { BorderVersionStyleMap } from '../../model/BorderVersion';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import { JSX } from '@redneckz/uni-jsx';
+import { List } from '../../ui-kit/List/List';
+import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import { SocialMedia } from '../Footer/SocialMedia';
+import { VersionStyleMap } from '../../model/BlockVersion';
+import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
+import type { UniBlockProps } from '../../model/JSXBlock';
+
+export interface RecommendationCardProps extends CarouselRecommendationCardContent, UniBlockProps {}
+
+export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
+  ({
+    button,
+    className = '',
+    description,
+    image,
+    items = [],
+    socialMedia = [],
+    title,
+    version = 'primary',
+    ...rest
+  }) => {
+    const tileTitle = title ? (
+      <Heading headingType="h5" as="h3" className="mb-3.5 z-10" title={title} />
+    ) : null;
+    const tileImage = image?.src ? (
+      <Img className="absolute bottom-0 right-0 m-0" image={image} />
+    ) : null;
+
+    return (
+      <BlockWrapper
+        className={`relative text-left border border-solid box-border p-7 min-w-[524px]
+        ${BorderVersionStyleMap[version]}
+        ${VersionStyleMap[version]}
+        ${className}`}
+        {...rest}
+      >
+        <BaseTile className="flex justify-between" title={tileTitle} image={tileImage}>
+          <div className="h-full flex flex-col justify-between">
+            {description ? <span className="mb-2">{description}</span> : null}
+            {items.length ? (
+              <List
+                className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"
+                items={items}
+                version={version}
+              />
+            ) : null}
+            {socialMedia.length ? (
+              <SocialMedia className="pt-10 pb-0" media={socialMedia} version={version} />
+            ) : null}
+            {button?.text ? <div className="pt-2 mt-16">{renderButton({ button })}</div> : null}
+          </div>
+        </BaseTile>
+      </BlockWrapper>
+    );
+  },
+);

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

@@ -0,0 +1,9 @@
+{
+  "content": {
+    "items": {
+      "image": {
+        "ui:field": "picture"
+      }
+    }
+  }
+}

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -0,0 +1,45 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { LinkCommonProps } from '../../model/LinkProps';
+import type { Picture } from '../../model/Picture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { ListContent } from '../../ui-kit/List/ListContent';
+
+/**
+ * @title Карточка рекомендаций
+ */
+export interface CarouselRecommendationCardContent extends HeadlineCommonProps, ListContent {
+  /**
+   * @title Соц сети
+   * @minItems 3
+   * @default [
+   * { "href": "https://t.me" },
+   * { "href": "https://vk.com" },
+   * { "href": "https://ok.ru" },
+   * ]
+   */
+  socialMedia?: LinkCommonProps[];
+  /**
+   * @default {
+   *   "format": "webp",
+   *   "size": {
+   *       "width": 290
+   *   },
+   *   "sources": [{
+   *       "media": 1279,
+   *       "width": 174,
+   *       "format": "webp",
+   *       "alignment": "southeast"
+   *   }]
+   * }
+   */
+  image?: Picture;
+  /**
+   * @default {
+   * "text": "",
+   * "version": "secondary"
+   * }
+   */
+  button?: ButtonProps;
+  version?: BlockVersion;
+}

package/mobile/src/components/Header/Header.tsx

@@ -22,7 +22,7 @@ export const Header = JSX<HeaderProps>(({ className = '', bgColor = 'bg-white',
   const router = useRouter();
 
   const fallback: Fallback | undefined = rest.options?.page?.fallback;
-  const { topItems, dispositions, defaultLocation } = useSWRResource<SitemapDataProps>(
+  const { topItems, dispositions, defaultLocation, logo } = useSWRResource<SitemapDataProps>(
     projectSettings.SITEMAP || 'sitemap',
     fallback,
   );
@@ -36,7 +36,7 @@ export const Header = JSX<HeaderProps>(({ className = '', bgColor = 'bg-white',
   return (
     <header className={`${bgColor} ${className}`}>
       <div className="container px-4 py-0 box-border">
-        <HeaderTop onClick={handleBurgerMenuShow} bgColor={bgColor} />
+        <HeaderTop onClick={handleBurgerMenuShow} bgColor={bgColor} logo={logo} />
         <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-12">
           <div className="flex no-scrollbar horizontal-list h-full items-center">
             {subItems?.map((_, i) => (

package/mobile/src/components/Header/HeaderBurger.tsx

@@ -1,8 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useGeolocation } from '../../hooks/useGeolocation';
+import { useLocation } from '../../hooks/useLocation';
 import type { VNode } from '../../model/VNode';
 import { Img } from '../../ui-kit/Img/Img';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
+import { Text } from '../../ui-kit/Text/Text';
 import type { DispositionItem } from './HeaderContent';
 
 export interface HeaderBurgerProps {
@@ -14,7 +15,7 @@ export interface HeaderBurgerProps {
 
 export const HeaderBurger = JSX<HeaderBurgerProps>(
   ({ burgerSubMenu, onClick, defaultLocation = '', children }) => {
-    const [city, getCity] = useGeolocation(defaultLocation);
+    const [location] = useLocation(defaultLocation);
 
     return (
       <div className="absolute top-0 left-0 w-full h-full bg-white p-4 box-border z-20">
@@ -24,10 +25,7 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
         >
           <Img image="CloseIcon" width="24" height="24" asSVG />
         </button>
-        <button
-          onClick={getCity}
-          className="flex items-center text-s text-secondary-text p-0 mb-4 bg-transparent cursor-pointer"
-        >
+        <button className="flex items-center text-s p-0 mb-4 bg-transparent cursor-pointer">
           <Img
             image="GeolocationIcon"
             width="20"
@@ -35,7 +33,7 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
             className="text-primary-main box-border mr-2"
             asSVG
           />
-          {city}
+          <Text color="text-secondary-text">{location.name}</Text>
         </button>
         {children}
         <div className="mb-7">{burgerSubMenu?.map(renderBurgerSubMenuItem)}</div>

package/mobile/src/components/Header/HeaderSecondaryMenu.tsx

@@ -1,8 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useGeolocation } from '../../hooks/useGeolocation';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useLocation } from '../../hooks/useLocation';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { IconVersion } from '../../model/IconVersion';
+import type { ForeignOffice } from '../../services/sitemap/SitemapProps';
 import { Img } from '../../ui-kit/Img/Img';
+import { Location } from '../../ui-kit/Location/Location';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
 
@@ -10,6 +13,7 @@ interface HeaderSecondaryMenuContent {
   defaultLocation?: string;
   officesLink?: string;
   bgColor?: BgColorVersion;
+  foreignOffices?: ForeignOffice[];
 }
 
 export interface HeaderSecondaryMenuProps extends HeaderSecondaryMenuContent {
@@ -30,8 +34,23 @@ const LINKS_ICON_VERSION_MAP: Record<BgColorVersion, IconVersion> = {
 };
 
 export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
-  ({ className, officesLink, defaultLocation = 'Москва', bgColor = 'bg-white' }) => {
-    const [city, getCity] = useGeolocation(defaultLocation);
+  ({
+    className,
+    officesLink,
+    defaultLocation = 'Москва',
+    foreignOffices,
+    bgColor = 'bg-white',
+  }) => {
+    const [isShowLocationModal, setShowLocationModal] = useState<boolean>(false);
+
+    const [location, onChangeLocation] = useLocation(defaultLocation);
+
+    const showLocationModal = () => {
+      setShowLocationModal(true);
+    };
+    const hideLocationModal = () => {
+      setShowLocationModal(false);
+    };
 
     return (
       <div className={`flex items-center ${className || ''}`}>
@@ -39,9 +58,9 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           className="mr-5"
           flat={true}
           href="#"
-          text={city}
+          text={location.name}
           ariaLabel="Местоположение"
-          onClick={getCity}
+          onClick={showLocationModal}
           bgColor={bgColor}
         />
         {officesLink ? (
@@ -76,6 +95,14 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
             asSVG
           />
         </HeaderSecondaryMenuButton>
+        {isShowLocationModal ? (
+          <Location
+            currentLocation={location}
+            foreignOffices={foreignOffices}
+            onChangeLocation={onChangeLocation}
+            close={hideLocationModal}
+          />
+        ) : null}
       </div>
     );
   },

package/mobile/src/components/Header/HeaderTop.tsx

@@ -1,13 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { LogoType } from '../../model/LogoType';
 import { Img } from '../../ui-kit/Img/Img';
 import { Logo } from '../../ui-kit/Logo/Logo';
 
 export interface HeaderTopProps {
   onClick: () => void;
   bgColor?: BgColorVersion;
+  logo?: LogoType;
 }
-export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor }) => (
+export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor, logo }) => (
   <div className="flex items-center justify-between border-0 border-b border-main-divider h-12">
     <div className="flex items-center">
       <button
@@ -23,7 +25,7 @@ export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor }) => (
           asSVG
         />
       </button>
-      <Logo className="mr-8" bgColor={bgColor} />
+      <Logo className="mr-8" bgColor={bgColor} logo={logo} />
     </div>
     <button
       className={`${

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

@@ -8,7 +8,7 @@
         "button": {
           "icon": {
             "ui:field": "icon"
-          },
+          }, 
           "iconRight": {
             "ui:field": "icon"
           }

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

@@ -29,6 +29,7 @@
         "text": "Кнопка",
         "version": "primary"
       }
-    ]
+    ],
+    "isImageOnRightSide": true
   }
 }

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

@@ -22,30 +22,33 @@ export const ProductTile = JSX<ProductTileProps>(
     benefits = [],
     buttons,
     image,
+    isImageOnRightSide = true,
     version = 'primary',
     ...rest
   }) => (
     <BlockWrapper
-      className={`overflow-hidden font-sans p-9 box-border relative justify-between grid min-h-[364px]
-          ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)}`}
+      className={`overflow-hidden font-sans p-9 box-border relative min-h-[364px]
+          ${VersionStyleMap[version]} ${getTileRightPadding(className)} ${className}`}
       {...rest}
     >
-      <Headline
-        className={`!p-0 !bg-transparent z-10 ${title || description ? 'mb-3.5' : ''}`}
-        as="h2"
-        title={title}
-        description={description}
-        headlineVersion={headlineVersion}
-        bgColorHeadline={version}
-        align="left"
-        {...rest}
-      />
-      {renderBenefits(benefits, version, image)}
-      {additionalDescription ? renderAdditionalDescription(additionalDescription, image) : null}
-      {buttons?.length ? (
-        <ButtonSection buttons={buttons} className="flex self-end mt-5 gap-4 z-10 text-l" />
-      ) : null}
-      {image?.src ? <Img className="absolute right-0 bottom-0" image={image} /> : null}
+      <div className={`flex flex-col ${isImageOnRightSide ? '' : 'items-end'}`}>
+        <Headline
+          className={`!p-0 !bg-transparent z-10 ${title || description ? 'mb-3.5' : ''}`}
+          as="h2"
+          title={title}
+          description={description}
+          headlineVersion={headlineVersion}
+          bgColorHeadline={version}
+          align="left"
+          {...rest}
+        />
+        {renderBenefits(benefits, version, image)}
+        {additionalDescription ? renderAdditionalDescription(additionalDescription, image) : null}
+        {buttons?.length ? (
+          <ButtonSection buttons={buttons} className="mt-5 gap-4 z-10 text-l" />
+        ) : null}
+      </div>
+      {renderImage(image, isImageOnRightSide)}
     </BlockWrapper>
   ),
 );
@@ -87,3 +90,16 @@ function renderAdditionalDescription(additionalDescription: string, image?: Pict
     <div className={`text-m-light mt-2.5 z-10 ${DESCRIPTION_WIDTH}`}>{additionalDescription}</div>
   );
 }
+
+function renderImage(image?: Picture, isImageOnRightSide?: boolean) {
+  if (!image?.src) {
+    return null;
+  }
+
+  return (
+    <Img
+      className={`absolute ${isImageOnRightSide ? 'right-0' : 'left-0'} bottom-0`}
+      image={image}
+    />
+  );
+}

package/mobile/src/components/ProductTile/ProductTileContent.ts

@@ -33,4 +33,6 @@ export type ProductTileContent = HeadlineProps &
     benefits?: TextBenefit[];
     /** @title Дополнительное описание */
     additionalDescription?: string;
+    /** @title Картинка справа/текст слева */
+    isImageOnRightSide?: boolean;
   };

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

@@ -28,11 +28,12 @@
         },
         "title": "Заголовок 2",
         "description": "Описание 2",
-        "socialMedia": [
-          { "href": "https://t.me" },
-          { "href": "https://vk.com" },
-          { "href": "https://ok.ru" }
-        ]
+        "button": {
+          "href": "",
+          "text": "Подробнее",
+          "target": "_self",
+          "version": "primary"
+        }
       },
       {
         "image": {

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

@@ -4,6 +4,14 @@
       "items": {
         "image": {
           "ui:field": "picture"
+        },
+        "button": {
+          "icon": {
+            "ui:field": "icon"
+          }, 
+          "iconRight": {
+            "ui:field": "icon"
+          }
         }
       }
     }

package/mobile/src/components/Recommendation/RecommendationCard.tsx

@@ -41,7 +41,7 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
               <SocialMedia className="pt-10 pb-0" media={socialMedia} version={version} />
             ) : null}
             {button?.text ? (
-              <div className="pt-2">{renderButton({ button, buttonClassName: 'mt-16' })}</div>
+              <div className="pt-2">{renderButton({ button, buttonClassName: 'mt-16 px-5' })}</div>
             ) : null}
           </div>
         </BaseTile>

package/mobile/src/hooks/useCachedAsyncData.ts

@@ -0,0 +1,37 @@
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import type { AsyncDataResponse, Fetcher } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+
+const STORAGE_DEFAULT_TTL = 86400000; // 24 * 60 * 60 * 1000
+
+export function useCachedAsyncData<Data = any>(
+  key: string,
+  fetcher: Fetcher<Data, string>,
+  storage: any = globalThis?.localStorage,
+): AsyncDataResponse<Data> {
+  const cachedFetcher: typeof fetcher = useCallback(
+    async (...args) => {
+      const storageKey = `async:${key}`;
+      const storageData: string = storage.getItem(storageKey);
+
+      const cachedData = getParsedData(storageData);
+      if (cachedData) {
+        return cachedData;
+      }
+
+      const data = await fetcher(...args);
+      storage.setItem(storageKey, JSON.stringify({ data, timestamp: Date.now() }));
+
+      return data;
+    },
+    [key, fetcher],
+  );
+
+  return useAsyncData(key, cachedFetcher);
+}
+
+function getParsedData(storageData: string) {
+  const { data = null, timestamp = null } = storageData ? JSON.parse(storageData) : {};
+
+  return data && Date.now() - timestamp < STORAGE_DEFAULT_TTL ? data : undefined;
+}

package/mobile/src/hooks/useLocation.ts

@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { fetchJSONUnsafe } from '../utils/fetchJSON';
+import { useCachedAsyncData } from './useCachedAsyncData';
+
+const REGION_URL = '/api/v1/region';
+
+export interface RegionData {
+  id?: number;
+  code?: string;
+  name?: string;
+}
+
+interface LocationStorageData {
+  manual?: boolean;
+  region: RegionData;
+}
+
+const localStorageLocation = globalThis?.localStorage.getItem('location');
+const currentLocation: LocationStorageData | null = localStorageLocation
+  ? JSON.parse(localStorageLocation)
+  : null;
+
+export function useLocation(
+  defaultLocation: string,
+): [RegionData, (newLocation: RegionData) => void] {
+  const [location, setLocation] = useState<RegionData>(
+    currentLocation?.region ?? { name: defaultLocation },
+  );
+  const { data } = useCachedAsyncData<RegionData>(REGION_URL, fetchJSONUnsafe);
+
+  useEffect(() => {
+    setLocation(
+      currentLocation?.region && currentLocation?.manual
+        ? currentLocation.region
+        : data || { name: defaultLocation },
+    );
+  }, [data]);
+
+  const onChangeLocation = useCallback(
+    (region: RegionData) => {
+      globalThis?.localStorage.setItem('location', JSON.stringify({ manual: true, region }));
+      setLocation(region);
+    },
+    [setLocation],
+  );
+
+  return [location, onChangeLocation];
+}

package/mobile/src/hooks/useRegions.ts

@@ -0,0 +1,16 @@
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { fetchJSONUnsafe } from '../utils/fetchJSON';
+
+const REGIONS_URL = '/api/v1/regions';
+
+export interface Region {
+  id?: number;
+  code?: string;
+  name?: string;
+}
+
+export function useRegions(): Region[] {
+  const { data } = useAsyncData<Region[]>(REGIONS_URL, fetchJSONUnsafe);
+
+  return data || [];
+}

package/mobile/src/model/LogoType.ts

@@ -0,0 +1,6 @@
+import type { Picture } from './Picture';
+
+export type LogoType = {
+  image?: Picture;
+  title?: string;
+};

package/mobile/src/services/sitemap/SitemapProps.ts

@@ -1,4 +1,5 @@
 import type { LinkProps } from '../../model/LinkProps';
+import type { LogoType } from '../../model/LogoType';
 import type { Picture } from '../../model/Picture';
 
 /**
@@ -19,13 +20,19 @@ export interface DispositionItem extends LinkProps {
   icon?: Picture;
 }
 
+/**
+ * @title Представительства за рубежом
+ * @required ["text", "href"]
+ */
+export interface ForeignOffice extends LinkProps {
+  icon?: Picture;
+}
+
 export interface SitemapDataProps {
   topItems?: TopMenuItem[];
   dispositions?: DispositionItem[];
-  logo?: {
-    image?: Picture;
-    title?: string;
-  };
+  logo?: LogoType;
+  foreignOffices?: ForeignOffice[];
   defaultLocation?: string;
   officesLink?: string;
 }