+
+ );
+};
diff --git a/src/components/ProgressBar/SkeletonCard.tsx b/src/components/ProgressBar/SkeletonCard.tsx
new file mode 100644
index 0000000..c3c497a
--- /dev/null
+++ b/src/components/ProgressBar/SkeletonCard.tsx
@@ -0,0 +1,43 @@
+import { Skeleton, Stack } from '@mui/material';
+
+export const SkeletonCard = () => (
+ {children}
+ + {isCategorySelected ? categoryName : ''} +
+
+ โฌ{discount}
+
+
)
+ : (
+
+
+ โฌ{price}
+
+
+
+ 
+
+ );
+};
diff --git a/src/components/categories/Categories.tsx b/src/components/categories/Categories.tsx
new file mode 100644
index 0000000..036fc6f
--- /dev/null
+++ b/src/components/categories/Categories.tsx
@@ -0,0 +1,52 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import type { Mapping, RootState } from '../../utils/types';
+import { useEffect } from 'react';
+import { fetchCategories } from '../../pages/catalogPage/utils/fetchCategories';
+import { setCategoriesData } from '../../slices/categoriesSlice';
+import { NavRoutes } from '../../utils/routes';
+import { CategoryCard } from '../cards/categoryCard/CategoryCard';
+
+export const Categories = () => {
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
+
+ const categories = useSelector((state: { categoriesData: RootState }) => state.categoriesData.categories);
+
+ useEffect(() => {
+ const updateData = async (): PromiseCart is empty...
+ + + +
+ {categories.map((category) => {
+ const { name, id } = category;
+ return (
+ {
+ navigate({ pathname: routes[name] });
+ }}
+ />
+ );
+ })}
+
+ );
+};
diff --git a/src/components/container/Container.tsx b/src/components/container/Container.tsx
new file mode 100644
index 0000000..90b776b
--- /dev/null
+++ b/src/components/container/Container.tsx
@@ -0,0 +1,17 @@
+import type { ContainerProps } from '../../utils/types';
+import { SearchInput } from '../searchInput/SearchInput';
+import { BreadcrumbsNav } from '../breadcrumbsNav/BreadcrumbsNav';
+
+export const Container = ({ titleName }: ContainerProps) => {
+ return (
+
+
+ );
+};
diff --git a/src/components/drawer/Drawer.tsx b/src/components/drawer/Drawer.tsx
new file mode 100644
index 0000000..471e6a7
--- /dev/null
+++ b/src/components/drawer/Drawer.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Drawer from '@mui/material/Drawer';
+import Button from '@mui/material/Button';
+
+type Anchor = 'top' | 'left' | 'bottom' | 'right';
+
+export const TemporaryDrawer = ({ children }: { children: React.ReactNode }) => {
+ const [state, setState] = React.useState({
+ top: false,
+ left: false,
+ bottom: false,
+ right: false
+ });
+
+ const toggleDrawer = (anchor: Anchor, open: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
+ if (
+ event.type === 'keydown' &&
+ ((event as React.KeyboardEvent).key === 'Tab' || (event as React.KeyboardEvent).key === 'Shift')
+ ) {
+ return;
+ }
+
+ setState({ ...state, [anchor]: open });
+ };
+
+ const list = (anchor: Anchor, children: React.ReactNode | React.ReactNode[]) => (
+
+
+
+
+ {titleName}
+
+
+
+ Filter
+
+
+ ): void => {
+ const { value } = e.target;
+ setSliderValues([Number(value), endValue]);
+ setInputStart(value);
+ }}
+ />
+ ): void => {
+ e.preventDefault();
+ const { value } = e.target;
+ setUpdated(true);
+ setInputEnd(value);
+ setRawValues([startValue, Number(value)]);
+ setSliderValues([startValue, Number(value)]);
+ }}
+ />
+ {
+ handleSliderChange(event, newValue, activeThumb, rawValues, setRawValues);
+ setUpdated(true);
+ }}
+ onChangeCommitted={() => {
+ setSliderValues(rawValues);
+ }}
+ valueLabelDisplay="auto"
+ aria-labelledby="discrete-slider-restrict"
+ min={startValue}
+ max={endValue}
+ disableSwap
+ />
+
+
+ {attributesList.map(({ name, attributes }, i) => (
+ +
+
+ {t(`attributes.${name}.title`)}
+
+
+ ))}
+
+
+ {attributes.map((attr, index) => {
+ return (
+ {
+ return item.name === name && item.value === String(attr);
+ })}
+ component={CheckboxWithLabel}
+ name="attributes"
+ color="secondary"
+ key={`${String(attr)}-${index}`}
+ value={String(attr)}
+ Label={{ label: t(`attributes.${name}.${String(attr)}`) }}
+ onChange={(e: ChangeEvent) => {
+ handleChange(e);
+ setUpdated(true);
+ setSliderValues([startValue, endValue]);
+ handleCheckboxChange(
+ { name: `${name}`, value: `${String(attr)}` },
+ selectedAttributes,
+ setSelectedAttributes
+ );
+ }}
+ />
+ );
+ })}
+
+
+
+
+ )}
+
+ {checkboxes.map(([name, value]) => (
+ {
+ formik.handleChange(e.nativeEvent);
+ }}
+ defaultChecked={value}
+ />
+ }
+ label={getCheckboxLabel(name)}
+ labelPlacement="end"
+ />
+ ))}
+
+ );
+};
+
+export const AddressComponent = ({
+ onSubmit,
+ initialValues,
+ validationSchema,
+ onDelete
+}: AddressComponentProps) => {
+ const [isNewAddress, setIsNewAddress] = useState {
+ if (e.target === e.currentTarget) {
+ setIsNewAddress(false);
+ }
+ }}
+ onKeyDown={(e) => {
+ if (e.key === 'Escape') {
+ setIsNewAddress(false);
+ }
+ }}
+ role="textbox"
+ tabIndex={-1}
+ aria-labelledby="new-address"
+ >
+
+ )}
+
+ );
+ };
+
+ if (initialValues.length === 0) {
+ return (
+ <>
+
+ {
+ onSubmit(value);
+ setIsNewAddress(false);
+ }}
+ validationSchema={validationSchema}
+ formInner={AddressInner}
+ isEditable={true}
+ unsetNewForm={setIsNewAddress}
+ />
+
+ + New address +
+You have no addresses yet...
+
+
+ ))}
+
+ {address.shippingStateChecked && (
+
+ Shipping address
+
+ )}
+ {address.billingStateChecked && (
+
+ Billing address
+
+ )}
+ {address.defaultShippingAddress && (
+
+ Default shipping address
+
+ )}
+ {address.defaultBillingAddress && (
+
+ Default billing address
+
+ )}
+ {/* filler */}
+
+
+
+ );
+};
diff --git a/src/components/forms/customerProfile/customerFormData/PersonalData.tsx b/src/components/forms/customerProfile/customerFormData/PersonalData.tsx
new file mode 100644
index 0000000..7ac73c1
--- /dev/null
+++ b/src/components/forms/customerProfile/customerFormData/PersonalData.tsx
@@ -0,0 +1,18 @@
+import type { FormInnerComponent } from '../../../../utils/types';
+import { Input } from '../../inputs/Input';
+import { inputsData } from '../../inputs/inputsData';
+
+export const PersonalData: FormInnerComponent = (editable: boolean, formik) => {
+ const { firstName, lastName, date, email } = inputsData;
+
+ return [firstName, lastName, date, email].map(({ name, placeholder, type }) => (
+
+ ));
+};
diff --git a/src/components/forms/customerProfile/util/getCheckboxLabel.ts b/src/components/forms/customerProfile/util/getCheckboxLabel.ts
new file mode 100644
index 0000000..fbea5fe
--- /dev/null
+++ b/src/components/forms/customerProfile/util/getCheckboxLabel.ts
@@ -0,0 +1,14 @@
+export const getCheckboxLabel = (name: string): string => {
+ switch (name) {
+ case 'defaultShippingAddress':
+ return 'default shipping';
+ case 'defaultBillingAddress':
+ return 'default billing';
+ case 'shippingStateChecked':
+ return 'shipping';
+ case 'billingStateChecked':
+ return 'billing';
+ default:
+ return name;
+ }
+};
diff --git a/src/components/forms/customerProfile/util/getInitialValues.ts b/src/components/forms/customerProfile/util/getInitialValues.ts
new file mode 100644
index 0000000..dae3144
--- /dev/null
+++ b/src/components/forms/customerProfile/util/getInitialValues.ts
@@ -0,0 +1,78 @@
+import type { Customer } from '@commercetools/platform-sdk';
+import type { AddressesInitialValues, PersonalDataInitialValues } from '../../../../utils/types';
+import { getCountryByCode } from '../../util/getCountry';
+
+export const newAddressInitialValues = {
+ id: '',
+ country: '',
+ streetName: '',
+ postalCode: '',
+ city: '',
+ shippingStateChecked: false,
+ billingStateChecked: false,
+ defaultShippingAddress: false,
+ defaultBillingAddress: false
+};
+
+export const getPersonalDataInitialValues = (customer: Customer): PersonalDataInitialValues => {
+ return {
+ firstName: customer.firstName ?? '',
+ lastName: customer.lastName ?? '',
+ date: customer.dateOfBirth ?? '',
+ email: customer.email
+ };
+};
+
+export const getAddressesInitialValues = (customer: Customer): AddressesInitialValues[] => {
+ const {
+ addresses,
+ shippingAddressIds,
+ billingAddressIds,
+ defaultShippingAddressId,
+ defaultBillingAddressId
+ } = customer;
+
+ if (addresses.length === 0) return [] as AddressesInitialValues[];
+
+ const result = addresses.map(({ id, country, streetName, postalCode, city }) => ({
+ id: id ?? '',
+ country: getCountryByCode(country),
+ streetName: streetName ?? '',
+ postalCode: postalCode ?? '',
+ city: city ?? '',
+ shippingStateChecked: false,
+ billingStateChecked: false,
+ defaultShippingAddress: false,
+ defaultBillingAddress: false
+ }));
+
+ if (shippingAddressIds !== undefined) {
+ const indexes = shippingAddressIds.map((id) => addresses.findIndex((address) => address.id === id));
+ result.forEach((address, index) => {
+ if (indexes.includes(index)) {
+ address.shippingStateChecked = true;
+ }
+ });
+ }
+
+ if (billingAddressIds !== undefined) {
+ const indexes = billingAddressIds.map((id) => addresses.findIndex((address) => address.id === id));
+ result.forEach((address, index) => {
+ if (indexes.includes(index)) {
+ address.billingStateChecked = true;
+ }
+ });
+ }
+
+ if (defaultShippingAddressId !== undefined) {
+ const index = addresses.findIndex((address) => address.id === defaultShippingAddressId);
+ result[index].defaultShippingAddress = true;
+ }
+
+ if (defaultBillingAddressId !== undefined) {
+ const index = addresses.findIndex((address) => address.id === defaultBillingAddressId);
+ result[index].defaultBillingAddress = true;
+ }
+
+ return result;
+};
diff --git a/src/components/forms/customerProfile/util/updateMessage.ts b/src/components/forms/customerProfile/util/updateMessage.ts
new file mode 100644
index 0000000..b7cc971
--- /dev/null
+++ b/src/components/forms/customerProfile/util/updateMessage.ts
@@ -0,0 +1,6 @@
+export enum UpdateMessage {
+ error = 'Something went wrong, please try again later',
+ success = 'Updated successfully',
+ addCart = 'Product successfully added to cart',
+ delCart = 'The product was successfully removed from the cart'
+}
diff --git a/src/components/forms/inputs/AddressFieldSet.tsx b/src/components/forms/inputs/AddressFieldSet.tsx
new file mode 100644
index 0000000..aa83d29
--- /dev/null
+++ b/src/components/forms/inputs/AddressFieldSet.tsx
@@ -0,0 +1,69 @@
+import { Input } from './Input';
+import { FieldSetName, inputsData } from './inputsData';
+import type { AddressFieldSetProps } from '../../../utils/types';
+import { CountryInput } from './CountryInput';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import { useState } from 'react';
+
+const formatName = (name: string): string => {
+ return name[0].toLowerCase() + name.slice(1);
+};
+
+export const AddressFieldSet = ({ fieldSet, formik, disabled }: AddressFieldSetProps) => {
+ const [postalCodeDisabled, setPostalCodeDisabled] = useState {
+ setIsFoucus(true);
+ }}
+ onBlur={() => {
+ setIsFoucus(false);
+ }}
+ >
+
+ {
+ formik.handleChange(e);
+ setPostalCodeDisabled(false);
+ }}
+ disabled={disabled}
+ >
+
+ {countries.map(({ country }) => (
+
+ ))}
+
+
+ );
+};
diff --git a/src/components/forms/inputs/Input.tsx b/src/components/forms/inputs/Input.tsx
new file mode 100644
index 0000000..1a5e806
--- /dev/null
+++ b/src/components/forms/inputs/Input.tsx
@@ -0,0 +1,46 @@
+import { Field, ErrorMessage } from 'formik';
+import type { InputProps } from '../../../utils/types';
+import { useState } from 'react';
+import { InputClasses } from './inputsData';
+
+export const Input = ({ name, type, placeholder, formik, disabled }: InputProps) => {
+ const [isFoucus, setIsFoucus] = useState {
+ setIsFoucus(true);
+ }}
+ onBlur={() => {
+ setIsFoucus(false);
+ }}
+ >
+
+ {
+ formik.handleChange(e);
+ formik.setFieldTouched(name, true, false);
+ }
+ }
+ : {})}
+ disabled={disabled}
+ />
+
+ );
+};
diff --git a/src/components/forms/inputs/PasswordInput.tsx b/src/components/forms/inputs/PasswordInput.tsx
new file mode 100644
index 0000000..f303872
--- /dev/null
+++ b/src/components/forms/inputs/PasswordInput.tsx
@@ -0,0 +1,80 @@
+import { Field, ErrorMessage } from 'formik';
+import view from '../../../assets/view.svg';
+import noView from '../../../assets/no-view.svg';
+import { useState } from 'react';
+import type { InputProps, VisibilityIconProps } from '../../../utils/types';
+import { InputClasses } from './inputsData';
+
+const VisibilityIcon = ({ handleVisibility, passwordVisibility }: VisibilityIconProps) => {
+ return (
+
+ );
+};
+
+export const PasswordInput = ({
+ formik,
+ disabled,
+ placeholder,
+ name
+}: Pick {
+ setIsFoucus(true);
+ }}
+ onBlur={() => {
+ setIsFoucus(false);
+ }}
+ >
+
+ );
+};
diff --git a/src/components/forms/inputs/SimpleInput.tsx b/src/components/forms/inputs/SimpleInput.tsx
new file mode 100644
index 0000000..f4590c3
--- /dev/null
+++ b/src/components/forms/inputs/SimpleInput.tsx
@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import { InputClasses } from './inputsData';
+import type { InputProps } from '../../../utils/types';
+
+export const SimpleInput = ({
+ name,
+ type,
+ placeholder,
+ formik,
+ disabled,
+ onChange,
+ value,
+ onKeyDown
+}: InputProps) => {
+ const [isFoucus, setIsFoucus] = useState
+
+ {
+ formik.handleChange(e);
+ formik.setFieldTouched(name, true, false);
+ }
+ }
+ : {})}
+ disabled={disabled}
+ />
+
+ {
+ setIsFoucus(true);
+ }}
+ onBlur={() => {
+ setIsFoucus(false);
+ }}
+ >
+
+ {
+ onChange?.(event.target.value);
+ }}
+ onKeyDown={(event) => {
+ if (event.key === 'Enter') {
+ onKeyDown?.().catch((e) => {
+ Error(e);
+ });
+ }
+ }}
+ />
+
+ );
+};
diff --git a/src/components/forms/inputs/inputsData.ts b/src/components/forms/inputs/inputsData.ts
new file mode 100644
index 0000000..bf944ab
--- /dev/null
+++ b/src/components/forms/inputs/inputsData.ts
@@ -0,0 +1,76 @@
+import { minAge } from '../util/validationSchema';
+
+export const inputsData = {
+ firstName: {
+ name: 'firstName',
+ type: 'text',
+ placeholder: 'First name'
+ },
+ lastName: {
+ name: 'lastName',
+ type: 'text',
+ placeholder: 'Last name'
+ },
+ email: {
+ name: 'email',
+ type: 'text',
+ placeholder: 'Email'
+ },
+ password: {
+ name: 'password',
+ type: 'password',
+ placeholder: 'Password'
+ },
+ date: {
+ name: 'date',
+ type: 'date',
+ placeholder: 'Date of Birth'
+ },
+ addressFieldSet: {
+ city: {
+ name: 'City',
+ type: 'text',
+ placeholder: 'City'
+ },
+ postalCode: {
+ name: 'PostalCode',
+ type: 'text',
+ placeholder: 'Postal Code'
+ },
+ streetName: {
+ name: 'StreetName',
+ type: 'text',
+ placeholder: 'Street'
+ }
+ }
+};
+
+export enum FieldSetName {
+ Shipping = 'shipping',
+ Billing = 'billing'
+}
+
+export const initialValuesRegistration = {
+ firstName: '',
+ lastName: '',
+ date: minAge,
+ email: '',
+ password: '',
+ shippingStreetName: '',
+ shippingCity: '',
+ shippingPostalCode: '',
+ shippingCountry: '',
+ billingStreetName: '',
+ billingCity: '',
+ billingPostalCode: '',
+ billingCountry: '',
+ billingStateChecked: true,
+ shippingStateChecked: true
+};
+
+export enum InputClasses {
+ wrapper = 'relative w-[16rem] mb-6',
+ error = 'absolute bottom-[-1rem] left-0 text-xs italic text-red-600',
+ labelWrapper = 'absolute left-3 top-0 text-xs text-gray-500',
+ input = 'leading-tight text-gray-700 transition-all focus:border-secondary focus:outline-none disabled:border-slate-500 disabled:bg-slate-200 w-full appearance-none border-0 border-b-[1px] border-gray-500 px-3 pt-4'
+}
diff --git a/src/components/forms/util/addressDataAdapter.ts b/src/components/forms/util/addressDataAdapter.ts
new file mode 100644
index 0000000..41f276e
--- /dev/null
+++ b/src/components/forms/util/addressDataAdapter.ts
@@ -0,0 +1,72 @@
+import type { HandleSubmitWithBoth, CustomerData } from '../../../utils/types';
+import { getCountryCode } from './getCountry';
+
+enum AddressSequence {
+ Shipping = 0,
+ Billing = 1
+}
+
+const applyBillingAddress = (
+ formData: HandleSubmitWithBoth,
+ dataWithShipping: CustomerData
+): CustomerData => {
+ const result = {
+ ...dataWithShipping
+ };
+ const billingAddress = {
+ country: getCountryCode(formData.billingCountry),
+ firstName: formData.firstName,
+ lastName: formData.lastName,
+ streetName: formData.billingStreetName,
+ postalCode: formData.billingPostalCode,
+ city: formData.billingCity
+ };
+
+ result.addresses.push(billingAddress);
+ result.billingAddresses = [AddressSequence.Billing];
+
+ if (formData.billingStateChecked) {
+ result.defaultBillingAddress = AddressSequence.Billing;
+ }
+
+ return result;
+};
+
+export const addressAdapter = (formData: HandleSubmitWithBoth): CustomerData => {
+ const { firstName, lastName, date, email, password } = formData;
+ const shippingAddress = {
+ country: getCountryCode(formData.shippingCountry),
+ firstName,
+ lastName,
+ streetName: formData.shippingStreetName,
+ postalCode: formData.shippingPostalCode,
+ city: formData.shippingCity
+ };
+
+ const addresses = [shippingAddress];
+ const shippingAddresses = [AddressSequence.Shipping];
+ const billingAddresses = shippingAddresses;
+ const salutation = Math.random() > 0.5 ? 'Mr' : 'Ms';
+
+ const result: CustomerData = {
+ firstName,
+ lastName,
+ dateOfBirth: date,
+ email,
+ password,
+ addresses,
+ shippingAddresses,
+ billingAddresses,
+ salutation
+ };
+
+ if (formData.shippingStateChecked) {
+ result.defaultShippingAddress = AddressSequence.Shipping;
+ }
+
+ if (formData.billingStreetName !== '') {
+ const resultWithBilling = applyBillingAddress(formData, result);
+ return resultWithBilling;
+ }
+ return result;
+};
diff --git a/src/components/forms/util/authMessages.ts b/src/components/forms/util/authMessages.ts
new file mode 100644
index 0000000..b517f46
--- /dev/null
+++ b/src/components/forms/util/authMessages.ts
@@ -0,0 +1,8 @@
+export enum AuthMessages {
+ successRegistrationMessage = 'Registration successful',
+ successLoginMessage = 'Login successful',
+ existingCustomerError = 'There is already an existing customer with the provided email.',
+ existingCustomerMessage = 'Customer with this email already exist, login or create new account',
+ failedLoginMessage = 'Invalid email or password, please try again',
+ otherErrorMessage = 'Registration failed, please try again later'
+}
diff --git a/src/components/forms/util/countriesList.ts b/src/components/forms/util/countriesList.ts
new file mode 100644
index 0000000..5ccb09e
--- /dev/null
+++ b/src/components/forms/util/countriesList.ts
@@ -0,0 +1,642 @@
+export const countries = [
+ {
+ code: 'AX',
+ country: 'Aland Islands'
+ },
+ {
+ code: 'DZ',
+ country: 'Algeria'
+ },
+ {
+ code: 'AS',
+ country: 'American Samoa'
+ },
+ {
+ code: 'AD',
+ country: 'Andorra'
+ },
+ {
+ code: 'AR',
+ country: 'Argentina'
+ },
+ {
+ code: 'AM',
+ country: 'Armenia'
+ },
+ {
+ code: 'AU',
+ country: 'Australia'
+ },
+ {
+ code: 'AT',
+ country: 'Austria'
+ },
+ {
+ code: 'AZ',
+ country: 'Azerbaijan'
+ },
+ {
+ code: 'BH',
+ country: 'Bahrain'
+ },
+ {
+ code: 'BD',
+ country: 'Bangladesh'
+ },
+ {
+ code: 'BB',
+ country: 'Barbados'
+ },
+ {
+ code: 'BY',
+ country: 'Belarus'
+ },
+ {
+ code: 'BE',
+ country: 'Belgium'
+ },
+ {
+ code: 'BM',
+ country: 'Bermuda'
+ },
+ {
+ code: 'BA',
+ country: 'Bosnia And Herzegovina'
+ },
+ {
+ code: 'BR',
+ country: 'Brazil'
+ },
+ {
+ code: 'IO',
+ country: 'British Indian Ocean Territory'
+ },
+ {
+ code: 'BN',
+ country: 'Brunei Darussalam'
+ },
+ {
+ code: 'BG',
+ country: 'Bulgaria'
+ },
+ {
+ code: 'KH',
+ country: 'Cambodia'
+ },
+ {
+ code: 'CA',
+ country: 'Canada'
+ },
+ {
+ code: 'CV',
+ country: 'Cape Verde'
+ },
+ {
+ code: 'KY',
+ country: 'Cayman Islands'
+ },
+ {
+ code: 'CL',
+ country: 'Chile'
+ },
+ {
+ code: 'CN',
+ country: 'China'
+ },
+ {
+ code: 'CX',
+ country: 'Christmas Island'
+ },
+ {
+ code: 'CC',
+ country: 'Cocos (Keeling) Islands'
+ },
+ {
+ code: 'CK',
+ country: 'Cook Islands'
+ },
+ {
+ code: 'CR',
+ country: 'Costa Rica'
+ },
+ {
+ code: 'HR',
+ country: 'Croatia'
+ },
+ {
+ code: 'CY',
+ country: 'Cyprus'
+ },
+ {
+ code: 'CZ',
+ country: 'Czech Republic'
+ },
+ {
+ code: 'DK',
+ country: 'Denmark'
+ },
+ {
+ code: 'DO',
+ country: 'Dominican Republic'
+ },
+ {
+ code: 'EC',
+ country: 'Ecuador'
+ },
+ {
+ code: 'EG',
+ country: 'Egypt'
+ },
+ {
+ code: 'EE',
+ country: 'Estonia'
+ },
+ {
+ code: 'ET',
+ country: 'Ethiopia'
+ },
+ {
+ code: 'FK',
+ country: 'Falkland Islands (Malvinas)'
+ },
+ {
+ code: 'FO',
+ country: 'Faroe Islands'
+ },
+ {
+ code: 'FI',
+ country: 'Finland'
+ },
+ {
+ code: 'FR',
+ country: 'France'
+ },
+ {
+ code: 'GF',
+ country: 'French Guiana'
+ },
+ {
+ code: 'PF',
+ country: 'French Polynesia'
+ },
+ {
+ code: 'GE',
+ country: 'Georgia'
+ },
+ {
+ code: 'DE',
+ country: 'Germany'
+ },
+ {
+ code: 'GR',
+ country: 'Greece'
+ },
+ {
+ code: 'GL',
+ country: 'Greenland'
+ },
+ {
+ code: 'GP',
+ country: 'Guadeloupe'
+ },
+ {
+ code: 'GU',
+ country: 'Guam'
+ },
+ {
+ code: 'GT',
+ country: 'Guatemala'
+ },
+ {
+ code: 'GG',
+ country: 'Guernsey'
+ },
+ {
+ code: 'GN',
+ country: 'Guinea'
+ },
+ {
+ code: 'GW',
+ country: 'Guinea-Bissau'
+ },
+ {
+ code: 'HT',
+ country: 'Haiti'
+ },
+ {
+ code: 'HM',
+ country: 'Heard Island & Mcdonald Islands'
+ },
+ {
+ code: 'VA',
+ country: 'Holy See (Vatican City State)'
+ },
+ {
+ code: 'HN',
+ country: 'Honduras'
+ },
+ {
+ code: 'HU',
+ country: 'Hungary'
+ },
+ {
+ code: 'IS',
+ country: 'Iceland'
+ },
+ {
+ code: 'IN',
+ country: 'India'
+ },
+ {
+ code: 'ID',
+ country: 'Indonesia'
+ },
+ {
+ code: 'IQ',
+ country: 'Iraq'
+ },
+ {
+ code: 'IE',
+ country: 'Ireland'
+ },
+ {
+ code: 'IM',
+ country: 'Isle Of Man'
+ },
+ {
+ code: 'IL',
+ country: 'Israel'
+ },
+ {
+ code: 'IT',
+ country: 'Italy'
+ },
+ {
+ code: 'JP',
+ country: 'Japan'
+ },
+ {
+ code: 'JE',
+ country: 'Jersey'
+ },
+ {
+ code: 'JO',
+ country: 'Jordan'
+ },
+ {
+ code: 'KZ',
+ country: 'Kazakhstan'
+ },
+ {
+ code: 'KE',
+ country: 'Kenya'
+ },
+ {
+ code: 'KR',
+ country: 'Korea'
+ },
+ {
+ code: 'KW',
+ country: 'Kuwait'
+ },
+ {
+ code: 'KG',
+ country: 'Kyrgyzstan'
+ },
+ {
+ code: 'LA',
+ country: "Lao People's Democratic Republic"
+ },
+ {
+ code: 'LV',
+ country: 'Latvia'
+ },
+ {
+ code: 'LB',
+ country: 'Lebanon'
+ },
+ {
+ code: 'LS',
+ country: 'Lesotho'
+ },
+ {
+ code: 'LR',
+ country: 'Liberia'
+ },
+ {
+ code: 'LI',
+ country: 'Liechtenstein'
+ },
+ {
+ code: 'LT',
+ country: 'Lithuania'
+ },
+ {
+ code: 'LU',
+ country: 'Luxembourg'
+ },
+ {
+ code: 'MK',
+ country: 'Macedonia'
+ },
+ {
+ code: 'MG',
+ country: 'Madagascar'
+ },
+ {
+ code: 'MY',
+ country: 'Malaysia'
+ },
+ {
+ code: 'MV',
+ country: 'Maldives'
+ },
+ {
+ code: 'MT',
+ country: 'Malta'
+ },
+ {
+ code: 'MH',
+ country: 'Marshall Islands'
+ },
+ {
+ code: 'MQ',
+ country: 'Martinique'
+ },
+ {
+ code: 'MU',
+ country: 'Mauritius'
+ },
+ {
+ code: 'YT',
+ country: 'Mayotte'
+ },
+ {
+ code: 'MX',
+ country: 'Mexico'
+ },
+ {
+ code: 'FM',
+ country: 'Micronesia, Federated States Of'
+ },
+ {
+ code: 'MD',
+ country: 'Moldova'
+ },
+ {
+ code: 'MC',
+ country: 'Monaco'
+ },
+ {
+ code: 'MN',
+ country: 'Mongolia'
+ },
+ {
+ code: 'ME',
+ country: 'Montenegro'
+ },
+ {
+ code: 'MA',
+ country: 'Morocco'
+ },
+ {
+ code: 'NP',
+ country: 'Nepal'
+ },
+ {
+ code: 'NL',
+ country: 'Netherlands'
+ },
+ {
+ code: 'NC',
+ country: 'New Caledonia'
+ },
+ {
+ code: 'NZ',
+ country: 'New Zealand'
+ },
+ {
+ code: 'NI',
+ country: 'Nicaragua'
+ },
+ {
+ code: 'NE',
+ country: 'Niger'
+ },
+ {
+ code: 'NG',
+ country: 'Nigeria'
+ },
+ {
+ code: 'NF',
+ country: 'Norfolk Island'
+ },
+ {
+ code: 'MP',
+ country: 'Northern Mariana Islands'
+ },
+ {
+ code: 'NO',
+ country: 'Norway'
+ },
+ {
+ code: 'OM',
+ country: 'Oman'
+ },
+ {
+ code: 'PK',
+ country: 'Pakistan'
+ },
+ {
+ code: 'PW',
+ country: 'Palau'
+ },
+ {
+ code: 'PA',
+ country: 'Panama'
+ },
+ {
+ code: 'PG',
+ country: 'Papua New Guinea'
+ },
+ {
+ code: 'PY',
+ country: 'Paraguay'
+ },
+ {
+ code: 'PE',
+ country: 'Peru'
+ },
+ {
+ code: 'PH',
+ country: 'Philippines'
+ },
+ {
+ code: 'PN',
+ country: 'Pitcairn'
+ },
+ {
+ code: 'PL',
+ country: 'Poland'
+ },
+ {
+ code: 'PT',
+ country: 'Portugal'
+ },
+ {
+ code: 'PR',
+ country: 'Puerto Rico'
+ },
+ {
+ code: 'RE',
+ country: 'Reunion'
+ },
+ {
+ code: 'RO',
+ country: 'Romania'
+ },
+ {
+ code: 'RU',
+ country: 'Russian Federation'
+ },
+ {
+ code: 'SH',
+ country: 'Saint Helena'
+ },
+ {
+ code: 'PM',
+ country: 'Saint Pierre And Miquelon'
+ },
+ {
+ code: 'SM',
+ country: 'San Marino'
+ },
+ {
+ code: 'SA',
+ country: 'Saudi Arabia'
+ },
+ {
+ code: 'SN',
+ country: 'Senegal'
+ },
+ {
+ code: 'RS',
+ country: 'Serbia'
+ },
+ {
+ code: 'SG',
+ country: 'Singapore'
+ },
+ {
+ code: 'SK',
+ country: 'Slovakia'
+ },
+ {
+ code: 'SI',
+ country: 'Slovenia'
+ },
+ {
+ code: 'SO',
+ country: 'Somalia'
+ },
+ {
+ code: 'ZA',
+ country: 'South Africa'
+ },
+ {
+ code: 'GS',
+ country: 'South Georgia And Sandwich Isl.'
+ },
+ {
+ code: 'ES',
+ country: 'Spain'
+ },
+ {
+ code: 'LK',
+ country: 'Sri Lanka'
+ },
+ {
+ code: 'SJ',
+ country: 'Svalbard And Jan Mayen'
+ },
+ {
+ code: 'SZ',
+ country: 'Swaziland'
+ },
+ {
+ code: 'SE',
+ country: 'Sweden'
+ },
+ {
+ code: 'CH',
+ country: 'Switzerland'
+ },
+ {
+ code: 'TW',
+ country: 'Taiwan'
+ },
+ {
+ code: 'TJ',
+ country: 'Tajikistan'
+ },
+ {
+ code: 'TH',
+ country: 'Thailand'
+ },
+ {
+ code: 'TN',
+ country: 'Tunisia'
+ },
+ {
+ code: 'TR',
+ country: 'Turkey'
+ },
+ {
+ code: 'TM',
+ country: 'Turkmenistan'
+ },
+ {
+ code: 'TC',
+ country: 'Turks And Caicos Islands'
+ },
+ {
+ code: 'UA',
+ country: 'Ukraine'
+ },
+ {
+ code: 'GB',
+ country: 'United Kingdom'
+ },
+ {
+ code: 'US',
+ country: 'United States'
+ },
+ {
+ code: 'UY',
+ country: 'Uruguay'
+ },
+ {
+ code: 'UZ',
+ country: 'Uzbekistan'
+ },
+ {
+ code: 'VE',
+ country: 'Venezuela'
+ },
+ {
+ code: 'VN',
+ country: 'Viet Nam'
+ },
+ {
+ code: 'VI',
+ country: 'Virgin Islands, U.S.'
+ },
+ {
+ code: 'WF',
+ country: 'Wallis And Futuna'
+ },
+ {
+ code: 'ZM',
+ country: 'Zambia'
+ }
+];
diff --git a/src/components/forms/util/getCountry.ts b/src/components/forms/util/getCountry.ts
new file mode 100644
index 0000000..3dd5c56
--- /dev/null
+++ b/src/components/forms/util/getCountry.ts
@@ -0,0 +1,17 @@
+import { countries } from './countriesList';
+
+export const getCountryCode = (country: string): string => {
+ const selectedCountry = countries.find((countryData) => countryData.country === country);
+ if (selectedCountry === undefined) {
+ return '';
+ }
+ return selectedCountry.code;
+};
+
+export const getCountryByCode = (code: string): string => {
+ const selectedCountry = countries.find((countryData) => countryData.code === code);
+ if (selectedCountry === undefined) {
+ return '';
+ }
+ return selectedCountry.country;
+};
diff --git a/src/components/forms/util/submitFakeData.ts b/src/components/forms/util/submitFakeData.ts
new file mode 100644
index 0000000..123f0a5
--- /dev/null
+++ b/src/components/forms/util/submitFakeData.ts
@@ -0,0 +1,23 @@
+import type { HandleSubmitWithBoth } from '../../../utils/types';
+
+export const submitDataWithShipping = {
+ email: 'email@example.com',
+ password: 'Password123#',
+ firstName: 'firstName',
+ lastName: 'lastName',
+ date: '2002-01-01',
+ shippingCountry: 'Cyprus',
+ shippingStreetName: 'shippingStreetName',
+ shippingPostalCode: '1234',
+ shippingCity: 'shippingCity',
+ shippingStateChecked: true
+};
+
+export const submitDataWithBilling: HandleSubmitWithBoth = {
+ ...submitDataWithShipping,
+ billingCountry: 'Greece',
+ billingStreetName: 'billingStreetName',
+ billingPostalCode: '12345',
+ billingCity: 'billingCity',
+ billingStateChecked: true
+};
diff --git a/src/components/forms/util/validationSchema.ts b/src/components/forms/util/validationSchema.ts
new file mode 100644
index 0000000..08c4696
--- /dev/null
+++ b/src/components/forms/util/validationSchema.ts
@@ -0,0 +1,136 @@
+import * as yup from 'yup';
+import { postcodeValidator } from 'postcode-validator';
+import dayjs from 'dayjs';
+import { getCountryCode } from './getCountry';
+
+export const minAge = dayjs().subtract(18, 'year').format('YYYY-MM-DD');
+
+const email = yup
+ .string()
+ .email('Should be correctly formatted')
+ .matches(/\.[A-Z]{2,4}$/i, 'Should be correctly formatted')
+ .required('Required field');
+
+const password = yup
+ .string()
+ .min(8, 'Should contain 8 characters')
+ .matches(/[A-Z]/, 'Should contain one uppercase letter')
+ .matches(/[a-z]/, 'Should contain one lowercase letter')
+ .matches(/[0-9]/, 'Should contain one digit')
+ .matches(/[!@#$%^&*]/, 'Should contain one special character')
+ .required('Required field')
+ .test('no-leading-or-trailing-whitespace', 'Leading or trailing whitespace not allowed', (value) => {
+ return value === value.trim();
+ });
+
+export const validationsSchemaLogin = {
+ email,
+ password
+};
+
+const firstName = yup
+ .string()
+ .min(1, 'Should contain at least 1 character')
+ .matches(/^[A-Za-z]+$/, 'Numbers and symbols not allowed')
+ .trim()
+ .required('Required field');
+
+const lastName = firstName;
+
+const date = yup.date().max(minAge, 'You should be older than 18 years').required('Required field');
+
+const shippingStreetName = yup
+ .string()
+ .min(1, 'Should contain at least 1 character')
+ .trim()
+ .required('Required field');
+
+const shippingCity = yup
+ .string()
+ .min(1, 'Should contain at least 1 character')
+ .matches(/^[A-Za-z]+$/, 'Numbers and symbols not allowed')
+ .trim()
+ .required('Required field');
+
+const shippingCountry = yup.string().required('Required field');
+
+const shippingPostalCode = yup.string().when('shippingCountry', (country: string[], schema) => {
+ const code = getCountryCode(country[0]);
+ return schema
+ .test('postal-validate', 'Invalid zip code format', (value) => {
+ const currentValue = value ?? '';
+ return postcodeValidator(currentValue, code);
+ })
+ .trim()
+ .required('Required field');
+});
+
+const validationsSchemaRegistrationShipping = {
+ ...validationsSchemaLogin,
+ firstName,
+ lastName,
+ date,
+ shippingStreetName,
+ shippingCity,
+ shippingCountry,
+ shippingPostalCode
+};
+
+const billingStreetName = shippingStreetName;
+
+const billingCity = shippingCity;
+
+const billingCountry = shippingCountry;
+
+const billingPostalCode = yup.string().when('billingCountry', (country: string[], schema) => {
+ const code = getCountryCode(country[0]);
+ return schema
+ .test('postal-validate', 'Invalid zip code format', (value) => {
+ const currentValue = value ?? '';
+ return postcodeValidator(currentValue, code);
+ })
+ .trim()
+ .required('Required field');
+});
+
+const validationsSchemaRegistrationBoth = {
+ ...validationsSchemaRegistrationShipping,
+ billingStreetName,
+ billingCity,
+ billingCountry,
+ billingPostalCode
+};
+
+export const getValidationSchema = (isSameAddress: boolean): yup.AnyObjectSchema => {
+ return yup.object(
+ isSameAddress ? validationsSchemaRegistrationShipping : validationsSchemaRegistrationBoth
+ );
+};
+
+export const customerPersonalDataSchema = yup.object({
+ firstName,
+ lastName,
+ date,
+ email
+});
+
+export const customerAddressSchema = yup.object({
+ streetName: shippingStreetName,
+ city: shippingCity,
+ country: shippingCountry,
+ postalCode: yup.string().when('country', (country: string[], schema) => {
+ const code = getCountryCode(country[0]);
+ return schema
+ .test('postal-validate', 'Invalid zip code format', (value) => {
+ const currentValue = value ?? '';
+ return postcodeValidator(currentValue, code);
+ })
+ .trim()
+ .required('Required field');
+ })
+});
+
+export const passwordChangeSchema = yup.object({
+ currentPassword: password,
+ newPassword: password
+});
diff --git a/src/components/header/BurgerMenu/BurgerCloseBtn/BurgerCloseBtn.tsx b/src/components/header/BurgerMenu/BurgerCloseBtn/BurgerCloseBtn.tsx
new file mode 100644
index 0000000..4c570e9
--- /dev/null
+++ b/src/components/header/BurgerMenu/BurgerCloseBtn/BurgerCloseBtn.tsx
@@ -0,0 +1,21 @@
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import type { ClickHandlerInterface } from '../../../../utils/types';
+
+export const BurgerCloseBtn = ({ clickHandler }: ClickHandlerInterface) => {
+ return (
+
+ );
+};
diff --git a/src/components/header/BurgerMenu/BurgerMenu.tsx b/src/components/header/BurgerMenu/BurgerMenu.tsx
new file mode 100644
index 0000000..6d02739
--- /dev/null
+++ b/src/components/header/BurgerMenu/BurgerMenu.tsx
@@ -0,0 +1,42 @@
+import { Dialog } from '@headlessui/react';
+import { Logo } from '../../logo/logo';
+import { BurgerCloseBtn } from './BurgerCloseBtn/BurgerCloseBtn';
+import type { BurgerMenuProps, RootState } from '../../../utils/types';
+import { PrivateNavGroup } from '../NavBar/PrivateNavGroup';
+import { useAuth } from '../../../hooks/useAuth';
+import { useSelector } from 'react-redux';
+import { NavGroup } from '../NavBar/NavGroup';
+import { useCart } from '../../../hooks/useCart';
+
+export const BurgerMenu = ({ mobileMenuOpen, setMobileMenuOpen }: BurgerMenuProps) => {
+ const isLogged = useSelector((state: { authData: RootState }) => state.authData.isLogged);
+ const { logout } = useAuth();
+ const { cart } = useCart();
+
+ return (
+
+ );
+};
diff --git a/src/components/header/NavBar/BurgerBtn/BurgerBtn.tsx b/src/components/header/NavBar/BurgerBtn/BurgerBtn.tsx
new file mode 100644
index 0000000..1acf828
--- /dev/null
+++ b/src/components/header/NavBar/BurgerBtn/BurgerBtn.tsx
@@ -0,0 +1,21 @@
+import { Bars3Icon } from '@heroicons/react/24/outline';
+import type { ClickHandlerInterface } from '../../../../utils/types';
+
+export const BurgerBtn = ({ clickHandler }: ClickHandlerInterface) => {
+ return (
+
+ );
+};
diff --git a/src/components/header/NavBar/NavBar.tsx b/src/components/header/NavBar/NavBar.tsx
new file mode 100644
index 0000000..16f84af
--- /dev/null
+++ b/src/components/header/NavBar/NavBar.tsx
@@ -0,0 +1,35 @@
+import { useSelector } from 'react-redux';
+import { useAuth } from '../../../hooks/useAuth';
+import type { ClickHandlerInterface, RootState } from '../../../utils/types';
+import { Logo } from '../../logo/logo';
+import { BurgerBtn } from './BurgerBtn/BurgerBtn';
+import { PrivateNavGroup } from './PrivateNavGroup';
+import { NavGroup } from './NavGroup';
+import { useCart } from '../../../hooks/useCart';
+
+export const NavBar = ({ clickHandler }: ClickHandlerInterface) => {
+ const isLogged = useSelector((state: { authData: RootState }) => state.authData.isLogged);
+ const { cart } = useCart();
+ const { logout } = useAuth();
+
+ return (
+
+ );
+};
diff --git a/src/components/header/NavBar/NavGroup.tsx b/src/components/header/NavBar/NavGroup.tsx
new file mode 100644
index 0000000..3fa51a9
--- /dev/null
+++ b/src/components/header/NavBar/NavGroup.tsx
@@ -0,0 +1,28 @@
+import { links } from '../../../utils/links';
+import { Link } from 'react-router-dom';
+import type { ClickHandlerInterface } from '../../../utils/types';
+
+export const NavGroup = ({ clickHandler }: ClickHandlerInterface) => {
+ const linksData = [links.main, links.catalog, links.about];
+ return (
+ <>
+ {linksData.map((item) => (
+
+
+
+ {value === index && {children} }
+
+ );
+};
+
+export const TabsPanel = (props: TabsPanelProps) => {
+ const [tabValue, setTabValue] = useState
+
+
+
+
+
+
+ );
+};
diff --git a/src/pages/CartPage/CartPage.tsx b/src/pages/CartPage/CartPage.tsx
new file mode 100644
index 0000000..7985d45
--- /dev/null
+++ b/src/pages/CartPage/CartPage.tsx
@@ -0,0 +1,158 @@
+import { useCart } from '../../hooks/useCart';
+import { queryDiscounts } from '../../helpers/api/apiRoot';
+import { useState } from 'react';
+import { showToastMessage } from '../../helpers/showToastMessage';
+import { ProgressBar } from '../../components/ProgressBar/ProgressBar';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { SimpleInput } from '../../components/forms/inputs/SimpleInput';
+import { EmptyCart } from '../../components/cart/emptyCart';
+import { getInitialCartTotalPrice } from './utils/utils';
+import { Link } from 'react-router-dom';
+
+const priceDelim = 100;
+
+export const CartPage = () => {
+ const { updateQuantity, removeItemFromCart, cart, clearCart, applyDiscount } = useCart();
+ const [discounts, setDiscounts] = useStateMeet the team members
+
+ {team.map((member, index) => {
+ let classBlock = 'flex gap-10 items-center pb-2 lg:mb-0 max-sm:flex-col max-sm:gap-4';
+ if (index === 1) {
+ classBlock += ' flex-row-reverse';
+ }
+ return (
+
+
+
+
+ );
+ })}
+
+
+
+ 
+
+ -
+
+
+
+
+
+
+
+
+
+
+
+ + {member.name} ({member.JobTitle}) +
+{member.location}
+
+ {member.biography.split('\n').map((line, index) => (
+
+ {line}
+ ))} ++
The difficult path to success
+
+
+ Our 'console.log' team are masters, who love what they do.
++ We are all students of the wonderful + + {' '} + RS Shool.{' '} + + We were found and united into a single team by a wonderful mentor, + + {' '} + Vladislav Kutarkin + + . One final project, three unique student developers, four sprints and very little time to solve + problems. +
++ Why am I talking about unique students? At first, collaboration between us seemed difficult. We + are all very different people: different in character, we all have our own distinct ambitions, + our own presentation of information, our own different views on solving problems, different + levels of knowledge, etc. And it seemed that it was impossible to achieve goals in this team. + Conflicts often arose. This difference in potential caused disruptions in the team's work, + and it seemed that we would not reach the finish line. But when we fell, we got up and moved on, + or simply crawled along the hot sand. And when it seemed that everything was lost, we did not + give up. Perseverance and thoroughness helped us overcome any technical difficulties. +
++ However, over time we realized that our diversity of characters and ambitions could become a + strength. It was a wonderful experience working in a difficult team. We were able to replace the + shortcomings of one team member with the advantages of another member. As a result of joint + efforts, we have created an interesting project. Different characters and ambitions began to + complement each other, make the team stronger and more successful. +
++ This experience showed that in the world of software development, diversity can be the key to + success, and that even three completely different people can create something great by joining + forces. +
++ Each participant made a huge contribution to the project. The distribution of roles was carried + out jointly by all members of the online discussion team. We tried to divide the scope of work + into three equal parts so that each participant was equally involved in the project process.{' '} + {team[0].name} was developing user pages, registrations and shopping carts. {team[1].name} wrote + the catalog and login page. {team[2].name} โ product page, page about us. In this way, each + project participant will make an important contribution to achieving the common goal. Joint + efforts and cooperation of all participants as a unified approach to creating an innovative and + successful product. We gained a lot of experience working with js libraries and experience + working in a team. +
+
+ Thank you{' '}
+
+ 
+
+
+
+
+ );
+};
diff --git a/src/pages/CartPage/utils/cartStorage.ts b/src/pages/CartPage/utils/cartStorage.ts
new file mode 100644
index 0000000..009fabc
--- /dev/null
+++ b/src/pages/CartPage/utils/cartStorage.ts
@@ -0,0 +1,9 @@
+import { type Cart } from '@commercetools/platform-sdk';
+
+export const getCartFromLs = (): Cart | null => {
+ return JSON.parse(localStorage.getItem('cart') ?? 'null');
+};
+
+export const setCartToLs = (cart: Cart): void => {
+ localStorage.setItem('cart', JSON.stringify(cart));
+};
diff --git a/src/pages/CartPage/utils/createCartHandler.ts b/src/pages/CartPage/utils/createCartHandler.ts
new file mode 100644
index 0000000..1202a31
--- /dev/null
+++ b/src/pages/CartPage/utils/createCartHandler.ts
@@ -0,0 +1,10 @@
+import { type Cart } from '@commercetools/platform-sdk';
+import { createCart } from '../../../helpers/api/apiRoot';
+
+export const createCartHandler = async (customerId?: string): Promise-
+ {cart.lineItems.map((item) => {
+ const price =
+ item.variant.prices?.[0].discounted !== undefined
+ ? item.variant.prices?.[0].discounted?.value.centAmount
+ : item.variant.prices?.[0].value.centAmount;
+ if (price === undefined) throw new Error('Price is undefined');
+
+ const normalizedPrice = price / priceDelim;
+
+ return (
+
-
+
+
+
{item.name['en-US']}
+ +{ + removeItemFromCart(cart.id, cart.version, item.id, item.quantity).catch((e) => { + Error(e); + }); + }} + className="self-center hover:text-secondary sm:col-span-3" + > + ++ + Price: ++ { + updateQuantity({ + cartId: cart.id, + cartVersion: cart.version, + lineItemId: item.id, + centAmount: item.variant.prices?.[0].value.centAmount as number, + quantity: parseInt(e.target.value) + }).catch((e) => { + Error(e); + }); + }} + min={1} + /> +โฌ {normalizedPrice}
++ Subtotal: +++ โฌ {item.quantity * normalizedPrice} +
+
+ );
+ })}
+
+
+ Total price: โฌ{' '} + {cart.totalPrice.centAmount / priceDelim}{' '} + {cart.discountCodes.length > 0 && ( + {initialPrice / priceDelim} + )} +
+
+
+ );
+};
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
new file mode 100644
index 0000000..4c72151
--- /dev/null
+++ b/src/pages/MainPage.tsx
@@ -0,0 +1,296 @@
+import { useNavigate } from 'react-router-dom';
+import mainFoto from '../assets/main.webp';
+
+const HeroSection = () => {
+ const navigate = useNavigate();
+
+ return (
+ Log In
+
+
+
+ 
+
+
+
+ + Robots Unleashed. Shop the Future. +
++ We are an online store for the latest robot designs, offering a wide selection of affordable and + fashionable devices that can make your life easier. Use our solutions and your life will take on + new colors. +
+ +
+
+ + Our ideas +
+
+ 
+
+
+
+
+ Human-made robots of the future
+ September 16, 2023 ++ Our task is to share with all people in the World information about innovative robots and + robotic technologies that shape the modern and future future of our great Planet Earth. +
++ We are here to inspire, inform, and empower a growing community of robot consumers like you, + whether they are hobbyists, scientists, enthusiasts, or curious shoppers. +
++ Our friendly team of editors collects all the information from around the world you need to fuel + your high-tech lifestyle: what robots are on the market, where to buy them, how to use them and + how they get into competing products, their future in human development. +
++ In addition, on our website you have the opportunity to study new wireless nanotechnologies, the + stages of humanitys creation of artificial intelligence, and many other interesting things + designed to keep you one step ahead. +
++ We are ready to inform you about new robots of the future that will change your lifestyle! +
+
+
+
+
+
+
+ + What We Do? +
++ Our team is committed to being at the top of their game, meeting the needs of our clients and + helping new developers. +
+
+
+
+
+
+
+
+
+
+
+
+
+ + Searching of decisions +
+Selection of products to suit your requirements and goals.
+
+
+
+
+
+
+
+ Support
+Feedback 24 hours throughout the entire period of operation.
+
+
+
+
+
+
+
+ Individual approach
+Personalized service for each client.
+fillerfiller
+
+
+
+
+
+
+
+ Brand
++ We cooperate with the most famous global manufacturers in the world. +
+
+
+
+
+
+
+
+ Economically
++ Low prices. In search of the best on the market in terms of price - quality. +
+
+
+
+
+
+
+
+ Optimization
++ We think about cost optimization in every process from start to finish. +
+
+ 
+
+
+
+
+
+
+ just now
+ ++ Get 20% off + + On your next order over $50 +
+ +
+ With Code:
+ vlad20
+
+ + Offer valid until 30th September, 2023 * +
+
+ 
+
+);
diff --git a/src/pages/ProductPage/ProductPage.tsx b/src/pages/ProductPage/ProductPage.tsx
new file mode 100644
index 0000000..2e427d5
--- /dev/null
+++ b/src/pages/ProductPage/ProductPage.tsx
@@ -0,0 +1,86 @@
+import { useEffect, useState } from 'react';
+import { Carousel } from 'react-responsive-carousel';
+import 'react-responsive-carousel/lib/styles/carousel.css';
+import { getProduct } from '../../helpers/api/apiRoot';
+import { useParams } from 'react-router-dom';
+import { getProductParams } from '../catalogPage/utils/getProductParams';
+import { type ProductsDataInterface } from '../../utils/types';
+import { ModalPreview } from './component/ModalPreview';
+import { ProductDetails } from './component/ProductDetails';
+import { ProgressBar } from '../../components/ProgressBar/ProgressBar';
+
+export const Product = () => {
+ const { id } = useParams();
+ const [product, setProduct] = useStateSorry, the page you requested was not found...
+ + Go To Home + +Can't find product
;
+ const rating = product.attributes?.find((obj) => obj.name === 'rating');
+ const color = product.attributes?.find((obj) => obj.name === 'color');
+ return (
+
+
+ {product.images?.map((image) => (
+
+ ))}
+
+
+ );
+};
diff --git a/src/pages/ProductPage/component/ModalPreview.tsx b/src/pages/ProductPage/component/ModalPreview.tsx
new file mode 100644
index 0000000..4671b15
--- /dev/null
+++ b/src/pages/ProductPage/component/ModalPreview.tsx
@@ -0,0 +1,66 @@
+import { Carousel } from 'react-responsive-carousel';
+import React from 'react';
+import { type ModalPreviewProps } from '../../../utils/types';
+
+export const ModalPreview: React.FC {
+ if (e.target === e.currentTarget) {
+ setModalPreviewOpen(false);
+ }
+ }}
+ role="presentation"
+ tabIndex={-1}
+ onKeyDown={(e) => {
+ if (e.key === 'Escape') {
+ setModalPreviewOpen(false);
+ }
+ }}
+ >
+
+ );
+};
diff --git a/src/pages/ProductPage/component/ProductDetails.tsx b/src/pages/ProductPage/component/ProductDetails.tsx
new file mode 100644
index 0000000..563d370
--- /dev/null
+++ b/src/pages/ProductPage/component/ProductDetails.tsx
@@ -0,0 +1,111 @@
+import React from 'react';
+import { Button, Rating } from '@mui/material';
+import { PriceTag } from '../../../components/cards/productCard/PriceTag';
+import Box from '@mui/material/Box';
+import { type ProductDetailsProps } from '../../../utils/types';
+import { useCart } from '../../../hooks/useCart';
+import { showToastMessage } from '../../../helpers/showToastMessage';
+import { UpdateMessage } from '../../../components/forms/customerProfile/util/updateMessage';
+
+export const ProductDetails: React.FC
+
+
+ {product.images?.map((img) => (
+
+ ))}
+
+
+ Can't find cart
;
+ }
+ const productLineItem = cart.lineItems.find((lineItem) => lineItem.productId === id);
+
+ const onAdd = () => {
+ if (id == null || cart == null) return;
+
+ void addToCart({
+ cartId: cart.id,
+ cartVersion: cart.version,
+ productId: id
+ })
+ .then(() => {
+ showToastMessage(UpdateMessage.addCart, 'green');
+ })
+ .catch(() => {
+ showToastMessage(UpdateMessage.error, 'red');
+ });
+ };
+ const onRemove = () => {
+ if (productLineItem == null || cart == null) return;
+
+ void removeItemFromCart(cart.id, cart.version, productLineItem.id, productLineItem.quantity)
+ .then(() => {
+ showToastMessage(UpdateMessage.delCart, 'green');
+ })
+ .catch(() => {
+ showToastMessage(UpdateMessage.error, 'red');
+ });
+ };
+
+ return (
+
+
+ );
+};
diff --git a/src/pages/RegistrationPage.tsx b/src/pages/RegistrationPage.tsx
new file mode 100644
index 0000000..5b774b7
--- /dev/null
+++ b/src/pages/RegistrationPage.tsx
@@ -0,0 +1,19 @@
+import { RegistrationForm } from '../components/forms/RegistrationForm/RegistrationForm';
+import { initialValuesRegistration } from '../components/forms/inputs/inputsData';
+import { getValidationSchema } from '../components/forms/util/validationSchema';
+import { useAuth } from '../hooks/useAuth';
+
+export const RegistrationPage = () => {
+ const { signUp } = useAuth();
+
+ return (
+
+
+
+ {color !== undefined && (
+ {product.name}
+ {rating !== undefined && ( +
+
+
+ )}
+ {product.description}
++
+ Colours:
+ {color.value.map((colorName: string) => {
+ return (
+
+
+ );
+};
diff --git a/src/pages/UserProfilePage.tsx b/src/pages/UserProfilePage.tsx
new file mode 100644
index 0000000..bcdf063
--- /dev/null
+++ b/src/pages/UserProfilePage.tsx
@@ -0,0 +1,68 @@
+import type { Customer } from '@commercetools/platform-sdk';
+import { useSelector } from 'react-redux';
+import { CustomerPageForm } from '../components/forms/customerProfile/CustomerPageForm';
+import { AddressComponent } from '../components/forms/customerProfile/customerFormData/Address';
+import { PasswordChange } from '../components/forms/customerProfile/customerFormData/PasswordChange';
+import { PersonalData } from '../components/forms/customerProfile/customerFormData/PersonalData';
+import {
+ getPersonalDataInitialValues,
+ getAddressesInitialValues
+} from '../components/forms/customerProfile/util/getInitialValues';
+import {
+ customerPersonalDataSchema,
+ customerAddressSchema,
+ passwordChangeSchema
+} from '../components/forms/util/validationSchema';
+import { TabsPanel } from '../components/tabs/TabsPanel';
+import { useUpdateCustomer } from '../hooks/useUpdateCustomer';
+import type { RootState } from '../utils/types';
+
+export const UserProfilePage = () => {
+ const customer = useSelector((state: { authData: RootState }) => state.authData.customer) as Customer;
+ const { onPersonalDataSubmit, onAddressChangeSubmit, onPasswordChangeSubmit, onAddressDelete } =
+ useUpdateCustomer();
+ const personalDataInitialValues = getPersonalDataInitialValues(customer);
+ const passwordChangeInitialValues = {
+ currentPassword: '',
+ newPassword: ''
+ };
+ const addressInitialValues = getAddressesInitialValues(customer);
+
+ return (
+ Sign Up
+
+
+ {
+ onPersonalDataSubmit(value).catch((e) => {
+ Error(e);
+ });
+ }}
+ validationSchema={customerPersonalDataSchema}
+ formInner={PersonalData}
+ />
+ {
+ onAddressChangeSubmit(values).catch((err) => {
+ Error(err);
+ });
+ }}
+ onDelete={onAddressDelete}
+ />
+ {
+ onPasswordChangeSubmit(value).catch((e) => {
+ Error(e);
+ });
+ }}
+ validationSchema={passwordChangeSchema}
+ formInner={PasswordChange}
+ />
+
+
+ );
+};
diff --git a/src/pages/catalogPage/CatalogContent.tsx b/src/pages/catalogPage/CatalogContent.tsx
new file mode 100644
index 0000000..d0beaaf
--- /dev/null
+++ b/src/pages/catalogPage/CatalogContent.tsx
@@ -0,0 +1,132 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { useCategoryContext } from '../../hooks/useCategoryContext';
+import type { RootState } from '../../utils/types';
+import { fetchFilteredProducts } from '../../helpers/api/apiRoot';
+import { updateProductsData } from './utils/updateData';
+import { type ChangeEvent, useEffect, useState, useMemo } from 'react';
+import { ProductCard } from '../../components/cards/productCard/ProductCard';
+import { trimText } from './utils/trimText';
+import { useLocation } from 'react-router-dom';
+import { Pagination, Stack } from '@mui/material';
+import { SkeletonCard } from '../../components/ProgressBar/SkeletonCard';
+import { ProgressBar } from '../../components/ProgressBar/ProgressBar';
+
+export const CatalogContent = () => {
+ const { setCategoryName, currentFilter, setCategoryId, setCurrentFilter } = useCategoryContext();
+ const dispatch = useDispatch();
+
+ const { total, cardsData } = useSelector((state: { productsData: RootState }) => state.productsData);
+ const categories = useSelector((state: { categoriesData: RootState }) => state.categoriesData.categories);
+ const [page, setPage] = useState
+
+
+
+ )
+ );
+};
diff --git a/src/pages/catalogPage/CatalogPage.tsx b/src/pages/catalogPage/CatalogPage.tsx
new file mode 100644
index 0000000..90dab92
--- /dev/null
+++ b/src/pages/catalogPage/CatalogPage.tsx
@@ -0,0 +1,31 @@
+import '../../i18n';
+import { Container } from '../../components/container/Container';
+import { FilterBar } from '../../components/filter/FilterBar';
+import { CategoriesProveder } from '../../components/CategoriesProvider';
+import { TemporaryDrawer } from '../../components/drawer/Drawer';
+import { SortBar } from './utils/SortBar';
+import { CatalogContent } from './CatalogContent';
+import { Categories } from '../../components/categories/Categories';
+
+export const CatalogPage = () => {
+ return (
+
+ {cardsData.map((item) => {
+ const { url, name, description, priceTag, id, attributes } = item;
+ const rating = attributes?.find((obj) => obj.name === 'rating');
+ const { price, discount } = priceTag;
+ const formattedDescription = trimText(description);
+ // prettier-ignore
+ return isLoaded
+ ? (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/pages/catalogPage/utils/fetchCategories.ts b/src/pages/catalogPage/utils/fetchCategories.ts
new file mode 100644
index 0000000..7f2a5ec
--- /dev/null
+++ b/src/pages/catalogPage/utils/fetchCategories.ts
@@ -0,0 +1,14 @@
+import { getCategories } from '../../../helpers/api/apiRoot';
+import type { CategoriesList } from '../../../utils/types';
+
+export const fetchCategories = async (): Promise