From 1384bd23c3cb5343eeb3603c1ec576e900efd731 Mon Sep 17 00:00:00 2001 From: Yulia Avramenko Date: Thu, 21 Dec 2023 11:44:30 +0300 Subject: [PATCH 01/26] #128-development-created-CartPage --- src/assets/icons/IconLeftArrow.svg | 5 + src/assets/icons/IconRightArrow.svg | 5 + src/assets/icons/dots.svg | 3 + src/assets/styles/utils/_variables.scss | 3 +- src/components/CardPreview/CardPreview.tsx | 2 +- .../ProductEntity/ProductEntity.module.scss | 71 ++++++++ .../ui/ProductEntity/ProductEntity.tsx | 17 ++ .../CartCouponApply.module.scss | 93 +++++++++++ .../ui/CartCouponApply/CartCouponApply.tsx | 38 +++++ .../CartEdit/ui/CartEdit/CartEdit.module.scss | 120 +++++++++++++ .../CartEdit/ui/CartEdit/CartEdit.tsx | 90 ++++++++++ src/mockData/cartData.ts | 34 ++++ src/mockData/productsData.ts | 33 ++++ src/pages/CartPage/CartPage.module.scss | 54 ++++++ src/pages/CartPage/CartPage.tsx | 157 ++++++++++++++++++ src/pages/MainPage/MainPage.tsx | 2 + src/router/index.tsx | 5 + src/shared/api/maxboom/product.ts | 9 + .../ui/ButtonDots/ButtonDots.module.scss | 73 ++++++++ .../ui/ButtonDots/ButtonDots.stories.tsx | 23 +++ src/shared/ui/ButtonDots/ButtonDots.tsx | 93 +++++++++++ src/utils/types.ts | 8 + .../ui/MakeOrder/MakeOrder.module.scss | 123 ++++++++++++++ .../MakeOrder/ui/MakeOrder/MakeOrder.tsx | 41 +++++ 24 files changed, 1100 insertions(+), 2 deletions(-) create mode 100644 src/assets/icons/IconLeftArrow.svg create mode 100644 src/assets/icons/IconRightArrow.svg create mode 100644 src/assets/icons/dots.svg create mode 100644 src/entities/ProductEntity/ui/ProductEntity/ProductEntity.module.scss create mode 100644 src/entities/ProductEntity/ui/ProductEntity/ProductEntity.tsx create mode 100644 src/features/CartCouponApply/ui/CartCouponApply/CartCouponApply.module.scss create mode 100644 src/features/CartCouponApply/ui/CartCouponApply/CartCouponApply.tsx create mode 100644 src/features/CartEdit/ui/CartEdit/CartEdit.module.scss create mode 100644 src/features/CartEdit/ui/CartEdit/CartEdit.tsx create mode 100644 src/mockData/cartData.ts create mode 100644 src/mockData/productsData.ts create mode 100644 src/pages/CartPage/CartPage.module.scss create mode 100644 src/pages/CartPage/CartPage.tsx create mode 100644 src/shared/api/maxboom/product.ts create mode 100644 src/shared/ui/ButtonDots/ButtonDots.module.scss create mode 100644 src/shared/ui/ButtonDots/ButtonDots.stories.tsx create mode 100644 src/shared/ui/ButtonDots/ButtonDots.tsx create mode 100644 src/widgets/MakeOrder/ui/MakeOrder/MakeOrder.module.scss create mode 100644 src/widgets/MakeOrder/ui/MakeOrder/MakeOrder.tsx diff --git a/src/assets/icons/IconLeftArrow.svg b/src/assets/icons/IconLeftArrow.svg new file mode 100644 index 00000000..b81652a8 --- /dev/null +++ b/src/assets/icons/IconLeftArrow.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/IconRightArrow.svg b/src/assets/icons/IconRightArrow.svg new file mode 100644 index 00000000..ae058501 --- /dev/null +++ b/src/assets/icons/IconRightArrow.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/dots.svg b/src/assets/icons/dots.svg new file mode 100644 index 00000000..e11ebf69 --- /dev/null +++ b/src/assets/icons/dots.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/styles/utils/_variables.scss b/src/assets/styles/utils/_variables.scss index 20282301..e86f3c0f 100644 --- a/src/assets/styles/utils/_variables.scss +++ b/src/assets/styles/utils/_variables.scss @@ -20,4 +20,5 @@ $bg-gradient-green: linear-gradient(90deg, #02aab0 0%, #00cdac 100%); $theme-purple-500: #1306a1; // исправить цвет $theme-purple-400: #1306a1; // Исправить цвет $product-label-hit: #800080; -$product-avaliability-status: #13d154; \ No newline at end of file +$product-avaliability-status: #13d154; +$light-grey: #F1F1F5; \ No newline at end of file diff --git a/src/components/CardPreview/CardPreview.tsx b/src/components/CardPreview/CardPreview.tsx index a64322f4..1510d51c 100644 --- a/src/components/CardPreview/CardPreview.tsx +++ b/src/components/CardPreview/CardPreview.tsx @@ -1,11 +1,11 @@ import { FC, useState } from 'react' import { Button, ButtonSize, ButtonTheme } from '@/shared/ui/Button/Button' -import { Popup } from '@/ui/Popup/Popup' import QuickPurchaseForm from '@/features/QuickPurchase' import { CardPreviewFooter } from '../CardPreviewFooter/CardPreviewFooter' import { CardPreviewHeader } from '../CardPreviewHeader/CardPreviewHeader' import { ProductAvailability } from '../ProductAvailability/ProductAvailability' import styles from './CardPreview.module.scss' +import Popup from '@/ui/Popup/Popup' /** * Компонент с контентом поп-апа товара. diff --git a/src/entities/ProductEntity/ui/ProductEntity/ProductEntity.module.scss b/src/entities/ProductEntity/ui/ProductEntity/ProductEntity.module.scss new file mode 100644 index 00000000..8b90111f --- /dev/null +++ b/src/entities/ProductEntity/ui/ProductEntity/ProductEntity.module.scss @@ -0,0 +1,71 @@ +@use '../../../../assets/styles/utils/variables' as var; +@use '../../../../assets/styles/utils/mixins' as media; + + + +.description { + display: flex; + align-items: center; + padding: 10px; + background: var.$white; + border-radius: 10px; + height: 110px; + width: 400px; + + @include media.respond-to('large') { + width: 75%; + } +} + +.frame { + width: 90px; + height: 90px; + display: flex; + align-items: center; + justify-content: center; + padding: 10px; + margin: 0 20px 0 0; + background: var.$white; + border-radius: 5px; + + @include media.respond-to('large') { + border: 1px solid var.$light-grey; + } +} + +.image { + display: flex; + max-height: 100%; + width: 70px; + height: 70px; + object-fit: cover; +} + +.description_wrapper { + display: flex; + flex-direction: column; + max-height: 80px; +} + +.number { + margin: 0 0 5px; + font-size: 14px; + line-height: 1; + font-weight: 400; + color: var.$subtitle-color; +} + +.name { + display: flex; + font-size: 15px; + line-height: 1.35; + font-weight: 700; + color: var.$body-color; + text-overflow: ellipsis; + overflow: hidden; + width: 250px; + + @include media.respond-to('large') { + width: 100%; + } +} \ No newline at end of file diff --git a/src/entities/ProductEntity/ui/ProductEntity/ProductEntity.tsx b/src/entities/ProductEntity/ui/ProductEntity/ProductEntity.tsx new file mode 100644 index 00000000..1b9b85bf --- /dev/null +++ b/src/entities/ProductEntity/ui/ProductEntity/ProductEntity.tsx @@ -0,0 +1,17 @@ +import { TProduct } from '@/mockData/productsData' +import styles from './ProductEntity.module.scss' +import { FC } from 'react' + +export const ProductEntity: FC = product => { + return ( +
+
+ {'product'} +
+
+ {product.article} + {product.name} +
+
+ ) +} diff --git a/src/features/CartCouponApply/ui/CartCouponApply/CartCouponApply.module.scss b/src/features/CartCouponApply/ui/CartCouponApply/CartCouponApply.module.scss new file mode 100644 index 00000000..f989f676 --- /dev/null +++ b/src/features/CartCouponApply/ui/CartCouponApply/CartCouponApply.module.scss @@ -0,0 +1,93 @@ +@use '../../../../assets/styles/utils/variables' as var; +@use '../../../../assets/styles/utils/mixins' as media; + +.container { + display: flex; + flex-direction: column; + padding: 30px 40px; + background-color: var.$white; + width: 460px; + border-radius: 5px; + + @include media.respond-to('large') { + width: 100% + } +} + +.wrapper { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 10px; +} + +.title { + font-size: 18px; + line-height: 1.2; + font-weight: 600; +} + +.button_change { + background-color: inherit; + border: none; + font-size: 14px; + line-height: 1.2; + font-weight: 400; + color: var.$link-color; + + &:hover { + opacity: 0.8; + } +} + +.link { + text-decoration: none; +} + +.form { + display: flex; + align-items: center; + justify-content: space-between; + border: 1px solid var.$light-grey; + border-radius: 5px; + padding: 3px 3px 3px 20px; + + &:focus-within { + border: 1px solid var.$black; + } +} + +.input { + width: 100%; + background: inherit; + font-size: 14px; + line-height: 24px; + font-weight: 400; + color: var.$black; + appearance: none; + transition: 0.25s; + + &::placeholder { + color: var.$body-color-light-grey; + } +} + +.button { + display: flex; + align-items: center; + justify-content: center; + width: 108px; + height: 36px; + padding: 5px 20px; + background: var.$light-grey; + color: var.$black; + font-size: 14px; + border-radius: 5px; + font-weight: 700; + + &:hover { + background-color: var.$theme-primary-color; + color: var.$white; + } +} \ No newline at end of file diff --git a/src/features/CartCouponApply/ui/CartCouponApply/CartCouponApply.tsx b/src/features/CartCouponApply/ui/CartCouponApply/CartCouponApply.tsx new file mode 100644 index 00000000..c74b5458 --- /dev/null +++ b/src/features/CartCouponApply/ui/CartCouponApply/CartCouponApply.tsx @@ -0,0 +1,38 @@ +import { useState } from 'react' +import styles from './CartCouponApply.module.scss' + +const states = { + CERTIFICATE: 'CERTIFICATE', + COUPON: 'COUPON' +} + +export const CartCouponApply: React.FC = () => { + const [value, setValue] = useState(states.CERTIFICATE) + + function changeCouponToCertificate() { + if (value === states.CERTIFICATE) { + setValue(states.COUPON) + } else { + setValue(states.CERTIFICATE) + } + } + + const title = value === states.CERTIFICATE ? 'Сертификат' : 'Купон' + const buttonText = value === states.CERTIFICATE ? 'Ввести купон' : 'Ввести сертификат' + const placeholder = value === states.CERTIFICATE ? 'Ввести код сертификата' : 'Ввести код купона' + + return ( +
+
+

{title}

+ +
+
+ + +
+
+ ) +} diff --git a/src/features/CartEdit/ui/CartEdit/CartEdit.module.scss b/src/features/CartEdit/ui/CartEdit/CartEdit.module.scss new file mode 100644 index 00000000..56caf916 --- /dev/null +++ b/src/features/CartEdit/ui/CartEdit/CartEdit.module.scss @@ -0,0 +1,120 @@ +@use '../../../../assets/styles/utils/variables' as var; +@use '../../../../assets/styles/utils/mixins' as media; + +.container { + display: flex; + align-items: center; + width: 938px; + height: 140px; + background-color: var.$white; + border-radius: 10px; + padding: 20px; + position: relative; + + @include media.respond-to('large') { + width: 100%; + flex-direction: column; + height: 200px; + row-gap: 20px; + padding-right: 20px; + } +} + +.product { + display: flex; + align-items: center; + width: 70%; + + @include media.respond-to('large') { + width: 100%; + } +} + + +.input { + display: flex; + font-size: 18px; + line-height: 28px; + font-weight: 500; + letter-spacing: 0.1px; + background: inherit; + height: 100%; + min-width: 20px; + max-width: 40px; + text-align: center; + appearance: none; + outline: none; + margin-left: 1px; + margin-right: 1px; +} + +.counter { + border: 1px solid var.$light-grey; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: space-between; + background-color: inherit; + padding: 4px; + height: 48px; + + @include media.respond-to('large') { + width: 100%; + } +} + +.button { + border: none; + background: none; + padding: 0; + font-family: inherit; + display: flex; + align-items: center; + justify-content: center; + width: 20px; + height: 100%; + transition: background 0.25s; +} + +.button_decrease:hover { + background-color: var.$light-grey; + border-radius: 4px 0 0 4px; +} + +.button_increase:hover { + background-color: var.$light-grey; + border-radius: 0 4px 4px 0; +} + +.sum_wrapper { + display: flex; + flex-direction: column; + padding-left: 5%; + margin-right: 10%; + + @include media.respond-to('large') { + width: 25%; + } +} + +.sum { + font-size: 18px; + line-height: 1.2; + font-weight: 400; + white-space: nowrap; +} + +.price { + font-size: 13.5px; + color: var.$body-color-light-grey; + line-height: 1.2; + font-weight: 400; + white-space: nowrap; +} + +.button_dots { + position: absolute; + z-index: 90; + top: 0; + right: 0; +} \ No newline at end of file diff --git a/src/features/CartEdit/ui/CartEdit/CartEdit.tsx b/src/features/CartEdit/ui/CartEdit/CartEdit.tsx new file mode 100644 index 00000000..0635771e --- /dev/null +++ b/src/features/CartEdit/ui/CartEdit/CartEdit.tsx @@ -0,0 +1,90 @@ +import { TCartItemExt } from '@/mockData/cartData' +import styles from './CartEdit.module.scss' +import { useEffect, useState } from 'react' +import ButtonDots from '@/shared/ui/ButtonDots/ButtonDots' +import { ProductEntity } from '@/entities/ProductEntity/ui/ProductEntity/ProductEntity' + +type TProps = { + product: TCartItemExt + decreaseQuantity: (productArticle: string) => void + increaseQuantity: (productArticle: string) => void + setQuantity: (productArticle: string, quantity: number) => void + removeProduct: (productArticle: string) => void +} + +/** + * @param {TCartItemExt} product - это продукт для определения состояния + */ + +export const CartEdit: React.FC = (props: TProps) => { + const [amount, setAmount] = useState(0) + + useEffect(() => { + setAmount(props.product.quantity) + }, [props.product.quantity]) + + return ( + <> +
+
+ +
+

+ {props.product.price * props.product.quantity} {props.product.currency} +

+

+ {props.product.price} {props.product.currency}/шт +

+
+
+
+ + { + props.setQuantity(props.product.article, Number(e.target.value)) + }}> + +
+ +
+ + ) +} diff --git a/src/mockData/cartData.ts b/src/mockData/cartData.ts new file mode 100644 index 00000000..79a6e404 --- /dev/null +++ b/src/mockData/cartData.ts @@ -0,0 +1,34 @@ +import { TProduct } from './productsData' + +// позже отправится в Redux +export type TCartItem = { + article: string + quantity: number +} +export type TCartItemExt = TCartItem & TProduct + +export type TCart = { + products: TCartItem[] + weight: number + unit: string +} + +export const cartData: TCart = { + products: [ + { + article: '1229239191', + quantity: 4 + }, + { + article: '1229239192', + quantity: 2 + }, + { + article: '1229239193', + quantity: 1 + } + ], + + weight: 30, + unit: 'кг' +} diff --git a/src/mockData/productsData.ts b/src/mockData/productsData.ts new file mode 100644 index 00000000..bc6ac062 --- /dev/null +++ b/src/mockData/productsData.ts @@ -0,0 +1,33 @@ +import image1 from '@/assets/images/product/2-500x500.webp' + +export type TProduct = { + src: string + name: string + article: string // Unique identifier + price: number + currency: string +} + +export const productsData: TProduct[] = [ + { + src: image1, + name: 'Автомобильный переходник fjhfjbfffffffffffffffffffhj hfjhsdddddddddddd hfkjhsdfkhs jhdfkjhsd kfhs dfkjsh jdsfhsdfh hdfhsd1', + article: '1229239191', // Unique identifier + price: 781, + currency: '₽' + }, + { + src: image1, + name: 'Автомобильный переходник 2', + article: '1229239192', + price: 782, + currency: '₽' + }, + { + src: image1, + name: 'Автомобильный переходник 3', + article: '1229239193', + price: 783, + currency: '₽' + } +] diff --git a/src/pages/CartPage/CartPage.module.scss b/src/pages/CartPage/CartPage.module.scss new file mode 100644 index 00000000..b35d1628 --- /dev/null +++ b/src/pages/CartPage/CartPage.module.scss @@ -0,0 +1,54 @@ +@use '../../assets/styles/utils/variables' as var; +@use '../../assets/styles/utils/mixins' as media; + +.container { + display: flex; + column-gap: 20px; + margin-bottom: 160px; + + @include media.respond-to('large') { + flex-direction: column; + row-gap: 20px; + width: 100%; + padding-left: 20px; + padding-right: 20px; + } +} + +.cards { + display: flex; + flex-direction: column; + row-gap: 10px; +} + +.wrapper { + display: flex; + flex-direction: column; + row-gap: 10px; +} + +.heading { + margin-top: 20px; +} + +.titles { + display: flex; + flex-direction: column; + align-self: start; + padding-left: 30px; + row-gap: 10px; + margin-bottom: 20px; + margin-top: 25px; +} + +.link { + text-decoration: none; + color: var.$subtitle-color; + font-size: 13.5px; + font-weight: 400; + line-height: 16.2px; + + &:hover { + color: var.$theme-primary-color; + } +} \ No newline at end of file diff --git a/src/pages/CartPage/CartPage.tsx b/src/pages/CartPage/CartPage.tsx new file mode 100644 index 00000000..fb66fa9a --- /dev/null +++ b/src/pages/CartPage/CartPage.tsx @@ -0,0 +1,157 @@ +import { CartCouponApply } from '@/features/CartCouponApply/ui/CartCouponApply/CartCouponApply' +import { CartEdit } from '@/features/CartEdit/ui/CartEdit/CartEdit' +import { MakeOrder } from '@/widgets/MakeOrder/ui/MakeOrder/MakeOrder' +import styles from './CartPage.module.scss' +import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperForMainContent' +import Heading, { HeadingType } from '@/shared/ui/Heading/Heading' +import Subheading from '@/shared/ui/Subheading/Subheading' +import { useEffect, useState } from 'react' +import { TCart, TCartItem, TCartItemExt, cartData } from '@/mockData/cartData' +import { getProduct } from '@/shared/api/maxboom/product' +import { TOrder } from '@/utils/types' +import { Link } from 'react-router-dom' + +const CartPage = () => { + const [cart, updateCart] = useState(cartData) + const [cartWithProducts, updateCartWithProducts] = useState([]) + const [order, setOrder] = useState({ + amount: 0, + productsSum: 0, + currency: '₽', + productsSumWithoutDiscount: 0, + total: 0 + }) + + useEffect(() => { + const _products = cart.products.map(item => { + const product = getProduct(item.article)! + return { ...product, quantity: item.quantity } + }) + updateCartWithProducts(_products) + }, [cart]) + + useEffect(() => { + let amount = 0 + let productsSum = 0 + for (let i = 0; i < cartWithProducts.length; i = i + 1) { + amount += cartWithProducts[i].quantity + productsSum += cartWithProducts[i].quantity * cartWithProducts[i].price + } + + setOrder({ + ...order, + amount: amount, + productsSum: productsSum, + productsSumWithoutDiscount: productsSum, + total: productsSum + }) + }, [cartWithProducts]) + + function increaseQuantity(productArticle: string) { + const products = new Array() + + for (let i = 0; i < cart.products.length; i = i + 1) { + const item = cart.products[i] + if (item.article === productArticle) { + if (item.quantity < 99) { + item.quantity = item.quantity + 1 + products.push(item) + } + } else { + products.push(item) + } + } + + updateCart({ + ...cart, + products: products + }) + } + + function decreaseQuantity(productArticle: string) { + const products = new Array() + for (let i = 0; i < cart.products.length; i = i + 1) { + const item = cart.products[i] + if (item.article === productArticle) { + if (item.quantity > 1) { + item.quantity = item.quantity - 1 + } else { + item.quantity = 0 + } + } + products.push(item) + } + updateCart({ + ...cart, + products: products + }) + } + function setQuantity(productArticle: string, quantity: number) { + const products = new Array() + for (let i = 0; i < cart.products.length; i = i + 1) { + const item = cart.products[i] + if (item.article === productArticle) { + item.quantity = quantity + } + products.push(item) + } + updateCart({ + ...cart, + products: products + }) + } + + function removeProduct(productArticle: string) { + const products = new Array() + for (let i = 0; i < cart.products.length; i = i + 1) { + const item = cart.products[i] + if (item.article !== productArticle) { + products.push(item) + } + } + updateCart({ + ...cart, + products: products + }) + } + + return ( + +
+ + Оформление заказа ({cart.weight.toFixed(2)} {cart.unit}) + + + + Главная + {' '} + / Корзина покупок + + + Ваши покупки + +
+
+
+ {cartWithProducts.map(item => { + return ( + + ) + })} +
+
+ + +
+
+ + ) +} + +export default CartPage diff --git a/src/pages/MainPage/MainPage.tsx b/src/pages/MainPage/MainPage.tsx index 53aee0a2..6be65ab3 100644 --- a/src/pages/MainPage/MainPage.tsx +++ b/src/pages/MainPage/MainPage.tsx @@ -20,6 +20,7 @@ import { import ContainerReviews from '@/components/ReviewsBlock/ReviewsBlock' import ArticleBlock from '@/components/ArticleBlock/ArticleBlock' import Advantages from '@/components/Advantages/Advantages' +import { CartCouponApply } from '@/features/CartCouponApply/ui/CartCouponApply/CartCouponApply' const MainPage = () => { return ( @@ -34,6 +35,7 @@ const MainPage = () => { + ) } diff --git a/src/router/index.tsx b/src/router/index.tsx index 427b512f..fca60300 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -5,6 +5,7 @@ import { ProductsPage } from '@/pages/ProductsPage/ProductsPage' import BlogPage from '@/pages/BlogPage/BlogPage' import RootPage from '@/pages/RootPage/RootPage' import ErrorPage from '@/pages/ErrorPage/ErrorPage' +import CartPage from '@/pages/CartPage/CartPage' export const router = createBrowserRouter([ { @@ -23,6 +24,10 @@ export const router = createBrowserRouter([ { path: Routes.PRODUCTS_ID, element: + }, + { + path: Routes.CART, + element: } ] } diff --git a/src/shared/api/maxboom/product.ts b/src/shared/api/maxboom/product.ts new file mode 100644 index 00000000..c4cb150b --- /dev/null +++ b/src/shared/api/maxboom/product.ts @@ -0,0 +1,9 @@ +import { productsData } from '@/mockData/productsData' + +export function getProduct(article: string) { + const products = productsData.filter(item => item.article === article) + if (products.length === 0) { + return null + } + return products[0] +} diff --git a/src/shared/ui/ButtonDots/ButtonDots.module.scss b/src/shared/ui/ButtonDots/ButtonDots.module.scss new file mode 100644 index 00000000..45335f97 --- /dev/null +++ b/src/shared/ui/ButtonDots/ButtonDots.module.scss @@ -0,0 +1,73 @@ +@use '../../../assets/styles/utils/variables' as var; +@use '../../../../src/assets/styles/utils/mixins' as media; + + +.button { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + padding: 20px; + border: none; + background-color: inherit; + position: relative; + right: 0; + top: 0; + border-radius: 10px; + z-index: 10px; +} + +.container { + position: relative; +} + +.wrapper { + position: absolute; + top: 40px; + right: -210px; + background: var.$white; + box-shadow: 0 0 20px rgba(170 189 206 /25%); + border-radius: 5px; + padding: 15px; + min-width: 228px; + transition: opacity 0.25s, visibility 0.25s; + z-index: 100; + + @include media.respond-to('large') { + top: 60px; + right: 0; + } +} + +.menu { + margin: 0; + padding: 0; + list-style: none; + white-space: nowrap; +} + +.line { + margin-top: 15px; + margin-bottom: 15px; + height: 1px; + width: 100%; + color: var.$body-color-light-grey; +} + +.item { + &:first-child { + border-bottom: 1px solid var.$body-color-light-grey; + margin-bottom: 15px; + padding-bottom: 15px; + } +} + +.menu_button { + font-size: 15px; + line-height: 1.2; + font-weight: 400; + + &:hover { + color: var.$theme-primary-color; + } +} \ No newline at end of file diff --git a/src/shared/ui/ButtonDots/ButtonDots.stories.tsx b/src/shared/ui/ButtonDots/ButtonDots.stories.tsx new file mode 100644 index 00000000..e60346e7 --- /dev/null +++ b/src/shared/ui/ButtonDots/ButtonDots.stories.tsx @@ -0,0 +1,23 @@ +import type { Meta, StoryObj } from '@storybook/react' +import ButtonDots from './ButtonDots' + +const meta = { + title: 'ButtonDots', + component: ButtonDots, + parameters: { + layout: 'centered' + }, + tags: ['autodocs'] +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: { + article: '01929039', + removeProduct: (article: string) => { + console.log(`I will delete ${article} product`) + } + } +} diff --git a/src/shared/ui/ButtonDots/ButtonDots.tsx b/src/shared/ui/ButtonDots/ButtonDots.tsx new file mode 100644 index 00000000..d03569e1 --- /dev/null +++ b/src/shared/ui/ButtonDots/ButtonDots.tsx @@ -0,0 +1,93 @@ +import React, { useEffect, useRef, useState } from 'react' +import styles from './ButtonDots.module.scss' + +type TProps = { + className?: string + article: string + removeProduct: (productArticle: string) => void +} + +/** + * @param {string} article - это номер артикула для понимая, с каким продуктом мы имеем дело + */ + +export const ButtonDots: React.FC = props => { + const [isMenuOpen, setIsMenuOpen] = useState(false) + const refContextMenu = useRef(null) + const refDotsButtton = useRef(null) + + useEffect(() => { + if (isMenuOpen) { + console.log('add ev list') + document.addEventListener('click', closeByOverlayHandler) + } + + return () => { + console.log('remove ev') + document.removeEventListener('click', closeByOverlayHandler) + } + }, [isMenuOpen]) + + function closeByOverlayHandler(ev: MouseEvent) { + console.log('contexMenu') + const withinContextMenuBoundaries = refContextMenu.current!.contains(ev.target as Node) + console.log('button') + const withinDotsButtonBoundaries = refDotsButtton.current!.contains(ev.target as Node) + + if (!withinContextMenuBoundaries && !withinDotsButtonBoundaries) { + console.log('i want to close') + setIsMenuOpen(false) + } + } + + function deleteProductHandler() { + setIsMenuOpen(false) + props.removeProduct(props.article) + } + function addToFavoritesHandler() { + setIsMenuOpen(false) + // add an action for this button + } + + const onClickDotsHandler = () => { + if (!isMenuOpen) { + setIsMenuOpen(true) + } + } + + return ( +
+
+ + {isMenuOpen && ( +
+
    +
  • + +
    • + +
  • + +
    • +
+
+ )} +
+
+ ) +} +export default ButtonDots diff --git a/src/utils/types.ts b/src/utils/types.ts index c4ce231b..32c28187 100644 --- a/src/utils/types.ts +++ b/src/utils/types.ts @@ -23,3 +23,11 @@ export enum ECardView { LIST = 'list', COMPACT = 'compact' } + +export type TOrder = { + amount: number + productsSum: number + currency: string + productsSumWithoutDiscount: number + total: number +} diff --git a/src/widgets/MakeOrder/ui/MakeOrder/MakeOrder.module.scss b/src/widgets/MakeOrder/ui/MakeOrder/MakeOrder.module.scss new file mode 100644 index 00000000..b6e0c020 --- /dev/null +++ b/src/widgets/MakeOrder/ui/MakeOrder/MakeOrder.module.scss @@ -0,0 +1,123 @@ +@use '../../../../assets/styles/utils/variables' as var; +@use '../../../../assets/styles/utils/mixins' as media; + + +.container { + display: flex; + flex-direction: column; + padding: 40px; + background-color: var.$white; + width: 460px; + border-radius: 5px; + + @include media.respond-to('large') { + width: 100% + } +} + +.title { + margin: 0 0 20px; + font-size: 18px; + line-height: 1.2; + font-weight: 600; +} + +.table { + width: 100%; + border-collapse: collapse; + border-spacing: 0; + margin: 0; + font-size: 16px; + line-height: 1.25; + font-weight: 400; + margin-bottom: 20px; +} + +.table td { + padding-top: 5px; +} + +.table th { + padding-top: 25px; + +} + +.total { + text-align: left; +} + + +.mark { + background: none; + color: var.$body-color-light-grey; + padding: 2px; +} + +.right { + text-align: right +} + +.paragraph { + margin: 0; + font-size: 14px; + line-height: 1.43; + font-weight: 400; + color: var.$body-color-light-grey; +} + +.link_order { + display: flex; + align-items: center; + justify-content: center; + background-color: var.$theme-primary-color; + color: var.$white; + width: 100%; + height: 58px; + border: 1px solid transparent; + border-radius: 5px; + font-size: 16px; + line-height: 1.2; + font-weight: 700; + text-align: center; + text-decoration: none; + transition: border-color 0.25s, color 0.25s, background 0.25s; + appearance: none; + + &:hover { + opacity: 0.8; + } + +} + +.line { + width: 100%; + height: 0.5px; + background-color: var.$light-grey; + margin-top: 40px; + margin-bottom: 25px; +} + +.quick_order { + display: flex; + align-items: center; + justify-content: center; + background-color: var.$light-grey; + color: var.$black; + width: 100%; + height: 48px; + border: 1px solid transparent; + border-radius: 5px; + font-size: 16px; + line-height: 1.2; + font-weight: 700; + text-align: center; + text-decoration: none; + transition: border-color 0.25s, color 0.25s, background 0.25s; + appearance: none; + margin-bottom: 15px; + + &:hover { + background-color: var.$theme-primary-color; + color: var.$white; + } +} \ No newline at end of file diff --git a/src/widgets/MakeOrder/ui/MakeOrder/MakeOrder.tsx b/src/widgets/MakeOrder/ui/MakeOrder/MakeOrder.tsx new file mode 100644 index 00000000..f3555880 --- /dev/null +++ b/src/widgets/MakeOrder/ui/MakeOrder/MakeOrder.tsx @@ -0,0 +1,41 @@ +import { Link } from 'react-router-dom' +import styles from './MakeOrder.module.scss' +import { TOrder } from '@/utils/types' + +export const MakeOrder: React.FC = (props: TOrder) => { + return ( +
+

О заказе

+ + + + + + + + + + + + + + + + + +
+ Товары {props.amount} + {`${props.productsSum} ${props.currency}`}
Сумма{`${props.productsSumWithoutDiscount} ${props.currency}`}
Итого{`${props.total} ${props.currency}`}
+ + + Оформление заказа + + +
+ + + +

Наш менеджер перезвонит вам и оформит заказ за вас

+
+ ) +} From 1d8b01e06e8309e175308cf2349be2551d91a384 Mon Sep 17 00:00:00 2001 From: Yulia Avramenko Date: Tue, 26 Dec 2023 14:00:25 +0300 Subject: [PATCH 02/26] #145-enhancement-changed-ReviewsBlock-according-to-fsd --- src/components/ReviewsBlock/ReviewsBlock.tsx | 2 +- .../CardReview/ui/CardReview/CardReview.tsx | 67 ++++++++++++++ .../ui/CardReview/cardReview.module.scss | 87 +++++++++++++++++++ src/pages/MainPage/MainPage.tsx | 6 +- .../ui/ReviewsBlock/ReviewsBlock.tsx | 51 +++++++++++ .../ui/ReviewsBlock/reviewsBlock.module.scss | 59 +++++++++++++ 6 files changed, 269 insertions(+), 3 deletions(-) create mode 100644 src/entities/CardReview/ui/CardReview/CardReview.tsx create mode 100644 src/entities/CardReview/ui/CardReview/cardReview.module.scss create mode 100644 src/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock.tsx create mode 100644 src/widgets/ReviewsBlock/ui/ReviewsBlock/reviewsBlock.module.scss diff --git a/src/components/ReviewsBlock/ReviewsBlock.tsx b/src/components/ReviewsBlock/ReviewsBlock.tsx index 2eb5291f..3e35f34c 100644 --- a/src/components/ReviewsBlock/ReviewsBlock.tsx +++ b/src/components/ReviewsBlock/ReviewsBlock.tsx @@ -30,7 +30,7 @@ const ReviewsBlock: FC = props => {
{title} - + иконка diff --git a/src/entities/CardReview/ui/CardReview/CardReview.tsx b/src/entities/CardReview/ui/CardReview/CardReview.tsx new file mode 100644 index 00000000..5e84f19b --- /dev/null +++ b/src/entities/CardReview/ui/CardReview/CardReview.tsx @@ -0,0 +1,67 @@ +import { FC, useMemo } from 'react' +import { TReview } from '@/models/ReviewModel' +import IconStar from '@/assets/icons/IconStar' +import Paragraph from '@/shared/ui/Paragraph/Paragraph' +import Heading, { HeadingType } from '@/shared/ui/Heading/Heading' +import Link from '@/shared/ui/Link/Link' +import styles from './CardReview.module.scss' + +export type Props = { + review: TReview +} + +const CardReview: FC = props => { + const { review } = props + const initials = useMemo(() => { + return review.name.slice(0, 1) + }, [0, 1]) + const linkTextStyle = styles.link__text + + return ( +
+ {review.id === 0 ? ( + <> + + {review.name} - {review.score} + + + +

{review.text}

+

+ Вы можете{' '} + + оставить отзыв + {' '} + о нашем магазине или{' '} + + написать в поддержку + + , если у вас есть какие-то вопросы. +

+ + ) : ( + <> +
+
{initials}
+
+ {review.name} + + Оценил(а) магазин на {review.score} + + +
+
+
+ {review.text} + {review.date} +
+ + Читать полный отзыв + + + )} +
+ ) +} + +export default CardReview diff --git a/src/entities/CardReview/ui/CardReview/cardReview.module.scss b/src/entities/CardReview/ui/CardReview/cardReview.module.scss new file mode 100644 index 00000000..296f8a0a --- /dev/null +++ b/src/entities/CardReview/ui/CardReview/cardReview.module.scss @@ -0,0 +1,87 @@ +@use '../../../../shared/styles/utils/variables' as color; + +.review { + display: flex; + flex-direction: column; + min-width: 340px; + align-items: flex-start; + justify-content: space-between; + padding: 35px 30px 40px 40px; + gap: 9px; + + .title { + display: flex; + align-items: center; + gap: 3px; + } + + p { + font-size: 0.9375rem; + font-weight: 400; + line-height: 1.7; + } + + &__header { + display: flex; + align-items: center; + line-height: 1.62; + gap: 11px; + + h3 { + font-size: 1rem; + font-weight: 500; + } + + span { + font-size: 0.875rem; + font-weight: 400; + display: flex; + align-items: center; + gap: 3px; + } + } + + &__initials { + width: 40px; + height: 40px; + border-radius: 50%; + background: color.$bg-gradient-green; + color: color.$white; + font-size: 1.125rem; + font-weight: 500; + line-height: 1.2; + display: flex; + align-items: center; + justify-content: center; + } + + &__data { + font-weight: 400; + line-height: 1.7; + + p { + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 5; + -webkit-box-orient: vertical; + text-overflow: clip; + } + + span { + font-size: 0.875rem; + opacity: 0.4; + } + } +} + +.link__text { + font-size: 0.9375rem; + line-height: 1.7; + font-weight: 500; + text-decoration: none; + color: color.$link-color; + + &:hover { + opacity: 0.7; + } +} \ No newline at end of file diff --git a/src/pages/MainPage/MainPage.tsx b/src/pages/MainPage/MainPage.tsx index 6e60ae4f..b72d507f 100644 --- a/src/pages/MainPage/MainPage.tsx +++ b/src/pages/MainPage/MainPage.tsx @@ -16,10 +16,11 @@ import { TEXT_CUSTOMERS_ABOUT_US, LINK_REVIEWS_ALL } from '@/shared/constants/constants' -import ContainerReviews from '@/components/ReviewsBlock/ReviewsBlock' +// import ContainerReviews from '@/components/ReviewsBlock/ReviewsBlock' import ArticleBlock from '@/components/ArticleBlock/ArticleBlock' import Advantages from '@/components/Advantages/Advantages' import CategoryGrid from '@/widgets/CategoryGrid/CategoryGrid' +import ReviewsBlock from '@/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock' const MainPage = () => { return ( @@ -30,7 +31,8 @@ const MainPage = () => { - + {/* */} + diff --git a/src/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock.tsx b/src/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock.tsx new file mode 100644 index 00000000..69ac9435 --- /dev/null +++ b/src/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock.tsx @@ -0,0 +1,51 @@ +import { FC } from 'react' + +import { TReview } from '@/models/ReviewModel' +import IconHand from '@/assets/images/img-hand.png.png' +import IconLink from '@/assets/icons/IconLink' +import Heading, { HeadingType } from '@/shared/ui/Heading/Heading' +import Link from '@/shared/ui/Link/Link' +import styles from './reviewsBlock.module.scss' +import CardReview from '@/entities/CardReview/ui/CardReview/CardReview' + +export type Props = { + title: string + linkText?: string + linkPath?: string + reviews: TReview[] +} + +/** + * Контейнер для отзывов, scrollbar + * @param {string} title - загаловок контейнера + * @param {string} linkText - загаловок ссылки + * @param {string} linkPath - адрес ссылки + * @param {array} reviews - массив отзывов + */ +const ReviewsBlock: FC = props => { + const { title, linkText = '', linkPath = '', reviews } = props + const linkTextStyle = styles.link + + return ( +
+
+ + {title} + иконка + + + + {linkText} + {IconLink({ styles: styles.svg })} + +
+
    + {reviews.map(item => ( + + ))} +
+
+ ) +} + +export default ReviewsBlock diff --git a/src/widgets/ReviewsBlock/ui/ReviewsBlock/reviewsBlock.module.scss b/src/widgets/ReviewsBlock/ui/ReviewsBlock/reviewsBlock.module.scss new file mode 100644 index 00000000..d8e4ec64 --- /dev/null +++ b/src/widgets/ReviewsBlock/ui/ReviewsBlock/reviewsBlock.module.scss @@ -0,0 +1,59 @@ +@use '../../../../shared/styles/utils/variables' as color; + +.wrapper { + width: 100%; + margin: 0 auto; + + h2 { + font-size: #{'min(max(18px, 1.6vw), 20px)'}; + line-height: 115%; + font-weight: 500; + } + + .header { + display: flex; + justify-content: space-between; + align-items: flex-end; + margin: 0 25px; + } + + .link { + font-size: 15px; + line-height: 120%; + font-weight: 500; + + &:hover { + opacity: 0.7; + } + } + + .svg { + width: 1.25rem; + height: 0.5625rem; + margin-left: 0.5rem; + vertical-align: middle; + } + + ul { + display: flex; + gap: 20px; + max-width: 100%; + padding: 20px 25px; + overflow: auto hidden; + cursor: grab; + + &::-webkit-scrollbar { + height: 3px; + } + + &::-webkit-scrollbar-thumb { + background: color.$theme-primary-color; + cursor: grab; + } + + &::-webkit-scrollbar-track { + margin-left: 25px; + margin-right: 25px; + } + } +} \ No newline at end of file From 848979c865cea2b9f61a2af65bfd5ef77ae30efe Mon Sep 17 00:00:00 2001 From: Yulia Avramenko Date: Tue, 26 Dec 2023 14:17:47 +0300 Subject: [PATCH 03/26] #128-bug-fix-clean-console-log --- src/pages/ProductsPage/ProductsPage.tsx | 3 --- src/shared/ui/ButtonDots/ButtonDots.stories.tsx | 5 ++--- src/shared/ui/ButtonDots/ButtonDots.tsx | 5 ----- 3 files changed, 2 insertions(+), 11 deletions(-) diff --git a/src/pages/ProductsPage/ProductsPage.tsx b/src/pages/ProductsPage/ProductsPage.tsx index ac1b0665..61bbe6e7 100644 --- a/src/pages/ProductsPage/ProductsPage.tsx +++ b/src/pages/ProductsPage/ProductsPage.tsx @@ -1,5 +1,4 @@ import { useState } from 'react' -import { useParams } from 'react-router' import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperForMainContent' import { CategoryList } from '@/components/CategoryList/CategoryList' import { PageDescription } from '@/components/PageDescription/PageDescription' @@ -20,8 +19,6 @@ import { CardPreview } from '@/components/CardPreview/CardPreview' * Реализована пагинация. */ export const ProductsPage = () => { - const { id } = useParams() - console.log('Категория', id) const [cardView, setCardView] = useState(ECardView.GRID) const [currentPage, setCurrentPage] = useState(1) const [isPopupOpen, setIsPopupOpen] = useState(false) diff --git a/src/shared/ui/ButtonDots/ButtonDots.stories.tsx b/src/shared/ui/ButtonDots/ButtonDots.stories.tsx index e60346e7..49c476ad 100644 --- a/src/shared/ui/ButtonDots/ButtonDots.stories.tsx +++ b/src/shared/ui/ButtonDots/ButtonDots.stories.tsx @@ -16,8 +16,7 @@ type Story = StoryObj export const Default: Story = { args: { article: '01929039', - removeProduct: (article: string) => { - console.log(`I will delete ${article} product`) - } + // eslint-disable-next-line @typescript-eslint/no-unused-vars + removeProduct: (article: string) => {} } } diff --git a/src/shared/ui/ButtonDots/ButtonDots.tsx b/src/shared/ui/ButtonDots/ButtonDots.tsx index d03569e1..df054261 100644 --- a/src/shared/ui/ButtonDots/ButtonDots.tsx +++ b/src/shared/ui/ButtonDots/ButtonDots.tsx @@ -18,24 +18,19 @@ export const ButtonDots: React.FC = props => { useEffect(() => { if (isMenuOpen) { - console.log('add ev list') document.addEventListener('click', closeByOverlayHandler) } return () => { - console.log('remove ev') document.removeEventListener('click', closeByOverlayHandler) } }, [isMenuOpen]) function closeByOverlayHandler(ev: MouseEvent) { - console.log('contexMenu') const withinContextMenuBoundaries = refContextMenu.current!.contains(ev.target as Node) - console.log('button') const withinDotsButtonBoundaries = refDotsButtton.current!.contains(ev.target as Node) if (!withinContextMenuBoundaries && !withinDotsButtonBoundaries) { - console.log('i want to close') setIsMenuOpen(false) } } From a36d6201d33a300075852ddde6ebbb010f5d7492 Mon Sep 17 00:00:00 2001 From: Yulia Avramenko Date: Wed, 27 Dec 2023 19:30:34 +0300 Subject: [PATCH 04/26] #128-development-fix-merge-conflicts --- .../entities/ContactCard/ContactCard.tsx | 0 .../entities/ContactCard/contactCard.module.scss | 0 src/features/Contacts/Contacts.tsx | 8 ++++++-- src/shared/ui/ButtonDots/ButtonDots.tsx | 12 ++---------- 4 files changed, 8 insertions(+), 12 deletions(-) rename "src/entities/\320\241ontactCard/\320\241ontactCard.tsx" => src/entities/ContactCard/ContactCard.tsx (100%) rename "src/entities/\320\241ontactCard/contactCard.module.scss" => src/entities/ContactCard/contactCard.module.scss (100%) diff --git "a/src/entities/\320\241ontactCard/\320\241ontactCard.tsx" b/src/entities/ContactCard/ContactCard.tsx similarity index 100% rename from "src/entities/\320\241ontactCard/\320\241ontactCard.tsx" rename to src/entities/ContactCard/ContactCard.tsx diff --git "a/src/entities/\320\241ontactCard/contactCard.module.scss" b/src/entities/ContactCard/contactCard.module.scss similarity index 100% rename from "src/entities/\320\241ontactCard/contactCard.module.scss" rename to src/entities/ContactCard/contactCard.module.scss diff --git a/src/features/Contacts/Contacts.tsx b/src/features/Contacts/Contacts.tsx index 81cdc939..64c9278c 100644 --- a/src/features/Contacts/Contacts.tsx +++ b/src/features/Contacts/Contacts.tsx @@ -1,10 +1,10 @@ import { FC, useState } from 'react' import { TMessenger } from '@/models/MessengerModel' import styles from './contacts.module.scss' -import ContactCard from '@/entities/СontactCard/СontactCard' import { Button, ButtonTheme, ButtonDesign } from '@/shared/ui/Button/Button' import MessageIcon from '@/assets/icons/chat.svg' import CloseIcon from '@/assets/icons/IconMessageClose.svg' +import ContactCard from '@/entities/ContactCard/ContactCard' export type PropsContacts = { messenger: TMessenger[] @@ -32,7 +32,11 @@ const Contacts: FC = ({ messenger }) => { -
  • -
    • From 7e5af9fd84690eecc2817c36bee467eebb6c6915 Mon Sep 17 00:00:00 2001 From: Yulia Avramenko Date: Thu, 28 Dec 2023 14:59:29 +0300 Subject: [PATCH 05/26] #145-enhancement-changed-ReviewsBlock-acc-to-fsd --- .../CardReview/CardReview.module.scss | 87 ------------------- src/components/CardReview/CardReview.tsx | 67 -------------- .../ReviewsBlock/ReviewsBlock.module.scss | 59 ------------- src/components/ReviewsBlock/ReviewsBlock.tsx | 50 ----------- 4 files changed, 263 deletions(-) delete mode 100644 src/components/CardReview/CardReview.module.scss delete mode 100644 src/components/CardReview/CardReview.tsx delete mode 100644 src/components/ReviewsBlock/ReviewsBlock.module.scss delete mode 100644 src/components/ReviewsBlock/ReviewsBlock.tsx diff --git a/src/components/CardReview/CardReview.module.scss b/src/components/CardReview/CardReview.module.scss deleted file mode 100644 index 6781b0a0..00000000 --- a/src/components/CardReview/CardReview.module.scss +++ /dev/null @@ -1,87 +0,0 @@ -@use '../../shared/styles/utils/variables' as color; - -.review { - display: flex; - flex-direction: column; - min-width: 340px; - align-items: flex-start; - justify-content: space-between; - padding: 35px 30px 40px 40px; - gap: 9px; - - .title { - display: flex; - align-items: center; - gap: 3px; - } - - p { - font-size: 0.9375rem; - font-weight: 400; - line-height: 1.7; - } - - &__header { - display: flex; - align-items: center; - line-height: 1.62; - gap: 11px; - - h3 { - font-size: 1rem; - font-weight: 500; - } - - span { - font-size: 0.875rem; - font-weight: 400; - display: flex; - align-items: center; - gap: 3px; - } - } - - &__initials { - width: 40px; - height: 40px; - border-radius: 50%; - background: color.$bg-gradient-green; - color: color.$white; - font-size: 1.125rem; - font-weight: 500; - line-height: 1.2; - display: flex; - align-items: center; - justify-content: center; - } - - &__data { - font-weight: 400; - line-height: 1.7; - - p { - overflow: hidden; - display: -webkit-box; - -webkit-line-clamp: 5; - -webkit-box-orient: vertical; - text-overflow: clip; - } - - span { - font-size: 0.875rem; - opacity: 0.4; - } - } -} - -.link__text { - font-size: 0.9375rem; - line-height: 1.7; - font-weight: 500; - text-decoration: none; - color: color.$link-color; - - &:hover { - opacity: 0.7; - } -} diff --git a/src/components/CardReview/CardReview.tsx b/src/components/CardReview/CardReview.tsx deleted file mode 100644 index 5e84f19b..00000000 --- a/src/components/CardReview/CardReview.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { FC, useMemo } from 'react' -import { TReview } from '@/models/ReviewModel' -import IconStar from '@/assets/icons/IconStar' -import Paragraph from '@/shared/ui/Paragraph/Paragraph' -import Heading, { HeadingType } from '@/shared/ui/Heading/Heading' -import Link from '@/shared/ui/Link/Link' -import styles from './CardReview.module.scss' - -export type Props = { - review: TReview -} - -const CardReview: FC = props => { - const { review } = props - const initials = useMemo(() => { - return review.name.slice(0, 1) - }, [0, 1]) - const linkTextStyle = styles.link__text - - return ( -
    - {review.id === 0 ? ( - <> - - {review.name} - {review.score} - - - -

    {review.text}

    -

    - Вы можете{' '} - - оставить отзыв - {' '} - о нашем магазине или{' '} - - написать в поддержку - - , если у вас есть какие-то вопросы. -

    - - ) : ( - <> -
    -
    {initials}
    -
    - {review.name} - - Оценил(а) магазин на {review.score} - - -
    -
    -
    - {review.text} - {review.date} -
    - - Читать полный отзыв - - - )} -
    - ) -} - -export default CardReview diff --git a/src/components/ReviewsBlock/ReviewsBlock.module.scss b/src/components/ReviewsBlock/ReviewsBlock.module.scss deleted file mode 100644 index 05d5dc2a..00000000 --- a/src/components/ReviewsBlock/ReviewsBlock.module.scss +++ /dev/null @@ -1,59 +0,0 @@ -@use '../../shared/styles/utils/variables' as color; - -.wrapper { - width: 100%; - margin: 0 auto; - - h2 { - font-size: #{'min(max(18px, 1.6vw), 20px)'}; - line-height: 115%; - font-weight: 500; - } - - .header { - display: flex; - justify-content: space-between; - align-items: flex-end; - margin: 0 25px; - } - - .link { - font-size: 15px; - line-height: 120%; - font-weight: 500; - - &:hover { - opacity: 0.7; - } - } - - .svg { - width: 1.25rem; - height: 0.5625rem; - margin-left: 0.5rem; - vertical-align: middle; - } - - ul { - display: flex; - gap: 20px; - max-width: 100%; - padding: 20px 25px; - overflow: auto hidden; - cursor: grab; - - &::-webkit-scrollbar { - height: 3px; - } - - &::-webkit-scrollbar-thumb { - background: color.$theme-primary-color; - cursor: grab; - } - - &::-webkit-scrollbar-track { - margin-left: 25px; - margin-right: 25px; - } - } -} diff --git a/src/components/ReviewsBlock/ReviewsBlock.tsx b/src/components/ReviewsBlock/ReviewsBlock.tsx deleted file mode 100644 index 3e35f34c..00000000 --- a/src/components/ReviewsBlock/ReviewsBlock.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { FC } from 'react' -import CardReview from '../CardReview/CardReview' -import { TReview } from '@/models/ReviewModel' -import IconHand from '@/assets/images/img-hand.png.png' -import IconLink from '@/assets/icons/IconLink' -import Heading, { HeadingType } from '@/shared/ui/Heading/Heading' -import Link from '@/shared/ui/Link/Link' -import styles from './ReviewsBlock.module.scss' - -export type Props = { - title: string - linkText?: string - linkPath?: string - reviews: TReview[] -} - -/** - * Контейнер для отзывов, scrollbar - * @param {string} title - загаловок контейнера - * @param {string} linkText - загаловок ссылки - * @param {string} linkPath - адрес ссылки - * @param {array} reviews - массив отзывов - */ -const ReviewsBlock: FC = props => { - const { title, linkText = '', linkPath = '', reviews } = props - const linkTextStyle = styles.link - - return ( -
    -
    - - {title} - иконка - - - - {linkText} - {IconLink({ styles: styles.svg })} - -
    -
      - {reviews.map(item => ( - - ))} -
    -
    - ) -} - -export default ReviewsBlock From f9f7cb56160abf702785222200270e3acaee0f28 Mon Sep 17 00:00:00 2001 From: Artem Sibisov Date: Fri, 29 Dec 2023 13:58:28 +0800 Subject: [PATCH 06/26] =?UTF-8?q?#176=20bugfix:=20=D0=B8=D1=81=D0=BF=D1=80?= =?UTF-8?q?=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=B1=D0=B0=D0=B3?= =?UTF-8?q?=D0=B0=20=D0=BD=D0=B5=D0=B4=D0=BE=D1=81=D1=82=D1=83=D0=BF=D0=BD?= =?UTF-8?q?=D0=BE=D1=81=D1=82=D0=B8=20=D0=B2=D0=BE=D0=B7=D0=B4=D0=B5=D0=B9?= =?UTF-8?q?=D1=82=D1=81=D0=B2=D0=B8=D1=8F=20=D0=BD=D0=B0=20=D0=BE=D0=B1?= =?UTF-8?q?=D0=BB=D0=B0=D1=81=D1=82=D1=8C=20=D0=BF=D0=BE=D0=B4=20=D1=81?= =?UTF-8?q?=D0=BA=D1=80=D1=8B=D1=82=D1=8B=D0=BC=20=D0=BC=D0=B5=D0=BD=D1=8E?= =?UTF-8?q?=20=D0=BA=D0=BE=D0=BD=D1=82=D0=B0=D0=BA=D1=82=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../entities/ContactCard/ContactCard.tsx | 0 .../entities/ContactCard/contactCard.module.scss | 0 src/features/Contacts/Contacts.tsx | 13 ++++++++++--- src/features/Contacts/contacts.module.scss | 10 ++++------ 4 files changed, 14 insertions(+), 9 deletions(-) rename "src/entities/\320\241ontactCard/\320\241ontactCard.tsx" => src/entities/ContactCard/ContactCard.tsx (100%) rename "src/entities/\320\241ontactCard/contactCard.module.scss" => src/entities/ContactCard/contactCard.module.scss (100%) diff --git "a/src/entities/\320\241ontactCard/\320\241ontactCard.tsx" b/src/entities/ContactCard/ContactCard.tsx similarity index 100% rename from "src/entities/\320\241ontactCard/\320\241ontactCard.tsx" rename to src/entities/ContactCard/ContactCard.tsx diff --git "a/src/entities/\320\241ontactCard/contactCard.module.scss" b/src/entities/ContactCard/contactCard.module.scss similarity index 100% rename from "src/entities/\320\241ontactCard/contactCard.module.scss" rename to src/entities/ContactCard/contactCard.module.scss diff --git a/src/features/Contacts/Contacts.tsx b/src/features/Contacts/Contacts.tsx index 81cdc939..547cc92c 100644 --- a/src/features/Contacts/Contacts.tsx +++ b/src/features/Contacts/Contacts.tsx @@ -1,7 +1,7 @@ import { FC, useState } from 'react' import { TMessenger } from '@/models/MessengerModel' import styles from './contacts.module.scss' -import ContactCard from '@/entities/СontactCard/СontactCard' +import ContactCard from '@/entities/ContactCard/ContactCard' import { Button, ButtonTheme, ButtonDesign } from '@/shared/ui/Button/Button' import MessageIcon from '@/assets/icons/chat.svg' import CloseIcon from '@/assets/icons/IconMessageClose.svg' @@ -24,7 +24,10 @@ const Contacts: FC = ({ messenger }) => { return (
    -
    +
      {messenger.map(item => ( @@ -32,7 +35,11 @@ const Contacts: FC = ({ messenger }) => {
    - diff --git a/src/entities/SubscribeForm/subscribeForm.module.scss b/src/entities/SubscribeForm/subscribeForm.module.scss index e8302735..b1097a5c 100644 --- a/src/entities/SubscribeForm/subscribeForm.module.scss +++ b/src/entities/SubscribeForm/subscribeForm.module.scss @@ -96,10 +96,10 @@ .caption { display: none; - @include media.respond-to('middle') { + @include media.respond-to('large') { display: flex; font-size: 16px; - font-weight: 500; + font-weight: 400; line-height: 16px; } } diff --git a/src/shared/ui/logo/Logo.tsx b/src/shared/ui/logo/Logo.tsx index 858565c6..f1c46785 100644 --- a/src/shared/ui/logo/Logo.tsx +++ b/src/shared/ui/logo/Logo.tsx @@ -19,7 +19,7 @@ type TLogoProps = { const Logo: FC = ({ image, title, url, width, height }) => { return ( -
    +
    {title} diff --git a/src/widgets/Footer/Footer.tsx b/src/widgets/Footer/Footer.tsx index de30f4cf..86b68894 100644 --- a/src/widgets/Footer/Footer.tsx +++ b/src/widgets/Footer/Footer.tsx @@ -3,8 +3,7 @@ import Logo from '@/shared/ui/logo/Logo' import Link from '@/shared/ui/Link/Link' import SubscribeForm from '@/entities/SubscribeForm/SubscribeForm' import styles from './footer.module.scss' - -console.log(coreBaseData.footer) +import Payments from '@/entities/Payments/Payments' function Footer() { const onSubmitHandler = () => {} @@ -52,20 +51,7 @@ function Footer() { maxboom.ru

    -
      - {coreBaseData.footer.additional_logos.map(logo => ( -
    • - - {logo.title} - -
      • - ))} -
    +
    diff --git a/src/widgets/Footer/footer.module.scss b/src/widgets/Footer/footer.module.scss index 87fa6124..cb37481c 100644 --- a/src/widgets/Footer/footer.module.scss +++ b/src/widgets/Footer/footer.module.scss @@ -99,10 +99,6 @@ } } - &__payment-link { - text-decoration: none; - } - &__hours { margin: 0; padding: 0; @@ -149,42 +145,6 @@ } } - &__payments { - margin: 0; - padding: 0; - display: flex; - column-gap: 3px; - list-style: none; - margin-right: 8px; - } - - &__payment-item { - display: flex; - width: 34px; - height: 24px; - padding: 3px; - justify-content: center; - align-items: center; - border-radius: 4px; - background: var.$bg-no-image; - } - - &__payment-icon { - display: flex; - width: 100%; - height: 100%; - } - - &__payment-nav { - margin: 0; - padding: 0; - list-style: none; - display: flex; - align-items: center; - justify-content: center; - column-gap: 3px; - } - &__nav { margin: 0; padding: 0; From 35e5f02b32345b2b804a6f3e393db26ba80c0016 Mon Sep 17 00:00:00 2001 From: Yulia Avramenko Date: Wed, 10 Jan 2024 11:50:54 +0300 Subject: [PATCH 15/26] #145-enhancement-fix-bugs --- src/pages/MainPage/MainPage.tsx | 2 -- src/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock.tsx | 5 ++--- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/pages/MainPage/MainPage.tsx b/src/pages/MainPage/MainPage.tsx index b72d507f..af35ac5c 100644 --- a/src/pages/MainPage/MainPage.tsx +++ b/src/pages/MainPage/MainPage.tsx @@ -16,7 +16,6 @@ import { TEXT_CUSTOMERS_ABOUT_US, LINK_REVIEWS_ALL } from '@/shared/constants/constants' -// import ContainerReviews from '@/components/ReviewsBlock/ReviewsBlock' import ArticleBlock from '@/components/ArticleBlock/ArticleBlock' import Advantages from '@/components/Advantages/Advantages' import CategoryGrid from '@/widgets/CategoryGrid/CategoryGrid' @@ -31,7 +30,6 @@ const MainPage = () => { - {/* */} diff --git a/src/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock.tsx b/src/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock.tsx index 69ac9435..fa75e9ce 100644 --- a/src/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock.tsx +++ b/src/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock.tsx @@ -1,5 +1,4 @@ -import { FC } from 'react' - +import { type FC } from 'react' import { TReview } from '@/models/ReviewModel' import IconHand from '@/assets/images/img-hand.png.png' import IconLink from '@/assets/icons/IconLink' @@ -31,7 +30,7 @@ const ReviewsBlock: FC = props => {
    {title} - иконка + иконка From 4ca4442a80bb24611d4c1f648bf31cf11233c54e Mon Sep 17 00:00:00 2001 From: Yulia Avramenko Date: Wed, 10 Jan 2024 12:42:26 +0300 Subject: [PATCH 16/26] #145-enhancement-fix-bugs2 --- src/entities/CardReview/ui/CardReview/CardReview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/entities/CardReview/ui/CardReview/CardReview.tsx b/src/entities/CardReview/ui/CardReview/CardReview.tsx index 5e84f19b..b77adfb1 100644 --- a/src/entities/CardReview/ui/CardReview/CardReview.tsx +++ b/src/entities/CardReview/ui/CardReview/CardReview.tsx @@ -4,7 +4,7 @@ import IconStar from '@/assets/icons/IconStar' import Paragraph from '@/shared/ui/Paragraph/Paragraph' import Heading, { HeadingType } from '@/shared/ui/Heading/Heading' import Link from '@/shared/ui/Link/Link' -import styles from './CardReview.module.scss' +import styles from './cardReview.module.scss' export type Props = { review: TReview From aa83b7811b1608400c6e7275513cfac030f155eb Mon Sep 17 00:00:00 2001 From: Yulia Avramenko Date: Wed, 10 Jan 2024 16:08:57 +0300 Subject: [PATCH 17/26] #180-enhancement-add-storybooks-to-reviewsBlock --- .../ui/CardReview/CardReview.stories.tsx | 26 +++++++++++++++++++ .../ui/ButtonDots/ButtonDots.stories.tsx | 2 +- src/shared/ui/Heading/Heading.stories.tsx | 2 +- src/shared/ui/Paragraph/Paragraph.stories.tsx | 2 +- .../ui/Subheading/Subheading.stories.tsx | 2 +- .../ui/ReviewsBlock/ReviewsBlock.stories.tsx | 24 +++++++++++++++++ 6 files changed, 54 insertions(+), 4 deletions(-) create mode 100644 src/entities/CardReview/ui/CardReview/CardReview.stories.tsx create mode 100644 src/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock.stories.tsx diff --git a/src/entities/CardReview/ui/CardReview/CardReview.stories.tsx b/src/entities/CardReview/ui/CardReview/CardReview.stories.tsx new file mode 100644 index 00000000..c45fa99b --- /dev/null +++ b/src/entities/CardReview/ui/CardReview/CardReview.stories.tsx @@ -0,0 +1,26 @@ +import type { Meta, StoryObj } from '@storybook/react' +import CardReview from './CardReview' + +const meta = { + title: 'entities/CardReview', + component: CardReview, + parameters: { + layout: 'centered' + }, + tags: ['autodocs'] +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: { + review: { + id: 1, + name: 'Рейтинг нашего магазина', + score: '4.3', + text: 'Мы очень ним гордимся, это результат упорного труда в течении длительного времени и сейчас наша команда ежедневно работает над улучшением сервиса.', + date: '' + } + } +} diff --git a/src/shared/ui/ButtonDots/ButtonDots.stories.tsx b/src/shared/ui/ButtonDots/ButtonDots.stories.tsx index 49c476ad..b77b1c7d 100644 --- a/src/shared/ui/ButtonDots/ButtonDots.stories.tsx +++ b/src/shared/ui/ButtonDots/ButtonDots.stories.tsx @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react' import ButtonDots from './ButtonDots' const meta = { - title: 'ButtonDots', + title: 'shared/ButtonDots', component: ButtonDots, parameters: { layout: 'centered' diff --git a/src/shared/ui/Heading/Heading.stories.tsx b/src/shared/ui/Heading/Heading.stories.tsx index 9c84dd48..c0eca174 100644 --- a/src/shared/ui/Heading/Heading.stories.tsx +++ b/src/shared/ui/Heading/Heading.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react' import Heading, { HeadingType } from './Heading' const meta = { - title: 'Heading', + title: 'shared/Heading', component: Heading, parameters: { layout: 'centered' diff --git a/src/shared/ui/Paragraph/Paragraph.stories.tsx b/src/shared/ui/Paragraph/Paragraph.stories.tsx index ac7d2c3f..a9472858 100644 --- a/src/shared/ui/Paragraph/Paragraph.stories.tsx +++ b/src/shared/ui/Paragraph/Paragraph.stories.tsx @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react' import Paragraph, { ParagraphTheme } from './Paragraph' const meta = { - title: 'Paragraph', + title: 'shared/Paragraph', component: Paragraph, parameters: { layout: 'centered' diff --git a/src/shared/ui/Subheading/Subheading.stories.tsx b/src/shared/ui/Subheading/Subheading.stories.tsx index bf05731c..c3aa132b 100644 --- a/src/shared/ui/Subheading/Subheading.stories.tsx +++ b/src/shared/ui/Subheading/Subheading.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react' import Subheading from './Subheading' const meta = { - title: 'Subheading', + title: 'shared/Subheading', component: Subheading, parameters: { layout: 'centered' diff --git a/src/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock.stories.tsx b/src/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock.stories.tsx new file mode 100644 index 00000000..82c25356 --- /dev/null +++ b/src/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock.stories.tsx @@ -0,0 +1,24 @@ +import type { Meta, StoryObj } from '@storybook/react' +import ReviewsBlock from './ReviewsBlock' +import { reviewsData } from '@/mockData/reviews.Data' +import { LINK_REVIEWS_ALL, TEXT_CUSTOMERS_ABOUT_US } from '@/shared/constants/constants' + +const meta = { + title: 'widgets/ReviewsBlock', + component: ReviewsBlock, + parameters: { + layout: 'centered' + }, + tags: ['autodocs'] +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: { + title: TEXT_CUSTOMERS_ABOUT_US, + reviews: reviewsData, + linkText: LINK_REVIEWS_ALL + } +} From 8bd968be628f067911bf0c45171d0b5741dc7a2f Mon Sep 17 00:00:00 2001 From: Artur Khelshtein Date: Tue, 26 Dec 2023 00:05:11 +0300 Subject: [PATCH 18/26] =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=B4=D0=B5?= =?UTF-8?q?=D0=BB=D0=B0=D1=82=D1=8C=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD?= =?UTF-8?q?=D0=B5=D0=BD=D1=82=20footer=20=D0=BF=D0=BE=D0=B4=20FSD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Footer/Footer.tsx | 85 ------------------- src/components/Subscribe/Subscribe.tsx | 2 +- src/components/header/header.tsx | 11 ++- src/components/logo/Logo.tsx | 25 ------ .../SubscribeForm/SubscribeForm.tsx | 4 +- .../SubscribeForm/subscribeForm.module.scss | 0 src/mockData/coreBaseData.ts | 54 ++++++++++++ src/pages/RootPage/RootPage.tsx | 2 +- .../images/footer/icon-subsc.svg | 0 src/{assets => shared}/images/footer/io.svg | 0 .../images/footer/mastercard.svg | 0 src/{assets => shared}/images/footer/mir.svg | 0 src/{assets => shared}/images/footer/visa.svg | 0 .../images/footer/webmoney.svg | 0 src/shared/ui/logo/Logo.tsx | 30 +++++++ .../ui}/logo/logo.module.scss | 0 src/widgets/Footer/Footer.tsx | 76 +++++++++++++++++ .../Footer/footer.module.scss | 9 +- 18 files changed, 182 insertions(+), 116 deletions(-) delete mode 100644 src/components/Footer/Footer.tsx delete mode 100644 src/components/logo/Logo.tsx rename src/{components => entities}/SubscribeForm/SubscribeForm.tsx (91%) rename src/{components => entities}/SubscribeForm/subscribeForm.module.scss (100%) create mode 100644 src/mockData/coreBaseData.ts rename src/{assets => shared}/images/footer/icon-subsc.svg (100%) rename src/{assets => shared}/images/footer/io.svg (100%) rename src/{assets => shared}/images/footer/mastercard.svg (100%) rename src/{assets => shared}/images/footer/mir.svg (100%) rename src/{assets => shared}/images/footer/visa.svg (100%) rename src/{assets => shared}/images/footer/webmoney.svg (100%) create mode 100644 src/shared/ui/logo/Logo.tsx rename src/{components => shared/ui}/logo/logo.module.scss (100%) create mode 100644 src/widgets/Footer/Footer.tsx rename src/{components => widgets}/Footer/footer.module.scss (96%) diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx deleted file mode 100644 index d9c5163a..00000000 --- a/src/components/Footer/Footer.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import Logo from '../logo/Logo' -import VisaIcon from '@/assets/images/footer/visa.svg' -import MastercardIcon from '@/assets/images/footer/mastercard.svg' -import MirIcon from '@/assets/images/footer/mir.svg' -import WebmoneyIcon from '@/assets/images/footer/webmoney.svg' -import UmoneyIcon from '@/assets/images/footer/io.svg' -import SubscribeForm from '../SubscribeForm/SubscribeForm' -import Link from '@/shared/ui/Link/Link' -import styles from './footer.module.scss' - -function Footer() { - const onSubmitHandler = () => {} - return ( -
    -
    -
    -
    - -

    Интернет-магазин «Maxboom.ru», 2023

    -
    -
    - -
    -
    -

    Поддержка

    -
    -
      -
    • - - +7 977 848-02-28 - -
      • -
    • - - Обратный звонок - -
      • -
    -

    Будни, с 10:00 до 20:00

    -
    -
    -
    -
    -
    -

    - Created by{' '} - - maxboom.ru - -

    -
      -
    • - - - -
      • -
    • - - - -
      • -
    • - - - -
      • -
    • - - - -
      • -
    • - - - -
      • -
    -
    -
    -
    -
    - ) -} - -export default Footer diff --git a/src/components/Subscribe/Subscribe.tsx b/src/components/Subscribe/Subscribe.tsx index 6b514c39..9c91c945 100644 --- a/src/components/Subscribe/Subscribe.tsx +++ b/src/components/Subscribe/Subscribe.tsx @@ -1,6 +1,6 @@ import styles from './Subscribe.module.scss' import imgSubs from '@/assets/images/img-subsc-small.png' -import SubscribeForm from '../SubscribeForm/SubscribeForm' +import SubscribeForm from '../../entities/SubscribeForm/SubscribeForm' const Subscribe = () => { const onSubmitHandler = () => {} diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx index 2eaab324..31530e79 100644 --- a/src/components/header/header.tsx +++ b/src/components/header/header.tsx @@ -1,6 +1,7 @@ +import { coreBaseData } from '@/mockData/coreBaseData' import { useMemo } from 'react' import classNames from 'classnames' -import Logo from '../logo/Logo' +import Logo from '../../shared/ui/logo/Logo' import Search from '../search/search' import ArrowIcon from '@/assets/icons/arrow.svg' import LightningIcon from '@/assets/images/header/lightning.svg' @@ -151,7 +152,13 @@ function Header() {
    - +
    diff --git a/src/components/logo/Logo.tsx b/src/components/logo/Logo.tsx deleted file mode 100644 index b9514daf..00000000 --- a/src/components/logo/Logo.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { FC } from 'react' -import logo from '@/assets/images/logo/maxboom.jpg' -import styles from './logo.module.scss' -import Link from '@/shared/ui/Link/Link' - -type TLogoProps = { - width: string - height: string -} -/** - * @param {string} width - ширина логотипа - * @param {string} height - высота логотипа - */ - -const Logo: FC = ({ width, height }) => { - return ( -
    - - maxboom - -
    - ) -} - -export default Logo diff --git a/src/components/SubscribeForm/SubscribeForm.tsx b/src/entities/SubscribeForm/SubscribeForm.tsx similarity index 91% rename from src/components/SubscribeForm/SubscribeForm.tsx rename to src/entities/SubscribeForm/SubscribeForm.tsx index a66df0e5..7c1d222f 100644 --- a/src/components/SubscribeForm/SubscribeForm.tsx +++ b/src/entities/SubscribeForm/SubscribeForm.tsx @@ -36,7 +36,9 @@ const SubscribeForm: FC = ({ className, type, onSubmit }) => { {/* @TODO: Добавить компонент Label https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/102 */} Подписаться на рассылку - Мы не будем присылать вам спам. Только скидки и выгодные предложения + + Мы не будем присылать вам спам. Только скидки и выгодные предложения + diff --git a/src/entities/SubscribeForm/subscribeForm.module.scss b/src/entities/SubscribeForm/subscribeForm.module.scss index e8302735..b1097a5c 100644 --- a/src/entities/SubscribeForm/subscribeForm.module.scss +++ b/src/entities/SubscribeForm/subscribeForm.module.scss @@ -96,10 +96,10 @@ .caption { display: none; - @include media.respond-to('middle') { + @include media.respond-to('large') { display: flex; font-size: 16px; - font-weight: 500; + font-weight: 400; line-height: 16px; } } diff --git a/src/shared/ui/logo/Logo.tsx b/src/shared/ui/logo/Logo.tsx index 858565c6..f1c46785 100644 --- a/src/shared/ui/logo/Logo.tsx +++ b/src/shared/ui/logo/Logo.tsx @@ -19,7 +19,7 @@ type TLogoProps = { const Logo: FC = ({ image, title, url, width, height }) => { return ( -
    +
    {title} diff --git a/src/widgets/Footer/Footer.tsx b/src/widgets/Footer/Footer.tsx index de30f4cf..86b68894 100644 --- a/src/widgets/Footer/Footer.tsx +++ b/src/widgets/Footer/Footer.tsx @@ -3,8 +3,7 @@ import Logo from '@/shared/ui/logo/Logo' import Link from '@/shared/ui/Link/Link' import SubscribeForm from '@/entities/SubscribeForm/SubscribeForm' import styles from './footer.module.scss' - -console.log(coreBaseData.footer) +import Payments from '@/entities/Payments/Payments' function Footer() { const onSubmitHandler = () => {} @@ -52,20 +51,7 @@ function Footer() { maxboom.ru

    -
      - {coreBaseData.footer.additional_logos.map(logo => ( -
    • - - {logo.title} - -
      • - ))} -
    +
    diff --git a/src/widgets/Footer/footer.module.scss b/src/widgets/Footer/footer.module.scss index 87fa6124..cb37481c 100644 --- a/src/widgets/Footer/footer.module.scss +++ b/src/widgets/Footer/footer.module.scss @@ -99,10 +99,6 @@ } } - &__payment-link { - text-decoration: none; - } - &__hours { margin: 0; padding: 0; @@ -149,42 +145,6 @@ } } - &__payments { - margin: 0; - padding: 0; - display: flex; - column-gap: 3px; - list-style: none; - margin-right: 8px; - } - - &__payment-item { - display: flex; - width: 34px; - height: 24px; - padding: 3px; - justify-content: center; - align-items: center; - border-radius: 4px; - background: var.$bg-no-image; - } - - &__payment-icon { - display: flex; - width: 100%; - height: 100%; - } - - &__payment-nav { - margin: 0; - padding: 0; - list-style: none; - display: flex; - align-items: center; - justify-content: center; - column-gap: 3px; - } - &__nav { margin: 0; padding: 0; From 3b1cce8dd0f4820178e04fb0889fc8a19bcf70b6 Mon Sep 17 00:00:00 2001 From: Artur Khelshtein Date: Thu, 11 Jan 2024 15:23:34 +0300 Subject: [PATCH 20/26] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D1=82=D1=8C=20=D1=82=D0=B8=D0=BF=D1=8B=20=D0=B2=20=D0=B8=D0=BC?= =?UTF-8?q?=D0=BF=D0=BE=D1=80=D1=82=20FC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/entities/Payments/Payments.tsx | 2 +- src/shared/ui/logo/Logo.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/entities/Payments/Payments.tsx b/src/entities/Payments/Payments.tsx index 93edd9a6..a762662b 100644 --- a/src/entities/Payments/Payments.tsx +++ b/src/entities/Payments/Payments.tsx @@ -1,4 +1,4 @@ -import { FC } from 'react' +import { type FC } from 'react' import Link from '@/shared/ui/Link/Link' import styles from './payments.module.scss' diff --git a/src/shared/ui/logo/Logo.tsx b/src/shared/ui/logo/Logo.tsx index f1c46785..f7e9eea7 100644 --- a/src/shared/ui/logo/Logo.tsx +++ b/src/shared/ui/logo/Logo.tsx @@ -1,4 +1,4 @@ -import { FC } from 'react' +import { type FC } from 'react' import styles from './logo.module.scss' import Link from '@/shared/ui/Link/Link' From 877b44bc80ffb2148704eb5bceaa0adbf7254044 Mon Sep 17 00:00:00 2001 From: Kirill Kurentsov Date: Thu, 11 Jan 2024 21:07:34 +0300 Subject: [PATCH 21/26] =?UTF-8?q?refactor:=20=D0=92=D1=8B=D0=B4=D0=B5?= =?UTF-8?q?=D0=BB=D0=B8=D1=82=D1=8C=20=D0=B8=D0=B7=20Header=20=D0=BE=D1=82?= =?UTF-8?q?=D0=B4=D0=B5=D0=BB=D1=8C=D0=BD=D1=83=D1=8E=20feature=20-=20Sear?= =?UTF-8?q?chProduct=20(#175)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor: Выделить из Header отдельную feature - SearchProduct #171 * hotfix: fix CamelCase issue with SCSS module files * refactor: Заменил querySelector на useRef * documentation: add stories for SearchProduct, SearchResult, SearchItem --- .../SearchItem/search-item.module.scss | 57 ------------- src/components/header/header.tsx | 4 +- src/components/search/search.tsx | 55 ------------- .../SearchItem/SearchItem.module.scss} | 36 ++++----- .../SearchItem/SearchItem.stories.tsx | 22 ++++++ .../SearchItem/SearchItem.tsx | 23 +++--- src/features/SearchProduct/index.tsx | 2 + .../ui/SearchProduct.module.scss} | 10 +-- .../ui/SearchProduct.stories.tsx | 12 +++ .../SearchProduct/ui/SearchProduct.tsx | 79 +++++++++++++++++++ .../SearchResult/SearchResult.module.scss} | 2 + .../SearchResult/SearchResult.stories.tsx | 15 ++++ .../SearchResult/SearchResult.tsx} | 24 +++--- 13 files changed, 180 insertions(+), 161 deletions(-) delete mode 100644 src/components/SearchItem/search-item.module.scss delete mode 100644 src/components/search/search.tsx rename src/{components/SearchItem/searchItem.module.scss => entities/SearchItem/SearchItem.module.scss} (94%) create mode 100644 src/entities/SearchItem/SearchItem.stories.tsx rename src/{components => entities}/SearchItem/SearchItem.tsx (58%) create mode 100644 src/features/SearchProduct/index.tsx rename src/{components/search/search.module.scss => features/SearchProduct/ui/SearchProduct.module.scss} (58%) create mode 100644 src/features/SearchProduct/ui/SearchProduct.stories.tsx create mode 100644 src/features/SearchProduct/ui/SearchProduct.tsx rename src/{components/searchResult/searchResult.module.scss => widgets/SearchResult/SearchResult.module.scss} (84%) create mode 100644 src/widgets/SearchResult/SearchResult.stories.tsx rename src/{components/searchResult/searchResult.tsx => widgets/SearchResult/SearchResult.tsx} (63%) diff --git a/src/components/SearchItem/search-item.module.scss b/src/components/SearchItem/search-item.module.scss deleted file mode 100644 index 8371e4e2..00000000 --- a/src/components/SearchItem/search-item.module.scss +++ /dev/null @@ -1,57 +0,0 @@ -.link { - padding: 20px 30px; - display: flex; - align-items: center; - min-height: 30px; - color: #343434; - text-decoration: none; - transition: color 0.25s; -} - -.image { - width: 34px; - height: 34px; - margin-right: 20px; - flex: 0 0 auto; -} - -.number { - margin: 0; - font-size: 14px; - line-height: 12px; - font-weight: 400; - color: #bdc2d3; -} - -.price { - display: flex; - align-items: center; - font-size: 16px; - font-weight: 400; - margin: 0; - color: #343434; -} - -.wrapper { - display: flex; - flex-direction: column; - margin-right: 20px; - flex: 1; -} - -.paragraph { - font-size: 15px; - font-weight: 400; - line-height: 1.2; - margin: 0 0 5px; -} - -.price-wrapper { - display: flex; - flex: 0 0 auto; - column-gap: 20px; -} - -.image-link { - visibility: visible; -} diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx index 2eaab324..1656090e 100644 --- a/src/components/header/header.tsx +++ b/src/components/header/header.tsx @@ -1,7 +1,6 @@ import { useMemo } from 'react' import classNames from 'classnames' import Logo from '../logo/Logo' -import Search from '../search/search' import ArrowIcon from '@/assets/icons/arrow.svg' import LightningIcon from '@/assets/images/header/lightning.svg' import ContextMenuElement from '../ContextMenuElement/ContextMenuElement' @@ -15,6 +14,7 @@ import { CatalogLinksId } from '@/shared/config/catalogLinks/catalogLinks' import Link from '@/shared/ui/Link/Link' import IconCategories from '@/assets/icons/IconCategories.svg' import styles from './header.module.scss' +import SearchProduct from '@/features/SearchProduct' function Header() { const aboutUsNode = useMemo( @@ -152,7 +152,7 @@ function Header() {
    - +
    diff --git a/src/components/search/search.tsx b/src/components/search/search.tsx deleted file mode 100644 index 7e232b57..00000000 --- a/src/components/search/search.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React, { FC, useEffect, useState } from 'react' -import styles from './search.module.scss' -import { searchResponseData } from '@/mockData/searchData' -import { TResultData } from '@/shared/model/types/common' -import SearchResult from '../searchResult/searchResult' -import { Input, InputSize, InputTheme } from '@/shared/ui/Input/Input' - -// @TODO: Перевести форму на Formik + Yup -// https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/92 -const Search: FC> = () => { - const [visible, setVisability] = useState(false) - const [resultData, setResultData] = useState({ data: [], success: false }) // TODO: move to redux - - const inputEventHandler = () => { - setResultData(searchResponseData) - } - - const closeContextMenuHandler = (e: Event) => { - const searchResultNode = document.querySelector(styles.result) - const withinBoundaries = e.composedPath().includes(searchResultNode!) - - if (!withinBoundaries && visible) { - setVisability(false) - } - } - - useEffect(() => { - if (resultData.success) { - setVisability(true) - } - }, [resultData]) - - useEffect(() => { - document.addEventListener('click', closeContextMenuHandler) - return () => { - document.removeEventListener('click', closeContextMenuHandler) - } - }, []) - - return ( - - - - {visible && } - - ) -} - -export default Search diff --git a/src/components/SearchItem/searchItem.module.scss b/src/entities/SearchItem/SearchItem.module.scss similarity index 94% rename from src/components/SearchItem/searchItem.module.scss rename to src/entities/SearchItem/SearchItem.module.scss index 4b9996af..f15b65b8 100644 --- a/src/components/SearchItem/searchItem.module.scss +++ b/src/entities/SearchItem/SearchItem.module.scss @@ -1,4 +1,4 @@ -@use '../../shared/styles/utils/variables' as var; +@use '@/shared/styles/utils/variables' as var; .link { padding: 20px 30px; @@ -17,23 +17,6 @@ flex: 0 0 auto; } -.number { - margin: 0; - font-size: 14px; - line-height: 12px; - font-weight: 400; - color: var.$body-color-light-grey; -} - -.price { - display: flex; - align-items: center; - font-size: 16px; - font-weight: 400; - margin: 0; - color: var.$body-color; -} - .wrapper { display: flex; flex-direction: column; @@ -48,12 +31,29 @@ margin: 0 0 5px; } +.number { + margin: 0; + font-size: 14px; + line-height: 12px; + font-weight: 400; + color: var.$body-color-light-grey; +} + .price-wrapper { display: flex; flex: 0 0 auto; column-gap: 20px; } +.price { + display: flex; + align-items: center; + font-size: 16px; + font-weight: 400; + margin: 0; + color: var.$body-color; +} + .image-link { visibility: visible; } diff --git a/src/entities/SearchItem/SearchItem.stories.tsx b/src/entities/SearchItem/SearchItem.stories.tsx new file mode 100644 index 00000000..35f22c83 --- /dev/null +++ b/src/entities/SearchItem/SearchItem.stories.tsx @@ -0,0 +1,22 @@ +import { Meta, Story } from '@storybook/react' +import { searchResponseData } from '@/mockData/searchData' +import SearchItem from './SearchItem' +import { TProduct } from '@/shared/model/types/common' +import { TLinkProps } from '@/shared/ui/Link/Link' + +export default { + title: 'Entities/SearchItem', + component: SearchItem, + parameters: { + layout: 'centered' + } +} as Meta + +type StoryProps = TProduct & TLinkProps + +const Template: Story = args => + +export const Default: Story = Template.bind({}) +Default.args = { + ...(searchResponseData.data[2] as StoryProps) +} diff --git a/src/components/SearchItem/SearchItem.tsx b/src/entities/SearchItem/SearchItem.tsx similarity index 58% rename from src/components/SearchItem/SearchItem.tsx rename to src/entities/SearchItem/SearchItem.tsx index deab9b8a..ca657e43 100644 --- a/src/components/SearchItem/SearchItem.tsx +++ b/src/entities/SearchItem/SearchItem.tsx @@ -1,32 +1,33 @@ -import { FC, useMemo, useState } from 'react' +import { type FC, useMemo, useState } from 'react' import ArrowRightIcon from '@/assets/images/searchItem/arrow-right.svg' import { TProduct } from '@/shared/model/types/common' import Link, { TLinkProps } from '@/shared/ui/Link/Link' -import styles from './searchItem.module.scss' +import styles from './SearchItem.module.scss' /** - * @param {string} image - фото товара - * @param {string} name - название товара - * @param {number} number - артикул товара - * @param {string} price - цена товара с валютой + * Компонент элемента из поисковой выдачи для тултипа-подсказки */ const SearchItem: FC = props => { const { image, name, number, price, ...otherProps } = props - const [isVisible, setVisability] = useState(false) + const [isVisible, setVisibility] = useState(false) const handleMouseEnter = () => { - setVisability(true) + setVisibility(true) } const handleMouseLeave = () => { - setVisability(false) + setVisibility(false) } const arrowNode = useMemo(() => , []) return ( - - product + + product

    {name}

    {number} diff --git a/src/features/SearchProduct/index.tsx b/src/features/SearchProduct/index.tsx new file mode 100644 index 00000000..72a0e547 --- /dev/null +++ b/src/features/SearchProduct/index.tsx @@ -0,0 +1,2 @@ +import SearchProduct from './ui/SearchProduct' +export default SearchProduct diff --git a/src/components/search/search.module.scss b/src/features/SearchProduct/ui/SearchProduct.module.scss similarity index 58% rename from src/components/search/search.module.scss rename to src/features/SearchProduct/ui/SearchProduct.module.scss index 01c914b6..b2279efd 100644 --- a/src/components/search/search.module.scss +++ b/src/features/SearchProduct/ui/SearchProduct.module.scss @@ -1,4 +1,4 @@ -@use '../../shared/styles/utils/variables' as var; +@use '@/shared/styles/utils/variables' as var; .form { width: 100%; @@ -14,14 +14,6 @@ .button { width: 90px; height: 38px; - display: flex; - align-items: center; - justify-content: center; - background-color: var.$theme-primary-color; - border: none; - box-sizing: border-box; - color: var.$white; - border-radius: 5px; margin-right: 5px; } diff --git a/src/features/SearchProduct/ui/SearchProduct.stories.tsx b/src/features/SearchProduct/ui/SearchProduct.stories.tsx new file mode 100644 index 00000000..3c6bee42 --- /dev/null +++ b/src/features/SearchProduct/ui/SearchProduct.stories.tsx @@ -0,0 +1,12 @@ +import { Meta, Story } from '@storybook/react' +import SearchProduct from './SearchProduct' + +export default { + title: 'Features/SearchProduct', + component: SearchProduct +} as Meta + +const Template: Story = () => + +export const Default = Template.bind({}) +Default.args = {} diff --git a/src/features/SearchProduct/ui/SearchProduct.tsx b/src/features/SearchProduct/ui/SearchProduct.tsx new file mode 100644 index 00000000..2760a33c --- /dev/null +++ b/src/features/SearchProduct/ui/SearchProduct.tsx @@ -0,0 +1,79 @@ +import { useRef, useEffect, useState } from 'react' +import { searchResponseData } from '@/mockData/searchData' +import { TResultData } from '@/shared/model/types/common' +import SearchResult from '@/widgets/SearchResult/SearchResult' +import { Input, InputSize, InputTheme } from '@/shared/ui/Input/Input' +import { Button, ButtonDesign, ButtonSize, ButtonTheme } from '@/shared/ui/Button/Button' +import styles from './SearchProduct.module.scss' + +// @TODO: Перевести форму на Formik + Yup +// https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/92 + +/** + * Компонент формы для поиска катгорий/товаров по базе данных магазина + */ +const SearchProduct = () => { + const [visible, setVisibility] = useState(false) + const [resultData, setResultData] = useState({ data: [], success: false }) + const [query, setQuery] = useState('') + const searchResultRef = useRef(null) + + // @TODO: Добавить интеграцию с бэком - подсказки в поиске при вводе текста + // https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/172 + const inputEventHandler = (event: React.ChangeEvent) => { + const { value } = event.target + setResultData(searchResponseData) + setQuery(value) + } + + const closeContextMenuHandler = (e: Event) => { + const searchResultNode = searchResultRef.current + + if (searchResultNode) { + const withinBoundaries = e.composedPath().includes(searchResultNode) + + if (!withinBoundaries && visible) { + setVisibility(false) + } + } + } + + useEffect(() => { + if (resultData.success && query.length > 0) { + setVisibility(true) + } else { + setVisibility(false) + } + }, [resultData, query]) + + useEffect(() => { + document.addEventListener('click', closeContextMenuHandler) + return () => { + document.removeEventListener('click', closeContextMenuHandler) + } + }, []) + + return ( +
    + + {/* @TODO: Добавить onClick-интеграцию с бэком для отправки поискового запроса + https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/173 */} + + {visible && } + + ) +} + +export default SearchProduct diff --git a/src/components/searchResult/searchResult.module.scss b/src/widgets/SearchResult/SearchResult.module.scss similarity index 84% rename from src/components/searchResult/searchResult.module.scss rename to src/widgets/SearchResult/SearchResult.module.scss index 61832a32..ef545279 100644 --- a/src/components/searchResult/searchResult.module.scss +++ b/src/widgets/SearchResult/SearchResult.module.scss @@ -1,6 +1,8 @@ @use '@/shared/styles/utils/variables' as var; .result { + // @TODO: Определить ширину в соответствии с шириной формы поиска + // https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/174 width: 800px; background-color: var.$white; position: absolute; diff --git a/src/widgets/SearchResult/SearchResult.stories.tsx b/src/widgets/SearchResult/SearchResult.stories.tsx new file mode 100644 index 00000000..716aaec1 --- /dev/null +++ b/src/widgets/SearchResult/SearchResult.stories.tsx @@ -0,0 +1,15 @@ +import { Meta, Story } from '@storybook/react' +import SearchResult from './SearchResult' +import { searchResponseData } from '@/mockData/searchData' + +export default { + title: 'Widgets/SearchResult', + component: SearchResult +} as Meta + +const Template: Story = () => { + return +} + +export const Default = Template.bind({}) +Default.args = {} diff --git a/src/components/searchResult/searchResult.tsx b/src/widgets/SearchResult/SearchResult.tsx similarity index 63% rename from src/components/searchResult/searchResult.tsx rename to src/widgets/SearchResult/SearchResult.tsx index c7e21b43..d5163210 100644 --- a/src/components/searchResult/searchResult.tsx +++ b/src/widgets/SearchResult/SearchResult.tsx @@ -1,30 +1,32 @@ -import { FC } from 'react' -import SearchItem from '../SearchItem/SearchItem' +import { forwardRef } from 'react' +import SearchItem from '@/entities/SearchItem/SearchItem' import { SEARCH_CATEGORY, SEARCH_PRODUCT } from '@/shared/constants/constants' import type { TProduct } from '@/shared/model/types/common' import { TCategory } from '@/models/CategoryModel' import SearchIcon from '@/assets/images/search/search-icon.svg' import Link from '@/shared/ui/Link/Link' -import styles from './searchResult.module.scss' import { Routes } from '@/shared/config/routerConfig/routes' +import styles from './SearchResult.module.scss' type TProps = { results: Array } /** - * @param {string} results - массив поисковой выдачи + * Компонент тултипа-подсказки при вводе поискового запроса + * @param {Array} props.results - подсказка, получаемая с бэка, при вводе текста в поисковую строку; + * @param {React.MutableRefObject} ref - реф из компонента SearchProduct; */ -const SearchResult: FC = ({ results }) => { +const SearchResult = forwardRef(({ results }, ref) => { return ( -
    +
      {results.map((item, index) => { if (item.type === SEARCH_CATEGORY) { return (
    • - +

      {item.name}

      Категория @@ -39,9 +41,11 @@ const SearchResult: FC = ({ results }) => {
      • ) } + + return null })} -
    • +
    • Показать все товары @@ -49,6 +53,8 @@ const SearchResult: FC = ({ results }) => {
    ) -} +}) + +SearchResult.displayName = 'SearchResult' export default SearchResult From 7b85080901688f938c3f65dc11fe00f07430f510 Mon Sep 17 00:00:00 2001 From: Artur Khelshtein Date: Thu, 11 Jan 2024 22:09:28 +0300 Subject: [PATCH 22/26] =?UTF-8?q?=D1=80=D0=B5=D1=88=D0=B8=D1=82=D1=8C=20?= =?UTF-8?q?=D0=BA=D0=BE=D0=BD=D1=84=D0=BB=D0=B8=D0=BA=D1=82=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Footer/Footer.tsx | 85 ------------------- src/components/Subscribe/Subscribe.tsx | 2 +- src/components/header/header.tsx | 11 ++- src/components/logo/Logo.tsx | 25 ------ .../SubscribeForm/SubscribeForm.tsx | 4 +- .../SubscribeForm/subscribeForm.module.scss | 0 src/mockData/coreBaseData.ts | 54 ++++++++++++ src/pages/RootPage/RootPage.tsx | 2 +- .../images/footer/icon-subsc.svg | 0 src/{assets => shared}/images/footer/io.svg | 0 .../images/footer/mastercard.svg | 0 src/{assets => shared}/images/footer/mir.svg | 0 src/{assets => shared}/images/footer/visa.svg | 0 .../images/footer/webmoney.svg | 0 src/shared/ui/logo/Logo.tsx | 30 +++++++ .../ui}/logo/logo.module.scss | 0 src/widgets/Footer/Footer.tsx | 76 +++++++++++++++++ .../Footer/footer.module.scss | 9 +- 18 files changed, 182 insertions(+), 116 deletions(-) delete mode 100644 src/components/Footer/Footer.tsx delete mode 100644 src/components/logo/Logo.tsx rename src/{components => entities}/SubscribeForm/SubscribeForm.tsx (91%) rename src/{components => entities}/SubscribeForm/subscribeForm.module.scss (100%) create mode 100644 src/mockData/coreBaseData.ts rename src/{assets => shared}/images/footer/icon-subsc.svg (100%) rename src/{assets => shared}/images/footer/io.svg (100%) rename src/{assets => shared}/images/footer/mastercard.svg (100%) rename src/{assets => shared}/images/footer/mir.svg (100%) rename src/{assets => shared}/images/footer/visa.svg (100%) rename src/{assets => shared}/images/footer/webmoney.svg (100%) create mode 100644 src/shared/ui/logo/Logo.tsx rename src/{components => shared/ui}/logo/logo.module.scss (100%) create mode 100644 src/widgets/Footer/Footer.tsx rename src/{components => widgets}/Footer/footer.module.scss (96%) diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx deleted file mode 100644 index d9c5163a..00000000 --- a/src/components/Footer/Footer.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import Logo from '../logo/Logo' -import VisaIcon from '@/assets/images/footer/visa.svg' -import MastercardIcon from '@/assets/images/footer/mastercard.svg' -import MirIcon from '@/assets/images/footer/mir.svg' -import WebmoneyIcon from '@/assets/images/footer/webmoney.svg' -import UmoneyIcon from '@/assets/images/footer/io.svg' -import SubscribeForm from '../SubscribeForm/SubscribeForm' -import Link from '@/shared/ui/Link/Link' -import styles from './footer.module.scss' - -function Footer() { - const onSubmitHandler = () => {} - return ( -
    -
    -
    -
    - -

    Интернет-магазин «Maxboom.ru», 2023

    -
    -
    - -
    -
    -

    Поддержка

    -
    -
      -
    • - - +7 977 848-02-28 - -
      • -
    • - - Обратный звонок - -
      • -
    -

    Будни, с 10:00 до 20:00

    -
    -
    -
    -
    -
    -

    - Created by{' '} - - maxboom.ru - -

    -
      -
    • - - - -
      • -
    • - - - -
      • -
    • - - - -
      • -
    • - - - -
      • -
    • - - - -
      • -
    -
    -
    -
    -
    - ) -} - -export default Footer diff --git a/src/components/Subscribe/Subscribe.tsx b/src/components/Subscribe/Subscribe.tsx index 6b514c39..9c91c945 100644 --- a/src/components/Subscribe/Subscribe.tsx +++ b/src/components/Subscribe/Subscribe.tsx @@ -1,6 +1,6 @@ import styles from './Subscribe.module.scss' import imgSubs from '@/assets/images/img-subsc-small.png' -import SubscribeForm from '../SubscribeForm/SubscribeForm' +import SubscribeForm from '../../entities/SubscribeForm/SubscribeForm' const Subscribe = () => { const onSubmitHandler = () => {} diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx index 1656090e..e3cb12ee 100644 --- a/src/components/header/header.tsx +++ b/src/components/header/header.tsx @@ -1,6 +1,7 @@ +import { coreBaseData } from '@/mockData/coreBaseData' import { useMemo } from 'react' import classNames from 'classnames' -import Logo from '../logo/Logo' +import Logo from '../../shared/ui/logo/Logo' import ArrowIcon from '@/assets/icons/arrow.svg' import LightningIcon from '@/assets/images/header/lightning.svg' import ContextMenuElement from '../ContextMenuElement/ContextMenuElement' @@ -151,7 +152,13 @@ function Header() {
    - +
    diff --git a/src/components/logo/Logo.tsx b/src/components/logo/Logo.tsx deleted file mode 100644 index b9514daf..00000000 --- a/src/components/logo/Logo.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { FC } from 'react' -import logo from '@/assets/images/logo/maxboom.jpg' -import styles from './logo.module.scss' -import Link from '@/shared/ui/Link/Link' - -type TLogoProps = { - width: string - height: string -} -/** - * @param {string} width - ширина логотипа - * @param {string} height - высота логотипа - */ - -const Logo: FC = ({ width, height }) => { - return ( -
    - - maxboom - -
    - ) -} - -export default Logo diff --git a/src/components/SubscribeForm/SubscribeForm.tsx b/src/entities/SubscribeForm/SubscribeForm.tsx similarity index 91% rename from src/components/SubscribeForm/SubscribeForm.tsx rename to src/entities/SubscribeForm/SubscribeForm.tsx index a66df0e5..7c1d222f 100644 --- a/src/components/SubscribeForm/SubscribeForm.tsx +++ b/src/entities/SubscribeForm/SubscribeForm.tsx @@ -36,7 +36,9 @@ const SubscribeForm: FC = ({ className, type, onSubmit }) => { {/* @TODO: Добавить компонент Label https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/102 */} Подписаться на рассылку - Мы не будем присылать вам спам. Только скидки и выгодные предложения + + Мы не будем присылать вам спам. Только скидки и выгодные предложения +
    diff --git a/src/entities/SubscribeForm/subscribeForm.module.scss b/src/entities/SubscribeForm/subscribeForm.module.scss index e8302735..b1097a5c 100644 --- a/src/entities/SubscribeForm/subscribeForm.module.scss +++ b/src/entities/SubscribeForm/subscribeForm.module.scss @@ -96,10 +96,10 @@ .caption { display: none; - @include media.respond-to('middle') { + @include media.respond-to('large') { display: flex; font-size: 16px; - font-weight: 500; + font-weight: 400; line-height: 16px; } } diff --git a/src/shared/ui/logo/Logo.tsx b/src/shared/ui/logo/Logo.tsx index 858565c6..f1c46785 100644 --- a/src/shared/ui/logo/Logo.tsx +++ b/src/shared/ui/logo/Logo.tsx @@ -19,7 +19,7 @@ type TLogoProps = { const Logo: FC = ({ image, title, url, width, height }) => { return ( -
    +
    {title} diff --git a/src/widgets/Footer/Footer.tsx b/src/widgets/Footer/Footer.tsx index de30f4cf..86b68894 100644 --- a/src/widgets/Footer/Footer.tsx +++ b/src/widgets/Footer/Footer.tsx @@ -3,8 +3,7 @@ import Logo from '@/shared/ui/logo/Logo' import Link from '@/shared/ui/Link/Link' import SubscribeForm from '@/entities/SubscribeForm/SubscribeForm' import styles from './footer.module.scss' - -console.log(coreBaseData.footer) +import Payments from '@/entities/Payments/Payments' function Footer() { const onSubmitHandler = () => {} @@ -52,20 +51,7 @@ function Footer() { maxboom.ru

    -
      - {coreBaseData.footer.additional_logos.map(logo => ( -
    • - - {logo.title} - -
      • - ))} -
    +
    diff --git a/src/widgets/Footer/footer.module.scss b/src/widgets/Footer/footer.module.scss index 87fa6124..cb37481c 100644 --- a/src/widgets/Footer/footer.module.scss +++ b/src/widgets/Footer/footer.module.scss @@ -99,10 +99,6 @@ } } - &__payment-link { - text-decoration: none; - } - &__hours { margin: 0; padding: 0; @@ -149,42 +145,6 @@ } } - &__payments { - margin: 0; - padding: 0; - display: flex; - column-gap: 3px; - list-style: none; - margin-right: 8px; - } - - &__payment-item { - display: flex; - width: 34px; - height: 24px; - padding: 3px; - justify-content: center; - align-items: center; - border-radius: 4px; - background: var.$bg-no-image; - } - - &__payment-icon { - display: flex; - width: 100%; - height: 100%; - } - - &__payment-nav { - margin: 0; - padding: 0; - list-style: none; - display: flex; - align-items: center; - justify-content: center; - column-gap: 3px; - } - &__nav { margin: 0; padding: 0; From 9e386dee3691ad68b6fd2ae008e493c12aab50a2 Mon Sep 17 00:00:00 2001 From: Artur Khelshtein Date: Thu, 11 Jan 2024 15:23:34 +0300 Subject: [PATCH 24/26] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D1=82=D1=8C=20=D1=82=D0=B8=D0=BF=D1=8B=20=D0=B2=20=D0=B8=D0=BC?= =?UTF-8?q?=D0=BF=D0=BE=D1=80=D1=82=20FC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/entities/Payments/Payments.tsx | 2 +- src/shared/ui/logo/Logo.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/entities/Payments/Payments.tsx b/src/entities/Payments/Payments.tsx index 93edd9a6..a762662b 100644 --- a/src/entities/Payments/Payments.tsx +++ b/src/entities/Payments/Payments.tsx @@ -1,4 +1,4 @@ -import { FC } from 'react' +import { type FC } from 'react' import Link from '@/shared/ui/Link/Link' import styles from './payments.module.scss' diff --git a/src/shared/ui/logo/Logo.tsx b/src/shared/ui/logo/Logo.tsx index f1c46785..f7e9eea7 100644 --- a/src/shared/ui/logo/Logo.tsx +++ b/src/shared/ui/logo/Logo.tsx @@ -1,4 +1,4 @@ -import { FC } from 'react' +import { type FC } from 'react' import styles from './logo.module.scss' import Link from '@/shared/ui/Link/Link' From ae6969446015112948613be5d07faf85ce38a66f Mon Sep 17 00:00:00 2001 From: Artur Khelshtein Date: Thu, 11 Jan 2024 22:17:21 +0300 Subject: [PATCH 25/26] =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=BD=D0=B5?= =?UTF-8?q?=D1=81=D1=82=D0=B8=20SubscribeForm=20=D0=B8=D0=B7=20entities=20?= =?UTF-8?q?=D0=B2=20features?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Subscribe/Subscribe.tsx | 2 +- src/{entities => features}/SubscribeForm/SubscribeForm.tsx | 0 .../SubscribeForm/subscribeForm.module.scss | 0 src/widgets/Footer/Footer.tsx | 2 +- 4 files changed, 2 insertions(+), 2 deletions(-) rename src/{entities => features}/SubscribeForm/SubscribeForm.tsx (100%) rename src/{entities => features}/SubscribeForm/subscribeForm.module.scss (100%) diff --git a/src/components/Subscribe/Subscribe.tsx b/src/components/Subscribe/Subscribe.tsx index 9c91c945..c4a18f33 100644 --- a/src/components/Subscribe/Subscribe.tsx +++ b/src/components/Subscribe/Subscribe.tsx @@ -1,6 +1,6 @@ import styles from './Subscribe.module.scss' import imgSubs from '@/assets/images/img-subsc-small.png' -import SubscribeForm from '../../entities/SubscribeForm/SubscribeForm' +import SubscribeForm from '../../features/SubscribeForm/SubscribeForm' const Subscribe = () => { const onSubmitHandler = () => {} diff --git a/src/entities/SubscribeForm/SubscribeForm.tsx b/src/features/SubscribeForm/SubscribeForm.tsx similarity index 100% rename from src/entities/SubscribeForm/SubscribeForm.tsx rename to src/features/SubscribeForm/SubscribeForm.tsx diff --git a/src/entities/SubscribeForm/subscribeForm.module.scss b/src/features/SubscribeForm/subscribeForm.module.scss similarity index 100% rename from src/entities/SubscribeForm/subscribeForm.module.scss rename to src/features/SubscribeForm/subscribeForm.module.scss diff --git a/src/widgets/Footer/Footer.tsx b/src/widgets/Footer/Footer.tsx index 86b68894..75bc7485 100644 --- a/src/widgets/Footer/Footer.tsx +++ b/src/widgets/Footer/Footer.tsx @@ -1,7 +1,7 @@ import { coreBaseData } from '@/mockData/coreBaseData' import Logo from '@/shared/ui/logo/Logo' import Link from '@/shared/ui/Link/Link' -import SubscribeForm from '@/entities/SubscribeForm/SubscribeForm' +import SubscribeForm from '@/features/SubscribeForm/SubscribeForm' import styles from './footer.module.scss' import Payments from '@/entities/Payments/Payments' From 0ee23f459a374bfb75a86f4bc1af160db24eb43c Mon Sep 17 00:00:00 2001 From: Artem Sibisov Date: Sat, 13 Jan 2024 19:49:57 +0800 Subject: [PATCH 26/26] Update Contacts.tsx --- src/features/Contacts/Contacts.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/features/Contacts/Contacts.tsx b/src/features/Contacts/Contacts.tsx index 2f4614e7..c0499344 100644 --- a/src/features/Contacts/Contacts.tsx +++ b/src/features/Contacts/Contacts.tsx @@ -25,8 +25,7 @@ const Contacts: FC = ({ messenger }) => { return (
    -
    +
      {messenger.map(item => (