Release/basket about us

README.md

@@ -1,7 +1,11 @@
 # eCommerce Application
 
 Welcome to eCommerce application🛍️! This platform replicates real-world shopping experiences in a digital environment.
-The project is a part of the final task of the course [JavaScript/Front-end 2023Q4](https://rs.school/courses/javascript-mentoring-program) from the [RS School](https://rs.school/).
+The project is a part of the final task of the course [JavaScript/Front-end 2023Q4](https://rs.school/courses/javascript-mentoring-program) from the [RS School](https://rs.school/). It features the implementation of an online store for LEGO products, offering a diverse range of items. 
+
+## Deploy
+
+[codecraft-lego](https://codecraft-lego.netlify.app/)
 
 ## Key pages in the application include:
 
@@ -22,6 +26,7 @@ The project is a part of the final task of the course [JavaScript/Front-end 2023
 - Jest [docs](https://jestjs.io/docs/getting-started)
 - SCSS [docs](https://sass-lang.com/documentation/)
 - CommerceTools API [docs](https://docs.commercetools.com/api/general-concepts)
+- Materialize [dosc](https://materializecss.com/getting-started.html)
 - Teamwork tools:
   - Prettier [docs](https://prettier.io/docs/en/)
   - Husky [docs](https://typicode.github.io/husky/)

package.json

@@ -66,6 +66,7 @@
   "dependencies": {
     "@commercetools/platform-sdk": "^7.8.0",
     "@commercetools/sdk-client-v2": "^2.5.0",
+    "@commercetools/sdk-middleware-auth": "^7.0.1",
     "@types/node-fetch": "^2.6.11",
     "dotenv": "^16.4.5",
     "isomorphic-fetch": "^3.0.0",

src/app/app.ts

@@ -1,4 +1,7 @@
+import currentCart from '@services/current-cart';
 import isPageAccessable from '@utils/access-control';
+import CookieManager from '@utils/cookie';
+
 import {
   Error404,
   MainPageView,
@@ -10,6 +13,9 @@ import {
   MainView,
   FooterView,
   ProductPageView,
+  BasketPageView,
+  AboutUsView,
+  PasswordChangeView,
 } from '@views/index';
 
 type Page =
@@ -18,7 +24,9 @@ type Page =
   | RegistrationView
   | LoginView
   | ProfileView
-  | CatalogPageView;
+  | CatalogPageView
+  | AboutUsView
+  | PasswordChangeView;
 
 class App {
   private headerView: HeaderView;
@@ -35,6 +43,9 @@ class App {
 
     window.addEventListener('hashchange', this.route);
     window.addEventListener('load', this.route);
+
+    const userId = CookieManager.getUserId();
+    currentCart.initCurrentCart(userId);
   }
 
   private addHeader(): void {
@@ -73,6 +84,7 @@ class App {
 
     if (route === 'product' && productId) {
       this.hideFooterHeader = false;
+
       this.mainView.page = new ProductPageView(productId);
     } else {
       switch (window.location.hash) {
@@ -98,11 +110,24 @@ class App {
             this.mainView.page = new ProfileView();
           }
           break;
+        case '#change':
+          if (isPageAccessable('authorized')) {
+            this.hideFooterHeader = false;
+            this.mainView.page = new PasswordChangeView();
+          }
+          break;
         case '#catalog':
           this.hideFooterHeader = false;
           this.mainView.page = new CatalogPageView();
           break;
-
+        case '#cart':
+          this.hideFooterHeader = false;
+          this.mainView.page = new BasketPageView();
+          break;
+        case '#about-us':
+          this.hideFooterHeader = false;
+          this.mainView.page = new AboutUsView();
+          break;
         case '#error':
           this.hideFooterHeader = true;
           this.mainView.page = new Error404();

src/app/components/card-component.ts

@@ -0,0 +1,38 @@
+import { BaseComponent } from './base-component';
+
+export interface ICardAttributes {
+  imageSrc?: string;
+  title?: string;
+  description?: string;
+  inputValue?: string;
+  href?: string;
+  bio?: string;
+}
+
+export class CardComponent extends BaseComponent {
+  protected card: BaseComponent;
+
+  constructor(data: Partial<ICardAttributes> = {}) {
+    const { description = '' } = data;
+
+    super({ tag: 'div', classList: ['col', 's12', 'm4', 'center-align'] });
+
+    const card = new BaseComponent({ tag: 'div', classList: ['card'] });
+    this.card = card;
+    this.appendChild(this.card);
+
+    if (description !== '') {
+      const cardContent = new BaseComponent({
+        tag: 'div',
+        classList: ['card-content'],
+      });
+      card.appendChild(cardContent);
+
+      const contentParagraph = new BaseComponent({
+        tag: 'p',
+        content: description,
+      });
+      cardContent.appendChild(contentParagraph);
+    }
+  }
+}

src/app/components/input-component.ts

@@ -18,6 +18,7 @@ export class InputComponent extends BaseComponent<HTMLInputElement> {
     mergedAttrs.type = attrs.type ? attrs.type : 'text';
     if (mergedAttrs.id) {
       this.node.id = mergedAttrs.id;
+      this.node.autocomplete = 'on';
     }
 
     if (mergedAttrs.required) {

src/app/models/cart.ts

@@ -0,0 +1,76 @@
+export interface ICartData {
+  id: string;
+  version: number;
+  createdBy: {
+    anonymousId: string;
+  };
+  customerId?: string;
+  customerEmail?: string;
+  anonymousId?: string;
+  lineItems: ILineItem[];
+  totalLineItemQuantity?: number;
+  totalPrice: ITotalPrice;
+  cartState: 'Active' | 'Merged' | 'Ordered';
+  discountCodes: IDiscountCode[];
+  discountOnTotalPrice?: IDiscountOnTotalPrice;
+}
+
+export interface ILineItem {
+  id: string;
+  productId: string;
+  name: string;
+  variant: IVariant;
+  price: IPrice;
+  quantity: number;
+  totalPrice: IMoney;
+  discountedPricePerQuantity: IDiscountedLineItemPriceForQuantity[];
+}
+
+export interface IVariant {
+  id: number;
+  sku?: string;
+  prices: IPrices[];
+  images: { url: string }[];
+}
+
+export interface IPrice {
+  value: IMoney;
+}
+
+export interface IPrices {
+  value: IMoney;
+  discounted?: IDiscounted | null;
+}
+
+export interface IMoney {
+  currencyCode: string;
+  centAmount: number;
+  fractionDigits: number;
+}
+
+export interface IDiscounted {
+  value: IMoney;
+}
+
+export interface ITotalPrice {
+  currencyCode: string;
+  centAmount: number;
+  fractionDigits: number;
+}
+
+export interface IDiscountedLineItemPriceForQuantity {
+  quantity: number;
+  discountedPrice: {
+    value: IMoney;
+  };
+}
+
+interface IDiscountCode {
+  id: string;
+  code: string;
+}
+
+interface IDiscountOnTotalPrice {
+  discount: IPrice;
+  discountedAmount: IPrice;
+}

src/app/models/customer.ts

@@ -8,7 +8,7 @@ export interface ICustomerBase {
   lastName?: string;
 }
 
-const CUSTOMER_KEY = 'codecraftCustomer';
+const CUSTOMER_KEY = 'codecraft-customer';
 
 export const saveCustomerToken = (customer: ICustomerBase) => {
   localStorage.setItem(CUSTOMER_KEY, JSON.stringify(customer));
@@ -40,6 +40,6 @@ export const customerTokenResponse = (
   return customerToken;
 };
 
-export const customerClear = () => {
+export const clearCustomer = () => {
   localStorage.removeItem(CUSTOMER_KEY);
 };

src/app/models/products.ts

@@ -15,12 +15,11 @@ export interface IAttributeProducts {
   value: string | number;
 }
 
-interface ILocalizedString {
+export interface ILocalizedString {
   [key: string]: string;
 }
 
 export interface ICurrent {
-  id: string;
   name: ILocalizedString;
   description?: ILocalizedString;
   masterVariant: {

src/app/services/add-product-cart.ts

@@ -0,0 +1,38 @@
+import { ClientResponse, Cart } from '@commercetools/platform-sdk';
+import ApiRoot from './api-root';
+
+// Отправляет запрос на добавление товара в корзину
+// При успешном добавлении товара вызывает successCallback с обновленными данными корзины
+// eslint-disable-next-line import/prefer-default-export
+export const addProductToCart = (
+  cartId: string,
+  cartVersion: number,
+  productId: string,
+  quantity: number,
+  successCallback: (cartData: Cart) => void,
+  errorCallback: (message: string) => void
+): void => {
+  ApiRoot.root
+    .carts()
+    .withId({ ID: cartId })
+    .post({
+      body: {
+        version: cartVersion,
+        actions: [
+          {
+            action: 'addLineItem',
+            productId,
+            quantity,
+          },
+        ],
+      },
+    })
+    .execute()
+    .then((response: ClientResponse<Cart>) => {
+      const cartData: Cart = response.body;
+      successCallback(cartData);
+    })
+    .catch((error: ClientResponse<{ message: string }>) => {
+      errorCallback(error.body.message);
+    });
+};