Merge branch 'develop' into 'master' for 0.27.0 release

.github/workflows/demo-server.yml

@@ -75,7 +75,7 @@ jobs:
           GROUP: ${{ secrets.AZURE_DEMO_RESOURCEGROUP }}
         run: |
           az webapp config container set --resource-group $GROUP --name $APP --docker-registry-server-user ${{ secrets.DOCKER_REGISTRY_USERNAME }} --docker-registry-server-password ${{ secrets.DOCKER_REGISTRY_PASSWORD }} --docker-custom-image-name $DOCKER_IMAGE_UNIVERSAL || az webapp create --resource-group $GROUP --plan ${{ secrets.AZURE_DEMO_APPSERVICEPLAN }} --name $APP --docker-registry-server-user ${{ secrets.DOCKER_REGISTRY_USERNAME }} --docker-registry-server-password ${{ secrets.DOCKER_REGISTRY_PASSWORD }} --deployment-container-image-name $DOCKER_IMAGE_UNIVERSAL
-          az webapp config appsettings set -g $GROUP -n $APP --settings LOGGING=true ICM_BASE_URL=$ICM_BASE_URL ICM_CHANNEL=inSPIRED-inTRONICS_Business-Site THEME=blue\|688dc3 FEATURES=compare,recently,tracking,sentry,advancedVariationHandling,businessCustomerRegistration,quoting,quickorder,orderTemplates TACTON='${{ secrets.TACTON }}'
+          az webapp config appsettings set -g $GROUP -n $APP --settings LOGGING=true ICM_BASE_URL=$ICM_BASE_URL ICM_CHANNEL=inSPIRED-inTRONICS_Business-Site THEME=blue\|688dc3 FEATURES=compare,recently,tracking,sentry,advancedVariationHandling,businessCustomerRegistration,quoting,quickorder,punchout,orderTemplates TACTON='${{ secrets.TACTON }}'
           az webapp deployment container config -g $GROUP -n $APP --enable-cd true
           echo "B2B channel: http://$APP.azurewebsites.net"
 

.github/workflows/integration.yml

@@ -82,7 +82,7 @@ jobs:
         run: |
           echo "THEME=blue" >> $GITHUB_ENV
           echo "ICM_CHANNEL=inSPIRED-inTRONICS_Business-Site" >> $GITHUB_ENV
-          echo "FEATURES=quoting,quickorder,orderTemplates,compare,recently,businessCustomerRegistration,advancedVariationHandling" >> $GITHUB_ENV
+          echo "FEATURES=quoting,quickorder,orderTemplates,compare,recently,businessCustomerRegistration,punchout,advancedVariationHandling" >> $GITHUB_ENV
 
       - name: Start SSR
         run: npm run serve &
@@ -126,7 +126,7 @@ jobs:
         run: |
           echo "THEME=blue" >> $GITHUB_ENV
           echo "ICM_CHANNEL=inSPIRED-inTRONICS_Business-Site" >> $GITHUB_ENV
-          echo "FEATURES=quoting,quickorder,orderTemplates,compare,recently,businessCustomerRegistration,advancedVariationHandling" >> $GITHUB_ENV
+          echo "FEATURES=quoting,quickorder,orderTemplates,compare,recently,businessCustomerRegistration,punchout,advancedVariationHandling" >> $GITHUB_ENV
 
       - name: Start SSR
         run: npm run serve &

.gitlab-ci.yml

@@ -193,7 +193,7 @@ deploy_demo_b2b:
       --env LOGGING=true
       --env PROXY_ICM=true
       --env THEME="blue|688dc3"
-      --env FEATURES=quoting,quickorder,orderTemplates,compare,recently,businessCustomerRegistration,advancedVariationHandling,sentry,tacton
+      --env FEATURES=quoting,quickorder,orderTemplates,compare,recently,businessCustomerRegistration,advancedVariationHandling,sentry,tacton, punchout
       --env ICM_CHANNEL=inSPIRED-inTRONICS_Business-Site
       --env SENTRY_DSN=${SENTRY_DSN}
       --env TACTON="${TACTON}"
@@ -228,7 +228,7 @@ deploy_demo_nginx:
       .+\.com:
         channel: inSPIRED-inTRONICS_Business-Site
         lang: de_DE
-        features: quoting,quickorder,orderTemplates,recently,compare,businessCustomerRegistration,advancedVariationHandling,sentry,tacton
+        features: quoting,quickorder,orderTemplates,recently,compare,businessCustomerRegistration,advancedVariationHandling,sentry,tacton, punchout
         theme: blue|688dc3
       .+\.fr:
         channel: inSPIRED-inTRONICS-Site
@@ -334,7 +334,7 @@ deploy_review_b2c:
       .+\.com:
         channel: inSPIRED-inTRONICS_Business-Site
         lang: de_DE
-        features: quoting,quickorder,orderTemplates,recently,compare,businessCustomerRegistration,advancedVariationHandling,sentry,tacton
+        features: quoting,quickorder,orderTemplates,recently,compare,businessCustomerRegistration,advancedVariationHandling,sentry,tacton, punchout
         theme: blue|688dc3
       .+\.fr:
         channel: inSPIRED-inTRONICS-Site
@@ -447,7 +447,7 @@ deploy_review_b2b:
       -e ICM_BASE_URL=${ICM_BASE_URL}
       -e THEME="blue|688dc3"
       -e ICM_CHANNEL=inSPIRED-inTRONICS_Business-Site
-      -e FEATURES=quoting,quickorder,orderTemplates,recently,compare,businessCustomerRegistration,advancedVariationHandling,sentry,tacton
+      -e FEATURES=quoting,quickorder,orderTemplates,recently,compare,businessCustomerRegistration,advancedVariationHandling,sentry,tacton, punchout
       --add-host $ICM_HOST:$ICM_IP
       --add-host $DEMO_SERVER_NAME:$DEMO_SERVER_IP
       ${CI_REGISTRY_IMAGE}:${CI_COMMIT_REF_SLUG}-${CI_BUILD_REF}

3rd-party-licenses.txt

@@ -924,7 +924,7 @@
 "inquirer@7.3.3","MIT","Copyright (c) 2012 Simon Boudrias","https://github.com/SBoudrias/Inquirer.js"
 "internal-ip@4.3.0","MIT","Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)","https://github.com/sindresorhus/internal-ip"
 "interpret@1.4.0","MIT","Copyright (c) 2014-2018 Tyler Kellen <tyler@sleekcode.net>, Blaine Bublitz <blaine.bublitz@gmail.com>, and Eric Schoffstall <yo@contra.io>","https://github.com/gulpjs/interpret"
-"intershop-pwa@0.26.0","UNLICENSED","Copyright (c) 2020 Intershop Communications AG, http://www.intershop.de",""
+"intershop-pwa@0.27.0","UNLICENSED","Copyright (c) 2020 Intershop Communications AG, http://www.intershop.de",""
 "intershop-schematics@0.0.1","UNLICENSED","",""
 "inversify@5.0.1","MIT","Copyright (c) 2015-2017 Remo H. Jansen","https://github.com/inversify/InversifyJS"
 "ip-regex@2.1.0","MIT","Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)","https://github.com/sindresorhus/ip-regex"

CHANGELOG.md

@@ -7,6 +7,44 @@ kb_everyone
 
 # Changelog
 
+## [0.27.0](https://github.com/intershop/intershop-pwa/releases/tag/0.27.0) (2021-01-30)
+
+**required Intershop Commerce Management version: 7.10.27.0**
+
+### Features
+
+- support for Cybersource credit card payment (#464) ([e953874](https://github.com/intershop/intershop-pwa/commit/e953874))
+- punchout functionality - user management, basket transmission, functions routing (OCI Punchout) (#490) ([2529e89](https://github.com/intershop/intershop-pwa/commit/2529e89))
+- add structural not-role-toggle-directive to hide html elements if the current user has a certain role ([24fb46b](https://github.com/intershop/intershop-pwa/commit/24fb46b))
+- extend authorization store by roleIds ([68a3fc6](https://github.com/intershop/intershop-pwa/commit/68a3fc6))
+- set business errors independent of REST API errors to trigger the error page ([397a285](https://github.com/intershop/intershop-pwa/commit/397a285))
+- add order templates widget on MyAccount overview page (#502) ([6eff141](https://github.com/intershop/intershop-pwa/commit/6eff141))
+- if the basket total equals 0 display only an info message on checkout payment page (#499) ([508450f](https://github.com/intershop/intershop-pwa/commit/508450f))
+
+### Bug Fixes
+
+- use localStorage as storage for oauth (#518) ([ae000ee](https://github.com/intershop/intershop-pwa/commit/ae000ee))
+- hide badge for recaptcha v3 (#510) ([c3568cc](https://github.com/intershop/intershop-pwa/commit/c3568cc))
+- use carousel select method to set active slide (#508) ([2302a53](https://github.com/intershop/intershop-pwa/commit/2302a53))
+- properly calculate product availability ([a5e4612](https://github.com/intershop/intershop-pwa/commit/a5e4612))
+- send PGID for CMS View Context calls (#501) ([402ffc6](https://github.com/intershop/intershop-pwa/commit/402ffc6))
+- user registration mail always sent in english even if the user triggers the registration from a different locale (#498) ([d235ca7](https://github.com/intershop/intershop-pwa/commit/d235ca7))
+- basket promotion code assignment gets lost after registration (#497) ([4b42fa6](https://github.com/intershop/intershop-pwa/commit/4b42fa6))
+- wrap budget-widget to approval scope (#493) ([3bffb9a](https://github.com/intershop/intershop-pwa/commit/3bffb9a))
+- payment error message when multiple errors are received after creating a payment instrument (#491) ([2c54961](https://github.com/intershop/intershop-pwa/commit/2c54961))
+
+### Documentation
+
+- documentation and migration note for product contexts (#517) ([043d2eb](https://github.com/intershop/intershop-pwa/commit/043d2eb))
+
+### Code Refactoring
+
+- introduce product context (#403) ([cce23e3](https://github.com/intershop/intershop-pwa/commit/cce23e3))
+
+### BREAKING CHANGES
+
+- refactoring the way product specific components retrieve data with context facade
+
 ## [0.26.0](https://github.com/intershop/intershop-pwa/releases/tag/0.26.0) (2020-12-18)
 
 **required Intershop Commerce Management version: 7.10.26.2-LTS**

docs/check-dead-links.js

@@ -54,7 +54,7 @@ glob('**/*.md')
     let isError = false;
 
     files
-      .filter(file => !file.includes('node_modules'))
+      .filter(file => !file.includes('node_modules/') && !file.includes('dist/'))
       .forEach(file => {
         const content = fs.readFileSync(file, { encoding: 'utf-8' });
         const match = content.match(/\[.*?\](\(|:\ +)[^\s]*\)?/g);

docs/concepts/pwa-building-blocks.md

@@ -79,7 +79,7 @@ Deployment without using nginx is theoretically possible, even though many usefu
 
 ## Hiding the ICM Backend
 
-For security reasons, it may be desirable to hide the backend adress and prevent direct access to it.
+For security reasons, it may be desirable to hide the backend address and prevent direct access to it.
 The Intershop PWA supports this functionality and the [default deployment](https://intershoppwa.azurewebsites.net/home) uses this feature.
 To enable it, set the `PROXY_ICM` environment variable on the [SSR container](../guides/ssr-startup.md) to a new URL.
 Instead of directing REST calls straight to the ICM (see step seven in the [Default Production Deployment](#default-production-deployment)), traffic is routed through the SSR container.

docs/concepts/state-management.md

@@ -53,8 +53,22 @@ After successful or erroneous completion, an effect might trigger another action
 
 ### Facades
 
-Facades are injectable instances which provide simplified access to the store via exposed observables and action dispatcher methods.
-They should be used in Angular components but not within NgRx artifacts themselves.
+Facades are injectable instances which provide simplified and abstracted access to the store via exposed observables and helper methods for dispatching actions.
+Facades themselves don't store any data, everything should be delegated to the NgRx store.
+They should be used in Angular artifacts but not within NgRx artifacts themselves.
+
+### Context Facades
+
+Context facades provide an elevated access to the state management.
+They store data that is unique to the context (i.e. product context: SKU & quantity of the product), so that this context doesn't have to be provided using further helper methods and `Observable` streams.
+For implementing these context facades, we use the library [@rx-angular/state][rx-angular-state].
+
+Context facades are provided using [`ElementInjector`](https://angular.io/guide/hierarchical-dependency-injection#elementinjector) and can then be used in providing components and their children:
+
+- Provided in the `@Component` decorator
+- Provided via directives on the template
+
+For a more detailed introduction see [here][facades-meetup].
 
 ## File Structure
 
@@ -205,3 +219,11 @@ Every other slice of the state that also uses products must only save identifier
 In selectors, the data can be linked to views to be easily usable by components.
 
 see: [NgRx: Normalizing state](https://medium.com/@timdeschryver/ngrx-normalizing-state-d3960a86a3aa)
+
+# Further References
+
+- [@rx-angular/state][rx-angular-state]
+- [Facades – The Best Layer of your Angular Application @ ngLeipzig #36][facades-meetup]
+
+[rx-angular-state]: https://github.com/rx-angular/rx-angular/blob/master/libs/state/README.md
+[facades-meetup]: https://www.youtube.com/watch?v=I14r3joLu9A

docs/guides/migrations.md

@@ -7,6 +7,18 @@ kb_sync_latest_only
 
 # Migrations
 
+## 0.26 to 0.27
+
+We upgraded Cypress from Version 4 to 6 and followed all migrations in their [Migration Guide](https://docs.cypress.io/guides/references/migration-guide.html).
+
+We have introduced a [Context Facade](../concepts/state-management.md#context-facades) for product entities and [refactored](https://github.com/intershop/intershop-pwa/pull/403) most of the components that are specific to a single product.
+This includes:
+
+- Targeted components no longer require a `product` input, as they retrieve the product from the context.
+- The handling for adding products to the basket was refactored and simplified.
+- Product quantity handling moved almost completely to the context.
+- The decision for displaying certain components on product tiles and rows also moved into the context.
+
 ## 0.25 to 0.26
 
 The project configuration was updated to use and test with Node.js version 14.15.0 LTS (including npm 6.14.8) for any further development.

e2e/cypress.json

@@ -1,5 +1,4 @@
 {
-  "$schema": "https://raw.githubusercontent.com/cypress-io/cypress/develop/cli/schema/cypress.schema.json",
   "baseUrl": "http://localhost:4200",
   "viewportWidth": 1024,
   "viewportHeight": 1500,

e2e/cypress/integration/framework/b2b-user.ts

@@ -52,7 +52,7 @@ export function createB2BUserViaREST(user: Partial<Registration>) {
     'POST',
     Cypress.env('ICM_BASE_URL') + '/INTERSHOP/rest/WFS/inSPIRED-inTRONICS_Business-Site/-/customers',
     customer
-  )
-    .its('status')
-    .should('equal', 201);
+  ).then(response => {
+    expect(response.status).to.equal(201);
+  });
 }

e2e/cypress/integration/framework/users.ts

@@ -28,9 +28,13 @@ export function createUserViaREST(user: Partial<Registration>) {
     preferredLanguage: 'en_US',
   };
 
-  cy.request('POST', Cypress.env('ICM_BASE_URL') + '/INTERSHOP/rest/WFS/inSPIRED-inTRONICS-Site/-/customers', customer)
-    .its('status')
-    .should('equal', 201);
+  cy.request(
+    'POST',
+    Cypress.env('ICM_BASE_URL') + '/INTERSHOP/rest/WFS/inSPIRED-inTRONICS-Site/-/customers',
+    customer
+  ).then(response => {
+    expect(response.status).to.equal(201);
+  });
 }
 
 export function createBasketViaREST(user: Partial<Registration>, lineItems: { [sku: string]: number }) {

e2e/cypress/integration/pages/account/login.page.ts

@@ -21,9 +21,7 @@ export class LoginPage {
   }
 
   submit() {
-    cy.server()
-      .route('GET', /.*\/customers\/-.*/)
-      .as('currentCustomer');
+    cy.intercept('GET', /.*\/customers\/-.*/).as('currentCustomer');
     cy.wait(500);
 
     cy.get('button[name="login"]').click();

e2e/cypress/integration/pages/account/my-account.page.ts

@@ -30,7 +30,7 @@ export class MyAccountPage {
   }
 
   navigateToOrderTemplates() {
-    cy.get('a[href="/account/order-templates"]').click();
+    cy.get('a[href="/account/order-templates"]').first().click();
   }
 
   navigateToPayments() {

e2e/cypress/integration/pages/account/order-templates-details.page.ts

@@ -55,14 +55,16 @@ export class OrderTemplatesDetailsPage {
       this.getOrderTemplateItemById(productId).find('[data-testing-id="quantity"]').clear().type(quantity.toString());
     }
     cy.wait(3000);
-    cy.server().route('POST', '**/baskets/*/items').as('basket');
-    cy.server().route('GET', '**/baskets/current*').as('basketCurrent');
+    cy.intercept('POST', '**/baskets/*/items').as('basket');
+    cy.intercept('GET', '**/baskets/current*').as('basketCurrent');
     cy.wait(3000);
 
     this.getOrderTemplateCartButton().find('[data-testing-id="addToCartButton"]').click();
 
     return cy
       .wait('@basket')
-      .then(result => (result.status >= 400 ? result : cy.wait('@basketCurrent').then(() => result))) as any;
+      .then(result =>
+        result.response.statusCode >= 400 ? result : cy.wait('@basketCurrent').then(() => result)
+      ) as any;
   }
 }

e2e/cypress/integration/pages/account/profile-edit-company.page.ts

@@ -11,7 +11,7 @@ export class ProfileEditCompanyPage {
   }
 
   submit() {
-    cy.server().route('PUT', '**/customers/**').as('customers');
+    cy.intercept('PUT', '**/customers/**').as('customers');
     cy.wait(500);
 
     cy.get(this.tag).find('button[type="submit"]').click();

e2e/cypress/integration/pages/account/profile-edit-details.page.ts

@@ -13,9 +13,7 @@ export class ProfileEditDetailsPage {
   }
 
   submit() {
-    cy.server()
-      .route('PUT', /.*\/(private)?customers\/-.*/)
-      .as('customers');
+    cy.intercept('PUT', /.*\/(private)?customers\/-.*/).as('customers');
     cy.wait(500);
 
     cy.get(this.tag).find('button[type="submit"]').click();

e2e/cypress/integration/pages/account/profile-edit-email.page.ts

@@ -10,9 +10,7 @@ export class ProfileEditEmailPage {
   }
 
   submit() {
-    cy.server()
-      .route('PUT', /.*\/(private)?customers\/-.*/)
-      .as('customers');
+    cy.intercept('PUT', /.*\/(private)?customers\/-.*/).as('customers');
     cy.wait(500);
 
     cy.get(this.tag).find('button[type="submit"]').click();

e2e/cypress/integration/pages/account/profile-edit-password.page.ts

@@ -11,7 +11,7 @@ export class ProfileEditPasswordPage {
   }
 
   submit() {
-    cy.server().route('PUT', '**/password').as('passwordChange');
+    cy.intercept('PUT', '**/password').as('passwordChange');
     cy.wait(500);
 
     cy.get(this.tag).find('button[type="submit"]').click();

e2e/cypress/integration/pages/account/punchout-create.page.ts

@@ -0,0 +1,27 @@
+import { fillFormField } from '../../framework';
+
+declare interface PunchoutUserCreateForm {
+  login: string;
+  password: string;
+  passwordConfirmation: string;
+}
+
+export class PunchoutCreatePage {
+  readonly tag = 'ish-account-punchout-create-page';
+
+  private submitButton = () => cy.get('[data-testing-id="create-punchout-user-submit"]');
+
+  fillForm(content: PunchoutUserCreateForm) {
+    Object.keys(content)
+      .filter(key => content[key] !== undefined)
+      .forEach((key: keyof PunchoutUserCreateForm) => {
+        fillFormField(this.tag, key, content[key]);
+      });
+
+    return this;
+  }
+
+  submit() {
+    this.submitButton().click();
+  }
+}

e2e/cypress/integration/pages/account/punchout-edit.page.ts

@@ -0,0 +1,19 @@
+import { waitLoadingEnd } from '../../framework';
+
+export class PunchoutEditPage {
+  readonly tag = 'ish-account-punchout-details-page';
+
+  private submitButton = () => cy.get('[data-testing-id="update-punchout-user-submit"]');
+
+  editActiveFlag(active: boolean) {
+    cy.get('[data-testing-id="active"]').uncheck();
+    if (active) {
+      cy.get('[data-testing-id="active"]').check();
+    }
+  }
+
+  submit() {
+    this.submitButton().click();
+    waitLoadingEnd(1000);
+  }
+}

e2e/cypress/integration/pages/account/punchout-overview.page.ts

@@ -0,0 +1,38 @@
+import { waitLoadingEnd } from '../../framework';
+import { BreadcrumbModule } from '../breadcrumb.module';
+import { HeaderModule } from '../header.module';
+
+export class PunchoutOverviewPage {
+  readonly tag = 'ish-account-punchout-page';
+
+  readonly header = new HeaderModule();
+  readonly breadcrumb = new BreadcrumbModule();
+
+  get userList() {
+    return cy.get('div[data-testing-id="user-list"]');
+  }
+
+  get emptyList() {
+    return cy.get(this.tag).find('[data-testing-id="empty-user-list"]');
+  }
+
+  get successMessage() {
+    return {
+      message: cy.get('#toast-container').find('.toast-message'),
+    };
+  }
+
+  addUser() {
+    cy.get('button[data-testing-id="add-user-button"]').click();
+  }
+
+  editUser(login: string) {
+    cy.get(this.tag).contains('div.list-item-row', login).find('[data-testing-id="edit-user"]').click();
+  }
+
+  deleteUser(login: string) {
+    cy.get(this.tag).contains('div.list-item-row', login).find('[data-testing-id="delete-user"]').click();
+    cy.get('[data-testing-id="confirm"]', { timeout: 2000 }).click();
+    waitLoadingEnd(2000);
+  }
+}