@sima-land/moleculas 12.3.0 → 13.0.0

package/desktop/components/product-card/index.d.ts

@@ -1,29 +1,16 @@
 import React from 'react';
-import { ProductInfoProps } from '../../../common/components/product-info';
-export interface ProductCardProps extends ProductInfoProps, React.HTMLAttributes<HTMLDivElement> {
-    /** Будет вызвана при уходе курсора с элемента. */
-    onMouseLeave?: () => void;
-    /** Будет вызвана при нажатии на кнопку-иконку быстрого просмотра. */
-    onQuickViewClick?: () => void;
+import { ProductInfo, ProductInfoProps } from '../../../common/components/product-info';
+import { PlateProps } from '@sima-land/ui-nucleons/plate';
+export declare type ProductCardChildren = React.ReactElement<ProductInfoProps, typeof ProductInfo>;
+export interface ProductCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ProductCardChildren;
 }
+export declare const HoverCard: React.ForwardRefExoticComponent<PlateProps & React.RefAttributes<HTMLDivElement | null>>;
+export declare const ProductCard: ({ children, className, ...props }: ProductCardProps) => JSX.Element;
 /**
- * Компонент-слот для вывода контрола товара в корзине.
- * @param props Свойства.
+ * Фильтрует содержимое карточки для вывода состояния без наведения.
+ * @param el Элемент.
  * @return Элемент.
  */
-declare const CartControlSlot: ({ children, stepText, markupText, loading, }: {
-    children?: React.ReactNode;
-    stepText?: string | undefined;
-    markupText?: string | undefined;
-    loading?: boolean | undefined;
-}) => JSX.Element;
-export interface ProductCardComponent extends React.ForwardRefExoticComponent<React.PropsWithoutRef<ProductCardProps> & React.RefAttributes<HTMLDivElement>> {
-    CartControl: typeof CartControlSlot;
-}
-/**
- * Карточка товара, появляющаяся над элементом карусели.
- * @param props Свойства компонента.
- * @return Элемент.
- */
-export declare const ProductCard: ProductCardComponent;
-export {};
+export declare const reduceBaseInfo: (el: ProductCardChildren) => React.FunctionComponentElement<ProductInfoProps>;
+export declare const reduceHoverInfo: (el: ProductCardChildren) => React.FunctionComponentElement<ProductInfoProps>;

package/desktop/components/product-card/index.js

@@ -33,41 +33,53 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProductCard = void 0;
+exports.reduceHoverInfo = exports.reduceBaseInfo = exports.ProductCard = exports.HoverCard = void 0;
 const react_1 = __importStar(require("react"));
 const product_info_1 = require("../../../common/components/product-info");
-const with_hint_1 = require("@sima-land/ui-nucleons/with-hint");
-const quick_view_button_1 = require("../../../common/components/quick-view-button");
-const shapes_1 = require("@sima-land/ui-nucleons/styling/shapes");
-const shadows_1 = require("@sima-land/ui-nucleons/styling/shadows");
-const define_slots_1 = require("@sima-land/ui-nucleons/helpers/define-slots");
-const with_prevent_1 = __importDefault(require("@sima-land/ui-nucleons/helpers/with-prevent"));
-const bind_1 = __importDefault(require("classnames/bind"));
+const plate_1 = require("@sima-land/ui-nucleons/plate");
+const classnames_1 = __importDefault(require("classnames"));
 const product_card_module_scss_1 = __importDefault(require("./product-card.module.scss"));
-const cx = bind_1.default.bind(product_card_module_scss_1.default);
-/**
- * Компонент-слот для вывода контрола товара в корзине.
- * @param props Свойства.
- * @return Элемент.
- */
-const CartControlSlot = ({ children, stepText, markupText, loading, }) => (react_1.default.createElement("div", { className: cx('control-wrapper', { loading }) },
-    react_1.default.createElement("div", { className: cx('control') }, !loading && children),
-    (loading || stepText) && react_1.default.createElement("div", { className: cx('unit-text') }, !loading && stepText),
-    !loading && markupText && react_1.default.createElement("div", { className: cx('bottom-text') }, markupText)));
+exports.HoverCard = (0, react_1.forwardRef)((props, ref) => (react_1.default.createElement(plate_1.Plate, Object.assign({}, props, { ref: ref, rounds: 'm', shadow: 'z4', className: (0, classnames_1.default)(product_card_module_scss_1.default.card, props.className), "data-testid": 'product-card:hover-card' }))));
+const ProductCard = (_a) => {
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    const [hovered, toggle] = (0, react_1.useState)(false);
+    return (react_1.default.createElement("div", Object.assign({}, props, { "data-testid": 'product-card', className: (0, classnames_1.default)(product_card_module_scss_1.default.root, className) }),
+        react_1.default.createElement("div", { "data-testid": 'product-card:info', onMouseEnter: () => toggle(true) }, (0, exports.reduceBaseInfo)(children)),
+        hovered && (react_1.default.createElement(exports.HoverCard, { onMouseLeave: () => toggle(false) }, (0, exports.reduceHoverInfo)(children)))));
+};
+exports.ProductCard = ProductCard;
 /**
- * Карточка товара, появляющаяся над элементом карусели.
- * @param props Свойства компонента.
+ * Фильтрует содержимое карточки для вывода состояния без наведения.
+ * @param el Элемент.
  * @return Элемент.
  */
-exports.ProductCard = react_1.forwardRef((_a, rootRef) => {
-    var { data, onLinkClick, onQuickViewClick, children, 
-    // div props
-    className } = _a, rootProps = __rest(_a, ["data", "onLinkClick", "onQuickViewClick", "children", "className"]);
-    const { cartControl } = define_slots_1.defineSlots(children, { cartControl: CartControlSlot });
-    return (react_1.default.createElement("div", Object.assign({ ref: rootRef, className: cx('root', shapes_1.SmallRounds.all, shadows_1.BoxShadow.z4, className) }, rootProps),
-        react_1.default.createElement(product_info_1.ProductInfo, { data: data, onLinkClick: onLinkClick },
-            react_1.default.createElement(product_info_1.ProductInfo.OnImage, null,
-                react_1.default.createElement(with_hint_1.WithHint, { hint: '\u0411\u044B\u0441\u0442\u0440\u044B\u0439 \u043F\u0440\u043E\u0441\u043C\u043E\u0442\u0440', direction: 'left' }, (ref, toggle) => (react_1.default.createElement(quick_view_button_1.QuickViewButton, { ref: ref, onMouseEnter: () => toggle(true), onMouseLeave: () => toggle(false), className: cx('quick-view-button'), onClick: with_prevent_1.default(onQuickViewClick) }))))),
-        cartControl));
+const reduceBaseInfo = (el) => (0, react_1.cloneElement)(el, {
+    children: react_1.Children.map(el.props.children, child => {
+        let result;
+        if ((0, react_1.isValidElement)(child)) {
+            switch (child.type) {
+                // игнорируем кнопки-иконки на изображении
+                case product_info_1.Parts.Image:
+                    result = (0, react_1.cloneElement)(child, { children: undefined });
+                    break;
+                // игнорируем футер
+                case product_info_1.Parts.Footer:
+                    result = null;
+                    break;
+                // остальное оставляем без изменений
+                default:
+                    result = child;
+                    break;
+            }
+        }
+        return result;
+    }),
+});
+exports.reduceBaseInfo = reduceBaseInfo;
+const reduceHoverInfo = (el) => (0, react_1.cloneElement)(el, {
+    // при наведении у изображения строго непрозрачность = 1
+    children: react_1.Children.map(el.props.children, child => (0, react_1.isValidElement)(child) && child.type === product_info_1.Parts.Image
+        ? (0, react_1.cloneElement)(child, { opacity: 1 })
+        : child),
 });
-exports.ProductCard.CartControl = CartControlSlot;
+exports.reduceHoverInfo = reduceHoverInfo;

package/desktop/components/product-card/product-card.module.scss

@@ -1,53 +1,12 @@
-@use 'node_modules/@sima-land/ui-nucleons/colors';
-
 .root {
-  padding: 16px 16px 24px;
-  background: #fff;
+  position: relative;
+  max-width: 400px;
 }
 
-.quick-view-button {
+.card {
   position: absolute;
-  top: 8px;
-  right: 8px;
-  cursor: pointer;
-}
-
-.control-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  margin-top: 16px;
-  &.loading {
-    .control {
-      background: colors.$gray4;
-      border-radius: 4px;
-    }
-    .unit-text::before {
-      content: '';
-      display: block;
-      background: colors.$gray4;
-      border-radius: 4px;
-      width: 48px;
-      height: 16px;
-    }
-  }
-}
-
-.control {
-  width: 122px;
-  height: 40px;
-  margin-right: 16px;
-}
-
-.unit-text {
-  padding-top: 12px; // чтобы при переносе на следующую строку правильно отступил от кнопки
-  font-size: 12px;
-  line-height: 16px;
-  color: colors.$gray38;
-}
-
-.bottom-text {
-  margin-top: 12px;
-  font-size: 12px;
-  line-height: 16px;
-  color: colors.$gray38;
+  top: -16px;
+  left: -16px;
+  padding: 16px 16px 24px;
+  width: calc(100% + 32px);
 }

package/desktop/components/product-carousel/hover-card.d.ts

@@ -1,15 +1,12 @@
 import React from 'react';
 import { ProductInfoProps } from '../../../common/components/product-info';
-import { ProductCard } from '../product-card';
 export interface HoverCardProps extends ProductInfoProps {
     targetRef: React.RefObject<HTMLElement | null>;
     onMouseLeave?: () => void;
-    onQuickViewClick?: () => void;
-    renderCartControl?: (Slot: typeof ProductCard.CartControl) => React.ReactNode;
 }
 /**
  * Карточка товара, появляющаяся над элементом карусели.
  * @param props Свойства компонента.
  * @return Элемент.
  */
-export declare const HoverCard: ({ data, targetRef, onMouseLeave, onQuickViewClick, onLinkClick, renderCartControl, }: HoverCardProps) => JSX.Element;
+export declare const HoverCard: ({ targetRef, onMouseLeave, ...productInfoProps }: HoverCardProps) => JSX.Element;

package/desktop/components/product-carousel/hover-card.js

@@ -18,6 +18,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -25,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HoverCard = void 0;
 const react_1 = __importStar(require("react"));
 const utils_1 = require("@sima-land/ui-nucleons/with-tooltip/utils");
+const product_info_1 = require("../../../common/components/product-info");
 const bind_1 = __importDefault(require("classnames/bind"));
 const hover_card_module_scss_1 = __importDefault(require("./hover-card.module.scss"));
 const shapes_1 = require("@sima-land/ui-nucleons/styling/shapes");
@@ -36,25 +48,25 @@ const cx = bind_1.default.bind(hover_card_module_scss_1.default);
  * @param props Свойства компонента.
  * @return Элемент.
  */
-const HoverCard = ({ data, targetRef, onMouseLeave, onQuickViewClick, onLinkClick, renderCartControl, }) => {
-    const rootRef = react_1.useRef(null);
-    const [ready, setReady] = react_1.useState(false);
-    react_1.useLayoutEffect(() => {
+const HoverCard = (_a) => {
+    var { targetRef, onMouseLeave } = _a, productInfoProps = __rest(_a, ["targetRef", "onMouseLeave"]);
+    const rootRef = (0, react_1.useRef)(null);
+    const [ready, setReady] = (0, react_1.useState)(false);
+    (0, react_1.useLayoutEffect)(() => {
         if (targetRef.current && rootRef.current) {
             const element = rootRef.current;
             const rect = targetRef.current.getBoundingClientRect();
-            const correction = utils_1.getOriginCorrection(rootRef.current);
+            const correction = (0, utils_1.getOriginCorrection)(rootRef.current);
             element.style.left = `${correction.x + rect.left - 16}px`;
             element.style.top = `${correction.y + rect.top - 16}px`;
             element.style.width = `${rect.width + 32}px`;
             setReady(true);
         }
-    }, [data]);
-    return (react_1.default.createElement(product_card_1.ProductCard, { data: data, onLinkClick: onLinkClick, onQuickViewClick: onQuickViewClick, 
-        // div props
-        ref: rootRef, "data-testid": 'product-carousel:hover-card', className: cx('root', !ready && 'hidden', shapes_1.SmallRounds.all, shadows_1.BoxShadow.z4), onMouseLeave: () => {
+    });
+    return (react_1.default.createElement(product_card_1.HoverCard, { ref: rootRef, style: { padding: '16px 16px 24px 16px' }, className: cx('root', !ready && 'hidden', shapes_1.SmallRounds.all, shadows_1.BoxShadow.z4), onMouseLeave: () => {
             setReady(false);
             onMouseLeave && onMouseLeave();
-        } }, renderCartControl === null || renderCartControl === void 0 ? void 0 : renderCartControl(product_card_1.ProductCard.CartControl)));
+        } },
+        react_1.default.createElement(product_info_1.ProductInfo, Object.assign({}, productInfoProps))));
 };
 exports.HoverCard = HoverCard;

package/desktop/components/product-carousel/index.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import { HoverCardProps } from './hover-card';
-import { ProductInfoProps } from '../../../common/components/product-info';
+import { ProductInfo, ProductInfoProps } from '../../../common/components/product-info';
 interface ItemSize {
     xs?: 2 | 3 | 4;
     s?: 2 | 3 | 4;
@@ -8,12 +7,13 @@ interface ItemSize {
     l?: 2 | 3 | 4;
     xl?: 2 | 3 | 4;
 }
+export declare type ItemElement = React.ReactElement<ProductInfoProps, typeof ProductInfo>;
 export interface ProductCarouselProps {
     /** CSS-класс для корневого элемента. */
     className?: string;
     /** Элементы карусели. */
-    children?: React.ReactNode;
-    /** Найстройки размера элемента карусели. */
+    children?: ItemElement | ItemElement[];
+    /** Настройки размера элемента карусели. */
     itemSize?: ItemSize;
     /** Сработает при попадании карусели во viewport. */
     onInViewport?: () => void;
@@ -22,14 +22,10 @@ export interface ProductCarouselProps {
     /** Нужно ли показывать всплывающую карточку при наведении на элемент карусели. */
     withHoverCard?: boolean;
 }
-declare type CarouselItemProps = ProductInfoProps & Pick<HoverCardProps, 'renderCartControl' | 'onQuickViewClick'>;
 /**
  * Карусель рекомендованных товаров.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const ProductCarousel: {
-    ({ className, itemSize, onInViewport, onNeedRequest, withHoverCard, children, }: ProductCarouselProps): JSX.Element;
-    Item: (props: CarouselItemProps) => null;
-};
+export declare const ProductCarousel: ({ className, itemSize, onInViewport, onNeedRequest, withHoverCard, children, }: ProductCarouselProps) => JSX.Element;
 export {};

package/desktop/components/product-carousel/index.js

@@ -39,38 +39,34 @@ const getSizeClasses = (size = {}) => [
     `size-l-${size.l || 2}`,
     `size-xl-${size.xl || 2}`,
 ];
-/**
- * Компонент для проброса данных элемента карусели в компонент карусели.
- * Экспериментальный вариант.
- * @return Null.
- */
-const Item = () => null;
 /**
  * Карусель рекомендованных товаров.
  * @param props Свойства.
  * @return Элемент.
  */
 const ProductCarousel = ({ className, itemSize, onInViewport, onNeedRequest, withHoverCard, children, }) => {
-    const [activeItemIndex, setActiveItemIndex] = react_1.useState(null);
-    const cardShow = utils_1.useAllowFlag();
-    const needBigArrows = media_1.useMedia('(min-width: 1600px)');
-    const sectionRef = react_1.useRef(null);
-    const stubRef = react_1.useRef(null);
-    const targetItemRef = react_1.useRef(null);
-    const items = react_1.Children.toArray(children).reduce((acc, item) => {
-        react_1.isValidElement(item) && item.type === Item && acc.push(item.props);
-        return acc;
-    }, []);
+    const [activeItemIndex, setActiveItemIndex] = (0, react_1.useState)(null);
+    const cardShow = (0, utils_1.useAllowFlag)();
+    const needBigArrows = (0, media_1.useMedia)('(min-width: 1600px)');
+    const rootRef = (0, react_1.useRef)(null);
+    const targetItemRef = (0, react_1.useRef)(null);
+    let items;
+    if (Array.isArray(children)) {
+        items = children;
+    }
+    else {
+        items = children ? [children] : [];
+    }
     // вычисляем ширину элемента карусели для позиционирования стрелок
-    const itemWidth = utils_1.useChildWidth(sectionRef, `.${cx('item')}`, [items.length]);
+    const itemWidth = (0, utils_1.useChildWidth)(rootRef, `.${cx('item')}`, [items.length]);
     // инициируем загрузку данных, когда компонент почти попал в зону видимости
-    utils_1.useViewport(stubRef, onNeedRequest, {
+    (0, utils_1.useViewport)(rootRef, onNeedRequest, {
         rootMargin: '200px 0px 200px 0px',
     });
     // отправляем статистку, когда компонент попадает в зону видимости
-    utils_1.useViewport(sectionRef, onInViewport);
-    return Array.isArray(items) && items.length > 0 ? (react_1.default.createElement("div", { ref: sectionRef, className: cx('root', className) },
-        react_1.default.createElement(carousel_1.Carousel, Object.assign({ step: 3, draggable: false, 
+    (0, utils_1.useViewport)(rootRef, onInViewport);
+    return (react_1.default.createElement("div", { ref: rootRef, className: cx('root', className) },
+        items.length > 0 && (react_1.default.createElement(carousel_1.Carousel, Object.assign({ step: 3, draggable: false, 
             // докидываем индекс чтобы позже брать актуальные данные из списка по нему
             items: items.map((item, index) => [item, index]) }, (itemWidth !== null && {
             withControls: true,
@@ -86,16 +82,21 @@ const ProductCarousel = ({ className, itemSize, onInViewport, onNeedRequest, wit
                         targetItemRef.current = e.currentTarget;
                         setActiveItemIndex(index);
                     }
-                } },
-                react_1.default.createElement(product_info_1.ProductInfo, { data: item.data, onLinkClick: item.onLinkClick }))), 
+                } }, (0, react_1.cloneElement)(item, {
+                children: react_1.Children.toArray(item.props.children).reduce((list, child) => {
+                    if ((0, react_1.isValidElement)(child)) {
+                        child.type === product_info_1.Parts.Image &&
+                            list.push(withHoverCard ? (0, react_1.cloneElement)(child, { children: undefined }) : child);
+                        child.type !== product_info_1.Parts.Footer && list.push(child);
+                    }
+                    return list;
+                }, []),
+            }))), 
             // длительность прокрутки в Carousel - 320, делаем слегка с запасом
             // @todo после восстановления проверить позицию курсора чтобы показать карточку (если будет критично)
-            onChangeTargetIndex: () => cardShow.disallowFor(360) })),
+            onChangeTargetIndex: () => cardShow.disallowFor(360) }))),
         withHoverCard &&
             activeItemIndex !== null &&
-            [items[activeItemIndex]].map(item => (react_1.default.createElement(hover_card_1.HoverCard, { key: activeItemIndex, targetRef: targetItemRef, onMouseLeave: () => setActiveItemIndex(null), 
-                // данные элемента карусели
-                data: item.data, onLinkClick: item.onLinkClick, onQuickViewClick: item.onQuickViewClick, renderCartControl: item.renderCartControl }))))) : (react_1.default.createElement("div", { ref: stubRef }));
+            [items[activeItemIndex]].map(item => (react_1.default.createElement(hover_card_1.HoverCard, Object.assign({ key: activeItemIndex, targetRef: targetItemRef, onMouseLeave: () => setActiveItemIndex(null) }, item.props))))));
 };
 exports.ProductCarousel = ProductCarousel;
-exports.ProductCarousel.Item = Item;

package/desktop/components/product-carousel/utils.js

@@ -13,7 +13,7 @@ const on_1 = __importDefault(require("@sima-land/ui-nucleons/helpers/on"));
  * @param options Опции IntersectionObserver.
  */
 const useViewport = (ref, callback, options) => {
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const element = ref.current;
         if (element) {
             const observer = new IntersectionObserver(entries => {
@@ -33,15 +33,15 @@ exports.useViewport = useViewport;
  * @return Объект работы с флагом.
  */
 const useAllowFlag = () => {
-    const ref = react_1.useRef(true);
-    const timerIdRef = react_1.useRef();
-    const allowed = react_1.useCallback(() => ref.current, []);
-    const disallowFor = react_1.useCallback(timeout => {
+    const ref = (0, react_1.useRef)(true);
+    const timerIdRef = (0, react_1.useRef)();
+    const allowed = (0, react_1.useCallback)(() => ref.current, []);
+    const disallowFor = (0, react_1.useCallback)(timeout => {
         window.clearTimeout(timerIdRef.current);
         ref.current = false;
         timerIdRef.current = window.setTimeout(() => (ref.current = true), timeout);
     }, []);
-    const controlRef = react_1.useRef({ allowed, disallowFor });
+    const controlRef = (0, react_1.useRef)({ allowed, disallowFor });
     return controlRef.current;
 };
 exports.useAllowFlag = useAllowFlag;
@@ -53,16 +53,16 @@ exports.useAllowFlag = useAllowFlag;
  * @return Ширина.
  */
 const useChildWidth = (ref, selector, deps) => {
-    const [itemWidth, setItemWidth] = react_1.useState(null);
-    const update = react_1.useCallback(() => {
+    const [itemWidth, setItemWidth] = (0, react_1.useState)(null);
+    const update = (0, react_1.useCallback)(() => {
         if (ref.current) {
             const child = ref.current.querySelector(selector);
             child && setItemWidth(child.clientWidth);
         }
     }, [ref]);
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         ref.current && update();
-        return on_1.default(window, 'resize', update);
+        return (0, on_1.default)(window, 'resize', update);
     }, deps);
     return itemWidth;
 };

package/desktop/components/promotion-card/banner-title.js

@@ -21,7 +21,7 @@ const BannerTitle = ({ promotionType, volumeDiscount, dueDate }) => {
             break;
         case 'volume-discount':
             if (volumeDiscount) {
-                content = (react_1.default.createElement("div", { className: banner_title_module_scss_1.default.discount },
+                content = (react_1.default.createElement("div", { className: banner_title_module_scss_1.default.discount, "data-testid": 'promotion-card:banner-discount' },
                     "\u0441\u043A\u0438\u0434\u043A\u0438 \u0434\u043E",
                     react_1.default.createElement("div", { className: banner_title_module_scss_1.default.percent },
                         volumeDiscount,
@@ -32,14 +32,14 @@ const BannerTitle = ({ promotionType, volumeDiscount, dueDate }) => {
     return react_1.default.createElement(react_1.default.Fragment, null, content);
 };
 exports.BannerTitle = BannerTitle;
-const CustomTimer = ({ dueDate }) => (react_1.default.createElement(timer_1.Timer, { date: date_fns_1.formatISO(dueDate), timeout: 1000 * 60, format: ({ days, hours, minutes }) => (react_1.default.createElement("div", { className: banner_title_module_scss_1.default.timer },
+const CustomTimer = ({ dueDate }) => (react_1.default.createElement(timer_1.Timer, { date: (0, date_fns_1.formatISO)(dueDate), timeout: 1000 * 60, format: ({ days, hours, minutes }) => (react_1.default.createElement("div", { className: banner_title_module_scss_1.default.timer, "data-testid": 'promotion-card:banner-timer' },
         react_1.default.createElement(TimerPart, { label: '\u0434\u043D\u0435\u0439', value: Math.min(99, days) }),
-        react_1.default.createElement(Divider, null),
+        react_1.default.createElement(TimerDivider, null),
         react_1.default.createElement(TimerPart, { label: '\u0447\u0430\u0441\u043E\u0432', value: hours % 24 }),
-        react_1.default.createElement(Divider, null),
+        react_1.default.createElement(TimerDivider, null),
         react_1.default.createElement(TimerPart, { label: '\u043C\u0438\u043D\u0443\u0442', value: minutes % 60 }))) }));
 exports.CustomTimer = CustomTimer;
 const TimerPart = ({ label, value }) => (react_1.default.createElement("div", { className: banner_title_module_scss_1.default.part },
     react_1.default.createElement("div", null, `${value}`.padStart(2, '0')),
     react_1.default.createElement("div", { className: banner_title_module_scss_1.default.label }, label)));
-const Divider = () => react_1.default.createElement("div", { className: banner_title_module_scss_1.default.divider }, ":");
+const TimerDivider = () => react_1.default.createElement("div", { className: banner_title_module_scss_1.default.divider }, ":");

package/desktop/components/promotion-card/estimate.js

@@ -24,12 +24,14 @@ const toTimePart = (n) => `${n}`.padStart(2, '0');
 const Estimate = ({ dueDate }) => {
     const now = new Date();
     let content = null;
-    if (date_fns_1.getYear(dueDate) !== date_fns_1.getYear(now)) {
-        const text = [date_fns_1.getDate, date_fns_1.getMonth, date_fns_1.getYear].map(fn => toTimePart(fn(dueDate))).join('.');
+    if ((0, date_fns_1.getYear)(dueDate) !== (0, date_fns_1.getYear)(now)) {
+        const text = [date_fns_1.getDate, (d) => (0, date_fns_1.getMonth)(d) + 1, date_fns_1.getYear]
+            .map(fn => toTimePart(fn(dueDate)))
+            .join('.');
         content = `До ${text}`;
     }
     else {
-        content = `До ${date_fns_1.getDate(dueDate)} ${MONTH_SHORT_NAME[date_fns_1.getMonth(dueDate)]}`;
+        content = `До ${(0, date_fns_1.getDate)(dueDate)} ${MONTH_SHORT_NAME[(0, date_fns_1.getMonth)(dueDate)]}`;
     }
     return react_1.default.createElement(react_1.default.Fragment, null, content);
 };

package/desktop/components/promotion-card/index.d.ts

@@ -17,6 +17,8 @@ export interface PromotionCardProps extends React.HTMLAttributes<HTMLDivElement>
     promotionType?: PromotionType;
     /** Скидка за объем, указывается при соответствующем типе акции. */
     volumeDiscount?: number;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
 }
 /**
  * Карточка акции.
@@ -24,6 +26,6 @@ export interface PromotionCardProps extends React.HTMLAttributes<HTMLDivElement>
  * @return Элемент.
  */
 export declare const PromotionCard: {
-    ({ promotionType, href, imageSrc, title, subtitle, dueDate, volumeDiscount, postfix, className, ...restProps }: PromotionCardProps): JSX.Element;
+    ({ promotionType, href, imageSrc, title, subtitle, dueDate, volumeDiscount, postfix, className, "data-testid": testId, ...restProps }: PromotionCardProps): JSX.Element;
     Placeholder: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
 };

package/desktop/components/promotion-card/index.js

@@ -55,13 +55,13 @@ const PromotionName = {
 const PromotionCard = (_a) => {
     var { promotionType, href, imageSrc, title, subtitle, dueDate, volumeDiscount, postfix = promotionType ? PromotionName[promotionType] : undefined, 
     // div props
-    className } = _a, restProps = __rest(_a, ["promotionType", "href", "imageSrc", "title", "subtitle", "dueDate", "volumeDiscount", "postfix", "className"]);
+    className, 'data-testid': testId = 'promotion-card' } = _a, restProps = __rest(_a, ["promotionType", "href", "imageSrc", "title", "subtitle", "dueDate", "volumeDiscount", "postfix", "className", 'data-testid']);
     // время нужно выводить только на клиенте - вводим состояние
-    const [mounted, setMounted] = react_1.useState(false);
-    react_1.useEffect(() => {
+    const [mounted, setMounted] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
         setMounted(true);
     }, []);
-    return (react_1.default.createElement("div", Object.assign({ className: classnames_1.default(className, index_module_scss_1.default.root) }, restProps),
+    return (react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)(className, index_module_scss_1.default.root) }, restProps, { "data-testid": testId }),
         react_1.default.createElement("a", { href: href, className: index_module_scss_1.default.link },
             react_1.default.createElement("div", { className: index_module_scss_1.default.banner },
                 react_1.default.createElement("img", { src: imageSrc, alt: title, className: index_module_scss_1.default.image }),
@@ -72,10 +72,10 @@ const PromotionCard = (_a) => {
                     react_1.default.createElement("h4", { className: index_module_scss_1.default.title }, title),
                     subtitle && react_1.default.createElement("p", { className: index_module_scss_1.default.subtitle }, subtitle)),
                 react_1.default.createElement("div", { className: index_module_scss_1.default.footer },
-                    mounted && (react_1.default.createElement("time", { className: index_module_scss_1.default.timer },
+                    mounted && (react_1.default.createElement("time", { className: index_module_scss_1.default.timer, "data-testid": 'promotion-card:due-date' },
                         react_1.default.createElement(watch_1.default, { className: index_module_scss_1.default['timer-svg'] }),
                         react_1.default.createElement(estimate_1.Estimate, { dueDate: dueDate }))),
-                    postfix && react_1.default.createElement("div", { className: index_module_scss_1.default.postfix }, postfix))))));
+                    postfix && (react_1.default.createElement("div", { "data-testid": 'promotion-card:postfix', className: index_module_scss_1.default.postfix }, postfix)))))));
 };
 exports.PromotionCard = PromotionCard;
 exports.PromotionCard.Placeholder = placeholder_1.PromotionCardPlaceholder;

package/desktop/components/promotion-card/placeholder.js

@@ -12,8 +12,8 @@ const classnames_1 = __importDefault(require("classnames"));
  * @param props Свойства div.
  * @return Элемент.
  */
-const PromotionCardPlaceholder = (props) => (react_1.default.createElement("div", Object.assign({}, props),
-    react_1.default.createElement("div", { className: classnames_1.default(placeholder_module_scss_1.default.part, placeholder_module_scss_1.default.banner) }),
-    react_1.default.createElement("div", { className: classnames_1.default(placeholder_module_scss_1.default.part, placeholder_module_scss_1.default.text) }),
-    react_1.default.createElement("div", { className: classnames_1.default(placeholder_module_scss_1.default.part, placeholder_module_scss_1.default.text) })));
+const PromotionCardPlaceholder = (props) => (react_1.default.createElement("div", Object.assign({ "data-testid": 'promotion-card:placeholder' }, props),
+    react_1.default.createElement("div", { className: (0, classnames_1.default)(placeholder_module_scss_1.default.part, placeholder_module_scss_1.default.banner) }),
+    react_1.default.createElement("div", { className: (0, classnames_1.default)(placeholder_module_scss_1.default.part, placeholder_module_scss_1.default.text) }),
+    react_1.default.createElement("div", { className: (0, classnames_1.default)(placeholder_module_scss_1.default.part, placeholder_module_scss_1.default.text) })));
 exports.PromotionCardPlaceholder = PromotionCardPlaceholder;

package/mobile/components/garland-calculator-button/garland-calculator-button.module.scss

@@ -1,4 +1,33 @@
-.wrapper {
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08), 0 0 4px rgba(0, 0, 0, 0.04);
-  border-radius: 8px;
+@use 'node_modules/@sima-land/ui-nucleons/colors';
+
+.root {
+  padding: 24px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.main {
+  margin-right: 20px;
+}
+
+.text {
+  font-size: 14px;
+  line-height: 20px;
+  margin-bottom: 12px;
+}
+
+.icon {
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(colors.$additional-amber, 0.5);
+  border-radius: 50%;
+}
+
+.svg {
+  display: block;
+  fill: #fff;
 }

package/mobile/components/garland-calculator-button/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 export interface GarlandCalculatorButtonProps {
-    /** Обработчик нажатия на кнопку рассчитать. */
-    onClick?: React.MouseEventHandler;
+    /** Обработчик клика. */
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
     /** CSS-класс. */
     className?: string;
 }
@@ -11,4 +11,3 @@ export interface GarlandCalculatorButtonProps {
  * @return Элемент.
  */
 export declare const GarlandCalculatorButton: ({ className, onClick }: GarlandCalculatorButtonProps) => JSX.Element;
-export default GarlandCalculatorButton;