feat: product configurator support

angular.json

@@ -38,6 +38,10 @@
                 "input": "projects/storefrontapp/src/styles/lib-organization.scss",
                 "bundleName": "organization"
               },
+              {
+                "input": "projects/storefrontapp/src/styles/lib-product-configurator.scss",
+                "bundleName": "product-configurator"
+              },              
               {
                 "input": "projects/storefrontapp/src/styles/lib-storefinder.scss",
                 "bundleName": "storefinder"
@@ -491,6 +495,44 @@
         }
       }
     },
+    "product-configurator": {
+      "projectType": "library",
+      "root": "feature-libs/product-configurator",
+      "sourceRoot": "feature-libs/product-configurator",
+      "prefix": "cx",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "feature-libs/product-configurator/tsconfig.lib.json",
+            "project": "feature-libs/product-configurator/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "feature-libs/product-configurator/tsconfig.lib.prod.json"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "feature-libs/product-configurator/test.ts",
+            "tsConfig": "feature-libs/product-configurator/tsconfig.spec.json",
+            "karmaConfig": "feature-libs/product-configurator/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "feature-libs/product-configurator/tsconfig.lib.json",
+              "feature-libs/product-configurator/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
     "cdc": {
       "projectType": "library",
       "root": "integration-libs/cdc",

ci-scripts/unit-tests-sonar.sh

@@ -13,7 +13,7 @@ if [[ -n "$coverage" ]]; then
     exit 1
 fi
 
-echo "Running unit tests and code coverage for Spartacus core"
+echo "Running unit tests and code coverage for core"
 exec 5>&1
 output=$(ng test core --watch=false --sourceMap --code-coverage --browsers=ChromeHeadless | tee /dev/fd/5)
 coverage=$(echo $output | grep -i "does not meet global threshold" || true)
@@ -22,7 +22,7 @@ if [[ -n "$coverage" ]]; then
     exit 1
 fi
 
-echo "Running unit tests and code coverage for storefront library"
+echo "Running unit tests and code coverage for storefrontlib"
 exec 5>&1
 output=$(ng test storefrontlib --sourceMap --watch=false --code-coverage --browsers=ChromeHeadless | tee /dev/fd/5)
 coverage=$(echo $output | grep -i "does not meet global threshold" || true)
@@ -31,6 +31,22 @@ if [[ -n "$coverage" ]]; then
     exit 1
 fi
 
+echo "Running unit tests and code coverage for product library"
+exec 5>&1
+output=$(ng test product --sourceMap --watch=false --code-coverage --browsers=ChromeHeadless | tee /dev/fd/5)
+
+echo "Running unit tests and code coverage for product-configurator library"
+exec 5>&1
+output=$(ng test product-configurator --sourceMap --watch=false --code-coverage --browsers=ChromeHeadless | tee /dev/fd/5)
+coverage=$(echo $output | grep -i "does not meet global threshold" || true)
+if [[ -n "$coverage" ]]; then
+    echo "Error: Tests did not meet coverage expectations"
+    exit 1
+fi
+echo "Running schematics unit tests and code coverage for product-configurator library"
+exec 5>&1
+output=$(yarn --cwd feature-libs/product-configurator run test:schematics --coverage=true | tee /dev/fd/5)
+
 echo "Running unit tests and code coverage for CDC"
 exec 5>&1
 output=$(ng test cdc --sourceMap --watch=false --code-coverage --browsers=ChromeHeadless | tee /dev/fd/5)

feature-libs/product-configurator/.release-it.json

@@ -0,0 +1,34 @@
+{
+  "git": {
+    "requireCleanWorkingDir": true,
+    "requireUpstream": false,
+    "tagName": "product-configurator-${version}",
+    "commitMessage": "Bumping product-configurator version to ${version}",
+    "tagAnnotation": "Bumping product-configurator version to ${version}"
+  },
+  "npm": {
+    "publishPath": "./../../dist/product-configurator"
+  },
+  "hooks": {
+    "after:version:bump": "cd ../.. && ng build product-configurator --prod"
+  },
+  "github": {
+    "release": true,
+    "assets": ["../../docs.tar.gz", "../../docs.zip"],
+    "releaseName": "@spartacus/product-configurator@${version}",
+    "releaseNotes": "ts-node ../../scripts/changelog.ts --verbose --lib product-configurator --to product-configurator-${version}"
+  },
+  "plugins": {
+    "../../scripts/release-it/bumper.js": {
+      "out": [
+        {
+          "file": "package.json",
+          "path": [
+            "peerDependencies.@spartacus/core",
+            "peerDependencies.@spartacus/storefront"
+          ]
+        }
+      ]
+    }
+  }
+}

feature-libs/product-configurator/README.md

@@ -0,0 +1,5 @@
+# Spartacus Product Configurator
+
+`@spartacus/product-configurator` is a package that you can include in your application, which allows you to use different product configurators.
+
+For more information, see [Spartacus](https://github.com/SAP/spartacus).

feature-libs/product-configurator/_index.scss

@@ -0,0 +1,5 @@
+@import '~@spartacus/styles/scss/core';
+
+@import './common/index';
+@import './rulebased/index';
+@import './textfield/index';

feature-libs/product-configurator/common/_index.scss

@@ -0,0 +1,17 @@
+@import './styles/index';
+
+$configurator-common-components: cx-configurator-issues-notification,
+  cx-configure-product, cx-configure-cart-entry, cx-configurator-cart-entry-info !default;
+
+@each $selector in $configurator-common-components {
+  #{$selector} {
+    @extend %#{$selector} !optional;
+  }
+}
+
+// add body specific selectors
+body {
+  @each $selector in $configurator-common-components {
+    @extend %#{$selector}__body !optional;
+  }
+}

feature-libs/product-configurator/common/assets/public_api.ts

@@ -0,0 +1 @@
+export * from './translations/translations';

feature-libs/product-configurator/common/assets/translations/en/configurator-common.ts

@@ -0,0 +1,67 @@
+export const configurator = {
+  configurator: {
+    header: {
+      consistent: 'Consistent',
+      complete: 'Complete',
+      configId: 'Configuration ID',
+      toconfig: 'Configure',
+      editConfiguration: 'Edit Configuration',
+      displayConfiguration: 'Display Configuration',
+      resolveIssues: 'Resolve Issues',
+      updateMessage: 'The configuration is being updated in the background',
+      showMore: 'show more',
+      showLess: 'show less',
+    },
+    tabBar: {
+      configuration: 'Configuration',
+      overview: 'Overview',
+    },
+    notificationBanner: {
+      numberOfIssues: '{{count}} issue must be resolved before checkout.',
+      numberOfIssues_plural:
+        '{{count}} issues must be resolved before checkout.',
+    },
+    attribute: {
+      caption: 'Attributes',
+      notSupported: 'Attibute Type is not supported.',
+      requiredAttribute: '{{param}} required',
+      defaultRequiredMessage: 'Enter a value for the required field',
+      singleSelectRequiredMessage: 'Select a value',
+      multiSelectRequiredMessage: 'Select one or more values',
+      wrongNumericFormat:
+        'Wrong format, this numerical attribute should be entered according to pattern {{pattern}}',
+    },
+    button: {
+      previous: 'Previous',
+      next: 'Next',
+      back: 'Back',
+    },
+    priceSummary: {
+      basePrice: 'Base Price',
+      selectedOptions: 'Selected Options',
+      totalPrice: 'Total',
+    },
+    addToCart: {
+      button: 'Add to Cart',
+      buttonAfterAddToCart: 'Continue to Cart',
+      buttonUpdateCart: 'Done',
+      confirmation: 'Configuration has been added to the cart',
+      confirmationUpdate: 'Cart has been updated with configuration',
+    },
+    overviewForm: {
+      noAttributeHeader: 'No Results',
+      noAttributeText: 'Remove filter(s) to see Overview content',
+    },
+    group: {
+      general: 'General',
+      conflictHeader: 'Resolve conflicts',
+      conflictGroup: 'Conflict for {{attribute}}',
+    },
+    conflict: {
+      suggestionTitle: 'Suggestion {{number}}:',
+      suggestionText: 'Change value for "{{ attribute }}"',
+      viewConflictDetails: 'Conflict Detected',
+      viewConfigurationDetails: '',
+    },
+  },
+};

feature-libs/product-configurator/common/assets/translations/en/index.ts

@@ -0,0 +1,5 @@
+import { configurator } from './configurator-common';
+
+export const en = {
+  configurator,
+};

feature-libs/product-configurator/common/assets/translations/translations.ts

@@ -0,0 +1,8 @@
+import { TranslationChunksConfig, TranslationResources } from '@spartacus/core';
+import { en } from './en/index';
+
+export const configuratorTranslations: TranslationResources = {
+  en,
+};
+//empty for now but needed for schematics support
+export const configuratorTranslationChunksConfig: TranslationChunksConfig = {};

feature-libs/product/configurators/common/src/common-configurator.module.ts → feature-libs/product-configurator/common/common-configurator.module.ts

@@ -1,8 +1,8 @@
 import { NgModule } from '@angular/core';
 import { CommonConfiguratorComponentsModule } from './components/common-configurator-components.module';
-import { CommonConfiguratorCoreModule } from './core/common-configurator-core.module';
+import { CommonConfiguratorOccModule } from './occ/common-configurator-occ.module';
 
 @NgModule({
-  imports: [CommonConfiguratorCoreModule, CommonConfiguratorComponentsModule],
+  imports: [CommonConfiguratorOccModule, CommonConfiguratorComponentsModule],
 })
 export class CommonConfiguratorModule {}

feature-libs/product-configurator/common/components/common-configurator-components.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { ConfiguratorCartEntryInfoModule } from './configurator-cart-entry-info/configurator-cart-entry-info.module';
+import { ConfiguratorIssuesNotificationModule } from './configurator-issues-notification/configurator-issues-notification.module';
+import { ConfigureCartEntryModule } from './configure-cart-entry/configure-cart-entry.module';
+import { ConfigureProductModule } from './configure-product/configure-product.module';
+
+@NgModule({
+  imports: [
+    ConfiguratorIssuesNotificationModule,
+    ConfiguratorCartEntryInfoModule,
+    ConfigureCartEntryModule,
+    ConfigureProductModule,
+  ],
+})
+export class CommonConfiguratorComponentsModule {}

feature-libs/product-configurator/common/components/configurator-cart-entry-info/configurator-cart-entry-info.component.html

@@ -0,0 +1,21 @@
+<ng-container *ngIf="cartItemContext?.context$ | async as ctx">
+  <ng-container *ngIf="hasStatus(ctx.item)">
+    <div
+      class="cx-configuration-info"
+      *ngFor="let info of ctx.item.configurationInfos"
+    >
+      <div class="cx-label">{{ info?.configurationLabel }}:</div>
+      <div class="cx-value">
+        {{ info?.configurationValue }}
+      </div>
+    </div>
+  </ng-container>
+
+  <cx-configure-cart-entry
+    *ngIf="ctx.item?.product?.configurable"
+    [cartEntry]="ctx.item"
+    [readOnly]="ctx.readonly"
+    [msgBanner]="false"
+    [disabled]="ctx.quantityControl.disabled"
+  ></cx-configure-cart-entry>
+</ng-container>