+
+ );
+};
diff --git a/src/components/ButtonDefault.jsx b/src/components/ButtonDefault.jsx
new file mode 100644
index 0000000..32f97e4
--- /dev/null
+++ b/src/components/ButtonDefault.jsx
@@ -0,0 +1,23 @@
+export const ButtonDefault = ({ onClick, children, propStyles }) => {
+ const style = {
+ height: 50,
+ width: 'calc(100% - 20px)',
+ backgroundColor: 'rgba(0, 122, 255, 1)',
+ borderRadius: 8,
+ color: 'white',
+ fontSize: 17,
+ fontWeight: 600,
+ position: 'fixed',
+ bottom: 67,
+ marginBottom: 'env(safe-area-inset-bottom)',
+ left: 10,
+ zIndex: 100,
+ ...propStyles
+ };
+
+ return (
+
+ );
+};
diff --git a/src/components/Inputs/Input.jsx b/src/components/Inputs/Input.jsx
new file mode 100644
index 0000000..c99a317
--- /dev/null
+++ b/src/components/Inputs/Input.jsx
@@ -0,0 +1,17 @@
+import styles from './input.module.scss';
+
+export const Input = ({ prop }) => {
+ const handleChange = (e) => {
+ prop.setValue(e.target.value.replace(/[а-яА-Я]/g, ''));
+
+ if (prop.place === 'Phone number') {
+ prop.setValue(e.target.value.replace(/[^\d]/g, ''));
+ }
+ };
+
+ return (
+
+
+
+
+ {data.isClosing && (
+ + {data.title} +
+ +{data.text}
+ +
+
+
+ )}
+
+
+
+ );
+};
diff --git a/src/components/Inputs/Input.module.scss b/src/components/Inputs/Input.module.scss
new file mode 100644
index 0000000..ed66f86
--- /dev/null
+++ b/src/components/Inputs/Input.module.scss
@@ -0,0 +1,24 @@
+.wrapper {
+ background-color: #fff;
+ margin-inline: 15px;
+ border-radius: 12px;
+ margin-top: 10px;
+}
+
+.input {
+ padding: 15px 16px;
+ border: 0px;
+ border-radius: 12px;
+ width: 100%;
+ outline: none;
+
+ font-size: 17px;
+ line-height: 22px;
+
+ &::placeholder {
+ font-size: 17px;
+ line-height: 22px;
+ color: rgba(112, 117, 121, 1);
+
+ }
+}
\ No newline at end of file
diff --git a/src/components/LikeToggler.jsx b/src/components/LikeToggler.jsx
new file mode 100644
index 0000000..718ef44
--- /dev/null
+++ b/src/components/LikeToggler.jsx
@@ -0,0 +1,55 @@
+import { useSelector, useDispatch } from "react-redux";
+import { likeToggler } from "../redux/slice/userSlice";
+import React from 'react'
+
+
+export const LikeToggler = ({ ...props }) => {
+
+ const user = useSelector((state) => state.user);
+ const [like, setLike] = React.useState(false);
+
+ React.useEffect(() => {
+ if (user) {
+ const s = user.likedProducts.filter((a) => a === props.productId);
+ s.length === 0 ? setLike(false) : setLike(true);
+ }
+ }, [user, props.productId]);
+ const dispatch = useDispatch()
+
+ return (
+ dispatch(likeToggler(props.productId))}
+ style={{
+ width: Number(props.width),
+ borderRadius: 100,
+ backgroundColor: '#fff',
+ position: 'absolute',
+ top: Number(props.top),
+ right: Number(props.right),
+ aspectRatio: 1,
+ zIndex: 100,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ }}
+ >
+ {like ? (
+
+ ) : (
+
+ )}
+
+ );
+};
diff --git a/src/components/Loader.jsx b/src/components/Loader.jsx
new file mode 100644
index 0000000..3e75999
--- /dev/null
+++ b/src/components/Loader.jsx
@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react';
+
+export const Loader = () => {
+ const [longload, setLongload] = useState(false);
+ useEffect(() => {
+ setTimeout(() => {
+ setLongload(true);
+ }, 7000);
+ }, []);
+ return (
+
+
+
+ {longload && (
+
+ );
+};
diff --git a/src/components/Nav/Nav.jsx b/src/components/Nav/Nav.jsx
new file mode 100644
index 0000000..c94db12
--- /dev/null
+++ b/src/components/Nav/Nav.jsx
@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+import styles from './nav.module.scss';
+import { Link } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+
+export const Nav = () => {
+ const [page, setPage] = useState();
+ const user = useSelector((state) => state.user);
+ useEffect(() => {
+ setPage(window.location.pathname);
+ }, []);
+ return (
+
+ Hmm...something wrong.
+ If you use just a browser, please
+ go to telegram MiniApp
+ ...or try again later
+
+
+ );
+};
diff --git a/src/components/Nav/nav.module.scss b/src/components/Nav/nav.module.scss
new file mode 100644
index 0000000..dfdcc8a
--- /dev/null
+++ b/src/components/Nav/nav.module.scss
@@ -0,0 +1,57 @@
+.outWrapper {
+ display: flex;
+ background-color: #fff;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ z-index: 300;
+ width: 100%;
+ padding-bottom: env(safe-area-inset-bottom);
+}
+
+.wrapper {
+ height: 57px;
+ border-top: 1px solid rgba(0, 0, 0, 0.15);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ background-color: #fff;
+
+}
+
+.ordersCounter {
+ position: absolute;
+ top: 0;
+ right: 0;
+ background-color: var(--blue-color);
+ color: white;
+ border-radius: 100px;
+ width: 17px;
+ height: 17px;
+ font-size: 10px;
+ padding-bottom: 1px;
+ padding-right: 1px;
+ font-weight: 700;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transform: translate(20%, -20%);
+}
+
+.item {
+
+ position: relative;
+ width: 100%;
+ text-align: center;
+ text-decoration: none;
+
+ * {
+ transition: 0.2s ease-in-out;
+ }
+
+ p {
+ font-size: 10px;
+ color: rgba(162, 172, 176, 1);
+ }
+}
diff --git a/src/components/ProductCard/ProductCard.jsx b/src/components/ProductCard/ProductCard.jsx
new file mode 100644
index 0000000..4c48238
--- /dev/null
+++ b/src/components/ProductCard/ProductCard.jsx
@@ -0,0 +1,65 @@
+import { Swiper, SwiperSlide } from "swiper/react";
+import { useNavigate } from "react-router-dom";
+
+import styles from "./prodCard.module.scss";
+
+import { LikeToggler } from "../../components/LikeToggler";
+
+import useSlider from "/src/hooks/useSlider";
+
+export const ProductCard = ({ data }) => {
+ const navigate = useNavigate();
+ const { images, setSlide, currentSlide } = useSlider({ images: data.images });
+
+ return (
+
+
+
+
+
+
+
+
+
+ Home
+
+
+
+
+
+
+ Categories
+
+
+
+
+
+
+ {user.cartAmount > 0 &&
+ {user.cartAmount}
}
+
+
+
+ Orders
+
+
+
+
+
+ Profile
+
+ setSlide(s.activeIndex)} onClick={() => navigate(`/product/${data._id}`)}>
+ {images
+ .filter((name) => name?.split("-")[1] !== "video")
+ .map((image, index) => {
+ return (
+
+ 
+
+ );
+ })}
+
+
+ );
+};
diff --git a/src/components/ProductCard/prodCard.module.scss b/src/components/ProductCard/prodCard.module.scss
new file mode 100644
index 0000000..94fb4bf
--- /dev/null
+++ b/src/components/ProductCard/prodCard.module.scss
@@ -0,0 +1,73 @@
+.imgBlock {
+ position: relative;
+ aspect-ratio: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 16px;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ video {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+}
+
+.dots {
+ display: flex;
+ margin-top: 8px;
+ align-items: center;
+ justify-content: center;
+ gap: 4px;
+}
+
+.dot {
+ width: 4px;
+ aspect-ratio: 1;
+ border-radius: 100px;
+ background-color: #d9d9d9;
+}
+
+.name {
+ font-size: 14px;
+ line-height: 16px;
+ margin-top: 4px;
+ white-space: nowrap;
+
+ font-family: "H_neue";
+ font-weight: 500;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.price {
+ display: flex;
+ align-items: center;
+ column-gap: 6px;
+ margin-top: 10px;
+
+ p {
+ font-size: 18px;
+ font-weight: 700;
+ line-height: 16px;
+ }
+}
+
+.dCost {
+ display: flex;
+ margin-top: 4px;
+ column-gap: 4px;
+
+ p {
+ font-size: 10px;
+ line-height: 16px;
+ font-weight: 400;
+ color: #808080;
+ }
+}
\ No newline at end of file
diff --git a/src/components/Quote.jsx b/src/components/Quote.jsx
new file mode 100644
index 0000000..79bc7bd
--- /dev/null
+++ b/src/components/Quote.jsx
@@ -0,0 +1,48 @@
+export const Quote = ({ text, lineColor, bgColor, dopStyles }) => {
+ return (
+
+ {images
+ .filter((name) => name?.split("-")[1] !== "video")
+ .map((_, index) => {
+ return ;
+ })}
+
+ navigate(`/product/${data._id}`)}>
+
+ {data.name}
+
+
+
+
+ + {data.price} {data.currency} +
+
+
+
+ {"Free Delivery"}
+
+
+ ') }} />
+
+
+
+ );
+};
diff --git a/src/components/Toggler.jsx b/src/components/Toggler.jsx
new file mode 100644
index 0000000..3b658c0
--- /dev/null
+++ b/src/components/Toggler.jsx
@@ -0,0 +1,29 @@
+export const Toggler = ({ func, backgroundColor, flag }) => {
+ return (
+
+
+
+ );
+};
diff --git a/src/components/icons.jsx b/src/components/icons.jsx
new file mode 100644
index 0000000..1c3e751
--- /dev/null
+++ b/src/components/icons.jsx
@@ -0,0 +1,43 @@
+export const sub = () => {
+ return (
+
+ );
+};
+
+export const vector = () => {
+ return (
+
+ );
+};
+
+export const recipientIcon = () => {
+ return (
+
+ );
+};
+
+export const Copy_icon = () => {
+ return (
+
+ );
+};
diff --git a/src/global.scss b/src/global.scss
new file mode 100644
index 0000000..f2e2806
--- /dev/null
+++ b/src/global.scss
@@ -0,0 +1,112 @@
+@font-face {
+ font-family: 'SF Pro Display';
+ src: url('./assets/fonts/sf/sf-pro-icons_light.woff2');
+ font-weight: 400;
+}
+
+@font-face {
+ font-family: 'SF Pro Display';
+ src: url('./assets/fonts/sf/sf-pro-display_semibold.woff2');
+ font-weight: 600;
+}
+
+@font-face {
+ font-family: 'SF Pro Display';
+ src: url('./assets/fonts/sf/sf-pro-display_bold.woff2');
+ font-weight: 700;
+}
+
+@font-face {
+ font-family: 'SF Pro Icons';
+ src: url('./assets/fonts/sf/sf-pro-icons_light.woff2');
+}
+
+@font-face {
+ font-family: 'H_neue';
+ src: url('./assets/fonts/helvetica/HelveticaNeueCyr-Roman.woff2') format('woff2');
+ font-weight: 400;
+}
+
+@font-face {
+ font-family: 'H_neue';
+ src: url('./assets/fonts/helvetica/HelveticaNeueCyr-Medium.woff2') format('woff2');
+ font-weight: 500;
+}
+
+@font-face {
+ font-family: 'H_neue';
+ src: url('./assets/fonts/helvetica/HelveticaNeueCyr-Bold.woff2') format('woff2');
+ font-weight: 700;
+}
+
+:root {
+ --blue-color: #007AFF;
+}
+
+.category-preloader {
+ width: 100%;
+ aspect-ratio: 1;
+ background-color: #f5f5f5;
+ border-radius: 20px;
+
+ &-text {
+ margin-top: 4px;
+ height: 10px;
+ background-color: #f5f5f5;
+ width: 100%;
+ border-radius: 10px;
+
+
+ }
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ font-family: 'H_neue';
+
+ box-sizing: border-box;
+
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Устанавливаем прозрачный цвет подсветки */
+ -webkit-tap-highlight-color: transparent; /* Для старых версий браузеров */
+ -webkit-tap-highlight-color: none; /* Для Internet Explorer */
+}
+
+body {
+ margin: 0;
+ max-width: 100vw;
+ min-width: 320px;
+ background-color: #fff;
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+
+.text-13 {
+ font-family: "H_neue";
+ font-size: 13px;
+ line-height: 16px;
+ font-weight: 400;
+ color: rgba(112, 117, 121, 1);
+ padding-inline: 15px;
+ text-transform: uppercase;
+ margin-left: 15px;
+}
\ No newline at end of file
diff --git a/src/hooks/useSlider.js b/src/hooks/useSlider.js
new file mode 100644
index 0000000..6cb05d7
--- /dev/null
+++ b/src/hooks/useSlider.js
@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+
+export default ({ numberUploadedImages = 2, images: totalImages }) => {
+ const [slide, setSlide] = useState(0);
+ const [images, setImages] = useState(() => [...totalImages.slice(0, numberUploadedImages), ...getFakeData(numberUploadedImages)]);
+
+ function getFakeData(length) {
+ const dif = totalImages.length - length;
+
+ if (!dif || dif < 0) return [];
+
+ return Array(dif).fill(null);
+ }
+
+ useEffect(() => {
+ const indexUnploadedImage = images.indexOf(null);
+
+ if (indexUnploadedImage === -1) return;
+
+ const isAddUnploadedImage = slide + 1 === indexUnploadedImage;
+
+ if (isAddUnploadedImage) {
+ const realItems = images.filter((image) => image);
+ const fakeItems = getFakeData(realItems.length + 1);
+
+ setImages([...realItems, totalImages[indexUnploadedImage], ...fakeItems]);
+ }
+ }, [slide]);
+
+ return { setSlide, currentSlide: slide, images };
+};
diff --git a/src/hooks/useTelegramBackButton.js b/src/hooks/useTelegramBackButton.js
new file mode 100644
index 0000000..69c4925
--- /dev/null
+++ b/src/hooks/useTelegramBackButton.js
@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+
+const useTelegramBackButton = (onBackClick) => {
+ useEffect(() => {
+ if (window.Telegram && window.Telegram.WebApp && window.Telegram.WebApp.BackButton) {
+ window.Telegram.WebApp.BackButton.onClick(onBackClick);
+
+ return () => {
+ window.Telegram.WebApp.BackButton.offClick(onBackClick);
+ };
+ }
+ }, [onBackClick]);
+};
+export default useTelegramBackButton;
diff --git a/src/main.jsx b/src/main.jsx
new file mode 100644
index 0000000..800b10b
--- /dev/null
+++ b/src/main.jsx
@@ -0,0 +1,32 @@
+import "./global.scss";
+import "swiper/css";
+import "swiper/css/autoplay";
+
+import "./styles/clashFonts.scss";
+import ReactDOM from "react-dom/client";
+import { RouterProvider } from "react-router-dom";
+import { router, desktopRouter } from "./Router";
+import { TonConnectUIProvider } from "@tonconnect/ui-react";
+import { Provider } from "react-redux";
+import { store } from "./redux/store";
+import CustomProvider from "./CustomProvider";
+
+window.Telegram.WebApp.expand();
+window.Telegram.WebApp.setHeaderColor("#fff");
+window.Telegram.WebApp.setBackgroundColor("#fff");
+window.Telegram.WebApp.enableClosingConfirmation();
+window.Telegram.WebApp.BackButton.show();
+
+export const api_server = "https://magaz.tonwinners.com";
+
+// if (window.Telegram.WebApp.platform !== 'unknown') {
+ReactDOM.createRoot(document.getElementById("root")).render(
+
+ {user.cart && user.cart?.length === 0 && (
+ navigate('/payment')}>
+ {user.appLanguage === 'ru' ? 'Оформить заказ: ' : 'Checkout order: '} {user.cartCost} TON
+
+ ) : (
+ navigate('/')}>
+ {user.appLanguage === 'ru' ? 'Выберите товары' : 'Back to Home'}
+
+ )
+ ) : (
+ {user.appLanguage === 'ru' ? 'Подключить кошелек' : 'Connect Wallet'}
+ ))}
+
+
+
+ );
+};
diff --git a/src/pages/Cart/orders.module.scss b/src/pages/Cart/orders.module.scss
new file mode 100644
index 0000000..c8dc696
--- /dev/null
+++ b/src/pages/Cart/orders.module.scss
@@ -0,0 +1,152 @@
+.wrapper {
+ padding-top: 10px;
+ padding-bottom: 170px;
+}
+
+.wrapperEmpty {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+
+ .emptyP {
+ width: 240px;
+ margin-top: 20px;
+ text-align: center;
+ margin-inline: auto;
+ }
+}
+
+.lottie {
+ width: 200px;
+}
+
+.return {
+ font-size: 14px;
+ line-height: 16px;
+ font-family: "H_neue";
+ text-decoration: underline;
+ color: rgba(112, 117, 121, 1);
+ text-align: right;
+ margin-inline: 15px;
+ cursor: pointer;
+}
+
+.cartItem {
+ background-color: #f5f5f5;
+ border-radius: 16px;
+ padding: 12px;
+ margin-top: 10px;
+ margin-inline: 15px;
+ transition: .2s ease-in-out;
+}
+
+.topside {
+ border-bottom: 1px solid rgba(0,0,0,.15);
+ padding-bottom: 10px;
+ display: flex;
+}
+
+.title {
+ font-weight: 600;
+
+}
+
+
+
+.imgBlock {
+ width: 100px;
+ height: 100px;
+ min-width: 100px;
+ min-height: 100px;
+ overflow: hidden;
+ aspect-ratio: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 12px;
+ border: 1px solid rgba(0, 0, 0, 0.05);
+ background-color: #fff;
+
+ img {
+ user-select: none;
+ width: 100%;
+ object-fit: cover;
+ }
+}
+
+.central {
+ margin-right: 20px;
+ margin-left: 10px;
+ font-size: 17px;
+ line-height: 22px;
+}
+
+.description {
+ overflow: hidden;
+ max-height: 64px;
+ text-overflow: ellipsis;
+ font-size: 13px;
+ line-height: 16px;
+ font-weight: 400;
+ margin-top: 4px;
+ color: rgba(112, 117, 121, 1);
+}
+
+.picker {
+ cursor: pointer;
+ min-width: 24px;
+ min-height: 24px;
+ width: 24px;
+ height: 24px;
+ background-color: rgba(0, 122, 255, 1);
+ border-radius: 100px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.notInOrderCard {
+ opacity: .7;
+}
+
+
+
+.notInOrderCheckbox {
+
+ background-color: transparent;
+ border: 2px solid rgba(0,0,0,.05);
+}
+
+.botside {
+ margin-top: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+}
+
+.counter {
+ display: flex;
+ align-items: center;
+ column-gap: 16px;
+ font-size: 20px;
+ line-height: 16px;
+ font-weight: 700;
+ user-select: none;
+
+ svg {
+ cursor: pointer;
+
+ }
+}
+
+.price {
+ display: flex;
+ align-items: center;
+ column-gap: 5px;
+ font-size: 20px;
+ line-height: 16px;
+ font-weight: 700;
+ font-family: "H_neue";
+}
\ No newline at end of file
diff --git a/src/pages/Categories/Categoriespage.jsx b/src/pages/Categories/Categoriespage.jsx
new file mode 100644
index 0000000..65aa6c1
--- /dev/null
+++ b/src/pages/Categories/Categoriespage.jsx
@@ -0,0 +1,73 @@
+import { useSelector } from 'react-redux';
+import styles from './cat.module.scss';
+
+import { Link } from 'react-router-dom';
+import { Nav } from '../../components/Nav/Nav';
+import { useState, useEffect } from 'react';
+import { ProductCard } from '../../components/ProductCard/ProductCard';
+import { ButtonDefault } from '../../components/ButtonDefault';
+import { useTonConnectModal, useTonWallet } from '@tonconnect/ui-react';
+import { api_server } from '../../main';
+import axios from 'axios';
+import { CategoryCard } from './CategoryCard';
+
+export const Categoriespage = () => {
+ const products = useSelector((state) => state.products.productsList);
+ const [pickedCategory, setPickedCategory] = useState(null);
+ const [categories, setCategories] = useState(['', '', '']);
+
+ const wallet = useTonWallet();
+ const { open } = useTonConnectModal();
+ useEffect(() => {
+ window.scrollTo(0, 0);
+ axios.get(`${api_server}/api/get-categories`).then((res) => {
+ setCategories(res.data);
+ });
+ }, []);
+
+ return (
+
+ navigate('/')}>{user.appLanguage === 'ru' ? 'Вернуться на главную' : 'Back to home'}
+
+ )}
+
+ {user.cart && user.cart?.length > 0 && (
+ <>
+
+
+ Oops...there's nothing, pick some products and come back
+ dispatch(emptyCart())}>
+ {user.appLanguage === 'ru' ? 'Очистить корзину' : 'Delete all'}
+
+ {user.cart.map((item, index) => {
+ return (
+
+
+ );
+ })}
+
+ )}
+
+ {user.cart.length !== 0 &&
+ (wallet ? (
+
+ user.cartCost > 0 ? (
+
+
+
+
+ navigate(`/product/${item._id}`)}>
+ 
+
+
+ navigate(`/product/${item._id}`)}>
+
+
+ {item.name.split(' ').slice(0, 3).join(' ')}
+ + dispatch(inOrderToggler(item))}
+ >
+ {item.inOrder && (
+
+ )}
+
+
+
+
+ {item.counter === 1 ? (
+
+ ) : (
+
+ )}
+
+ {item.counter}
+
+
+
+
+
+
+
+ {item.price} TON
+
+ Connect Wallet }
+
+
+{/*
+
+ );
+};
diff --git a/src/pages/Categories/CategoryCard.jsx b/src/pages/Categories/CategoryCard.jsx
new file mode 100644
index 0000000..db6b342
--- /dev/null
+++ b/src/pages/Categories/CategoryCard.jsx
@@ -0,0 +1,12 @@
+import styles from './cat.module.scss';
+
+export const CategoryCard = ({ categoryData, setPickedCategory }) => {
+ return (
+
+ Home
+
+ setPickedCategory(null)}>
+ Categories
+
+
+ {/* prettier-ignore */}
+ {pickedCategory && (<>{pickedCategory})}
+
+
+ {!pickedCategory && (
+
+ {categories && categories.map((categoryData, index) =>
+ )}
+
+ Update coming soon
+ + {pickedCategory && ( +
+ {products.filter((item) => item.category.toLowerCase() === pickedCategory.toLowerCase()).map((data, index) => (
+
+ )}
+
+ {!wallet && setPickedCategory(categoryData.name)} className={styles.catCard}>
+
+ );
+};
diff --git a/src/pages/Categories/cat.module.scss b/src/pages/Categories/cat.module.scss
new file mode 100644
index 0000000..ee978eb
--- /dev/null
+++ b/src/pages/Categories/cat.module.scss
@@ -0,0 +1,90 @@
+.wrapper {
+ padding-bottom: 30px;
+ overflow: hidden;
+
+}
+
+.categoriesSoon {
+text-align: center;
+
+}
+
+.bread {
+ display: flex;
+ align-items: center;
+ margin-left: 22px;
+ column-gap: 12px;
+ margin-top: 8px;
+ height: 50px;
+ font-weight: 500;
+
+ a {
+ font-size: 15px;
+ line-height: 20px;
+ color: rgba(112, 117, 121, 1);
+ text-decoration: none;
+ }
+
+ span {
+ width: 4px;
+ height: 4px;
+ background-color: rgba(0, 0, 0, 0.15);
+ }
+}
+
+.catList {
+ display: grid;
+ column-gap: 4px;
+ grid-template-columns: repeat(3, 1fr);
+ row-gap: 10px;
+ width: calc(100% - 30px);
+ margin-top: 10px;
+ margin-bottom: 30px;
+ margin-inline: 15px;
+}
+
+.cardLink {
+ text-decoration: none;
+ color: black;
+}
+
+.catCard {
+ cursor: pointer;
+
+ .imgBlock {
+ border-radius: 20px;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ aspect-ratio: 1;
+
+ img {
+ border-radius: 20px;object-fit: cover;width: 100%;
+ height: 100%;
+ }
+ }
+
+ .name {
+ text-align: center;
+ font-size: 10px;
+ line-height: 10px;
+ margin-top: 4px;
+ color: black;
+ text-decoration: none;
+ }
+}
+
+.catalog {
+ padding-inline: 15px;
+
+ display: grid;
+ grid-template-columns: repeat(2, calc(50% - 10px));
+ column-gap: 10px;
+ row-gap: 20px;
+ margin-top: 6px;
+ margin-bottom: 30px;
+}
+
+
diff --git a/src/pages/ChangeAddress/ChangeAddress.jsx b/src/pages/ChangeAddress/ChangeAddress.jsx
new file mode 100644
index 0000000..788e4b5
--- /dev/null
+++ b/src/pages/ChangeAddress/ChangeAddress.jsx
@@ -0,0 +1,117 @@
+import { useEffect, useState } from 'react';
+import { Nav } from '../../components/Nav/Nav';
+import styles from './changeAddress.module.scss';
+import { Input } from '../../components/Inputs/Input';
+import { useSelector, useDispatch } from 'react-redux';
+import { ButtonDefault } from '../../components/ButtonDefault';
+import { useNavigate, useParams } from 'react-router-dom';
+import { changeMyAddress, removeSavedAddress } from '../../redux/slice/userSlice';
+
+export const ChangeAddress = () => {
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
+
+ const user = useSelector(state => state.user)
+ const appLanguage = user.appLanguage;
+ const { addressId } = useParams();
+ const myAddress = user.savedAddresses.filter((address) => address.id === parseInt(addressId))[0];
+
+ const [name, setName] = useState('' );
+ const [country, setCountry] = useState('');
+ const [state, setState] = useState('');
+ const [city, setCity] = useState('');
+ const [street, setStreet] = useState('');
+ const [zip, setZip] = useState('');
+
+
+ useEffect(() => {
+ if (!myAddress) {
+ navigate('/create-new-address')
+ }
+ if (myAddress) {
+ setName(myAddress.name)
+ setCountry(myAddress.country)
+ setState(myAddress.state)
+ setCity(myAddress.city)
+ setStreet(myAddress.street)
+ setZip(myAddress.zip)
+ }
+ }, [user, myAddress, navigate])
+
+ return (
+
+ {categoryData.image && 
}
+
+ {categoryData.name}
+
+ {
+ const newAddress = {
+ id: myAddress.id,
+ name,
+ country,
+ state,
+ city,
+ street,
+ zip,
+ };
+ if (!validate(newAddress)) {
+ console.log('data not valid')
+ return;
+ }
+ dispatch(changeMyAddress(newAddress))
+ navigate(-1)
+ }}
+ >
+ {appLanguage === 'ru' ? 'Сохранить адрес' : 'Save address'}
+
+
+
+ );
+};
+
+function validate(address) {
+ if (address.name.length < 1) {
+ return false;
+ }
+
+ if (address.country.length < 3) {
+ return false;
+ }
+
+ if (address.state < 2) {
+ return false;
+ }
+
+ if (address.city < 2) {
+ return false;
+ }
+
+ if (address.street < 3) {
+ return false;
+ }
+
+ if (address.zip < 4) {
+ return false;
+ }
+
+ return true;
+}
diff --git a/src/pages/ChangeAddress/changeAddress.module.scss b/src/pages/ChangeAddress/changeAddress.module.scss
new file mode 100644
index 0000000..1d48d70
--- /dev/null
+++ b/src/pages/ChangeAddress/changeAddress.module.scss
@@ -0,0 +1,25 @@
+.wrapper {
+ padding-top: 25px;
+ background-color: #efeff4;
+ padding-bottom: 250px;
+}
+
+.deleteButton {
+ background-color: #ff161610;
+ width: calc(100% - 30px);
+ margin-inline: 15px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ column-gap: 10px;
+ font-size: 17px;
+ line-height: 24px;
+ font-weight: 600;
+ color: rgba(229, 57, 53, 1);
+ margin-top: 20px;
+ user-select: none;
+
+ &:active {
+ background-color: #dd111138;
+ }
+}
diff --git a/src/pages/ChangeRecipient/ChangeRecipient.jsx b/src/pages/ChangeRecipient/ChangeRecipient.jsx
new file mode 100644
index 0000000..56d5618
--- /dev/null
+++ b/src/pages/ChangeRecipient/ChangeRecipient.jsx
@@ -0,0 +1,94 @@
+import { useEffect, useState } from 'react';
+import { Nav } from '../../components/Nav/Nav';
+import styles from './changerecipient.module.scss';
+import { Input } from '../../components/Inputs/Input';
+import { useSelector, useDispatch } from 'react-redux';
+import { ButtonDefault } from '../../components/ButtonDefault';
+import { useNavigate, useParams } from 'react-router-dom';
+import { changeMyAddress, changeMyRecipient, removeSavedAddress, removeSavedRecipient } from '../../redux/slice/userSlice';
+
+export const ChangeRecipient = () => {
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
+
+ const user = useSelector(state => state.user)
+ const appLanguage = user.appLanguage;
+ const { recipientId } = useParams();
+ const myRecipient = user.savedRecipients.filter((r) => r.id === parseInt(recipientId))[0];
+
+ const [name, setName] = useState('');
+ const [fio, setFio] = useState('');
+ const [phone, setPhone] = useState('');
+
+
+ useEffect(() => {
+ if (!myRecipient) {
+ navigate('/create-new-address')
+ }
+ if (myRecipient) {
+ setName(myRecipient.name)
+ setFio(myRecipient.fio)
+ setPhone(myRecipient.phone)
+ }
+ }, [user])
+
+ return (
+ {appLanguage === 'ru' ? 'Изменить адрес' : 'Change my address'}
+
+
+
+
+
+
+
+
+
+ {
+ const newRecipient = {
+ id: myRecipient.id,
+ name,
+ fio,
+ phone
+ };
+ if (!validate(newRecipient)) {
+ console.log('data not valid')
+ return;
+ }
+ dispatch(changeMyRecipient(newRecipient))
+ navigate(-1)
+ }}
+ >
+ {appLanguage === 'ru' ? 'Сохранить получателя' : 'Save recipient'}
+
+
+
+ );
+};
+
+function validate(data) {
+ if (data.name.length < 1) {
+ return false;
+ }
+
+ if (data.fio.length < 3) {
+ return false;
+ }
+
+ if (data.phone < 2) {
+ return false;
+ }
+
+ return true;
+}
diff --git a/src/pages/ChangeRecipient/changerecipient.module.scss b/src/pages/ChangeRecipient/changerecipient.module.scss
new file mode 100644
index 0000000..1d48d70
--- /dev/null
+++ b/src/pages/ChangeRecipient/changerecipient.module.scss
@@ -0,0 +1,25 @@
+.wrapper {
+ padding-top: 25px;
+ background-color: #efeff4;
+ padding-bottom: 250px;
+}
+
+.deleteButton {
+ background-color: #ff161610;
+ width: calc(100% - 30px);
+ margin-inline: 15px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ column-gap: 10px;
+ font-size: 17px;
+ line-height: 24px;
+ font-weight: 600;
+ color: rgba(229, 57, 53, 1);
+ margin-top: 20px;
+ user-select: none;
+
+ &:active {
+ background-color: #dd111138;
+ }
+}
diff --git a/src/pages/CreateNewAddress/CreateNewAddress.jsx b/src/pages/CreateNewAddress/CreateNewAddress.jsx
new file mode 100644
index 0000000..733d68f
--- /dev/null
+++ b/src/pages/CreateNewAddress/CreateNewAddress.jsx
@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import { Nav } from '../../components/Nav/Nav';
+import styles from './create-new-address.module.scss';
+import { Input } from '../../components/Inputs/Input';
+import { useDispatch, useSelector } from 'react-redux';
+import { ButtonDefault } from '../../components/ButtonDefault';
+import { useNavigate } from 'react-router-dom';
+import { pickAddress, saveNewAddress } from '../../redux/slice/userSlice';
+import { sub, vector } from '../../components/icons'
+
+export const CreateNewAddress = () => {
+ const appLanguage = useSelector((state) => state.user.appLanguage);
+ const user = useSelector((state) => state.user);
+ const navigate = useNavigate();
+ const dispatch = useDispatch();
+
+ const [name, setName] = useState('');
+ const [country, setCountry] = useState('');
+ const [state, setState] = useState('');
+ const [city, setCity] = useState('');
+ const [street, setStreet] = useState('');
+ const [zip, setZip] = useState('');
+
+
+ return (
+ {appLanguage === 'ru' ? 'Изменить адрес' : 'Change my address'}
+
+
+
+
+
+
+
+ {
+ setName('');
+ setCity('')
+ setCountry('')
+ setState('')
+ setStreet('')
+ setZip('')
+ dispatch(
+ saveNewAddress({
+ id: Date.now(),
+ name,
+ country,
+ state,
+ city,
+ street,
+ zip,
+ }),
+ );
+ }}
+ >
+ {appLanguage === 'ru' ? 'Сохранить адрес' : 'Save address'}
+
+
+
+ );
+};
diff --git a/src/pages/CreateNewAddress/create-new-address.module.scss b/src/pages/CreateNewAddress/create-new-address.module.scss
new file mode 100644
index 0000000..3147230
--- /dev/null
+++ b/src/pages/CreateNewAddress/create-new-address.module.scss
@@ -0,0 +1,83 @@
+.wrapper {
+ padding-top: 25px;
+ background-color: #efeff4;
+ padding-bottom: 250px;
+}
+
+.myAddresses {
+ background-color: #fff;
+ width: calc(100% - 30px);
+ margin-inline: 15px;
+ border-radius: 12px;
+ margin-top: 10px;
+ padding-left: 16px;
+ overflow: hidden;
+
+
+ .address {
+ padding: 16px 16px 16px 0;
+ display: flex;
+ align-items: center;
+ position: relative;
+ border-bottom: .5px solid rgba(0, 0, 0, 0.15);
+
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+
+ svg {
+ margin-right: 15px;
+ }
+
+ .addressName {
+ font-size: 17px;
+ line-height: 22px;
+ font-weight: 500;
+ }
+
+
+
+ .pick {
+ font-size: 15px;
+ line-height: 20px;
+ font-weight: 400;
+ color: rgba(112, 117, 121, 1);
+ }
+
+ .changeBtn {
+ background: transparent;
+ border: none;
+ display: flex;
+ align-items: center;
+ column-gap: 8px;
+ color: rgba(112, 117, 121, 1);
+ justify-self: flex-end;
+ position: absolute;
+ right: 0;
+ top: 0;
+ height: 100%;
+ z-index: 10;
+
+ svg {
+ margin: 0;
+ }
+ }
+}
+
+.central {
+ width: 100%;
+
+ p {
+ width: 100%;
+ }
+}
+
+
+.noAddress {
+ margin-inline: 15px;
+ background-color: #fff;
+ padding: 15px;
+ border-radius: 12px;
+ margin-top: 10px;
+}
\ No newline at end of file
diff --git a/src/pages/CreateNewRecipient/CreateNewRecipitent.jsx b/src/pages/CreateNewRecipient/CreateNewRecipitent.jsx
new file mode 100644
index 0000000..51958f1
--- /dev/null
+++ b/src/pages/CreateNewRecipient/CreateNewRecipitent.jsx
@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import { Nav } from '../../components/Nav/Nav';
+import styles from './create-new-rec.module.scss';
+import { Input } from '../../components/Inputs/Input';
+import { useDispatch, useSelector } from 'react-redux';
+import { ButtonDefault } from '../../components/ButtonDefault';
+import { useNavigate } from 'react-router-dom';
+import { pickRecipient, saveNewRecipient } from '../../redux/slice/userSlice';
+import { vector, recipientIcon } from '../../components/icons'
+
+
+export const CreateNewRecipient = () => {
+ const appLanguage = useSelector((state) => state.user.appLanguage);
+ const user = useSelector((state) => state.user);
+ const navigate = useNavigate();
+ const dispatch = useDispatch();
+
+ const [name, setName] = useState('');
+ const [fio, setFio] = useState('');
+ const [phone, setPhone] = useState('');
+
+ return (
+ {appLanguage === 'ru' ? 'Сохраните новый адрес' : 'save new address'}
+
+
+
+
+
+
+
+
+
+ {appLanguage === 'ru' ? 'Мои адреса' : 'My addresses'}
+
+ {user.savedAddresses.length > 0 ? (
+
+ {user.savedAddresses.map((address) => {
+ return (
+
+ ) : (
+
+ {sub()}
+
+ );
+ })}
+ {
+ dispatch(pickAddress(address));
+ navigate('/payment');
+ }}
+ >
+
+
+
+ {address.name}
+{appLanguage == 'ru' ? 'Выбрать' : 'Pick'}
+{user.appLanguage === 'ru' ? 'Нет сохраненных адресов' : 'No saved addresses'}
+ )}
+
+ {
+ setName('');
+ setFio('')
+ setPhone('')
+
+ dispatch(
+ saveNewRecipient({
+ id: Date.now(),
+ name,
+ fio,
+ phone,
+ }),
+ );
+ }}
+ >
+ {appLanguage === 'ru' ? 'Сохранить адрес' : 'Save address'}
+
+
+
+ );
+};
diff --git a/src/pages/CreateNewRecipient/create-new-rec.module.scss b/src/pages/CreateNewRecipient/create-new-rec.module.scss
new file mode 100644
index 0000000..b2be4c9
--- /dev/null
+++ b/src/pages/CreateNewRecipient/create-new-rec.module.scss
@@ -0,0 +1,72 @@
+.wrapper {
+ padding-top: 25px;
+ background-color: #efeff4;
+ padding-bottom: 250px;
+}
+
+.myAddresses {
+ background-color: #fff;
+ width: calc(100% - 30px);
+ margin-inline: 15px;
+ border-radius: 12px;
+ margin-top: 10px;
+ padding-left: 16px;
+ overflow: hidden;
+
+
+ .address {
+ padding: 16px 16px 16px 0;
+ display: flex;
+ align-items: center;
+ position: relative;
+ border-bottom: .5px solid rgba(0, 0, 0, 0.15);
+
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+
+ svg {
+ margin-right: 15px;
+ }
+
+ .addressName {
+ font-size: 17px;
+ line-height: 22px;
+ font-weight: 500;
+ }
+
+ .pick {
+ font-size: 15px;
+ line-height: 20px;
+ font-weight: 400;
+ color: rgba(112, 117, 121, 1);
+ }
+
+ .changeBtn {
+ background: transparent;
+ border: none;
+ display: flex;
+ align-items: center;
+ column-gap: 8px;
+ color: rgba(112, 117, 121, 1);
+ justify-self: flex-end;
+ position: absolute;
+ right: 0;
+ top: 0;
+ height: 100%;
+
+ svg {
+ margin: 0;
+ }
+ }
+}
+
+
+.noAddress {
+ margin-inline: 15px;
+ background-color: #fff;
+ padding: 15px;
+ border-radius: 12px;
+ margin-top: 10px;
+}
\ No newline at end of file
diff --git a/src/pages/GoToMiniApp/GoToMiniApp.jsx b/src/pages/GoToMiniApp/GoToMiniApp.jsx
new file mode 100644
index 0000000..2a1d979
--- /dev/null
+++ b/src/pages/GoToMiniApp/GoToMiniApp.jsx
@@ -0,0 +1,17 @@
+import meme from './meme.jpg';
+function GoToMiniApp() {
+ return (
+ {appLanguage === 'ru' ? 'Сохраните новый адрес' : 'save new address'}
+
+
+
+
+
+
+
+ {appLanguage === 'ru' ? 'Сохранённые получатели' : 'Saved recipients'}
+
+ {user.savedRecipients?.length > 0 ? (
+
+ {user.savedRecipients.map((recipient) => {
+ return (
+
+ ) : (
+
+ {recipientIcon()}
+
+ );
+ })}
+ {
+ dispatch(pickRecipient(recipient));
+ navigate('/payment');
+ }}
+ >
+
+
+
+ {recipient.name}
+{appLanguage == 'ru' ? 'Выбрать' : 'Pick'}
+{user.appLanguage === 'ru' ? 'Нет сохраненных адресов' : 'No saved addresses'}
+ )}
+
+ 
+
+ Please open in
+
+
+ );
+}
+
+export default GoToMiniApp;
diff --git a/src/pages/GoToMiniApp/meme.jpg b/src/pages/GoToMiniApp/meme.jpg
new file mode 100644
index 0000000..79bfb4c
Binary files /dev/null and b/src/pages/GoToMiniApp/meme.jpg differ
diff --git a/src/pages/Homepage/Homepage.jsx b/src/pages/Homepage/Homepage.jsx
new file mode 100644
index 0000000..7de9951
--- /dev/null
+++ b/src/pages/Homepage/Homepage.jsx
@@ -0,0 +1,26 @@
+// styles
+import styles from './homepage.module.scss';
+import 'swiper/swiper-bundle.css';
+
+// components
+import { Nav } from '../../components/Nav/Nav';
+import { Slider } from './components/slider/Slider';
+import { WalletConnectionButton } from './components/walletconnectionbutton/WalletConnectionButton';
+import { Products } from './components/products/Products';
+import { useEffect } from 'react';
+
+function Homepage() {
+ useEffect(() => {
+ window.Telegram.WebApp.BackButton.hide();
+ return () => window.Telegram.WebApp.BackButton.show();
+ }, []);
+ return (
+
+ Please open in
+
{' '}
+
+ telegram mini app
+
+
+
+
+
+ );
+}
+export default Homepage;
diff --git a/src/pages/Homepage/components/categories.jsx b/src/pages/Homepage/components/categories.jsx
new file mode 100644
index 0000000..317514a
--- /dev/null
+++ b/src/pages/Homepage/components/categories.jsx
@@ -0,0 +1,48 @@
+import styles from '../homepage.module.scss';
+
+// images
+import macMini from '../../../assets/images/mac mini.png';
+import coins from '../../../assets/images/coin mini.png';
+import pods from '../../../assets/images/pods.png';
+import phones from '../../../assets/images/iphones.png';
+import sneak from '../../../assets/images/sneakers.png';
+
+const mockData = [
+ {
+ img: macMini,
+ text: 'macbooks',
+ },
+ {
+ img: coins,
+ text: 'dropcoins',
+ },
+ {
+ img: pods,
+ text: 'headphones',
+ },
+ {
+ img: phones,
+ text: 'iphones',
+ },
+ {
+ img: sneak,
+ text: 'sneakers',
+ },
+];
+
+export default function CategoriesHomepage() {
+ return (
+
+ {mockData.map((cat) => {
+ return (
+
+ );
+}
diff --git a/src/pages/Homepage/components/products/Products.jsx b/src/pages/Homepage/components/products/Products.jsx
new file mode 100644
index 0000000..c8b3dee
--- /dev/null
+++ b/src/pages/Homepage/components/products/Products.jsx
@@ -0,0 +1,22 @@
+// styles
+import styles from "./products.module.scss";
+
+// utils
+import useInfiniteScroll from "../../hooks/useInfiniteScroll";
+
+// components
+import { ProductCard } from "/src/components/ProductCard/ProductCard";
+
+export const Products = () => {
+ const { ref, products } = useInfiniteScroll();
+
+ return (
+ <>
+
+
+ );
+ })}
+
+ 
+
+ {cat.text}
+New from MAGAZ
+
+ {products && products.map((data, index) =>
+
+ );
+};
diff --git a/src/pages/Homepage/components/products/products.module.scss b/src/pages/Homepage/components/products/products.module.scss
new file mode 100644
index 0000000..8213888
--- /dev/null
+++ b/src/pages/Homepage/components/products/products.module.scss
@@ -0,0 +1,17 @@
+.catalog {
+ padding-inline: 15px;
+
+ display: grid;
+ grid-template-columns: repeat(2, calc(50% - 10px));
+ column-gap: 10px;
+ row-gap: 20px;
+ margin-top: 6px;
+}
+
+.catalogTitle {
+ margin-left: 15px;
+ margin-top: 30px;
+ font-size: 14px;
+ font-family: "H_neue";
+ line-height: 16px;
+}
diff --git a/src/pages/Homepage/components/slider/Slider.jsx b/src/pages/Homepage/components/slider/Slider.jsx
new file mode 100644
index 0000000..05eb914
--- /dev/null
+++ b/src/pages/Homepage/components/slider/Slider.jsx
@@ -0,0 +1,66 @@
+// styles
+import styles from './slides.module.scss';
+
+// images
+import mac from '/src/assets/images/g93.png';
+import g94 from '/src/assets/images/g95.png';
+import g95 from '/src/assets/images/g94.png';
+
+// dependencies
+import { Autoplay, Pagination } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+// custom hooks
+import useSlider from '/src/hooks/useSlider';
+import { useEffect, useState } from 'react';
+
+export const Slider = () => {
+ const { images, setSlide, currentSlider } = useSlider({ images: [mac, g94, g95] });
+ const [i, si] = useState(false);
+ useEffect(() => {
+ si(true)
+ }, [images]);
+ return (
+ <>
+ }
+ {i &&
+ images.map((image, index) => (
+
+ {user.appLanguage === 'ru' ? 'Перейти к оплате' : 'Pay'}
+
+
+ );
+};
diff --git a/src/pages/Paymentpage/payment.module.scss b/src/pages/Paymentpage/payment.module.scss
new file mode 100644
index 0000000..20a8b15
--- /dev/null
+++ b/src/pages/Paymentpage/payment.module.scss
@@ -0,0 +1,136 @@
+.wrapper {
+ padding-top: 20px;
+ background-color: #efeff4;
+ padding-bottom: 170px;
+}
+
+
+.myAddresses {
+ background-color: #fff;
+ width: calc(100% - 30px);
+ margin-inline: 15px;
+ border-radius: 12px;
+ margin-top: 10px;
+ padding-left: 16px;
+ overflow: hidden;
+
+
+ .address {
+ padding: 16px 16px 16px 0;
+ display: flex;
+ align-items: center;
+ position: relative;
+ border-bottom: .5px solid rgba(0, 0, 0, 0.15);
+
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+
+ svg {
+ margin-right: 15px;
+
+ }
+
+ .addressName {
+ font-size: 17px;
+ line-height: 22px;
+ font-weight: 500;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
+ .pick {
+ font-size: 15px;
+ line-height: 20px;
+ font-weight: 400;
+ color: rgba(112, 117, 121, 1);
+ }
+
+ .changeBtn {
+ background: transparent;
+ border: none;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ column-gap: 8px;
+ color: rgba(112, 117, 121, 1);
+ justify-self: flex-end;
+ position: absolute;
+ right: 0;
+ top: 0;
+ height: 100%;
+
+ svg {
+ margin: 0;
+ }
+ }
+}
+
+.summary {
+ margin-top: 10px;
+ background-color: #fff;
+ border-radius: 12px;
+ padding-inline: 15px;
+ margin-inline: 15px;
+}
+
+.message {
+ position: fixed;
+ top: 20px;
+ z-index: 200;
+ background-color: red;
+ color: white;
+ font-weight: 500;
+ border-radius: 12px;
+ left: 15px;
+ padding: 15px;
+ transition: .2s ease-in-out;
+ width: calc(100% - 30px);
+ text-align: center;
+}
+
+.item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10px 0;
+
+ .leftside {
+ display: flex;
+ align-items: center;
+
+ }
+
+ .svgWrapper {
+ width: 28px;
+ height: 28px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-right: 16px;
+ }
+
+ .counter {
+ font-size: 17px;
+ line-height: 17px;
+ font-family: "H_neue";
+
+ }
+
+ .totalPrice {
+ font-size: 16px;
+ line-height: 17px;
+ }
+}
+
+
+.sum {
+
+
+ .totalPrice, .counter {
+ font-weight: 700;
+ font-size: 18px;
+ line-height: 18px;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/Productpage/Productpage.jsx b/src/pages/Productpage/Productpage.jsx
new file mode 100644
index 0000000..50c6a93
--- /dev/null
+++ b/src/pages/Productpage/Productpage.jsx
@@ -0,0 +1,42 @@
+import styles from './productpage.module.scss';
+
+import { Nav } from '/src/components/Nav/Nav';
+import { Product } from './components/product/Product';
+import { OtherProducts } from './components/otherproducts/OtherProducts';
+import { useEffect, useRef, useState } from 'react';
+import axios from 'axios';
+import { api_server } from '../../main';
+import { useParams } from 'react-router-dom';
+import useTelegramBackButton from '../../hooks/useTelegramBackButton';
+
+function Productpage() {
+ const { productId } = useParams();
+ const pageRef = useRef();
+
+ // useTelegramBackButton(() => window.history.back());
+
+ // Хранилище для данных
+ const [productData, setProductData] = useState(null);
+ const [products, setProducts] = useState(null);
+
+ const fetch = async () => {
+ const data = (await axios.get(`${api_server}/api/product?id=${productId}`)).data;
+ const otherProducts = (await axios.get(`${api_server}/api/get-other-products?id=${productId}`)).data;
+
+ setProducts(otherProducts);
+ setProductData(data);
+ };
+
+ useEffect(() => {
+ fetch().then(() => window.scrollTo(0, 0));
+ }, [productId]);
+
+ return (
+ {user.appLanguage === 'ru' ? 'Выберите адрес и получателя' : 'Pick address and recipient'}
+
+
+
+ {!user.pickedAddress && !user.pickedRecipient && (
+
+ {sub()}
+
+
+
+
+
+
+ + {user.pickedAddress + ? `${user.pickedAddress.country}, ${user.pickedAddress.city}...` + : user.appLanguage === 'ru' + ? 'Адрес' + : 'Address'} +
++ {user.pickedAddress ? user.pickedAddress.name : user.appLanguage === 'ru' ? 'Не выбран' : 'Not picked'} +
+
+ {recipientIcon()}
+
+
+
+
+
+ + {user.pickedRecipient + ? `${user.pickedRecipient.fio.slice(0, 18)}...` + : user.appLanguage === 'ru' + ? 'Получатель' + : 'Recipient'} +
++ {user.pickedRecipient ? user.pickedRecipient.name : user.appLanguage === 'ru' ? 'Не выбран' : 'Not picked'} +
++ )} + +
+ {user.appLanguage === 'ru' ? 'Выписка' : 'Summary'} +
+
+
+
+
+
+
+
+
+
+
+
+
+ + {user.cartAmount} {user.appLanguage === 'ru' ? 'товара на сумму: ' : 'pieces for: '} +
+{user.cartCost} TON
+
+
+
+
+
+
+
+
+
+ {user.appLanguage === 'ru' ? 'Стоимость доставки: ' : 'Delivery fee: '}
++ {user.pickedAddress ? 'Delivery free' : user.appLanguage === 'ru' ? 'Без доставки' : 'Without delivery'} +
+
+
+
+
+
+
+
+
+ {user.appLanguage === 'ru' ? 'Итого: ' : 'Summary: '}
+{user.cartCost} TON
+
+ {productData &&
+ );
+}
+export default Productpage;
diff --git a/src/pages/Productpage/Slider.jsx b/src/pages/Productpage/Slider.jsx
new file mode 100644
index 0000000..655b949
--- /dev/null
+++ b/src/pages/Productpage/Slider.jsx
@@ -0,0 +1,70 @@
+import { Swiper, SwiperSlide } from "swiper/react";
+import styles from "./productpage.module.scss";
+import { useSelector, useDispatch } from "react-redux";
+import { useEffect, useState } from "react";
+import { likeToggler } from "../../redux/slice/userSlice";
+
+export const Slider = ({ productData }) => {
+ const user = useSelector((state) => state.user);
+ const [like, setLike] = useState(false);
+ const dispatch = useDispatch();
+
+ useEffect(() => {
+ if (user) {
+ const s = user.likedProducts.filter((a) => a === productData._id);
+ s.length === 0 ? setLike(false) : setLike(true);
+ }
+ }, [user, productData._id]);
+
+ return (
+ dispatch(likeToggler(productData._id))}
+ style={{
+ padding: "10px 10px",
+ borderRadius: 100,
+ backgroundColor: "#fff",
+ position: "absolute",
+ top: 20,
+ right: 20,
+ aspectRatio: 1,
+ zIndex: 100,
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ }}
+ >
+ {like ? (
+
+ ) : (
+
+ )}
+
+ {productData.images.map((banner, index) => {
+ return (
+
+
+ );
+};
diff --git a/src/pages/Productpage/components/description/description.module.scss b/src/pages/Productpage/components/description/description.module.scss
new file mode 100644
index 0000000..b65ac4d
--- /dev/null
+++ b/src/pages/Productpage/components/description/description.module.scss
@@ -0,0 +1,54 @@
+.wrapper {
+ padding: 12px 16px;
+ margin-inline: 15px;
+ border-radius: 16px;
+ margin-top: 8px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ background-color: rgb(245, 245, 245);
+
+ h3 {
+ font-size: 15px;
+ color: rgba(112, 117, 121, 1);
+ font-weight: 400;
+ line-height: 20px;
+ }
+
+
+
+ .description {
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 3; /* ограничивает текст 5 строками */
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .readmore {
+ color: rgba(0, 122, 255, 1);
+ background: transparent;
+ font-size: 15px;
+ line-height: 20px;
+ width: 100%;
+ text-align: right;
+ margin-top: 10px;
+ font-weight: 400;
+ font-family: "H_neue";
+ cursor: pointer;
+
+ &:hover {
+ color: blue;
+ }
+ }
+
+ .opened {
+ -webkit-line-clamp: unset;
+ }
+
+ p {
+ margin-top: 3px;
+ font-size: 17px;
+ line-height: 22px;
+ font-weight: 400;
+ }
+}
diff --git a/src/pages/Productpage/components/otherproducts/OtherProducts.jsx b/src/pages/Productpage/components/otherproducts/OtherProducts.jsx
new file mode 100644
index 0000000..c8be29c
--- /dev/null
+++ b/src/pages/Productpage/components/otherproducts/OtherProducts.jsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import styles from "./other.module.scss";
+
+import { ProductCard } from "/src/components/ProductCard/ProductCard";
+
+export const OtherProducts = ({ products }) => {
+ return (
+ Description
+ ')}} /> + {!isOpen && ( +
+ Read more
+
+ )}
+
+
+ {products &&
+ products.map((product, index) => (
+
+
+ ))}
+
+
+ );
+};
diff --git a/src/pages/Productpage/components/otherproducts/other.module.scss b/src/pages/Productpage/components/otherproducts/other.module.scss
new file mode 100644
index 0000000..7e1ffdb
--- /dev/null
+++ b/src/pages/Productpage/components/otherproducts/other.module.scss
@@ -0,0 +1,15 @@
+
+.productLine {
+
+ .prodTitle {
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 16px;
+ font-family: "H_neue";
+ }
+ margin-top: 30px;
+ padding-inline: 15px;
+ &Swiper {
+ margin-top: 10px;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/Productpage/components/product/Product.jsx b/src/pages/Productpage/components/product/Product.jsx
new file mode 100644
index 0000000..a3ed118
--- /dev/null
+++ b/src/pages/Productpage/components/product/Product.jsx
@@ -0,0 +1,133 @@
+import { useState, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { useTonWallet, useTonConnectModal } from '@tonconnect/ui-react';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { useTonConnectUI, useTonAddress } from '@tonconnect/ui-react';
+
+import { addToCart, pushWallet } from '/src/redux/slice/userSlice';
+
+import { ButtonDefault } from '/src/components/ButtonDefault';
+
+import { Description } from '../description/Description';
+import { Properties } from '../properties/Properties';
+import { Sizes } from '../sizes/Sizes';
+import styles from './product.module.scss';
+import { Slider } from '../../Slider';
+
+export const Product = ({ productData }) => {
+ const { open } = useTonConnectModal();
+ const wallet = useTonWallet();
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
+ const friendlyAddress = useTonAddress();
+ const user = useSelector((state) => state.user);
+
+ // init данные
+ const [pickedSize, setPickedSize] = useState(null);
+ const productInCart = useSelector((state) => state.user.cart.filter((item) => item._id === productData._id)[0]?.counter);
+
+ useEffect(() => {
+ if (friendlyAddress && !user.wallets.includes(friendlyAddress)) {
+ dispatch(pushWallet(friendlyAddress));
+ }
+ }, [friendlyAddress, dispatch, user.wallets]);
+ return (
+ <>
+ Other products
+
+ {
+ wallet ? dispatch(addToCart({ ...productData, size: pickedSize })) : open();
+ }}
+ >
+ {wallet ? 'Buy Product' : 'Connect Wallet'}
+
+ )}
+
+
+ );
+};
diff --git a/src/pages/Productpage/components/product/product.module.scss b/src/pages/Productpage/components/product/product.module.scss
new file mode 100644
index 0000000..37797ba
--- /dev/null
+++ b/src/pages/Productpage/components/product/product.module.scss
@@ -0,0 +1,136 @@
+.title {
+ padding-top: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding-inline: 15px;
+
+ .magaz {
+ font-size: 16px;
+ font-weight: 500;
+ line-height: 28px;
+ font-family: "ClashDisplay-medium";
+ font-weight: 500;
+ }
+ h1 {
+ font-family: "H_neue";
+ font-weight: 700;
+ font-size: 16px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ max-width: 70%;
+ white-space: nowrap;
+ }
+
+ span {
+ color: rgba(170, 170, 170, 1);
+ font-weight: 400;
+ }
+}
+
+.priceLine {
+ margin-top: 10px;
+ padding-inline: 15px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .price {
+ display: flex;
+ align-items: center;
+ column-gap: 4px;
+ font-size: 24px;
+ line-height: 16px;
+ font-weight: 700;
+ }
+}
+
+.orderNow {
+ padding: 0px 12px;
+ border-radius: 8px;
+ height: 42px;
+ font-size: 16px;
+ font-family: "H_neue";
+ color: white;
+ font-weight: 500;
+ background-color: rgba(41, 144, 255, 1);
+}
+
+.productInfo {
+ margin-top: 25px;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ padding-inline: 15px;
+ column-gap: 8px;
+
+ div {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ justify-content: center;
+ row-gap: 4px;
+ width: 100%;
+ background-color: rgb(245, 245, 245);
+ padding: 12px 0;
+ border-radius: 12px;
+
+ p {
+ &:nth-child(1) {
+ font-size: 20px;
+ font-weight: 900;
+ color: rgba(0, 122, 255, 1);
+ }
+
+ &:nth-child(2) {
+ font-size: 13px;
+ font-weight: 500;
+ }
+ }
+ }
+}
+
+.cartButton {
+ width: calc(100% - 30px);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background-color: #23ca70;
+ position: fixed;
+ bottom: 67px;
+ z-index: 100;
+ margin-bottom: env(safe-area-inset-bottom);
+ font-size: 17px;
+ line-height: 26px;
+ margin-inline: 15px;
+
+ height: 50px;
+ border-radius: 8px;
+
+ button {
+ background: transparent;
+ padding-inline: 18px;
+ border: none;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .counter {
+ color: white;
+ font-weight: 600;
+ text-align: center;
+ width: 100%;
+ cursor: pointer;
+ }
+
+ .controlBtn {
+ color: #23ca70;
+ border-radius: 100px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: white;
+ width: 24px;
+ height: 24px;
+ }
+}
diff --git a/src/pages/Productpage/components/properties/Properties.tsx b/src/pages/Productpage/components/properties/Properties.tsx
new file mode 100644
index 0000000..f2548e1
--- /dev/null
+++ b/src/pages/Productpage/components/properties/Properties.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import styles from './properties.module.scss';
+
+type PropsType = {
+ data: { [key: string]: string }[];
+};
+
+export const Properties: React.FC
+
+ {productData.name}
+ +{productData.seller_name}
+
+
+
+
+
+
+
+
+
+ {productData.price} TON
+
+
+ 0 ? '#EDA44E' : '#808080',
+ }}
+ >
+
+
+ {user.appLanguage === 'ru' ? `Бесплатная доставка` : 'Free Delivery'}
+
+
+
+ )}
+
+
+
+ {productData.sold}
+Items Sold
+
+
+ + {productData.deliverMin} to {productData.deliverMax} +
+Weeks Arrival
+
+
+ ) : (
+ navigate('/orders')} className={styles.counter}> + {user.appLanguage === 'ru' ? 'Перейти в корзину' : 'View Orders'} +
+
+ {data.map((propertyData: any, index: number) => {
+ return (
+
+ );
+};
diff --git a/src/pages/Productpage/components/properties/properties.module.scss b/src/pages/Productpage/components/properties/properties.module.scss
new file mode 100644
index 0000000..a1cf98b
--- /dev/null
+++ b/src/pages/Productpage/components/properties/properties.module.scss
@@ -0,0 +1,35 @@
+.wrapper {
+ margin-top: 8px;
+ display: grid;
+ display: flex;
+
+ column-gap: 8px;
+ padding-inline: 15px;
+ margin-bottom: 30px;
+
+ div {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ justify-content: center;
+ row-gap: 4px;
+ width: 100%;
+ background-color: rgb(245, 245, 245);
+ padding: 12px 0;
+ border-radius: 12px;
+ text-align: center;
+
+ p {
+ &:nth-child(1) {
+ font-size: 20px;
+ font-weight: 900;
+ color: rgba(0, 122, 255, 1);
+ }
+
+ &:nth-child(2) {
+ font-size: 13px;
+ font-weight: 500;
+ }
+ }
+ }
+}
diff --git a/src/pages/Productpage/components/sizes/Sizes.tsx b/src/pages/Productpage/components/sizes/Sizes.tsx
new file mode 100644
index 0000000..c5316d6
--- /dev/null
+++ b/src/pages/Productpage/components/sizes/Sizes.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import styles from './sizes.module.scss';
+
+interface propsInterface {
+ data: number[];
+ pickedSize: number | string;
+ setPickedSize: React.Dispatch
+
+ );
+ })}
+ {Object.values(propertyData)}
+{Object.keys(propertyData)}
+
+ {data &&
+ data.map((size, index) => {
+ return (
+
+ );
+};
diff --git a/src/pages/Productpage/components/sizes/sizes.module.scss b/src/pages/Productpage/components/sizes/sizes.module.scss
new file mode 100644
index 0000000..349717d
--- /dev/null
+++ b/src/pages/Productpage/components/sizes/sizes.module.scss
@@ -0,0 +1,30 @@
+.wrapper {
+ width: 100%;
+ overflow-x: auto;
+ &::-webkit-scrollbar {
+ display: none;
+ }
+
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding-inline: 10px;
+ margin-top: 10px;
+}
+
+
+.size {
+ padding: 10px 12px;
+ height: 40px;
+ border-radius: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-family: 'H_neue';
+ border: 1px solid #f2f2f2;
+ cursor: pointer;
+
+ &Active {
+ border: 1px solid #333333;
+ }
+}
diff --git a/src/pages/Productpage/productpage.module.scss b/src/pages/Productpage/productpage.module.scss
new file mode 100644
index 0000000..973946f
--- /dev/null
+++ b/src/pages/Productpage/productpage.module.scss
@@ -0,0 +1,278 @@
+.wrapper {
+ max-width: 100vw;
+ padding-bottom: 170px;
+ overflow: hidden;
+}
+
+.swiper {
+ position: relative;
+}
+
+.swiperSlide {
+ aspect-ratio: 1;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ img {
+ object-fit: cover;
+ object-position: center;
+ width: 100%;
+ }
+
+ video {
+ object-fit: cover;
+ width: 100%;
+ height: 100%;
+ }
+}
+
+.delInfo {
+ margin-top: 4px;
+ display: flex;
+ align-items: center;
+ column-gap: 6px;
+
+ font-size: 14px;
+ line-height: 10px;
+}
+
+.form {
+ padding-bottom: 110px;
+ &Info {
+ background-color: #fff;
+ border-radius: 12px;
+ overflow: hidden;
+ margin-top: 10px;
+
+ .orderDetail {
+ height: 46px;
+ display: flex;
+ padding-left: 16px;
+ column-gap: 16px;
+ align-items: center;
+
+ input {
+ pointer-events: none;
+ outline: none;
+ border: none;
+ width: 100%;
+ height: 100%;
+ border-radius: 0;
+ font-size: 17px;
+ }
+
+ .orderCentralInput {
+ border-top: 1px solid rgba(0, 0, 0, 0.15);
+ border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+ }
+
+ .orderDetailIcon {
+ width: 28px;
+ height: 28px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+ }
+
+ &Subtitle {
+ color: rgba(112, 117, 121, 1);
+ text-transform: uppercase;
+ font-size: 13px;
+ margin-top: 10px;
+ padding-inline: 16px;
+ }
+
+ .inputs {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ row-gap: 4px;
+ margin-top: 10px;
+ }
+
+ .inputBlock {
+ width: 100%;
+ background-color: #fff;
+ height: 48px;
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ border-radius: 12px;
+ padding-inline: 16px;
+
+ span {
+ width: fit-content;
+ white-space: nowrap;
+ font-size: 17px;
+ color: rgb(126, 127, 128);
+ }
+
+ input {
+ font-size: 17px;
+ border: none;
+ color: rgba(162, 172, 176, 1);
+ width: 100%;
+ font-weight: 400;
+ outline: none;
+ color: black;
+
+ &::placeholder {
+ color: rgba(162, 172, 176, 1);
+ font-size: 17px;
+ }
+ }
+ }
+
+ .attention {
+ font-size: 13px;
+ line-height: 16px;
+ color: rgba(112, 117, 121, 1);
+ margin-top: 16px;
+ padding-inline: 16px;
+ }
+}
+
+.details {
+ .correct {
+ font-size: 13px;
+ line-height: 16px;
+ font-weight: 400;
+ padding-inline: 16px;
+ margin-top: 8px;
+ color: rgba(112, 117, 121, 1);
+ }
+
+ .amount {
+ margin-top: 10px;
+ background-color: #fff;
+ border-radius: 12px;
+ height: 66px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 20px;
+ column-gap: 16px;
+
+ .inputRange {
+ width: 100%;
+ height: 6px;
+ border-radius: 8px;
+
+ &::-webkit-slider-thumb {
+ border-radius: 100px;
+ appearance: none;
+ -webkit-appearance: none;
+ width: 24px;
+ height: 24px;
+ background-color: #ffffff;
+ box-shadow: -2px 2px 10px 2px rgba(0, 0, 0, 0.1);
+ }
+
+ &::-webkit-slider-runnable-track {
+ appearance: none;
+ -webkit-appearance: none;
+ fill: rgba(0, 122, 255, 1);
+ }
+
+ &::-moz-range-thumb {
+ border-radius: 100px;
+ appearance: none;
+ width: 24px;
+ height: 24px;
+ background-color: #ffffff;
+ box-shadow: -2px 2px 10px 2px rgba(0, 0, 0, 0.1);
+ }
+
+ &::-moz-range-track {
+ appearance: none;
+ fill: rgba(0, 122, 255, 1);
+ }
+ }
+
+ .amountInput {
+ outline: none;
+ border: none;
+ width: 40px;
+ height: 26px;
+ font-size: 17px;
+ line-height: 22px;
+ }
+ }
+}
+
+.deliveryFee {
+ margin-top: 10px;
+ background-color: #fff;
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 11px 20px;
+ column-gap: 16px;
+
+ h4 {
+ font-size: 15px;
+ line-height: 20px;
+ font-weight: 400;
+ }
+
+ .delete {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background-color: rgba(229, 57, 53, 1);
+ color: white;
+ border-radius: 100px;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 17px;
+ column-gap: 6px;
+
+ padding: 8px 11px;
+ margin-top: 11px;
+ }
+
+ .fee {
+ font-size: 24px;
+ line-height: 20px;
+ }
+}
+
+.leftside {
+ p {
+ &:nth-child(1) {
+ font-weight: 600;
+ font-size: 17px;
+ line-height: 22px;
+ }
+
+ &:nth-child(2) {
+ font-size: 15px;
+ line-height: 20px;
+ color: rgba(112, 117, 121, 1);
+ }
+ }
+}
+
+.rightside {
+ display: flex;
+ align-items: center;
+ column-gap: 16px;
+
+ p {
+ font-weight: 700;
+ font-size: 30px;
+ line-height: 22px;
+ }
+}
+
+.banana {
+ width: 128px;
+ aspect-ratio: 1;
+ margin: 0 auto;
+ margin-top: 13px;
+}
diff --git a/src/pages/Profile/Profile.jsx b/src/pages/Profile/Profile.jsx
new file mode 100644
index 0000000..ee76f1f
--- /dev/null
+++ b/src/pages/Profile/Profile.jsx
@@ -0,0 +1,153 @@
+import { useEffect, useState } from 'react';
+import { Nav } from '../../components/Nav/Nav';
+import styles from './profile.module.scss';
+import { useDispatch, useSelector } from 'react-redux';
+import { sub, vector, recipientIcon } from '../../components/icons'
+
+import { Link, useNavigate } from 'react-router-dom';
+import { api_server } from '../../main';
+import axios from 'axios';
+import { pickAddress, pickRecipient } from '../../redux/slice/userSlice';
+
+import {Avatar} from './components/Avatar/Avatar'
+import {Specials} from './components/Specials/Specials'
+import { TonConnectButton } from '@tonconnect/ui-react';
+
+function Profile() {
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
+ const user = useSelector((state) => state.user);
+ const [orders, setOrders] = useState(null);
+
+ useEffect(() => {
+ axios.post(`${api_server}/api/get-my-orders`, { orders: user.orders }).then((res) => {
+ const cart = [];
+ res.data.map((a) => {
+ a.cart.map((item) => (item.date = a.date));
+ cart.push(...a.cart);
+ });
+ setOrders(cart);
+ });
+ }, [user.orders]);
+
+ return (
+ setPickedSize(size)}
+ className={`${styles.size} ${pickedSize === size ? styles.sizeActive : null}`}
+ >
+ {size}
+
+ );
+ })}
+
+
+ );
+}
+
+export default Profile;
\ No newline at end of file
diff --git a/src/pages/Profile/components/Avatar/Avatar.tsx b/src/pages/Profile/components/Avatar/Avatar.tsx
new file mode 100644
index 0000000..0fe18a9
--- /dev/null
+++ b/src/pages/Profile/components/Avatar/Avatar.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import styles from './avatar.module.scss'
+
+export const Avatar: React.FC = () => {
+ return (
+
+
+ {/*
+ {user.appLanguage === 'ru' ? 'Мои адреса' : 'My addresses'}
+
+ {user.savedAddresses.length > 0 ? (
+
+ {user.savedAddresses.map((address) => {
+ return (
+
+ ) : (
+
+ {sub()}
+
+ );
+ })}
+ {
+ dispatch(pickAddress(address));
+ navigate('/payment');
+ }}
+ >
+
+
+
+ {address.name}
+{user.appLanguage == 'ru' ? 'Выбрать' : 'Pick'}
+{user.appLanguage === 'ru' ? 'Нет сохраненных адресов' : 'No saved addresses'}
+ )}
+ + {user.appLanguage === 'ru' ? 'Сохранить новый адрес' : 'Add new address'} +
+ +
+ {user.appLanguage === 'ru' ? 'Сохранённые получатели' : 'Saved recipients'}
+
+ {user.savedRecipients?.length > 0 ? (
+
+ {user.savedRecipients.map((recipient) => {
+ return (
+
+ ) : (
+
+ {recipientIcon()}
+
+ );
+ })}
+ {
+ dispatch(pickRecipient(recipient));
+ navigate('/payment');
+ }}
+ >
+
+
+
+ {recipient.name}
+{user.appLanguage == 'ru' ? 'Выбрать' : 'Pick'}
+{user.appLanguage === 'ru' ? 'Нет сохраненных получателей' : 'No saved recipients'}
+ )}
+ + {user.appLanguage === 'ru' ? 'Сохранить нового получателя' : 'Add new recipient'} +
+ +
+
+
+ {user.appLanguage === 'ru' ? 'История покупок' : 'history'}
+
+ {
+ orders?.length === 0 && {user.appLanguage === 'ru' ? 'У вас еще нет заказов' : "You don't have any order history yet"}
+ }
+
+
+ {orders &&
+ orders.map((orderItem, index) => {
+ const mydate = new Date(orderItem.date);
+ // prettier-ignore
+ const months = user.appLanguage == 'ru' ? ['Января','Февраля','Марта','Апреля','Мая','Июня','Июля','Августа','Сентября','Октября','Ноября','Декабря',] : ['January','February','March','April','May','June','Jule','August','September','October','November','December',];
+ const date = `${mydate.getDate()} ${months[mydate.getMonth()]} ${mydate.getFullYear()} ${
+ user.appLanguage === 'ru' ? 'г.' : 'year'
+ }`;
+ return (
+
+
+ );
+ })}
+
+
+
+
+ 
+
+
+
+
+ {date}
+{orderItem.name}
+- {(orderItem.price * orderItem.counter).toFixed(2)} TON
+
+
+ + {orderItem.cashback || '0'} TON
+{user.appLanguage === 'ru' ? 'Кэшбек' : 'Cashback'}
+
+
+ )
+}
+
+function CopyIcon () {
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/src/pages/Profile/components/Avatar/avatar.module.scss b/src/pages/Profile/components/Avatar/avatar.module.scss
new file mode 100644
index 0000000..905b7d6
--- /dev/null
+++ b/src/pages/Profile/components/Avatar/avatar.module.scss
@@ -0,0 +1,78 @@
+.wrapper {
+ width: 100%;
+}
+
+.cover {
+ border-radius: 0 0 16px 16px;
+ overflow: hidden;
+ height: 200px;
+ position: relative;
+ z-index: 1;
+ background: linear-gradient(to top left, rgb(49, 49, 49), rgb(0, 0, 0));
+ color: rgba(255, 255, 255, 0.247);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 120px;
+
+
+ img {
+ object-fit: cover;
+ width: 100%;
+ height: 100%;
+ object-position: center;
+ }
+
+ button {
+ position: absolute;
+ top: 9px;
+ right: 9px;
+ font-size: 12px;
+ line-height: 22px;
+ color: var(--blue-color);
+ background-color: #fff;
+ border-radius: 100px;
+ padding: 2px 12px;
+ font-family: 'H_neue';
+ }
+}
+
+.avatar {
+ background-color: #fff;
+ border-radius:26px;
+ width: 130px;
+ height: 130px;
+ border: 1px solid black;
+ box-shadow: 0 0 10px 5px rgba(122, 122, 122, 0.226);
+ margin: -90px auto 0;
+ z-index: 3;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 600;
+}
+
+.username {
+ font-size: 20px;
+ text-align: center;
+ margin-top: 14px;
+ font-weight: 500;
+ text-transform: uppercase;
+}
+
+.wallet_address {
+ text-align: center;
+ font-size: 15px;
+ color: #707579;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ margin-top: 6px;
+
+ svg {
+ fill: #707579;
+ margin-left: 10px;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/Profile/components/Specials/Specials.tsx b/src/pages/Profile/components/Specials/Specials.tsx
new file mode 100644
index 0000000..b89a29c
--- /dev/null
+++ b/src/pages/Profile/components/Specials/Specials.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import styles from './specials.module.scss'
+
+export const Specials: React.FC = () => {
+ return (
+
+
+ {/* ![]()
*/}
+ SOON
+
+
+
+ {/* ![]()
*/}
+ SOON
+
+
+ username
+Ukofeas...asfesaf
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/pages/Profile/components/Specials/specials.module.scss b/src/pages/Profile/components/Specials/specials.module.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/Profile/profile.module.scss b/src/pages/Profile/profile.module.scss
new file mode 100644
index 0000000..fa01d25
--- /dev/null
+++ b/src/pages/Profile/profile.module.scss
@@ -0,0 +1,313 @@
+.wrapper {
+ // position: relative;
+ background-color: #efeff4;
+ padding-top: 10px;
+ padding-bottom: 170px;
+}
+
+.noAddress {
+ margin-top: 10px;
+ margin-inline: 20px;
+ background-color: #fff;
+ border-radius: 10px;
+ padding: 16px;
+}
+
+.orders {
+ background-color: #fff;
+ margin-top: 20px;
+ padding: 20px 20px 0;
+ overflow: hidden;
+ border-radius: 12px;
+
+ .orders_item {
+ padding: 15px 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 16px;
+ position: relative;
+
+ &:last-child {
+ &::after {
+ display: none;
+ }
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ right: -20px;
+ width: calc(100% - 50px);
+ height: 1px;
+ background-color: rgba(0, 0, 0, 0.15);
+ }
+
+ .image {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 64px;
+ height: 64px;
+ border-radius: 12px;
+ position: relative;
+ max-width: 64px;
+ height: 64px;
+ overflow: hidden;
+ box-shadow: 0 0 10px 2px rgba(170, 170, 170, 0.05);
+ border: 1px solid rgba(201, 201, 201, 0.39);
+
+ img {
+ object-fit: cover;
+ width: 100%;
+ height: 100%;
+ object-position: center;
+ }
+ }
+
+ .date {
+ font-size: 15px;
+ line-height: 20px;
+ color: rgba(112, 117, 121, 1);
+ }
+
+ .name {
+ font-size: 17px;
+ line-height: 22px;
+ font-weight: 700;
+ margin-top: 2px;
+ }
+
+ .price {
+ font-weight: 600;
+ margin-top: 2px;
+ font-size: 15px;
+ font-weight: 400;
+ line-height: 22px;
+ color: rgba(112, 117, 121, 1);
+ }
+
+ &_leftside {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ }
+ }
+}
+
+.cashback {
+ p {
+ color:rgba(49, 209, 88, 1);
+
+ &:nth-child(1) {
+ font-size: 17px;
+ line-height: 22px;
+ }
+ }
+}
+
+.empty {
+ padding: 10px 0 40px;
+ margin-top: 12px;
+
+}
+
+.text {
+ font-size: 13px;
+ line-height: 16px;
+ color: rgba(112, 117, 121, 1);
+ text-transform: uppercase;
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ height: 60px;
+ padding-top: 20px;
+ position: relative;
+
+ .avatar {
+ border-radius: 100px;
+ width: 60px;
+ height: 60px;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center;
+ }
+ }
+
+ &Content {
+ margin-left: 14px;
+ }
+
+ h3 {
+ font-size: 22px;
+ font-weight: 900;
+ line-height: 22px;
+ }
+
+ .username {
+ font-size: 14px;
+ font-weight: 700;
+ line-height: 14px;
+ color: rgb(116, 116, 116);
+ }
+
+
+}
+
+.createNew {
+ margin-top: 10px;
+ text-align: right;
+ margin-inline: 20px;
+
+
+ a {
+ color: var(--blue-color);
+ font-size: 13px;
+ line-height: 15px;
+ }
+}
+
+.myAddresses {
+ background-color: #fff;
+ width: calc(100% - 30px);
+ margin-top: 6px;
+ margin-inline: 15px;
+ border-radius: 12px;
+ padding-left: 16px;
+ overflow: hidden;
+
+
+ .address {
+ padding: 16px 16px 16px 0;
+ display: flex;
+ align-items: center;
+ position: relative;
+ border-bottom: .5px solid rgba(0, 0, 0, 0.15);
+
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+
+ svg {
+ margin-right: 15px;
+ }
+
+ .addressName {
+ font-size: 17px;
+ line-height: 22px;
+ font-weight: 500;
+ }
+
+
+
+ .pick {
+ font-size: 15px;
+ line-height: 20px;
+ font-weight: 400;
+ color: rgba(112, 117, 121, 1);
+ }
+
+ .changeBtn {
+ background: transparent;
+ border: none;
+ display: flex;
+ align-items: center;
+ column-gap: 8px;
+ color: rgba(112, 117, 121, 1);
+ justify-self: flex-end;
+ position: absolute;
+ right: 0;
+ top: 0;
+ height: 100%;
+ z-index: 10;
+
+ svg {
+ margin: 0;
+ }
+ }
+}
+
+.settings {
+ position: absolute;
+ right: 0;
+ height: 100%;
+ display: flex;
+ align-items: center;
+}
+
+.order {
+ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.16);
+ margin-top: 30px;
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px 16px;
+
+ .productName {
+ font-size: 17px;
+ line-height: 22px;
+ font-weight: 600;
+
+ span {
+ opacity: 0.5;
+ }
+ }
+
+ .status {
+ font-size: 12px;
+ font-weight: 400;
+ color: rgb(0, 233, 0);
+ }
+}
+
+.rightside {
+ display: flex;
+ align-items: center;
+ column-gap: 16px;
+
+ p {
+ font-weight: 700;
+ font-size: 30px;
+ line-height: 22px;
+ }
+}
+
+.emptyOrders {
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ position: absolute;
+ height: 100vh;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ z-index: 20;
+}
+
+.emptyText {
+ text-align: center;
+ font-size: 17px;
+ font-weight: 600;
+ line-height: 22px;
+ margin-top: -40px;
+ margin-left: -10px;
+}
+
+.lottie {
+ width: 200px;
+ height: 200px;
+}
diff --git a/src/pages/StillDev.jsx b/src/pages/StillDev.jsx
new file mode 100644
index 0000000..85d89ff
--- /dev/null
+++ b/src/pages/StillDev.jsx
@@ -0,0 +1,41 @@
+import { ButtonDefault } from '../components/ButtonDefault';
+import { Nav } from '../components/Nav/Nav';
+import {useSelector} from 'react-redux'
+
+import { Link } from 'react-router-dom';
+
+
+const text = {
+ en: {
+ title: "Yeah, i know",
+ phrase: "We still working on it..."
+ },
+ ru: {
+ title: "Да-да, мы знаем",
+ phrase: "Мы еще работаем над этим разделом..."
+ }
+}
+
+export const S = () => {
+ const user = useSelector(state => state.user);
+
+ return (
+ Specials
+
+ Home Page
+
+
+ );
+};
diff --git a/src/redux/slice/applicationState.js b/src/redux/slice/applicationState.js
new file mode 100644
index 0000000..bc40b28
--- /dev/null
+++ b/src/redux/slice/applicationState.js
@@ -0,0 +1,24 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+ product: {},
+ deliveryModalOpened: false,
+};
+
+export const appSlice = createSlice({
+ name: 'appState',
+ initialState,
+ reducers: {
+ setProduct: (state, {payload}) => payload,
+ deliveryInfoModalController: (state, { payload }) => {
+ state.deliveryModalOpened = payload
+ },
+ },
+});
+
+export const {
+ setProduct,
+ deliveryInfoModalController
+} = appSlice.actions;
+
+export default appSlice.reducer;
diff --git a/src/redux/slice/cartSlice.js b/src/redux/slice/cartSlice.js
new file mode 100644
index 0000000..33c8667
--- /dev/null
+++ b/src/redux/slice/cartSlice.js
@@ -0,0 +1,17 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+ needDelivery: false,
+};
+
+export const cartSlice = createSlice({
+ name: 'cart',
+ initialState,
+ reducers: {
+
+ },
+});
+
+export const {} = cartSlice.actions;
+
+export default cartSlice.reducer;
diff --git a/src/redux/slice/productsSlice.js b/src/redux/slice/productsSlice.js
new file mode 100644
index 0000000..4cc032f
--- /dev/null
+++ b/src/redux/slice/productsSlice.js
@@ -0,0 +1,21 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+ productsList: []
+}
+
+export const productsSlice = createSlice({
+ name: 'products',
+ initialState,
+ reducers: {
+ initProductsList: (state, { payload }) => {
+ state.productsList = payload
+ }
+ },
+});
+
+export const {
+ initProductsList
+} = productsSlice.actions;
+
+export default productsSlice.reducer;
diff --git a/src/redux/slice/userSlice.js b/src/redux/slice/userSlice.js
new file mode 100644
index 0000000..17a8539
--- /dev/null
+++ b/src/redux/slice/userSlice.js
@@ -0,0 +1,306 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { api_server } from '../../main';
+import axios from 'axios';
+
+const initialState = {
+ _id: '661c17375ec5674ee7cdb1df',
+ id: 628122813,
+ first_name: '',
+ last_name: '',
+ username: '',
+ language_code: 'en',
+ is_premium: true,
+ allows_write_to_pm: true,
+ appLanguage: 'en',
+ likedProducts: [],
+ status: '',
+ orders: [],
+ wallets: [],
+ isInitial: true,
+ deliveryInfo: {
+ name: '',
+ country: '',
+ state: '',
+ city: '',
+ street: '',
+ zipcode: '',
+ saveData: true,
+ phoneNumber: 0,
+ },
+ cart: [],
+ pickedAddress: null,
+ needDelivery: false,
+ cartCost: 0,
+ cartAmount: 0,
+ savedAddresses: [
+ {
+ id: 1,
+ name: 'Home address',
+ country: 'USA',
+ state: 'Florida',
+ city: 'Miami',
+ street: 'Lenin',
+ zip: 'miami 1698',
+ },
+ {
+ id: 2,
+ name: 'Mother',
+ country: 'USA',
+ state: 'Florida',
+ city: 'Miami',
+ street: 'Lenin',
+ zip: 'miami 1698',
+ },
+ {
+ id: 3,
+ name: 'Garage address',
+ country: 'USA',
+ state: 'Florida',
+ city: 'Miami',
+ street: 'Lenin',
+ zip: 'miami 1698',
+ },
+ ],
+};
+
+export const userSlice = createSlice({
+ name: 'user',
+ initialState,
+ reducers: {
+ // deliveryInfoChange: (state, { payload }) => {
+
+ // },
+ pushWallet: (state, { payload }) => {
+ state.wallets.push(payload);
+ axios.post(`${api_server}/api/swrn`, { wallets: state.wallets, id: state.id });
+ },
+ changeInputValue: (state, { payload }) => {
+ state.deliveryInfo[payload.input] = payload.value;
+ },
+
+ changeAppLanguage: (state, { payload }) => {
+ state.appLanguage = payload;
+ },
+ setUser: (state, { payload }) => {
+ return payload;
+ },
+ likeToggler: (state, { payload }) => {
+ if (state.likedProducts.includes(payload)) {
+ state.likedProducts = state.likedProducts.filter((a) => a !== payload);
+ axios.get(`${api_server}/api/like?product_id=${payload}&user_id=${state.id}&command=${false}`);
+ } else {
+ state.likedProducts.push(payload);
+ axios.get(`${api_server}/api/like?product_id=${payload}&user_id=${state.id}&command=${true}`);
+ }
+ },
+
+ saveDataChanger: (state) => {
+ axios.get(`${api_server}/api/save-data-change?id=${state.id}&flag=${!state.deliveryInfo.saveData}`);
+ state.deliveryInfo.saveData = !state.deliveryInfo.saveData;
+ },
+
+ saveNewAddress: (state, { payload }) => {
+ state.savedAddresses.push(payload);
+ axios.post(`${api_server}/api/update-saved-addresses`, { id: state.id, savedAddresses: state.savedAddresses });
+ },
+
+ saveNewRecipient: (state, { payload }) => {
+ state.savedRecipients.push(payload);
+ axios.post(`${api_server}/api/update-saved-recipients`, { id: state.id, savedRecipients: state.savedRecipients });
+ },
+
+ changeMyAddress: (state, { payload }) => {
+ state.savedAddresses = state.savedAddresses.filter((a) => a.id !== payload.id);
+ state.savedAddresses.push(payload);
+ state.pickedAddress = payload;
+ axios.post(`${api_server}/api/update-saved-addresses`, { id: state.id, savedAddresses: state.savedAddresses });
+ axios.post(`${api_server}/api/set-picked-address`, { id: state.id, pickedAddress: state.pickedAddress });
+ },
+ changeMyRecipient: (state, { payload }) => {
+ state.savedRecipients = state.savedRecipients.filter((a) => a.id !== payload.id);
+ state.savedRecipients.push(payload);
+
+ state.pickedRecipient = payload;
+ axios.post(`${api_server}/api/update-saved-recipients`, { id: state.id, savedRecipients: state.savedRecipients });
+ axios.post(`${api_server}/api/set-picked-recipient`, { id: state.id, pickRecipient: state.pickRecipient });
+ },
+
+ pickAddress: (state, { payload }) => {
+ state.pickedAddress = payload;
+ axios.post(`${api_server}/api/set-picked-address`, { id: state.id, pickedAddress: state.pickedAddress });
+ },
+
+ pickRecipient: (state, { payload }) => {
+ state.pickedRecipient = payload;
+ axios.post(`${api_server}/api/set-picked-recipient`, { id: state.id, pickedRecipient: state.pickedRecipient });
+ },
+
+ removeSavedAddress: (state, { payload }) => {
+ state.savedAddresses = state.savedAddresses.filter((a) => a.id !== Number(payload));
+ if (state.pickedAddress?.id === payload || state.savedAddresses.length === 0) {
+ state.pickedAddress = null;
+ axios.post(`${api_server}/api/set-picked-address`, { id: state.id, pickedAddress: state.pickedAddress });
+ }
+ axios.post(`${api_server}/api/update-saved-addresses`, { id: state.id, savedAddresses: state.savedAddresses });
+ },
+
+ removeSavedRecipient: (state, { payload }) => {
+ state.savedRecipients = state.savedRecipients.filter((r) => r.id !== Number(payload));
+ if (state.pickedRecipient?.id === payload || state.savedRecipients.length === 0) {
+ state.pickedRecipient = null;
+ axios.post(`${api_server}/api/set-picked-recipient`, { id: state.id, pickRecipient: state.pickRecipient });
+ }
+ axios.post(`${api_server}/api/update-saved-recipients`, { id: state.id, savedRecipients: state.savedRecipients });
+ },
+
+ addToCart: (state, { payload }) => {
+ const data = {
+ _id: payload._id,
+ name: payload.name,
+ description: payload.description,
+ image: payload.images[0],
+ price: payload.price,
+ counter: 0,
+ inOrder: true,
+ seller_wallet: payload.seller_wallet,
+ };
+
+ const findedIndex = state.cart.findIndex((item) => item._id === payload._id);
+ if (findedIndex === -1) {
+ data.counter = data.counter + 1;
+
+ if (payload.size) {
+ data.sizes = [];
+ data.sizes.push(payload.size);
+ }
+ state.cart.push(data);
+ } else {
+ let sizes = state.cart[findedIndex].sizes;
+
+ if (payload.size && payload.size.length > 0) {
+ sizes.push(payload.size);
+ }
+
+ state.cart[findedIndex] = { ...state.cart[findedIndex], counter: state.cart[findedIndex].counter + 1, sizes };
+ }
+ const { total, amount } = cartTotalCounter(state.cart);
+ state.cartCost = total.toFixed(2);
+ state.cartAmount = amount;
+ axios.post(`${api_server}/api/add-to-cart`, { id: state.id, cart: state.cart, cartCost: total.toFixed(2), cartAmount: state.cartAmount });
+ },
+
+ removeFromCart: (state, { payload }) => {
+ const indexToRemove = state.cart.findIndex((item) => item._id === payload._id);
+ if (indexToRemove !== -1) {
+ state.cart[indexToRemove] = { ...state.cart[indexToRemove], counter: state.cart[indexToRemove].counter - 1 };
+ }
+ if (state.cart[indexToRemove].counter === 0) {
+ state.cart = state.cart.filter((item) => item._id !== state.cart[indexToRemove]._id);
+ }
+ const { total, amount } = cartTotalCounter(state.cart);
+ state.cartCost = total.toFixed(2);
+ state.cartAmount = amount;
+ axios.post(`${api_server}/api/remove-from-cart`, {
+ id: state.id,
+ cart: state.cart,
+ cartCost: total.toFixed(2),
+ cartAmount: state.cartAmount,
+ });
+ },
+
+ removeFullProductFromCart: (state, { payload }) => {
+ state.cart = state.cart.filter((a) => a._id !== payload._id);
+ const { total, amount } = cartTotalCounter(state.cart);
+ state.cartCost = total.toFixed(2);
+ state.cartAmount = amount;
+ axios.post(`${api_server}/api/remove-from-cart`, {
+ id: state.id,
+ cart: state.cart,
+ cartCost: total.toFixed(2),
+ cartAmount: state.cartAmount,
+ });
+ },
+
+ emptyCart: (state) => {
+ state.cart = [];
+ state.cartCost = cartTotalCounter(state.cart);
+ state.cartAmount = 0;
+ axios.get(`${api_server}/api/empty-cart?user=${state.id}`);
+ },
+
+ inOrderToggler: (state, { payload }) => {
+ const indexToRemove = state.cart.findIndex((item) => item._id === payload._id);
+ if (indexToRemove !== -1) {
+ state.cart[indexToRemove] = { ...state.cart[indexToRemove], inOrder: !state.cart[indexToRemove].inOrder };
+ }
+ const { total, amount } = cartTotalCounter(state.cart);
+ state.cartCost = total.toFixed(2);
+ state.cartAmount = amount;
+
+ axios.post(`${api_server}/api/in-order-toggle`, {
+ id: state.id,
+ cart: state.cart,
+ cartCost: total.toFixed(2),
+ cartAmount: state.cartAmount,
+ });
+ },
+
+ removeBuyedProducts: (state, { payload }) => {
+ payload.map((item) => {
+ state.cart = state.cart.filter((ci) => ci._id !== item._id);
+ });
+
+ const { total, amount } = cartTotalCounter(state.cart);
+ state.cartCost = total.toFixed(2);
+ state.cartAmount = amount;
+
+ axios.post(`${api_server}/api/remove-from-cart`, {
+ id: state.id,
+ cart: state.cart,
+ cartCost: total.toFixed(2),
+ cartAmount: state.cartAmount,
+ });
+
+ console.log(payload);
+ // state.cart = state.car
+ // console.log(payload.cart)
+ },
+ },
+});
+
+function cartTotalCounter(cart) {
+ let amount = 0;
+ let total = 0;
+ cart.map((p) => {
+ if (p.inOrder) {
+ amount = amount + p.counter;
+ total = total + p.price * p.counter;
+ }
+ });
+
+ return { total, amount };
+}
+
+export const {
+ removeBuyedProducts,
+ removeSavedRecipient,
+ saveNewRecipient,
+ changeMyRecipient,
+ pickRecipient,
+ removeSavedAddress,
+ changeMyAddress,
+ pickAddress,
+ inOrderToggler,
+ emptyCart,
+ pushWallet,
+ removeFromCart,
+ addToCart,
+ changeInputValue,
+ setUser,
+ likeToggler,
+ saveDataChanger,
+ saveNewAddress,
+ removeFullProductFromCart,
+} = userSlice.actions;
+
+export default userSlice.reducer;
diff --git a/src/redux/store.js b/src/redux/store.js
new file mode 100644
index 0000000..feeabbc
--- /dev/null
+++ b/src/redux/store.js
@@ -0,0 +1,14 @@
+import { configureStore } from '@reduxjs/toolkit';
+import userReducer from './slice/userSlice';
+import cartReducer from './slice/cartSlice';
+import appReducer from './slice/applicationState';
+import productsReducer from './slice/productsSlice'
+
+export const store = configureStore({
+ reducer: {
+ user: userReducer,
+ cart: cartReducer,
+ appState: appReducer,
+ products: productsReducer,
+ },
+});
diff --git a/src/styles/clashFonts.scss b/src/styles/clashFonts.scss
new file mode 100644
index 0000000..28d25bc
--- /dev/null
+++ b/src/styles/clashFonts.scss
@@ -0,0 +1,74 @@
+
+@font-face {
+ font-family: 'ClashDisplay-Extralight';
+ src: url('../assets/fonts/Clash/fonts/ClashDisplay-Extralight.woff2') format('woff2'),
+ url('../assets/fonts/Clash/fonts/ClashDisplay-Extralight.woff') format('woff'),
+ url('../assets/fonts/Clash/fonts/ClashDisplay-Extralight.ttf') format('truetype');
+ font-weight: 200;
+ font-display: swap;
+ font-style: normal;
+ }
+ @font-face {
+ font-family: 'ClashDisplay-Light';
+ src: url('../assets/fonts/Clash/fonts/ClashDisplay-Light.woff2') format('woff2'),
+ url('../assets/fonts/Clash/fonts/ClashDisplay-Light.woff') format('woff'),
+ url('../assets/fonts/Clash/fonts/ClashDisplay-Light.ttf') format('truetype');
+ font-weight: 300;
+ font-display: swap;
+ font-style: normal;
+ }
+ @font-face {
+ font-family: 'ClashDisplay-Regular';
+ src: url('../assets/fonts/Clash/fonts/ClashDisplay-Regular.woff2') format('woff2'),
+ url('../assets/fonts/Clash/fonts/ClashDisplay-Regular.woff') format('woff'),
+ url('../assets/fonts/Clash/fonts/ClashDisplay-Regular.ttf') format('truetype');
+ font-weight: 400;
+ font-display: swap;
+ font-style: normal;
+ }
+ @font-face {
+ font-family: 'ClashDisplay-Medium';
+ src: url('../assets/fonts/Clash/fonts/ClashDisplay-Medium.woff2') format('woff2'),
+ url('../assets/fonts/Clash/fonts/ClashDisplay-Medium.woff') format('woff'),
+ url('../assets/fonts/Clash/fonts/ClashDisplay-Medium.ttf') format('truetype');
+ font-weight: 500;
+ font-display: swap;
+ font-style: normal;
+ }
+ @font-face {
+ font-family: 'ClashDisplay-Semibold';
+ src: url('../assets/fonts/Clash/fonts/ClashDisplay-Semibold.woff2') format('woff2'),
+ url('../assets/fonts/Clash/fonts/ClashDisplay-Semibold.woff') format('woff'),
+ url('../assets/fonts/Clash/fonts/ClashDisplay-Semibold.ttf') format('truetype');
+ font-weight: 600;
+ font-display: swap;
+ font-style: normal;
+ }
+ @font-face {
+ font-family: 'ClashDisplay-Bold';
+ src: url('../assets/fonts/Clash/') format('woff2'),
+ url('../assets/fonts/Clash/fonts/ClashDisplay-Bold.woff') format('woff'),
+ url('../assets/fonts/Clash/fonts/ClashDisplay-Bold.ttf') format('truetype');
+ font-weight: 700;
+ font-display: swap;
+ font-style: normal;
+ }
+ /**
+ * This is a variable font
+ * You can control variable axes as shown below:
+ * font-variation-settings: wght 700.0;
+ *
+ * available axes:
+ 'wght' (range from 200.0 to 700.0
+ */
+ @font-face {
+ font-family: 'ClashDisplay-Variable';
+ src: url('../assets/fonts/Clash/fonts/ClashDisplay-Variable.woff2') format('woff2'),
+ url('../assets/fonts/Clash/fonts/ClashDisplay-Variable.woff') format('woff'),
+ url('../assets/fonts/Clash/fonts/ClashDisplay-Variable.ttf') format('truetype');
+ font-weight: 200 700;
+ font-display: swap;
+ font-style: normal;
+ }
+
+
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..50e48e7
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,37 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": [
+ "src",
+ "src/components",
+ "global.d.ts"
+ ],
+
+ "exclude": [
+ "node_modules"
+ ],
+ "files": [
+ "global.d.ts"
+ ]
+ }
+
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..ff3d111
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import nodePolyfills from 'vite-plugin-node-stdlib-browser';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ server: {
+ host: '0.0.0.0',
+ },
+ plugins: [
+ react(),
+ nodePolyfills(),
+ ],
+ build: {
+ rollupOptions: {
+ output: {
+ manualChunks(id) {
+ if (id.includes('node_modules')) {
+ return id.toString().split('node_modules/')[1].split('/')[0].toString();
+ }
+ },
+ },
+ chunkSizeWarningLimit: 1000, // Увеличение лимита размера чанка (если нужно)
+ },
+ },
+});
+ 
+
+
+
+ {text[user.appLanguage].title}
+{text[user.appLanguage].phrase}
+