я.метрика

src/components/Cart/Cart.tsx

@@ -9,6 +9,7 @@ import { CartItem } from './CartItem';
 import { CartFooter } from './CartFooter';
 import { ProductModal } from './ProductModal';
 import {useGlobalZustandState} from "../../hooks/useGlobalZustandState";
+import ym from "react-yandex-metrika";
 
 interface CartProps {
     products: Product[];
@@ -56,6 +57,7 @@ export function Cart({
     });
 
     async function handleReplace(product: Product) {
+        ym('reachGoal', 'ac_product_replace_' + product.name);
         setProcessingProductName(product.name);
 
         try {
@@ -67,6 +69,7 @@ export function Cart({
     }
 
     async function handleDelete(product: Product) {
+        ym('reachGoal', 'ac_product_delete_' + product.name);
         setProcessingProductName(product.name);
 
         try {
@@ -130,7 +133,7 @@ export function Cart({
                 <ShowMore type="button" onClick={() => setVisibleCount(products.length)}>
                     Показать ещё <span>{remaining}</span> товаров
                     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M19 9L12 16L5 9" stroke="#5EA12D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        <path d="M19 9L12 16L5 9" stroke="#5EA12D" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                     </svg>
                 </ShowMore>
             )}

src/components/Cart/CartFooter.tsx

@@ -3,6 +3,7 @@ import {BagIcon} from "../Icons/BagIcon";
 import {useState} from "react";
 import {OrderPopup} from "./OrderPopup";
 import {useAppSelector} from "../../store";
+import ym from "react-yandex-metrika";
 
 
 interface CartFooterProps {
@@ -29,7 +30,10 @@ export function CartFooter({ isVisible, totalPrice }: CartFooterProps) {
                 </div>
             </TotalWrap>
 
-            <CheckoutButton type="button" onClick={() => setShowCompletePopup(true)}>
+            <CheckoutButton type="button" onClick={() => {
+                ym('reachGoal', 'ac_hvatilo')
+                setShowCompletePopup(true)
+            }}>
                 {users.length > 1 ? 'Нам' : 'Мне'} хватило
             </CheckoutButton>
             {showCompletePopup && <>

src/components/Cart/CartItem.tsx

@@ -1,7 +1,8 @@
-import {useState} from 'react';
+import {useEffect, useState} from 'react';
 import styled from 'styled-components';
 import {getProductAmount} from '../../utils/product';
 import type {Product} from '../../types/cart';
+import ym from "react-yandex-metrika";
 
 interface CartItemProps {
     product: Product;
@@ -19,6 +20,9 @@ export function CartItem({
                              onDelete,
                          }: CartItemProps) {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
+    useEffect(() => {
+        ym('reachGoal', 'ac_product_replacement_menu_' + product.name);
+    }, [product.name])
 
     return (
         <Item $processing={isProcessing}>

src/components/Cart/OrderPopup.tsx

@@ -1,6 +1,7 @@
 import styled, {css} from "styled-components";
 import {useState} from "react";
 import {FinishPopupContent} from "./FinishPopupContent";
+import ym from "react-yandex-metrika";
 
 export const OrderPopup = ({setShowCompletePopup}: any) => {
     const [showFinal, setShowFinal] = useState(false);
@@ -16,8 +17,14 @@ export const OrderPopup = ({setShowCompletePopup}: any) => {
                     <ServiceFee>199 ₽</ServiceFee>
                     <ServiceFeeDescription>Включена в итоговую стоимость заказа</ServiceFeeDescription>
                     <ButtonBlock>
-                        <ActiveButton onClick={() => setShowFinal(true)}>Продолжить</ActiveButton>
-                        <Button onClick={() => setShowCompletePopup(false)}>Вернуться к корзине</Button>
+                        <ActiveButton onClick={() => {
+                            ym('reachGoal', 'ac_order_button')
+                            setShowFinal(true)
+                        }}>Продолжить</ActiveButton>
+                        <Button onClick={() => {
+                            ym('reachGoal', 'ac_no_order_button')
+                            setShowCompletePopup(false)
+                        }}>Вернуться к корзине</Button>
                     </ButtonBlock>
                 </ModalContent>}
         </Window>

src/components/Cart/ProductModal.tsx

@@ -2,6 +2,8 @@ import styled from 'styled-components';
 import { formatCurrency } from '../../utils/formatCurrency';
 import { getLargeProductImage } from '../../utils/product';
 import type { Product } from '../../types/cart';
+import {useEffect} from "react";
+import ym from "react-yandex-metrika";
 
 interface ProductModalProps {
     product: Product | null;
@@ -16,6 +18,12 @@ export function ProductModal({
                                  onReplace,
                                  onDelete,
                              }: ProductModalProps) {
+    useEffect(() => {
+        if (product !== null) {
+            ym('reachGoal', 'ac_open_popup')
+        }
+    }, [product]);
+
     if (!product) return null;
 
     return (

src/components/Categories/CategoriesSection.tsx

@@ -2,6 +2,7 @@ import { useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { setOption } from '../../api/promoApi';
 import { useDebounceBatch } from '../../hooks/useDebounceBatch';
+import ym from "react-yandex-metrika";
 
 interface CategoriesSectionProps {
     categories: string[];
@@ -31,6 +32,7 @@ export function CategoriesSection({
     const sendUpdatedCategories = useDebounceBatch<string>(async categoryNames => {
         let nextCategories = [...selectedCategories];
 
+        ym('reachGoal', 'ac_set_categories');
         categoryNames.forEach(categoryName => {
             if (nextCategories.includes(categoryName)) {
                 nextCategories = nextCategories.filter(item => item !== categoryName);

src/components/Family/FamilySection.tsx

@@ -65,7 +65,7 @@ export function FamilySection({
                             }}
                         >
                             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <path d="M14.167 14.1641L5.83366 5.83073M14.167 5.83073L5.83366 14.1641" stroke="#CEDFD0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                <path d="M14.167 14.1641L5.83366 5.83073M14.167 5.83073L5.83366 14.1641" stroke="#CEDFD0" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                             </svg>
 
                         </DeleteButton>

src/components/Family/PersonModal.tsx

@@ -2,6 +2,7 @@ import {useEffect, useState} from 'react';
 import styled from 'styled-components';
 import type {Gender, User} from '../../types/user';
 import {Tag, TagsInput, TagsWrap} from './TagsInput';
+import ym from "react-yandex-metrika";
 
 interface PersonModalProps {
     isOpen: boolean;
@@ -45,6 +46,7 @@ export function PersonModal({
         if (!isOpen) return;
 
         if (user) {
+            ym('reachGoal', 'ac_family_edit');
             setForm({
                 name: user.name,
                 gender: user.gender,

src/components/Icons/BagIcon.tsx

@@ -1,9 +1,9 @@
 export function BagIcon() {
     return <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect width="44" height="44" rx="22" fill="#E6F696"/>
-        <path d="M18 18L18 17C18 14.7909 19.7909 13 22 13C24.2091 13 26 14.7909 26 17L26 18" stroke="#5EA12D" stroke-width="2" stroke-linecap="round"/>
-        <path d="M25 24V22" stroke="#5EA12D" stroke-width="2" stroke-linecap="round"/>
-        <path d="M19 24V22" stroke="#5EA12D" stroke-width="2" stroke-linecap="round"/>
-        <path d="M14 22C14 20.1144 14 19.1716 14.5858 18.5858C15.1716 18 16.1144 18 18 18H26C27.8856 18 28.8284 18 29.4142 18.5858C30 19.1716 30 20.1144 30 22V23C30 26.7712 30 28.6569 28.8284 29.8284C27.6569 31 25.7712 31 22 31C18.2288 31 16.3431 31 15.1716 29.8284C14 28.6569 14 26.7712 14 23V22Z" stroke="#5EA12D" stroke-width="2"/>
+        <path d="M18 18L18 17C18 14.7909 19.7909 13 22 13C24.2091 13 26 14.7909 26 17L26 18" stroke="#5EA12D" strokeWidth="2" strokeLinecap="round"/>
+        <path d="M25 24V22" stroke="#5EA12D" strokeWidth="2" strokeLinecap="round"/>
+        <path d="M19 24V22" stroke="#5EA12D" strokeWidth="2" strokeLinecap="round"/>
+        <path d="M14 22C14 20.1144 14 19.1716 14.5858 18.5858C15.1716 18 16.1144 18 18 18H26C27.8856 18 28.8284 18 29.4142 18.5858C30 19.1716 30 20.1144 30 22V23C30 26.7712 30 28.6569 28.8284 29.8284C27.6569 31 25.7712 31 22 31C18.2288 31 16.3431 31 15.1716 29.8284C14 28.6569 14 26.7712 14 23V22Z" stroke="#5EA12D" strokeWidth="2"/>
     </svg>;
 }