feat(RSS-ECOMM-5_88): new project

.github/workflows/ci.yml

@@ -31,6 +31,12 @@ jobs:
   test:
     runs-on: ubuntu-latest
 
+    env:
+      VITE_APP_CTP_PROJECT_KEY: ${{ secrets.VITE_APP_CTP_PROJECT_KEY }}
+      VITE_APP_CTP_SCOPES: ${{ secrets.VITE_APP_CTP_SCOPES }}
+      VITE_APP_CTP_CLIENT_ID: ${{ secrets.VITE_APP_CTP_CLIENT_ID }}
+      VITE_APP_CTP_CLIENT_SECRET: ${{ secrets.VITE_APP_CTP_CLIENT_SECRET }}
+
     steps:
       - name: Checkout code
         uses: actions/checkout@v4

.gitignore

@@ -25,3 +25,6 @@ coverage
 *.sln
 *.sw?
 
+# env
+.env
+

src/entities/ProductCard/model/ProductCardModel.ts

@@ -7,12 +7,11 @@ import WishlistButtonModel from '@/features/WishlistButton/model/WishlistButtonM
 import getCartModel from '@/shared/API/cart/model/CartModel.ts';
 import EventMediatorModel from '@/shared/EventMediator/model/EventMediatorModel.ts';
 import modal from '@/shared/Modal/model/ModalModel.ts';
-import { LANGUAGE_CHOICE } from '@/shared/constants/common.ts';
 import MEDIATOR_EVENT from '@/shared/constants/events.ts';
 import { PAGE_ID } from '@/shared/constants/pages.ts';
 import { SEARCH_PARAMS_FIELD } from '@/shared/constants/product.ts';
 import * as buildPath from '@/shared/utils/buildPathname.ts';
-import getCurrentLanguage from '@/shared/utils/getCurrentLanguage.ts';
+import getLanguageValue from '@/shared/utils/getLanguageValue.ts';
 import { productAddedToCartMessage } from '@/shared/utils/messageTemplates.ts';
 import { showErrorMessage, showSuccessMessage } from '@/shared/utils/userMessage.ts';
 import ProductInfoModel from '@/widgets/ProductInfo/model/ProductInfoModel.ts';
@@ -54,7 +53,7 @@ class ProductCardModel {
 
   private getProductMeta(): AddCartItem {
     return {
-      name: this.params.name[Number(getCurrentLanguage() === LANGUAGE_CHOICE.RU)].value,
+      name: getLanguageValue(this.params.name),
       productId: this.params.id,
       quantity: 1,
       variantId: this.currentVariant.id,

src/entities/ProductCard/view/ProductCardView.ts

@@ -5,13 +5,13 @@ import LinkModel from '@/shared/Link/model/LinkModel.ts';
 import LoaderModel from '@/shared/Loader/model/LoaderModel.ts';
 import observeStore, { selectCurrentLanguage } from '@/shared/Store/observer.ts';
 import { MORE_TEXT } from '@/shared/constants/buttons.ts';
-import { LANGUAGE_CHOICE } from '@/shared/constants/common.ts';
 import { LOADER_SIZE } from '@/shared/constants/sizes.ts';
 import SVG_DETAIL from '@/shared/constants/svg.ts';
 import * as buildPath from '@/shared/utils/buildPathname.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
 import createSVGUse from '@/shared/utils/createSVGUse.ts';
 import getCurrentLanguage from '@/shared/utils/getCurrentLanguage.ts';
+import getLanguageValue from '@/shared/utils/getLanguageValue.ts';
 import { discountPercent, discountText } from '@/shared/utils/messageTemplates.ts';
 
 import styles from './productCardView.module.scss';
@@ -206,30 +206,30 @@ class ProductCardView {
   }
 
   private createProductName(): HTMLHeadingElement {
-    const innerContent = this.params.name[Number(getCurrentLanguage() === LANGUAGE_CHOICE.RU)].value;
+    const innerContent = getLanguageValue(this.params.name);
     const productName = createBaseElement({
       cssClasses: [styles.productName],
       innerContent,
       tag: 'h3',
     });
 
     observeStore(selectCurrentLanguage, () => {
-      const textContent = this.params.name[Number(getCurrentLanguage() === LANGUAGE_CHOICE.RU)].value;
+      const textContent = getLanguageValue(this.params.name);
       productName.textContent = textContent;
     });
     return productName;
   }
 
   private createProductShortDescription(): HTMLParagraphElement {
-    const innerContent = this.params.description[Number(getCurrentLanguage() === LANGUAGE_CHOICE.RU)].value;
+    const innerContent = getLanguageValue(this.params.description);
     this.productShortDescription = createBaseElement({
       cssClasses: [styles.productShortDescription],
       innerContent,
       tag: 'p',
     });
 
     observeStore(selectCurrentLanguage, () => {
-      const textContent = this.params.description[Number(getCurrentLanguage() === LANGUAGE_CHOICE.RU)].value;
+      const textContent = getLanguageValue(this.params.description);
       this.productShortDescription.textContent = textContent;
     });
 

src/entities/Summary/view/SummaryView.ts

@@ -57,11 +57,13 @@ class SummaryView {
 
   private updateTitle(): void {
     this.discountTotal.innerHTML = '';
-    const totalDiscountWrap = createBaseElement({ cssClasses: [styles.couponWrap], tag: 'div' });
-    const totalDiscountTitle = this.getTitle();
-    const totalDiscountValue = this.getValue(this.total);
-    totalDiscountWrap.append(totalDiscountTitle, totalDiscountValue);
-    this.discountTotal.append(totalDiscountWrap);
+    if (this.total) {
+      const totalDiscountWrap = createBaseElement({ cssClasses: [styles.couponWrap], tag: 'div' });
+      const totalDiscountTitle = this.getTitle();
+      const totalDiscountValue = this.getValue(this.total);
+      totalDiscountWrap.append(totalDiscountTitle, totalDiscountValue);
+      this.discountTotal.append(totalDiscountWrap);
+    }
   }
 
   public addCouponItem(coupon: CouponModel): void {
@@ -78,12 +80,8 @@ class SummaryView {
   }
 
   public updateTotal(total: number): void {
-    if (total) {
-      this.total = total;
-      this.updateTitle();
-    } else {
-      this.discountTotal.innerHTML = '';
-    }
+    this.total = total;
+    this.updateTitle();
   }
 }
 

src/features/ProductFilters/view/ProductFiltersView.ts

@@ -18,6 +18,7 @@ import { PAGE_ID } from '@/shared/constants/pages.ts';
 import { SEARCH_PARAMS_FIELD } from '@/shared/constants/product.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
 import getCurrentLanguage from '@/shared/utils/getCurrentLanguage.ts';
+import getLanguageValue from '@/shared/utils/getLanguageValue.ts';
 import * as noUiSlider from 'nouislider';
 
 import styles from './productFiltersView.module.scss';
@@ -116,7 +117,7 @@ class ProductFiltersView {
   }
 
   private createCategoryLink(category: { category: Category; count: number }): LinkModel {
-    const text = category.category.name[Number(getCurrentLanguage() === LANGUAGE_CHOICE.RU)].value;
+    const text = getLanguageValue(category.category.name);
     const categoryLink = new LinkModel({
       attrs: {
         href: category.category.key,
@@ -150,7 +151,7 @@ class ProductFiltersView {
     this.categoryLinks.push(categoryLink);
 
     observeStore(selectCurrentLanguage, () => {
-      const text = category.category.name[Number(getCurrentLanguage() === LANGUAGE_CHOICE.RU)].value;
+      const text = getLanguageValue(category.category.name);
       const textNode = [...categoryLink.getHTML().childNodes].find((child) => child.nodeType === Node.TEXT_NODE);
       if (textNode) {
         textNode.textContent = text;

src/features/WishlistButton/model/WishlistButtonModel.ts

@@ -4,9 +4,8 @@ import type { ShoppingList, ShoppingListProduct } from '@/shared/types/shopping-
 
 import getShoppingListModel from '@/shared/API/shopping-list/model/ShoppingListModel.ts';
 import EventMediatorModel from '@/shared/EventMediator/model/EventMediatorModel.ts';
-import { LANGUAGE_CHOICE } from '@/shared/constants/common.ts';
 import MEDIATOR_EVENT from '@/shared/constants/events.ts';
-import getCurrentLanguage from '@/shared/utils/getCurrentLanguage.ts';
+import getLanguageValue from '@/shared/utils/getLanguageValue.ts';
 import { productAddedToWishListMessage, productRemovedFromWishListMessage } from '@/shared/utils/messageTemplates.ts';
 import { showErrorMessage, showSuccessMessage } from '@/shared/utils/userMessage.ts';
 
@@ -26,9 +25,7 @@ class WishlistButtonModel {
     getShoppingListModel()
       .addProduct(this.params.id)
       .then(() => {
-        showSuccessMessage(
-          productAddedToWishListMessage(this.params.name[Number(getCurrentLanguage() === LANGUAGE_CHOICE.RU)].value),
-        );
+        showSuccessMessage(productAddedToWishListMessage(getLanguageValue(this.params.name)));
         this.view.switchStateWishListButton(true);
         EventMediatorModel.getInstance().notify(MEDIATOR_EVENT.CHANGE_WISHLIST_BUTTON, '');
       })
@@ -39,11 +36,7 @@ class WishlistButtonModel {
     getShoppingListModel()
       .deleteProduct(productInWishList)
       .then(() => {
-        showSuccessMessage(
-          productRemovedFromWishListMessage(
-            this.params.name[Number(getCurrentLanguage() === LANGUAGE_CHOICE.RU)].value,
-          ),
-        );
+        showSuccessMessage(productRemovedFromWishListMessage(getLanguageValue(this.params.name)));
         this.view.switchStateWishListButton(false);
         EventMediatorModel.getInstance().notify(MEDIATOR_EVENT.CHANGE_WISHLIST_BUTTON, this.params.key);
       })

src/pages/ProductPage/model/ProductPageModel.ts

@@ -9,12 +9,12 @@ import LoaderModel from '@/shared/Loader/model/LoaderModel.ts';
 import getStore from '@/shared/Store/Store.ts';
 import { setCurrentPage } from '@/shared/Store/actions.ts';
 import observeStore, { selectCurrentLanguage } from '@/shared/Store/observer.ts';
-import { LANGUAGE_CHOICE } from '@/shared/constants/common.ts';
 import { PAGE_ID, PAGE_TITLE } from '@/shared/constants/pages.ts';
 import { SEARCH_PARAMS_FIELD } from '@/shared/constants/product.ts';
 import { LOADER_SIZE } from '@/shared/constants/sizes.ts';
 import * as buildPath from '@/shared/utils/buildPathname.ts';
 import getCurrentLanguage from '@/shared/utils/getCurrentLanguage.ts';
+import getLanguageValue from '@/shared/utils/getLanguageValue.ts';
 import { showErrorMessage } from '@/shared/utils/userMessage.ts';
 import ProductInfoModel from '@/widgets/ProductInfo/model/ProductInfoModel.ts';
 
@@ -34,7 +34,6 @@ class ProductPageModel implements Page {
 
   private createBreadcrumbLinks(currentProduct: Product | null): BreadcrumbLink[] {
     const currentLanguage = getCurrentLanguage();
-    const isRuLanguage = currentLanguage === LANGUAGE_CHOICE.RU;
     const category = currentProduct?.category[0].parent;
     const subcategory = currentProduct?.category[0];
 
@@ -46,14 +45,14 @@ class ProductPageModel implements Page {
     if (category) {
       links.push({
         link: buildPath.catalogPathWithQuery({ category: [category.key] }),
-        name: category.name[Number(isRuLanguage)].value,
+        name: getLanguageValue(category.name),
       });
     }
 
     if (subcategory && category) {
       links.push({
         link: buildPath.catalogPathWithQuery({ subcategory: [subcategory.key] }),
-        name: subcategory.name[Number(isRuLanguage)].value,
+        name: getLanguageValue(subcategory.name),
       });
     }
 
@@ -85,7 +84,7 @@ class ProductPageModel implements Page {
 
   private observeLanguage(fullDescription: localization[]): void {
     observeStore(selectCurrentLanguage, () => {
-      this.view.setFullDescription(fullDescription[Number(getCurrentLanguage() === LANGUAGE_CHOICE.RU)].value);
+      this.view.setFullDescription(getLanguageValue(fullDescription));
       this.initBreadcrumbs();
     });
   }
@@ -110,9 +109,7 @@ class ProductPageModel implements Page {
       savedPath,
     );
     this.getHTML().append(productInfo.getHTML(), this.view.getFullDescriptionWrapper());
-    this.view.setFullDescription(
-      this.currentProduct.fullDescription[Number(getCurrentLanguage() === LANGUAGE_CHOICE.RU)].value,
-    );
+    this.view.setFullDescription(getLanguageValue(this.currentProduct.fullDescription));
     this.observeLanguage(this.currentProduct.fullDescription);
   }
 

src/shared/utils/getLanguageValue.ts

@@ -0,0 +1,12 @@
+import type { LanguageChoiceType } from '../constants/common.ts';
+import type { localization } from '../types/product.ts';
+
+import getCurrentLanguage from './getCurrentLanguage.ts';
+
+function getLanguageValue(variants: localization[], language?: LanguageChoiceType): string {
+  const currentLanguage = language || getCurrentLanguage();
+  const variant = variants.find((item) => item.language === currentLanguage);
+  return variant?.value || '';
+}
+
+export default getLanguageValue;

src/test/mocks/constant.ts

@@ -0,0 +1,8 @@
+export const TEST_PROJECT_KEY = 'green-shop-02';
+export const TEST_CLIENT_SECRET = 'BPJMQ0';
+export const TEST_CLIENT_ID = 'Nlpz1Pod';
+export const TEST_REGION = 'europe-west1';
+export const TEST_AUTH_URL = 'https://auth.europe-west1.gcp.commercetools.com';
+export const TEST_API_URL = 'https://api.europe-west1.gcp.commercetools.com';
+export const TEST_SCOPES =
+  'manage_project:green-shop view_audit_log:green-shop manage_api_clients:green-shop view_api_clients:green-shop';

src/test/mocks/handlers/cart.ts

@@ -1,5 +1,7 @@
 import { HttpResponse, http } from 'msw';
 
+import { TEST_API_URL, TEST_PROJECT_KEY } from '../constant.ts';
+
 const carts = {
   anonymousId: 'f6b6183e-cc73-4b19-a65e-f408fc785e89',
   cartState: 'Merged',
@@ -237,21 +239,11 @@ const cartList = {
 };
 
 const handlers = [
-  http.get(`${import.meta.env.VITE_APP_CTP_API_URL}/${import.meta.env.VITE_APP_CTP_PROJECT_KEY}/me/carts`, () =>
-    HttpResponse.json(cartList),
-  ),
-  http.post(`${import.meta.env.VITE_APP_CTP_API_URL}/${import.meta.env.VITE_APP_CTP_PROJECT_KEY}/me/carts`, () =>
-    HttpResponse.json(cartList),
-  ),
-  http.post(`${import.meta.env.VITE_APP_CTP_API_URL}/${import.meta.env.VITE_APP_CTP_PROJECT_KEY}/carts/*`, () =>
-    HttpResponse.json(carts),
-  ),
-  http.get(`${import.meta.env.VITE_APP_CTP_API_URL}/${import.meta.env.VITE_APP_CTP_PROJECT_KEY}/carts/*`, () =>
-    HttpResponse.json(carts),
-  ),
-  http.post(`${import.meta.env.VITE_APP_CTP_API_URL}/${import.meta.env.VITE_APP_CTP_PROJECT_KEY}/me/carts/*`, () =>
-    HttpResponse.json(carts),
-  ),
+  http.get(`${TEST_API_URL}/${TEST_PROJECT_KEY}/me/carts`, () => HttpResponse.json(cartList)),
+  http.post(`${TEST_API_URL}/${TEST_PROJECT_KEY}/me/carts`, () => HttpResponse.json(cartList)),
+  http.post(`${TEST_API_URL}/${TEST_PROJECT_KEY}/carts/*`, () => HttpResponse.json(carts)),
+  http.get(`${TEST_API_URL}/${TEST_PROJECT_KEY}/carts/*`, () => HttpResponse.json(carts)),
+  http.post(`${TEST_API_URL}/${TEST_PROJECT_KEY}/me/carts/*`, () => HttpResponse.json(carts)),
 ];
 
 export default handlers;

src/test/mocks/handlers/category.ts

@@ -1,5 +1,7 @@
 import { HttpResponse, http } from 'msw';
 
+import { TEST_API_URL, TEST_PROJECT_KEY } from '../constant.ts';
+
 const categoryList = {
   count: 1,
   limit: 20,
@@ -55,10 +57,6 @@ const categoryList = {
   ],
   total: 1,
 };
-const handlers = [
-  http.get(`${import.meta.env.VITE_APP_CTP_API_URL}/${import.meta.env.VITE_APP_CTP_PROJECT_KEY}/categories`, () =>
-    HttpResponse.json(categoryList),
-  ),
-];
+const handlers = [http.get(`${TEST_API_URL}/${TEST_PROJECT_KEY}/categories`, () => HttpResponse.json(categoryList))];
 
 export default handlers;

src/test/mocks/handlers/customer.ts

@@ -1,5 +1,7 @@
 import { HttpResponse, http } from 'msw';
 
+import { TEST_API_URL, TEST_PROJECT_KEY } from '../constant.ts';
+
 const me = {
   addresses: [
     {
@@ -100,21 +102,11 @@ const meList = {
 };
 
 const handlers = [
-  http.post(`${import.meta.env.VITE_APP_CTP_API_URL}/${import.meta.env.VITE_APP_CTP_PROJECT_KEY}/me/signup`, () =>
-    HttpResponse.json(customer),
-  ),
-  http.post(`${import.meta.env.VITE_APP_CTP_API_URL}/${import.meta.env.VITE_APP_CTP_PROJECT_KEY}/me/login`, () =>
-    HttpResponse.json(customer),
-  ),
-  http.get(`${import.meta.env.VITE_APP_CTP_API_URL}/${import.meta.env.VITE_APP_CTP_PROJECT_KEY}/customers`, () =>
-    HttpResponse.json(meList),
-  ),
-  http.post(`${import.meta.env.VITE_APP_CTP_API_URL}/${import.meta.env.VITE_APP_CTP_PROJECT_KEY}/me`, () =>
-    HttpResponse.json(me),
-  ),
-  http.post(`${import.meta.env.VITE_APP_CTP_API_URL}/${import.meta.env.VITE_APP_CTP_PROJECT_KEY}/me/password`, () =>
-    HttpResponse.json(me),
-  ),
+  http.post(`${TEST_API_URL}/${TEST_PROJECT_KEY}/me/signup`, () => HttpResponse.json(customer)),
+  http.post(`${TEST_API_URL}/${TEST_PROJECT_KEY}/me/login`, () => HttpResponse.json(customer)),
+  http.get(`${TEST_API_URL}/${TEST_PROJECT_KEY}/customers`, () => HttpResponse.json(meList)),
+  http.post(`${TEST_API_URL}/${TEST_PROJECT_KEY}/me`, () => HttpResponse.json(me)),
+  http.post(`${TEST_API_URL}/${TEST_PROJECT_KEY}/me/password`, () => HttpResponse.json(me)),
 ];
 
 export default handlers;

src/test/mocks/handlers/discount.ts

@@ -1,5 +1,7 @@
 import { HttpResponse, http } from 'msw';
 
+import { TEST_API_URL, TEST_PROJECT_KEY } from '../constant.ts';
+
 const discountList = {
   count: 4,
   limit: 20,
@@ -49,9 +51,7 @@ const discountList = {
 };
 
 const handlers = [
-  http.get(`${import.meta.env.VITE_APP_CTP_API_URL}/${import.meta.env.VITE_APP_CTP_PROJECT_KEY}/discount-codes`, () =>
-    HttpResponse.json(discountList),
-  ),
+  http.get(`${TEST_API_URL}/${TEST_PROJECT_KEY}/discount-codes`, () => HttpResponse.json(discountList)),
 ];
 
 export default handlers;