Sprint 4: Basket Page, Catalog Page Enhancements, and About Us Page Implementation

README.md

@@ -8,7 +8,7 @@ This is an educational project which represents a website for sale vinyl records
 [Authors](#authors)
 
 ## About the project
-The project represents a website where you can find vinyl records, audio cassettes and compact disks with music. Each item has its own card with information. You can find a catalog with items and sort them by different parameters. You can also create and manage your personal account. It enables you to add items to the basket and proceed to checkout.
+**The project represents a website where you can find vinyl records, audio cassettes and compact disks with music.** Each product has its own **page with detailed information**. You can find all of the products on the **Catalog page**. You can add every product to a cart on the Catalog page or on the page of some particular product. All the products that have been added to the cart are displayed on the **Cart page**. On this page you can change an amount of every product or delete it or you can also clean the whole basket. This page also provides the ability to apply a promocode for discount. You have the ability to create your personal account on the **Registration page** and manage it on the **Profile page**. To log in you account use the form on the **Login page**. The backend part of the project is implemented with using the CommerceTools platform.
 
 ## How to start the application
 1. Run this command to clone the repository:
@@ -54,6 +54,8 @@ Here are scripts you can use during the interaction with the project. Run the co
 
 `test:ui` -  run Vitest providing UI for runnning tests
 
+`coverage` - check the information about test coverage of the code
+
 `format` - check the code of `.ts`, `.tsx` and `.css` files by Prettier formatter and fix all possible problems
 
 `format:check` - check the code of `.ts`, `.tsx` and `.css` files by Prettier formatter
@@ -67,11 +69,15 @@ Here are scripts you can use during the interaction with the project. Run the co
 `pre-commit` - run formatters and linters for `.ts`, `.tsx` and `.css` files
 
 `prepare` - initialize Husky in the project
-
+  
 ## The technology stack
 Here is the technology stack used for creating this application:
 - TypeScript
 - React
+- React Router
+- Zustand
+- Ant Design
+- Commercetools platform-sdk
 - Prettier
 - Eslint (with eslint-plugin-unicorn)
 - StyleLint

eCommerce-Application/.env

@@ -10,6 +10,6 @@ VITE_SCOPES=manage_project:rss-ecomm-jsfe2024q4 manage_api_clients:rss-ecomm-jsf
 
 // USER SCOPES
 
-VITE_USER_API_CLIENT_SECRET=KAk6B0aXuZHktxVbhvZRIo3Qlt4bEMbs
-VITE_USER_API_CLIENT_ID=DMZCKQOB1EjzsY6oyODvGz4_
-VITE_USER_API_SCOPES=view_categories:rss-ecomm-jsfe2024q4 view_products:rss-ecomm-jsfe2024q4 view_cart_discounts:rss-ecomm-jsfe2024q4 manage_my_profile:rss-ecomm-jsfe2024q4 manage_order_edits:rss-ecomm-jsfe2024q4 manage_orders:rss-ecomm-jsfe2024q4 manage_customers:rss-ecomm-jsfe2024q4 manage_cart_discounts:rss-ecomm-jsfe2024q4 manage_products:rss-ecomm-jsfe2024q4 manage_customer_groups:rss-ecomm-jsfe2024q4
+VITE_USER_API_CLIENT_SECRET=aY3TBDtlZNVMz9yZ7Z_9HZ-WHjCthpA-
+VITE_USER_API_CLIENT_ID=WuwGUM1Rctqt613uAaVFuUqE
+VITE_USER_API_SCOPES=view_categories:rss-ecomm-jsfe2024q4 view_sessions:rss-ecomm-jsfe2024q4 manage_sessions:rss-ecomm-jsfe2024q4 view_products:rss-ecomm-jsfe2024q4 view_standalone_prices:rss-ecomm-jsfe2024q4 view_published_products:rss-ecomm-jsfe2024q4 view_types:rss-ecomm-jsfe2024q4 manage_my_quotes:rss-ecomm-jsfe2024q4 manage_orders:rss-ecomm-jsfe2024q4 view_discount_codes:rss-ecomm-jsfe2024q4 view_project_settings:rss-ecomm-jsfe2024q4 manage_my_quote_requests:rss-ecomm-jsfe2024q4 manage_my_shopping_lists:rss-ecomm-jsfe2024q4 manage_my_payments:rss-ecomm-jsfe2024q4 view_cart_discounts:rss-ecomm-jsfe2024q4 manage_shopping_lists:rss-ecomm-jsfe2024q4 manage_products:rss-ecomm-jsfe2024q4 manage_customer_groups:rss-ecomm-jsfe2024q4 view_shipping_methods:rss-ecomm-jsfe2024q4 manage_my_profile:rss-ecomm-jsfe2024q4 manage_order_edits:rss-ecomm-jsfe2024q4 view_product_selections:rss-ecomm-jsfe2024q4 manage_my_orders:rss-ecomm-jsfe2024q4 manage_customers:rss-ecomm-jsfe2024q4 create_anonymous_token:rss-ecomm-jsfe2024q4 view_tax_categories:rss-ecomm-jsfe2024q4

eCommerce-Application/src/api/Cart/add.ts

@@ -0,0 +1,180 @@
+import {
+  ApiRoot,
+  Cart,
+  ClientResponse,
+  createApiBuilderFromCtpClient,
+  LineItemDraft,
+  ProductProjection,
+  LineItem,
+} from '@commercetools/platform-sdk';
+import {
+  // apiRoot,
+  apiRootCustomer,
+  authMiddleware,
+  client,
+  createClientWithPasswordFlow,
+  // createAuthMiddleware,
+  httpMiddleware,
+  projectKey,
+} from '../client/client';
+import { createAnonymousCustomer } from '../customer/anonymous-customer';
+import { getCart, getCartPasswordFlow } from './get';
+// import { ClientBuilder } from '@commercetools/ts-client';
+
+
+
+
+
+export async function addItemToCart(product: ProductProjection, quantity: number = 1): Promise<LineItem[] | undefined> {
+  const item: LineItemDraft = {
+    productId: product.id,
+    quantity: quantity,
+  };
+
+  const isLogined: boolean = !!localStorage.getItem('access_token');
+  // const apiRootCustomer: ApiRoot = createApiBuilderFromCtpClient(
+  //   client.withProjectKey(projectKey).withHttpMiddleware(httpMiddleware).build(),
+  // );
+
+  if (isLogined) {
+    const response: ClientResponse<Cart> = await apiRootCustomer
+      .withProjectKey({ projectKey })
+      .me()
+      .activeCart()
+      .get()
+      .execute();
+
+    const addItemResponse: ClientResponse<Cart> = await apiRootCustomer
+      .withProjectKey({ projectKey })
+      .me()
+      .carts()
+      .withId({ ID: response.body.id })
+      .post({
+        body: {
+          version: response.body.version,
+          actions: [
+            {
+              action: 'addLineItem',
+              ...item,
+            },
+          ],
+        },
+      })
+      .execute();
+
+    return addItemResponse.body.lineItems;
+  } else if (!localStorage.getItem('cartId')) {
+    await createAnonymousCustomer();
+  }
+  if (localStorage.getItem('anonymousId')) {
+    const cartId: string = localStorage.getItem('cartId')!;
+    const version: number = Number(localStorage.getItem('cartVersion'));
+    const apiRootAnonymous: ApiRoot = createApiBuilderFromCtpClient(
+      client.withProjectKey(projectKey).withHttpMiddleware(httpMiddleware).build(),
+    );
+    const response: ClientResponse<Cart> = await apiRootAnonymous
+      .withProjectKey({ projectKey })
+      .carts()
+      .withId({ ID: cartId })
+      .post({
+        body: {
+          version,
+          actions: [
+            {
+              action: 'addLineItem',
+              ...item,
+            },
+          ],
+        },
+      })
+      .execute();
+    localStorage.setItem('cartVersion', response.body.version.toString());
+
+    return response.body.lineItems;
+  }
+}
+
+// Apply Promo Code and Display Updated Prices
+
+export async function applyPromoCode(code: string, email?: string, password?: string): Promise<boolean> {
+  let isCode = false;
+  const isLogined: boolean = !!localStorage.getItem('access_token');
+  if (isLogined) {
+    try {
+      const apiRoot: ApiRoot = createApiBuilderFromCtpClient(
+        createClientWithPasswordFlow(email || '', password || '')
+          .withProjectKey(projectKey)
+          .withHttpMiddleware(httpMiddleware)
+          .build(),
+      );
+      const response = await apiRoot
+        .withProjectKey({ projectKey })
+        .discountCodes()
+        .withKey({ key: code })
+        .get()
+        .execute();
+      isCode = !!response.body.id;
+      console.log(await apiRoot.withProjectKey({ projectKey }).discountCodes().get().execute());
+      if (isCode) {
+        const cart = await getCartPasswordFlow(email, password);
+        await apiRoot
+          .withProjectKey({ projectKey })
+          .me()
+          .carts()
+          .withId({ ID: cart.id })
+          .post({
+            body: {
+              version: cart.version,
+              actions: [
+                {
+                  action: 'addDiscountCode',
+                  code: code,
+                },
+              ],
+            },
+          })
+          .execute();
+      }
+    } catch {
+      return false;
+    }
+  } else {
+    try {
+      const apiRootAnonymous: ApiRoot = createApiBuilderFromCtpClient(
+        client.withProjectKey(projectKey).withHttpMiddleware(httpMiddleware).build(),
+      );
+
+      const response = await apiRootAnonymous
+        .withProjectKey({ projectKey })
+        .discountCodes()
+        .withKey({ key: code })
+        .get()
+        .execute();
+      isCode = !!response.body.id;
+      if (isCode) {
+        const cart = await getCart();
+        await apiRootAnonymous
+          .withProjectKey({ projectKey })
+          .me()
+          .carts()
+          .withId({ ID: cart.id })
+          .post({
+            body: {
+              version: cart.version,
+              actions: [
+                {
+                  action: 'addDiscountCode',
+                  code: code,
+                },
+              ],
+            },
+          })
+          .execute();
+      }
+    } catch {
+      return false;
+    }
+  }
+  // console.log(await getTotalCost());
+  return isCode;
+}

eCommerce-Application/src/api/Cart/create.ts

@@ -0,0 +1,25 @@
+import { ApiRoot } from '@commercetools/platform-sdk';
+import { projectKey } from '../client/client';
+import { createAnonymousCustomer } from '../customer/anonymous-customer';
+import { CountriesCodes, CurrencyCodes, StorageKeys, StorageTokenKeys } from '../../types/enums';
+
+export async function createCart(api?: ApiRoot): Promise<void> {
+  if (!localStorage.getItem(StorageKeys.ANONYMOUS_ID) && !localStorage.getItem(StorageTokenKeys.ACCESS_TOKEN)) {
+    await createAnonymousCustomer();
+  }
+
+  const result = await api
+    ?.withProjectKey({ projectKey })
+    .me()
+    .carts()
+    .post({
+      body: {
+        currency: CurrencyCodes.USD,
+        country: CountriesCodes.US,
+      },
+    })
+    .execute();
+  localStorage.setItem(StorageKeys.CART_ID, result?.body.id || '');
+  localStorage.setItem(StorageKeys.CART_VERSION, result?.body.version.toString() || '');
+  console.log(result);
+}