za-ek/marketing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

политика конфиденциальности

Browse Source
This commit is contained in:
Zakhar
2026-09-05 13:19:49 +03:00
parent 5d2724581e
commit 6603258474
6 changed files with 526 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Cart/Cart.tsx
+80 -38
View File
@@ -1,13 +1,13 @@
import {Dispatch, SetStateAction, useMemo, useState} from 'react';
import styled from 'styled-components';
import { deleteProduct, replaceProduct } from '../../api/promoApi';
import { useCartPolling } from '../../hooks/useCartPolling';
import { declension } from '../../utils/declension';
import { formatCurrency } from '../../utils/formatCurrency';
import type { Product } from '../../types/cart';
import { CartItem } from './CartItem';
import { CartFooter } from './CartFooter';
import { ProductModal } from './ProductModal';
import {deleteProduct, replaceProduct} from '../../api/promoApi';
import {useCartPolling} from '../../hooks/useCartPolling';
import {declension} from '../../utils/declension';
import {formatCurrency} from '../../utils/formatCurrency';
import type {Product} from '../../types/cart';
import {CartItem} from './CartItem';
import {CartFooter} from './CartFooter';
import {ProductModal} from './ProductModal';
import {useGlobalZustandState} from "../../hooks/useGlobalZustandState";
import {NotEnoughPopup} from "./NotEnoughPopup";
import {reachGoal} from "../../hooks/useYM";
@@ -97,11 +97,13 @@ export function Cart({
<SummaryDetails $hidden={isLoading}>
{products.length > 0 && (
<>
<span>
<div>
<span>
{products.length} {declension(products.length, ['товар', 'товара', 'товаров'])}
</span>
<b>&bull;</b>
<span>{formattedTotalPrice}</span>
<b>&bull;</b>
<span>{formattedTotalPrice}</span>
</div>
<SummaryExcess>
с запасами на {stockDays} {declension(stockDays, ['день', 'дня', 'дней'])}
</SummaryExcess>
@@ -138,17 +140,20 @@ export function Cart({
</CartList>
{products.length === 0 && (
<EmptyLoader src="/images/empty-cart-loader.svg" alt="сбор корзины" />
<EmptyLoader src="/images/empty-cart-loader.svg" alt="сбор корзины"/>
)}
</ScrollWrapper>
{remaining > 0 && (
<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" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</ShowMore>
<ShowMoreWrap>
<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" strokeWidth="2" strokeLinecap="round"
strokeLinejoin="round"/>
</svg>
</ShowMore>
</ShowMoreWrap>
)}
<CartFooter
@@ -169,13 +174,15 @@ export function Cart({
}}
/>
{showNotEnoughPopup && <NotEnoughPopup onClose={() => {setShowNotEnoughPopup(false)}} />}
{showNotEnoughPopup && <NotEnoughPopup onClose={() => {
setShowNotEnoughPopup(false)
}}/>}
</>
);
}
const AbsoluteRefreshButton = styled.button`
background-color: ${({ theme }) => theme.colors.green};
background-color: ${({theme}) => theme.colors.green};
height: 32px;
color: #ffffff;
border: none;
@@ -194,7 +201,7 @@ const AbsoluteRefreshButton = styled.button`
&:hover,
&:focus {
background-color: ${({ theme }) => theme.colors.greenHover};
background-color: ${({theme}) => theme.colors.greenHover};
}
&:active {
@@ -210,35 +217,51 @@ const Summary = styled.div`
flex-shrink: 0;
width: 100%;
position: relative;
> div {
width: 100%;
}
`;
const SummaryTitle = styled.div`
font-size: 20px;
line-height: 24px;
font-weight: 600;
color: ${({ theme }) => theme.colors.darkGreen};
color: ${({theme}) => theme.colors.darkGreen};
margin-bottom: 8px;
`;
const Green = styled.span`
color: ${({ theme }) => theme.colors.green};
color: ${({theme}) => theme.colors.green};
`;
const SummaryDetails = styled.div<{ $hidden: boolean }>`
min-height: 24px;
font-size: 14px;
color: ${({ theme }) => theme.colors.gray};
color: ${({theme}) => theme.colors.gray};
display: flex;
justify-content: start;
flex: 1 1 100%;
justify-content: space-between;
align-items: center;
gap: 8px;
visibility: ${({ $hidden }) => ($hidden ? 'hidden' : 'visible')};
visibility: ${({$hidden}) => ($hidden ? 'hidden' : 'visible')};
* {
color:inherit;
}
> div:first-child {
display: flex;
align-items: center;
justify-content: start;
gap: 8px;
}
span {
font-weight: 350;
white-space: nowrap;
color:inherit;
}
b {
color:inherit;
font-family: initial;
font-size: 20px;
line-height: 8px;
@@ -246,12 +269,13 @@ const SummaryDetails = styled.div<{ $hidden: boolean }>`
`;
const SummaryExcess = styled.div`
background-color: ${({ theme }) => theme.colors.paleGreen};
background-color: ${({theme}) => theme.colors.paleGreen};
padding: 3px 6px 5px;
color: #6D8982;
border-radius: 4px;
font-size: 14px;
font-weight: 350;
justify-content: center;
`;
const Loader = styled.div<{ $hidden: boolean, "data-display-text": string }>`
@@ -261,8 +285,8 @@ const Loader = styled.div<{ $hidden: boolean, "data-display-text": string }>`
color: transparent;
background-clip: text;
position: absolute;
top:32px;
visibility: ${({ $hidden }) => ($hidden ? 'hidden' : 'visible')};
top: 32px;
visibility: ${({$hidden}) => ($hidden ? 'hidden' : 'visible')};
&:before,
&:after {
@@ -290,7 +314,7 @@ const ScrollWrapper = styled.div`
overflow-y: auto;
overflow-x: hidden;
padding-right: 4px;
margin-bottom: 10px;
margin-bottom: 0;
position: relative;
display: flex;
@@ -322,12 +346,18 @@ const EmptyLoader = styled.img`
align-self: center;
`;
const ShowMoreWrap = styled.div`
padding: 16px 8px 24px 8px;
display: flex;
justify-content: center;
`;
const ShowMore = styled.button`
display: flex;
align-items: center;
justify-content: center;
padding: 20px 0 10px;
color: ${({ theme }) => theme.colors.green};
padding:8px 24px;
border-radius: 8px;
color: ${({theme}) => theme.colors.green};
font-size: 14px;
cursor: pointer;
font-weight: 500;
@@ -335,25 +365,37 @@ const ShowMore = styled.button`
flex-shrink: 0;
gap: 4px;
border: 0;
height: 52px;
background: transparent;
&:hover {
opacity: 0.8;
}
span {
color: ${({ theme }) => theme.colors.green};
color: ${({theme}) => theme.colors.green};
}
svg {
width: 24px;
height: 24px;
stroke: ${({ theme }) => theme.colors.green};
stroke: ${({theme}) => theme.colors.green};
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
margin-left: 6px;
}
span {
color: inherit;
font-weight: inherit;
}
&:hover {
background-color: #F7FBF6;
}
&:active,
&:focus {
background-color: #EEF8EB;
outline: none;
}
`;
const NotEnoughWrapper = styled.div`
src/components/Cart/FinishPopupContent.tsx
+39 -9
View File
@@ -13,12 +13,17 @@ export const FinishPopupContent = ({setShowCompletePopup}: any) => {
<img src="/images/broc-gifts.png" alt=""/>
<h2>Спасибо!</h2>
<p>
Вы помогли нам протестировать автокорзину. Сейчас сервис ещё разрабатывается, поэтому оформить заказ пока не получится.
Вы помогли нам протестировать автокорзину. Сейчас сервис ещё разрабатывается, поэтому оформить заказ
пока нельзя. Оставьте адрес электронной почты, и после запуска мы подарим вам <b>3 бесплатные корзины</b>
</p>
<p>
Если вы оставите адрес электронной почты - после запуска мы подарим вам <strong>3 бесплатные корзины</strong>.
</p>
<TextInput placeholder={'Почта'} value={email} onChange={setEmail} />
<TextInput placeholder={'Почта'} value={email} onChange={setEmail}/>
<Confirm>
<label>
<input type="checkbox"/> <span>Даю согласие на обработку персональных данных в соответствии <br/> с <a
href="https://hvatilo.ru/land/cookies_and_recommendations.html" target="_blank">политикой
конфиденциальности</a></span>
</label>
</Confirm>
<FinishButton onClick={() => {
if (buttonContent === 'Получить подарок') {
setButtonContent('...')
@@ -34,7 +39,7 @@ export const FinishPopupContent = ({setShowCompletePopup}: any) => {
})
}
}}>{buttonContent}</FinishButton>
{createPortal(<CelebrationCanvas duration={5000} particleCount={300} />, document.body)}
{createPortal(<CelebrationCanvas duration={5000} particleCount={300}/>, document.body)}
</FinishPopupContentWrap>;
};
@@ -42,11 +47,12 @@ const FinishPopupContentWrap = styled.div`
padding: 20px;
display: flex;
flex-direction: column;
img {
max-width: 100%;
display: flex;
}
h2 {
margin-top: 24px;
margin-bottom: 8px;
@@ -55,6 +61,7 @@ const FinishPopupContentWrap = styled.div`
font-weight: 450;
text-align: center;
}
p {
font-size: 16px;
line-height: 19px;
@@ -63,8 +70,31 @@ const FinishPopupContentWrap = styled.div`
margin-bottom: 24px;
}
`;
const Confirm = styled.div`
font-size: 12px;
color: ${({theme}) => theme.colors.gray};
flex-direction: row;
margin-top: 16px;
* {
color: inherit;
}
input {
width: 11px;
margin-right: 5px;
accent-color: #4A8D19;
}
label {
align-self: center;
margin-bottom: 16px;
display: flex;
flex-direction: row;
align-items: flex-start;
flex-wrap: nowrap;
}
`;
const FinishButton = styled.button`
background-color: ${({ theme }) => theme.colors.green};
background-color: ${({theme}) => theme.colors.green};
height: 54px;
width: 100%;
color: #ffffff;
@@ -80,7 +110,7 @@ const FinishButton = styled.button`
&:hover,
&:focus {
background-color: ${({ theme }) => theme.colors.greenHover};
background-color: ${({theme}) => theme.colors.greenHover};
}
&:active {
src/components/Cart/FinitaLaCommedia.tsx
+3 -3
View File
@@ -36,10 +36,10 @@ const Overlay = styled.div`
`;
const Window = styled.div`
background-color: #ffffff;
border-radius: 12px;
border-radius: 20px;
width: auto;
max-width: 535px;
padding: 20px 24px;
padding: 20px 20px 40px 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 9;
@@ -74,6 +74,7 @@ const ModalContent = styled.div`
display: flex;
flex-direction: column;
gap: 24px;
text-align: center;
> div {
display: flex;
flex-direction: column;
@@ -87,7 +88,6 @@ const ModalContent = styled.div`
}
`;
const ButtonBlock = styled.div`
margin-top: 24px;
display: flex;
gap: 16px;
flex-direction: column;
src/components/Family/FamilySection.tsx
+2 -1
View File
@@ -228,7 +228,8 @@ const AddButton = styled.button`
display: flex;
align-items: center;
justify-content: center;
margin-top: 14px;
margin-top: 16px;
margin-bottom: 2px;
color: ${({ theme }) => theme.colors.green};
font-size: 14px;
font-weight: 500;