chore: update production deploy with implemented features from [sprint_4]

.github/labeler.yml

@@ -48,3 +48,6 @@ sprint3:
 
 sprint4:
   - head-branch: 'ECOMM-4'
+
+sprint5:
+  - head-branch: 'ECOMM-5'

.github/pull_request_template.md

@@ -3,10 +3,10 @@
 📍 conforms with the following format:
 
 - [ ] prefix (following the [convention](https://www.conventionalcommits.org/en/v1.0.0-beta.2/): `feat`, `fix`, `hotfix`, `chore`, `refactor`, `revert`, `docs`, `style`, `test`)
-- [ ] sprint and issue number (e.g. `RSS-ECOMM-3_01`, where `3` - is the sprint number and `01` - is the issue number)
+- [ ] sprint and issue number (e.g. `RSS-ECOMM-5_01`, where `5` - is the sprint number and `01` - is the issue number)
 - [ ] short description
 
-👀 Example: `feat(RSS-ECOMM-3_01): description`
+👀 Example: `feat(RSS-ECOMM-5_01): description`
 
 ## PR Description 🧙‍♂️
 

.github/workflows/ci.yml

@@ -7,6 +7,7 @@ on:
       - sprint-2
       - sprint-3
       - sprint-4
+      - sprint-5
 
 jobs:
   format:

.validate-branch-namerc.cjs

@@ -1,9 +1,13 @@
 module.exports = {
-  pattern: /^(feat|fix|hotfix|chore|refactor|revert|docs|style|test|)\(RSS-ECOMM-\d_\d{2}\)\/[a-z]+[a-zA-Z0-9]*$/,
+  pattern:
+    /^sprint-4|^(feat|fix|hotfix|chore|refactor|revert|docs|style|test|)\(RSS-ECOMM-\d_\d{2}\)\/[a-z]+[a-zA-Z0-9]*$/,
   errorMsg: 'Please use correct branch name',
 };
 
 // Branch Name Examples:
 
 // "feat(RSS-ECOMM-1_01)/addNewProduct" // where 1 is the sprint number and 01 is the issue number
 // "fix(RSS-ECOMM-2_15)/addCorrectProduct" // where 2 is the sprint number and 15 is the issue number
+// "chore(RSS-ECOMM-3_01)/addNewProduct" // where 3 is the sprint number and 01 is the issue number
+// "refactor(RSS-ECOMM-4_01)/addNewProduct" // where 4 is the sprint number and 01 is the issue number
+// "revert(RSS-ECOMM-5_01)/addNewProduct" // where 5 is the sprint number and 01 is the issue number

package.json

@@ -64,8 +64,11 @@
     "@commercetools/sdk-client-v2": "^2.5.0",
     "@commercetools/sdk-middleware-auth": "^7.0.1",
     "@commercetools/sdk-middleware-http": "^7.0.4",
+    "@types/hammerjs": "^2.0.45",
     "@types/js-cookie": "^3.0.6",
+    "@types/uuid": "^9.0.8",
     "autoprefixer": "^10.4.19",
+    "hammerjs": "^2.0.8",
     "isomorphic-fetch": "^3.0.0",
     "js-cookie": "^3.0.5",
     "materialize-css": "^1.0.0-rc.2",
@@ -75,6 +78,7 @@
     "postcode-validator": "^3.8.20",
     "sharp": "^0.33.3",
     "swiper": "^11.1.3",
+    "uuid": "^9.0.1",
     "vite-plugin-checker": "^0.6.4",
     "vite-plugin-image-optimizer": "^1.1.7",
     "vite-plugin-svg-spriter": "^1.0.0",

src/app/App/model/AppModel.ts

@@ -3,6 +3,7 @@ import type { Page, PageParams, PagesType } from '@/shared/types/page.ts';
 
 import RouterModel from '@/app/Router/model/RouterModel.ts';
 import modal from '@/shared/Modal/model/ModalModel.ts';
+import ScrollToTopModel from '@/shared/ScrollToTop/model/ScrollToTopModel.ts';
 import { PAGE_ID } from '@/shared/constants/pages.ts';
 import FooterModel from '@/widgets/Footer/model/FooterModel.ts';
 import HeaderModel from '@/widgets/Header/model/HeaderModel.ts';
@@ -32,9 +33,9 @@ class AppModel {
         const { default: CartPageModel } = await import('@/pages/CartPage/model/CartPageModel.ts');
         return new CartPageModel(this.appView.getHTML());
       },
-      [PAGE_ID.CATALOG_PAGE]: async (params: PageParams): Promise<Page> => {
+      [PAGE_ID.CATALOG_PAGE]: async (): Promise<Page> => {
         const { default: CatalogPageModel } = await import('@/pages/CatalogPage/model/CatalogPageModel.ts');
-        return new CatalogPageModel(this.appView.getHTML(), params);
+        return new CatalogPageModel(this.appView.getHTML());
       },
       [PAGE_ID.DEFAULT_PAGE]: async (): Promise<Page> => {
         const { default: MainPageModel } = await import('@/pages/MainPage/model/MainPageModel.ts');
@@ -77,7 +78,8 @@ class AppModel {
   private async initialize(): Promise<RouterModel> {
     const routes = await this.createRoutes();
     const router = new RouterModel(routes);
-    document.body.append(this.appView.getHTML());
+    const scrollToTop = new ScrollToTopModel();
+    document.body.append(this.appView.getHTML(), scrollToTop.getHTML().getHTML());
     this.appView.getHTML().insertAdjacentElement('beforebegin', new HeaderModel(this.appView.getHTML()).getHTML());
     this.appView.getHTML().insertAdjacentElement('afterend', new FooterModel().getHTML());
     this.appView.getHTML().insertAdjacentElement('afterend', modal.getHTML());

src/app/Router/model/RouterModel.ts

@@ -1,11 +1,12 @@
 import type { PageParams, PagesType } from '@/shared/types/page';
 
+import getStore from '@/shared/Store/Store.ts';
+import observeStore, { selectCurrentLanguage } from '@/shared/Store/observer.ts';
 import { PAGE_ID } from '@/shared/constants/pages.ts';
 import { isValidPath, isValidState } from '@/shared/types/validation/paths.ts';
-import formattedText from '@/shared/utils/formattedText.ts';
+import setPageTitle from '@/shared/utils/setPageTitle.ts';
 import showErrorMessage from '@/shared/utils/userMessage.ts';
 
-const PROJECT_TITLE = import.meta.env.VITE_APP_PROJECT_TITLE;
 const DEFAULT_SEGMENT = import.meta.env.VITE_APP_DEFAULT_SEGMENT;
 const NEXT_SEGMENT = import.meta.env.VITE_APP_NEXT_SEGMENT;
 const PATH_SEGMENTS_TO_KEEP = import.meta.env.VITE_APP_PATH_SEGMENTS_TO_KEEP;
@@ -23,17 +24,19 @@ class RouterModel {
 
     this.routes = routes;
     document.addEventListener('DOMContentLoaded', () => {
-      const currentPath = window.location.pathname.slice(NEXT_SEGMENT).split(DEFAULT_SEGMENT) || PAGE_ID.DEFAULT_PAGE;
+      const currentPath =
+        (window.location.pathname + window.location.search).slice(NEXT_SEGMENT).split(DEFAULT_SEGMENT) ||
+        PAGE_ID.DEFAULT_PAGE;
       this.navigateTo(currentPath.join(DEFAULT_SEGMENT));
     });
 
     window.addEventListener('popstate', (event) => {
       const currentState: unknown = event.state;
-      let currentPage = '';
+      let [currentPage] = '';
       let currentPath = '';
 
       if (isValidState(currentState)) {
-        currentPage = currentState.path.split(DEFAULT_SEGMENT)[PATH_SEGMENTS_TO_KEEP] + DEFAULT_SEGMENT;
+        [currentPage] = currentState.path.split(DEFAULT_SEGMENT)[PATH_SEGMENTS_TO_KEEP].split(SEARCH_SEGMENT);
         currentPath = currentState.path;
       }
 
@@ -46,20 +49,51 @@ class RouterModel {
     });
   }
 
+  public static appendSearchParams(key: string, value: string): void {
+    const url = new URL(decodeURIComponent(window.location.href));
+    url.searchParams.append(key, value);
+    const path = url.pathname + url.search.toString();
+    window.history.pushState({ path: path.slice(NEXT_SEGMENT) }, '', path);
+  }
+
+  public static clearSearchParams(): void {
+    const url = new URL(decodeURIComponent(window.location.href));
+    const path = `${DEFAULT_SEGMENT}${url.pathname.split(DEFAULT_SEGMENT)[NEXT_SEGMENT]}${DEFAULT_SEGMENT}`;
+    window.history.pushState({ path: path.slice(NEXT_SEGMENT) }, '', path);
+  }
+
+  public static deleteSearchParams(key: string): void {
+    const url = new URL(decodeURIComponent(window.location.href));
+    url.searchParams.delete(key);
+    const path = url.pathname + url.search.toString();
+    window.history.pushState({ path: path.slice(NEXT_SEGMENT) }, '', path);
+  }
+
   public static getInstance(): RouterModel {
     return RouterModel.router;
   }
 
+  public static getSearchParams(): URLSearchParams {
+    return new URL(decodeURIComponent(window.location.href)).searchParams;
+  }
+
+  public static setSearchParams(key: string, value: string): void {
+    const url = new URL(decodeURIComponent(window.location.href));
+    url.searchParams.delete(key);
+    url.searchParams.set(key, value);
+    const path = url.pathname + url.search.toString();
+    window.history.pushState({ path: path.slice(NEXT_SEGMENT) }, '', path);
+  }
+
   private async checkPageAndParams(
     currentPage: string,
     path: string,
   ): Promise<{ hasRoute: boolean; params: PageParams } | null> {
     const hasRoute = this.routes.has(currentPage);
-    const decodePath = decodeURIComponent(path);
-    const id = decodePath.split(DEFAULT_SEGMENT).slice(PATH_SEGMENTS_TO_KEEP, -NEXT_SEGMENT)[NEXT_SEGMENT];
-    const searchParams = decodeURIComponent(decodePath).split(SEARCH_SEGMENT)[NEXT_SEGMENT];
-    const title = `${PROJECT_TITLE} | ${hasRoute ? formattedText(currentPage === PAGE_ID.DEFAULT_PAGE ? PAGE_ID.MAIN_PAGE.slice(PATH_SEGMENTS_TO_KEEP, -NEXT_SEGMENT) : currentPage.slice(PATH_SEGMENTS_TO_KEEP, -NEXT_SEGMENT)) : PAGE_ID.NOT_FOUND_PAGE.slice(PATH_SEGMENTS_TO_KEEP, -NEXT_SEGMENT)}`;
-    document.title = title;
+    const id = path.split(DEFAULT_SEGMENT)[NEXT_SEGMENT]?.split(SEARCH_SEGMENT)[PATH_SEGMENTS_TO_KEEP] || null;
+
+    setPageTitle(currentPage, hasRoute);
+    observeStore(selectCurrentLanguage, () => this.checkPageAndParams(currentPage, path));
 
     if (!hasRoute) {
       await this.routes.get(PAGE_ID.NOT_FOUND_PAGE)?.({});
@@ -68,12 +102,7 @@ class RouterModel {
 
     return {
       hasRoute,
-      params: {
-        [currentPage.slice(PATH_SEGMENTS_TO_KEEP, -NEXT_SEGMENT)]: {
-          id: id ?? null,
-          searchParams: searchParams ?? null,
-        },
-      },
+      params: { [currentPage.slice(PATH_SEGMENTS_TO_KEEP)]: { id } },
     };
   }
 
@@ -88,15 +117,14 @@ class RouterModel {
   }
 
   public navigateTo(path: string): void {
-    const currentPage = path.split(DEFAULT_SEGMENT)[PATH_SEGMENTS_TO_KEEP] + DEFAULT_SEGMENT || PAGE_ID.DEFAULT_PAGE;
-    this.checkPageAndParams(currentPage, path)
-      .then((check) => {
-        if (check) {
-          this.routes.get(currentPage)?.(check.params).catch(showErrorMessage);
-          history.pushState({ path }, '', `/${path}`);
-        }
-      })
-      .catch(showErrorMessage);
+    const currentPage =
+      path.split(DEFAULT_SEGMENT)[PATH_SEGMENTS_TO_KEEP].split(SEARCH_SEGMENT)[PATH_SEGMENTS_TO_KEEP] ||
+      PAGE_ID.DEFAULT_PAGE;
+
+    if (currentPage !== getStore().getState().currentPage || currentPage === PAGE_ID.DEFAULT_PAGE) {
+      this.handleRequest(currentPage, path);
+    }
+    history.pushState({ path }, '', `/${path}`);
   }
 }