+
+ );
+}
+
+export default AboutTabs;
diff --git a/src/components/AboutUs/AboutTabs/Description/Description.test.tsx b/src/components/AboutUs/AboutTabs/Description/Description.test.tsx
new file mode 100644
index 0000000..d0671e7
--- /dev/null
+++ b/src/components/AboutUs/AboutTabs/Description/Description.test.tsx
@@ -0,0 +1,27 @@
+import { render } from '@testing-library/react';
+import Description from './Description';
+import { studentAboutUsMock } from '../../../../__mocks__/AboutTabsMock';
+
+describe('Test Description component', () => {
+ test('Should render component with student information', () => {
+ const { getByText } = render(-
+ {studentDataTabs.map((student, ind) => {
+ const isActive = activeTab === ind;
+ return (
+
+
+ );
+}
+
+export default Description;
diff --git a/src/components/AboutUs/AboutTabs/Description/description.module.scss b/src/components/AboutUs/AboutTabs/Description/description.module.scss
new file mode 100644
index 0000000..f990f98
--- /dev/null
+++ b/src/components/AboutUs/AboutTabs/Description/description.module.scss
@@ -0,0 +1,128 @@
+@import '../../../../styles/common';
+
+.root {
+ max-width: 80%;
+ margin-bottom: 6rem;
+ font-size: 4rem;
+ line-height: 1.1;
+
+ @media (max-width: 960px) {
+ max-width: 100%;
+ }
+
+ @media (max-width: 650px) {
+ display: none;
+ }
+
+ &__title {
+ font-size: 4rem;
+ margin-bottom: 2rem;
+ }
+
+ &__about {
+ margin-bottom: 6rem;
+ }
+
+ &__contribution {
+ width: calc(66% + 2rem);
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ margin-left: auto;
+
+ @media (max-width: 960px) {
+ padding-right: 0;
+ margin-left: unset;
+ width: 100%;
+ align-items: end;
+ align-items: flex-start;
+ }
+ }
+
+ &__contributionTitle {
+ margin-bottom: 2rem;
+ font-weight: 600;
+ }
+
+ &__item {
+ position: relative;
+ margin-bottom: 0.5rem;
+ padding-left: 3.5rem;
+
+ &::before {
+ content: '';
+ position: absolute;
+ width: 1.5rem;
+ height: 1.5rem;
+ border-radius: 50%;
+ background-color: $primary;
+ top: 1.5rem;
+ left: 0;
+ }
+ }
+}
+
+.bodyMobile {
+ display: none;
+ font-size: 3rem;
+ line-height: 1.2;
+
+ @media (max-width: 650px) {
+ display: flex;
+ flex-direction: column;
+ height: 0;
+ opacity: 0;
+
+ &.isNotHide {
+ opacity: 1;
+ height: 100%;
+ }
+ }
+
+ @media (max-width: 480px) {
+ font-size: 2.4rem;
+ }
+
+ &__title {
+ margin-bottom: 1rem;
+
+ @media (max-width: 650px) {
+ font-size: 3rem;
+ }
+
+ @media (max-width: 480px) {
+ font-size: 2.4rem;
+ }
+ }
+
+ &__about {
+ margin-bottom: 4rem;
+ }
+
+ &__contribution {
+ margin-bottom: 1rem;
+ font-weight: 600;
+ }
+
+ &__item {
+ position: relative;
+ margin-bottom: 0.5rem;
+ padding-left: 2rem;
+
+ &::before {
+ content: '';
+ position: absolute;
+ width: 1rem;
+ height: 1rem;
+ border-radius: 50%;
+ background-color: $primary;
+ top: 1.8rem;
+ left: 0;
+ transform: translateY(-50%);
+
+ @media (max-width: 480px) {
+ top: 1.5rem;
+ }
+ }
+ }
+}
diff --git a/src/components/AboutUs/AboutTabs/Description/index.ts b/src/components/AboutUs/AboutTabs/Description/index.ts
new file mode 100644
index 0000000..c6c8a1e
--- /dev/null
+++ b/src/components/AboutUs/AboutTabs/Description/index.ts
@@ -0,0 +1,2 @@
+import Description from './Description';
+export { Description };
diff --git a/src/components/AboutUs/AboutTabs/Tab/Tab.test.tsx b/src/components/AboutUs/AboutTabs/Tab/Tab.test.tsx
new file mode 100644
index 0000000..16fd327
--- /dev/null
+++ b/src/components/AboutUs/AboutTabs/Tab/Tab.test.tsx
@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react';
+import Tab from './Tab';
+import { studentAboutUsMock } from '../../../../__mocks__/AboutTabsMock';
+
+describe('Test Tab component in About-us', () => {
+ test('Should render Tab component', () => {
+ render(About {myName}
+{textAbout}
+
+
+
+ {myName}'s Contribution
+
+ -
+ {student.body.recommendations.map((recc, indx) => {
+ return (
+
- + {recc} + + ); + })} +
+
+
+ 
): void => {
+ const target = e.target;
+ if (target instanceof HTMLImageElement) {
+ target.src = IMG_DEFAULT;
+ }
+ }}
+ />
+
+ {student.stName}
+{student.role}
+ {`About ${stName}`}
+
+
+ GitHub
+
+
+ {title}
+ )} + {paragraphs && + paragraphs.map((content) => ( ++ {content} +
+ ))} + {result && ( ++ Result: + {result} +
+ )} + + ); +} + +export default ContentBlock; diff --git a/src/components/AboutUs/ContentBlock/contentBlock.module.scss b/src/components/AboutUs/ContentBlock/contentBlock.module.scss new file mode 100644 index 0000000..09f8450 --- /dev/null +++ b/src/components/AboutUs/ContentBlock/contentBlock.module.scss @@ -0,0 +1,45 @@ +@import '../../../styles/common/'; + +.root__paragraph, +.root__subtitle { + display: inline-block; + font-weight: 300; + line-height: 1.2; + margin-bottom: 2.5rem; + + &:last-child { + margin-bottom: 0; + } +} + +.root__paragraph { + span { + font-weight: 400; + padding: 0 1rem 0.3rem; + background-color: rgba($light, 0.3); + border-radius: 1.2rem; + margin-right: 1rem; + + @media (max-width: 650px) { + padding: 0 0.8rem 0.2rem; + border-radius: 1rem; + } + } +} + +.root__subtitle { + padding-top: 6rem; + font-weight: 500; + text-decoration: underline; + text-decoration-thickness: 3px; + text-underline-offset: 5px; + + @media (max-width: 650px) { + padding-top: 4rem; + } + + @media (max-width: 480px) { + padding-top: 3rem; + margin-bottom: 2rem; + } +} diff --git a/src/components/AboutUs/ContentBlock/index.ts b/src/components/AboutUs/ContentBlock/index.ts new file mode 100644 index 0000000..0e3760b --- /dev/null +++ b/src/components/AboutUs/ContentBlock/index.ts @@ -0,0 +1,2 @@ +import ContentBlock from './ContentBlock'; +export { ContentBlock }; diff --git a/src/components/AboutUs/RSLogo/RSLogo.tsx b/src/components/AboutUs/RSLogo/RSLogo.tsx new file mode 100644 index 0000000..93ac7f6 --- /dev/null +++ b/src/components/AboutUs/RSLogo/RSLogo.tsx @@ -0,0 +1,25 @@ +import { ReactElement } from 'react'; +import RS_Logo from '../../../assets/icons/rs_logo.svg'; + +import styles from './rsLogo.module.scss'; + +const SCHOOL_LINK = 'https://rs.school'; + +function RSLogo(): ReactElement { + return ( + + ); +} + +export default RSLogo; diff --git a/src/components/AboutUs/RSLogo/index.ts b/src/components/AboutUs/RSLogo/index.ts new file mode 100644 index 0000000..618ab1a --- /dev/null +++ b/src/components/AboutUs/RSLogo/index.ts @@ -0,0 +1,2 @@ +import RSLogo from './RSLogo'; +export { RSLogo }; diff --git a/src/components/AboutUs/RSLogo/rsLogo.module.scss b/src/components/AboutUs/RSLogo/rsLogo.module.scss new file mode 100644 index 0000000..e2fb886 --- /dev/null +++ b/src/components/AboutUs/RSLogo/rsLogo.module.scss @@ -0,0 +1,99 @@ +@import '../../../styles/common'; + +.root { + position: relative; + width: 100%; + height: 40rem; + display: flex; + justify-content: center; + align-items: center; + padding: 3rem 0; + + @media (max-width: 540px) { + height: 36rem; + } + + @media (max-width: 480px) { + height: 32rem; + } + + @media (max-width: 440px) { + height: 30rem; + } + + &__link { + position: relative; + max-width: 60rem; + width: 100%; + filter: drop-shadow(0px 9px 9px rgba($primary, 0.5)); + transition: all 0.2s; + + &:hover { + filter: drop-shadow(0px 9px 9px rgba($primary, 0)); + } + + svg { + width: 45%; + transition: all 0.2s; + } + + .link { + position: relative; + width: 100%; + height: 12rem; + display: flex; + justify-content: center; + align-items: center; + background-color: $primary; + color: $light-primary; + border-radius: 15rem; + text-decoration: none; + + transition: all 0.2s; + + .shape { + width: 80%; + display: flex; + position: absolute; + z-index: -10; + + &__item { + width: 100%; + height: 20rem; + background-color: $primary; + border-radius: 20rem; + + transition: all 0.2s; + } + } + + &:hover { + background-color: $primary-hover; + + .shape__item { + background-color: $primary-hover; + } + + svg { + width: 44.8%; + } + } + + @media (max-width: 540px) { + height: 10rem; + + .shape__item { + height: 16rem; + } + } + + @media (max-width: 440px) { + height: 8rem; + + .shape__item { + height: 14rem; + } + } + } + } +} diff --git a/src/components/AboutUs/TeamProcess/TeamProcess.test.tsx b/src/components/AboutUs/TeamProcess/TeamProcess.test.tsx new file mode 100644 index 0000000..b928095 --- /dev/null +++ b/src/components/AboutUs/TeamProcess/TeamProcess.test.tsx @@ -0,0 +1,17 @@ +import { render } from '@testing-library/react'; +import TeamProcess from './TeamProcess'; +import { teamworkText } from '../../../constant/about-teamwork'; + +describe('Test TeamProcess component', () => { + it('Should correctly displays headings and paragraphs.', () => { + const { getByText } = render(
+
+ );
+}
+
+export default TeamProcess;
diff --git a/src/components/AboutUs/TeamProcess/index.ts b/src/components/AboutUs/TeamProcess/index.ts
new file mode 100644
index 0000000..52027e9
--- /dev/null
+++ b/src/components/AboutUs/TeamProcess/index.ts
@@ -0,0 +1,2 @@
+import TeamProcess from './TeamProcess';
+export { TeamProcess };
diff --git a/src/components/AboutUs/TeamProcess/teamProcess.module.scss b/src/components/AboutUs/TeamProcess/teamProcess.module.scss
new file mode 100644
index 0000000..47c8b53
--- /dev/null
+++ b/src/components/AboutUs/TeamProcess/teamProcess.module.scss
@@ -0,0 +1,35 @@
+@import '../../../styles/common';
+
+.root {
+ padding: 5rem 5rem 7rem;
+ background-color: $primary;
+ color: $light-primary;
+ border-radius: 4rem;
+ font-size: 4rem;
+ line-height: 1.1;
+ display: flex;
+ flex-direction: column;
+
+ &__title {
+ margin-bottom: 6rem;
+ font-weight: 500;
+
+ @media (max-width: 650px) {
+ margin-bottom: 4rem;
+ }
+ }
+
+ @media (max-width: 800px) {
+ padding: 5rem 3rem 5rem;
+ }
+
+ @media (max-width: 650px) {
+ font-size: 3rem;
+ line-height: 1.2;
+ }
+
+ @media (max-width: 480px) {
+ font-size: 2.4rem;
+ line-height: 1.2;
+ }
+}
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
new file mode 100644
index 0000000..4f5a659
--- /dev/null
+++ b/src/components/App/App.tsx
@@ -0,0 +1,6 @@
+import { ReactElement } from 'react';
+import { Router } from '../../router/Router';
+
+export default function App(): ReactElement {
+ return Teamwork & Process
+ + {content.map((textBlock) => ( +
+
+ );
+}
+
+export default Breadcrumbs;
diff --git a/src/components/Breadcrumbs/breadcrumbs.module.scss b/src/components/Breadcrumbs/breadcrumbs.module.scss
new file mode 100644
index 0000000..f52a293
--- /dev/null
+++ b/src/components/Breadcrumbs/breadcrumbs.module.scss
@@ -0,0 +1,32 @@
+@import 'src/styles/common';
+
+.crumbs {
+ width: 100%;
+ text-align: left;
+ margin-bottom: 4rem;
+
+ @media all and (max-width: 768px) {
+ margin-bottom: 2rem;
+ }
+
+ &__list {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ }
+
+ &__link {
+ @include font(regular, p3, $dark);
+ text-decoration: none;
+
+ transition: all 0.2s;
+
+ &:hover {
+ opacity: 0.5;
+ }
+ }
+
+ &__separator {
+ white-space: pre-wrap;
+ }
+}
\ No newline at end of file
diff --git a/src/components/Breadcrumbs/index.ts b/src/components/Breadcrumbs/index.ts
new file mode 100644
index 0000000..d5ba605
--- /dev/null
+++ b/src/components/Breadcrumbs/index.ts
@@ -0,0 +1,3 @@
+import Breadcrumbs from './Breadcrumbs';
+
+export { Breadcrumbs };
diff --git a/src/components/Filters/CategoryFilter/CategoryFilter.tsx b/src/components/Filters/CategoryFilter/CategoryFilter.tsx
new file mode 100644
index 0000000..d4e537b
--- /dev/null
+++ b/src/components/Filters/CategoryFilter/CategoryFilter.tsx
@@ -0,0 +1,51 @@
+import React, { ReactElement, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import classnames from 'classnames';
+import { selectCategories } from '../../../store/catalog/selectors';
+import { useAppDispatch } from '../../../store/store';
+import { categoriesThunk, productListThunk } from '../../../store/catalog/thunks';
+import { SearchParams } from '../../../types/enums';
+import { changeParams, getSearchParams } from '../../../utils';
+import { FilterTypeProps } from '../types';
+import { CategoryItem } from './CategoryItem';
+
+import styles from './categoryFilter.module.scss';
+
+function CategoryFilter({ searchParams, setSearchParams, className }: FilterTypeProps): ReactElement {
+ const categories = useSelector(selectCategories);
+ const dispatch = useAppDispatch();
+
+ useEffect(() => {
+ if (categories.length === 0) {
+ dispatch(categoriesThunk());
+ }
+ }, [categories, dispatch]);
+
+ function handleClick(event: React.MouseEvent-
+
- + + Home + / + + +
- + + Catalog + {category && / } + + + {category && ( +
- + + {isSubcategory ? parentCategory?.label : category.label} + {isSubcategory && / } + + + )} + {isSubcategory && ( +
- + {category?.label} + + )} +
+
+ );
+}
+
+export default CategoryFilter;
diff --git a/src/components/Filters/CategoryFilter/CategoryItem/CategoryItem.tsx b/src/components/Filters/CategoryFilter/CategoryItem/CategoryItem.tsx
new file mode 100644
index 0000000..a9fbdc0
--- /dev/null
+++ b/src/components/Filters/CategoryFilter/CategoryItem/CategoryItem.tsx
@@ -0,0 +1,25 @@
+import React, { ReactElement } from 'react';
+import { IFilterItem } from '../../types';
+
+import styles from './categoryItem.module.scss';
+import classnames from 'classnames';
+
+interface CategoryItemProps extends IFilterItem {
+ onClick: (event: React.MouseEvent-
+ {categories.map((item) => (
+
-
+
+
+ ))}
+
+
+ );
+}
+
+export default CheckboxFilter;
diff --git a/src/components/Filters/CheckboxFilter/checkboxFilter.module.scss b/src/components/Filters/CheckboxFilter/checkboxFilter.module.scss
new file mode 100644
index 0000000..8ea88bc
--- /dev/null
+++ b/src/components/Filters/CheckboxFilter/checkboxFilter.module.scss
@@ -0,0 +1,55 @@
+@import 'src/styles/common';
+
+.filter {
+ &__header {
+ @include accordion-header();
+ }
+
+ &__title {
+ @include font(semibold, p1, $dark);
+
+ &_close {
+ font-weight: bold;
+ }
+ }
+
+ &__icon {
+ @include accordion-icon();
+ background-image: url('../../../assets/icons/arrow-right.svg');
+
+ &_down {
+ transform: rotate(90deg);
+ }
+
+ &_up {
+ transform: rotate(-90deg);
+ }
+ }
+
+ &__form {
+ @include filter();
+ padding: 1rem 0 3rem;
+ }
+
+ &__item {
+ @include check-field();
+
+ span {
+ transition: opacity 0.2s;
+ }
+
+ &:not(:last-child) {
+ margin-bottom: 1.5rem;
+ }
+
+ &:hover {
+ span {
+ opacity: 0.6;
+ }
+ }
+ }
+
+ &__input {
+ @include checkbox();
+ }
+}
\ No newline at end of file
diff --git a/src/components/Filters/CheckboxFilter/index.ts b/src/components/Filters/CheckboxFilter/index.ts
new file mode 100644
index 0000000..3cdf7bc
--- /dev/null
+++ b/src/components/Filters/CheckboxFilter/index.ts
@@ -0,0 +1,3 @@
+import CheckboxFilter from './CheckboxFilter';
+
+export { CheckboxFilter };
diff --git a/src/components/Filters/ColorFilter/ColorFilter.tsx b/src/components/Filters/ColorFilter/ColorFilter.tsx
new file mode 100644
index 0000000..a308fb7
--- /dev/null
+++ b/src/components/Filters/ColorFilter/ColorFilter.tsx
@@ -0,0 +1,66 @@
+import { ChangeEvent, ReactElement, useState } from 'react';
+import classnames from 'classnames';
+import { SearchParams } from '../../../types/enums';
+import { changeParams } from '../../../utils';
+import { colors } from '../../../constant';
+import { FilterTypeProps } from '../types';
+
+import styles from './colorFilter.module.scss';
+
+function ColorFilter({ searchParams, setSearchParams, className }: FilterTypeProps): ReactElement {
+ const [isOpen, setIsOpen] = useState(true);
+
+ function handleChange(event: ChangeEvent setIsOpen(!isOpen)}>
+
+ {isOpen && (
+
+ )}
+ {name}
+ +
+
+ );
+}
+
+export default ColorFilter;
diff --git a/src/components/Filters/ColorFilter/colorFilter.module.scss b/src/components/Filters/ColorFilter/colorFilter.module.scss
new file mode 100644
index 0000000..3958aa7
--- /dev/null
+++ b/src/components/Filters/ColorFilter/colorFilter.module.scss
@@ -0,0 +1,88 @@
+@import 'src/styles/common';
+
+.color {
+ &__header {
+ @include accordion-header();
+ }
+
+ &__title {
+ @include font(semibold, p1, $dark);
+
+ &_close {
+ font-weight: bold;
+ }
+ }
+
+ &__icon {
+ @include accordion-icon();
+ background-image: url('../../../assets/icons/arrow-right.svg');
+
+ &_down {
+ transform: rotate(90deg);
+ }
+
+ &_up {
+ transform: rotate(-90deg);
+ }
+ }
+
+ &__form {
+ @include filter();
+ padding: 1rem 0 3rem;
+ }
+
+ &__item {
+ @include check-field();
+ position: relative;
+ width: 100%;
+ padding: 1rem;
+ border: 0.1rem solid $bullet-grey;
+
+ transition: border 0.2s;
+
+ &:not(:last-child) {
+ margin-bottom: 1rem;
+ }
+
+ &:hover {
+ border: 1px solid rgba($dark, 1);
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ right: 1rem;
+ width: 1rem;
+ height: 1rem;
+ background-color: $green;
+ border-radius: 100%;
+ transform: scale(0);
+ opacity: 0;
+ transition: all 0.1s ease-in;
+ }
+
+ &_active {
+ border-color: $dark;
+
+ &::after {
+ opacity: 1;
+ transform: scale(1);
+ }
+ }
+ }
+
+ &__color {
+ display: inline-block;
+ width: 2rem;
+ height: 2rem;
+ border-radius: 100%;
+ border: 0.1rem solid transparent;
+ }
+
+ &__input {
+ position: absolute;
+ visibility: hidden;
+ opacity: 0;
+ z-index: -1;
+ }
+}
\ No newline at end of file
diff --git a/src/components/Filters/ColorFilter/index.ts b/src/components/Filters/ColorFilter/index.ts
new file mode 100644
index 0000000..118bf03
--- /dev/null
+++ b/src/components/Filters/ColorFilter/index.ts
@@ -0,0 +1,3 @@
+import ColorFilter from './ColorFilter';
+
+export { ColorFilter };
diff --git a/src/components/Filters/Filters.tsx b/src/components/Filters/Filters.tsx
new file mode 100644
index 0000000..3bd9642
--- /dev/null
+++ b/src/components/Filters/Filters.tsx
@@ -0,0 +1,75 @@
+import { ReactElement } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { PriceFilter } from './PriceFilter';
+import { ColorFilter } from './ColorFilter';
+import { CheckboxFilter } from './CheckboxFilter';
+import { productListThunk } from '../../store/catalog/thunks';
+import { useAppDispatch } from '../../store/store';
+import { changeParams, getSearchParams } from '../../utils';
+import { SearchParams } from '../../types/enums';
+import { FiltersProps } from './types';
+import { brands, sizes } from '../../constant';
+
+import styles from './filters.module.scss';
+
+function Filters({ className, onClick }: FiltersProps): ReactElement {
+ const [searchParams, setSearchParams] = useSearchParams();
+ const dispatch = useAppDispatch();
+
+ function showResult(): void {
+ changeParams(setSearchParams, '1', SearchParams.Page);
+ dispatch(productListThunk({ params: getSearchParams(searchParams), list: [] }));
+ onClick();
+ }
+
+ function resetFilters(): void {
+ changeParams(setSearchParams, '', SearchParams.PriceFrom);
+ changeParams(setSearchParams, '', SearchParams.PriceTo);
+ changeParams(setSearchParams, '', SearchParams.Brand);
+ changeParams(setSearchParams, '', SearchParams.Color);
+ changeParams(setSearchParams, '', SearchParams.Size);
+
+ showResult();
+ }
+
+ return (
+ setIsOpen(!isOpen)}>
+
+ {isOpen && (
+
+ )}
+ Color
+ +
+
+ );
+}
+
+export default Filters;
diff --git a/src/components/Filters/PriceFilter/PriceFilter.tsx b/src/components/Filters/PriceFilter/PriceFilter.tsx
new file mode 100644
index 0000000..6bdc3e8
--- /dev/null
+++ b/src/components/Filters/PriceFilter/PriceFilter.tsx
@@ -0,0 +1,72 @@
+import { ChangeEvent, ReactElement, useEffect, useState } from 'react';
+import classnames from 'classnames';
+import { SearchParams } from '../../../types/enums';
+import { useDebounce } from '../../../hooks';
+import { changeParams } from '../../../utils';
+import { FilterTypeProps } from '../types';
+
+import styles from './priceFilter.module.scss';
+
+function PriceFilter({ searchParams, setSearchParams, className }: FilterTypeProps): ReactElement {
+ const [from, setFrom] = useState(searchParams.get(SearchParams.PriceFrom) || '');
+ const [to, setTo] = useState(searchParams.get(SearchParams.PriceTo) || '');
+ const [isOpen, setIsOpen] = useState(true);
+
+ const debounceChangeParams = useDebounce(changeParams, 400);
+
+ function handleChange(event: ChangeEvent-
+
-
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+
+
+
+
+
+
+ );
+}
+
+export default PriceFilter;
diff --git a/src/components/Filters/PriceFilter/index.ts b/src/components/Filters/PriceFilter/index.ts
new file mode 100644
index 0000000..f99d398
--- /dev/null
+++ b/src/components/Filters/PriceFilter/index.ts
@@ -0,0 +1,3 @@
+import PriceFilter from './PriceFilter';
+
+export { PriceFilter };
diff --git a/src/components/Filters/PriceFilter/priceFilter.module.scss b/src/components/Filters/PriceFilter/priceFilter.module.scss
new file mode 100644
index 0000000..7da33c9
--- /dev/null
+++ b/src/components/Filters/PriceFilter/priceFilter.module.scss
@@ -0,0 +1,60 @@
+@import 'src/styles/common';
+
+.price {
+ width: 100%;
+
+ &__header {
+ @include accordion-header();
+ }
+
+ &__title {
+ @include font(semibold, p1, $dark);
+
+ &_close {
+ font-weight: bold;
+ }
+ }
+
+ &__icon {
+ @include accordion-icon();
+ background-image: url('../../../assets/icons/arrow-right.svg');
+
+ &_down {
+ transform: rotate(90deg);
+ }
+
+ &_up {
+ transform: rotate(-90deg);
+ }
+ }
+
+ &__form {
+ @include filter();
+ flex-direction: row;
+ padding: 1rem 0 3rem;
+ }
+
+ &__item {
+ border: 0.1rem solid $dark;
+
+ &:last-child {
+ border-left-color: transparent;
+ }
+ }
+
+ &__input {
+ width: 100%;
+ border: none;
+ padding: 1rem;
+ background-color: transparent;
+
+ &::placeholder {
+ @include font(reguler, p1, $placeholder-grey);
+ opacity: 0.7;
+ }
+
+ &:focus {
+ background-color: rgba($primary, 0.1);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/Filters/filters.module.scss b/src/components/Filters/filters.module.scss
new file mode 100644
index 0000000..1af9e3b
--- /dev/null
+++ b/src/components/Filters/filters.module.scss
@@ -0,0 +1,49 @@
+@import 'src/styles/common';
+
+.filters {
+ &__list {
+ width: 100%;
+ }
+
+ &__item {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ border-top: 1px solid $dark;
+
+ &:last-child {
+ border-bottom: 1px solid $dark;
+ }
+ }
+
+ &__wrapper {
+ padding-top: 3rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
+
+ &__btn {
+ @include font(semibold, h2, $dark);
+ width: 100%;
+ height: 80px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: $border-radius-btn;
+ background-color: $btn-grey;
+ transition: background-color 0.3s ease-in-out;
+
+ &:focus,
+ &:hover {
+ background-color: $btn-dark-grey;
+ }
+ }
+
+ &__results {
+ @include btn-primary();
+ width: 100%;
+ margin-bottom: 2rem;
+ }
+}
\ No newline at end of file
diff --git a/src/components/Filters/index.ts b/src/components/Filters/index.ts
new file mode 100644
index 0000000..2a727c1
--- /dev/null
+++ b/src/components/Filters/index.ts
@@ -0,0 +1,3 @@
+import Filters from './Filters';
+
+export { Filters };
diff --git a/src/components/Filters/types/index.ts b/src/components/Filters/types/index.ts
new file mode 100644
index 0000000..4fdc34f
--- /dev/null
+++ b/src/components/Filters/types/index.ts
@@ -0,0 +1,32 @@
+import { SetURLSearchParams } from 'react-router-dom';
+import { SearchParams } from '../../../types/enums.ts';
+
+export interface IFilterItem {
+ label: string;
+ value: string;
+}
+
+export interface IColorFilterItem extends IFilterItem {
+ color: string;
+}
+
+export interface ICategoryFilterItem extends IFilterItem {
+ parent: string | null;
+}
+
+export interface FiltersProps {
+ onClick: () => void;
+ className?: string;
+}
+
+export interface FilterTypeProps {
+ searchParams: URLSearchParams;
+ setSearchParams: SetURLSearchParams;
+ className?: string;
+}
+
+export interface CheckboxFilterProps extends FilterTypeProps {
+ field: SearchParams;
+ filters: IFilterItem[];
+ name: string;
+}
diff --git a/src/components/Footer/Footer.test.tsx b/src/components/Footer/Footer.test.tsx
new file mode 100644
index 0000000..d997dc5
--- /dev/null
+++ b/src/components/Footer/Footer.test.tsx
@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { Footer } from '.';
+
+jest.mock('../../services/sdk/product/methods', () => {});
+jest.mock('../../constant', () => 'en-US');
+
+describe('Test Footer component', () => {
+ beforeEach(() => {
+ render(
+ setIsOpen(!isOpen)}>
+
+ {isOpen && (
+
+ )}
+ Price
+ +
+
+
+
+
+ Menu
+
+
+ {!isAuthPage && (
+
+ )}
+
+
+
+
+
+
+
+ ,
+ "container":
+
+
,
+ "debug": [Function],
+ "findAllByAltText": [Function],
+ "findAllByDisplayValue": [Function],
+ "findAllByLabelText": [Function],
+ "findAllByPlaceholderText": [Function],
+ "findAllByRole": [Function],
+ "findAllByTestId": [Function],
+ "findAllByText": [Function],
+ "findAllByTitle": [Function],
+ "findByAltText": [Function],
+ "findByDisplayValue": [Function],
+ "findByLabelText": [Function],
+ "findByPlaceholderText": [Function],
+ "findByRole": [Function],
+ "findByTestId": [Function],
+ "findByText": [Function],
+ "findByTitle": [Function],
+ "getAllByAltText": [Function],
+ "getAllByDisplayValue": [Function],
+ "getAllByLabelText": [Function],
+ "getAllByPlaceholderText": [Function],
+ "getAllByRole": [Function],
+ "getAllByTestId": [Function],
+ "getAllByText": [Function],
+ "getAllByTitle": [Function],
+ "getByAltText": [Function],
+ "getByDisplayValue": [Function],
+ "getByLabelText": [Function],
+ "getByPlaceholderText": [Function],
+ "getByRole": [Function],
+ "getByTestId": [Function],
+ "getByText": [Function],
+ "getByTitle": [Function],
+ "queryAllByAltText": [Function],
+ "queryAllByDisplayValue": [Function],
+ "queryAllByLabelText": [Function],
+ "queryAllByPlaceholderText": [Function],
+ "queryAllByRole": [Function],
+ "queryAllByTestId": [Function],
+ "queryAllByText": [Function],
+ "queryAllByTitle": [Function],
+ "queryByAltText": [Function],
+ "queryByDisplayValue": [Function],
+ "queryByLabelText": [Function],
+ "queryByPlaceholderText": [Function],
+ "queryByRole": [Function],
+ "queryByTestId": [Function],
+ "queryByText": [Function],
+ "queryByTitle": [Function],
+ "rerender": [Function],
+ "unmount": [Function],
+}
+`;
diff --git a/src/components/LoginForm/index.ts b/src/components/LoginForm/index.ts
new file mode 100644
index 0000000..a9b2be4
--- /dev/null
+++ b/src/components/LoginForm/index.ts
@@ -0,0 +1,2 @@
+import LoginForm from './LoginForm';
+export { LoginForm };
diff --git a/src/components/LoginForm/loginForm.module.scss b/src/components/LoginForm/loginForm.module.scss
new file mode 100644
index 0000000..946c738
--- /dev/null
+++ b/src/components/LoginForm/loginForm.module.scss
@@ -0,0 +1,10 @@
+@import 'src/styles/common';
+
+.form {
+ display: flex;
+ flex-direction: column;
+
+ &__password {
+ margin-bottom: 7rem;
+ }
+}
\ No newline at end of file
diff --git a/src/components/ProductsList/ProductCard/ProductCard.tsx b/src/components/ProductsList/ProductCard/ProductCard.tsx
new file mode 100644
index 0000000..c3a9f3e
--- /dev/null
+++ b/src/components/ProductsList/ProductCard/ProductCard.tsx
@@ -0,0 +1,92 @@
+import { memo, ReactElement, MouseEvent, useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import classnames from 'classnames';
+import { PATH } from '../../../router/constants/paths';
+import { Page } from '../../../router/types';
+import { IProduct } from '../../../types/interfaces';
+import { updateCartThunk } from '../../../store/cart/thunks';
+import { selectCart, selectCartLoadingStatus } from '../../../store/cart/selectors';
+import { useAppDispatch } from '../../../store/store';
+import { formatPrice } from '../../../utils';
+import { Button } from '../../shared/Button';
+import { Loader } from '../../shared/Loader';
+
+import styles from './productCard.module.scss';
+
+interface ProductItemProps {
+ item: IProduct;
+ className?: string;
+}
+
+function ProductCard({ item, className }: ProductItemProps): ReactElement {
+ const { productId, title, artist, medium, dimensions, price, discountPrice, images } = item;
+ const cart = useSelector(selectCart);
+
+ const [isloading, setIsloading] = useState(false);
+ const cartStatus = useSelector(selectCartLoadingStatus);
+
+ const dispatch = useAppDispatch();
+
+ const isProductInCart = cart.lineItems.filter((item) => item.productId === productId).length > 0;
+
+ useEffect(() => {
+ if (cartStatus !== 'loading') {
+ setIsloading(false);
+ }
+ }, [cartStatus]);
+
+ function addToCart(event: MouseEvent
+
+
+
+
+ {title}
+{artist}
+
+
+ {medium}
+{dimensions}
+
+
+ {discountPrice ? formatPrice(discountPrice) : formatPrice(price)}
+
+ {discountPrice ? formatPrice(price) : ''}
+
+
+ : isProductInCart ? 'In Cart' : 'Add to Cart'}
+ handleClick={(event): void => addToCart(event)}
+ className={styles.card__button}
+ disabled={isProductInCart}
+ />
+ -
+ {productList.map((item) => (
+
No items found┗(^o^ )┓三
+ )}
+
+ {error &&
+
+
+ );
+}
+
+export default GreetingTitle;
diff --git a/src/components/Profile/GreetingTitle/greetingTitle.module.scss b/src/components/Profile/GreetingTitle/greetingTitle.module.scss
new file mode 100644
index 0000000..5ee0ded
--- /dev/null
+++ b/src/components/Profile/GreetingTitle/greetingTitle.module.scss
@@ -0,0 +1,26 @@
+.greeting {
+ display: flex;
+ gap: 1rem;
+ margin-bottom: 4rem;
+ flex-wrap: wrap;
+
+ &__ava {
+ width: 4rem;
+ height: 4rem;
+ background-image: url('/images/profile-ava.jpg');
+ background-repeat: no-repeat;
+ background-size: contain;
+ border-radius: 50%;
+ }
+
+ &__title {
+ font-size: 4rem;
+ line-height: 4.2rem;
+ }
+
+ &__subtitle {
+ flex-basis: 100%;
+ padding-top: 1rem;
+ line-height: 2.2rem;
+ }
+}
\ No newline at end of file
diff --git a/src/components/Profile/GreetingTitle/index.ts b/src/components/Profile/GreetingTitle/index.ts
new file mode 100644
index 0000000..b40efd6
--- /dev/null
+++ b/src/components/Profile/GreetingTitle/index.ts
@@ -0,0 +1,2 @@
+import GreetingTitle from './GreetingTitle';
+export { GreetingTitle };
diff --git a/src/components/Profile/Tabs/FirstTab/FirstTab.tsx b/src/components/Profile/Tabs/FirstTab/FirstTab.tsx
new file mode 100644
index 0000000..fb697d5
--- /dev/null
+++ b/src/components/Profile/Tabs/FirstTab/FirstTab.tsx
@@ -0,0 +1,186 @@
+import styles from './firstTab.module.scss';
+
+import classNames from 'classnames';
+import { Formik, FormikErrors } from 'formik';
+import { Input } from '../../../../types/enums';
+import { InputField } from '../../../shared/InputField';
+import { ReactElement, useEffect } from 'react';
+import { dateMYValidate, emailValidate, lastNameValidate, nameValidate } from '../../../../utils/validation';
+import { IUser } from '../../../../types/interfaces';
+import { UserDateOfBirth } from './UserDateOfBirth';
+import { Button } from '../../../shared/Button';
+import { useIsEditMode, useUpdateEditMode } from '../../../../pages/Profile/profileContext';
+import { useSelector } from 'react-redux';
+import { selectEditUserInfo, selectUserData } from '../../../../store/user/selectors';
+import { useAppDispatch } from '../../../../store/store';
+import { getUserThunk, updUserThunk } from '../../../../store/user/thunks';
+import { IUpdateUser } from '../../../../services/sdk/customer/types';
+import { months } from '../../../../constant';
+import { getMonthIndex } from '../../../../utils';
+import { ErrorMessage } from '../../../shared/ErrorMessage';
+import { deleteSuccessState, resetEditError } from '../../../../store/user/slice';
+
+function FirstTab(): ReactElement {
+ const { editStatus, editError, isSuccess } = useSelector(selectEditUserInfo);
+ const isEditMode = useIsEditMode();
+ const updateEditMode = useUpdateEditMode();
+ const user = useSelector(selectUserData);
+ const dispatch = useAppDispatch();
+
+ useEffect(() => {
+ if (!user.id) {
+ dispatch(getUserThunk());
+ }
+
+ if (editStatus === 'success') {
+ updateEditMode();
+ const timer = setTimeout(() => {
+ dispatch(deleteSuccessState());
+ }, 3000);
+
+ return () => {
+ clearTimeout(timer);
+ };
+ }
+
+ if (editError) {
+ const timer = setTimeout(() => {
+ dispatch(resetEditError());
+ }, 3000);
+
+ return () => {
+ clearTimeout(timer);
+ };
+ }
+ }, [user, dispatch, editStatus, editError]);
+
+ function handleSubmit(values: IUser): void {
+ const { year, month, date } = values;
+ const newMonth = getMonthIndex(month);
+ const dateOfBirth =
+ year +
+ '-' +
+ (String(newMonth).length === 1 ? `0${newMonth}` : newMonth) +
+ '-' +
+ (date.length === 1 ? `0${date}` : date);
+ const newValue: IUpdateUser = {
+ id: user.id,
+ version: user.version,
+ action: [
+ { action: 'setFirstName', firstName: values.firstName },
+ { action: 'setLastName', lastName: values.lastName },
+ { action: 'changeEmail', email: values.email },
+ { action: 'setDateOfBirth', dateOfBirth: dateOfBirth },
+ ],
+ };
+
+ dispatch(updUserThunk(newValue));
+ }
+
+ function validateDate(values: IUser): void | object | PromiseHello, {user.firstName}
+Set your profile settings down below
+Profile information was successfully updated ٩(｡•́‿•̀｡)۶
+ )}
+
+ );
+}
+
+export default FirstTab;
diff --git a/src/components/Profile/Tabs/FirstTab/UserDateOfBirth/UserDateOfBirth.module.scss b/src/components/Profile/Tabs/FirstTab/UserDateOfBirth/UserDateOfBirth.module.scss
new file mode 100644
index 0000000..e0dc9b0
--- /dev/null
+++ b/src/components/Profile/Tabs/FirstTab/UserDateOfBirth/UserDateOfBirth.module.scss
@@ -0,0 +1,15 @@
+@import '../../../../../styles/common';
+
+.root {
+ margin-bottom: 4rem;
+
+ &__container {
+ display: flex;
+ gap: 2.5rem;
+ }
+
+ &__error {
+ @include input-error()
+ }
+
+}
\ No newline at end of file
diff --git a/src/components/Profile/Tabs/FirstTab/UserDateOfBirth/UserDateOfBirth.tsx b/src/components/Profile/Tabs/FirstTab/UserDateOfBirth/UserDateOfBirth.tsx
new file mode 100644
index 0000000..8015e2f
--- /dev/null
+++ b/src/components/Profile/Tabs/FirstTab/UserDateOfBirth/UserDateOfBirth.tsx
@@ -0,0 +1,45 @@
+import styles from './UserDateOfBirth.module.scss';
+import { ReactElement } from 'react';
+import { IUserFormProps } from '../../../../RegisterForm/UserForm/UserForm';
+import classNames from 'classnames';
+import { SelectField } from '../../../../shared/SelectField';
+import { Input } from '../../../../../types/enums';
+import { dates, months, years } from '../../../../../constant';
+
+function UserDateOfBirth({ handleChange, values, errors, isDisabled }: IUserFormProps): ReactElement {
+ const { date, month, year } = values;
+ return (
+
+
+ );
+}
+export default UserDateOfBirth;
diff --git a/src/components/Profile/Tabs/FirstTab/UserDateOfBirth/index.ts b/src/components/Profile/Tabs/FirstTab/UserDateOfBirth/index.ts
new file mode 100644
index 0000000..39f5a36
--- /dev/null
+++ b/src/components/Profile/Tabs/FirstTab/UserDateOfBirth/index.ts
@@ -0,0 +1,2 @@
+import UserDateOfBirth from './UserDateOfBirth';
+export { UserDateOfBirth };
diff --git a/src/components/Profile/Tabs/FirstTab/firstTab.module.scss b/src/components/Profile/Tabs/FirstTab/firstTab.module.scss
new file mode 100644
index 0000000..eda56c4
--- /dev/null
+++ b/src/components/Profile/Tabs/FirstTab/firstTab.module.scss
@@ -0,0 +1,100 @@
+@import '../../../../styles/common';
+
+.form {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 4rem;
+
+ &__input {
+ margin-bottom: 1.5rem;
+
+ label {
+ span {
+ font-weight: 600;
+ }
+
+ input {
+ border: none;
+ padding: 0;
+ color: $dark;
+ }
+ }
+ }
+
+ &__email {
+ margin-bottom: 4.5rem;
+
+ @media (max-width: 480px) {
+ margin-bottom: 4rem;
+ }
+ }
+
+ &__dateOfBirth {
+ position: relative;
+ margin-bottom: 3rem;
+
+ &::before {
+ content: 'Date of Birth';
+ position: absolute;
+ top: -2.5rem;
+ @include font(semibold, p1, $dark);
+ line-height: 2.2rem;
+
+ @media (max-width: 480px) {
+ font-size: 18px;
+ top: -2.4rem;
+ }
+ }
+ }
+}
+
+.formEdit {
+ margin-bottom: 4rem;
+
+ &__email {
+ margin-bottom: 1rem;
+ }
+
+ &__input {
+ margin-bottom: 1.5rem;
+
+ label {
+ span {
+ font-weight: 600;
+ }
+
+ input {
+ border: none;
+ padding: 0.5rem 0;
+ color: $dark;
+ border-bottom: 1px solid $dark;
+ }
+ }
+ }
+
+ // &__input input {
+ // border-bottom: 1px solid $dark;
+ // }
+
+ &__closeBtn {
+ @include close-btn();
+ }
+
+ &__btn {
+ @include btn-primary();
+ width: 100%;
+ height: 7rem;
+
+ &:disabled {
+ opacity: 0.5;
+ }
+ }
+}
+
+.successResponse {
+ @include responseMessage($light-primary, $green);
+}
+
+.errorResponse {
+ @include responseMessage($light-primary, $error-color);
+}
diff --git a/src/components/Profile/Tabs/FirstTab/index.ts b/src/components/Profile/Tabs/FirstTab/index.ts
new file mode 100644
index 0000000..b2bfb3c
--- /dev/null
+++ b/src/components/Profile/Tabs/FirstTab/index.ts
@@ -0,0 +1,2 @@
+import FirstTab from './FirstTab';
+export { FirstTab };
diff --git a/src/components/Profile/Tabs/SecondTab/CustomerAdress/CustomerAddress.tsx b/src/components/Profile/Tabs/SecondTab/CustomerAdress/CustomerAddress.tsx
new file mode 100644
index 0000000..0e5ca92
--- /dev/null
+++ b/src/components/Profile/Tabs/SecondTab/CustomerAdress/CustomerAddress.tsx
@@ -0,0 +1,94 @@
+import styles from './address.module.scss';
+import classNames from 'classnames';
+import { MouseEvent, ReactElement, useEffect, useState } from 'react';
+import { ModalWindow } from '../../../../shared/ModalWindow';
+import { EditCard } from './EditCard';
+import { selectEditStatus, selectUserData } from '../../../../../store/user/selectors';
+import { useSelector } from 'react-redux';
+import { useAppDispatch } from '../../../../../store/store';
+import { getUserThunk } from '../../../../../store/user/thunks';
+import { Address } from '@commercetools/platform-sdk';
+
+interface IAddressComp {
+ values: Address;
+ key: number | string;
+ index: number;
+ deleteAddress: (addressId: string) => void;
+ addressId: string;
+ setDefaultAddress: (e: MouseEvent
+
+
+
+ {errors?.date ? {errors.date} : null}
+
+
+ {values.streetName}
+ {`${values.postalCode} ${values.city}`}
+ {values.country}
+
+
+ }
+ isOpen={isModalOpen}
+ onClose={(): void => setIsModalOpen(!isModalOpen)}
+ />
+
+
+
+
+
+
+
+
+ {({ handleSubmit, handleChange, setFieldTouched, touched, errors, values }): ReactElement => (
+
+ )}
+
+ {editError && (
+
+ );
+}
+
+export default EditCard;
diff --git a/src/components/Profile/Tabs/SecondTab/CustomerAdress/EditCard/editCard.module.scss b/src/components/Profile/Tabs/SecondTab/CustomerAdress/EditCard/editCard.module.scss
new file mode 100644
index 0000000..dba673e
--- /dev/null
+++ b/src/components/Profile/Tabs/SecondTab/CustomerAdress/EditCard/editCard.module.scss
@@ -0,0 +1,33 @@
+@import '../../../../../../styles/common';
+
+.root {
+
+ &__title {
+ margin-bottom: 6rem;
+ padding-top: 2rem;
+ font-size: 4rem;
+ line-height: 4.4rem;
+ }
+
+ &__formContainer h3 {
+ display: none;
+ }
+
+ &__addressForm {
+ &> :last-child {
+ opacity: 0;
+ user-select: none;
+ pointer-events: none;
+ }
+ }
+
+ &__btn {
+ width: 100%;
+ height: 7rem;
+ }
+
+}
+
+.errorResponse {
+ @include responseMessage($light-primary, $error-color);
+}
\ No newline at end of file
diff --git a/src/components/Profile/Tabs/SecondTab/CustomerAdress/EditCard/index.ts b/src/components/Profile/Tabs/SecondTab/CustomerAdress/EditCard/index.ts
new file mode 100644
index 0000000..2ea8f74
--- /dev/null
+++ b/src/components/Profile/Tabs/SecondTab/CustomerAdress/EditCard/index.ts
@@ -0,0 +1,2 @@
+import EditCard from './EditCard';
+export { EditCard };
diff --git a/src/components/Profile/Tabs/SecondTab/CustomerAdress/address.module.scss b/src/components/Profile/Tabs/SecondTab/CustomerAdress/address.module.scss
new file mode 100644
index 0000000..e873fd8
--- /dev/null
+++ b/src/components/Profile/Tabs/SecondTab/CustomerAdress/address.module.scss
@@ -0,0 +1,76 @@
+@import '../../../../../styles/common';
+
+.item {
+ display: flex;
+ padding: 2rem 0;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ border-bottom: 0.1rem solid $dark;
+
+ &:first-child {
+ border-top: 0.1rem solid $dark;
+ }
+
+ &:last-child {
+ margin-bottom: 6rem;
+ }
+
+ &__btns {
+ display: flex;
+ flex-direction: column;
+ }
+
+ &__data {
+ @include font(regular, p1, $dark);
+ line-height: 22px;
+ margin-bottom: 2rem;
+
+ @media (max-width: 480px) {
+ font-size: 1.8rem;
+ }
+ }
+}
+
+.defaultSettContainer {
+ display: flex;
+ gap: 1rem;
+
+ flex-basis: 100%;
+ justify-content: start;
+
+ &__address {
+ padding: 0.2rem 0.7rem 0.3rem;
+ border-radius: 0.5rem;
+ font-size: 1.4rem;
+ background-color: rgba($dark, 0.08);
+ transition: opacity $transition-set;
+
+ &_active {
+ background-color: rgba($green, 0.3);
+ color: $dark-green;
+ }
+
+ &:hover {
+ opacity: 0.9;
+ }
+ }
+}
+
+.configureBtns {
+ &__btn {
+ @include font(regular, p1, $dark);
+ text-align: right;
+ line-height: 22px;
+ opacity: 0.3;
+ transition: opacity $transition-set;
+
+ &:hover {
+ color: $primary;
+ opacity: 1;
+ }
+
+ @media (max-width: 480px) {
+ font-size: 1.8rem;
+ }
+ }
+}
diff --git a/src/components/Profile/Tabs/SecondTab/CustomerAdress/index.ts b/src/components/Profile/Tabs/SecondTab/CustomerAdress/index.ts
new file mode 100644
index 0000000..f648963
--- /dev/null
+++ b/src/components/Profile/Tabs/SecondTab/CustomerAdress/index.ts
@@ -0,0 +1,2 @@
+import CustomerAddress from './CustomerAddress';
+export { CustomerAddress };
diff --git a/src/components/Profile/Tabs/SecondTab/Radiobtn/Radiobtn.tsx b/src/components/Profile/Tabs/SecondTab/Radiobtn/Radiobtn.tsx
new file mode 100644
index 0000000..8382a9d
--- /dev/null
+++ b/src/components/Profile/Tabs/SecondTab/Radiobtn/Radiobtn.tsx
@@ -0,0 +1,41 @@
+import classNames from 'classnames';
+import styles from '../secondTab.module.scss';
+import { ReactElement } from 'react';
+
+interface IBtnProps {
+ isShipping: boolean;
+ setIsShipping: (value?: boolean) => void;
+ value: string;
+ label: string;
+ callback: () => void;
+}
+
+function Radiobtn({ isShipping, setIsShipping, value, label, callback }: IBtnProps): ReactElement {
+ const hasActiveClass = isShipping ? styles.toggleShipping__btn_active : '';
+
+ const handleRadioChange = (): void => {
+ if (!hasActiveClass) {
+ setIsShipping(!isShipping);
+ if (callback) {
+ callback();
+ }
+ }
+ };
+
+ return (
+ Edit address
+
+ setIsShipping(!isShipping)}
+ onClick={handleRadioChange}
+ />
+
+
+ );
+}
+
+export default Radiobtn;
diff --git a/src/components/Profile/Tabs/SecondTab/Radiobtn/index.ts b/src/components/Profile/Tabs/SecondTab/Radiobtn/index.ts
new file mode 100644
index 0000000..8e7757c
--- /dev/null
+++ b/src/components/Profile/Tabs/SecondTab/Radiobtn/index.ts
@@ -0,0 +1,2 @@
+import Radiobtn from './Radiobtn';
+export { Radiobtn };
diff --git a/src/components/Profile/Tabs/SecondTab/SecondTab.tsx b/src/components/Profile/Tabs/SecondTab/SecondTab.tsx
new file mode 100644
index 0000000..fc03923
--- /dev/null
+++ b/src/components/Profile/Tabs/SecondTab/SecondTab.tsx
@@ -0,0 +1,218 @@
+import styles from './secondTab.module.scss';
+import { Formik } from 'formik';
+import { MouseEvent, ReactElement, useEffect, useState } from 'react';
+import { Button } from '../../../shared/Button';
+import { initialEditAddresses } from '../../../../constant';
+import { CustomerAddress } from './CustomerAdress';
+import { AddressForm } from '../../../RegisterForm/AddressForm';
+import classNames from 'classnames';
+import { IAddressForm } from '../../../RegisterForm/AddressForm/AddressForm';
+import { useIsEditMode, useUpdateEditMode } from '../../../../pages/Profile/profileContext';
+import { Radiobtn } from './Radiobtn';
+import { useSelector } from 'react-redux';
+import { selectEditUserInfo, selectUserData } from '../../../../store/user/selectors';
+import { useAppDispatch } from '../../../../store/store';
+import { getUserThunk } from '../../../../store/user/thunks';
+import { Address } from '@commercetools/platform-sdk';
+import { IAddNewAddress, IRemoveAddress, ISetDefaultAddress } from '../../../../services/sdk/customer/types';
+import { removeAddressThunk } from '../../../../store/user/thunks';
+import { setDefaultAddressIdThunk } from '../../../../store/user/thunks';
+import { addNewAddressThunk } from '../../../../store/user/thunks';
+import { ErrorMessage } from '../../../shared/ErrorMessage';
+import { deleteSuccessState, resetEditError } from '../../../../store/user/slice';
+
+export interface IAddressesProfile {
+ shipping: IAddressForm;
+ billing: IAddressForm;
+}
+
+function SecondTab(): ReactElement {
+ const [isShipping, setIsShipping] = useState(true);
+ const isEditMode = useIsEditMode();
+ const updateEditMode = useUpdateEditMode();
+ const user = useSelector(selectUserData);
+ const dispatch = useAppDispatch();
+ const { editStatus, editError, isSuccess } = useSelector(selectEditUserInfo);
+
+ useEffect(() => {
+ if (!user.id) {
+ dispatch(getUserThunk());
+ }
+
+ if (editStatus === 'success' && isEditMode) {
+ updateEditMode();
+ const timer = setTimeout(() => {
+ dispatch(deleteSuccessState());
+ }, 3000);
+
+ return () => {
+ clearTimeout(timer);
+ };
+ }
+
+ if (editStatus === 'success' && !isEditMode) {
+ const timer = setTimeout(() => {
+ dispatch(deleteSuccessState());
+ }, 3000);
+
+ return () => {
+ clearTimeout(timer);
+ };
+ }
+
+ if (editError) {
+ const timer = setTimeout(() => {
+ dispatch(resetEditError());
+ }, 3000);
+
+ return () => {
+ clearTimeout(timer);
+ };
+ }
+ }, [user, dispatch, editStatus, editError]);
+
+ function handleSubmit(values: IAddressesProfile): void {
+ const isShippingAddress = values.shipping.city !== '';
+ const isDefault = isShippingAddress ? values.shipping.isDefault : values.billing.isDefault;
+ if (isDefault !== undefined) {
+ const addNewAddressData: IAddNewAddress = {
+ id: user.id,
+ version: user.version,
+ action: [
+ {
+ action: 'addAddress',
+ address: {
+ streetName: isShippingAddress ? values.shipping.streetName : values.billing.streetName,
+ city: isShippingAddress ? values.shipping.city : values.billing.city,
+ postalCode: isShippingAddress ? values.shipping.postalCode : values.billing.postalCode,
+ country: isShippingAddress ? values.shipping.country : values.billing.country,
+ },
+ },
+ ],
+ isShipping: isShippingAddress,
+ isDefault: isDefault,
+ };
+ dispatch(addNewAddressThunk(addNewAddressData));
+ }
+ }
+
+ function deleteAddress(addressId: string): void {
+ const addressData: IRemoveAddress = { version: user.version, customerId: user.id, addressId: addressId };
+
+ dispatch(removeAddressThunk(addressData));
+ }
+
+ function setDefaultAddress(e: MouseEvent, addressId: string): void {
+ const clickedElement = e.target;
+
+ if (clickedElement && clickedElement instanceof HTMLElement) {
+ const clickElIsActive = Array.from(clickedElement.classList).some((el) => el.includes('active'));
+ if (clickElIsActive) {
+ return;
+ }
+
+ const isShipAddress = clickedElement.getAttribute('data-isshipping') === 'true';
+ const thunkData: ISetDefaultAddress = {
+ customerId: user.id,
+ version: user.version,
+ addressId,
+ isShipping: isShipAddress,
+ };
+ dispatch(setDefaultAddressIdThunk(thunkData));
+ }
+ }
+
+ return (
+
+ {isEditMode && (
+ <>
+
+ {({ handleSubmit, handleChange, setFieldTouched, touched, errors, values, resetForm }): ReactElement => (
+ <>
+
+ {editError && (
+
+ );
+}
+
+export default SecondTab;
diff --git a/src/components/Profile/Tabs/SecondTab/index.ts b/src/components/Profile/Tabs/SecondTab/index.ts
new file mode 100644
index 0000000..01c7a1a
--- /dev/null
+++ b/src/components/Profile/Tabs/SecondTab/index.ts
@@ -0,0 +1,2 @@
+import SecondTab from './SecondTab';
+export { SecondTab };
diff --git a/src/components/Profile/Tabs/SecondTab/secondTab.module.scss b/src/components/Profile/Tabs/SecondTab/secondTab.module.scss
new file mode 100644
index 0000000..2ddae86
--- /dev/null
+++ b/src/components/Profile/Tabs/SecondTab/secondTab.module.scss
@@ -0,0 +1,86 @@
+@import '../../../../styles/common';
+
+.root {
+
+ &__formContainer {
+ & h3 {
+ display: none;
+ }
+
+ &_form {
+ margin-bottom: 4rem;
+ }
+ }
+
+ &__btn {
+ width: 100%;
+ height: 7rem;
+ margin-bottom: 5rem;
+
+ &:disabled {
+ opacity: .5;
+ }
+ }
+
+ &__closeBtn {
+ @include close-btn();
+ }
+
+ &__addAddressBtn {
+ @include btn-primary();
+ margin-bottom: 4rem;
+ width: 100%;
+ height: 7rem;
+ }
+}
+
+.toggleShipping {
+ display: flex;
+ margin-bottom: 2rem;
+ border-bottom: 1px solid $dark;
+ text-transform: uppercase;
+
+ &__radio {
+ position: absolute;
+ width: 100%;
+ top: 0;
+ height: 100%;
+ opacity: 0;
+ left: 0;
+ cursor: pointer;
+ }
+
+ &__btn {
+ position: relative;
+ padding: 1.2rem 2rem;
+ line-height: 1.6rem;
+ font-size: 1.4rem;
+ font-weight: 600;
+
+ &_active {
+ border: 1px solid $dark;
+ border-bottom: none;
+
+ &::after {
+ content: '';
+ width: 100%;
+ display: block;
+ position: absolute;
+ border-bottom: 1px solid white;
+ z-index: 1;
+ height: 1px;
+ left: 0;
+ bottom: -1px;
+ }
+ }
+ }
+
+}
+
+.successResponse {
+ @include responseMessage($light-primary, $green);
+}
+
+.errorResponse {
+ @include responseMessage($light-primary, $error-color);
+}
\ No newline at end of file
diff --git a/src/components/Profile/Tabs/Tabs.tsx b/src/components/Profile/Tabs/Tabs.tsx
new file mode 100644
index 0000000..b9f7fc2
--- /dev/null
+++ b/src/components/Profile/Tabs/Tabs.tsx
@@ -0,0 +1,46 @@
+import styles from './tabs.module.scss';
+import { ReactElement, useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { useIsEditMode } from '../../../pages/Profile/profileContext';
+import { tabsList } from '../../../constant/profile';
+
+function Tabs(): ReactElement {
+ const [activeTab, setActiveTab] = useState(0);
+ const isTabListHidden = useIsEditMode();
+
+ useEffect(() => {
+ const storedActiveTab = localStorage.getItem('activeTab');
+ if (storedActiveTab !== null) {
+ setActiveTab(parseInt(storedActiveTab, 10));
+ }
+ }, []);
+
+ const handleTabClick = function (index: number): void {
+ setActiveTab(index);
+ localStorage.setItem('activeTab', index.toString());
+ };
+
+ return (
+
+ setIsShipping(true)}
+ value={'shipping'}
+ label="Shipping address"
+ callback={resetForm}
+ >
+ setIsShipping(false)}
+ value={'billing'}
+ label="Billing address"
+ callback={resetForm}
+ >
+
+
+
+ )}
+
+ {isSuccess && (
+
+ )}
+ Profile information was successfully updated ٩(｡•́‿•̀｡)۶
+ )}
+
+ {isTabListHidden &&
+ );
+}
+
+export default Tabs;
diff --git a/src/components/Profile/Tabs/ThirdTab/ThirdTab.tsx b/src/components/Profile/Tabs/ThirdTab/ThirdTab.tsx
new file mode 100644
index 0000000..7cd668e
--- /dev/null
+++ b/src/components/Profile/Tabs/ThirdTab/ThirdTab.tsx
@@ -0,0 +1,130 @@
+import { Formik } from 'formik';
+import { ReactElement, useEffect } from 'react';
+import { PasswordField } from '../../../shared/PasswordField';
+import { Input } from '../../../../types/enums';
+import { Button } from '../../../shared/Button';
+import styles from './thirdTab.module.scss';
+import { initialChangePassord } from '../../../../constant';
+import { useIsEditMode, useUpdateEditMode } from '../../../../pages/Profile/profileContext';
+import { useSelector } from 'react-redux';
+import { selectEditUserInfo, selectUserData } from '../../../../store/user/selectors';
+import { useAppDispatch } from '../../../../store/store';
+import { getUserThunk, updPasswordThunk } from '../../../../store/user/thunks';
+import { IUpdPasswordData } from '../../../../store/user/types';
+import { ErrorMessage } from '../../../shared/ErrorMessage';
+import { deleteSuccessState, resetEditError } from '../../../../store/user/slice';
+
+export interface IChangePassword {
+ password: string;
+ newPassword: string;
+}
+
+function ThirdTab(): ReactElement {
+ const isEditMode = useIsEditMode();
+ const updateEditMode = useUpdateEditMode();
+ const user = useSelector(selectUserData);
+ const dispatch = useAppDispatch();
+ const { editStatus, editError, isSuccess } = useSelector(selectEditUserInfo);
+
+ useEffect(() => {
+ if (!user.id) {
+ dispatch(getUserThunk());
+ }
+
+ if (editStatus === 'success') {
+ updateEditMode();
+ const timer = setTimeout(() => {
+ dispatch(deleteSuccessState());
+ }, 3000);
+
+ return () => {
+ clearTimeout(timer);
+ };
+ }
+
+ if (editError) {
+ const timer = setTimeout(() => {
+ dispatch(resetEditError());
+ }, 3000);
+
+ return () => {
+ clearTimeout(timer);
+ };
+ }
+ }, [user, dispatch, editStatus, editError]);
+
+ function handleSubmit(values: IChangePassword): void {
+ const updPassData: IUpdPasswordData = {
+ email: user.email,
+ passwordData: {
+ id: user.id,
+ version: user.version,
+ currentPassword: values.password,
+ newPassword: values.newPassword,
+ },
+ };
+ dispatch(updPasswordThunk(updPassData));
+ }
+
+ return (
+ {tabsList[activeTab].title}
} +
+ {tabsList.map((tab, index) => {
+ return (
+
+ handleTabClick(index)}
+ >
+ {tab.label}
+
+ );
+ })}
+ {tabsList[activeTab].content}
+
+ {!isEditMode && (
+
+ {({ handleSubmit, errors, touched, setFieldTouched, values }): ReactElement => (
+
+ )}
+
+ {editError && (
+
+ );
+}
+
+export default ThirdTab;
diff --git a/src/components/Profile/Tabs/ThirdTab/index.ts b/src/components/Profile/Tabs/ThirdTab/index.ts
new file mode 100644
index 0000000..cc2fdde
--- /dev/null
+++ b/src/components/Profile/Tabs/ThirdTab/index.ts
@@ -0,0 +1,2 @@
+import ThirdTab from './ThirdTab';
+export { ThirdTab };
diff --git a/src/components/Profile/Tabs/ThirdTab/thirdTab.module.scss b/src/components/Profile/Tabs/ThirdTab/thirdTab.module.scss
new file mode 100644
index 0000000..503049e
--- /dev/null
+++ b/src/components/Profile/Tabs/ThirdTab/thirdTab.module.scss
@@ -0,0 +1,53 @@
+@import '../../../../styles/common';
+
+.root {
+
+ &__editBtn {
+ @include btn-primary();
+ width: 100%;
+ height: 7rem;
+ }
+
+ &__label {
+ @include font(semibold, p1, $dark);
+ margin-bottom: 0.5rem;
+ line-height: 2.2rem;
+ }
+
+ &__input {
+ margin-bottom: 4rem;
+ background-color: inherit;
+ border: none;
+ }
+}
+
+.rootEdit {
+
+ &__input {
+ margin-bottom: 1rem;
+ }
+
+ &__closeBtn {
+ @include close-btn()
+ }
+}
+
+.form {
+
+ &__button {
+ width: 100%;
+ height: 7rem;
+
+ &:disabled {
+ opacity: 0.5;
+ }
+ }
+}
+
+.successResponse {
+ @include responseMessage($light-primary, $green);
+}
+
+.errorResponse {
+ @include responseMessage($light-primary, $error-color);
+}
\ No newline at end of file
diff --git a/src/components/Profile/Tabs/index.ts b/src/components/Profile/Tabs/index.ts
new file mode 100644
index 0000000..8a678cf
--- /dev/null
+++ b/src/components/Profile/Tabs/index.ts
@@ -0,0 +1,2 @@
+import Tabs from './Tabs';
+export { Tabs };
diff --git a/src/components/Profile/Tabs/tabs.module.scss b/src/components/Profile/Tabs/tabs.module.scss
new file mode 100644
index 0000000..c2b6dce
--- /dev/null
+++ b/src/components/Profile/Tabs/tabs.module.scss
@@ -0,0 +1,54 @@
+@import '../../../styles/common';
+
+.root {
+ &__title {
+ margin-bottom: 6rem;
+ padding-top: 2rem;
+ font-size: 4rem;
+ line-height: 4.4rem;
+ }
+}
+
+.tabsList {
+ display: flex;
+ margin-bottom: 4rem;
+ border-bottom: 1px solid $dark;
+
+ &_hidden {
+ display: none;
+ }
+
+ &__tab {
+ position: relative;
+ padding: 1.2rem 2rem;
+ line-height: 120%;
+ font-size: 1.4rem;
+ font-weight: 600;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+
+ @media(max-width: 800px) {
+ padding: 1.2rem 1.5rem;
+ }
+
+ &_active {
+ border: 1px solid $dark;
+ border-bottom: none;
+
+ &::after {
+ content: '';
+ width: 100%;
+ display: block;
+ position: absolute;
+ border-bottom: 2px solid white;
+ z-index: 1;
+ height: 1px;
+ left: 0;
+ bottom: -1px;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/RegisterForm/AddressForm/AddressForm.tsx b/src/components/RegisterForm/AddressForm/AddressForm.tsx
new file mode 100644
index 0000000..cca0466
--- /dev/null
+++ b/src/components/RegisterForm/AddressForm/AddressForm.tsx
@@ -0,0 +1,102 @@
+import { ChangeEvent, ReactElement } from 'react';
+import { Field, FormikErrors, FormikTouched } from 'formik';
+import classNames from 'classnames';
+import { InputField } from '../../shared/InputField';
+import { SelectField } from '../../shared/SelectField';
+import { Input } from '../../../types/enums';
+import { INewAddress } from '../../../types/interfaces';
+import { countries } from '../../../constant';
+import { cityValidate, countryValidate, streetValidate, zipCodeValidate } from '../../../utils/validation';
+
+import styles from './addressForm.module.scss';
+
+export interface IAddressForm extends INewAddress {
+ isDefault?: boolean;
+}
+
+interface IAddressFormProps {
+ type: 'billing' | 'shipping';
+ handleChange: (e?: ChangeEvent) => void;
+ values: IAddressForm;
+ touched: FormikTouched
+
+ )}
+ {isEditMode && (
+ <>
+
+
+
+ {isSuccess && (
+ Password
+
+ Profile information was successfully updated ٩(｡•́‿•̀｡)۶
+ )}
+
+
+ );
+}
+
+export default AddressForm;
diff --git a/src/components/RegisterForm/AddressForm/addressForm.module.scss b/src/components/RegisterForm/AddressForm/addressForm.module.scss
new file mode 100644
index 0000000..7503795
--- /dev/null
+++ b/src/components/RegisterForm/AddressForm/addressForm.module.scss
@@ -0,0 +1,33 @@
+@import 'src/styles/common';
+
+.address {
+ max-width: 100%;
+ display: flex;
+ flex-direction: column;
+
+ &__title {
+ @include font(semibold, h3, $dark);
+ line-height: 1;
+ margin-bottom: 1.5rem;
+ }
+
+ &__select {
+ width: 100%;
+ position: relative;
+ }
+
+ &__error {
+ @include input-error();
+ }
+
+ &__checkfield {
+ @include check-field();
+
+ width: max-content;
+ padding-top: 2rem;
+ }
+
+ &__checkbox {
+ @include checkbox();
+ }
+}
diff --git a/src/components/RegisterForm/AddressForm/index.ts b/src/components/RegisterForm/AddressForm/index.ts
new file mode 100644
index 0000000..26abaaa
--- /dev/null
+++ b/src/components/RegisterForm/AddressForm/index.ts
@@ -0,0 +1,3 @@
+import AddressForm from './AddressForm';
+
+export { AddressForm };
diff --git a/src/components/RegisterForm/RegisterForm.tsx b/src/components/RegisterForm/RegisterForm.tsx
new file mode 100644
index 0000000..24cf6dd
--- /dev/null
+++ b/src/components/RegisterForm/RegisterForm.tsx
@@ -0,0 +1,138 @@
+import { ReactElement, useState } from 'react';
+import { Formik, FormikErrors } from 'formik';
+import { UserForm } from './UserForm';
+import { IUserForm } from './UserForm/UserForm';
+import { AddressForm } from './AddressForm';
+import { IAddressForm } from './AddressForm/AddressForm';
+import { Button } from '../shared/Button';
+import { useAppDispatch } from '../../store/store';
+import { registerThunk } from '../../store/auth/thunks';
+import { initialRegisterForm } from '../../constant';
+import { getMonthIndex } from '../../utils';
+import { dateMYValidate } from '../../utils/validation';
+import { INewAddress, INewUser } from '../../types/interfaces';
+import { Input } from '../../types/enums';
+
+import styles from './registerForm.module.scss';
+import classnames from 'classnames';
+
+export interface IRegisterForm {
+ user: IUserForm;
+ shipping: IAddressForm;
+ billing: IAddressForm;
+}
+
+function RegisterForm(): ReactElement {
+ const [isSameAddress, setIsSameAddress] = useState(true);
+
+ const dispatch = useAppDispatch();
+ function onSubmit(values: IRegisterForm): void {
+ const { user, shipping, billing } = values;
+ const addresses: INewAddress[] = [
+ {
+ streetName: shipping.streetName.trim(),
+ city: shipping.city.trim(),
+ postalCode: shipping.postalCode.trim(),
+ country: shipping.country.trim(),
+ },
+ ];
+ if (!isSameAddress) {
+ addresses.push({
+ streetName: billing.streetName.trim(),
+ city: billing.city.trim(),
+ postalCode: billing.postalCode.trim(),
+ country: billing.country.trim(),
+ });
+ }
+
+ const billingIndex: number = isSameAddress ? 0 : 1;
+ let defaultBillIndex: number | undefined;
+ if (isSameAddress) {
+ defaultBillIndex = values.shipping.isDefault ? billingIndex : undefined;
+ } else {
+ defaultBillIndex = values.billing.isDefault ? billingIndex : undefined;
+ }
+
+ const newUser: INewUser = {
+ email: user.email.trim(),
+ password: user.password.trim(),
+ firstName: user.firstName.trim(),
+ lastName: user.lastName.trim(),
+ dateOfBirth: `${user.year}-${getMonthIndex(user.month)}-${user.date}`,
+ addresses,
+ shippingAddresses: [0],
+ defaultShippingAddress: values.shipping.isDefault ? 0 : undefined,
+ billingAddresses: [billingIndex],
+ defaultBillingAddress: defaultBillIndex,
+ };
+
+ dispatch(registerThunk(newUser));
+ }
+
+ function validateDate(values: IRegisterForm): void | object | Promise{`${type[0].toUpperCase() + type.slice(1).toLowerCase()} address`}
+ +
+
+
+
+
+ );
+}
diff --git a/src/components/RegisterForm/UserForm/index.ts b/src/components/RegisterForm/UserForm/index.ts
new file mode 100644
index 0000000..6586a3b
--- /dev/null
+++ b/src/components/RegisterForm/UserForm/index.ts
@@ -0,0 +1,2 @@
+import UserForm from './UserForm.tsx';
+export { UserForm };
diff --git a/src/components/RegisterForm/UserForm/userForm.module.scss b/src/components/RegisterForm/UserForm/userForm.module.scss
new file mode 100644
index 0000000..4769da0
--- /dev/null
+++ b/src/components/RegisterForm/UserForm/userForm.module.scss
@@ -0,0 +1,32 @@
+@import 'src/styles/common';
+
+.user {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
+.selects {
+ width: 100%;
+ position: relative;
+
+ &__item {
+ position: relative;
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ gap: 2.5rem;
+
+ @media all and (max-width: 480px) {
+ gap: 2rem;
+ }
+
+ @media all and (max-width: 390px) {
+ gap: 1.5rem;
+ }
+ }
+
+ &__error {
+ @include input-error();
+ }
+}
diff --git a/src/components/RegisterForm/index.ts b/src/components/RegisterForm/index.ts
new file mode 100644
index 0000000..ada2e6e
--- /dev/null
+++ b/src/components/RegisterForm/index.ts
@@ -0,0 +1,3 @@
+import RegisterForm from './RegisterForm';
+
+export { RegisterForm };
diff --git a/src/components/RegisterForm/registerForm.module.scss b/src/components/RegisterForm/registerForm.module.scss
new file mode 100644
index 0000000..c085a5f
--- /dev/null
+++ b/src/components/RegisterForm/registerForm.module.scss
@@ -0,0 +1,20 @@
+@import 'src/styles/common';
+
+.form {
+ display: flex;
+ flex-direction: column;
+
+ &__subform {
+ margin-bottom: 6rem;
+ }
+
+ &__checkfield {
+ @include check-field();
+ width: max-content;
+ padding-top: 1rem;
+ }
+
+ &__checkbox {
+ @include checkbox();
+ }
+}
diff --git a/src/components/SearchField/SearchField.tsx b/src/components/SearchField/SearchField.tsx
new file mode 100644
index 0000000..39c0c5c
--- /dev/null
+++ b/src/components/SearchField/SearchField.tsx
@@ -0,0 +1,57 @@
+import { ChangeEvent, ReactElement, useState } from 'react';
+import { SetURLSearchParams, useSearchParams } from 'react-router-dom';
+import { useDebounce } from '../../hooks';
+import { SearchParams } from '../../types/enums';
+import { changeParams, getSearchParams } from '../../utils';
+import { useAppDispatch } from '../../store/store';
+import { productListThunk } from '../../store/catalog/thunks';
+
+import styles from './searchField.module.scss';
+
+function SearchField(): ReactElement {
+ const [searchParams, setSearchParams] = useSearchParams();
+ const [value, setValue] = useState(searchParams.get(SearchParams.Search) || '');
+ const dispatch = useAppDispatch();
+
+ function searchProductList(setSearchParams: SetURLSearchParams, value: string, field: SearchParams): void {
+ changeParams(setSearchParams, value, field);
+ changeParams(setSearchParams, '1', SearchParams.Page);
+ dispatch(productListThunk({ params: getSearchParams(searchParams), list: [] }));
+ }
+ const debounceChangeParams = useDebounce(searchProductList, 500);
+
+ function handleChange(event: ChangeEvent
+
+
+
+
+ {errors?.date && touched?.date ? {errors.date} : null}
+
+ {fullscreen && (
+
+ )}
+
+ {
+ if (!fullscreen) {
+ handleClick();
+ }
+ }}
+ >
+ {images?.map((image) => (
+
+ 
+
+ ))}
+
+
+ );
+}
diff --git a/src/components/Slider/slider.module.scss b/src/components/Slider/slider.module.scss
new file mode 100644
index 0000000..6cc4e99
--- /dev/null
+++ b/src/components/Slider/slider.module.scss
@@ -0,0 +1,159 @@
+@import '../../styles/common/';
+
+.product__slider {
+ width: 50vw;
+ user-select: none;
+
+ @media all and (max-width: 850px) {
+ width: 100vw;
+ }
+
+ &_button,
+ &_button:hover {
+ height: 4rem;
+ padding: 0 2rem;
+ font-size: 2rem;
+ position: fixed;
+ right: 2rem;
+ top: 2rem;
+ z-index: 110;
+ }
+
+ :global(.swiper) {
+ width: 100%;
+ margin-left: 0;
+
+ .slide {
+ position: relative;
+ width: 100%;
+
+ img {
+ display: block;
+ position: relative;
+ width: 100%;
+ object-fit: cover;
+ }
+ }
+ }
+}
+
+.product__slider_regular {
+ width: 100%;
+ height: $slider-height;
+ cursor: zoom-in;
+
+ @media all and (max-width: 850px) {
+ max-width: 100vw;
+ }
+
+ @media all and (max-width: 480px) {
+ height: calc(100vh - 5rem);
+ }
+
+ .slide {
+ img {
+ height: $slider-height;
+
+ @media all and (max-width: 480px) {
+ height: calc(100vh - 5rem);
+ }
+ }
+ }
+}
+
+.product__slider_fullscreen {
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ padding: 0;
+ height: 100vh;
+ z-index: 100;
+
+ .slide {
+ height: 100vh;
+ overflow-y: scroll;
+
+ img {
+ min-height: 100vh;
+ height: auto;
+ object-fit: cover;
+ cursor: all-scroll;
+ }
+ }
+
+ @media all and (max-width: 850px) {
+ .slide {
+ overflow: auto;
+
+ img {
+ min-width: 180vw;
+ height: auto;
+ object-fit: contain;
+ }
+ }
+ }
+}
+
+// Controls
+
+.product__slider_regular,
+.product__slider_fullscreen {
+ :global(.swiper-button-next),
+ :global(.swiper-button-prev) {
+ width: 4rem;
+ height: 4rem;
+ top: auto;
+ bottom: 2rem;
+ left: auto;
+ right: 1.5rem;
+ cursor: pointer;
+ z-index: 11;
+ }
+
+ :global(.swiper-button-prev) {
+ left: 1.5rem;
+ }
+
+ :global(.swiper-button-next::after),
+ :global(.swiper-button-prev::after) {
+ content: '';
+ background-image: url('../../assets/icons/arrow-right.svg');
+ background-position: center;
+ background-size: contain;
+ background-repeat: no-repeat;
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ cursor: pointer;
+ }
+
+ :global(.swiper-button-prev::after) {
+ transform: rotate(-180deg);
+ }
+
+ :global(.swiper-pagination) {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ gap: 1rem;
+ bottom: 3.5rem;
+ }
+
+ :global(.swiper-pagination-bullet) {
+ display: block;
+ width: 0.8rem;
+ height: 0.8rem;
+ margin: 0;
+ background-color: $primary;
+ opacity: 0.2;
+ }
+
+ :global(.swiper-pagination-bullet-active) {
+ background-color: rgba($primary, 0.9);
+ opacity: 1;
+ }
+}
diff --git a/src/components/SortingField/SortingField.tsx b/src/components/SortingField/SortingField.tsx
new file mode 100644
index 0000000..385b90c
--- /dev/null
+++ b/src/components/SortingField/SortingField.tsx
@@ -0,0 +1,40 @@
+import { ChangeEvent, ReactElement, useState } from 'react';
+import { sorting } from '../../constant';
+import { useSearchParams } from 'react-router-dom';
+import { SearchParams } from '../../types/enums';
+import { changeParams, getSearchParams } from '../../utils';
+import { useAppDispatch } from '../../store/store';
+import { productListThunk } from '../../store/catalog/thunks';
+
+import styles from './sortingField.module.scss';
+
+function SortingField(): ReactElement {
+ const [searchParams, setSearchParams] = useSearchParams();
+ const [sort, setSort] = useState(searchParams.get(SearchParams.Sort) || '');
+ const dispatch = useAppDispatch();
+
+ function handleChange(event: ChangeEvent-
+ {data.map((item) => (
+
+
+ {isOpen && {title}
+ +{splitToParagraphs(content)}
}
+ {text}
;
+}
+
+export default ErrorMessage;
diff --git a/src/components/shared/ErrorMessage/errorMessage.module.scss b/src/components/shared/ErrorMessage/errorMessage.module.scss
new file mode 100644
index 0000000..a1f2b77
--- /dev/null
+++ b/src/components/shared/ErrorMessage/errorMessage.module.scss
@@ -0,0 +1,8 @@
+@import 'src/styles/common';
+
+.error {
+ @include font(regular, p2, $error-color);
+ display: block;
+ text-align: left;
+ margin: -1.5rem 0 1.5rem;
+}
\ No newline at end of file
diff --git a/src/components/shared/ErrorMessage/index.ts b/src/components/shared/ErrorMessage/index.ts
new file mode 100644
index 0000000..aeed2f8
--- /dev/null
+++ b/src/components/shared/ErrorMessage/index.ts
@@ -0,0 +1,3 @@
+import ErrorMessage from './ErrorMessage';
+
+export { ErrorMessage };
diff --git a/src/components/shared/InputField/InputField.test.tsx b/src/components/shared/InputField/InputField.test.tsx
new file mode 100644
index 0000000..5cef6e6
--- /dev/null
+++ b/src/components/shared/InputField/InputField.test.tsx
@@ -0,0 +1,47 @@
+import { render, screen } from '@testing-library/react';
+import { Formik } from 'formik';
+import InputField, { InputFieldProps } from './InputField';
+
+describe('Test InputField shared component', () => {
+ function renderInputField(props: InputFieldProps): HTMLInputElement {
+ render(
+
+
+
+ {error && touched ? {error} : null}
+
+ );
+}
diff --git a/src/components/shared/InputField/index.ts b/src/components/shared/InputField/index.ts
new file mode 100644
index 0000000..a6d4797
--- /dev/null
+++ b/src/components/shared/InputField/index.ts
@@ -0,0 +1,2 @@
+import InputField from './InputField.tsx';
+export { InputField };
diff --git a/src/components/shared/InputField/inputField.module.scss b/src/components/shared/InputField/inputField.module.scss
new file mode 100644
index 0000000..99441c7
--- /dev/null
+++ b/src/components/shared/InputField/inputField.module.scss
@@ -0,0 +1,32 @@
+@import 'src/styles/common';
+
+.field {
+ width: 100%;
+ position: relative;
+ margin-bottom: 1rem;
+
+ &__label {
+ width: inherit;
+ position: relative;
+ }
+
+ &__input {
+ width: inherit;
+ border: none;
+ border-bottom: 0.1rem solid $dark;
+ padding: 0.5rem 0;
+ background-color: transparent;
+
+ &::placeholder {
+ color: $placeholder-grey;
+ }
+
+ &:focus {
+ background-color: rgba($primary, 0.1);
+ }
+ }
+
+ &__error {
+ @include input-error();
+ }
+}
diff --git a/src/components/shared/Loader/Loader.test.tsx b/src/components/shared/Loader/Loader.test.tsx
new file mode 100644
index 0000000..e767d2a
--- /dev/null
+++ b/src/components/shared/Loader/Loader.test.tsx
@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+import Loader from './Loader';
+
+describe('Test Loader component: ', () => {
+ test('should render "Loading..." text', () => {
+ const component = render(
+
+
+ )}
+ {type === 'text' && Loading...
}
+ {type === 'points' && }
+
+ );
+}
+
+export default Loader;
diff --git a/src/components/shared/Loader/__snapshots__/Loader.test.tsx.snap b/src/components/shared/Loader/__snapshots__/Loader.test.tsx.snap
new file mode 100644
index 0000000..f14b030
--- /dev/null
+++ b/src/components/shared/Loader/__snapshots__/Loader.test.tsx.snap
@@ -0,0 +1,224 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Loader component: should render "Loading..." text 1`] = `
+{
+ "asFragment": [Function],
+ "baseElement":
+
+
+ ,
+ "container":
+ Loading...
+
+
+
,
+ "debug": [Function],
+ "findAllByAltText": [Function],
+ "findAllByDisplayValue": [Function],
+ "findAllByLabelText": [Function],
+ "findAllByPlaceholderText": [Function],
+ "findAllByRole": [Function],
+ "findAllByTestId": [Function],
+ "findAllByText": [Function],
+ "findAllByTitle": [Function],
+ "findByAltText": [Function],
+ "findByDisplayValue": [Function],
+ "findByLabelText": [Function],
+ "findByPlaceholderText": [Function],
+ "findByRole": [Function],
+ "findByTestId": [Function],
+ "findByText": [Function],
+ "findByTitle": [Function],
+ "getAllByAltText": [Function],
+ "getAllByDisplayValue": [Function],
+ "getAllByLabelText": [Function],
+ "getAllByPlaceholderText": [Function],
+ "getAllByRole": [Function],
+ "getAllByTestId": [Function],
+ "getAllByText": [Function],
+ "getAllByTitle": [Function],
+ "getByAltText": [Function],
+ "getByDisplayValue": [Function],
+ "getByLabelText": [Function],
+ "getByPlaceholderText": [Function],
+ "getByRole": [Function],
+ "getByTestId": [Function],
+ "getByText": [Function],
+ "getByTitle": [Function],
+ "queryAllByAltText": [Function],
+ "queryAllByDisplayValue": [Function],
+ "queryAllByLabelText": [Function],
+ "queryAllByPlaceholderText": [Function],
+ "queryAllByRole": [Function],
+ "queryAllByTestId": [Function],
+ "queryAllByText": [Function],
+ "queryAllByTitle": [Function],
+ "queryByAltText": [Function],
+ "queryByDisplayValue": [Function],
+ "queryByLabelText": [Function],
+ "queryByPlaceholderText": [Function],
+ "queryByRole": [Function],
+ "queryByTestId": [Function],
+ "queryByText": [Function],
+ "queryByTitle": [Function],
+ "rerender": [Function],
+ "unmount": [Function],
+}
+`;
+
+exports[`Test Loader component: should render spinner 1`] = `
+{
+ "asFragment": [Function],
+ "baseElement":
+
+ Loading...
+
+
+
+ ,
+ "container":
+
+
+
+
,
+ "debug": [Function],
+ "findAllByAltText": [Function],
+ "findAllByDisplayValue": [Function],
+ "findAllByLabelText": [Function],
+ "findAllByPlaceholderText": [Function],
+ "findAllByRole": [Function],
+ "findAllByTestId": [Function],
+ "findAllByText": [Function],
+ "findAllByTitle": [Function],
+ "findByAltText": [Function],
+ "findByDisplayValue": [Function],
+ "findByLabelText": [Function],
+ "findByPlaceholderText": [Function],
+ "findByRole": [Function],
+ "findByTestId": [Function],
+ "findByText": [Function],
+ "findByTitle": [Function],
+ "getAllByAltText": [Function],
+ "getAllByDisplayValue": [Function],
+ "getAllByLabelText": [Function],
+ "getAllByPlaceholderText": [Function],
+ "getAllByRole": [Function],
+ "getAllByTestId": [Function],
+ "getAllByText": [Function],
+ "getAllByTitle": [Function],
+ "getByAltText": [Function],
+ "getByDisplayValue": [Function],
+ "getByLabelText": [Function],
+ "getByPlaceholderText": [Function],
+ "getByRole": [Function],
+ "getByTestId": [Function],
+ "getByText": [Function],
+ "getByTitle": [Function],
+ "queryAllByAltText": [Function],
+ "queryAllByDisplayValue": [Function],
+ "queryAllByLabelText": [Function],
+ "queryAllByPlaceholderText": [Function],
+ "queryAllByRole": [Function],
+ "queryAllByTestId": [Function],
+ "queryAllByText": [Function],
+ "queryAllByTitle": [Function],
+ "queryByAltText": [Function],
+ "queryByDisplayValue": [Function],
+ "queryByLabelText": [Function],
+ "queryByPlaceholderText": [Function],
+ "queryByRole": [Function],
+ "queryByTestId": [Function],
+ "queryByText": [Function],
+ "queryByTitle": [Function],
+ "rerender": [Function],
+ "unmount": [Function],
+}
+`;
+
+exports[`Test Loader component: should render spinner 2`] = `
+{
+ "asFragment": [Function],
+ "baseElement":
+
+
+
+
+
+
+ ,
+ "container":
+
+
,
+ "debug": [Function],
+ "findAllByAltText": [Function],
+ "findAllByDisplayValue": [Function],
+ "findAllByLabelText": [Function],
+ "findAllByPlaceholderText": [Function],
+ "findAllByRole": [Function],
+ "findAllByTestId": [Function],
+ "findAllByText": [Function],
+ "findAllByTitle": [Function],
+ "findByAltText": [Function],
+ "findByDisplayValue": [Function],
+ "findByLabelText": [Function],
+ "findByPlaceholderText": [Function],
+ "findByRole": [Function],
+ "findByTestId": [Function],
+ "findByText": [Function],
+ "findByTitle": [Function],
+ "getAllByAltText": [Function],
+ "getAllByDisplayValue": [Function],
+ "getAllByLabelText": [Function],
+ "getAllByPlaceholderText": [Function],
+ "getAllByRole": [Function],
+ "getAllByTestId": [Function],
+ "getAllByText": [Function],
+ "getAllByTitle": [Function],
+ "getByAltText": [Function],
+ "getByDisplayValue": [Function],
+ "getByLabelText": [Function],
+ "getByPlaceholderText": [Function],
+ "getByRole": [Function],
+ "getByTestId": [Function],
+ "getByText": [Function],
+ "getByTitle": [Function],
+ "queryAllByAltText": [Function],
+ "queryAllByDisplayValue": [Function],
+ "queryAllByLabelText": [Function],
+ "queryAllByPlaceholderText": [Function],
+ "queryAllByRole": [Function],
+ "queryAllByTestId": [Function],
+ "queryAllByText": [Function],
+ "queryAllByTitle": [Function],
+ "queryByAltText": [Function],
+ "queryByDisplayValue": [Function],
+ "queryByLabelText": [Function],
+ "queryByPlaceholderText": [Function],
+ "queryByRole": [Function],
+ "queryByTestId": [Function],
+ "queryByText": [Function],
+ "queryByTitle": [Function],
+ "rerender": [Function],
+ "unmount": [Function],
+}
+`;
diff --git a/src/components/shared/Loader/index.ts b/src/components/shared/Loader/index.ts
new file mode 100644
index 0000000..a26ed67
--- /dev/null
+++ b/src/components/shared/Loader/index.ts
@@ -0,0 +1,3 @@
+import Loader from './Loader';
+
+export { Loader };
diff --git a/src/components/shared/Loader/loader.module.scss b/src/components/shared/Loader/loader.module.scss
new file mode 100644
index 0000000..e78ea14
--- /dev/null
+++ b/src/components/shared/Loader/loader.module.scss
@@ -0,0 +1,73 @@
+@import 'src/styles/common';
+
+.loader {
+ @include font(semibold, p1, $primary);
+ padding: 1rem 0;
+}
+
+.spinner {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 15;
+ width: 8rem;
+ height: 8rem;
+ background-color: $primary;
+ border-radius: 50%;
+ box-shadow: 0 0.5rem 1.2rem 0 rgba(0, 71, 255, 0.5);
+;
+
+ &__circle {
+ position: absolute;
+ top: 1.5rem;
+ left: 1.5rem;
+ width: 5rem;
+ height: 5rem;
+ border: 0.5rem solid $light-primary;
+ border-bottom-color: transparent;
+ border-radius: 50%;
+ display: inline-block;
+ box-sizing: border-box;
+ animation: rotation 1s linear infinite;
+ }
+}
+
+@keyframes rotation {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+.point {
+ width: 1rem;
+ height: 1rem;
+ border-radius: 50%;
+ display: block;
+ margin: 1.5rem auto;
+ position: relative;
+ color: $light-primary;
+ box-sizing: border-box;
+ animation: animloader 1s linear infinite;
+}
+
+@keyframes animloader {
+ 0% {
+ box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
+ }
+ 25% {
+ box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 2px;
+ }
+ 50% {
+ box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 2px, -38px 0 0 -2px;
+ }
+ 75% {
+ box-shadow: 14px 0 0 2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
+ }
+ 100% {
+ box-shadow: 14px 0 0 -2px, 38px 0 0 2px, -14px 0 0 -2px, -38px 0 0 -2px;
+ }
+}
\ No newline at end of file
diff --git a/src/components/shared/ModalWindow/ModalWindow.test.tsx b/src/components/shared/ModalWindow/ModalWindow.test.tsx
new file mode 100644
index 0000000..2d5b214
--- /dev/null
+++ b/src/components/shared/ModalWindow/ModalWindow.test.tsx
@@ -0,0 +1,39 @@
+import { render, fireEvent } from '@testing-library/react';
+import ModalWindow from './ModalWindow';
+
+describe('Test ModalWindow shared component', () => {
+ const onCloseMock = jest.fn();
+
+ it('Should renders children when isOpen is true', () => {
+ const { getByText } = render(
+ Modal Content
+ Modal Content
+ Modal Content
+
+
+ )}
+
+ );
+}
+
+export default ModalWindow;
diff --git a/src/components/shared/ModalWindow/index.ts b/src/components/shared/ModalWindow/index.ts
new file mode 100644
index 0000000..5b2ada6
--- /dev/null
+++ b/src/components/shared/ModalWindow/index.ts
@@ -0,0 +1,2 @@
+import ModalWindow from './ModalWindow';
+export { ModalWindow };
diff --git a/src/components/shared/ModalWindow/modalWindow.module.scss b/src/components/shared/ModalWindow/modalWindow.module.scss
new file mode 100644
index 0000000..48140fe
--- /dev/null
+++ b/src/components/shared/ModalWindow/modalWindow.module.scss
@@ -0,0 +1,36 @@
+@import '../../../styles/common';
+
+.root {
+ position: fixed;
+ display: flex;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ align-items: center;
+ justify-content: center;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 101;
+
+ &__container {
+ position: relative;
+ display: flex;
+ width: 72rem;
+ padding: 4rem;
+ flex-direction: column;
+ background-color: $light-primary;
+ border-radius: 0.8rem;
+
+ @media(max-width: 800px) {
+ width: 37rem;
+ }
+ }
+
+ &__closeBtn {
+ position: absolute;
+ @include close-btn();
+ top: 2rem;
+ right: 2rem;
+ cursor: pointer;
+ }
+}
\ No newline at end of file
diff --git a/src/components/shared/PasswordField/PasswordChecklist/PasswordChecklist.test.tsx b/src/components/shared/PasswordField/PasswordChecklist/PasswordChecklist.test.tsx
new file mode 100644
index 0000000..2013eab
--- /dev/null
+++ b/src/components/shared/PasswordField/PasswordChecklist/PasswordChecklist.test.tsx
@@ -0,0 +1,26 @@
+import { render } from '@testing-library/react';
+import { PasswordChecklist } from '.';
+
+describe('Test PasswordChecklist shared component', () => {
+ test('Should renders with all rules as invalid', () => {
+ const { container } = render(
+
+
+ Close
+
+ {children}
+
+
+ );
+}
diff --git a/src/components/shared/PasswordField/PasswordChecklist/index.ts b/src/components/shared/PasswordField/PasswordChecklist/index.ts
new file mode 100644
index 0000000..1d7a40a
--- /dev/null
+++ b/src/components/shared/PasswordField/PasswordChecklist/index.ts
@@ -0,0 +1,2 @@
+import PasswordChecklist from './PasswordChecklist.tsx';
+export { PasswordChecklist };
diff --git a/src/components/shared/PasswordField/PasswordChecklist/passwordChecklist.module.scss b/src/components/shared/PasswordField/PasswordChecklist/passwordChecklist.module.scss
new file mode 100644
index 0000000..08a583d
--- /dev/null
+++ b/src/components/shared/PasswordField/PasswordChecklist/passwordChecklist.module.scss
@@ -0,0 +1,43 @@
+@import 'src/styles/common';
+
+.rules {
+ width: 100%;
+ padding: 1.8rem 2rem;
+ background-color: rgba($bullet-grey, 0.3);
+ border-radius: 1rem;
+ margin: 1.5rem 0 2rem;
+
+ &__item {
+ position: relative;
+ font-size: 1.5rem;
+ margin-bottom: -0.2rem;
+ transition: $transition-set;
+
+ &::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: calc(50% - 0.4rem);
+ width: 1rem;
+ height: 1rem;
+ border-radius: 1rem;
+ background-color: $bullet-grey;
+ }
+
+ &_valid {
+ &::before {
+ background-color: $green;
+ }
+
+ .rules__name {
+ opacity: 1;
+ }
+ }
+ }
+
+ &__name {
+ margin-left: 2rem;
+ opacity: 0.6;
+ transition: $transition-set;
+ }
+}
diff --git a/src/components/shared/PasswordField/PasswordField.tsx b/src/components/shared/PasswordField/PasswordField.tsx
new file mode 100644
index 0000000..fa03d26
--- /dev/null
+++ b/src/components/shared/PasswordField/PasswordField.tsx
@@ -0,0 +1,38 @@
+import { ReactElement, useState, MouseEvent } from 'react';
+import { InputField } from '../InputField';
+import { InputFieldProps } from '../InputField/InputField';
+import { PasswordChecklist } from './PasswordChecklist';
+import { passwordValidate } from '../../../utils/validation';
+
+import styles from './passwordField.module.scss';
+
+interface PasswordFieldProps extends Omit-
+ {rules.map((rule, index) => (
+
- + {rule.rule} + + ))} +
+
+
+ );
+}
diff --git a/src/components/shared/SelectField/index.ts b/src/components/shared/SelectField/index.ts
new file mode 100644
index 0000000..d3d6f21
--- /dev/null
+++ b/src/components/shared/SelectField/index.ts
@@ -0,0 +1,2 @@
+import SelectField from './SelectField.tsx';
+export { SelectField };
diff --git a/src/components/shared/SelectField/selectField.module.scss b/src/components/shared/SelectField/selectField.module.scss
new file mode 100644
index 0000000..dc116b9
--- /dev/null
+++ b/src/components/shared/SelectField/selectField.module.scss
@@ -0,0 +1,50 @@
+@import 'src/styles/common';
+
+.select {
+ position: relative;
+ width: 100%;
+ border-bottom: 0.1rem solid $dark;
+ margin-bottom: 1rem;
+ cursor: pointer;
+
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 1rem;
+ right: 0;
+ width: 0.8em;
+ height: 0.5em;
+ background-color: $dark;
+ clip-path: polygon(100% 0%, 0 0%, 50% 100%);
+ pointer-events: none;
+ transition: all 0.2s ease-in;
+ }
+
+ &:hover::after {
+ background-color: $primary;
+ }
+
+ &__field {
+ appearance: none;
+ -webkit-appearance: none;
+ position: relative;
+ padding: 0.5rem 0 0.5rem;
+ width: 100%;
+ display: flex;
+ flex: 1;
+ background-color: transparent;
+ color: $placeholder-grey;
+ text-transform: capitalize;
+ border: none;
+ margin: 0;
+ cursor: pointer;
+
+ &_selected {
+ color: $dark;
+ }
+
+ &:focus {
+ background-color: rgba($primary, 0.05);
+ }
+ }
+}
diff --git a/src/constant/about-teamwork.ts b/src/constant/about-teamwork.ts
new file mode 100644
index 0000000..7588c7b
--- /dev/null
+++ b/src/constant/about-teamwork.ts
@@ -0,0 +1,73 @@
+import { IContentBlock } from '../components/AboutUs/ContentBlock/ContentBlock';
+
+export const teamworkText: IContentBlock[] = [
+ {
+ title: '',
+ paragraphs: [
+ 'Hey! We are the team who has been working on this project for the past 7 weeks. We did our best to plan carefully, work collaboratively and execute meticulously to deliver visually appealing and user-friendly e-commerce web application.',
+ 'Let’s have a look at our workflow and the approaches we used to make them work for our team.',
+ ],
+ result: '',
+ },
+ {
+ title: 'Project Kickoff',
+ paragraphs: [
+ 'We did this meeting right before Sprint 1 started. The goal was to understand the project’s scope and requirements, as well as each others thoughts and expectations. We discussed tech stack, collaborative tools and shared ideas about the workflow and communication. Also we took time to agree on the project’s topic.',
+ 'We needed more than one call to cover all questions.',
+ ],
+ result: 'tech stack, collaborative tools, basic workflow and the topic are agreed on and approved.',
+ },
+ {
+ title: 'Sprint Planning',
+ paragraphs: [
+ 'Every sprint started with 2 planning meetings.',
+ 'The first one was a high-level overview of the sprint’s requirements. The requirements were split into functional parts, which were assigned to each team member to carefully research, and then share the knowledge and implementation ideas with the rest of the team. This was our homework for the next planning meeting.',
+ 'The second meeting was a brief presentation of what we learned while doing the homework, and a discussion of how each of us planned to implement the assigned features.',
+ ],
+ result:
+ 'Miro board with research and plan, Trello board with assigned tasks for the sprint, new GitHub sprint branch.',
+ },
+ {
+ title: 'Daily stand-ups',
+ paragraphs: [
+ 'Daily stand-ups were our regular routine to track progress, address challenges, and adjust priorities. It was a great opportunity to keep up with everybody’s work, get help if needed and just make sure that all are safe and sane.',
+ ],
+ result: 'regular support and progress updates are shared.',
+ },
+ {
+ title: 'Development',
+ paragraphs: [
+ 'By this phase, everybody knew exactly what their scope for the current sprint was and where to start.',
+ 'So we just followed the flow: 1) break the assigned feature into manageable chunks, 2) create a new branch, 3) code with love, care and attention to details, 4) commit, 5) push, 6) pull request',
+ 'After review — approve — merge, repeat with a new branch for another feature.',
+ ],
+ result: 'pull request is pulled.',
+ },
+ {
+ title: 'Review',
+ paragraphs: [
+ 'We agreed, that any Pull Request should have been reviewed within a day max. We used GitHub to address issues and questions. If needed switched to Discord for further conversation. When all issues are solved — approve, merge.',
+ 'Nobody worked with resolving conflicts before, so for the first conflict we had a group call to share this magical experience.',
+ ],
+ result: 'new feature is merged.',
+ },
+ {
+ title: 'Sprint Closure & Deploy',
+ paragraphs: [
+ 'Before every deploy we planned a final meeting for the current sprint. Together we went through all sprint requirements and acceptance criteria, clicked through the user flow and the cross-check flow. Then, deploy — and move to the next sprint.',
+ ],
+ result: 'sprint functionality is implemented and deployed.',
+ },
+ {
+ title: 'Design',
+ paragraphs: [
+ 'The design was made on demand taking into account designer’s workload and inspiration. There was no process in there — pure chaos and pain.',
+ ],
+ result: '',
+ },
+ {
+ title: 'Collaborative Tools',
+ paragraphs: ['GitHub, Discord, Trello, Miro'],
+ result: '',
+ },
+];
diff --git a/src/constant/aboutus.ts b/src/constant/aboutus.ts
new file mode 100644
index 0000000..57a864e
--- /dev/null
+++ b/src/constant/aboutus.ts
@@ -0,0 +1,62 @@
+import { IAboutDataTabs } from '../types/interfaces';
+
+export const studentDataTabs: IAboutDataTabs[] = [
+ {
+ profilePicture: '/images/ph-elena.jpg',
+ stName: 'Elena Yaroma',
+ role: 'Front-end Developer',
+ github: 'https://github.com/ElenaYrm',
+ body: {
+ textAbout:
+ 'First of all, I try to understand task and how certain things work and thanks to that I am a fast learner. I have 1 year experience as a Front-end developer and took part in 2 real projects during this time. My current stack: HTML, CSS, Sass, JavaScript, TypeScript, React, Redux, Webpack, Vite, Jest. I am a person who always wants to expand knowledge and experience. And my next steps are to find a job and expand my knowledge in React and Angular.',
+ recommendations: [
+ 'Repository setup (Vite + React + TypeScript + Eslint + Jest)',
+ 'Github actions setup (tests and deploy on pull requests and merge)',
+ 'Work with the server SDK (Login/Register, Catalog, Cart)',
+ 'Store setting (Auth, Cart, User)',
+ 'Register form implementation (Addresses) + merge of all form parts together',
+ 'Catalog page implementation incl. Infinite scroll',
+ 'Work with React Testing Library',
+ ],
+ },
+ },
+ {
+ profilePicture: '/images/ph-german.jpg',
+ stName: 'German Gribanov',
+ role: 'Front-end Developer',
+ github: 'https://github.com/GermanGrib',
+ body: {
+ textAbout:
+ 'As Conrad Hilton said, "Success seems to be connected with action. Successful people keep moving. They make mistakes, but they don\'t quit." This was also true on our project; despite mistakes and misunderstandings, we kept moving forward, each person fulfilling their role. I consider myself fortunate to have had such a wonderful team in the final project. 99% of our successful work rests on their fragile, beautiful, feminine shoulders. I am convinced that success depends on the team.',
+ recommendations: [
+ 'Work with the server SDK (Profile)',
+ 'Store setting (User)',
+ 'Login form implementation',
+ 'Profile page implementation incl. Tabs',
+ 'About page implementation',
+ 'Trello board setup',
+ 'Work with React Testing Library',
+ ],
+ },
+ },
+ {
+ profilePicture: '/images/ph-nastia.jpg',
+ stName: 'Nastia Piven',
+ role: 'Front-end Developer',
+ github: 'https://github.com/HereEast',
+ body: {
+ textAbout:
+ 'Being a designer in tech, the most often phrase that was smashed into my face was: "That\'s impossible to implement". Then I thought — wow, I also want to have this power and impact! So here I am learning JS and finishing this project on a tech stack I\'ve never used before: React, Redux, and Jest. Also, I am interested in creative dev and looking forward to working with WebGL/Three.js, GreenSock, Processing, and more. That is LOVE — the only thing that matters.',
+ recommendations: [
+ 'Routing setup',
+ 'Register form implementation (User information) incl. Password checklist',
+ 'Work with the server SDK (Product)',
+ 'Store setting (Product, Catalog)',
+ 'Product page implementation incl. Slider',
+ 'Cart page implementation',
+ 'Project design',
+ 'Work with React Testing Library',
+ ],
+ },
+ },
+];
diff --git a/src/constant/filters.ts b/src/constant/filters.ts
new file mode 100644
index 0000000..2f29002
--- /dev/null
+++ b/src/constant/filters.ts
@@ -0,0 +1,168 @@
+import { IColorFilterItem, IFilterItem } from '../components/Filters/types';
+
+export const sizes: IFilterItem[] = [
+ {
+ label: 'Small',
+ value: 'Small',
+ },
+ {
+ label: 'Medium',
+ value: 'Medium',
+ },
+ {
+ label: 'Large',
+ value: 'Large',
+ },
+];
+
+export const colors: IColorFilterItem[] = [
+ {
+ label: 'Black',
+ value: 'black',
+ color: '#000000',
+ },
+ {
+ label: 'Blue',
+ value: 'blue',
+ color: '#0000ff',
+ },
+ {
+ label: 'Brown',
+ value: 'brown',
+ color: '#a52a2a',
+ },
+ {
+ label: 'Colorful',
+ value: 'colorful',
+ color: '#ffc56b',
+ },
+ {
+ label: 'Green',
+ value: 'green',
+ color: '#008000',
+ },
+ {
+ label: 'Grey',
+ value: 'grey',
+ color: '#808080',
+ },
+ {
+ label: 'Orange',
+ value: 'orange',
+ color: '#ffa500',
+ },
+ {
+ label: 'Pink',
+ value: 'pink',
+ color: '#ffc0cb',
+ },
+ {
+ label: 'Purple',
+ value: 'purple',
+ color: '#a020f0',
+ },
+ {
+ label: 'Red',
+ value: 'red',
+ color: '#ff0000',
+ },
+ {
+ label: 'White',
+ value: 'white',
+ color: '#ffffff',
+ },
+];
+
+export const brands: IFilterItem[] = [
+ {
+ label: 'Anish Kapoor',
+ value: 'Anish Kapoor',
+ },
+ {
+ label: 'Austin Lee',
+ value: 'Austin Lee',
+ },
+ {
+ label: 'Bob-nosa',
+ value: 'Bob-nosa',
+ },
+ {
+ label: 'Bosco Sodi',
+ value: 'Bosco Sodi',
+ },
+ {
+ label: 'Cédrix Crespel',
+ value: 'Cédrix Crespel',
+ },
+ {
+ label: 'Chung Chang-Sup',
+ value: 'Chung Chang-Sup',
+ },
+ {
+ label: 'Erin Armstrong',
+ value: 'Erin Armstrong',
+ },
+ {
+ label: 'Jeff Koons',
+ value: 'Jeff Koons',
+ },
+ {
+ label: 'Jef Verheyen',
+ value: 'Jef Verheyen',
+ },
+ {
+ label: 'Joan Mitchell',
+ value: 'Joan Mitchell',
+ },
+ {
+ label: 'John Zabawa',
+ value: 'John Zabawa',
+ },
+ {
+ label: 'KAWS',
+ value: 'KAWS',
+ },
+ {
+ label: 'Lester Johnson',
+ value: 'Lester Johnson',
+ },
+ {
+ label: 'Masoami RAKU',
+ value: 'Masoami RAKU',
+ },
+ {
+ label: 'Michel Mouffe',
+ value: 'Michel Mouffe',
+ },
+ {
+ label: 'Richard Diebenkorn',
+ value: 'Richard Diebenkorn',
+ },
+ {
+ label: 'Squeak Carnwath',
+ value: 'Squeak Carnwath',
+ },
+];
+
+export const sorting: IFilterItem[] = [
+ {
+ label: 'Recommended',
+ value: '',
+ },
+ {
+ label: 'Name: A-Z',
+ value: 'name.en-US asc',
+ },
+ {
+ label: 'Name: Z-A',
+ value: 'name.en-US desc',
+ },
+ {
+ label: 'Price: low to high',
+ value: 'price asc',
+ },
+ {
+ label: 'Price: high to low',
+ value: 'price desc',
+ },
+];
diff --git a/src/constant/index.ts b/src/constant/index.ts
new file mode 100644
index 0000000..c166063
--- /dev/null
+++ b/src/constant/index.ts
@@ -0,0 +1,8 @@
+export * from './initialForms';
+export * from './initialStates';
+export * from './selects';
+export * from './validation';
+export * from './metaData';
+export * from './requests';
+export * from './filters';
+export * from './productAccordion';
diff --git a/src/constant/initialForms.ts b/src/constant/initialForms.ts
new file mode 100644
index 0000000..f00e6ab
--- /dev/null
+++ b/src/constant/initialForms.ts
@@ -0,0 +1,57 @@
+import { IRegisterForm } from '../components/RegisterForm/RegisterForm';
+import { ILoginForm } from '../components/LoginForm/LoginForm';
+import { Input } from '../types/enums';
+import { IChangePassword } from '../components/Profile/Tabs/ThirdTab/ThirdTab';
+
+export const initialRegisterForm: IRegisterForm = {
+ user: {
+ [Input.Email]: '',
+ [Input.Password]: '',
+ [Input.FirstName]: '',
+ [Input.LastName]: '',
+ [Input.Date]: '',
+ [Input.Month]: '',
+ [Input.Year]: '',
+ },
+ shipping: {
+ [Input.Street]: '',
+ [Input.Country]: '',
+ [Input.PostalCode]: '',
+ [Input.City]: '',
+ [Input.IsDefault]: false,
+ },
+ billing: {
+ [Input.Street]: '',
+ [Input.Country]: '',
+ [Input.PostalCode]: '',
+ [Input.City]: '',
+ [Input.IsDefault]: false,
+ },
+};
+
+export const initialLoginForm: ILoginForm = {
+ [Input.Email]: '',
+ [Input.Password]: '',
+};
+
+export const initialChangePassord: IChangePassword = {
+ [Input.Password]: '',
+ [Input.NewPassword]: '',
+};
+
+export const initialEditAddresses = {
+ shipping: {
+ [Input.Street]: '',
+ [Input.Country]: '',
+ [Input.PostalCode]: '',
+ [Input.City]: '',
+ [Input.IsDefault]: false,
+ },
+ billing: {
+ [Input.Street]: '',
+ [Input.Country]: '',
+ [Input.PostalCode]: '',
+ [Input.City]: '',
+ [Input.IsDefault]: false,
+ },
+};
diff --git a/src/constant/initialProduct.ts b/src/constant/initialProduct.ts
new file mode 100644
index 0000000..492c7f4
--- /dev/null
+++ b/src/constant/initialProduct.ts
@@ -0,0 +1,23 @@
+import { IProductSlice } from '../store/product/types';
+import { IProduct } from '../types/interfaces';
+
+export const initialProduct: IProduct = {
+ artist: '',
+ title: '',
+ year: '',
+ description: '',
+ images: [],
+ price: 0,
+ discountPrice: 0,
+ productId: '',
+ medium: '',
+ dimensions: '',
+ color: '',
+ size: '',
+};
+
+export const initialProductSlice: IProductSlice = {
+ status: 'initial',
+ error: '',
+ product: initialProduct,
+};
diff --git a/src/constant/initialStates.ts b/src/constant/initialStates.ts
new file mode 100644
index 0000000..73f381a
--- /dev/null
+++ b/src/constant/initialStates.ts
@@ -0,0 +1,86 @@
+import { IUser } from '../types/interfaces';
+import { IAuthSlice } from '../store/auth/types';
+import { IProductSlice } from '../store/product/types';
+import { IProduct } from '../types/interfaces';
+import { ICatalogSlice } from '../store/catalog/types';
+import { IUserSlice } from '../store/user/types';
+import { ICart, ICartSlice } from '../store/cart/types';
+
+export const initialUser: IUser = {
+ id: '',
+ version: 0,
+ email: '',
+ firstName: '',
+ lastName: '',
+ password: '',
+ date: '',
+ month: '',
+ year: '',
+ defaultShippingAddressId: '',
+ defaultBillingAddressId: '',
+ shippingAddressIds: [],
+ billingAddressIds: [],
+ addresses: [],
+};
+
+export const initialUserState: IUserSlice = {
+ status: 'initial',
+ error: '',
+ user: initialUser,
+ isSuccess: false,
+ editStatus: 'initial',
+ editError: '',
+};
+
+export const initialProduct: IProduct = {
+ artist: '',
+ title: '',
+ year: '',
+ description: '',
+ images: [],
+ price: 0,
+ discountPrice: 0,
+ productId: '',
+ dimensions: '',
+ size: '',
+ medium: '',
+ color: '',
+};
+
+export const initialAuthState: IAuthSlice = {
+ isAuthorized: !!localStorage.getItem('art-token'),
+ isNewUser: false,
+ status: 'initial',
+ error: '',
+ userId: '',
+};
+
+export const initialProductSlice: IProductSlice = {
+ status: 'initial',
+ error: '',
+ product: initialProduct,
+};
+
+export const initialProductListSlice: ICatalogSlice = {
+ status: 'initial',
+ error: '',
+ productList: [],
+ categories: [],
+ totalProducts: 0,
+};
+
+export const initialBasket: ICart = {
+ id: '',
+ version: 0,
+ lineItems: [],
+ totalPrice: 0,
+ totalQuantity: 0,
+ codes: [],
+};
+
+export const initialCartSlice: ICartSlice = {
+ status: 'initial',
+ error: '',
+ basket: initialBasket,
+ discounts: [],
+};
diff --git a/src/constant/metaData.ts b/src/constant/metaData.ts
new file mode 100644
index 0000000..bf50386
--- /dev/null
+++ b/src/constant/metaData.ts
@@ -0,0 +1,17 @@
+const {
+ VITE_CTP_API_URL,
+ VITE_CTP_AUTH_URL,
+ VITE_CTP_CLIENT_ID,
+ VITE_CTP_CLIENT_SECRET,
+ VITE_CTP_PROJECT_KEY,
+ VITE_CTP_SCOPES,
+} = import.meta.env;
+
+export {
+ VITE_CTP_API_URL,
+ VITE_CTP_AUTH_URL,
+ VITE_CTP_CLIENT_ID,
+ VITE_CTP_CLIENT_SECRET,
+ VITE_CTP_PROJECT_KEY,
+ VITE_CTP_SCOPES,
+};
diff --git a/src/constant/productAccordion.ts b/src/constant/productAccordion.ts
new file mode 100644
index 0000000..3ed3568
--- /dev/null
+++ b/src/constant/productAccordion.ts
@@ -0,0 +1,17 @@
+export const productAccordionData = [
+ {
+ title: 'Shipping & Taxes',
+ content:
+ 'Scoop Shipping is available for all artworks with a secure checkout option on our platform. Once selected, gallery partners have 5-7 business days to prepare and pack the order for shipping. Ships from New York, NY, US. Taxes may apply at checkout.',
+ },
+ {
+ title: 'Cancellation Policy and Returns',
+ content:
+ 'If you have changed your mind about an order made via Buy Now or Make an Offer, you may submit a cancellation request within 24 hours of order confirmation.',
+ },
+ {
+ title: 'About Scoop',
+ content:
+ 'Scoop is for art collecting ⸂⸂⸜(രᴗര๑)⸝⸃⸃.\n As the leading marketplace for art by the world’s emerging and established artists, we’ve made it easy for new and experienced collectors to discover, buy, and sell art—and so much more. Everything you’ll ever need to collect art, you’ll find on Scoop.',
+ },
+];
diff --git a/src/constant/profile.tsx b/src/constant/profile.tsx
new file mode 100644
index 0000000..2d87cc0
--- /dev/null
+++ b/src/constant/profile.tsx
@@ -0,0 +1,22 @@
+import { ITabsList } from '../types/interfaces';
+import { FirstTab } from '../components/Profile/Tabs/FirstTab';
+import { SecondTab } from '../components/Profile/Tabs/SecondTab';
+import { ThirdTab } from '../components/Profile/Tabs/ThirdTab';
+
+export const tabsList: ITabsList[] = [
+ {
+ label: 'PERSONAL INFORMATION',
+ content:
+
+ );
+}
+
+export default AboutUs;
diff --git a/src/pages/AboutUs/aboutUs.module.scss b/src/pages/AboutUs/aboutUs.module.scss
new file mode 100644
index 0000000..898c04b
--- /dev/null
+++ b/src/pages/AboutUs/aboutUs.module.scss
@@ -0,0 +1,7 @@
+.root {
+ padding: 10rem 2rem 0;
+
+ @media(max-width: 480px) {
+ padding: 8rem 1rem 0;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/AboutUs/index.ts b/src/pages/AboutUs/index.ts
new file mode 100644
index 0000000..0cce2a5
--- /dev/null
+++ b/src/pages/AboutUs/index.ts
@@ -0,0 +1,2 @@
+import AboutUs from './AboutUs';
+export { AboutUs };
diff --git a/src/pages/Cart/Cart.test.tsx b/src/pages/Cart/Cart.test.tsx
new file mode 100644
index 0000000..5c7c4c5
--- /dev/null
+++ b/src/pages/Cart/Cart.test.tsx
@@ -0,0 +1,17 @@
+// import { render, screen } from '@testing-library/react';
+// import { Cart } from './index';
+
+jest.mock('../../constant/metaData', () => {});
+jest.mock('../../services/sdk/auth/methods', () => {});
+jest.mock('../../services/sdk/product/methods', () => {});
+jest.mock('../../services/sdk/catalog/methods', () => {});
+jest.mock('../../services/sdk/customer/methods', () => {});
+jest.mock('../../services/sdk/cart/methods', () => {});
+
+describe('Test Cart page: ', () => {
+ test.todo('cart');
+ // test('should render Cart page', () => {
+ // render(
+
+
+ {isEmpty && status !== 'loading' &&
+ );
+}
diff --git a/src/pages/Cart/CartList/CartList.tsx b/src/pages/Cart/CartList/CartList.tsx
new file mode 100644
index 0000000..28a7402
--- /dev/null
+++ b/src/pages/Cart/CartList/CartList.tsx
@@ -0,0 +1,107 @@
+import { ReactElement } from 'react';
+import { Button } from '../../../components/shared/Button';
+import { ICart, IItemCart } from '../../../store/cart/types';
+import { formatPrice } from '../../../utils';
+import { useAppDispatch } from '../../../store/store';
+import { updateCartThunk } from '../../../store/cart/thunks';
+import { Link } from 'react-router-dom';
+import { PATH } from '../../../router/constants/paths';
+import { Page } from '../../../router/types';
+
+import styles from './cartList.module.scss';
+
+interface ICartListProps {
+ basket: ICart;
+ handleRemoveCartItem: (item: IItemCart) => void;
+}
+
+export default function CartList({ basket, handleRemoveCartItem }: ICartListProps): ReactElement {
+ const dispatch = useAppDispatch();
+
+ function handleAddQuantity(item: IItemCart): void {
+ if (item.quantity === 10) return;
+ updateQuantity(item, item.quantity + 1);
+ }
+
+ function handleRemoveQuantity(item: IItemCart): void {
+ if (item.quantity === 1) return;
+ updateQuantity(item, item.quantity - 1);
+ }
+
+ function updateQuantity(item: IItemCart, quantity: number): void {
+ dispatch(
+ updateCartThunk({
+ id: basket.id,
+ version: basket.version,
+ actions: [
+ {
+ action: 'changeLineItemQuantity',
+ lineItemId: item.itemId,
+ quantity: quantity,
+ },
+ ],
+ }),
+ );
+ }
+
+ return (
+
+
+ )}
+ {isConfirmPopup && (
+
+
+ Cart({basket.lineItems.length})
+
+
+ )}
+ {error &&
+
+ Are you sure you want to clear the Cart?
+
+
+ -
+ {basket.lineItems.map((item) => (
+
-
+ ++++
+
+++++ ++{item.name}
+{item.artist}
+ ++ {item.discountedPrice ? ( + {formatPrice(item.discountedPrice / 100)} + ) : null} + {formatPrice(item.price / 100)} +++ Qt: + {item.quantity} ++++++
+ ))}
+
+
+ );
+}
diff --git a/src/pages/Cart/EmptyMessage/emptyMessage.module.scss b/src/pages/Cart/EmptyMessage/emptyMessage.module.scss
new file mode 100644
index 0000000..10cce06
--- /dev/null
+++ b/src/pages/Cart/EmptyMessage/emptyMessage.module.scss
@@ -0,0 +1,29 @@
+@import '../../../styles/common/';
+
+.cart__empty {
+ width: 100%;
+ padding: 4rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ border-radius: 4rem;
+ border: 1px solid $dark;
+ margin: 8rem 2rem;
+
+ .title {
+ margin-bottom: 2rem;
+ }
+
+ .text {
+ margin-bottom: 3rem;
+ max-width: 70rem;
+ width: 100%;
+ }
+
+ .link {
+ @include btn-primary();
+ max-width: 52rem;
+ width: 100%;
+ }
+}
diff --git a/src/pages/Cart/EmptyMessage/index.ts b/src/pages/Cart/EmptyMessage/index.ts
new file mode 100644
index 0000000..512d858
--- /dev/null
+++ b/src/pages/Cart/EmptyMessage/index.ts
@@ -0,0 +1,2 @@
+import EmptyCart from './EmptyMessage';
+export { EmptyCart };
diff --git a/src/pages/Cart/Total/Total.tsx b/src/pages/Cart/Total/Total.tsx
new file mode 100644
index 0000000..6bb34fc
--- /dev/null
+++ b/src/pages/Cart/Total/Total.tsx
@@ -0,0 +1,178 @@
+import { ReactElement, FormEvent, useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { useAppDispatch } from '../../../store/store';
+import { updateCartThunk, getDiscountsThunk } from '../../../store/cart/thunks';
+import { selectCartData } from '../../../store/cart/selectors';
+import { Button } from '../../../components/shared/Button';
+import { IPromoCode } from '../../../store/cart/types';
+import { formatPrice } from '../../../utils';
+import { ErrorMessage } from '../../../components/shared/ErrorMessage';
+
+import styles from './total.module.scss';
+
+const DELIVERY_PRICE = 120;
+const CODE_ERROR = 'The code you entered is not valid.';
+
+export default function Total(): ReactElement {
+ const [code, setCode] = useState('');
+ const [isError, setIsError] = useState(false);
+ const [isCheckoutPopup, setIsCheckoutPopup] = useState(false);
+
+ const { basket, discounts } = useSelector(selectCartData);
+
+ const dispatch = useAppDispatch();
+
+ useEffect(() => {
+ if (discounts.length === 0) {
+ dispatch(getDiscountsThunk());
+ }
+ }, [dispatch, discounts]);
+
+ useEffect(() => {
+ if (isCheckoutPopup) {
+ document.body.style.overflow = 'hidden';
+ } else {
+ document.body.style.overflow = '';
+ }
+ }, [isCheckoutPopup]);
+
+ function getCodeName(codeId: string): string | undefined {
+ const code = discounts.find((item) => item.id === codeId);
+
+ return code?.code;
+ }
+
+ function applyCode(e: FormEventCart is empty (´•̥̥̥o•̥̥̥`)
++ We highly recommend to check out Scoop’s catalog and get some amazing art for your eyes and your soul. +
+ + To Catalog + +
+
+ );
+}
diff --git a/src/pages/Cart/Total/index.ts b/src/pages/Cart/Total/index.ts
new file mode 100644
index 0000000..4adbabe
--- /dev/null
+++ b/src/pages/Cart/Total/index.ts
@@ -0,0 +1,2 @@
+import Total from './Total';
+export { Total };
diff --git a/src/pages/Cart/Total/total.module.scss b/src/pages/Cart/Total/total.module.scss
new file mode 100644
index 0000000..276b4f9
--- /dev/null
+++ b/src/pages/Cart/Total/total.module.scss
@@ -0,0 +1,179 @@
+@import '../../../styles/common/';
+
+.total {
+ flex-shrink: 0;
+ width: 40rem;
+ height: max-content;
+ padding: 3.5rem 3rem 3rem;
+ background-color: #fff;
+ border-radius: 4rem;
+ margin-top: -2rem;
+
+ @media all and (max-width: $cart-tablet-width) {
+ width: 100%;
+ }
+
+ @media all and (max-width: 480px) {
+ padding: 3rem 2.5rem;
+ }
+
+ &__title {
+ @include font(semibold, h2, $dark);
+ margin-bottom: 2rem;
+ }
+
+ &__list {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+
+ margin-bottom: 2rem;
+
+ &_item {
+ display: flex;
+ justify-content: space-between;
+
+ &:nth-child(3) {
+ padding-bottom: 3rem;
+ }
+
+ &:last-child {
+ padding-top: 3rem;
+ border-top: 1px solid $dark;
+ font-weight: 600;
+ }
+ }
+ }
+
+ &__button_checkout {
+ width: 100%;
+ margin-bottom: 6rem;
+ }
+
+ .promo {
+ width: 100%;
+ padding: 2rem 2.5rem 2.5rem;
+ background-color: rgba($primary, 0.1);
+ border-radius: 2rem;
+ font-size: 1.8rem;
+
+ &__title {
+ font-weight: 500;
+ margin-bottom: 1rem;
+ }
+
+ &__form {
+ width: 100%;
+ display: flex;
+
+ &_input,
+ &_button {
+ height: 4.4rem;
+ border-radius: 0;
+ border: 1px solid $dark;
+ }
+
+ &_input {
+ flex-grow: 1;
+ padding: 0 1rem;
+ min-width: 100px;
+ border-right: none;
+
+ &::placeholder {
+ color: $dark;
+ opacity: 0.3;
+ }
+ }
+
+ &_button {
+ flex-shrink: 0;
+ padding: 0 1.5rem 0.2rem;
+ font-size: 1.8rem;
+ font-weight: 500;
+ background-color: $dark;
+ box-shadow: none;
+
+ &:active,
+ &:hover {
+ background-color: $primary;
+ border: 1px solid $primary;
+ }
+ }
+ }
+
+ &__codes {
+ padding-top: 2rem;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ font-size: 1.8rem;
+
+ .code__item {
+ display: flex;
+ justify-content: space-between;
+ padding: 0.4rem 1rem 0.5rem;
+ background-color: rgba($primary, 0.15);
+ border-radius: 0.6rem;
+
+ &_button {
+ height: auto;
+ background-color: transparent;
+ box-shadow: none;
+ font-size: 1.8rem;
+ color: rgba($dark, 0.3);
+
+ &:hover {
+ color: rgba($primary, 1);
+ }
+ }
+ }
+ }
+
+ &__error {
+ margin: 0.5rem 0 -0.5rem;
+ text-align: right;
+ }
+ }
+}
+
+.popup {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: rgba($dark, 0.3);
+ z-index: 100;
+
+ &__content {
+ padding: 4rem;
+ max-width: 48rem;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: $light;
+ border-radius: 4rem;
+ margin: 2rem;
+
+ @media all and (max-width: 480px) {
+ margin: 1rem;
+ padding: 3rem;
+ }
+ }
+
+ &__header {
+ text-align: center;
+ margin-bottom: 2rem;
+ }
+
+ &__button {
+ @include btn-primary();
+ width: 100%;
+ }
+}
diff --git a/src/pages/Cart/cart.module.scss b/src/pages/Cart/cart.module.scss
new file mode 100644
index 0000000..2efee45
--- /dev/null
+++ b/src/pages/Cart/cart.module.scss
@@ -0,0 +1,101 @@
+@import '../../styles/common/';
+
+.cart {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+
+ &__container {
+ width: 100%;
+ padding: 10rem 2rem 6rem;
+ display: flex;
+ justify-content: space-between;
+ gap: 3rem;
+
+ @media all and (max-width: $cart-tablet-width) {
+ flex-direction: column;
+ gap: 8rem;
+ }
+
+ @media all and (max-width: 480px) {
+ padding: 9rem 1rem 6rem;
+ }
+ }
+}
+
+.items {
+ width: 100%;
+
+ &__title {
+ @include font(semibold, h1, $dark);
+ margin-bottom: 2rem;
+ }
+
+ &__button_clear {
+ @include btn-secondary();
+ }
+}
+
+.popup {
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: rgba($dark, 0.3);
+ z-index: 100;
+
+ &__content {
+ padding: 4rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: $light;
+ border-radius: 4rem;
+ margin: 2rem;
+
+ @media all and (max-width: 480px) {
+ margin: 1rem;
+ padding: 3rem;
+ }
+ }
+
+ &__header {
+ text-align: center;
+ margin-bottom: 2rem;
+ }
+
+ &__buttons {
+ width: 100%;
+ display: flex;
+ gap: 1rem;
+
+ &_cancel {
+ @include btn-secondary();
+ flex-shrink: 0;
+ width: fit-content;
+ padding: 0 3rem;
+ }
+
+ &_confirm {
+ @include btn-primary();
+ flex-grow: 1;
+ }
+
+ @media all and (max-width: 480px) {
+ flex-direction: column-reverse;
+
+ &_cancel {
+ width: 100%;
+ }
+ }
+ }
+}
+
+.error__message {
+ @include bottom-page-message($light, $error-color);
+}
diff --git a/src/pages/Cart/index.ts b/src/pages/Cart/index.ts
new file mode 100644
index 0000000..8a1d3f9
--- /dev/null
+++ b/src/pages/Cart/index.ts
@@ -0,0 +1,2 @@
+import Cart from './Cart';
+export { Cart };
diff --git a/src/pages/Catalog/Catalog.tsx b/src/pages/Catalog/Catalog.tsx
new file mode 100644
index 0000000..4b9fde6
--- /dev/null
+++ b/src/pages/Catalog/Catalog.tsx
@@ -0,0 +1,47 @@
+import { ReactElement, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { Breadcrumbs } from '../../components/Breadcrumbs';
+import { SearchField } from '../../components/SearchField';
+import { SortingField } from '../../components/SortingField';
+import { Filters } from '../../components/Filters';
+import { ProductsList } from '../../components/ProductsList';
+import { CategoryFilter } from '../../components/Filters/CategoryFilter';
+import { ModalFilters } from './ModalFilters';
+
+import styles from './catalog.module.scss';
+
+function Catalog(): ReactElement {
+ const [searchParams, setSearchParams] = useSearchParams();
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+ Total
+-
+
- + Subtotal + {formatPrice(countSubtotal())} + +
- + Delivery + {formatPrice(DELIVERY_PRICE)} + +
- + Code Discount + {formatPrice(countCodeDiscount())} + +
- + Total + {formatPrice(basket.totalPrice / 100 + DELIVERY_PRICE)} + +
+
+ {isOpen &&
+ {}} />
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default ModalFilters;
diff --git a/src/pages/Catalog/ModalFilters/index.ts b/src/pages/Catalog/ModalFilters/index.ts
new file mode 100644
index 0000000..443739b
--- /dev/null
+++ b/src/pages/Catalog/ModalFilters/index.ts
@@ -0,0 +1,3 @@
+import ModalFilters from './ModalFilters';
+
+export { ModalFilters };
diff --git a/src/pages/Catalog/ModalFilters/modalFilters.module.scss b/src/pages/Catalog/ModalFilters/modalFilters.module.scss
new file mode 100644
index 0000000..c07b06f
--- /dev/null
+++ b/src/pages/Catalog/ModalFilters/modalFilters.module.scss
@@ -0,0 +1,31 @@
+@import 'src/styles/common';
+
+.modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 110;
+ background-color: $light-primary;
+ overflow: auto;
+ padding: 8rem 1rem;
+
+ &__title {
+ @include font(semibold, h1, $dark);
+ margin-bottom: 2rem;
+ }
+
+ &__btn {
+ @include font(semibold, p2, $dark);
+ opacity: 0.3;
+
+ position: absolute;
+ top: 2rem;
+ right: 1rem;
+ }
+
+ &__filters {
+ width: 100%;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/Catalog/catalog.module.scss b/src/pages/Catalog/catalog.module.scss
new file mode 100644
index 0000000..8ababd4
--- /dev/null
+++ b/src/pages/Catalog/catalog.module.scss
@@ -0,0 +1,101 @@
+@import 'src/styles/common';
+
+.catalog {
+ padding: 7.5rem 1.5rem;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: flex-start;
+
+ @media all and (max-width: 480px) {
+ padding-top: 5.5rem;
+ }
+
+ &__filters {
+ @media all and (max-width: 768px) {
+ display: none;
+ }
+ }
+
+ &__search {
+ width: 100%;
+ display: grid;
+ grid-template-columns: 2fr 1fr;
+ gap: 2rem;
+ margin-bottom: 3.5rem;
+
+ @media all and (max-width: 768px) {
+ margin-bottom: 2rem;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: flex-start;
+ gap: 5rem;
+ }
+ }
+
+ &__sorting {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ &__wrapper {
+ width: 100%;
+ display: grid;
+ grid-template-columns: minmax(23%, 1fr) 3fr;
+ gap: 2rem;
+
+ @media all and (max-width: 1024px) {
+ grid-template-columns: minmax(20%, 1fr) 2fr;
+ }
+
+ @media all and (max-width: 768px) {
+ display: block;
+ }
+ }
+
+ &__content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: flex-start;
+ }
+
+ &__category {
+ margin-bottom: 5rem;
+ }
+
+ &__modal {
+ position: relative;
+ display: none;
+ padding: 0.5rem 0;
+ font-weight: 600;
+ transition: color 0.3s ease-in-out;
+
+ &::after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 0.1rem;
+ left: 0;
+ bottom: 0;
+ background-color: $dark;
+ transition: background-color 0.3s ease-in-out;
+ }
+
+ &:hover {
+ color: $primary;
+
+ &::after {
+ background-color: $primary;
+ }
+ }
+
+ @media all and (max-width: 768px) {
+ display: block;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pages/Catalog/index.ts b/src/pages/Catalog/index.ts
new file mode 100644
index 0000000..7d05545
--- /dev/null
+++ b/src/pages/Catalog/index.ts
@@ -0,0 +1,3 @@
+import Catalog from './Catalog';
+
+export { Catalog };
diff --git a/src/pages/Home/Home.test.tsx b/src/pages/Home/Home.test.tsx
new file mode 100644
index 0000000..d93453a
--- /dev/null
+++ b/src/pages/Home/Home.test.tsx
@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react';
+import { Home } from '../Home';
+import * as reduxHooks from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+
+jest.mock('react-redux');
+jest.mock('../../constant/metaData', () => {});
+jest.mock('../../services/sdk/auth/methods', () => {});
+jest.mock('../../services/sdk/product/methods', () => {});
+jest.mock('../../services/sdk/catalog/methods', () => {});
+jest.mock('../../services/sdk/customer/methods', () => {});
+jest.mock('../../services/sdk/cart/methods', () => {});
+
+const useDispatchSpy = jest.spyOn(reduxHooks, 'useDispatch');
+
+describe('Test Home page: ', () => {
+ test('should render Home page without success register message', () => {
+ jest.spyOn(reduxHooks, 'useSelector').mockReturnValue(false);
+ useDispatchSpy.mockReturnValue(jest.fn());
+ const component = render(
+ Filters
+ +
+
+ );
+}
diff --git a/src/pages/Home/__snapshots__/Home.test.tsx.snap b/src/pages/Home/__snapshots__/Home.test.tsx.snap
new file mode 100644
index 0000000..b929df0
--- /dev/null
+++ b/src/pages/Home/__snapshots__/Home.test.tsx.snap
@@ -0,0 +1,505 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Home page: should render Home page with success register message 1`] = `
+{
+ "asFragment": [Function],
+ "baseElement":
+
+
+
+
+
+ Main
+
+
+ Catalog
+
+
+ Login
+
+
+ Register
+
+
+ Profile
+
+
+ Cart
+
+
+ About
+
+
+
+
+
+ {isNewUser && (
+
+
+ + To keep the project's concept clean, we use word ⭑"Artists"⋆｡★ instead of "Brands". +
++ For ☆｡discounted⭑ products check these artists: Cédrix Crespel, KAWS +
++ For ⭑a single image⋆｡★ in the slider check these artists: Jef Verheyen, Masoami Raku +
++ For ☆｡a promo code★ use these codes: ART (-10%) and Special (-5%) for all items in a cart +
+
+ Hello and welcome!ヾ(☆▽☆)
+
+ )}
+
+
+ ,
+ "container":
+
+
+
+
+
+
+
+
+
+ + To keep the project's concept clean, we use word ⭑ + + "Artists" + + ⋆｡★ instead of "Brands". +
++ For ☆｡ + + discounted + + ⭑ products check these artists: Cédrix Crespel, KAWS +
++ For ⭑ + + a single image + + ⋆｡★ in the slider check these artists: Jef Verheyen, Masoami Raku +
++ For ☆｡ + + a promo code + + ★ use these codes: ART (-10%) and Special (-5%) for all items in a cart +
+
+
,
+ "debug": [Function],
+ "findAllByAltText": [Function],
+ "findAllByDisplayValue": [Function],
+ "findAllByLabelText": [Function],
+ "findAllByPlaceholderText": [Function],
+ "findAllByRole": [Function],
+ "findAllByTestId": [Function],
+ "findAllByText": [Function],
+ "findAllByTitle": [Function],
+ "findByAltText": [Function],
+ "findByDisplayValue": [Function],
+ "findByLabelText": [Function],
+ "findByPlaceholderText": [Function],
+ "findByRole": [Function],
+ "findByTestId": [Function],
+ "findByText": [Function],
+ "findByTitle": [Function],
+ "getAllByAltText": [Function],
+ "getAllByDisplayValue": [Function],
+ "getAllByLabelText": [Function],
+ "getAllByPlaceholderText": [Function],
+ "getAllByRole": [Function],
+ "getAllByTestId": [Function],
+ "getAllByText": [Function],
+ "getAllByTitle": [Function],
+ "getByAltText": [Function],
+ "getByDisplayValue": [Function],
+ "getByLabelText": [Function],
+ "getByPlaceholderText": [Function],
+ "getByRole": [Function],
+ "getByTestId": [Function],
+ "getByText": [Function],
+ "getByTitle": [Function],
+ "queryAllByAltText": [Function],
+ "queryAllByDisplayValue": [Function],
+ "queryAllByLabelText": [Function],
+ "queryAllByPlaceholderText": [Function],
+ "queryAllByRole": [Function],
+ "queryAllByTestId": [Function],
+ "queryAllByText": [Function],
+ "queryAllByTitle": [Function],
+ "queryByAltText": [Function],
+ "queryByDisplayValue": [Function],
+ "queryByLabelText": [Function],
+ "queryByPlaceholderText": [Function],
+ "queryByRole": [Function],
+ "queryByTestId": [Function],
+ "queryByText": [Function],
+ "queryByTitle": [Function],
+ "rerender": [Function],
+ "unmount": [Function],
+}
+`;
+
+exports[`Test Home page: should render Home page without success register message 1`] = `
+{
+ "asFragment": [Function],
+ "baseElement":
+
+
+
+
+
+
+
+
+
+
+ + To keep the project's concept clean, we use word ⭑ + + "Artists" + + ⋆｡★ instead of "Brands". +
++ For ☆｡ + + discounted + + ⭑ products check these artists: Cédrix Crespel, KAWS +
++ For ⭑ + + a single image + + ⋆｡★ in the slider check these artists: Jef Verheyen, Masoami Raku +
++ For ☆｡ + + a promo code + + ★ use these codes: ART (-10%) and Special (-5%) for all items in a cart +
+
+
+ ,
+ "container":
+
+
+
+
+
+
+
+
+ + To keep the project's concept clean, we use word ⭑ + + "Artists" + + ⋆｡★ instead of "Brands". +
++ For ☆｡ + + discounted + + ⭑ products check these artists: Cédrix Crespel, KAWS +
++ For ⭑ + + a single image + + ⋆｡★ in the slider check these artists: Jef Verheyen, Masoami Raku +
++ For ☆｡ + + a promo code + + ★ use these codes: ART (-10%) and Special (-5%) for all items in a cart +
+
+
,
+ "debug": [Function],
+ "findAllByAltText": [Function],
+ "findAllByDisplayValue": [Function],
+ "findAllByLabelText": [Function],
+ "findAllByPlaceholderText": [Function],
+ "findAllByRole": [Function],
+ "findAllByTestId": [Function],
+ "findAllByText": [Function],
+ "findAllByTitle": [Function],
+ "findByAltText": [Function],
+ "findByDisplayValue": [Function],
+ "findByLabelText": [Function],
+ "findByPlaceholderText": [Function],
+ "findByRole": [Function],
+ "findByTestId": [Function],
+ "findByText": [Function],
+ "findByTitle": [Function],
+ "getAllByAltText": [Function],
+ "getAllByDisplayValue": [Function],
+ "getAllByLabelText": [Function],
+ "getAllByPlaceholderText": [Function],
+ "getAllByRole": [Function],
+ "getAllByTestId": [Function],
+ "getAllByText": [Function],
+ "getAllByTitle": [Function],
+ "getByAltText": [Function],
+ "getByDisplayValue": [Function],
+ "getByLabelText": [Function],
+ "getByPlaceholderText": [Function],
+ "getByRole": [Function],
+ "getByTestId": [Function],
+ "getByText": [Function],
+ "getByTitle": [Function],
+ "queryAllByAltText": [Function],
+ "queryAllByDisplayValue": [Function],
+ "queryAllByLabelText": [Function],
+ "queryAllByPlaceholderText": [Function],
+ "queryAllByRole": [Function],
+ "queryAllByTestId": [Function],
+ "queryAllByText": [Function],
+ "queryAllByTitle": [Function],
+ "queryByAltText": [Function],
+ "queryByDisplayValue": [Function],
+ "queryByLabelText": [Function],
+ "queryByPlaceholderText": [Function],
+ "queryByRole": [Function],
+ "queryByTestId": [Function],
+ "queryByText": [Function],
+ "queryByTitle": [Function],
+ "rerender": [Function],
+ "unmount": [Function],
+}
+`;
diff --git a/src/pages/Home/home.module.scss b/src/pages/Home/home.module.scss
new file mode 100644
index 0000000..6499bd8
--- /dev/null
+++ b/src/pages/Home/home.module.scss
@@ -0,0 +1,76 @@
+@import '../../styles/common/';
+
+.home {
+ padding: 10rem 2rem 8rem;
+ width: 100%;
+ height: 100%;
+ background-image: url('/images/bg-home.jpg');
+ background-size: cover;
+ background-position: left;
+ background-repeat: no-repeat;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 1rem;
+
+ &__content {
+ max-width: 52rem;
+ width: 100%;
+
+ @media all and (max-width: 480px) {
+ padding: 0 1rem;
+ }
+
+ &_container {
+ width: 100%;
+ padding: 4rem 3rem;
+ background-color: $light;
+ border-radius: 4rem;
+ border: 1px solid $dark;
+ text-align: center;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 0.5rem;
+ }
+ }
+
+ &__link {
+ @include link();
+ width: fit-content;
+ margin: 0 auto;
+ padding: 1px;
+ position: relative;
+ }
+}
+
+.info {
+ gap: 2rem;
+
+ em {
+ text-decoration: underline;
+ font-weight: 500;
+ }
+}
+
+.message {
+ max-width: 37rem;
+ width: 100%;
+ padding: 0.8rem 2rem;
+ background-color: $primary;
+ border-radius: $border-radius-btn;
+ box-shadow: 0 5px 5px rgba($dark, 0.2);
+ color: $light;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ bottom: 6rem;
+
+ transition: $transition-set;
+}
diff --git a/src/pages/Home/index.ts b/src/pages/Home/index.ts
new file mode 100644
index 0000000..a86ff67
--- /dev/null
+++ b/src/pages/Home/index.ts
@@ -0,0 +1,2 @@
+import Home from './Home';
+export { Home };
diff --git a/src/pages/Login/Login.test.tsx b/src/pages/Login/Login.test.tsx
new file mode 100644
index 0000000..7658eff
--- /dev/null
+++ b/src/pages/Login/Login.test.tsx
@@ -0,0 +1,26 @@
+import { render, screen } from '@testing-library/react';
+import * as reduxHooks from 'react-redux';
+import * as routerHooks from 'react-router-dom';
+import { Login } from './index';
+
+jest.mock('react-redux');
+jest.mock('react-router-dom');
+jest.mock('../../constant/metaData', () => {});
+jest.mock('../../services/sdk/auth/methods', () => {});
+jest.mock('../../services/sdk/product/methods', () => {});
+jest.mock('../../services/sdk/catalog/methods', () => {});
+jest.mock('../../services/sdk/customer/methods', () => {});
+jest.mock('../../services/sdk/cart/methods', () => {});
+
+const useDispatchSpy = jest.spyOn(reduxHooks, 'useDispatch');
+const useNavigateSpy = jest.spyOn(routerHooks, 'useNavigate');
+
+describe('Test Login page: ', () => {
+ test('should render Login page without error', () => {
+ useDispatchSpy.mockReturnValue(jest.fn());
+ useNavigateSpy.mockReturnValue(jest.fn());
+ const component = render(
+
+
+
+
+
+
+
+
+ + To keep the project's concept clean, we use word ⭑ + + "Artists" + + ⋆｡★ instead of "Brands". +
++ For ☆｡ + + discounted + + ⭑ products check these artists: Cédrix Crespel, KAWS +
++ For ⭑ + + a single image + + ⋆｡★ in the slider check these artists: Jef Verheyen, Masoami Raku +
++ For ☆｡ + + a promo code + + ★ use these codes: ART (-10%) and Special (-5%) for all items in a cart +
+
+
+ );
+}
diff --git a/src/pages/Login/__snapshots__/Login.test.tsx.snap b/src/pages/Login/__snapshots__/Login.test.tsx.snap
new file mode 100644
index 0000000..0afbd34
--- /dev/null
+++ b/src/pages/Login/__snapshots__/Login.test.tsx.snap
@@ -0,0 +1,228 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Login page: should render Login page without error 1`] = `
+{
+ "asFragment": [Function],
+ "baseElement":
+
+
+
+
+
+ Register
+
+
+
+
+ Login
+ to your account
+
+
+ {error &&
+
+ ,
+ "container":
+
+
+
+
+
+
+
+
+ Login
+
+
+ to your account
+
+
+
+
+
,
+ "debug": [Function],
+ "findAllByAltText": [Function],
+ "findAllByDisplayValue": [Function],
+ "findAllByLabelText": [Function],
+ "findAllByPlaceholderText": [Function],
+ "findAllByRole": [Function],
+ "findAllByTestId": [Function],
+ "findAllByText": [Function],
+ "findAllByTitle": [Function],
+ "findByAltText": [Function],
+ "findByDisplayValue": [Function],
+ "findByLabelText": [Function],
+ "findByPlaceholderText": [Function],
+ "findByRole": [Function],
+ "findByTestId": [Function],
+ "findByText": [Function],
+ "findByTitle": [Function],
+ "getAllByAltText": [Function],
+ "getAllByDisplayValue": [Function],
+ "getAllByLabelText": [Function],
+ "getAllByPlaceholderText": [Function],
+ "getAllByRole": [Function],
+ "getAllByTestId": [Function],
+ "getAllByText": [Function],
+ "getAllByTitle": [Function],
+ "getByAltText": [Function],
+ "getByDisplayValue": [Function],
+ "getByLabelText": [Function],
+ "getByPlaceholderText": [Function],
+ "getByRole": [Function],
+ "getByTestId": [Function],
+ "getByText": [Function],
+ "getByTitle": [Function],
+ "queryAllByAltText": [Function],
+ "queryAllByDisplayValue": [Function],
+ "queryAllByLabelText": [Function],
+ "queryAllByPlaceholderText": [Function],
+ "queryAllByRole": [Function],
+ "queryAllByTestId": [Function],
+ "queryAllByText": [Function],
+ "queryAllByTitle": [Function],
+ "queryByAltText": [Function],
+ "queryByDisplayValue": [Function],
+ "queryByLabelText": [Function],
+ "queryByPlaceholderText": [Function],
+ "queryByRole": [Function],
+ "queryByTestId": [Function],
+ "queryByText": [Function],
+ "queryByTitle": [Function],
+ "rerender": [Function],
+ "unmount": [Function],
+}
+`;
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
new file mode 100644
index 0000000..518a6d4
--- /dev/null
+++ b/src/pages/Login/index.tsx
@@ -0,0 +1,2 @@
+import Login from './Login';
+export { Login };
diff --git a/src/pages/Login/login.module.scss b/src/pages/Login/login.module.scss
new file mode 100644
index 0000000..ca4d503
--- /dev/null
+++ b/src/pages/Login/login.module.scss
@@ -0,0 +1,64 @@
+@import 'src/styles/common';
+
+.login {
+ width: 100%;
+ height: 100%;
+ display: flex;
+
+ &__container {
+ width: 54rem;
+ padding: 8rem 2rem 0;
+ margin: 0 0 12rem;
+
+ @media all and (max-width: 480px) {
+ padding: 1rem 1rem 0;
+ }
+ }
+
+ &__form {
+ width: 100%;
+ }
+
+ &__link {
+ @include link();
+ display: inline-block;
+ margin-bottom: 6rem;
+ }
+
+ &__title {
+ @include font(semibold, h1, $dark);
+ margin-bottom: 3rem;
+ display: flex;
+ flex-direction: column;
+ }
+
+ &__image {
+ flex: 1;
+ background-image: url('/images/bg-form-2.jpg');
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+
+ position: relative;
+ z-index: 1000;
+ }
+}
+
+@media all and (max-width: 800px) {
+ .login {
+ flex-direction: column;
+
+ &__container {
+ max-width: 80rem;
+ width: 100%;
+ margin-bottom: 6rem;
+ }
+
+ &__image {
+ flex: auto;
+ width: 100%;
+ height: 40rem;
+ background-position: top;
+ }
+ }
+}
diff --git a/src/pages/NotFound/NotFound.test.tsx b/src/pages/NotFound/NotFound.test.tsx
new file mode 100644
index 0000000..ae87d0f
--- /dev/null
+++ b/src/pages/NotFound/NotFound.test.tsx
@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import userEvent from '@testing-library/user-event';
+import { NotFound } from './index';
+import { ReactElement } from 'react';
+import { PATH } from '../../router/constants/paths.ts';
+import { Page } from '../../router/types';
+
+jest.mock('../../constant/metaData', () => {});
+
+describe('Test NotFound page: ', () => {
+ test('should render NotFound page', () => {
+ const component = render(
+
+
+
+
+
+
+
+
+
+ Login
+
+
+ to your account
+
+
+
+ Main page
;
+
+ render(
+
+
+ );
+}
diff --git a/src/pages/NotFound/__snapshots__/NotFound.test.tsx.snap b/src/pages/NotFound/__snapshots__/NotFound.test.tsx.snap
new file mode 100644
index 0000000..f9b3dd9
--- /dev/null
+++ b/src/pages/NotFound/__snapshots__/NotFound.test.tsx.snap
@@ -0,0 +1,104 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test NotFound page: should render NotFound page 1`] = `
+{
+ "asFragment": [Function],
+ "baseElement":
+
+
+ Page not found (´•̥̥̥o•̥̥̥`)
+That's sad... But you know you are always welcome on the main page, right?
+ + Back to Main + +
+
+ ,
+ "container":
+
+
+
+ + Page not found (´•̥̥̥o•̥̥̥\`) +
++ That's sad... But you know you are always welcome on the main page, right? +
+ + Back to Main + +
+
,
+ "debug": [Function],
+ "findAllByAltText": [Function],
+ "findAllByDisplayValue": [Function],
+ "findAllByLabelText": [Function],
+ "findAllByPlaceholderText": [Function],
+ "findAllByRole": [Function],
+ "findAllByTestId": [Function],
+ "findAllByText": [Function],
+ "findAllByTitle": [Function],
+ "findByAltText": [Function],
+ "findByDisplayValue": [Function],
+ "findByLabelText": [Function],
+ "findByPlaceholderText": [Function],
+ "findByRole": [Function],
+ "findByTestId": [Function],
+ "findByText": [Function],
+ "findByTitle": [Function],
+ "getAllByAltText": [Function],
+ "getAllByDisplayValue": [Function],
+ "getAllByLabelText": [Function],
+ "getAllByPlaceholderText": [Function],
+ "getAllByRole": [Function],
+ "getAllByTestId": [Function],
+ "getAllByText": [Function],
+ "getAllByTitle": [Function],
+ "getByAltText": [Function],
+ "getByDisplayValue": [Function],
+ "getByLabelText": [Function],
+ "getByPlaceholderText": [Function],
+ "getByRole": [Function],
+ "getByTestId": [Function],
+ "getByText": [Function],
+ "getByTitle": [Function],
+ "queryAllByAltText": [Function],
+ "queryAllByDisplayValue": [Function],
+ "queryAllByLabelText": [Function],
+ "queryAllByPlaceholderText": [Function],
+ "queryAllByRole": [Function],
+ "queryAllByTestId": [Function],
+ "queryAllByText": [Function],
+ "queryAllByTitle": [Function],
+ "queryByAltText": [Function],
+ "queryByDisplayValue": [Function],
+ "queryByLabelText": [Function],
+ "queryByPlaceholderText": [Function],
+ "queryByRole": [Function],
+ "queryByTestId": [Function],
+ "queryByText": [Function],
+ "queryByTitle": [Function],
+ "rerender": [Function],
+ "unmount": [Function],
+}
+`;
diff --git a/src/pages/NotFound/index.ts b/src/pages/NotFound/index.ts
new file mode 100644
index 0000000..4bd391f
--- /dev/null
+++ b/src/pages/NotFound/index.ts
@@ -0,0 +1,2 @@
+import NotFound from './NotFound';
+export { NotFound };
diff --git a/src/pages/NotFound/notFound.module.scss b/src/pages/NotFound/notFound.module.scss
new file mode 100644
index 0000000..ad6612c
--- /dev/null
+++ b/src/pages/NotFound/notFound.module.scss
@@ -0,0 +1,38 @@
+@import 'src/styles/common';
+
+.notFound {
+ width: 100%;
+ height: calc(100vh - 4rem);
+ background-image: url('/images/bg-404.jpg');
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &__content {
+ max-width: 60rem;
+ width: 100%;
+ padding: 5rem;
+ background-color: $light;
+ border-radius: 4rem;
+ border: 1px solid $dark;
+ text-align: center;
+
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+ margin: 0 2rem;
+
+ @media all and (max-width: 600px) {
+ padding: 4rem;
+ margin: 0 1rem;
+ }
+ }
+
+ &__btn {
+ @include btn-primary();
+ }
+}
diff --git a/src/pages/Product/Product.tsx b/src/pages/Product/Product.tsx
new file mode 100644
index 0000000..5730d3d
--- /dev/null
+++ b/src/pages/Product/Product.tsx
@@ -0,0 +1,51 @@
+import { ReactElement, useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
+import { RootState } from '../../store/store';
+import { productThunk } from '../../store/product/thunks';
+import { useAppDispatch } from '../../store/store';
+import { Slider } from '../../components/Slider/Slider';
+import { ProductDetails } from './ProductDetails';
+import { Loader } from '../../components/shared/Loader';
+import { NotFound } from '../NotFound';
+
+import styles from './product.module.scss';
+
+export default function Product(): ReactElement {
+ const id = useParams().id || '';
+
+ const { product, status, error } = useSelector((store: RootState) => store.product);
+ const { productId } = product;
+ const dispatch = useAppDispatch();
+
+ const [fullscreen, setFullscreen] = useState(false);
+
+ function handleFullScreen(): void {
+ setFullscreen((mode) => (mode = !mode));
+ }
+
+ useEffect(() => {
+ if (productId !== id) {
+ dispatch(productThunk(id));
+ }
+ }, [id, dispatch, productId]);
+
+ useEffect(() => {
+ document.body.style.overflow = fullscreen ? 'hidden' : '';
+ }, [fullscreen]);
+
+ return (
+
+
+
+
+ + Page not found (´•̥̥̥o•̥̥̥\`) +
++ That's sad... But you know you are always welcome on the main page, right? +
+ + Back to Main + +
+ {status === 'loading' ? (
+
+ );
+}
diff --git a/src/pages/Product/ProductDetails/ProductDetails.tsx b/src/pages/Product/ProductDetails/ProductDetails.tsx
new file mode 100644
index 0000000..c2e5362
--- /dev/null
+++ b/src/pages/Product/ProductDetails/ProductDetails.tsx
@@ -0,0 +1,120 @@
+import { ReactElement, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { selectCart, selectCartError } from '../../../store/cart/selectors';
+import { useAppDispatch } from '../../../store/store';
+import { updateCartThunk } from '../../../store/cart/thunks';
+import { IProduct } from '../../../types/interfaces';
+import { formatPrice, splitToParagraphs } from '../../../utils';
+import { Button } from '../../../components/shared/Button';
+import { productAccordionData } from '../../../constant';
+import { Accordion } from '../../../components/shared/Accordion';
+import { ErrorMessage } from '../../../components/shared/ErrorMessage';
+
+import styles from './productDetails.module.scss';
+import classnames from 'classnames';
+import { resetCartError } from '../../../store/cart/slice';
+
+interface IProductDetailsProps {
+ product: IProduct;
+}
+
+export default function ProductDetails({ product }: IProductDetailsProps): ReactElement {
+ const cart = useSelector(selectCart);
+ const error = useSelector(selectCartError);
+
+ const { productId } = product;
+ const cartItem = cart.lineItems.find((item) => item.productId === productId);
+
+ const dispatch = useAppDispatch();
+
+ useEffect(() => {
+ if (error) {
+ const timer = setTimeout(() => {
+ dispatch(resetCartError());
+ }, 3000);
+
+ return () => {
+ clearTimeout(timer);
+ };
+ }
+ }, [error, dispatch]);
+
+ function addToCart(): void {
+ dispatch(
+ updateCartThunk({
+ id: cart.id,
+ version: cart.version,
+ actions: [
+ {
+ action: 'addLineItem',
+ productId,
+ variantId: 1,
+ quantity: 1,
+ },
+ ],
+ }),
+ );
+ }
+
+ function removeCartItem(): void {
+ dispatch(
+ updateCartThunk({
+ id: cart.id,
+ version: cart.version,
+ actions: [
+ {
+ action: 'removeLineItem',
+ lineItemId: cartItem?.itemId,
+ quantity: cartItem?.quantity,
+ },
+ ],
+ }),
+ );
+ }
+
+ return (
+ <>
+
+
+ {error &&
+
+ {product.artist}
++ {product.title}, {product.year} +
+
+ {product.discountPrice ? (
+ {formatPrice(product.discountPrice)}
+ ) : null}
+ {formatPrice(product.price)}
+
+
+ {!cartItem ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+ {splitToParagraphs(product.description)}
++ Technique: + {product.medium} +
++ Size: + {product.dimensions} +
+
+
+ );
+}
diff --git a/src/pages/Profile/index.ts b/src/pages/Profile/index.ts
new file mode 100644
index 0000000..5103fd5
--- /dev/null
+++ b/src/pages/Profile/index.ts
@@ -0,0 +1,2 @@
+import Profile from './Profile';
+export { Profile };
diff --git a/src/pages/Profile/profile.module.scss b/src/pages/Profile/profile.module.scss
new file mode 100644
index 0000000..b176b49
--- /dev/null
+++ b/src/pages/Profile/profile.module.scss
@@ -0,0 +1,32 @@
+@import '../../styles/common';
+
+.main__container {
+ height: 100%;
+ background-image: url('../../../public/images/bg-home.jpg');
+ background-position: center;
+ background-size: cover;
+ background-repeat: no-repeat;
+}
+
+.root {
+ margin: auto;
+ height: 100%;
+ max-width: 72rem;
+ background-color: $light-primary;
+
+ &__container {
+ padding: 4rem;
+ padding-top: 10rem;
+ position: relative;
+ height: 100%;
+
+ @media(max-width: 720px) {
+ padding: 2rem;
+ padding-top: 10rem;
+ }
+
+ @media(max-width: 480px) {
+ padding: 10rem 1rem 4rem;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pages/Profile/profileContext.tsx b/src/pages/Profile/profileContext.tsx
new file mode 100644
index 0000000..477943f
--- /dev/null
+++ b/src/pages/Profile/profileContext.tsx
@@ -0,0 +1,45 @@
+import { ReactElement, ReactNode, createContext, useContext, useState } from 'react';
+
+type EditContextType = boolean;
+type UpdateEditModeType = (value?: boolean) => void;
+
+const EditContext = createContext
+ {status === 'loading' &&
+
+ {!isEditMode &&
+ )}
+
+
+ );
+}
diff --git a/src/pages/Register/__snapshots__/Register.test.tsx.snap b/src/pages/Register/__snapshots__/Register.test.tsx.snap
new file mode 100644
index 0000000..02d617d
--- /dev/null
+++ b/src/pages/Register/__snapshots__/Register.test.tsx.snap
@@ -0,0 +1,2146 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Register page: should render Register page without error 1`] = `
+{
+ "asFragment": [Function],
+ "baseElement":
+
+
+
+
+
+ Login
+
+
+
+
+ Register
+ a new account
+
+
+ {error &&
+
+ ,
+ "container":
+
+
+
+
+
+
+
+
+ Register
+
+
+ a new account
+
+
+
+
+
,
+ "debug": [Function],
+ "findAllByAltText": [Function],
+ "findAllByDisplayValue": [Function],
+ "findAllByLabelText": [Function],
+ "findAllByPlaceholderText": [Function],
+ "findAllByRole": [Function],
+ "findAllByTestId": [Function],
+ "findAllByText": [Function],
+ "findAllByTitle": [Function],
+ "findByAltText": [Function],
+ "findByDisplayValue": [Function],
+ "findByLabelText": [Function],
+ "findByPlaceholderText": [Function],
+ "findByRole": [Function],
+ "findByTestId": [Function],
+ "findByText": [Function],
+ "findByTitle": [Function],
+ "getAllByAltText": [Function],
+ "getAllByDisplayValue": [Function],
+ "getAllByLabelText": [Function],
+ "getAllByPlaceholderText": [Function],
+ "getAllByRole": [Function],
+ "getAllByTestId": [Function],
+ "getAllByText": [Function],
+ "getAllByTitle": [Function],
+ "getByAltText": [Function],
+ "getByDisplayValue": [Function],
+ "getByLabelText": [Function],
+ "getByPlaceholderText": [Function],
+ "getByRole": [Function],
+ "getByTestId": [Function],
+ "getByText": [Function],
+ "getByTitle": [Function],
+ "queryAllByAltText": [Function],
+ "queryAllByDisplayValue": [Function],
+ "queryAllByLabelText": [Function],
+ "queryAllByPlaceholderText": [Function],
+ "queryAllByRole": [Function],
+ "queryAllByTestId": [Function],
+ "queryAllByText": [Function],
+ "queryAllByTitle": [Function],
+ "queryByAltText": [Function],
+ "queryByDisplayValue": [Function],
+ "queryByLabelText": [Function],
+ "queryByPlaceholderText": [Function],
+ "queryByRole": [Function],
+ "queryByTestId": [Function],
+ "queryByText": [Function],
+ "queryByTitle": [Function],
+ "rerender": [Function],
+ "unmount": [Function],
+}
+`;
diff --git a/src/pages/Register/index.ts b/src/pages/Register/index.ts
new file mode 100644
index 0000000..9077cd8
--- /dev/null
+++ b/src/pages/Register/index.ts
@@ -0,0 +1,2 @@
+import Register from './Register';
+export { Register };
diff --git a/src/pages/Register/register.module.scss b/src/pages/Register/register.module.scss
new file mode 100644
index 0000000..d096668
--- /dev/null
+++ b/src/pages/Register/register.module.scss
@@ -0,0 +1,64 @@
+@import 'src/styles/common';
+
+.register {
+ width: 100%;
+ height: 100%;
+ display: flex;
+
+ &__container {
+ width: 54rem;
+ padding: 8rem 2rem 0;
+ margin: 0 0 12rem;
+
+ @media all and (max-width: 480px) {
+ padding: 1rem 1rem 0;
+ }
+ }
+
+ &__form {
+ width: 100%;
+ }
+
+ &__link {
+ @include link();
+ display: inline-block;
+ margin-bottom: 6rem;
+ }
+
+ &__title {
+ @include font(semibold, h1, $dark);
+ margin-bottom: 3rem;
+ display: flex;
+ flex-direction: column;
+ }
+
+ &__image {
+ flex: 1;
+ background-image: url('/images/bg-form.jpg');
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+
+ position: relative;
+ z-index: 1000;
+ }
+}
+
+@media all and (max-width: 800px) {
+ .register {
+ flex-direction: column;
+
+ &__container {
+ max-width: 80rem;
+ width: 100%;
+ margin-bottom: 6rem;
+ }
+
+ &__image {
+ flex: auto;
+ width: 100%;
+ height: 40rem;
+ background-position: top;
+ }
+ }
+}
diff --git a/src/router/Router/Router.tsx b/src/router/Router/Router.tsx
new file mode 100644
index 0000000..3ba6966
--- /dev/null
+++ b/src/router/Router/Router.tsx
@@ -0,0 +1,43 @@
+import { ReactElement } from 'react';
+import { Routes, Route } from 'react-router-dom';
+import { Home } from '../../pages/Home';
+import { Login } from '../../pages/Login';
+import { Register } from '../../pages/Register';
+import { NotFound } from '../../pages/NotFound';
+import { Layout } from '../hoc/Layout';
+import { Cart } from '../../pages/Cart';
+import { Profile } from '../../pages/Profile';
+import { ProtectedRoute } from '../hoc/ProtectedRoute';
+import { PATH } from '../constants/paths';
+import { Page } from '../types';
+import { Product } from '../../pages/Product';
+import { Catalog } from '../../pages/Catalog';
+import { EditingProvider } from '../../pages/Profile/profileContext';
+import { AboutUs } from '../../pages/AboutUs';
+
+export default function Router(): ReactElement {
+ return (
+
+
+
+
+
+
+
+
+
+ Register
+
+
+ a new account
+
+
+
+ {protectedContent}
+ {protectedContent}
+