Merge branch 'sprint-5' into fix(RSS-ECOMM-5_25)/modalClose

package.json

@@ -55,8 +55,7 @@
     "typescript": "^5.4.5",
     "validate-branch-name": "^1.3.0",
     "vite": "^5.2.11",
-    "vite-plugin-sass": "^0.1.0",
-    "vitest": "^1.6.0"
+    "vite-plugin-sass": "^0.1.0"
   },
   "dependencies": {
     "@commercetools/api-request-builder": "^6.0.0",
@@ -66,23 +65,27 @@
     "@commercetools/sdk-middleware-http": "^7.0.4",
     "@types/hammerjs": "^2.0.45",
     "@types/js-cookie": "^3.0.6",
+    "@types/sinon": "^17.0.3",
     "@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",
     "modern-normalize": "^2.0.0",
+    "msw": "^2.3.1",
     "nouislider": "^15.7.1",
     "plop": "^4.0.1",
     "postcode-validator": "^3.8.20",
     "sharp": "^0.33.3",
+    "sinon": "^18.0.0",
     "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",
-    "vite-tsconfig-paths": "^4.3.2"
+    "vite-tsconfig-paths": "^4.3.2",
+    "vitest": "^1.6.0"
   },
   "homepage": "https://github.com/stardustmeg/ecommerce-application#readme",
   "license": "ISC"

postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     autoprefixer: {},
   },

src/app/App/tests/App.spec.ts

@@ -2,6 +2,10 @@ import AppModel from '../model/AppModel.ts';
 
 const app = new AppModel();
 
+/**
+ * @vitest-environment jsdom
+ */
+
 describe('Checking AppModel class', () => {
   it('application successfully created', () => {
     expect(app.start()).toBe(true);

src/app/styles/mixins.scss

@@ -8,6 +8,46 @@ $one: var(--one);
 $two: var(--two);
 $active-color: var(--steam-green-800);
 
+@mixin switchLabel {
+  position: relative;
+  display: inline-block;
+  width: var(--large-offset);
+  height: calc(calc(var(--small-offset) / 1.5) + var(--extra-small-offset));
+  cursor: pointer;
+}
+
+@mixin switchCheckbox {
+  width: 0;
+  height: 0;
+  opacity: 1;
+}
+
+@mixin switchLabelSpan($label-span-color: var(--noble-gray-tr-800), $label-span-before-color: var(--steam-green-800)) {
+  position: absolute;
+  border-radius: calc(var(--large-br) * 2);
+  background-color: $label-span-color;
+  transition: 0.3s cubic-bezier(0.8, 0.5, 0.2, 1.4);
+  cursor: pointer;
+  pointer-events: none;
+  inset: 0;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: calc(var(--one) * 5);
+    top: 50%;
+    bottom: 0;
+    z-index: 2;
+    border-radius: var(--large-br);
+    width: calc(var(--small-offset) / 1.5);
+    height: calc(var(--small-offset) / 1.5);
+    box-shadow: var(--mellow-shadow-600);
+    background-color: $label-span-before-color;
+    transform: translateY(-50%);
+    transition: 0.3s cubic-bezier(0.8, 0.5, 0.2, 1.4);
+  }
+}
+
 @mixin link($padding: 0 calc(var(--extra-small-offset) / 2), $color: var(--noble-gray-800)) {
   position: relative;
   display: flex;

src/app/styles/variables.scss

@@ -66,6 +66,7 @@
     --noble-gray-tr-800: #acacacbd; // not active labels, tumblers
     --noble-gray-tr-900: #c4c4c4a8; // not active labels, tumblers
     --steam-green-300: #46a35880; // header outline, social media buttons outline
+    --noble-gray-tr-1000: #1a1a1a32; // header background
 
     // outline:
     --noble-gray-300: #cbcbcb; // item cards and pagination outline

src/entities/AboutFullCard/view/AboutFullCardView.ts

@@ -4,7 +4,7 @@ import AboutShortCardView from '@/entities/AboutShortCard/view/AboutShortCardVie
 import LinkModel from '@/shared/Link/model/LinkModel.ts';
 import observeStore, { selectCurrentLanguage, selectCurrentTheme } from '@/shared/Store/observer.ts';
 import ABOUT_TEXT from '@/shared/constants/about.ts';
-import { LINK_DETAILS } from '@/shared/constants/links.ts';
+import { LINK_DETAIL } from '@/shared/constants/links.ts';
 import changeColor from '@/shared/utils/changeColor.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
 import getCurrentAppTheme from '@/shared/utils/getCurrentAppTheme.ts';
@@ -81,12 +81,12 @@ class AboutFullCardView extends AboutShortCardView {
     const href = `https://github.com/${item.from}`;
     const background = `url(${`/img/png/${item.from}Avatar.png`})`;
     const from = new LinkModel({
-      attrs: { href, target: LINK_DETAILS.BLANK },
+      attrs: { href, target: LINK_DETAIL.BLANK },
       classes: [styles.from],
       text: item.from,
     });
 
-    const avatar = new LinkModel({ attrs: { href, target: LINK_DETAILS.BLANK }, classes: [styles.avatar] });
+    const avatar = new LinkModel({ attrs: { href, target: LINK_DETAIL.BLANK }, classes: [styles.avatar] });
 
     avatar.getHTML().style.backgroundImage = background;
     from.getHTML().append(avatar.getHTML());

src/entities/AboutShortCard/view/AboutShortCardView.ts

@@ -2,8 +2,8 @@ import type { AboutData, AboutLabel } from '@/shared/types/validation/aboutData'
 
 import LinkModel from '@/shared/Link/model/LinkModel.ts';
 import observeStore, { selectCurrentLanguage, selectCurrentTheme } from '@/shared/Store/observer.ts';
-import { LINK_DETAILS } from '@/shared/constants/links.ts';
-import SVG_DETAILS from '@/shared/constants/svg.ts';
+import { LINK_DETAIL } from '@/shared/constants/links.ts';
+import SVG_DETAIL from '@/shared/constants/svg.ts';
 import changeColor from '@/shared/utils/changeColor.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
 import createSVGUse, { changeFill, changeStroke } from '@/shared/utils/createSVGUse.ts';
@@ -26,7 +26,7 @@ class AboutShortCardView {
     const avatar = new LinkModel({
       attrs: {
         href: this.params.github.link,
-        target: LINK_DETAILS.BLANK,
+        target: LINK_DETAIL.BLANK,
       },
       classes: [styles.avatar],
     });
@@ -56,8 +56,8 @@ class AboutShortCardView {
       tag: 'span',
     });
 
-    const svg = document.createElementNS(SVG_DETAILS.SVG_URL, 'svg');
-    svg.append(createSVGUse(SVG_DETAILS.PROFILE));
+    const svg = document.createElementNS(SVG_DETAIL.SVG_URL, 'svg');
+    svg.append(createSVGUse(SVG_DETAIL.PROFILE));
     changeStroke(svg, this.params.coverColor[getCurrentAppTheme()].color);
 
     observeStore(selectCurrentTheme, () => {
@@ -78,7 +78,7 @@ class AboutShortCardView {
     const githubName = new LinkModel({
       attrs: {
         href: this.params.github.link,
-        target: LINK_DETAILS.BLANK,
+        target: LINK_DETAIL.BLANK,
       },
       classes: [styles.githubName],
       text: this.params.github.name,
@@ -173,8 +173,8 @@ class AboutShortCardView {
       tag: 'span',
     });
 
-    const svg = document.createElementNS(SVG_DETAILS.SVG_URL, 'svg');
-    svg.append(createSVGUse(SVG_DETAILS.STAR));
+    const svg = document.createElementNS(SVG_DETAIL.SVG_URL, 'svg');
+    svg.append(createSVGUse(SVG_DETAIL.STAR));
     changeFill(svg, this.params.coverColor[getCurrentAppTheme()].color);
 
     observeStore(selectCurrentTheme, () => {

src/entities/Address/model/AddressModel.ts

@@ -3,7 +3,7 @@ import type { Address, PersonalData } from '@/shared/types/user.ts';
 
 import CountryChoiceModel from '@/features/CountryChoice/model/CountryChoiceModel.ts';
 import getStore from '@/shared/Store/Store.ts';
-import { ADDRESS_TYPE } from '@/shared/types/address.ts';
+import { ADDRESS } from '@/shared/types/address.ts';
 import formattedText from '@/shared/utils/formattedText.ts';
 
 import AddressView from '../view/AddressView.ts';
@@ -13,7 +13,7 @@ class AddressModel {
 
   private view: AddressView;
 
-  constructor(options: AddressOptions, addressType: AddressType = ADDRESS_TYPE.GENERAL) {
+  constructor(options: AddressOptions, addressType: AddressType = ADDRESS.GENERAL) {
     this.addressType = addressType;
     this.view = new AddressView(addressType, options);
     this.init();
@@ -29,10 +29,10 @@ class AddressModel {
     let country: string;
 
     switch (this.addressType) {
-      case ADDRESS_TYPE.BILLING:
+      case ADDRESS.BILLING:
         country = store.billingCountry;
         break;
-      case ADDRESS_TYPE.SHIPPING:
+      case ADDRESS.SHIPPING:
         country = store.shippingCountry;
         break;
       default:

src/entities/Address/view/AddressView.ts

@@ -1,10 +1,10 @@
 import InputFieldModel from '@/entities/InputField/model/InputFieldModel.ts';
 import InputModel from '@/shared/Input/model/InputModel.ts';
-import { FORM_TEXT, FORM_TEXT_KEYS, INPUT_TYPE } from '@/shared/constants/forms.ts';
+import { FORM_TEXT, FORM_TEXT_KEY, INPUT_TYPE } from '@/shared/constants/forms.ts';
 import * as FORM_FIELDS from '@/shared/constants/forms/fieldParams.ts';
 import { TITLE_TEXT, TITLE_TEXT_KEYS } from '@/shared/constants/forms/text.ts';
 import * as FORM_VALIDATION from '@/shared/constants/forms/validationParams.ts';
-import { ADDRESS_TYPE, type AddressOptions, type AddressType, SINGLE_ADDRESS } from '@/shared/types/address.ts';
+import { ADDRESS, type AddressOptions, type AddressType, SINGLE_ADDRESS } from '@/shared/types/address.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
 import getCurrentLanguage from '@/shared/utils/getCurrentLanguage.ts';
 import observeCurrentLanguage from '@/shared/utils/observeCurrentLanguage.ts';
@@ -70,7 +70,7 @@ class AddressView {
       innerContent: FORM_TEXT[getCurrentLanguage()].SINGLE_ADDRESS,
       tag: 'span',
     });
-    observeCurrentLanguage(checkBoxText, FORM_TEXT, FORM_TEXT_KEYS.SINGLE_ADDRESS);
+    observeCurrentLanguage(checkBoxText, FORM_TEXT, FORM_TEXT_KEY.SINGLE_ADDRESS);
 
     this.addressAsBillingCheckBox = new InputModel({
       autocomplete: FORM_FIELDS.CHECKBOX.AUTOCOMPLETE,
@@ -87,7 +87,7 @@ class AddressView {
   private createAddressByDefaultCheckbox(): HTMLLabelElement {
     const checkboxLabel = createBaseElement({
       attributes: {
-        for: this.addressType === ADDRESS_TYPE.SHIPPING ? ADDRESS_TYPE.SHIPPING : ADDRESS_TYPE.BILLING,
+        for: this.addressType === ADDRESS.SHIPPING ? ADDRESS.SHIPPING : ADDRESS.BILLING,
       },
       cssClasses: [styles.checkboxLabel],
       tag: 'label',
@@ -96,7 +96,7 @@ class AddressView {
     const currentLanguage = getCurrentLanguage();
 
     const textContent =
-      this.addressType === ADDRESS_TYPE.SHIPPING
+      this.addressType === ADDRESS.SHIPPING
         ? FORM_TEXT[currentLanguage].DEFAULT_SHIPPING_ADDRESS
         : FORM_TEXT[currentLanguage].DEFAULT_BILLING_ADDRESS;
     const checkBoxText = createBaseElement({
@@ -107,14 +107,14 @@ class AddressView {
     observeCurrentLanguage(
       checkBoxText,
       FORM_TEXT,
-      this.addressType === ADDRESS_TYPE.SHIPPING
-        ? FORM_TEXT_KEYS.DEFAULT_SHIPPING_ADDRESS
-        : FORM_TEXT_KEYS.DEFAULT_BILLING_ADDRESS,
+      this.addressType === ADDRESS.SHIPPING
+        ? FORM_TEXT_KEY.DEFAULT_SHIPPING_ADDRESS
+        : FORM_TEXT_KEY.DEFAULT_BILLING_ADDRESS,
     );
 
     this.addressByDefaultCheckBox = new InputModel({
       autocomplete: FORM_FIELDS.CHECKBOX.AUTOCOMPLETE,
-      id: this.addressType === ADDRESS_TYPE.SHIPPING ? ADDRESS_TYPE.SHIPPING : ADDRESS_TYPE.BILLING,
+      id: this.addressType === ADDRESS.SHIPPING ? ADDRESS.SHIPPING : ADDRESS.BILLING,
       placeholder: '',
       type: INPUT_TYPE.CHECK_BOX,
     });
@@ -125,7 +125,7 @@ class AddressView {
   }
 
   private createCityField(): InputFieldModel {
-    if (this.addressType === ADDRESS_TYPE.SHIPPING) {
+    if (this.addressType === ADDRESS.SHIPPING) {
       this.cityField = new InputFieldModel(FORM_FIELDS.SHIPPING_ADDRESS_CITY, FORM_VALIDATION.ADDRESS_CITY_VALIDATE);
     } else {
       this.cityField = new InputFieldModel(FORM_FIELDS.BILLING_ADDRESS_CITY, FORM_VALIDATION.ADDRESS_CITY_VALIDATE);
@@ -137,7 +137,7 @@ class AddressView {
   }
 
   private createCountryField(): InputFieldModel {
-    if (this.addressType === ADDRESS_TYPE.SHIPPING) {
+    if (this.addressType === ADDRESS.SHIPPING) {
       this.countryField = new InputFieldModel(
         FORM_FIELDS.SHIPPING_ADDRESS_COUNTRY,
         FORM_VALIDATION.ADDRESS_COUNTRY_VALIDATE,
@@ -158,7 +158,7 @@ class AddressView {
     this.address = createBaseElement({
       cssClasses: [
         styles.address,
-        this.addressType === ADDRESS_TYPE.SHIPPING ? styles.shippingAddressWrapper : styles.billingAddressWrapper,
+        this.addressType === ADDRESS.SHIPPING ? styles.shippingAddressWrapper : styles.billingAddressWrapper,
       ],
       tag: 'div',
     });
@@ -178,7 +178,7 @@ class AddressView {
   }
 
   private createPostalCodeField(): InputFieldModel {
-    if (this.addressType === ADDRESS_TYPE.SHIPPING) {
+    if (this.addressType === ADDRESS.SHIPPING) {
       this.postalCodeField = new InputFieldModel(
         FORM_FIELDS.SHIPPING_ADDRESS_POSTAL_CODE,
         FORM_VALIDATION.ADDRESS_POSTAL_CODE_VALIDATE,
@@ -196,7 +196,7 @@ class AddressView {
   }
 
   private createStreetField(): InputFieldModel {
-    if (this.addressType === ADDRESS_TYPE.SHIPPING) {
+    if (this.addressType === ADDRESS.SHIPPING) {
       this.streetField = new InputFieldModel(
         FORM_FIELDS.SHIPPING_ADDRESS_STREET,
         FORM_VALIDATION.ADDRESS_STREET_VALIDATE,
@@ -220,11 +220,11 @@ class AddressView {
     const currentLanguage = getCurrentLanguage();
 
     switch (this.addressType) {
-      case ADDRESS_TYPE.BILLING:
+      case ADDRESS.BILLING:
         titleText = TITLE_TEXT[currentLanguage].BILLING_ADDRESS;
         key = TITLE_TEXT_KEYS.BILLING_ADDRESS;
         break;
-      case ADDRESS_TYPE.SHIPPING:
+      case ADDRESS.SHIPPING:
         titleText = TITLE_TEXT[currentLanguage].SHIPPING_ADDRESS;
         key = TITLE_TEXT_KEYS.SHIPPING_ADDRESS;
         break;

src/entities/Address/view/addressView.module.scss

@@ -3,6 +3,7 @@
   grid-column: 2 span;
   grid-template-columns: repeat(2, 1fr);
   padding: var(--extra-small-offset);
+  width: 100%;
   gap: calc(var(--extra-small-offset) * 1.5) var(--extra-small-offset);
 
   .title {

src/entities/CountBadge/view/CountBadgeView.ts

@@ -8,18 +8,15 @@ class CountBadgeView {
   private countBadgeWrap: HTMLDivElement;
 
   constructor() {
-    this.countBadgeWrap = this.createHTML();
     this.countBadge = this.createBadge();
+    this.countBadgeWrap = this.createHTML();
   }
 
   private createBadge(): HTMLSpanElement {
-    this.countBadge = createBaseElement({
+    return createBaseElement({
       cssClasses: [styles.badge],
       tag: 'span',
     });
-    this.countBadgeWrap.append(this.countBadge);
-
-    return this.countBadge;
   }
 
   private createHTML(): HTMLDivElement {
@@ -28,6 +25,8 @@ class CountBadgeView {
       tag: 'div',
     });
 
+    this.countBadgeWrap.append(this.countBadge);
+
     return this.countBadgeWrap;
   }
 

src/entities/CountBadge/view/countBadgeView.module.scss

@@ -5,10 +5,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border: var(--one) solid var(--noble-gray-1000);
   border-radius: 100%;
   width: calc(var(--tiny-offset) * 2);
   height: calc(var(--tiny-offset) * 2);
+  box-shadow: 0 0 0 var(--one) var(--noble-gray-tr-1000);
   font: var(--regular-font);
   background-color: var(--steam-green-800);
 }