+
+### Contribution ๐ช:
+* Working with the API ๐
+* Managing the Redux store ๐ช
+* Animations ๐ฆ
+* UI/UX Design ๐ญ
+* Code review ๐ซ
+* Testing ๐งช
+* Deployment ๐
+* Documentation ๐
+* CI/CD โจ
+
+### Contact ๐:
+* Email - ```bogdanscherbinadev@gmail.com``` ๐ฌ
+* Linkedin - [Bohdan Shcherbyna](https://www.linkedin.com/in/quiddle/) โ๏ธ
+* Telegram - [@Quiddle](https://t.me/quiddle) ๐ฑ
+* GitHub - [Quiddlee](https://github.com/Quiddlee) ๐ฆ
+
+#
+
+### **Oleksii Drohachov** - **Front-end Developer** ๐ฆ
+
+
+
+### Contribution ๐ช:
+* Managing the app router ๐
+* Code review ๐ซ
+* Documentation ๐
+* Working with CommerceTools data ๐
+* Managing app products ๐
+* Fully implement user profile page ๐ช
+* UI layout ๐ฆฅ
+* Project setup ๐ซ
+* Working with the API ๐ฉบ
+
+### Contact ๐:
+* Email - ```asdrogachev@gmail.com``` ๐ฌ
+* Linkedin - [Oleksii Drohachov](https://www.linkedin.com/in/oleksii-drohachov-b127a9245/) โ๏ธ
+* Telegram - [@Tedzury](https://t.me/tedzury) ๐ฑ
+* GutHub - [Tedzury](https://github.com/Tedzury) ๐ฆ
+
+#
+
+### **Harry Holubiev** - **Front-end Developer** ๐ฒ
+
+
+
+### Contribution ๐ช:
+* Designed product card ๐ด
+* Product page ๐
+* Logo and animations ๐ฃ
+* implemented some features in Cart component ๐
+* Managing the app router ๐
+* Code review ๐ซ
+* Documentation ๐
+* UI Layout ๐ฆฅ
+* Working with the API ๐ช
+
+### Contact ๐:
+* Email - ```queharambe@gmail.com``` ๐ฌ
+* GitHub - [barrydilan](https://github.com/barrydilan) ๐ฆ
+
+# Adding products data to commerce tools ๐ฆฉ:
+Here you can find detailed instructions on how to add products data to commercetools ๐ต๏ธ. To add data with products in commercetools we prepared [fully setted up repo](https://github.com/Tedzury/commercetools-sushisushi-data) for you ๐ซ.
+
+If you want exactly the same products as we have ๐:
+* You need to follow all the [Installation and Preparation](#Installation And Preparation) steps. โ
+* Aaand type a few ๐ค commands into the terminal to upload all the data into your commercetools account! ๐คฉ
+
+
+Detailed instructions will be provided in further reading.
+Nevertheless, feel free to modify data in any possible way you want ๐ค. Main steps and cornerstones will be covered in further reading. So, let's proceed into detailed instructions. โฉ
+
+# Step-by-step guide on how to add your own products data to commercetools ๐
+
+To add your own products data to commercetools you need to follow next steps ๐ฆ:
+
+* Clone [example repo](https://github.com/Tedzury/commercetools-sushisushi-data) into your computer. ๐ถโ๐ซ๏ธ
+
+* Register your account at commercetools.
+
+* Go to ```Settings > Developer settings > Create new API client > Select predefined Admin scope > Create API client```
+
+* **โ ๏ธ !important step โ ๏ธ** Scroll to bottom of web page, there will be **select input** ๐ with suggested options for downloading environment variables.
+
+* Pick option to download in format ```.env``` file. **Don't close this window ๐จ until you download all the files needed**, info is shown only **once** ๐ฑ till you won't close the window ๐.
+
+
+* After downloading ๐ฉ, insert downloaded ```.env``` file into your cloned repo from first step. Remove ๐งน suggested name from this file, so there is only left ```.env``` in file name. More detailed info with pictures is available at [original sunrisedata](https://github.com/commercetools/commercetools-sunrise-data) ๐จ
+* **Open terminal** ๐งโ๐ป inside the **root folder** of the cloned repo and type next instructions: ```npm run clean:categories && npm run import:categories && npm run clean:products && npm run import:products```.
+
+And that all! ๐ That simple, following this guide allows you to fully imitate our products data, that we used in our project. ๐
+
+# Remarks and additional info ๐ข:
+
+And here will be some clues to add your own products into commerce tools ๐งฉ.
+
+In our project we use very limited info and options for our products ๐ค. Commercetools provides much more larger management for products ๐, categories, customers, prices, taxes, supply channels and so on ๐คฏ, but in our case we ain't needed so much options ๐งโโ๏ธ, so we used as little of it, as possible. In fact, we use only 2 minimal options to clean and then upload categories and products into api ๐
.
+
+**4 main files** from cloned repo take part in this process: ```categories.csv, product-export-template.csv, product-type.json and products.csv``` ๐ซ .
+
+1. In the ```categories.csv``` file you describe the categories you want to import and their hierarchy ๐ฆ.
+
+2. Then, in ```product-export-template.csv``` you describe template for imported products ๐๏ธ, **exactly what info or fields must be in every product description**.
+
+3. ```product-type.json``` describes every non-standard field for product in details ๐ซฃ.
+
+4. And finally ๐ in ```products.csv``` **you describe each of your product, that pattern must follow the** ```product-export-template pattern```.
+
+# **Important thing** ๐จ:
+each product occupies his own line in ```.csv``` file(!) โ ๏ธ. In order to provide photos for products we created **separate repo** ๐ฆฅ to store the photos, and in your products data we provide only links to the photos ๐ธ.
+
+Also in repo you can find ```SushiSushi menu.xlsx``` file ๐ฃ. It contains exactly the same data as ```products.csv``` file, BUT it's much easier ๐ฅต to edit data in ```xlsx``` file, then in ```csv``` file ๐.
+
+Everything in this file is already set upped for comfort editing of products ๐. If you want to edit products data: feel free to do it โ๏ธ. You can change any data you want, just **make sure** it is suited for ```csv``` file ๐.
+
+# How it works ๐ค:
+Each cell in product row is concatenated and separated with comma ๐ฒ. Then this concatenated rows are concatenated into one line in one cell at the bottom of the file ๐คฏ.
+
+Just copy paste the cell content into ```products.csv``` file. Make sure, that after copying the data - you separated each product into own line in ```.csv``` file ๐ฆ, it's **critical point** ๐ฎ.
+
+One more **critical point** - make sure that after ```copy/paste``` you left the ```header``` row at ```products.csv``` file ๐ซก.
+
+That is all you need to know about editing the product data for our project! To know more you should deep dive ๐คฟ into commercetools docs, be observant ๐ญ, lucky ๐ and ready to struggle ๐ซ .
+
+# License ๐
+
+This project is licensed under the MIT License ๐ฅท.
+
+# Acknowledgments ๐
+
+We want to thank [RS-School](https://rs.school/) community ๐ฅฐ.
+
+
+
+
+
+
+
+ ) : null}
+ Oh snap!
+
+ {errorMessage}
+
+ Change a few things up and try again
+
+ 
+
+ {
+ reStartForm();
+ }}
+ to={navigateTo}
+ className="
+ mb-4
+ mt-8
+ h-10
+ w-30
+ rounded-lg
+ bg-accent
+ p-2
+ text-center
+ text-primary
+ "
+ >
+ Continue
+
+ Success!
+Your account has been created
+
+ 
+
+
+ Continue
+
+
+
+
+ ) : null;
+}
diff --git a/src/features/PageBackBtn/PageBackBtn.tsx b/src/features/PageBackBtn/PageBackBtn.tsx
new file mode 100644
index 00000000..4a8c61e5
--- /dev/null
+++ b/src/features/PageBackBtn/PageBackBtn.tsx
@@ -0,0 +1,20 @@
+import { useNavigate } from 'react-router-dom';
+
+import arrowBlack from '../../assets/icons/arrowLeftBlack.svg';
+
+export default function PageBackBtn(props: { title: string }) {
+ const navigation = useNavigate();
+ const { title } = props;
+ return (
+
+
+ {title}
+
+ );
+}
diff --git a/src/features/SearchInput/SearchInput.tsx b/src/features/SearchInput/SearchInput.tsx
new file mode 100644
index 00000000..4c8ac1ad
--- /dev/null
+++ b/src/features/SearchInput/SearchInput.tsx
@@ -0,0 +1,222 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+import { AnimatePresence, Cycle, motion, useCycle } from 'framer-motion';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+
+import {
+ BUTTON_TYPE_NAME,
+ CATEGORIES_ALL_PATH,
+ CATEGORIES_PATH,
+ ENTER_KEY,
+ ESK_KEY,
+ SEARCH_QUERY,
+} from './constants/constants.ts';
+import findMatch from './helpers/findMatch.ts';
+import replaceMatch from './helpers/replaceMatch.ts';
+import cross from '../../assets/icons/cross.svg';
+import search from '../../assets/icons/search.svg';
+import { useLazyGetProductListQuery } from '../../entities/product';
+import { IGetProductListParams } from '../../entities/product/types/interfaces.ts';
+import { capitalize } from '../../shared/lib/helpers';
+import { Blackout } from '../../shared/ui';
+
+export default function SearchInput(props: { isHeader: boolean; setIsSearchActive?: Cycle }) {
+ const [query, setQuery] = useSearchParams('');
+ const [searchValue, setSearchValue] = useState(query.get(SEARCH_QUERY) ?? '');
+ const searchInputRef = useRef
+
+
+
+ {isActive && !!resultNames?.length && (
+
+ {resultNames.map((res, i) => (
+
+ 
+
+
+ ))}
+
+ )}
+
+
+
+ );
+}
+
+SearchInput.defaultProps = {
+ setIsSearchActive: null,
+};
diff --git a/src/features/SearchInput/constants/constants.ts b/src/features/SearchInput/constants/constants.ts
new file mode 100644
index 00000000..39d0708d
--- /dev/null
+++ b/src/features/SearchInput/constants/constants.ts
@@ -0,0 +1,6 @@
+export const ENTER_KEY = 'Enter';
+export const ESK_KEY = 'Escape';
+export const CATEGORIES_PATH = 'categories';
+export const CATEGORIES_ALL_PATH = '/categories/all';
+export const SEARCH_QUERY = 'search';
+export const BUTTON_TYPE_NAME = 'button';
diff --git a/src/features/SearchInput/helpers/findMatch.ts b/src/features/SearchInput/helpers/findMatch.ts
new file mode 100644
index 00000000..5a892673
--- /dev/null
+++ b/src/features/SearchInput/helpers/findMatch.ts
@@ -0,0 +1,14 @@
+/**
+ * Finds the first occurrence of the search value in the given string and returns it.
+ * If no match is found, an empty string is returned.
+ * The search is case-insensitive.
+ *
+ * @param {string} str - The string to search in.
+ * @param {string} searchValue - The value to search for in the string.
+ * @return {string} The first occurrence of the search value in the string, or an empty string if no match is found.
+ */
+function findMatch(str: string, searchValue: string): string {
+ return str.toLowerCase().match(searchValue.toLowerCase())?.[0] ?? '';
+}
+
+export default findMatch;
diff --git a/src/features/SearchInput/helpers/replaceMatch.ts b/src/features/SearchInput/helpers/replaceMatch.ts
new file mode 100644
index 00000000..09fe8ac4
--- /dev/null
+++ b/src/features/SearchInput/helpers/replaceMatch.ts
@@ -0,0 +1,12 @@
+/**
+ * Replaces all occurrences of the searchValue in the given string with an empty string.
+ *
+ * @param {string} str - The string to perform the replacement on.
+ * @param {string} searchValue - The value to search for and replace.
+ * @return {string} The modified string with all occurrences of searchValue removed.
+ */
+function replaceMatch(str: string, searchValue: string): string {
+ return str.toLowerCase().replace(searchValue.toLowerCase(), '');
+}
+
+export default replaceMatch;
diff --git a/src/features/UserProfileLink/UserProfileLink.tsx b/src/features/UserProfileLink/UserProfileLink.tsx
new file mode 100644
index 00000000..93b71511
--- /dev/null
+++ b/src/features/UserProfileLink/UserProfileLink.tsx
@@ -0,0 +1,95 @@
+import { Link } from 'react-router-dom';
+
+import getGreeting from './helpers/getGreeting';
+import { getFullName, useGetUserQuery } from '../../entities/user';
+import { useAppSelector } from '../../shared/lib/hooks';
+import UserIcon from '../../shared/ui/UserIcon';
+
+const headerLoggedClass = 'block lg:hidden';
+const menuLoggedClass =
+ 'hidden w-full justify-center gap-3 text-text-grey lg:mt-28 lg:flex lg:flex-col lg:items-center xl:flex-row';
+
+function UserProfileLink(props: { isHeader: boolean }) {
+ const { isLogged, userId } = useAppSelector((state) => state.userReducer);
+ const { data, isLoading } = useGetUserQuery(userId, { skip: !userId });
+
+ const { isHeader } = props;
+ const userFullName = getFullName(data?.firstName, data?.lastName);
+
+ const hours = new Date().getHours();
+
+ const greeting = getGreeting(hours);
+
+ if (isLogged) {
+ return (
+
+
+
+
+ );
+ }
+ return (
+ <>
+
+ Log in
+
+
+ Sign Up
+
+
+ );
+}
+
+export default UserProfileLink;
diff --git a/src/features/UserProfileLink/helpers/getGreeting.ts b/src/features/UserProfileLink/helpers/getGreeting.ts
new file mode 100644
index 00000000..5b897fec
--- /dev/null
+++ b/src/features/UserProfileLink/helpers/getGreeting.ts
@@ -0,0 +1,6 @@
+export default function getGreeting(_hours: number) {
+ if (_hours >= 6 && _hours < 12) return 'Good morning!';
+ if (_hours >= 12 && _hours < 18) return 'Good day!';
+ if (_hours >= 18 && _hours < 23) return 'Good evening!';
+ return 'Good night!';
+}
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 00000000..2ac69a11
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,204 @@
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Poppins:wght@100;200;300;400;500;600;700&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html {
+ scroll-behavior: smooth;
+}
+
+* {
+ -webkit-tap-highlight-color: transparent;
+ -webkit-touch-callout: none;
+}
+
+::selection {
+ color: hsl(126, 55%, 47%);
+ background-color: hsl(134, 73%, 90%);
+}
+
+/* width */
+::-webkit-scrollbar {
+ width: 0;
+ height: 0;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+ background: hsl(0deg, 0%, 95%);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+ background: hsl(126deg, 55%, 47%);
+ border-radius: 5px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+ background: hsl(134deg, 51%, 55%);
+}
+
+@layer base {
+ .navMenuItem {
+ @apply flex min-w-[95px] flex-col items-center justify-end lg:mr-auto lg:w-full lg:flex-row lg:justify-start lg:pl-6;
+ }
+
+ .navMenuLink {
+ @apply w-full text-center lg:text-left text-base min-w-[80px] min-h-[40];
+ }
+
+ .navMenuIcon {
+ @apply m-auto w-5 lg:mr-3 lg:w-6;
+ }
+
+ .loginRegLabel {
+ @apply relative mt-6 block h-11 w-full rounded-md;
+ }
+
+ .loginRegInput {
+ @apply h-full w-full rounded-lg border-2 border-separation-line pl-11 text-xs text-text-dark outline-none transition-colors
+ placeholder:text-sm md:placeholder:text-base focus:border-text-grey md:text-base dark:bg-dark-separation-line dark:border-text-grey dark:text-primary;
+ }
+
+ .invalidInputIcon {
+ @apply absolute left-4 top-3.5 h-5 w-5 bg-contain bg-no-repeat;
+ }
+
+ .invalidInputMsg {
+ @apply absolute -top-[1.15rem] left-2 text-[0.5rem] leading-[0.5rem] text-shop-cart-red peer-invalid:block md:-top-5 md:text-xs;
+ }
+
+ .profileInputWrapper {
+ @apply pt-4 sm:flex sm:items-center sm:justify-between sm:py-5;
+ }
+
+ .addressProfileWrapper {
+ @apply mt-6 block h-10 w-full rounded-md border-2 border-separation-line pl-4 text-base leading-[35px] text-text-dark md:max-w-[47%] dark:text-primary dark:border-text-grey;
+ }
+
+ a.active {
+ @apply text-accent;
+ }
+}
+
+@layer components {
+ .hiddenCheckBox {
+ @apply mr-2 h-4 w-4 appearance-none rounded-[4px] border-1 border-accent bg-primary;
+ }
+}
+
+@layer utilities {
+ .regFormCheckGulp {
+ @apply before:absolute before:-left-5 before:top-2 before:hidden before:h-1.5 before:w-2.5 before:-rotate-45 before:border-b-3 before:border-l-3 before:border-b-accent before:border-l-accent;
+ }
+}
+
+.truncate-text {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ line-clamp: 2;
+ -webkit-box-orient: vertical;
+}
+
+.react-star-rate {
+ display: flex !important;
+}
+
+.react-star-rate__star {
+ font-size: clamp(1rem, 2vw, 1.5rem);
+ margin-right: 2px !important;
+}
+
+.swiper-button-prev-unique,
+.swiper-button-next-unique {
+ position: absolute;
+ top: 50%;
+ z-index: 80;
+ width: 0;
+ height: 0;
+ background-position: center;
+ background-repeat: no-repeat;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.swiper-button-prev-unique:hover,
+.swiper-button-next-unique:hover{
+ scale: 1.1
+}
+
+.swiper-button-next-unique:active {
+ translate: 0.5rem;
+}
+
+.swiper-button-prev-unique:active {
+ translate: -0.5rem;
+}
+
+.swiper-button-prev-unique {
+ background-image: url('assets/icons/slidetPrev.svg');
+ object-fit: cover;
+ left: 0;
+}
+
+.swiper-button-next-unique {
+ background-image: url('assets/icons/sliderRight.svg');
+ object-fit: cover;
+ right: 0;
+}
+
+.swiper {
+ padding-bottom: 150px !important;
+}
+
+#miniSwiper {
+ padding-bottom: 0 !important;
+}
+
+#miniSwiper .swiper-pagination {
+ bottom: 20px !important;
+}
+
+.swiper-pagination {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 4px;
+ bottom: 10px !important;
+ background-color: hsl(0deg, 0%, 57%);
+ border-radius: 24px;
+ max-width: 100px;
+ left: 50% !important;
+ transform: translate(-50%, 0%) !important;
+ width: fit-content !important;
+}
+
+.swiper-pagination-bullet,
+.swiper-pagination-bullet-active {
+ background-color: hsla(0, 0%, 0%, 0) !important;
+ border: 1px solid black;
+ height: 18px !important;
+ width: 18px !important;
+}
+
+.swiper-pagination-bullet-active {
+ background-color: hsl(126deg, 0%, 20%) !important;
+ border: none;
+}
+
+@media (min-width: 680px) {
+ .swiper-button-prev-unique,
+ .swiper-button-next-unique {
+ position: absolute;
+ top: 40%;
+ z-index: 80;
+ width: 50px;
+ height: 50px;
+ background-position: center;
+ background-repeat: no-repeat;
+ }
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 00000000..601c301f
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,20 @@
+import './index.css';
+import '@smastrom/react-rating/style.css';
+
+import React from 'react';
+
+import ReactDOM from 'react-dom/client';
+import { Provider } from 'react-redux';
+
+import { WrappedApp } from './app/App';
+import { setupStore } from './app/store';
+
+const store = setupStore();
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+ + {userFullName} +
++ {greeting} +
+
+
+ );
+}
diff --git a/src/pages/Cart/Cart.tsx b/src/pages/Cart/Cart.tsx
new file mode 100644
index 00000000..ff94d9ec
--- /dev/null
+++ b/src/pages/Cart/Cart.tsx
@@ -0,0 +1,324 @@
+import React, { useEffect, useState } from 'react';
+
+import { AnimatePresence, motion, useCycle } from 'framer-motion';
+import { Link, useLocation } from 'react-router-dom';
+
+import {
+ animate,
+ initialAnimation,
+ modalAnimate,
+ modalExit,
+ modalInitial,
+ modalTransition,
+} from './constants/constants.ts';
+import emptyCart from '../../assets/icons/empty-cart-icon.svg';
+import {
+ useCreateCartMutation,
+ useGetCartByIdQuery,
+ useLazyGetCartListQuery,
+ useUpdateCartMutation,
+} from '../../entities/cart';
+import { formatPrice, pennieToMoney } from '../../entities/product';
+import { userSlice } from '../../entities/user';
+import { useAppDispatch, useAppSelector } from '../../shared/lib/hooks';
+import {
+ buttonTapAnimation,
+ buttonTransition,
+ emptyCartAnimate,
+ emptyCartInitial,
+ emptyCartTransition,
+ itemAnimation,
+ itemExit,
+ itemInitial,
+ itemTransition,
+} from '../../shared/ui/animations.tsx';
+import LoadingAnimation from '../../shared/ui/LoadingAnimation.tsx';
+import CartItem from '../../widgets/CartItem/CartItem.tsx';
+
+export default function Cart() {
+ const [promoValue, setPromoValue] = useState('');
+ const [isModalShown, setIsModalShown] = useCycle(false, true);
+ const { cartId, userId, isLogged } = useAppSelector((state) => state.userReducer);
+ const { data: cart } = useGetCartByIdQuery(cartId);
+ const [getCartList] = useLazyGetCartListQuery();
+ const dispatch = useAppDispatch();
+ const { updateCartId } = userSlice.actions;
+ const [createCart] = useCreateCartMutation();
+ const [updateCart] = useUpdateCartMutation();
+ const pathName = useLocation().pathname;
+ const isCart = pathName === '/cart';
+
+ const isCartEmpty = !cart?.totalLineItemQuantity;
+ const cartVersion = cart?.version ?? 1;
+
+ useEffect(() => {
+ async function fetchCreateCart() {
+ try {
+ const newCart = await createCart({ currency: 'USD' }).unwrap();
+
+ if (newCart?.id) dispatch(updateCartId(newCart.id));
+ } catch (e) {
+ if (e && typeof e === 'object' && 'message' in e) throw new Error(`Could not create a cart! ${e.message}`);
+ }
+ }
+
+ async function fetchCartList() {
+ try {
+ const response = await getCartList().unwrap();
+ const id = response.results.find(({ customerId }) => customerId === userId)?.id;
+
+ if (id) dispatch(updateCartId(id));
+ } catch (e) {
+ if (e && typeof e === 'object' && 'message' in e) throw new Error(`Could not query a cart! ${e.message}`);
+ }
+ }
+
+ if (isLogged) fetchCartList();
+ else if (!isLogged && !cartId) {
+ fetchCreateCart();
+ }
+
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [cartId, userId]);
+
+ if (!cart)
+ return (
+
+
+
+ 
+
+
+
+
+
+
+ Collaboration
+
+ Our team's success was the result of effective collaboration.
+
We held bi-daily “meat-ups” on messenger to discuss the project, plan collectively, and
+ assign tasks to each member. This regular communication and clear task division kept us aligned,
+ motivated, and ensured a successful project outcome!
+
Team members
+
+
+
+
+
+ 
+
+
+
+ 
+
+
+ + Bohdan Shcherbyna +
+Frontend Developer | Team lead
+Bio
++ I enjoy implementing aesthetically pleasing interfaces, and to pay extra attention to details such as + animations or UX. +
+Contributions
++ Managing the global state of the app, Working with API, UI/UX design, Maintaining the project's + vision. +
+
+
+
+ 
+
+
+
+
+
+
+ Harry Holubiev
+Frontend Developer
+Bio
++ Designing and implementing contemporary and user-friendly web-applications is my passion. +
+Contributions
++ Designed Product Card, Product Page, Logo and animations, implemented some features in Cart component. +
+
+
+
+ 
+
+
+
+
+
+
+ Oleksii Drohachov
+Frontend Developer
+Bio
+Switcher from medical field. The old man. :)
+Contributions
++ Team multitool. Set up initial repository. Implemented most of layout and front end logic. +
+
+
+ );
+
+ const totalPriceAmount = cart?.totalPrice?.centAmount;
+ const totalPrice = formatPrice(pennieToMoney(totalPriceAmount), cart?.totalPrice?.currencyCode);
+ const discountAmount = cart?.lineItems
+ ?.at(0)
+ ?.discountedPricePerQuantity.at(0)
+ ?.discountedPrice?.includedDiscounts?.at(0)?.discountedAmount.centAmount;
+ const totalItems = cart?.totalLineItemQuantity;
+ const oldPrice = discountAmount ? formatPrice(pennieToMoney(totalPriceAmount + discountAmount * totalItems)) : null;
+
+ async function handleClearCart() {
+ try {
+ if (!cart) return;
+
+ const actions = cart.lineItems.map(({ id }) => {
+ return {
+ action: 'removeLineItem',
+ lineItemId: id,
+ variantId: 1,
+ };
+ });
+
+ updateCart({
+ cartId,
+ body: {
+ version: cartVersion,
+ actions,
+ },
+ });
+ } catch (e) {
+ if (e && typeof e === 'object' && 'message' in e) throw new Error(`Could not clear cart! ${e.message}`);
+ }
+ }
+
+ async function handleApplyPromo(e: React.SyntheticEvent) {
+ e.preventDefault();
+
+ if (!promoValue) return;
+
+ try {
+ const body = {
+ version: cartVersion,
+ actions: [
+ {
+ action: 'addDiscountCode',
+ code: promoValue,
+ },
+ ],
+ };
+
+ updateCart({ cartId, body }).unwrap();
+ } catch (err) {
+ if (err && typeof err === 'object' && 'message' in err) throw new Error(`Could not apply promo! ${err.message}`);
+ }
+ }
+
+ return (
+ Your Order
+ {isCartEmpty ? ( +
+
+ Your cart is empty!
+ + Visit + + Product catalog + {' '} + to find good meals :) + +
+
+ ) : (
+ + + Visit + + Product catalog + {' '} + to find good meals :) + +
+ {oldPrice ? (
+ {oldPrice}
+ ) : null}
+
+
+ + Total Price: + {totalPrice} +
+
+ setIsModalShown()}
+ >
+ CLEAR CART
+
+
+
+ {isModalShown && (
+
+
+ )}
+
+
+ Are you sure?
+
+
+
+
+
+
+ );
+}
+
+export default ErrorPage;
diff --git a/src/pages/LoginPage/LoginPage.tsx b/src/pages/LoginPage/LoginPage.tsx
new file mode 100644
index 00000000..bf106686
--- /dev/null
+++ b/src/pages/LoginPage/LoginPage.tsx
@@ -0,0 +1,295 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { useFormik } from 'formik';
+import { motion } from 'framer-motion';
+import { Link, useNavigate } from 'react-router-dom';
+import * as Yup from 'yup';
+
+import togglePassVisibility from './model/passwordToggler';
+import emailIcon from '../../assets/icons/emailIcon.svg';
+import emailIconRed from '../../assets/icons/emailIconRed.svg';
+import lockIcon from '../../assets/icons/LockIcon.svg';
+import lockIconRed from '../../assets/icons/LockIconRed.svg';
+import { ErrorModal } from '../../entities/form/ui';
+import { useLoginUser, useLoginUserDataMutation } from '../../entities/user';
+import { validEmail, validPassword } from '../../shared/const/validationSchemas';
+import { getErrorMessage } from '../../shared/lib/helpers';
+import { useAppSelector, useRevokeAccessRefreshTokens } from '../../shared/lib/hooks';
+import { ILoginUserParams } from '../../shared/types';
+import { ErrorMessage, inputAnimation, pageVariants, svgAnimation } from '../../shared/ui';
+
+function LoginPage() {
+ const [loginUser, { error: loginError, isLoading: loginIsLoading }] = useLoginUser();
+ const [getLoginUserData, { error: loginDataError, isLoading: loginDataIsLoading }] = useLoginUserDataMutation();
+ const revokeTokens = useRevokeAccessRefreshTokens();
+ const { accessToken: oldAccessToken, refreshToken: oldRefreshToken } = useAppSelector((state) => state.userReducer);
+ const navigate = useNavigate();
+
+ const passwordInput = useRef(null);
+
+ const loginErrorMessage = getErrorMessage(loginError);
+ const loginDataErrorMessage = getErrorMessage(loginDataError);
+
+ function handleNavigateBackToLogin() {
+ navigate('/login');
+ }
+
+ async function handleSubmit(userData: ILoginUserParams) {
+ try {
+ const {
+ customer: { id },
+ } = await getLoginUserData(userData).unwrap();
+
+ await loginUser(userData.email, userData.password, id);
+
+ navigate('/');
+ revokeTokens(oldAccessToken, oldRefreshToken);
+ } catch (e) {
+ // console.error(`Error occurred while logging the user! (${e.status})`);
+ }
+ }
+
+ const validationSchema = Yup.object({
+ ...validEmail(),
+ ...validPassword(),
+ });
+
+ const formik = useFormik({
+ initialValues: {
+ email: '',
+ password: '',
+ },
+ validationSchema,
+ onSubmit: handleSubmit,
+ });
+
+ const { handleChange, handleBlur, errors, touched, values, setFieldError } = formik;
+
+ const touchedAndErrorEmail = touched.email && errors.email;
+ const touchedAndErrorPassword = touched.password && errors.password;
+
+ const [enableLogin, setEnableLogin] = useState(false);
+
+ useEffect(() => {
+ if (
+ (touched.email === undefined && values.email === '') ||
+ (touched.password === undefined && values.password === '')
+ ) {
+ setEnableLogin(false);
+ return;
+ }
+ if (errors.email || errors.password) {
+ setEnableLogin(false);
+ return;
+ }
+ if (/\s/.test(values.password as string)) {
+ setFieldError('password', "Password can't contain spaces");
+ } else {
+ setFieldError('password', undefined);
+ }
+ setEnableLogin(true);
+ }, [values, errors, touched, setFieldError]);
+
+ return (
+
+ 
+
+ 404 error
+
+ Sorry, there is no such page for now, or it has never existed...
+ Maybe, you want to check out our main page?
+
+
+ );
+}
+
+export default NavBlock;
diff --git a/src/pages/ProductCatalog/ProductCatalogue.tsx b/src/pages/ProductCatalog/ProductCatalogue.tsx
new file mode 100644
index 00000000..a969f248
--- /dev/null
+++ b/src/pages/ProductCatalog/ProductCatalogue.tsx
@@ -0,0 +1,257 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable react/no-array-index-key */
+import React, { useEffect, useState } from 'react';
+
+import { useCycle } from 'framer-motion';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import { useLocation, useSearchParams } from 'react-router-dom';
+
+import { CATEGORIES, QUERY_FILTER, QUERY_SORT } from './const/constants.ts';
+import encodeQueryState from './lib/helpers/encodeQueryState.ts';
+import parseQueryState from './lib/helpers/parseQueryState.ts';
+import filterCalories from './model/filterCalories.ts';
+import FilterModal from './model/FilterModal';
+import filterWeight from './model/filterWeight.ts';
+import SortingSelector from './model/SortingSelector';
+import CategoriesList from './ui/CategoriesList.tsx';
+import CategoryItem from './ui/CategoryItem.tsx';
+import FilterButton from './ui/FilterButton.tsx';
+import MenuList from './ui/MenuList.tsx';
+import ProductNotFound from './ui/ProductNotFound.tsx';
+import ProductPageHeader from './ui/ProductPageHeader';
+import PromoBanner from './ui/PromoBanner.tsx';
+import { useGetCategoriesQuery, useGetCategoryQuery, useLazyGetProductListQuery } from '../../entities/product';
+import { ProductAttributeNames, ProductSortingFields, ProductSortOrders } from '../../entities/product/types/enums.ts';
+import { CategoryResult, ProductResponse } from '../../entities/product/types/types.ts';
+import SearchInput from '../../features/SearchInput/SearchInput.tsx';
+import { capitalize } from '../../shared/lib/helpers';
+import { useGetPath } from '../../shared/lib/hooks';
+import { Blackout } from '../../shared/ui';
+import LoadingAnimation from '../../shared/ui/LoadingAnimation.tsx';
+import MenuItem from '../../widgets/MenuItem/MenuItem.tsx';
+import getAttribute from '../ProductPage/lib/helpers/getAttribute.ts';
+
+export default function ProductCatalogue() {
+ const path = useGetPath();
+ const urlActiveCat = capitalize(decodeURIComponent(path));
+
+ const { pathname } = useLocation();
+ const [query, setQuery] = useSearchParams();
+ const [isFiltersOpen, onFilterOpen] = useCycle(false, true);
+ const [sortOrder, setSortOrder] = useState(query.get(QUERY_SORT) ?? 'price desc');
+ const [productItems, setProductItems] = useState
+
+ {categories
+ ? [...prevCategories, ...categories].map((item, i, arr) => {
+ const isPrevCat = typeof item === 'string';
+ const name = isPrevCat ? item : item.name.en;
+ const isLast = i === arr.length - 1;
+
+ return (
+
+
+ );
+ })
+ : null}
+
+
+ {productsIsLoading && (
+
+
+ }
+ endMessage={
+
+
+
+ )}
+
+ {!productListData?.results?.length && !rawProductListData?.results?.length && productsIsSuccess ? (
+ You Reached The End!
} + className="grid items-center gap-5 pb-14 lg:gap-6 lg:pb-0" + > + {productListData.results?.map(({ id, name, masterVariant: { prices, images, attributes } }, i) => ( + + ))} + + ) : null} + + + + ); +} diff --git a/src/pages/ProductCatalog/const/constants.ts b/src/pages/ProductCatalog/const/constants.ts new file mode 100644 index 00000000..31cf4c69 --- /dev/null +++ b/src/pages/ProductCatalog/const/constants.ts @@ -0,0 +1,4 @@ +export const QUERY_FILTER = 'filter'; +export const QUERY_SORT = 'sort'; +export const CATEGORIES = '/categories'; +export const MOBILE_WIDTH = 1023; diff --git a/src/pages/ProductCatalog/lib/helpers/encodeQueryState.ts b/src/pages/ProductCatalog/lib/helpers/encodeQueryState.ts new file mode 100644 index 00000000..87b4a215 --- /dev/null +++ b/src/pages/ProductCatalog/lib/helpers/encodeQueryState.ts @@ -0,0 +1,16 @@ +import { FiltersFields } from '../../model/filtersInitialState.ts'; + +/** + * Encodes the query state object to a string. + * + * @param {URLSearchParams} state - The query state object to be encoded. + * @returns {string} - The encoded query state string. + */ +function encodeQueryState(state: FiltersFields): string { + return Object.entries(state) + .filter(([, val]) => Boolean(val)) + .map((el) => el.join('_')) + .join(','); +} + +export default encodeQueryState; diff --git a/src/pages/ProductCatalog/lib/helpers/parseQueryState.ts b/src/pages/ProductCatalog/lib/helpers/parseQueryState.ts new file mode 100644 index 00000000..12610733 --- /dev/null +++ b/src/pages/ProductCatalog/lib/helpers/parseQueryState.ts @@ -0,0 +1,20 @@ +import { FiltersFields, filtersInitialState } from '../../model/filtersInitialState.ts'; + +/** + * Parses the query state from a URL search params object. + * + * @param {URLSearchParams} query - The URL search params object to parse. + * @returns {FiltersFields} - The parsed query state object. + */ +function parseQueryState(query: URLSearchParams): FiltersFields { + const filters = query.get('filter'); + if (!filters) return filtersInitialState; + + const parsed = Object.fromEntries( + filters!.split(',').map((elem) => elem.split('_').map((val) => (val === 'true' ? true : val))), + ); + + return { ...filtersInitialState, ...parsed }; +} + +export default parseQueryState; diff --git a/src/pages/ProductCatalog/model/FilterModal.tsx b/src/pages/ProductCatalog/model/FilterModal.tsx new file mode 100644 index 00000000..ef498687 --- /dev/null +++ b/src/pages/ProductCatalog/model/FilterModal.tsx @@ -0,0 +1,193 @@ +import React, { useCallback, useEffect, useRef } from 'react'; + +import { AnimatePresence, Cycle, motion } from 'framer-motion'; + +import FilterModalCheckbox from './FilterModalCheckbox'; +import FilterModalNumberInput from './FilterModalNumberInput'; +import { FiltersFields, filtersInitialState } from './filtersInitialState.ts'; +import { ProductAttributeNames, useLazyGetProductListQuery } from '../../../entities/product'; +import { MOBILE_WIDTH } from '../const/constants.ts'; + +const initialDesktop = { y: '-63%', x: '40%', scale: 0, opacity: 0 }; +const initialMobile = { y: '-60%', x: '-40%', scale: 0, opacity: 0 }; + +export default function FilterModal(props: { + isFiltersOpen: boolean; + filtersState: FiltersFields; + onFilterOpen: Cycle; + setFiltersState: React.DispatchFilters
+ +
+
+ Show only:
+
+
+ Set max:
+
+
+
+
+
+ universalFilterChanger(!checked, id)}
+ className={`
+ peer/${id}
+ mr-5
+ h-5
+ w-5
+ cursor-pointer
+ appearance-none
+ rounded-md
+ bg-accent
+ `}
+ />
+
+
+ );
+}
diff --git a/src/pages/ProductCatalog/model/FilterModalNumberInput.tsx b/src/pages/ProductCatalog/model/FilterModalNumberInput.tsx
new file mode 100644
index 00000000..7c2a765e
--- /dev/null
+++ b/src/pages/ProductCatalog/model/FilterModalNumberInput.tsx
@@ -0,0 +1,22 @@
+export default function FilterModalNumberInput(props: {
+ id: string;
+ value: string;
+ universalFilterChanger: (value: string | boolean, field: string) => void;
+ text: string;
+}) {
+ const { id, value, universalFilterChanger, text } = props;
+ const placeholder = `${text}...`;
+ return (
+
+
+
+ universalFilterChanger(e.target.value, id)}
+ />
+
+
+ );
+}
diff --git a/src/pages/ProductCatalog/model/SortingSelector.tsx b/src/pages/ProductCatalog/model/SortingSelector.tsx
new file mode 100644
index 00000000..7864a02e
--- /dev/null
+++ b/src/pages/ProductCatalog/model/SortingSelector.tsx
@@ -0,0 +1,36 @@
+export default function SortingSelector(props: {
+ sortOrder: string;
+ onSort: (value: React.SetStateAction
+ Sort by:
+
+
+ );
+}
diff --git a/src/pages/ProductCatalog/model/filterCalories.ts b/src/pages/ProductCatalog/model/filterCalories.ts
new file mode 100644
index 00000000..1c1ef7c1
--- /dev/null
+++ b/src/pages/ProductCatalog/model/filterCalories.ts
@@ -0,0 +1,18 @@
+import { ProductAttributeNames } from '../../../entities/product';
+import { ProductResponse } from '../../../entities/product/types/types.ts';
+import getAttribute from '../../ProductPage/lib/helpers/getAttribute.ts';
+
+/**
+ * Filters the product list based on maximum calories.
+ *
+ * @param {ProductResponse} rawProductListData - The raw product list data.
+ * @param {number} maxCalories - The maximum number of calories.
+ * @returns {ProductResponse[]} - The filtered product list.
+ */
+function filterCalories(rawProductListData: ProductResponse, maxCalories: number) {
+ return rawProductListData.results.filter(
+ (product) => Number(getAttribute(product.masterVariant.attributes, ProductAttributeNames.CALORIES)) < maxCalories,
+ );
+}
+
+export default filterCalories;
diff --git a/src/pages/ProductCatalog/model/filterWeight.ts b/src/pages/ProductCatalog/model/filterWeight.ts
new file mode 100644
index 00000000..6bed2d91
--- /dev/null
+++ b/src/pages/ProductCatalog/model/filterWeight.ts
@@ -0,0 +1,18 @@
+import { ProductAttributeNames } from '../../../entities/product';
+import { ProductResponse } from '../../../entities/product/types/types.ts';
+import getAttribute from '../../ProductPage/lib/helpers/getAttribute.ts';
+
+/**
+ * Filters the raw product list data based on the maximum weight.
+ *
+ * @param {ProductResponse} rawProductListData - The raw product list data to be filtered.
+ * @param {number} maxWeight - The maximum weight to filter the products.
+ * @return {ProductResponse[]} The filtered product list based on the maximum weight.
+ */
+function filterWeight(rawProductListData: ProductResponse, maxWeight: number) {
+ return rawProductListData.results.filter(
+ (product) => Number(getAttribute(product.masterVariant.attributes, ProductAttributeNames.WEIGHT)) < maxWeight,
+ );
+}
+
+export default filterWeight;
diff --git a/src/pages/ProductCatalog/model/filtersInitialState.ts b/src/pages/ProductCatalog/model/filtersInitialState.ts
new file mode 100644
index 00000000..af3848a5
--- /dev/null
+++ b/src/pages/ProductCatalog/model/filtersInitialState.ts
@@ -0,0 +1,19 @@
+export type FiltersFields = {
+ isVegan: boolean;
+ isSpicy: boolean;
+ isPromo: boolean;
+ price: string;
+ calories: string;
+ weight: string;
+ categoryId: string;
+};
+
+export const filtersInitialState: FiltersFields = {
+ isVegan: false,
+ isSpicy: false,
+ isPromo: false,
+ price: '',
+ calories: '',
+ weight: '',
+ categoryId: '',
+};
diff --git a/src/pages/ProductCatalog/ui/CategoriesList.tsx b/src/pages/ProductCatalog/ui/CategoriesList.tsx
new file mode 100644
index 00000000..e37c7935
--- /dev/null
+++ b/src/pages/ProductCatalog/ui/CategoriesList.tsx
@@ -0,0 +1,43 @@
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React from 'react';
+
+interface ICategoryList {
+ children: React.ReactNode;
+ changeActiveCat: (e: React.MouseEvent
+
+ );
+}
+
+export default CategoriesList;
diff --git a/src/pages/ProductCatalog/ui/CategoryItem.tsx b/src/pages/ProductCatalog/ui/CategoryItem.tsx
new file mode 100644
index 00000000..2fa6184d
--- /dev/null
+++ b/src/pages/ProductCatalog/ui/CategoryItem.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+
+import { motion } from 'framer-motion';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+
+interface ICategoryItemProps {
+ item: string;
+ activeCat: string;
+ children?: React.ReactNode | null;
+ index: number;
+}
+
+function CategoryItem({ item, activeCat, index, children = null }: ICategoryItemProps) {
+ const [query] = useSearchParams();
+ const navigate = useNavigate();
+ const { pathname } = useLocation();
+
+ const isActive = activeCat === item;
+ const path = decodeURIComponent(pathname);
+ const name = item.toLowerCase();
+ const isPrevCategory = path.includes(name);
+
+ function goBack() {
+ const itemIndex = path.indexOf(name);
+ const prevCategory = `${path.slice(0, itemIndex)}${name}`;
+
+ navigate({
+ pathname: prevCategory,
+ search: query.toString(),
+ });
+ }
+
+ function goForward() {
+ navigate({
+ pathname: `${pathname}/${item.toLowerCase()}`,
+ search: query.toString(),
+ });
+ }
+
+ function handleClick() {
+ if (activeCat === item) return;
+
+ if (isPrevCategory) {
+ goBack();
+ } else {
+ goForward();
+ }
+ }
+
+ return (
+ - ) => changeActiveCat(e)}
+ className="
+ flex
+ h-8
+ items-center
+ gap-2
+ overflow-y-scroll
+ border-b-[2px]
+ border-separation-line
+ dark:border-dark-separation-line
+ md:h-9
+ "
+ >
+ {children}
+
-
+ {children}
+
+
+ No Products Found
+
+
+ Your search did not match any products.
+
+ Please try again. +
+
+ );
+}
+
+export default ProductNotFound;
diff --git a/src/pages/ProductCatalog/ui/ProductPageHeader.tsx b/src/pages/ProductCatalog/ui/ProductPageHeader.tsx
new file mode 100644
index 00000000..7a3bfc4d
--- /dev/null
+++ b/src/pages/ProductCatalog/ui/ProductPageHeader.tsx
@@ -0,0 +1,8 @@
+export default function ProductPageHeader() {
+ return (
+ + Please try again. +
+
+ );
+}
diff --git a/src/pages/ProductCatalog/ui/PromoBanner.tsx b/src/pages/ProductCatalog/ui/PromoBanner.tsx
new file mode 100644
index 00000000..b5800a12
--- /dev/null
+++ b/src/pages/ProductCatalog/ui/PromoBanner.tsx
@@ -0,0 +1,70 @@
+import { useState } from 'react';
+
+import { AnimatePresence, motion } from 'framer-motion';
+
+const PROMOCODE = 'myLovelyPromoCode';
+
+export default function PromoBanner() {
+ const [showMessage, setShowMessage] = useState(false);
+
+ const handleButtonClick = () => {
+ setShowMessage(true);
+ setTimeout(() => {
+ setShowMessage(false);
+ }, 1000);
+ };
+
+ return (
+ Choose your ideal Meal
+We hope our meals will improve your day :)
+
+
+ );
+}
diff --git a/src/pages/ProductPage/ProductPage.tsx b/src/pages/ProductPage/ProductPage.tsx
new file mode 100644
index 00000000..4d653bdb
--- /dev/null
+++ b/src/pages/ProductPage/ProductPage.tsx
@@ -0,0 +1,148 @@
+import { useEffect, useState } from 'react';
+
+import getAttribute from './lib/helpers/getAttribute.ts';
+import AddWishlistMobile from './ui/AddWishlistMobile.tsx';
+import Allergens from './ui/Allergens.tsx';
+import BackButton from './ui/BackButton.tsx';
+import Description from './ui/Description.tsx';
+import Footer from './ui/Footer.tsx';
+import Header from './ui/Header.tsx';
+import HeaderMobile from './ui/HeaderMobile.tsx';
+import ImageSlider from './ui/ImageSlider';
+import Ingredient from './ui/Ingredient.tsx';
+import IngredientList from './ui/IngredientList.tsx';
+import Price from './ui/Price.tsx';
+import Rating from './ui/Rating.tsx';
+import Title from './ui/Title.tsx';
+import TitleAbout from './ui/TitleAbout.tsx';
+import { ProductAttributeNames, useGetProductQuery } from '../../entities/product';
+import 'swiper/css';
+import { ProductPrice } from '../../entities/product/types/types.ts';
+import { DEFAULT_TITLE } from '../../shared/const';
+import { useGetPath } from '../../shared/lib/hooks';
+import LoadingAnimation from '../../shared/ui/LoadingAnimation.tsx';
+
+export default function ProductPage() {
+ const [rating, setRating] = useState(4.3);
+ const [isSliderOpen, setSliderOpen] = useState(false);
+ const productId = useGetPath();
+ const { data } = useGetProductQuery(productId);
+
+ /// add to cart btn will change to remove from cart an this function will be called
+ // const removeAllFromCart = async () => {
+ // try {
+ // const targetItem = cart?.lineItems.filter((item) => item.productId === productId);
+ // const lineItemId = targetItem[0].id;
+ // const body = {
+ // version: cart?.version || 1,
+ // actions: [
+ // {
+ // action: 'removeLineItem',
+ // lineItemId,
+ // variantId: 1,
+ // },
+ // ],
+ // };
+ // const result = await updateLineItem({ cartId, body }).unwrap();
+ // console.log('updated cart', result.lineItems);
+ // } catch (error) {
+ // console.error(error);
+ // }
+ // };
+
+ const handleSliderOpen = () => {
+ setSliderOpen(true);
+ };
+
+ const handleCloseSlider = () => {
+ setSliderOpen(false);
+ };
+
+ useEffect(() => {
+ if (!data) return;
+ const title = data.name.en;
+ document.title = title;
+ // eslint-disable-next-line consistent-return
+ return () => {
+ document.title = DEFAULT_TITLE;
+ };
+ });
+
+ if (!data)
+ return (
+
+
+ 15% flat off on all items only today!
+
+
+ {showMessage ? (
+
+
+ Text Copied!
+
+
+ ) : (
+
+ {PROMOCODE}
+
+ )}
+
+
+
+
+
+
+
+ );
+
+ const {
+ masterVariant: { attributes, prices, images },
+ name: { en },
+ } = data;
+
+ const {
+ discounted: { value: { centAmount: discountPrice = undefined } = {} } = {},
+ value: { centAmount: currPrice, currencyCode },
+ } = prices.at(0) as ProductPrice;
+
+ const centPrice = discountPrice ?? currPrice;
+ const centOldPrice = discountPrice ? currPrice : null;
+
+ const isSpicy = Boolean(getAttribute(attributes, ProductAttributeNames.IS_SPICY));
+ const isVegan = Boolean(getAttribute(attributes, ProductAttributeNames.IS_VEGAN));
+ const name = en;
+
+ const imgList = images.map((img) => img.url);
+
+ const ingredients = getAttribute(attributes, ProductAttributeNames.INGREDIENTS)?.toString()?.split(', ');
+ const calories = getAttribute(attributes, ProductAttributeNames.CALORIES);
+ const weight = getAttribute(attributes, ProductAttributeNames.WEIGHT);
+ const allergens = getAttribute(attributes, ProductAttributeNames.ALLERGENS);
+
+ return (
+
+
+ );
+}
diff --git a/src/pages/ProductPage/lib/helpers/getAttribute.ts b/src/pages/ProductPage/lib/helpers/getAttribute.ts
new file mode 100644
index 00000000..b0c53955
--- /dev/null
+++ b/src/pages/ProductPage/lib/helpers/getAttribute.ts
@@ -0,0 +1,14 @@
+import { ProductAttribute, ProductAttributeNames } from '../../../../entities/product';
+
+/**
+ * Returns the product attribute object with the specified name 'ingredients'.
+ *
+ * @param {ProductAttribute[]} attribute - An array of product attribute objects.
+ * @param {string} name - An attributes name
+ * @return {ProductAttribute['value']} - The product attribute object with name 'ingredients', or undefined if not found.
+ */
+function getAttribute(attribute: ProductAttribute[], name: ProductAttributeNames): ProductAttribute['value'] {
+ return attribute.find((obj) => obj.name === name)?.value as ProductAttribute['value'];
+}
+
+export default getAttribute;
diff --git a/src/pages/ProductPage/ui/AddWishlistMobile.tsx b/src/pages/ProductPage/ui/AddWishlistMobile.tsx
new file mode 100644
index 00000000..2a876244
--- /dev/null
+++ b/src/pages/ProductPage/ui/AddWishlistMobile.tsx
@@ -0,0 +1,14 @@
+import heart from '../../../assets/icons/heart.svg';
+
+function AddWishlistMobile() {
+ return (
+
+ );
+}
+
+export default AddWishlistMobile;
diff --git a/src/pages/ProductPage/ui/Allergens.tsx b/src/pages/ProductPage/ui/Allergens.tsx
new file mode 100644
index 00000000..cdc0a17c
--- /dev/null
+++ b/src/pages/ProductPage/ui/Allergens.tsx
@@ -0,0 +1,15 @@
+import { capitalize } from '../../../shared/lib/helpers';
+
+export default function Allergens(props: { allergens: string }) {
+ const { allergens } = props;
+ return (
+
+
+
+
+
+
+ <div>
+ <TitleAbout isSpicy={isSpicy} isVegan={isVegan} name={name} weight={weight} calories={calories} />
+ </div>
+
+
+
+
+
+ <>
+
+
+
+ <>
+ {ingredients.map((ing) => (
+
+ ) : null}
+ {typeof allergens === 'string' ?
+
+
+ );
+}
diff --git a/src/pages/ProductPage/ui/BackButton.tsx b/src/pages/ProductPage/ui/BackButton.tsx
new file mode 100644
index 00000000..8907aa71
--- /dev/null
+++ b/src/pages/ProductPage/ui/BackButton.tsx
@@ -0,0 +1,23 @@
+import { useNavigate } from 'react-router-dom';
+
+import arrowLeft from '../../../assets/icons/arrowLeft.svg';
+
+function BackButton() {
+ const navigate = useNavigate();
+
+ function handleBack() {
+ navigate(-1);
+ }
+
+ return (
+
+ );
+}
+
+export default BackButton;
diff --git a/src/pages/ProductPage/ui/Description.tsx b/src/pages/ProductPage/ui/Description.tsx
new file mode 100644
index 00000000..f9187e9e
--- /dev/null
+++ b/src/pages/ProductPage/ui/Description.tsx
@@ -0,0 +1,28 @@
+import { ProductAttribute, ProductAttributeNames } from '../../../entities/product';
+import { capitalize } from '../../../shared/lib/helpers';
+
+interface IDescriptionProps {
+ attributes: ProductAttribute[];
+}
+
+function Description({ attributes }: IDescriptionProps) {
+ return (
+ Allergens
++ {allergens.split(',').map((allergen) => { + return {`${capitalize(allergen)}`}; + })} +
+
+
+ );
+}
+
+export default Description;
diff --git a/src/pages/ProductPage/ui/Footer.tsx b/src/pages/ProductPage/ui/Footer.tsx
new file mode 100644
index 00000000..c35704c0
--- /dev/null
+++ b/src/pages/ProductPage/ui/Footer.tsx
@@ -0,0 +1,136 @@
+import { motion } from 'framer-motion';
+
+import MinusIcon from './MinusIcon';
+import PlusIcon from './PlusIcon';
+import heartAccent from '../../../assets/icons/heart-accent.svg';
+import shoppingCart from '../../../assets/icons/shopping-cart-accent.svg';
+import { useGetCartByIdQuery, useUpdateCartMutation } from '../../../entities/cart';
+import { AddLineItemRequestBody, RemoveLineItemRequestBody } from '../../../entities/cart/types/types.ts';
+import { padZero } from '../../../shared/lib/helpers';
+import { useAppSelector, useGetPath } from '../../../shared/lib/hooks';
+import { LineItem } from '../../../shared/types';
+import { buttonTapAnimation, buttonTransition } from '../../../shared/ui/animations.tsx';
+
+function Footer() {
+ const { cartId } = useAppSelector((state) => state.userReducer);
+ const { data: cart } = useGetCartByIdQuery(cartId);
+ const productId = useGetPath();
+ const [updateLineItem, { isLoading: updateIsLoading }] = useUpdateCartMutation();
+
+ if (!cart) return null;
+
+ const { lineItems } = cart;
+ const currItem = lineItems?.find((item) => item?.productId === productId) as LineItem;
+ const quantity = currItem?.quantity ?? 0;
+ const lineItemId = currItem?.id ?? '';
+
+ const removeOneFromCart = async () => {
+ try {
+ const body: RemoveLineItemRequestBody = {
+ version: cart?.version || 1,
+ actions: [
+ {
+ action: 'removeLineItem',
+ lineItemId,
+ variantId: 1,
+ quantity: 1,
+ },
+ ],
+ };
+
+ updateLineItem({ cartId, body }).unwrap();
+ } catch (e) {
+ // throw new Error(e);
+ }
+ };
+
+ const removeAllFromCart = async () => {
+ try {
+ const body: RemoveLineItemRequestBody = {
+ version: cart?.version || 1,
+ actions: [
+ {
+ action: 'removeLineItem',
+ lineItemId,
+ variantId: 1,
+ },
+ ],
+ };
+ updateLineItem({ cartId, body }).unwrap();
+ } catch (e) {
+ // throw new Error(e);
+ }
+ return null;
+ };
+
+ const addToCart = async () => {
+ const body: AddLineItemRequestBody = {
+ version: cart?.version || 1,
+ actions: [
+ {
+ action: 'addLineItem',
+ productId,
+ variantId: 1,
+ quantity: 1,
+ },
+ ],
+ };
+ try {
+ return await updateLineItem({ cartId, body }).unwrap();
+ } catch (e) {
+ // throw new Error(e);
+ }
+ return null;
+ };
+
+ return (
+ Description
++ {attributes.map((attr, index) => { + if ( + index === 0 || + attr.name === ProductAttributeNames.IS_SPICY || + attr.name === ProductAttributeNames.IS_VEGAN || + attr.name === ProductAttributeNames.ALLERGENS + ) + return null; + return {`${capitalize(attr.name)} - ${attr.value}`}; + })} +
+
+
+ 0 ? removeAllFromCart : addToCart}
+ type="button"
+ className="mt-3 block w-full rounded-md bg-accent-lightest px-4 py-3 text-accent transition-all dark:border-2 dark:border-text-grey dark:bg-dark-bg-primary dark:hover:bg-dark-separation-line md:mt-0 md:w-fit"
+ >
+
+ 
+ {quantity > 0 ? 'Remove from Cart' : 'Add to Cart'}
+
+
+
+ );
+}
+
+export default Footer;
diff --git a/src/pages/ProductPage/ui/Header.tsx b/src/pages/ProductPage/ui/Header.tsx
new file mode 100644
index 00000000..61fec68b
--- /dev/null
+++ b/src/pages/ProductPage/ui/Header.tsx
@@ -0,0 +1,9 @@
+interface IHeaderProps {
+ children: React.ReactElement;
+}
+
+function Header({ children }: IHeaderProps) {
+ return
+
+
+ {padZero(quantity)}
+
+
+
+ {children}
;
+}
+
+export default Header;
diff --git a/src/pages/ProductPage/ui/HeaderMobile.tsx b/src/pages/ProductPage/ui/HeaderMobile.tsx
new file mode 100644
index 00000000..78567afe
--- /dev/null
+++ b/src/pages/ProductPage/ui/HeaderMobile.tsx
@@ -0,0 +1,29 @@
+import spicyIcon from '../../../assets/icons/spicy.svg';
+import veganIcon from '../../../assets/icons/vegan.svg';
+
+interface IHeaderMobileProps {
+ name: string;
+ calories: number | string;
+ weight: number | string;
+ isSpicy: boolean;
+ isVegan: boolean;
+}
+
+function HeaderMobile({ name, calories, weight, isSpicy, isVegan }: IHeaderMobileProps) {
+ return (
+
+
+ {name}
+ {isSpicy || isVegan ? (
+
+
+
+ );
+}
+
+export default HeaderMobile;
diff --git a/src/pages/ProductPage/ui/ImageSlider.tsx b/src/pages/ProductPage/ui/ImageSlider.tsx
new file mode 100644
index 00000000..78086232
--- /dev/null
+++ b/src/pages/ProductPage/ui/ImageSlider.tsx
@@ -0,0 +1,84 @@
+import { motion } from 'framer-motion';
+import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
+import { Navigation, Pagination } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import { buttonTapAnimation, buttonTransition } from '../../../shared/ui/animations.tsx';
+
+interface IImageSlider {
+ isOpen: boolean;
+ imgList: string[];
+ onClose: () => void;
+}
+
+const crossSvg = (
+
+);
+
+export default function ImageSlider({ isOpen, onClose, imgList }: IImageSlider) {
+ if (!isOpen) {
+ return null;
+ }
+
+ return (
+
+ {name}
+ {isSpicy || isVegan ? (
+
+ 
+
+ ) : null}
+
+ {calories} kcal
+{weight} g
+
+
+ );
+}
diff --git a/src/pages/ProductPage/ui/Ingredient.tsx b/src/pages/ProductPage/ui/Ingredient.tsx
new file mode 100644
index 00000000..f19819da
--- /dev/null
+++ b/src/pages/ProductPage/ui/Ingredient.tsx
@@ -0,0 +1,17 @@
+import checkIcon from '../../../assets/icons/check-icon.svg';
+
+interface IIngredientProps {
+ value: string;
+}
+
+function Ingredient({ value }: IIngredientProps) {
+ return (
+
+
+ {imgList.map((img) => (
+
+
+
+ 
+
+
+
+ ))}
+
+
+
+
+ {crossSvg}
+
+
+
+
+ );
+}
+
+export default IngredientList;
diff --git a/src/pages/ProductPage/ui/MinusIcon.tsx b/src/pages/ProductPage/ui/MinusIcon.tsx
new file mode 100644
index 00000000..3b7cd1fd
--- /dev/null
+++ b/src/pages/ProductPage/ui/MinusIcon.tsx
@@ -0,0 +1,13 @@
+export default function MinusIcon() {
+ return (
+
+ );
+}
diff --git a/src/pages/ProductPage/ui/PlusIcon.tsx b/src/pages/ProductPage/ui/PlusIcon.tsx
new file mode 100644
index 00000000..795fabe0
--- /dev/null
+++ b/src/pages/ProductPage/ui/PlusIcon.tsx
@@ -0,0 +1,14 @@
+export default function PlusIcon() {
+ return (
+
+ );
+}
diff --git a/src/pages/ProductPage/ui/Price.tsx b/src/pages/ProductPage/ui/Price.tsx
new file mode 100644
index 00000000..bd04c048
--- /dev/null
+++ b/src/pages/ProductPage/ui/Price.tsx
@@ -0,0 +1,30 @@
+import { calcPriceDiscountPercentage } from '../../../entities/product';
+import formatPrice from '../../../entities/product/lib/helpers/formatPrice.ts';
+import pennieToMoney from '../../../entities/product/lib/helpers/pennieToMoney.ts';
+
+interface IPriceProps {
+ centPrice: number;
+ centOldPrice: number | null;
+ currencyCode: string;
+}
+
+function Price({ centPrice, centOldPrice, currencyCode }: IPriceProps) {
+ const moneyOldPrice = centOldPrice ? pennieToMoney(centOldPrice) : null;
+ const moneyPrice = pennieToMoney(centPrice);
+
+ const corePrice = formatPrice(moneyPrice, currencyCode);
+ const coreOldPrice = moneyOldPrice ? formatPrice(moneyOldPrice, currencyCode) : null;
+ const discountPercentage = moneyOldPrice ? calcPriceDiscountPercentage(moneyOldPrice, moneyPrice) : null;
+
+ return (
+ Ingredients
+-
+ {children}
+
+ {coreOldPrice ? (
+ {coreOldPrice}
+ ) : null}
+
+ );
+}
+
+export default Price;
diff --git a/src/pages/ProductPage/ui/Rating.tsx b/src/pages/ProductPage/ui/Rating.tsx
new file mode 100644
index 00000000..42e225f0
--- /dev/null
+++ b/src/pages/ProductPage/ui/Rating.tsx
@@ -0,0 +1,25 @@
+import StarsRating from 'react-star-rate';
+
+interface IRatingProps {
+ rating: number;
+ setRating: React.Dispatch{corePrice}
+ {discountPercentage ?You save: {discountPercentage}%
: null} +
+
+ );
+}
+
+export default Rating;
diff --git a/src/pages/ProductPage/ui/Title.tsx b/src/pages/ProductPage/ui/Title.tsx
new file mode 100644
index 00000000..2e3d33c8
--- /dev/null
+++ b/src/pages/ProductPage/ui/Title.tsx
@@ -0,0 +1,38 @@
+import { Pagination } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import 'swiper/css';
+import 'swiper/css/pagination';
+
+interface ITitleProps {
+ imgList: string[];
+ name: string;
+ children: React.ReactElement;
+ onClick: () => void;
+}
+
+function Title({ imgList, name, children, onClick }: ITitleProps) {
+ return (
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+
+ {
+ setRating(newRating as number);
+ }}
+ />
+ {rating}
+
+ 2,032 Reviews
+
+
+ {imgList.map((image) => (
+
+ 
+
+ ))}
+
+ {children}
+
+ );
+}
+
+export default Title;
diff --git a/src/pages/ProductPage/ui/TitleAbout.tsx b/src/pages/ProductPage/ui/TitleAbout.tsx
new file mode 100644
index 00000000..bbb1f553
--- /dev/null
+++ b/src/pages/ProductPage/ui/TitleAbout.tsx
@@ -0,0 +1,29 @@
+import spicyIcon from '../../../assets/icons/spicy.svg';
+import veganIcon from '../../../assets/icons/vegan.svg';
+
+interface ITitleAboutProps {
+ name: string;
+ calories: number | string;
+ weight: number | string;
+ isSpicy: boolean;
+ isVegan: boolean;
+}
+
+function TitleAbout({ name, calories, weight, isSpicy, isVegan }: ITitleAboutProps) {
+ return (
+
+
+ {name}
+ {isSpicy || isVegan ? (
+
+
+
+ );
+}
+
+export default TitleAbout;
diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
new file mode 100644
index 00000000..c395d42f
--- /dev/null
+++ b/src/pages/ProfilePage/ProfilePage.tsx
@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import AccountSettings from './model/AccountSettings';
+import AddressesSettings from './model/AddressesSettings';
+import TabSelector from './model/TabSelector';
+import ThemeSelector from './model/ThemeSelector.tsx';
+import UserImage from './model/UserImage';
+import ProfileHeader from './ui/ProfileHeader';
+import { useLazyGetUserQuery } from '../../entities/user';
+import PageBackBtn from '../../features/PageBackBtn/PageBackBtn.tsx';
+import { useAppSelector } from '../../shared/lib/hooks';
+import LoadingAnimation from '../../shared/ui/LoadingAnimation.tsx';
+
+export default function ProfilePage() {
+ const [isAccTabActive, setIsAccTabActive] = useState(true);
+ const { userId } = useAppSelector((state) => state.userReducer);
+ const [getUser, { data }] = useLazyGetUserQuery();
+
+ const memoizedGetUser = useCallback(
+ (_id: string) => {
+ getUser(_id);
+ },
+ [getUser],
+ );
+
+ useEffect(() => {
+ memoizedGetUser(userId);
+ }, [userId, memoizedGetUser]);
+
+ if (!data)
+ return (
+
+ {name}
+ {isSpicy || isVegan ? (
+
+
+
+ ) : null}
+
+ {calories} kcal pre portion
+{weight} g
+
+
+ );
+
+ return (
+
+
+ );
+}
diff --git a/src/pages/ProfilePage/constants/constants.ts b/src/pages/ProfilePage/constants/constants.ts
new file mode 100644
index 00000000..dd15a27e
--- /dev/null
+++ b/src/pages/ProfilePage/constants/constants.ts
@@ -0,0 +1,2 @@
+const MODAL_TIMEOUT = 1500;
+export default MODAL_TIMEOUT;
diff --git a/src/pages/ProfilePage/model/AccountSettings.tsx b/src/pages/ProfilePage/model/AccountSettings.tsx
new file mode 100644
index 00000000..720fb859
--- /dev/null
+++ b/src/pages/ProfilePage/model/AccountSettings.tsx
@@ -0,0 +1,14 @@
+import ChangePassword from './ChangePassword';
+import ChangePersonalData from './ChangePersonalData';
+import { IUser } from '../../../shared/types';
+
+export default function AccountSettings(props: { userData: IUser }) {
+ const { userData } = props;
+
+ return (
+
+
+
+
+ );
+}
diff --git a/src/pages/ProfilePage/model/AddressListItem.tsx b/src/pages/ProfilePage/model/AddressListItem.tsx
new file mode 100644
index 00000000..9a0529d5
--- /dev/null
+++ b/src/pages/ProfilePage/model/AddressListItem.tsx
@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+
+import { Cycle } from 'framer-motion';
+
+import greenPencil from '../../../assets/icons/pencilIconGreen.svg';
+import { useDeleteUserDataMutation, useLazyGetUserQuery } from '../../../entities/user';
+import UserUpdateActions from '../../../entities/user/types/enums.ts';
+import { IUser } from '../../../shared/types';
+import MODAL_TIMEOUT from '../constants/constants.ts';
+import { AddressObj } from '../types/profilePageTypes';
+import AddressView from '../ui/AddressView';
+import InfoModal from '../ui/InfoModal';
+
+export default function AddressListItem(props: {
+ index: number;
+ address: AddressObj;
+ userData: IUser;
+ setEditedAddress: React.Dispatch
+
+ );
+}
diff --git a/src/pages/ProfilePage/model/AddressesDefault.tsx b/src/pages/ProfilePage/model/AddressesDefault.tsx
new file mode 100644
index 00000000..da106526
--- /dev/null
+++ b/src/pages/ProfilePage/model/AddressesDefault.tsx
@@ -0,0 +1,125 @@
+import { useState } from 'react';
+
+import { motion, useCycle } from 'framer-motion';
+
+import icon from '../../../assets/icons/CityIcon.svg';
+import { useLazyGetUserQuery, useUpdateUserAddressMutation } from '../../../entities/user';
+import UserUpdateActions from '../../../entities/user/types/enums.ts';
+import { IUser } from '../../../shared/types';
+import { inputAnimation, svgAnimation } from '../../../shared/ui';
+import MODAL_TIMEOUT from '../constants/constants.ts';
+import InfoModal from '../ui/InfoModal';
+
+export default function AddressesDefault(props: { userData: IUser }) {
+ const { userData } = props;
+ const { addresses, defaultBillingAddressId, defaultShippingAddressId, version, id } = userData;
+
+ const [billAddress, setBillAddress] = useState(defaultBillingAddressId);
+ const [shipAddress, setShipAddress] = useState(defaultShippingAddressId);
+ const [msgModalShown, setMsgModalShown] = useCycle(false, true);
+ const [msgModalText, setMsgModalText] = useState('');
+ const [updateAddress] = useUpdateUserAddressMutation();
+ const [getUser] = useLazyGetUserQuery();
+
+ async function saveClickHandler() {
+ try {
+ await updateAddress({
+ body: {
+ version,
+ actions: [
+ {
+ action: UserUpdateActions.SET_DEFAULT_SHIPPING_ADDRESS,
+ addressId: shipAddress,
+ },
+ {
+ action: UserUpdateActions.SET_DEFAULT_BILLING_ADDRESS,
+ addressId: billAddress,
+ },
+ ],
+ },
+ id,
+ });
+ setMsgModalText('Your addresses has been saved! :)');
+ setMsgModalShown();
+ setTimeout(() => setMsgModalShown(), MODAL_TIMEOUT);
+ getUser(id);
+ } catch (e) {
+ setMsgModalText('Something went wrong! :(');
+ setMsgModalShown();
+ setTimeout(() => setMsgModalShown(), MODAL_TIMEOUT);
+ }
+ }
+
+ const options = addresses?.map((opt) => {
+ const { id: addressId, country, city, streetName, postalCode } = opt;
+ const string = `${country}, ${city}, ${streetName}, ${postalCode}`;
+ return (
+
+ );
+ });
+
+ return (
+
+
+ {`Address ${(index + 1).toString().padStart(2, '0')}`}
+
+ Are you sure?
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/ProfilePage/model/AddressesEditModal.tsx b/src/pages/ProfilePage/model/AddressesEditModal.tsx
new file mode 100644
index 00000000..335e9677
--- /dev/null
+++ b/src/pages/ProfilePage/model/AddressesEditModal.tsx
@@ -0,0 +1,282 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { useFormik } from 'formik';
+import { Cycle, motion } from 'framer-motion';
+import * as Yup from 'yup';
+
+import cityIcon from '../../../assets/icons/CityIcon.svg';
+import cityIconRed from '../../../assets/icons/CityIconRed.svg';
+import countryIcon from '../../../assets/icons/CountryIcon.svg';
+import postalCodeIcon from '../../../assets/icons/postalCodeIcon.svg';
+import postalCodeIconRed from '../../../assets/icons/postalCodeIconRed.svg';
+import streetIcon from '../../../assets/icons/StreetIcon.svg';
+import streetIconRed from '../../../assets/icons/StreetIconRed.svg';
+import {
+ IUpdateUserDataParams,
+ useLazyGetUserQuery,
+ UserUpdateActions,
+ useUpdateUserAddressMutation,
+} from '../../../entities/user';
+import { validCity, validPostalCode, validStreet } from '../../../shared/const/validationSchemas';
+import { ErrorMessage, inputAnimation, svgAnimation } from '../../../shared/ui';
+import MODAL_TIMEOUT from '../constants/constants.ts';
+import { AddressObj } from '../types/profilePageTypes';
+import InfoModal from '../ui/InfoModal';
+
+export default function AddressesEditModal(props: {
+ id: string | undefined;
+ version: number | undefined;
+ editedAddress: AddressObj;
+ setIsModalOpen: Cycle;
+}) {
+ const { editedAddress, setIsModalOpen, version, id } = props;
+ const { id: addressId, country, city, streetName, postalCode } = editedAddress;
+ const initData = useMemo(() => [country, city, streetName, postalCode], [country, city, streetName, postalCode]);
+ const [selectedCountry, setSelectedCountry] = useState(country);
+ const [isEditBtnBlocked, setIsEditBtnBlocked] = useState(true);
+ const [msgModalShown, setMsgModalShown] = useState(false);
+ const [msgModalText, setMsgModalText] = useState('');
+ const [getUser] = useLazyGetUserQuery();
+ const [updateAddress] = useUpdateUserAddressMutation();
+
+ const validationSchema = Yup.object({
+ city: validCity().city,
+ streetName: validStreet().streetName,
+ postalCode: validPostalCode(selectedCountry).postalCode,
+ });
+
+ const formik = useFormik({
+ initialValues: {
+ country,
+ city,
+ streetName,
+ postalCode,
+ },
+ validationSchema,
+ onSubmit: () => {},
+ });
+
+ const { handleChange, handleBlur, errors, touched, values } = formik;
+ const touchedAndErrorCity = touched.city && errors.city;
+ const touchedAndErrorStreet = touched.streetName && errors.streetName;
+ const touchedAndErrorPostalCode = touched.postalCode && errors.postalCode;
+
+ useEffect(() => {
+ if (
+ initData.every((item) => {
+ return Object.values(values).includes(item);
+ })
+ ) {
+ setIsEditBtnBlocked(true);
+ return;
+ }
+ if (errors.city || errors.streetName || errors.postalCode) {
+ setIsEditBtnBlocked(true);
+ return;
+ }
+ setIsEditBtnBlocked(false);
+ }, [values, errors, touched, initData]);
+
+ async function handleEditBtn() {
+ const getBody = (): IUpdateUserDataParams => {
+ if (!version) throw new Error('Version is not defined!');
+
+ if (addressId) {
+ return {
+ version,
+ actions: [
+ {
+ action: UserUpdateActions.CHANGE_ADDRESS,
+ addressId,
+ address: {
+ country: values.country,
+ city: values.city,
+ streetName: values.streetName,
+ postalCode: values.postalCode,
+ },
+ },
+ ],
+ };
+ }
+
+ return {
+ version,
+ actions: [
+ {
+ action: UserUpdateActions.ADD_ADDRESS,
+ address: {
+ country: values.country,
+ city: values.city,
+ streetName: values.streetName,
+ postalCode: values.postalCode,
+ },
+ },
+ ],
+ };
+ };
+ try {
+ await updateAddress({ body: getBody(), id: id as string });
+ setMsgModalText('Your addresses saved! :)');
+ setMsgModalShown(true);
+ setTimeout(() => {
+ setMsgModalShown(false);
+ setIsModalOpen();
+ }, MODAL_TIMEOUT);
+ getUser(id as string);
+ } catch (e) {
+ setMsgModalText('Something went wrong! :(');
+ setMsgModalShown(true);
+ setTimeout(() => setMsgModalShown(false), MODAL_TIMEOUT);
+ }
+ }
+
+ window.scrollTo(0, 250);
+ return (
+
+
+ Select default shipping address:
+
+
+
+
+ Select default billing address:
+
+
+
+ );
+}
diff --git a/src/pages/ProfilePage/model/AddressesList.tsx b/src/pages/ProfilePage/model/AddressesList.tsx
new file mode 100644
index 00000000..2f7d2903
--- /dev/null
+++ b/src/pages/ProfilePage/model/AddressesList.tsx
@@ -0,0 +1,44 @@
+import { Cycle } from 'framer-motion';
+
+import AddressListItem from './AddressListItem';
+import { IUser } from '../../../shared/types';
+import { AddressObj } from '../types/profilePageTypes';
+
+export default function AddressesList(props: {
+ userData: IUser;
+ setEditedAddress: React.Dispatch
+
+ Edit your address:
+
+
+
+
+
+
+
+
+
+
+
+
+ {isModalOpen ? (
+
+
+ ) : null}
+
+
+ );
+}
diff --git a/src/pages/ProfilePage/model/ChangePassword.tsx b/src/pages/ProfilePage/model/ChangePassword.tsx
new file mode 100644
index 00000000..251a5489
--- /dev/null
+++ b/src/pages/ProfilePage/model/ChangePassword.tsx
@@ -0,0 +1,158 @@
+import { useEffect, useState } from 'react';
+
+import { useFormik } from 'formik';
+import { motion } from 'framer-motion';
+import * as Yup from 'yup';
+
+import lockIcon from '../../../assets/icons/LockIcon.svg';
+import lockIconRed from '../../../assets/icons/LockIconRed.svg';
+import { useLazyGetUserQuery, useLoginUser, useUpdateUserPasswordMutation } from '../../../entities/user';
+import { validPassword } from '../../../shared/const/validationSchemas';
+import { useAppSelector, useRevokeAccessRefreshTokens } from '../../../shared/lib/hooks';
+import { IUser } from '../../../shared/types';
+import { ErrorMessage, inputAnimation, svgAnimation } from '../../../shared/ui';
+import MODAL_TIMEOUT from '../constants/constants.ts';
+import InfoModal from '../ui/InfoModal';
+
+const validationSchema = Yup.object({
+ currPass: validPassword().password,
+ newPass: validPassword().password,
+});
+
+export default function ChangePassword(props: { userData: IUser }) {
+ const { userData } = props;
+ const { id, version } = userData;
+ const [isSaveBlocked, setIsSaveBlocked] = useState(true);
+ const [msgModalShown, setMsgModalShown] = useState(false);
+ const [msgModalText, setMsgModalText] = useState('Sometext');
+ const [getUser] = useLazyGetUserQuery();
+ const [updatePassword] = useUpdateUserPasswordMutation();
+ const [loginUser] = useLoginUser();
+ const revokeTokens = useRevokeAccessRefreshTokens();
+
+ const { accessToken: oldAccessToken, refreshToken: oldRefreshToken } = useAppSelector((state) => state.userReducer);
+
+ const formik = useFormik({
+ initialValues: {
+ currPass: '',
+ newPass: '',
+ },
+ validationSchema,
+ onSubmit: () => {},
+ });
+
+ const { handleChange, handleBlur, errors, touched, values } = formik;
+ const touchedAndErrorCurrPassword = touched.currPass && errors.currPass;
+ const touchedAndErrorNewPassword = touched.newPass && errors.newPass;
+
+ useEffect(() => {
+ if (
+ (touched.currPass === undefined && values.currPass === '') ||
+ (touched.newPass === undefined && values.newPass === '')
+ ) {
+ setIsSaveBlocked(true);
+ return;
+ }
+ if (errors.currPass || errors.newPass) {
+ setIsSaveBlocked(true);
+ return;
+ }
+ setIsSaveBlocked(false);
+ }, [values, errors, touched, setIsSaveBlocked]);
+
+ async function saveHandler() {
+ try {
+ await updatePassword({
+ version,
+ currentPassword: values.currPass,
+ newPassword: values.newPass,
+ });
+
+ setMsgModalText(`Password was changed! :)`);
+ setMsgModalShown(true);
+ setTimeout(() => {
+ setMsgModalShown(false);
+ }, MODAL_TIMEOUT);
+ setIsSaveBlocked(true);
+
+ await loginUser(userData.email, values.newPass, id);
+ revokeTokens(oldAccessToken, oldRefreshToken);
+ getUser(id);
+ } catch (e) {
+ setMsgModalText(`Oh snap! Something went wrong :(`);
+ setMsgModalShown(true);
+ setTimeout(() => setMsgModalShown(false), MODAL_TIMEOUT);
+ }
+ }
+
+ return (
+
+
+ );
+}
diff --git a/src/pages/ProfilePage/model/ChangePersonalData.tsx b/src/pages/ProfilePage/model/ChangePersonalData.tsx
new file mode 100644
index 00000000..da26da31
--- /dev/null
+++ b/src/pages/ProfilePage/model/ChangePersonalData.tsx
@@ -0,0 +1,236 @@
+import { useEffect, useState } from 'react';
+
+import { useFormik } from 'formik';
+import { motion } from 'framer-motion';
+import * as Yup from 'yup';
+
+import calendarIcon from '../../../assets/icons/CalendarIcon.svg';
+import calendarIconRed from '../../../assets/icons/CalendarIconRed.svg';
+import emailIcon from '../../../assets/icons/emailIcon.svg';
+import emailIconRed from '../../../assets/icons/emailIconRed.svg';
+import userIcon from '../../../assets/icons/UserIcon.svg';
+import userIconRed from '../../../assets/icons/UserIconRed.svg';
+import { useLazyGetUserQuery, useUpdateUserDataMutation } from '../../../entities/user';
+import UserUpdateActions from '../../../entities/user/types/enums.ts';
+import { validBirthDate, validEmail, validName } from '../../../shared/const/validationSchemas';
+import { IUser } from '../../../shared/types';
+import { ErrorMessage, inputAnimation, svgAnimation } from '../../../shared/ui';
+import MODAL_TIMEOUT from '../constants/constants.ts';
+import InfoModal from '../ui/InfoModal';
+
+const validationSchema = Yup.object({
+ ...validEmail(),
+ ...validBirthDate(),
+ firstName: validName().name,
+ lastName: validName().name,
+});
+
+export default function ChangePersonalData(props: { userData: IUser }) {
+ const [updateUser] = useUpdateUserDataMutation();
+
+ const { userData } = props;
+ const { id, email, firstName, lastName, dateOfBirth, version } = userData;
+
+ const formik = useFormik({
+ initialValues: {
+ email,
+ firstName,
+ lastName,
+ dateOfBirth,
+ },
+ validationSchema,
+ onSubmit: () => {},
+ });
+
+ const initData = Object.values([email, firstName, lastName, dateOfBirth]);
+
+ const { handleChange, handleBlur, errors, touched, values } = formik;
+ const [isSaveBlocked, setIsSaveBlocked] = useState(true);
+ const [msgModalShown, setMsgModalShown] = useState(false);
+ const [msgModalText, setMsgModalText] = useState('');
+ const [getUser] = useLazyGetUserQuery();
+
+ const touchedAndErrorEmail = touched.email && errors.email;
+ const touchedAndErrorFirstName = touched.firstName && errors.firstName;
+ const touchedAndErrorLastName = touched.lastName && errors.lastName;
+ const touchedAndErrorBirthDate = touched.dateOfBirth && errors.dateOfBirth;
+
+ async function saveClickHandler() {
+ try {
+ await updateUser({
+ version,
+ actions: [
+ {
+ action: UserUpdateActions.CHANGE_EMAIL,
+ email: values.email,
+ },
+ {
+ action: UserUpdateActions.SET_FIRST_NAME,
+ firstName: values.firstName,
+ },
+ {
+ action: UserUpdateActions.SET_LAST_NAME,
+ lastName: values.lastName,
+ },
+ {
+ action: UserUpdateActions.SET_BIRTH_DATE,
+ dateOfBirth: values.dateOfBirth,
+ },
+ ],
+ });
+
+ setMsgModalText('Your data saved! :)');
+ setMsgModalShown(true);
+ setTimeout(() => setMsgModalShown(false), MODAL_TIMEOUT);
+ getUser(id);
+ } catch (e) {
+ setMsgModalText('Something went wrong! :(');
+ setMsgModalShown(true);
+ setTimeout(() => setMsgModalShown(false), MODAL_TIMEOUT);
+ }
+ }
+
+ useEffect(() => {
+ if (
+ initData.every((item) => {
+ return Object.values(values).includes(item);
+ })
+ ) {
+ setIsSaveBlocked(true);
+ return;
+ }
+ if (errors.firstName || errors.lastName || errors.dateOfBirth || errors.email) {
+ setIsSaveBlocked(true);
+ return;
+ }
+ setIsSaveBlocked(false);
+ }, [values, errors, touched, initData]);
+
+ return (
+ Password
+
+
+ Current password
+
+
+
+ New password
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/ProfilePage/model/TabSelector.tsx b/src/pages/ProfilePage/model/TabSelector.tsx
new file mode 100644
index 00000000..e7e9e4bd
--- /dev/null
+++ b/src/pages/ProfilePage/model/TabSelector.tsx
@@ -0,0 +1,27 @@
+const greenBorder = 'border-b-2 border-accent';
+const borderGrey = 'border-b-2 border-separation-line dark:border-dark-separation-line';
+
+export default function TabSelector(props: {
+ isAccTabActive: boolean;
+ setIsAccTabActive: React.DispatchPersonal data
+
+
+ Email
+
+
+
+ Name
+
+
+
+ Surname
+
+
+
+ Birth date
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/ProfilePage/model/ThemeSelector.tsx b/src/pages/ProfilePage/model/ThemeSelector.tsx
new file mode 100644
index 00000000..30c73da9
--- /dev/null
+++ b/src/pages/ProfilePage/model/ThemeSelector.tsx
@@ -0,0 +1,130 @@
+import { useState } from 'react';
+
+import { motion } from 'framer-motion';
+
+import moon from '../../../assets/icons/moon.svg';
+import sun from '../../../assets/icons/sun.svg';
+
+const themeToggleVariants = {
+ light: { x: 0 },
+ dark: { x: '190%' },
+};
+
+export default function ThemeSelector() {
+ const [defTheme, setDefTheme] = useState(localStorage.sushiDefThemeUsage === 'true');
+ const [theme, setTheme] = useState(localStorage.sushiTheme === 'light');
+
+ function handleThemeSelect() {
+ if (theme) {
+ setTheme(false);
+ localStorage.sushiTheme = 'dark';
+ document.documentElement.classList.add('dark');
+ document.body.classList.add('dark:bg-dark-bg-primary');
+ } else {
+ setTheme(true);
+ localStorage.sushiTheme = 'light';
+ document.body.classList.remove('dark:bg-dark-bg-primary');
+ document.documentElement.classList.remove('dark');
+ }
+ }
+
+ function handleDefTheme() {
+ setDefTheme((prev: boolean) => {
+ if (!prev) {
+ localStorage.sushiDefThemeUsage = true;
+ localStorage.removeItem('sushiTheme');
+ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+ document.documentElement.classList.add('dark');
+ setTheme(false);
+ } else {
+ document.documentElement.classList.remove('dark');
+ setTheme(true);
+ }
+ } else {
+ localStorage.sushiDefThemeUsage = false;
+ localStorage.sushiTheme = 'light';
+ document.documentElement.classList.remove('dark');
+ setTheme(true);
+ }
+ return !prev;
+ });
+ }
+
+ return (
+
+
+ );
+}
diff --git a/src/pages/ProfilePage/model/UserImage.tsx b/src/pages/ProfilePage/model/UserImage.tsx
new file mode 100644
index 00000000..f4b1354f
--- /dev/null
+++ b/src/pages/ProfilePage/model/UserImage.tsx
@@ -0,0 +1,29 @@
+import pencilIcon from '../../../assets/icons/pencilIcon.svg';
+import { getFullName } from '../../../entities/user';
+import { IUser } from '../../../shared/types';
+import UserIcon from '../../../shared/ui/UserIcon';
+
+export default function UserImage(props: { userData: IUser }) {
+ const { userData } = props;
+ const { firstName, lastName, email } = userData;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/ProfilePage/types/profilePageTypes.ts b/src/pages/ProfilePage/types/profilePageTypes.ts
new file mode 100644
index 00000000..812ce7ea
--- /dev/null
+++ b/src/pages/ProfilePage/types/profilePageTypes.ts
@@ -0,0 +1,7 @@
+export type AddressObj = {
+ id?: string;
+ country: string;
+ city: string;
+ streetName: string;
+ postalCode: string;
+};
diff --git a/src/pages/ProfilePage/ui/AddressView.tsx b/src/pages/ProfilePage/ui/AddressView.tsx
new file mode 100644
index 00000000..d7599c59
--- /dev/null
+++ b/src/pages/ProfilePage/ui/AddressView.tsx
@@ -0,0 +1,72 @@
+import { motion } from 'framer-motion';
+
+import cityIcon from '../../../assets/icons/CityIcon.svg';
+import countryIcon from '../../../assets/icons/CountryIcon.svg';
+import postalCodeIcon from '../../../assets/icons/postalCodeIcon.svg';
+import streetIcon from '../../../assets/icons/StreetIcon.svg';
+import { svgAnimation } from '../../../shared/ui';
+import { AddressObj } from '../types/profilePageTypes';
+
+function getCountry(country: string) {
+ switch (country) {
+ case 'US':
+ return 'USA';
+ case 'DE':
+ return 'Germany';
+ default:
+ return 'Ukraine';
+ }
+}
+
+export default function AddressView(props: { address: AddressObj }) {
+ const { address } = props;
+ const { country, city, streetName, postalCode } = address;
+ return (
+
+
+
+
+
+ {getFullName(firstName, lastName)}
+{email}
+
+
+ );
+}
diff --git a/src/pages/ProfilePage/ui/InfoModal.tsx b/src/pages/ProfilePage/ui/InfoModal.tsx
new file mode 100644
index 00000000..94617bba
--- /dev/null
+++ b/src/pages/ProfilePage/ui/InfoModal.tsx
@@ -0,0 +1,45 @@
+import { AnimatePresence, motion } from 'framer-motion';
+
+export default function InfoModal(props: { msgModalShown: boolean; msgModalText: string }) {
+ const { msgModalShown, msgModalText } = props;
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/RegPage/RegPage.tsx b/src/pages/RegPage/RegPage.tsx
new file mode 100644
index 00000000..e84d2908
--- /dev/null
+++ b/src/pages/RegPage/RegPage.tsx
@@ -0,0 +1,170 @@
+import { useCallback, useState } from 'react';
+
+import { motion } from 'framer-motion';
+
+import prepareDataForUpload from './lib/helpers';
+import useMultistepForm from './lib/hooks';
+import { RegStepFour, RegStepOne, RegStepThree, RegStepTwo } from './model';
+import { IFormData, UpdateDataParams } from './types';
+import CirclesWrapper from './ui/CirclesWrapper.tsx';
+import NavBlock from './ui/NavBlock.tsx';
+import { ErrorModal, SuccessModal } from '../../entities/form/ui';
+import { useLoginUser, useSignUpMutation } from '../../entities/user';
+import { getErrorMessage } from '../../shared/lib/helpers';
+import { ISignUpAddress } from '../../shared/types';
+import { pageVariants } from '../../shared/ui';
+
+const initVals: IFormData = {
+ email: '',
+ password: '',
+ firstName: '',
+ lastName: '',
+ dateOfBirth: '',
+ sameBillShip: true,
+ billSetDefault: true,
+ shipSetDefault: true,
+ addresses: [{} as ISignUpAddress, {} as ISignUpAddress],
+ billingAddresses: [0],
+ shippingAddresses: [0],
+};
+
+export default function RegPage() {
+ const [formData, setFormData] = useState(initVals);
+ const [isNextEnabled, setIsNextEnabled] = useState(false);
+ const [isFormSubmitted, setIsFormSubmitted] = useState(false);
+ const [loginUser] = useLoginUser();
+ const [signUpUser, { isSuccess, error, isLoading }] = useSignUpMutation();
+
+ const errorMessage = getErrorMessage(error);
+
+ const enableNext = useCallback(
+ (arg: boolean) => {
+ setIsNextEnabled(arg);
+ },
+ [setIsNextEnabled],
+ );
+
+ const updateData = useCallback(
+ (fieldsOrCallback: UpdateDataParams) => {
+ setFormData((prevState) => {
+ if (typeof fieldsOrCallback === 'function') {
+ return fieldsOrCallback(prevState);
+ }
+
+ return { ...prevState, ...fieldsOrCallback };
+ });
+ },
+ [setFormData],
+ );
+
+ const { email, password, firstName, lastName, dateOfBirth, sameBillShip, addresses, billSetDefault, shipSetDefault } =
+ formData;
+
+ const { isFirstStep, isLastStep, formLength, reStartForm, currentStepIndex, currForm, back, next } = useMultistepForm(
+ [
+ User information
+Here you can edit public information about yourself.
+
+
+ )}
+ {currForm}
+
+
+ {sameBillShip ? `Set as default billing & shipping address` : 'Set as default billing address'}
+
+
+ {!sameBillShip ? (
+
+
+
+
+ ) : null}
+
+
+ {sameBillShip ? `Set as default billing & shipping address` : 'Set as default shipping address'}
+
+
+ + as a billing and a shipping +
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/RegPage/ui/CirclesWrapper.tsx b/src/pages/RegPage/ui/CirclesWrapper.tsx
new file mode 100644
index 00000000..ae5a3652
--- /dev/null
+++ b/src/pages/RegPage/ui/CirclesWrapper.tsx
@@ -0,0 +1,31 @@
+import { motion } from 'framer-motion';
+
+import CheckCircle from './CheckCircle';
+
+const titles = ['Email & Password', 'Name & Birth', 'Country & City', 'PC & Street'];
+
+export default function CirclesWrapper(props: {
+ currStep: number;
+ quantity: number;
+ sameBillShip: boolean;
+ currentStepIndex: number;
+}) {
+ const { currStep, quantity, currentStepIndex, sameBillShip } = props;
+ const circles = Array.from({ length: quantity }, (_, i) => (
+
+ {status === 'done' ?
+ + {title} +
++ Already have an account? + + Log in + +
+ +
+
+
+
+ );
+}
+
+Input.defaultProps = {
+ disabled: false,
+ type: 'text',
+};
diff --git a/src/shared/ui/LoadingAnimation.tsx b/src/shared/ui/LoadingAnimation.tsx
new file mode 100644
index 00000000..fd3a62a3
--- /dev/null
+++ b/src/shared/ui/LoadingAnimation.tsx
@@ -0,0 +1,192 @@
+import { motion } from 'framer-motion';
+
+export default function LoadingAnimation() {
+ const firstSushi = {
+ initial: { pathLength: 0 },
+ animate: { pathLength: 1 },
+ transition: { duration: 0.4 },
+ };
+ return (
+
+
+ );
+
+ const { attributes, prices, images } = data.masterVariant;
+ const {
+ discounted: { value: { centAmount: discountPrice = undefined } = {} } = {},
+ value: { centAmount: currPrice, currencyCode },
+ } = prices.at(0) as ProductPrice;
+
+ const centPrice = discountPrice ?? currPrice;
+ const centOldPrice = discountPrice ? currPrice : null;
+
+ const corePrice = formatPrice(pennieToMoney(centPrice), currencyCode);
+ const oldPrice = centOldPrice ? formatPrice(pennieToMoney(centOldPrice), currencyCode) : null;
+
+ const name = data.name.en;
+ const imgUrl = images[0].url as string;
+ const calories = getAttribute(attributes, ProductAttributeNames.CALORIES);
+ const weight = getAttribute(attributes, ProductAttributeNames.WEIGHT);
+
+ return (
+
+
+
+ 
+
+
+
+
+
+ + {name} +
+
+ {calories}kcal
+ {weight} g
+
+ {oldPrice ? (
+
+ {oldPrice}
+
+ ) : null}
+
+ + {corePrice} +
+
+
+
+
+
+
+ {padZero(quantity)}
+
+
+ {
+ animationEndHandler();
+ }}
+ />
+
+
+
+
+ + {LOGO_NAME.map((letter, index) => { + return ( + // eslint-disable-next-line react/no-array-index-key + + {letter} + + ); + })} +
+ +
+
+
+
+ ![]()
setIsLoading(false)}
+ loading="lazy"
+ className={`${
+ isLoading ? 'h-full w-48 opacity-0' : 'opacity-100'
+ } inline-block h-full max-w-[50%] flex-none rounded-2xl object-cover transition-all duration-300 ease-bounce md:w-[160px]`}
+ src={image}
+ alt={name}
+ />
+ {isSpicy || isVegan ? (
+
+
+
+ ) : null}
+
+
+
+
+
+ {name}
+
+
+ {calories} kcal
+{weight} g
+
+ {
+ setRating(rating);
+ }}
+ />
+
+ {rating}
+
+ {oldPrice ? (
+ {oldPrice}
+ ) : null}
+
+ {corePrice}
+-
+
-
+
+ {({ isActive, isPending }) => ( + +++ )} +Our menu +
+ -
+
+ {({ isActive, isPending }) => ( + +++ )} ++ {!!cartItemsCount && ( + ++ {cartItemsCount} + + )} +Cart +
+ -
+
+ {({ isActive, isPending }) => ( + +++ )} +Contacts +
+