@redneckz/wildless-cms-uni-blocks 0.5.4 → 0.5.6

package/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -1,10 +1,9 @@
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
-import type { ListContent } from '../../ui-kit/List/ListContent';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
-import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
 import type { Picture } from '../../model/Picture';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
+import type { ListContent } from '../../ui-kit/List/ListContent';
 
 /**
  * @title Мобильное приложение
@@ -12,12 +11,26 @@ import type { Picture } from '../../model/Picture';
 export type MobileAppTileContent = HeadlineCommonProps &
   HeadingCommonProps &
   ButtonContent &
-  ListContent &
-  ImageContent & {
+  ListContent & {
     // TODO: description для мобильной версии
     /** @title QR-код */
     qr?: Picture;
     /** @title Ссылка */
     href?: string; // TODO: для мобильной версии
     version?: BlockVersion;
+    /**
+     * @default {
+     *   "format": "webp",
+     *   "size": {
+     *       "width": 600
+     *   },
+     *   "sources": [{
+     *       "media": 1279,
+     *	     "width": 360,
+     *       "format": "webp",
+     *       "alignment": "center"
+     *   }]
+     * }
+     */
+    image?: Picture;
   };

package/src/components/OfficeServicesBlock/OfficeServicesBlock.tsx

@@ -30,9 +30,9 @@ const renderListItems = (itemList: OfficeServicesBlockList, i) => (
   <li key={`list_item_${String(i)}`} className="flex mb-5 last:mb-0 list-none">
     {itemList.icon ? (
       <Img
-        className="mr-3 max-w-6 max-h-6"
-        width="24px"
-        height="24px"
+        className="mr-3 min-w-6 min-h-6 w-6 h-6"
+        width="24"
+        height="24"
         asSVG
         image={itemList.icon}
       />

package/src/components/OfficeServicesBlock/OfficeServicesBlockContent.ts

@@ -1,27 +1,12 @@
-import type { Picture } from '../../model/Picture';
+import type { IconProps, Picture } from '../../model/Picture';
+import type { LabelProps, TitleProps } from '../../model/HeadlineType';
 
-export interface OfficeServicesBlockList {
-  /**
-   *  @title Иконка
-   *  @default {
-   *   "size": {
-   *     "width": 24,
-   *     "height": 24
-   *   },
-   *   "format": "webp"
-   * }
-   */
-  icon?: Picture;
-  /** @title Текст */
-  label?: string;
-}
+export type OfficeServicesBlockList = LabelProps & IconProps & {};
 
 /**
  * @title Офисные услуги
  */
-export interface OfficeServicesBlockContent {
-  /** @title Заголовок */
-  title?: string;
+export type OfficeServicesBlockContent = TitleProps & {
   /** @title Список услуг */
   servicesList?: OfficeServicesBlockList[];
-}
+};

package/src/components/OtherProducts/OtherProductsContent.ts

@@ -1,5 +1,6 @@
 import type { ColorPalette } from '../../types';
 import type { BlockDef } from '../../ui-kit/BlocksList/BlocksListProps';
+import type { TitleProps } from '../../model/HeadlineType';
 
 /**
  * @title Элемент списка
@@ -19,10 +20,8 @@ export interface BlockItemCommonProps {
 /**
  * @title Другие продукты
  */
-export interface OtherProductsContent {
-  /** @title Заголовок */
-  title?: string;
+export type OtherProductsContent = TitleProps & {
   /** @title Список */
   blockItems?: BlockItemCommonProps[];
   colorPalette?: ColorPalette;
-}
+};

package/src/components/PictureText/PictureText.tsx

@@ -28,7 +28,7 @@ export const PictureText = JSX<PictureTextProps>(
   }) => {
     return (
       <BlockWrapper
-        className={`relative font-sans py-12 px-28 ${VersionStyleMap[version]} ${className}`}
+        className={`relative font-sans py-12 px-24 ${VersionStyleMap[version]} ${className}`}
         context={context}
         {...rest}
       >

package/src/components/PictureText/PictureTextContent.ts

@@ -1,13 +1,27 @@
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
-import type { BenefitsProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
-
-export type TitleWithImageContent = HeadlineCommonProps & ImageContent;
+import type { Picture } from '../../model/Picture';
+import type { BenefitsProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
+import type { BlockVersion } from '../../model/BlockVersion';
 
 /**
  * @title Картинка с текстом
  */
-export interface PictureTextContent extends BenefitsProps, TitleWithImageContent {
+export interface PictureTextContent extends BenefitsProps, HeadlineCommonProps {
+  /**
+   * @default {
+   *   "format": "webp",
+   *   "size": {
+   *       "width": 400
+   *   },
+   *   "sources": [{
+   *       "media": 1279,
+   *       "width": 240,
+   *       "format": "webp",
+   *       "alignment": "center"
+   *   }]
+   * }
+   */
+  image?: Picture;
   /**
    * @title Картинка справа/текст слева
    * @default false
@@ -17,4 +31,5 @@ export interface PictureTextContent extends BenefitsProps, TitleWithImageContent
   monthLimit?: number;
   /** @title Страховая сумма */
   sum?: number;
+  version?: BlockVersion;
 }

package/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -82,6 +82,7 @@ export default {
       <ProductBlock
         className="col-span-12"
         context={context}
+        backwardButton={backwardButton}
         headlineVersion="L"
         title="Потребительский кредит наличными"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
@@ -90,27 +91,6 @@ export default {
         buttons={buttons}
         image={image}
       />
-      <ProductBlock
-        className="col-span-12"
-        context={context}
-        title="Потребительский кредит наличными"
-        headlineVersion="L"
-        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
-        benefits={benefits}
-        benefitsVersion="white"
-        image={image}
-      />
-      <ProductBlock
-        className="col-span-12"
-        context={context}
-        title="Потребительский кредит наличными"
-        headlineVersion="L"
-        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
-        benefits={benefits}
-        benefitsVersion="white"
-        image={image}
-        version="secondary"
-      />
     </div>
   ),
   'primary with color benefits': (

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,24 +1,27 @@
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { HeadlineProps } from '../../model/HeadlineType';
 import type { IconVersion } from '../../model/IconVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import type { ButtonContent, BackwardButtonProps } from '../../ui-kit/Button/ButtonProps';
-import type { ListContent } from '../../ui-kit/List/ListContent';
-import type { HeadlineProps } from '../../model/HeadlineType';
-import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import type { Picture } from '../../model/Picture';
+import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
+import type { BackwardButtonProps, ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { ListContent } from '../../ui-kit/List/ListContent';
 
 export type ProductBlockInnerContent = HeadlineProps &
   ListContent &
   ButtonContent & {
     /**
-     *  @title Иконка
-     *  @default
-     * {
+     * @default {
+     *   "format": "webp",
      *   "size": {
-     *     "width": 608,
-     *     "height": 299
+     *       "width": 600
      *   },
-     *   "format": "webp"
+     *   "sources": [{
+     *       "media": 1279,
+     *	     "width": 360,
+     *       "format": "webp",
+     *       "alignment": "northeast"
+     *   }]
      * }
      */
     image?: Picture;

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

@@ -141,6 +141,18 @@ export default {
       />
     </div>
   ),
+  'long-title-benefits-without-image': (
+    <div className="container grid grid-cols-12">
+      <ProductTile
+        context={context}
+        className="col-span-6"
+        title="Кредит пенсионный"
+        description={'Для людей в возрасте до 75 лет'}
+        benefits={multilineBenefits}
+        buttons={buttons2}
+      />
+    </div>
+  ),
   'credit-card': (
     <div className="container grid grid-cols-12">
       <ProductTile

package/src/components/ProductTile/ProductTile.tsx

@@ -5,7 +5,7 @@ import type { ProductTileContent, TextBenefit } from './ProductTileContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Img } from '../../ui-kit/Img/Img';
-import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
+import type { Picture } from '../../model/Picture';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import { Headline } from '../Headline/Headline';
 import { VersionStyleMap } from '../../model/BlockVersion';
@@ -29,9 +29,8 @@ export const ProductTile = JSX<ProductTileProps>(
     return (
       <BlockWrapper
         context={context}
-        className={`overflow-hidden font-sans p-9 box-border relative justify-between grid ${className} ${
-          VersionStyleMap[version]
-        } ${getTileRightPadding(className)} ${getTileMinHeight(className)}`}
+        className={`overflow-hidden font-sans p-9 box-border relative justify-between grid min-h-[364px]
+          ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)}`}
         {...rest}
       >
         <Headline
@@ -44,8 +43,10 @@ export const ProductTile = JSX<ProductTileProps>(
           bgColorHeadline={version}
           align="left"
         />
-        {renderBenefits(benefits, version)}
-        {additionalDescription ? renderAdditionalDescription(additionalDescription, version) : null}
+        {renderBenefits(benefits, version, image)}
+        {additionalDescription
+          ? renderAdditionalDescription(additionalDescription, image, version)
+          : null}
         {buttons?.length ? (
           <ButtonSection
             context={context}
@@ -59,13 +60,14 @@ export const ProductTile = JSX<ProductTileProps>(
   },
 );
 
-// picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
-const BENEFITS_WIDTH = 'max-w-[calc(100%-186px)]';
+function renderBenefits(benefits: TextBenefit[], version: BlockVersion, image?: Picture) {
+  // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
+  const BENEFITS_WIDTH = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
 
-function renderBenefits(benefits: TextBenefit[], version: BlockVersion) {
   return (
     <div
-      className={`z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline ${BENEFITS_WIDTH}`}
+      className={`z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline 
+        ${BENEFITS_WIDTH}`}
     >
       {benefits.length ? benefits.map(renderBenefit(version)) : null}
     </div>
@@ -92,14 +94,21 @@ function renderBenefit(version: BlockVersion = 'primary') {
   };
 }
 
-function renderAdditionalDescription(additionalDescription: string, version = 'primary') {
+function renderAdditionalDescription(
+  additionalDescription: string,
+  image?: Picture,
+  version: BlockVersion = 'primary',
+) {
   const descStyleMap: Record<BlockVersion, string> = {
     primary: 'text-secondary-text',
     secondary: 'text-white',
   };
 
+  // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
+  const DESCRIPTION_WIDTH = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
+
   return (
-    <div className={`text-m-light mt-2.5 z-10 ${descStyleMap[version]}`}>
+    <div className={`text-m-light mt-2.5 z-10 ${DESCRIPTION_WIDTH} ${descStyleMap[version]}`}>
       {additionalDescription}
     </div>
   );

package/src/components/ProductTile/ProductTileContent.ts

@@ -1,21 +1,30 @@
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { DescriptionProps, HeadlineProps, LabelProps } from '../../model/HeadlineType';
+import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { HeadlineProps } from '../../model/HeadlineType';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 
-export interface TextBenefit {
-  /** @title Название */
-  label?: string;
-  /** @title Описание */
-  description?: string;
-}
+export type TextBenefit = DescriptionProps & LabelProps & {};
 
 /**
  * @title Продуктовая плитка
  */
 export type ProductTileContent = HeadlineProps &
-  ButtonContent &
-  ImageContent & {
+  ButtonContent & {
+    /**
+     * @default {
+     *   "format": "webp",
+     *   "size": {
+     *       "width": 320
+     *   },
+     *   "sources": [{
+     *       "media": 1279,
+     *	     "width": 192,
+     *       "format": "webp",
+     *       "alignment": "southeast"
+     *   }]
+     * }
+     */
+    image?: Picture;
     version?: BlockVersion;
     /**
      * @title Преимущества

package/src/components/Recommendation/RecommendationContent.ts

@@ -1,15 +1,33 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
 import type { LinkCommonProps } from '../../model/LinkProps';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { Picture } from '../../model/Picture';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 
-export interface RecommendationCardTypes extends HeadlineCommonProps, ListContent, ImageContent {
+/**
+ * @title Карточка
+ */
+export interface RecommendationCardTypes extends HeadlineCommonProps, ListContent {
   /**
    * @title Соц сети
    * @minItems 3
    */
   socialMedia?: LinkCommonProps[];
+  /**
+   * @default {
+   *   "format": "webp",
+   *   "size": {
+   *       "width": 290
+   *   },
+   *   "sources": [{
+   *       "media": 1279,
+   *       "width": 174,
+   *       "format": "webp",
+   *       "alignment": "southeast"
+   *   }]
+   * }
+   */
+  image?: Picture;
 }
 
 /**

package/src/components/SafeDepositRental/RegionsAndBranches.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Branch } from './SafeDepositRentalContent';
-import { Region } from './useGetRegions';
+import type { Branch } from '../../hooks/useFetchSafeBoxes';
+import type { Region } from './useGetRegions';
 import { WrapperSelect } from './WrapperSelect';
 
 interface RegionsAndBranchesProps {

package/src/components/SafeDepositRental/SafeBoxCases.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { SafeBoxCase, SafeBoxCaseVolume } from './SafeDepositRentalContent';
+import type { SafeBoxCase, SafeBoxCaseVolume } from '../../hooks/useFetchSafeBoxes';
 import { WrapperSelect } from './WrapperSelect';
 
 interface SafeBoxCasesProps {

package/src/components/SafeDepositRental/SafeDepositRental.fixture.tsx

@@ -4,7 +4,12 @@ import { SafeDepositRental } from './SafeDepositRental';
 export default {
   default: (
     <div className="container grid grid-cols-12 mb-1">
-      <SafeDepositRental className="col-span-12" context={context} />
+      <SafeDepositRental
+        className="col-span-12"
+        context={context}
+        footnote="Аренда СЯ, в случае проведения процедуры купли-продажи, с использованием наличных денег
+          или процедуры ипотечной сделки"
+      />
     </div>
   ),
 };

package/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -1,27 +1,51 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useScript } from '../../hooks/useScript';
+import { projectSettings } from '../../ProjectSettings';
 import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type { SafeDepositRentalContent } from './SafeDepositRentalContent';
 import { SafeDepositRentalForm } from './SafeDepositRentalForm';
 import { useGetRegions } from './useGetRegions';
+import { YandexMap } from './YandexMap';
 
 export interface SafeDepositRentalProps extends SafeDepositRentalContent, UniBlockProps {}
 
 export const SafeDepositRental = JSX<SafeDepositRentalProps>(
-  ({ title, context, className = '', ...rest }) => {
+  ({ title, footnote, context, className = '', ...rest }) => {
+    const [points, setPoints] = useState<number[][]>([]);
+    const [showMap, setShowMap] = useState<boolean>(false);
+
     const regions = useGetRegions();
 
+    const statusScript = useScript(
+      `https://api-maps.yandex.ru/2.1/?apikey=${projectSettings.YANDEX_MAP_API_KEY}&lang=ru_RU`,
+      {
+        removeOnUnmount: true,
+      },
+    );
+
+    const toggleShowMap = () => {
+      setShowMap(!showMap);
+    };
+
     return (
-      <BlockWrapper context={context} className={`bg-white px-8 py-12 ${className}`} {...rest}>
-        {title ? (
-          <Heading title={title} headingType="h3" as="h2" className="mb-2.5 text-center" />
+      <BlockWrapper context={context} className={className} {...rest}>
+        <div className="bg-white px-8 py-12">
+          {title ? (
+            <Heading title={title} headingType="h3" as="h2" className="mb-2.5 text-center" />
+          ) : null}
+          <SafeDepositRentalForm
+            regions={regions}
+            setPoints={setPoints}
+            toggleShowMap={toggleShowMap}
+          />
+          {footnote ? <p className="text-s-light text-secondary-text">{footnote}</p> : null}
+        </div>
+        {statusScript === 'ready' && points.length && showMap ? (
+          <YandexMap points={points} />
         ) : null}
-        <SafeDepositRentalForm regions={regions} />
-        <p className="text-s-light text-secondary-text">
-          Аренда СЯ, в случае проведения процедуры купли-продажи, с использованием наличных денег
-          или процедуры ипотечной сделки
-        </p>
       </BlockWrapper>
     );
   },

package/src/components/SafeDepositRental/SafeDepositRentalContent.ts

@@ -1,28 +1,11 @@
-export interface Tariff {
-  tariffType?: string;
-  tariffValue?: number;
-}
-
-export interface SafeBoxCase {
-  safeBoxCasesSize?: string;
-  tariffs?: Tariff[];
-}
-
-export interface SafeBoxCaseVolume {
-  volume?: string;
-  safeBoxCases?: SafeBoxCase[];
-}
-
-export interface Branch {
-  branchCode?: string;
-  address?: string;
-  safeBoxCaseVolumes?: SafeBoxCaseVolume[];
-}
+import type { Footnote } from '../../model/Footnote';
+import type { TitleProps } from '../../model/HeadlineType';
 
 /**
  * @title Аренда сейфовых ячеек
  */
-export interface SafeDepositRentalContent {
-  /** @title Заголовок */
-  title?: string;
-}
+export type SafeDepositRentalContent = Footnote &
+  TitleProps & {
+    /** @title Сноска */
+    footnote?: string;
+  };

package/src/components/SafeDepositRental/SafeDepositRentalFields.tsx

@@ -0,0 +1,77 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { Branch, SafeBoxCase, SafeBoxCaseVolume } from '../../hooks/useFetchSafeBoxes';
+import { Button } from '../../ui-kit/Button/Button';
+import { RegionsAndBranches } from './RegionsAndBranches';
+import { RenderRadioButtons } from './RenderRadioButtons';
+import { RentalPeriod } from './RentalPeriod';
+import { SafeBoxCases } from './SafeBoxCases';
+import type { SafeDepositRentalFormProps } from './SafeDepositRentalForm';
+import type { HandleChangeState, SafeDepositRentalState } from './SafeDepositRentalTypes';
+import { getBranch, getCoordinates } from './utils';
+
+export interface SafeDepositRentalFieldsProps
+  extends SafeDepositRentalState,
+    SafeDepositRentalFormProps {
+  onChange: HandleChangeState;
+  safeBoxCases?: SafeBoxCase[];
+  caseVolumes?: SafeBoxCaseVolume[];
+}
+
+export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
+  ({
+    regions,
+    selectedRegion,
+    branches,
+    selectedBranch,
+    days,
+    selectedCaseVolume,
+    selectedBoxSize,
+    safeBoxCases,
+    caseVolumes,
+    setPoints,
+    onChange,
+    toggleShowMap,
+  }) => {
+    return (
+      <div className="flex-1 mr-9">
+        <RegionsAndBranches
+          regions={regions}
+          selectedRegion={selectedRegion}
+          onSelectedRegion={(value) => onChange({ selectedRegion: value })}
+          branches={branches}
+          selectedBranch={selectedBranch}
+          onSelectedBranch={onSelectedBranch(onChange, setPoints, branches)}
+        />
+        <RentalPeriod days={days} setDays={(value) => onChange({ days: value })} />
+        <SafeBoxCases
+          caseVolumes={caseVolumes}
+          selectedCaseVolume={selectedCaseVolume}
+          onSelectedCaseVolume={onSelectedCaseVolume(onChange)}
+          safeBoxCases={safeBoxCases}
+          selectedBoxSize={selectedBoxSize}
+          onSelectedBoxSize={(value) => onChange({ selectedBoxSize: value })}
+        />
+        <span className="text-secondary-text text-l-light">Тип договора</span>
+        <div className="flex justify-between items-center mt-5">
+          <RenderRadioButtons />
+          <Button text="Офисы на карте" version="primary" onClick={toggleShowMap} />
+        </div>
+      </div>
+    );
+  },
+);
+
+const onSelectedBranch =
+  (
+    onChange: HandleChangeState,
+    setPoints: SafeDepositRentalFieldsProps['setPoints'],
+    branches: Branch[],
+  ) =>
+  (value: string) => {
+    onChange({ selectedBranch: value, selectedCaseVolume: '', selectedBoxSize: '' });
+    setPoints(getCoordinates(value ? getBranch(branches, value) : branches));
+  };
+
+const onSelectedCaseVolume = (onChange: HandleChangeState) => (value: string) => {
+  onChange({ selectedCaseVolume: value, selectedBoxSize: '' });
+};