@redneckz/wildless-cms-uni-blocks 0.3.91 → 0.3.93

package/mobile/src/components/Footer/Contacts.tsx

@@ -40,7 +40,7 @@ const renderContact = (item: ContactInfo, index: number) => {
   return (
     <div className="mb-4" key={String(index)}>
       <div>{renderText(type, text)}</div>
-      <div className="mt-1 font-sans text-s-light text-secondary-text">{description}</div>
+      <div className="mt-1 text-s-light text-secondary-text">{description}</div>
     </div>
   );
 };
@@ -50,7 +50,7 @@ const renderText = (type: ContactInfo['type'], text = '') => {
     case 'tel':
       return (
         <a
-          className="font-sans text-xl-light text-primary-text no-underline"
+          className="text-h6 text-primary-text hover:text-primary-main no-underline"
           href={`tel:${formatTel(text)}`}
         >
           {text}
@@ -58,10 +58,7 @@ const renderText = (type: ContactInfo['type'], text = '') => {
       );
     case 'email':
       return (
-        <a
-          className="font-sans text-xl-light text-primary-text no-underline"
-          href={`mailto:${text}`}
-        >
+        <a className="text-xl-light text-primary-text no-underline" href={`mailto:${text}`}>
           {text}
         </a>
       );

package/mobile/src/components/Footer/Footer.tsx

@@ -30,7 +30,7 @@ export const Footer = JSX<FooterProps>(
     const dispositions = sitemap?.dispositions;
 
     return (
-      <footer className={`px-4 py-[26px] bg-white ${className}`}>
+      <footer className={`font-sans px-4 py-[26px] bg-white ${className}`}>
         <Contacts className="overflow-hidden" items={contacts} context={context} hasButton />
         <Accordion
           context={context}

package/mobile/src/components/Footer/HorizontalNavigation.tsx

@@ -15,7 +15,7 @@ export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
 
     return (
       <div className={className}>
-        <span className="text-primary-text font-sans font-medium text-sm">{title}</span>
+        <span className="text-primary-text font-medium text-sm">{title}</span>
         {links?.length ? (
           <div className="flex flex-col gap-2 pt-3">
             {links.map((_, i) => (

package/mobile/src/components/Footer/HorizontalNavigationLink.tsx

@@ -10,7 +10,7 @@ interface HorizontalNavigationLinkProps extends LinkProps {
 export const HorizontalNavigationLink = JSX<Partial<HorizontalNavigationLinkProps>>(
   ({ className = '', index, text, href, target, onClick }) => (
     <a
-      className={`font-sans text-secondary-text hover:text-primary-main inline-block no-underline ${className}`}
+      className={`text-secondary-text hover:text-primary-main inline-block no-underline ${className}`}
       href={href}
       target={target}
       onClick={onClick}

package/mobile/src/components/Footer/MediaButton.tsx

@@ -51,7 +51,7 @@ export const MediaButton = JSX<MediaButtonProps>(({ href, version = 'primary' })
   const classes =
     version === 'secondary'
       ? 'bg-secondary-light hover:bg-secondary-hover'
-      : 'border-main-divider border-solid border-[1px] hover:bg-primary-main';
+      : 'border-solid border-[1px] border-main-divider hover:border-transparent hover:bg-primary-main';
 
   const isPrimary = version === 'primary';
 

package/mobile/src/components/Footer/Sitemap.tsx

@@ -19,7 +19,7 @@ export const Sitemap = JSX<SitemapProps>(({ className = '', items, context }) =>
   };
 
   return (
-    <div className={`flex items-start justify-between gap-11 xl:gap-5 ${className}`}>
+    <div className={`flex items-start justify-between gap-[54px] xl:gap-5 ${className}`}>
       {mergedItems?.map((_, i) => renderColumn(_, i, linkParams))}
     </div>
   );
@@ -29,9 +29,9 @@ const renderColumn = (c: TopMenuItem, index: number, { router, handlerDecorator
   const { text, href, items, target } = c;
 
   return (
-    <div key={String(index)} className="flex flex-col w-1/5 last:w-1/4 gap-[14px]">
+    <div key={String(index)} className="flex flex-col w-1/5 last:w-1/4 gap-3.5">
       <a
-        className="block font-sans leading-5 text-l text-primary-text no-underline"
+        className="block leading-5 text-l text-primary-text hover:text-primary-main no-underline"
         href={href}
         target={target || '_self'}
       >
@@ -50,7 +50,7 @@ interface ColumnItemProps extends LinkProps {
 
 const ColumnItem = JSX<ColumnItemProps>(({ text, href, target, index }) => (
   <a
-    className="block font-sans text-l-light text-secondary-text hover:text-primary-main no-underline"
+    className="block text-l-light text-secondary-text hover:text-primary-main no-underline"
     href={href}
     target={target || '_self'}
   >

package/mobile/src/components/Footer/TextInformation.tsx

@@ -10,7 +10,7 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
   return (
     <div className={`${className || ''}`}>
       <div className="py-6">
-        <span className="font-sans font-normal text-xs text-secondary-text">
+        <span className="font-normal text-xs text-secondary-text">
           {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
         </span>
       </div>

package/mobile/src/components/Footer/TextInformationLink.tsx

@@ -10,7 +10,7 @@ interface TextInformationLinkProps extends LinkProps {
 export const TextInformationLink = JSX<Partial<TextInformationLinkProps>>(
   ({ className = '', index, text, href, target, onClick }) => (
     <a
-      className={`font-sans text-xs text-secondary-text visited:text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${className}`}
+      className={`text-xs text-secondary-text visited:text-secondary-text hover:text-primary-main inline-block no-underline max-w-[292px] ${className}`}
       href={href}
       target={target}
       onClick={onClick}

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

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { IconVersion } from '../../model/IconVersion';
 import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { IconVersion } from '../../model/IconVersion';
 import type { UniBlockProps } from '../../types';
 import { Img } from '../../ui-kit/Img/Img';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
@@ -50,22 +50,24 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           bgColor={bgColor}
         />
         <HeaderSecondaryMenuButton
-          className={`mr-5 ${COLORS_MAP[bgColor]}`}
+          className={`mr-5 group ${COLORS_MAP[bgColor]}`}
           ariaLabel="Поиск по сайту"
         >
           <Img
             image={{ icon: 'LoupeIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }}
-            className="h-full"
+            className="h-full pointer-events-none"
+            imageClassName="group-hover:text-primary-main pointer-events-none"
             asSVG
           />
         </HeaderSecondaryMenuButton>
         <HeaderSecondaryMenuButton
-          className={`${LINKS_COLORS_MAP[bgColor]} min-w-[32px] min-h-[32px]`}
+          className={`${LINKS_COLORS_MAP[bgColor]} group min-w-[32px] min-h-[32px]`}
           ariaLabel="Дополнительные ссылки"
         >
           <Img
             image={{ icon: 'GridIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }}
-            className="h-full bg-secondary-light rounded-full"
+            className="h-full bg-main-divider rounded-full pointer-events-none"
+            imageClassName="group-hover:text-primary-main"
             asSVG
           />
         </HeaderSecondaryMenuButton>

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

@@ -39,7 +39,7 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems = [],
   };
 
   return (
-    <nav className="relative mt-5">
+    <nav className="relative mt-6">
       <div className="overflow-hidden whitespace-nowrap mr-52 pb-3">
         {subItems.map((_, i) => (
           <IntersectionObserverTag

package/mobile/src/components/ProductBlock/renderBackwardButton.tsx

@@ -13,7 +13,7 @@ export function renderBackwardButton(
   const backwardIcon = button?.icon || { icon: 'ArrowLeftIcon' };
 
   return (
-    <div className={`flex items-center ${className}`}>
+    <div className={`flex items-center cursor-pointer ${className}`} onClick={onClick}>
       <Button
         version={version}
         rounded
@@ -21,7 +21,6 @@ export function renderBackwardButton(
         ariaLabel={text}
         href={href}
         target={target}
-        onClick={onClick}
       >
         <Img className="w-4 h-4" image={{ ...backwardIcon, iconVersion }} asSVG />
       </Button>

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

@@ -57,7 +57,7 @@ export const ProductTile = JSX<ProductTileProps>(
           <ButtonSection
             context={context}
             buttons={buttons}
-            className="flex self-end mt-5 gap-4 z-[1]"
+            className="flex self-end mt-5 gap-4 z-[1] text-l"
           />
         ) : null}
         {image?.src ? <Img className="absolute right-0 bottom-0" image={image} /> : null}
@@ -96,7 +96,7 @@ function renderBenefitDescription(benefit: TextBenefit, i: number, version = 'pr
   };
 
   return (
-    <div key={String(i)} className={`${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
+    <div key={String(i)} className={`text-m ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
       {benefit.description}
     </div>
   );

package/mobile/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -0,0 +1,33 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useSafeDepositRental } from '../../hooks/useSafeDepositRental';
+import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import type { SafeDepositRentalContent } from './SafeDepositRentalContent';
+import { SafeDepositRentalForm } from './SafeDepositRentalForm';
+import { SafeDepositRentalTotal } from './SafeDepositRentalTotal';
+
+export interface SafeDepositRentalProps extends SafeDepositRentalContent, UniBlockProps {}
+
+const DEFAULT_DAYS = 26;
+
+export const SafeDepositRental = JSX<SafeDepositRentalProps>(
+  ({ context, className = '', ...rest }) => {
+    const [days, setDays] = context.useState(DEFAULT_DAYS);
+    const data = useSafeDepositRental(context.useAsyncData);
+
+    return (
+      <BlockWrapper context={context} className={`bg-white px-8 py-12 ${className}`} {...rest}>
+        <div className="flex justify-between align-top mb-6">
+          {data?.cities?.length ? (
+            <SafeDepositRentalForm {...data} days={days} setDays={setDays} context={context} />
+          ) : null}
+          <SafeDepositRentalTotal days={days} />
+        </div>
+        <p className="text-button font-light text-secondary-text">
+          Аренда СЯ, в случае проведения процедуры купли-продажи, с использованием наличных денег
+          или процедуры ипотечной сделки
+        </p>
+      </BlockWrapper>
+    );
+  },
+);

package/mobile/src/components/SafeDepositRental/SafeDepositRentalContent.ts

@@ -0,0 +1,7 @@
+/**
+ * @title Аренда сейфовых ячеек
+ */
+export interface SafeDepositRentalContent {
+  /** @title Заголовок */
+  title?: string;
+}

package/mobile/src/components/SafeDepositRental/SafeDepositRentalForm.tsx

@@ -0,0 +1,164 @@
+import { UniBlockProps } from '../../types';
+import { Button } from '../../ui-kit/Button/Button';
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import { Radio } from '../../ui-kit/Radio/Radio';
+import { Select } from '../../ui-kit/Select/Select';
+import { SelectOption } from '../../ui-kit/Select/SelectOption';
+
+export type SafeDepositRentalFormProps = UniBlockProps;
+
+export const SafeDepositRentalForm = ({
+  cities,
+  cellDimensions,
+  cellOptions,
+  days,
+  setDays,
+  context,
+}) => {
+  return (
+    <div className="flex-1 mr-9">
+      {cities.length ? renderCitiesOffices(cities, context) : null}
+      {renderRentalPeriod(days, setDays)}
+      {cellDimensions.length && cellOptions.length
+        ? renderDimensionsOptions(cellDimensions, cellOptions, context)
+        : null}
+      <span className="text-secondary-text font-light">Тип договора</span>
+      <div className="flex justify-between items-center mt-5">
+        {renderRadioButtons(context)}
+        <Button text="Офисы на карте" version="primary" />
+      </div>
+    </div>
+  );
+};
+
+const renderCitiesOffices = (cities, context) => {
+  const [selectedCity, setSelectedCity] = context.useState(cities[0].city);
+
+  const setSelected = (_) => setSelectedCity(_);
+
+  const offices = cities.find((_) => _.city === selectedCity).offices;
+
+  return (
+    <div className="flex justify-between mb-6">
+      <div className="w-full mr-4">
+        {cities.length
+          ? renderSelect({
+              data: cities,
+              field: 'city',
+              selected: selectedCity,
+              setSelected,
+              label: 'Город',
+            })
+          : null}
+      </div>
+      <div className="w-full">
+        {offices.length
+          ? renderSelect({
+              data: offices,
+              field: 'office',
+              selected: offices[0],
+              setSelected,
+              label: 'Отделение',
+            })
+          : null}
+      </div>
+    </div>
+  );
+};
+
+const renderDimensionsOptions = (cellDimensions, cellOptions, context) => {
+  const [selectedDimension, setSelectedDimension] = context.useState(cellDimensions[0].dimension);
+  const [selectedOption, setSelectedOption] = context.useState(cellOptions[0].option);
+
+  return (
+    <div className="flex justify-between mb-6">
+      <div className="mr-4 w-full">
+        {cellDimensions.length
+          ? renderSelect({
+              data: cellDimensions,
+              field: 'dimension',
+              selected: selectedDimension,
+              setSelected: setSelectedDimension,
+              label: 'Размер ячейки',
+            })
+          : null}
+      </div>
+      <div className="w-full">
+        {cellOptions.length
+          ? renderSelect({
+              data: cellOptions,
+              field: 'option',
+              selected: selectedOption,
+              setSelected: setSelectedOption,
+              label: 'Параметры ячейки, мм (ВхШхД)',
+            })
+          : null}
+      </div>
+    </div>
+  );
+};
+
+interface SelectProps {
+  data: any[];
+  field: string;
+  selected: string;
+  setSelected: (value: string) => void;
+  label: string;
+}
+
+const renderSelect = (props: SelectProps) => {
+  const { data, field, selected, setSelected, label } = props;
+
+  return (
+    <div>
+      <span className="block font-light text-m mb-2">{label}</span>
+      <Select
+        className="h-14 border border-gray p-4 rounded-md text-m-sm w-full cursor-pointer"
+        value={selected}
+        onChange={(_) => setSelected(_)}
+      >
+        {data.map((_, i) => (
+          <SelectOption key={String(i)} value={_?.[field]}>
+            {_?.[field]}
+          </SelectOption>
+        ))}
+      </Select>
+    </div>
+  );
+};
+
+export const renderRentalPeriod = (days, setDays) => {
+  const items = ['От 1 дня', 'До 365 дней'];
+
+  return (
+    <div className="mb-6">
+      <span className="block font-light text-m mb-[3px]">Срок аренды</span>
+      <InputRange min={1} max={365} value={days} items={items} onChange={setDays} />
+    </div>
+  );
+};
+
+const renderRadioButtons = (context) => {
+  const [selected, setSelected] = context.useState('option1');
+  const onChange = (_: React.ChangeEvent<HTMLInputElement>) => setSelected(_.target.value);
+
+  return (
+    <div>
+      <Radio
+        className="mb-2"
+        name="contractType"
+        text="Простое хранение"
+        value="option1"
+        checked={selected === 'option1'}
+        onChange={onChange}
+      />
+      <Radio
+        name="contractType"
+        text="Сделка с недвижимостью"
+        value="option2"
+        checked={selected === 'option2'}
+        onChange={onChange}
+      />
+    </div>
+  );
+};

package/mobile/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -0,0 +1,57 @@
+import type { UniBlockProps } from '../../types';
+import { Img } from '../../ui-kit/Img/Img';
+
+export type SafeDepositRentalTotalProps = UniBlockProps;
+
+type Days = {
+  days: number;
+};
+
+export const SafeDepositRentalTotal = ({ days }: Days) => {
+  const price = calculatePrice(days);
+
+  return (
+    <div className="flex flex-col justify-between">
+      <div className="flex">
+        {renderTotal('Аренда за', days, 'mr-11')}
+        {renderTotal('Цена', price + ' ₽')}
+      </div>
+      <div className="bg-primary-main px-10 pt-10 pb-4 text-center">
+        <Img image={{ icon: 'PackA4' }} width="290" height="257" asSVG />
+
+        <span className="font-light text-white opacity-80 mt-2 inline-block">
+          На рисунки изображена пачка<br></br> листов формата А4
+        </span>
+      </div>
+    </div>
+  );
+};
+
+const renderTotal = (label, total, className = '') => {
+  return (
+    <div className={className}>
+      <span className="block font-light text-m mb-1">{label}</span>
+      <span className="text-h3">{total}</span>
+    </div>
+  );
+};
+
+const calculatePrice = (days: number) => {
+  let TariffType = 1;
+
+  switch (true) {
+    case days > 30 && days <= 90:
+      TariffType = 2;
+      break;
+
+    case days > 90 && days <= 180:
+      TariffType = 3;
+      break;
+
+    case days > 180 && days <= 365:
+      TariffType = 4;
+      break;
+  }
+
+  return days * TariffType;
+};

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

@@ -14,6 +14,11 @@
           "height": 48
         },
         "format": "webp"
+      },
+      "button": {
+        "text": "Кнопка",
+        "target": "_blank",
+        "version": "primary"
       }
     },
     {
@@ -25,6 +30,11 @@
           "height": 48
         },
         "format": "webp"
+      },
+      "button": {
+        "text": "Кнопка",
+        "target": "_blank",
+        "version": "primary"
       }
     },
     {
@@ -36,6 +46,11 @@
           "height": 48
         },
         "format": "webp"
+      },
+      "button": {
+        "text": "Кнопка",
+        "target": "_blank",
+        "version": "primary"
       }
     }
   ],

package/mobile/src/components/StepsBlock/StepsBlock.tsx

@@ -6,7 +6,7 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
 import { checkIsIconRenderable } from '../../utils/checkIsIconRenderable';
-import { getStyleMap } from './StepsBlockStyleMaps';
+import { STEPS_BLOCK_STYLE_MAPS } from './StepsBlockStyleMaps';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
@@ -30,7 +30,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
     size = 'normal',
     version = 'primary',
   }) => {
-    const styleMap = getStyleMap(version);
+    const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
 
     return (
       <section
@@ -62,7 +62,7 @@ const renderStepTitle =
   (step: Step, i: number, steps: Step[]) => {
     const isLastStep = steps.length - 1 === i;
     const margin = size === 'normal' ? 'ml-[34px]' : 'ml-6';
-    const styleMap = getStyleMap(version);
+    const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
 
     return (
       <div key={String(i)}>
@@ -93,7 +93,7 @@ const renderStepTitle =
   };
 
 const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step, i: number) => {
-  const styleMap = getStyleMap(version);
+  const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
   const iconAreaSize = STEPS_SIZE_MAP[size];
 
   const iconSize = size === 'normal' ? '38' : '27';

package/mobile/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,7 +1,7 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import type { SizeVersion } from '../../model/SizeVersion';
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
 /**
  * @title Шаг
@@ -23,7 +23,8 @@ export interface Step {
    * }
    */
   icon?: Picture;
-  button?: ButtonProps;
+  /** @title Кнопка */
+  button?: ButtonWithIconProps;
 }
 
 /**
@@ -45,7 +46,8 @@ export interface StepsBlockContent {
    * @maxItems 4
    */
   steps?: Step[];
-  button?: ButtonProps;
+  /** @title Кнопка */
+  button?: ButtonWithIconProps;
   /**
    * @title Размер шагов (моб.)
    * @default normal

package/mobile/src/components/StepsBlock/StepsBlockStyleMaps.ts

@@ -9,7 +9,7 @@ export type StyleType = {
   iconConnector: string;
 };
 
-const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
+export const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
   primary: {
     background: 'bg-white',
     title: 'text-primary-text',
@@ -27,5 +27,3 @@ const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
     iconConnector: 'bg-white',
   },
 };
-
-export const getStyleMap = (version: BlockVersion): StyleType => STEPS_BLOCK_STYLE_MAPS[version];