Merge remote-tracking branch 'origin/develop-next-major' into epic/te…

…w-translation

.github/workflows/ci.yml

@@ -225,7 +225,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - name: Setup node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE_VERSION }}
       - name: Cache node_modules
@@ -277,7 +277,7 @@ jobs:
       - name: Notify the slack channel of when build conclusion failed
         env:
           SLACK_BOT_TOKEN: ${{ secrets.SLACK_TOKEN }}
-        uses: slackapi/slack-github-action@v1.27.0
+        uses: slackapi/slack-github-action@v1.27.1
         with:
           channel-id: ${{ secrets.SLACK_NOTIFICATION_CHANNEL }}
           payload: |

.prettierignore

@@ -5,4 +5,5 @@ feature-libs/smartedit/assets/webApplicationInjector.js
 coverage
 
 /.nx/cache
-/.nx/workspace-data
+/.nx/workspace-data
+projects/storefrontstyles/vendor/**/*.scss

.stylelintrc.json

@@ -38,8 +38,14 @@
       "margin-inline"
     ],
     "declaration-property-value-disallowed-list": {
-      "text-align": ["right", "left"]
+      "text-align": [
+        "right",
+        "left"
+      ]
     },
     "scss/comment-no-loud": true
-  }
+  },
+  "ignoreFiles": [
+    "projects/storefrontstyles/vendor/**/*.scss"
+  ]
 }

README.md

@@ -158,4 +158,3 @@ Many improvements are coming! All tasks will be posted to our GitHub issue track
 
 Copyright (c) 2024 SAP SE or an SAP affiliate company. All rights reserved.
 This file is licensed under the Apache Software License, v. 2 except as noted otherwise in the [LICENSE](LICENSE) file.
-

core-libs/setup/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spartacus/setup",
-  "version": "2211.32.0-1",
+  "version": "2211.32.0",
   "description": "Includes features that makes Spartacus and it's setup easier and streamlined.",
   "keywords": [
     "spartacus",
@@ -16,15 +16,15 @@
     "test": "../../node_modules/.bin/jest --config ./jest.config.js"
   },
   "dependencies": {
-    "tslib": "^2.6.2"
+    "tslib": "^2.8.1"
   },
   "peerDependencies": {
     "@angular/core": "^18.2.9",
     "@angular/ssr": "^18.2.9",
-    "@spartacus/cart": "2211.32.0-1",
-    "@spartacus/core": "2211.32.0-1",
-    "@spartacus/order": "2211.32.0-1",
-    "@spartacus/user": "2211.32.0-1"
+    "@spartacus/cart": "2211.32.0",
+    "@spartacus/core": "2211.32.0",
+    "@spartacus/order": "2211.32.0",
+    "@spartacus/user": "2211.32.0"
   },
   "optionalDependencies": {
     "@angular/platform-server": "^18.2.9",

docs/migration/2211_ng18/bootstrap.md

@@ -0,0 +1,76 @@
+# Spartacus migration - Bootstrap
+
+1. Uninstall Bootstrap
+   If the bootstrap package is still installed in your project, uninstall it to avoid conflicts. Use
+   the following command:
+   ```npm uninstall bootstrap```
+2. Update `styles.scss`
+   Modify the `styles.scss` file to integrate Spartacus styles along with Bootstrap. Proper import order is critical for
+   styles to be applied correctly.
+### Steps to Update:
+1. Place the following import for styles-config at the top of the file:
+       ```@import 'styles-config';```
+2. Add Spartacus core styles first. Importing Spartacus styles before Bootstrap ensures core styles load as a
+   priority.
+3. Follow this by importing Bootstrap styles using the Bootstrap copy provided by Spartacus. Ensure the order of
+   Bootstrap imports matches the sequence below for consistency.
+4. Conclude with the Spartacus index styles.
+
+
+   Final file structure should look like this:
+
+```styles.scss
+// ORDER IMPORTANT: Spartacus core first
+@import '@spartacus/styles/scss/core';
+
+// ORDER IMPORTANT: Bootstrap next
+@import '@spartacus/styles/vendor/bootstrap/scss/reboot';
+@import '@spartacus/styles/vendor/bootstrap/scss/type';
+@import '@spartacus/styles/vendor/bootstrap/scss/grid';
+@import '@spartacus/styles/vendor/bootstrap/scss/utilities';
+@import '@spartacus/styles/vendor/bootstrap/scss/transitions';
+@import '@spartacus/styles/vendor/bootstrap/scss/dropdown';
+@import '@spartacus/styles/vendor/bootstrap/scss/card';
+@import '@spartacus/styles/vendor/bootstrap/scss/nav';
+@import '@spartacus/styles/vendor/bootstrap/scss/buttons';
+@import '@spartacus/styles/vendor/bootstrap/scss/forms';
+@import '@spartacus/styles/vendor/bootstrap/scss/custom-forms';
+@import '@spartacus/styles/vendor/bootstrap/scss/modal';
+@import '@spartacus/styles/vendor/bootstrap/scss/close';
+@import '@spartacus/styles/vendor/bootstrap/scss/alert';
+@import '@spartacus/styles/vendor/bootstrap/scss/tooltip';
+
+@import '@spartacus/styles/index';
+```
+3. Individual imports.
+   If your application directly imports specific Bootstrap classes in any of your stylesheets, replace those imports with the corresponding Spartacus imports. For example:
+```
+// Original import
+@import '~bootstrap/scss/reboot';
+
+// Replace with
+@import '@spartacus/styles/vendor/bootstrap/scss/reboot';
+```
+
+4. Some libraries have stopped importing Bootstrap-related styles. Instead, these styles should now be imported directly within the application. For example, the lib-cart.scss file should include the following imports:
+```scss
+// original imports
+@import '../styles-config';
+@import '@spartacus/cart';
+// new imports
+@import '@spartacus/styles/vendor/bootstrap/scss/functions';
+@import '@spartacus/styles/vendor/bootstrap/scss/variables';
+@import '@spartacus/styles/vendor/bootstrap/scss/_mixins';
+```
+Affected libraries:
+- cart
+- checkout
+- organization
+- pick-up-in-store
+- product
+- product-multi-dimensional
+- qualtrics
+- quote
+- storefinder
+- epd-visualization
+- opf

docs/migration/2211_ng18/typescript-manual.doc.md

@@ -0,0 +1,5 @@
+# Changes in feature lib order
+
+## MyAccountV2OrderHistoryService
+
+Method `getOrderDetails` has been removed. Instead directly use `getOrderDetailsV2`.

feature-libs/asm/components/asm-create-customer-form/asm-create-customer-form.component.html

@@ -49,10 +49,13 @@ <h2 id="asm-create-customer-form-title" class="title modal-title">
                   placeholder="{{
                     'asm.createCustomerForm.firstName.placeholder' | cxTranslate
                   }}"
+                  [attr.aria-describedby]="'firstNameError'"
                   formControlName="firstName"
                   name="text"
                 />
                 <cx-form-errors
+                  id="firstNameError"
+                  aria-live="off"
                   [control]="registerForm.get('firstName')"
                 ></cx-form-errors>
               </label>
@@ -69,10 +72,13 @@ <h2 id="asm-create-customer-form-title" class="title modal-title">
                   placeholder="{{
                     'asm.createCustomerForm.lastName.placeholder' | cxTranslate
                   }}"
+                  [attr.aria-describedby]="'lastNameError'"
                   name="text"
                   formControlName="lastName"
                 />
                 <cx-form-errors
+                  id="lastNameError"
+                  aria-live="off"
                   [control]="registerForm.get('lastName')"
                 ></cx-form-errors>
               </label>
@@ -90,10 +96,13 @@ <h2 id="asm-create-customer-form-title" class="title modal-title">
                     'asm.createCustomerForm.emailAddress.placeholder'
                       | cxTranslate
                   }}"
+                  [attr.aria-describedby]="'emailError'"
                   name="email"
                   formControlName="email"
                 />
                 <cx-form-errors
+                  id="emailError"
+                  aria-live="off"
                   [control]="registerForm.get('email')"
                 ></cx-form-errors>
               </label>

feature-libs/asm/components/csagent-login-form/csagent-login-form.component.html

@@ -12,11 +12,14 @@
       type="text"
       formControlName="userId"
       [attr.aria-label]="'asm.loginForm.userId.label' | cxTranslate"
+      [attr.aria-describedby]="'userIdError'"
     />
 
     <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
     <cx-form-errors
       *cxFeature="'formErrorsDescriptiveMessages'"
+      id="userIdError"
+      aria-live="off"
       [translationParams]="{
         label: 'asm.loginForm.userId.label' | cxTranslate,
       }"
@@ -38,12 +41,15 @@
       type="password"
       formControlName="password"
       [attr.aria-label]="'asm.loginForm.password.label' | cxTranslate"
+      [attr.aria-describedby]="'passwordError'"
       cxPasswordVisibilitySwitch
     />
 
     <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
     <cx-form-errors
       *cxFeature="'formErrorsDescriptiveMessages'"
+      id="passwordError"
+      aria-live="off"
       [translationParams]="{
         label: 'asm.loginForm.password.label' | cxTranslate,
       }"

feature-libs/asm/components/csagent-login-form/csagent-login-form.component.ts

@@ -26,7 +26,7 @@ export class CSAgentLoginFormComponent implements OnInit {
   submitEvent = new EventEmitter<{ userId: string; password: string }>();
 
   constructor(protected fb: UntypedFormBuilder) {
-    useFeatureStyles('a11yPasswordVisibilityBtnValueOverflow');
+    useFeatureStyles('a11yPasswordVisibliltyBtnValueOverflow');
     useFeatureStyles('a11yTextSpacingAdjustments');
   }
 

feature-libs/asm/components/customer-selection/customer-selection.component.html

@@ -175,6 +175,7 @@
         type="text"
         formControlName="searchTerm"
         [attr.aria-label]="'asm.customerSearch.searchTerm.label' | cxTranslate"
+        [attr.aria-describedby]="'searchTermError'"
         placeholder="{{ 'asm.customerSearch.searchTerm.label' | cxTranslate }}"
         (keydown.arrowdown)="focusFirstItem($event)"
         (keydown.end)="setSelectionEnd($event)"
@@ -183,6 +184,8 @@
       <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
       <cx-form-errors
         *cxFeature="'formErrorsDescriptiveMessages'"
+        id="searchTermError"
+        aria-live="off"
         [translationParams]="{
           label: 'asm.customerSearch.searchTerm.label' | cxTranslate,
         }"

feature-libs/asm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spartacus/asm",
-  "version": "2211.32.0-1",
+  "version": "2211.32.0",
   "description": "ASM feature library for Spartacus",
   "keywords": [
     "spartacus",
@@ -22,7 +22,7 @@
     "test:schematics": "npm --prefix ../../projects/schematics/ run clean && npm run clean:schematics && ../../node_modules/.bin/jest --config ./jest.schematics.config.js"
   },
   "dependencies": {
-    "tslib": "^2.6.2"
+    "tslib": "^2.8.1"
   },
   "peerDependencies": {
     "@angular-devkit/schematics": "^18.2.9",
@@ -32,14 +32,14 @@
     "@ng-select/ng-select": "^13.9.1",
     "@ngrx/effects": "^18.1.1",
     "@ngrx/store": "^18.1.1",
-    "@spartacus/cart": "2211.32.0-1",
-    "@spartacus/core": "2211.32.0-1",
-    "@spartacus/order": "2211.32.0-1",
-    "@spartacus/schematics": "2211.32.0-1",
-    "@spartacus/storefinder": "2211.32.0-1",
-    "@spartacus/storefront": "2211.32.0-1",
-    "@spartacus/styles": "2211.32.0-1",
-    "@spartacus/user": "2211.32.0-1",
+    "@spartacus/cart": "2211.32.0",
+    "@spartacus/core": "2211.32.0",
+    "@spartacus/order": "2211.32.0",
+    "@spartacus/schematics": "2211.32.0",
+    "@spartacus/storefinder": "2211.32.0",
+    "@spartacus/storefront": "2211.32.0",
+    "@spartacus/styles": "2211.32.0",
+    "@spartacus/user": "2211.32.0",
     "rxjs": "^7.8.0"
   },
   "publishConfig": {

feature-libs/cart/_index.scss

@@ -2,10 +2,6 @@
 @import '@spartacus/styles/scss/cxbase/blocks/modal';
 @import '@spartacus/styles/scss/misc/table';
 
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/_mixins';
-
 @mixin visible-focus {
   outline-style: solid;
   outline-color: var(--cx-color-visual-focus);

feature-libs/cart/base/components/add-to-cart/add-to-cart.component.html

@@ -43,6 +43,7 @@
     "
     type="submit"
     [disabled]="disabled || quantity <= 0 || quantity > maxQuantity"
+    [attr.aria-describedby]="productCode + '_header'"
   >
     <span
       *ngIf="

feature-libs/cart/base/components/cart-coupon/cart-coupon.component.html

@@ -64,6 +64,7 @@
           <!-- TODO: (CXSPA-7479) Remove feature flags next major -->
           <input
             [attr.aria-labelledby]="'card-coupon-input-label'"
+            [attr.aria-describedby]="'couponCodeError'"
             required="true"
             type="text"
             class="form-control input-coupon-code"
@@ -81,6 +82,8 @@
           <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
           <cx-form-errors
             *cxFeature="'formErrorsDescriptiveMessages'"
+            id="couponCodeError"
+            aria-live="off"
             [translationParams]="{
               label: 'voucher.placeholder' | cxTranslate,
             }"

feature-libs/cart/base/components/clear-cart/clear-cart-dialog/clear-cart-dialog.component.html

@@ -1,11 +1,11 @@
 <div
   [cxFocus]="focusConfig"
   (esc)="close('Escape clicked')"
-  class="cx-clear-cart-dialog"
+  class="modal-dialog modal-dialog-centered cx-clear-cart-dialog"
   role="dialog"
   aria-labelledby="dialogTitle"
 >
-  <div class="cx-clear-cart-container">
+  <div class="modal-content cx-clear-cart-container">
     <ng-container *ngIf="!isClearing; else loading">
       <div
         *cxFeature="'!a11yRemoveStatusLoadedRole'"
@@ -43,7 +43,7 @@
       </div>
 
       <!-- Modal Body -->
-      <div class="cx-clear-cart-body">
+      <div class="modal-body cx-clear-cart-body">
         <div class="clear-cart-msg">
           {{ 'clearCart.allItemsWillBeRemoved' | cxTranslate }}
         </div>

feature-libs/cart/base/components/mini-cart/mini-cart.component.ts

@@ -6,6 +6,7 @@
 
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ICON_TYPE } from '@spartacus/storefront';
+import { useFeatureStyles } from '@spartacus/core';
 import { Observable } from 'rxjs';
 import { MiniCartComponentService } from './mini-cart-component.service';
 
@@ -21,5 +22,7 @@ export class MiniCartComponent {
 
   total$: Observable<string> = this.miniCartComponentService.getTotalPrice();
 
-  constructor(protected miniCartComponentService: MiniCartComponentService) {}
+  constructor(protected miniCartComponentService: MiniCartComponentService) {
+    useFeatureStyles('a11yMiniCartFocusOnMobile');
+  }
 }

feature-libs/cart/base/styles/components/_clear-cart-dialog.scss

@@ -2,12 +2,7 @@
   background-color: rgba(0, 0, 0, 0.5);
 
   .cx-clear-cart-dialog {
-    @extend .modal-dialog;
-    @extend .modal-dialog-centered;
-
     .cx-clear-cart-container {
-      @extend .modal-content;
-
       .cx-clear-cart-header {
         .cx-clear-cart-title {
           font-size: var(--cx-font-size, 1.375rem);
@@ -17,8 +12,6 @@
       }
 
       .cx-clear-cart-body {
-        @extend .modal-body;
-
         .clear-cart-msg {
           margin-bottom: 1.5rem;
         }