From 1210a2eb420f4eb9d8ff873e68f8980188d64e09 Mon Sep 17 00:00:00 2001 From: Christoph Hinssen <33626130+ChristophHi@users.noreply.github.com> Date: Tue, 15 Jun 2021 15:45:28 +0200 Subject: [PATCH 1/4] chore: Remove 3.x forVersion includes from configurator styles (#12782) Removes the now obsolete forVersion includes from the configurator .scss files. Contains one product related file as well that is responsible for rendering the 'configure' button. Closes #12781 --- ..._configurator-attribute-checkbox-list.scss | 12 +- .../_configurator-attribute-drop-down.scss | 6 +- .../_configurator-attribute-header.scss | 4 +- .../_configurator-attribute-radio-button.scss | 6 +- .../rulebased/styles/_configurator-form.scss | 27 ++-- .../styles/_configurator-group-menu.scss | 4 +- .../_configurator-overview-attribute.scss | 12 +- .../styles/_configurator-overview-form.scss | 147 ++++++++---------- .../_configurator-previous-next-buttons.scss | 21 +-- .../styles/_configurator-price-summary.scss | 16 +- .../styles/_configurator-product-title.scss | 86 +++++----- .../mixins/_configurator-attribute-type.scss | 9 +- .../_configurator-footer-container.scss | 26 +--- .../_configurator-required-error-msg.scss | 6 +- .../page-templates/_product-detail.scss | 10 +- 15 files changed, 145 insertions(+), 247 deletions(-) diff --git a/feature-libs/product-configurator/rulebased/styles/_configurator-attribute-checkbox-list.scss b/feature-libs/product-configurator/rulebased/styles/_configurator-attribute-checkbox-list.scss index 18e03c93728..794f0a0db6b 100644 --- a/feature-libs/product-configurator/rulebased/styles/_configurator-attribute-checkbox-list.scss +++ b/feature-libs/product-configurator/rulebased/styles/_configurator-attribute-checkbox-list.scss @@ -1,13 +1,11 @@ %cx-configurator-attribute-checkbox-list { @include cx-configurator-attribute-type(); - @include forVersion(3.3) { - .cx-quantity { - padding-block-end: 1rem; - } + .cx-quantity { + padding-block-end: 1rem; + } - .form-check input:disabled + .form-check-label { - color: var(--cx-color-text); - } + .form-check input:disabled + .form-check-label { + color: var(--cx-color-text); } } diff --git a/feature-libs/product-configurator/rulebased/styles/_configurator-attribute-drop-down.scss b/feature-libs/product-configurator/rulebased/styles/_configurator-attribute-drop-down.scss index 8199a79e54d..033da318786 100644 --- a/feature-libs/product-configurator/rulebased/styles/_configurator-attribute-drop-down.scss +++ b/feature-libs/product-configurator/rulebased/styles/_configurator-attribute-drop-down.scss @@ -2,9 +2,7 @@ @include cx-configurator-attribute-type(); @include cx-configurator-form-group(); - @include forVersion(3.3) { - cx-configurator-attribute-quantity { - padding-block-start: 1rem; - } + cx-configurator-attribute-quantity { + padding-block-start: 1rem; } } diff --git a/feature-libs/product-configurator/rulebased/styles/_configurator-attribute-header.scss b/feature-libs/product-configurator/rulebased/styles/_configurator-attribute-header.scss index 26bf7d6e058..3e0441ca5cb 100644 --- a/feature-libs/product-configurator/rulebased/styles/_configurator-attribute-header.scss +++ b/feature-libs/product-configurator/rulebased/styles/_configurator-attribute-header.scss @@ -4,9 +4,7 @@ margin-inline-start: 17px; margin-inline-end: 17px; - @include forVersion(3.3) { - margin-block-end: 17px; - } + margin-block-end: 17px; label { @include type('5'); diff --git a/feature-libs/product-configurator/rulebased/styles/_configurator-attribute-radio-button.scss b/feature-libs/product-configurator/rulebased/styles/_configurator-attribute-radio-button.scss index 1642eed6cbd..8d9fa00c93e 100644 --- a/feature-libs/product-configurator/rulebased/styles/_configurator-attribute-radio-button.scss +++ b/feature-libs/product-configurator/rulebased/styles/_configurator-attribute-radio-button.scss @@ -7,9 +7,7 @@ } } - @include forVersion(3.3) { - .cx-quantity { - padding-block-end: 1rem; - } + .cx-quantity { + padding-block-end: 1rem; } } diff --git a/feature-libs/product-configurator/rulebased/styles/_configurator-form.scss b/feature-libs/product-configurator/rulebased/styles/_configurator-form.scss index 7d3a30a4bc4..275264f78e3 100644 --- a/feature-libs/product-configurator/rulebased/styles/_configurator-form.scss +++ b/feature-libs/product-configurator/rulebased/styles/_configurator-form.scss @@ -1,16 +1,9 @@ %cx-configurator-form { - @include forVersion(3.3) { - width: 100%; - } + width: 100%; .cx-group-attribute { - padding-inline-start: 20px; - padding-inline-end: 20px; - - @include forVersion(3.3) { - padding-inline-start: 16px; - padding-inline-end: 16px; - } + padding-inline-start: 16px; + padding-inline-end: 16px; padding-block-start: 12px; padding-block-end: 12px; @@ -27,14 +20,12 @@ } } - @include forVersion(3.3) { - cx-item-counter { - &.readonly { - input { - border: solid 1px var(--cx-color-light); - min-height: 48px; - width: 10rem; - } + cx-item-counter { + &.readonly { + input { + border: solid 1px var(--cx-color-light); + min-height: 48px; + width: 10rem; } } } diff --git a/feature-libs/product-configurator/rulebased/styles/_configurator-group-menu.scss b/feature-libs/product-configurator/rulebased/styles/_configurator-group-menu.scss index d30c43049f2..0c654968b62 100644 --- a/feature-libs/product-configurator/rulebased/styles/_configurator-group-menu.scss +++ b/feature-libs/product-configurator/rulebased/styles/_configurator-group-menu.scss @@ -67,9 +67,7 @@ overflow: hidden; line-break: anywhere; - @include forVersion(3.3) { - @include cx-configurator-truncate-content(); - } + @include cx-configurator-truncate-content(); } .groupIndicators { diff --git a/feature-libs/product-configurator/rulebased/styles/_configurator-overview-attribute.scss b/feature-libs/product-configurator/rulebased/styles/_configurator-overview-attribute.scss index 54ba36fd751..fffb7cfd835 100644 --- a/feature-libs/product-configurator/rulebased/styles/_configurator-overview-attribute.scss +++ b/feature-libs/product-configurator/rulebased/styles/_configurator-overview-attribute.scss @@ -9,11 +9,7 @@ font-weight: 600; @include media-breakpoint-up(md) { - width: 41.6666666667%; - - @include forVersion(3.3) { - width: 40%; - } + width: 40%; } } @@ -22,11 +18,7 @@ width: 100%; @include media-breakpoint-up(md) { - width: 58.3333333333%; - - @include forVersion(3.3) { - width: 60%; - } + width: 60%; } } } diff --git a/feature-libs/product-configurator/rulebased/styles/_configurator-overview-form.scss b/feature-libs/product-configurator/rulebased/styles/_configurator-overview-form.scss index 579bf90b377..35cbf55a810 100644 --- a/feature-libs/product-configurator/rulebased/styles/_configurator-overview-form.scss +++ b/feature-libs/product-configurator/rulebased/styles/_configurator-overview-form.scss @@ -3,13 +3,9 @@ flex-direction: column; justify-content: flex-start; max-width: 1140px; - padding-inline-start: 20px; - padding-inline-end: 25px; - @include forVersion(3.3) { - padding-inline-start: 0px; - padding-inline-end: 0px; - } + padding-inline-start: 0px; + padding-inline-end: 0px; padding-block-start: 5px; padding-block-end: 5px; @@ -28,20 +24,18 @@ margin-inline-start: -20px; margin-inline-end: -25px; - @include forVersion(3.3) { - @include media-breakpoint-up(md) { - padding-block-start: 20px; - padding-block-end: 20px; - margin-inline-start: 0px; - margin-inline-end: 0px; - } + @include media-breakpoint-up(md) { + padding-block-start: 20px; + padding-block-end: 20px; + margin-inline-start: 0px; + margin-inline-end: 0px; + } - @include media-breakpoint-down(sm) { - padding-block-start: 20px; - padding-block-end: 20px; - margin-inline-start: -20px; - margin-inline-end: -20px; - } + @include media-breakpoint-down(sm) { + padding-block-start: 20px; + padding-block-end: 20px; + margin-inline-start: -20px; + margin-inline-end: -20px; } &.topLevel { @@ -62,23 +56,16 @@ } h2 { - padding-inline-start: 30px; - padding-inline-end: 30px; - padding-block-start: 15px; - padding-block-end: 15px; - - @include forVersion(3.3) { - padding-inline-start: 32px; - padding-inline-end: 32px; + padding-inline-start: 32px; + padding-inline-end: 32px; + padding-block-start: 16px; + padding-block-end: 16px; + + @include media-breakpoint-down(sm) { + padding-inline-start: 16px; + padding-inline-end: 16px; padding-block-start: 16px; padding-block-end: 16px; - - @include media-breakpoint-down(sm) { - padding-inline-start: 16px; - padding-inline-end: 16px; - padding-block-start: 16px; - padding-block-end: 16px; - } } border: solid 1px var(--cx-color-light); @@ -86,74 +73,67 @@ font-size: 1rem; text-transform: uppercase; - @include forVersion(3.3) { - span { - @include cx-configurator-truncate-content(); - } + span { + @include cx-configurator-truncate-content(); } } .cx-attribute-value-pair { - padding-inline-start: 30px; - padding-inline-end: 30px; + padding-inline-start: 32px; + padding-inline-end: 32px; - @include forVersion(3.3) { - padding-inline-start: 32px; - padding-inline-end: 32px; + @include media-breakpoint-down(sm) { + padding-inline-start: 16px; + padding-inline-end: 16px; + } - @include media-breakpoint-down(sm) { - padding-inline-start: 16px; - padding-inline-end: 16px; + &.general { + @include media-breakpoint-up(md) { + &:not(:first-of-type) { + .cx-attribute-label { + visibility: hidden; + } + } } - &.general { - @include media-breakpoint-up(md) { - &:not(:first-of-type) { - .cx-attribute-label { - visibility: hidden; - } - } + @include media-breakpoint-down(sm) { + .cx-attribute-label { + display: none; } - @include media-breakpoint-down(sm) { + &.last-value-pair { .cx-attribute-label { - display: none; - } - - &.last-value-pair { - .cx-attribute-label { - display: inline; - } + display: inline; } } } + } - &.bundle { - background-color: var(--cx-color-background); + &.bundle { + background-color: var(--cx-color-background); - @include media-breakpoint-up(md) { - &:not(:first-of-type) { - .cx-attribute-label { - visibility: hidden; - } + @include media-breakpoint-up(md) { + &:not(:first-of-type) { + .cx-attribute-label { + visibility: hidden; } } } + } - &.margin { - margin-block-start: 15px; + &.margin { + margin-block-start: 15px; - &.bundle { - .cx-attribute-label { - visibility: visible; - } + &.bundle { + .cx-attribute-label { + visibility: visible; } + } - @include media-breakpoint-up(md) { - &.general { - .cx-attribute-label { - visibility: visible; - } + @include media-breakpoint-up(md) { + &.general { + .cx-attribute-label { + visibility: visible; } } } @@ -164,12 +144,7 @@ .cx-no-attribute-value-pairs { padding-inline-start: 10px; padding-inline-end: 10px; - padding-block-start: 25px; - padding-block-end: 25px; - - @include forVersion(3.3) { - padding-block-start: 20px; - padding-block-end: 20px; - } + padding-block-start: 20px; + padding-block-end: 20px; } } diff --git a/feature-libs/product-configurator/rulebased/styles/_configurator-previous-next-buttons.scss b/feature-libs/product-configurator/rulebased/styles/_configurator-previous-next-buttons.scss index 2ac471e99d5..237a445d529 100644 --- a/feature-libs/product-configurator/rulebased/styles/_configurator-previous-next-buttons.scss +++ b/feature-libs/product-configurator/rulebased/styles/_configurator-previous-next-buttons.scss @@ -5,28 +5,17 @@ display: flex; flex-direction: row; justify-content: space-between; - padding-inline-start: 15px; - padding-inline-end: 15px; + + padding-inline-start: 16px; + padding-inline-end: 16px; padding-block-start: 16px; padding-block-end: 16px; - @include forVersion(3.3) { - padding-inline-start: 16px; - padding-inline-end: 16px; - padding-block-start: 16px; - padding-block-end: 16px; - } - @include media-breakpoint-down(sm) { - padding-inline-start: 20px; - padding-inline-end: 20px; padding-block-start: 20px; padding-block-end: 20px; - - @include forVersion(3.3) { - padding-inline-start: 16px; - padding-inline-end: 16px; - } + padding-inline-start: 16px; + padding-inline-end: 16px; } .btn-action, diff --git a/feature-libs/product-configurator/rulebased/styles/_configurator-price-summary.scss b/feature-libs/product-configurator/rulebased/styles/_configurator-price-summary.scss index 374c7d73a94..13aad551927 100644 --- a/feature-libs/product-configurator/rulebased/styles/_configurator-price-summary.scss +++ b/feature-libs/product-configurator/rulebased/styles/_configurator-price-summary.scss @@ -7,18 +7,14 @@ .cx-total-summary { @include cx-configurator-footer-container-item(); - @include forVersion(3.3) { - @include media-breakpoint-up(md) { - padding-inline-start: 16px; - padding-inline-end: 16px; - } + @include media-breakpoint-up(md) { + padding-inline-start: 16px; + padding-inline-end: 16px; } - @include forVersion(3.3) { - @include media-breakpoint-down(sm) { - padding-inline-start: 0px; - padding-inline-end: 0px; - } + @include media-breakpoint-down(sm) { + padding-inline-start: 0px; + padding-inline-end: 0px; } .cx-summary-row { diff --git a/feature-libs/product-configurator/rulebased/styles/_configurator-product-title.scss b/feature-libs/product-configurator/rulebased/styles/_configurator-product-title.scss index 852f147619c..d39fd355dde 100644 --- a/feature-libs/product-configurator/rulebased/styles/_configurator-product-title.scss +++ b/feature-libs/product-configurator/rulebased/styles/_configurator-product-title.scss @@ -29,15 +29,13 @@ align-self: center; min-block-size: 1rem; - @include forVersion(3.3) { - @include media-breakpoint-down(sm) { - width: 80%; - } + @include media-breakpoint-down(sm) { + width: 80%; + } - span { - @include cx-configurator-truncate-content(); - text-align: center; - } + span { + @include cx-configurator-truncate-content(); + text-align: center; } } @@ -74,35 +72,33 @@ } } - @include forVersion(3.3) { - button { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - align-self: flex-end; - margin-block-start: -25px; + button { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-self: flex-end; + margin-block-start: -25px; + margin-inline-end: 5px; + font-weight: normal; + color: var(--cx-color-text); + border: none; + background-color: transparent; + outline-offset: 0px; + + cx-icon { + margin-inline-start: 5px; margin-inline-end: 5px; - font-weight: normal; - color: var(--cx-color-text); - border: none; - background-color: transparent; - outline-offset: 0px; - - cx-icon { - margin-inline-start: 5px; - margin-inline-end: 5px; - align-self: center; - } + align-self: center; + } - @include media-breakpoint-down(xs) { - margin-block-start: -20px; - } + @include media-breakpoint-down(xs) { + margin-block-start: -20px; + } - .cx-toggle-details-link-text { - text-decoration: underline; - @include media-breakpoint-down(xs) { - display: none; - } + .cx-toggle-details-link-text { + text-decoration: underline; + @include media-breakpoint-down(xs) { + display: none; } } } @@ -122,14 +118,12 @@ // If the value is to large the closing will "delay" as the max-height will be reduced from the specified value down to 0. max-block-size: 400px; - @include forVersion(3.3) { - @include media-breakpoint-down(sm) { - padding-inline-start: 16px; - } + @include media-breakpoint-down(sm) { + padding-inline-start: 16px; + } - @include media-breakpoint-only(md) { - padding-inline-start: 32px; - } + @include media-breakpoint-only(md) { + padding-inline-start: 32px; } } @@ -138,9 +132,7 @@ margin-block-end: 0px; max-inline-size: 100px; - @include forVersion(3.3) { - @include cx-configurator-image(); - } + @include cx-configurator-image(); } .cx-details-content { @@ -167,10 +159,8 @@ .cx-detail-title, .cx-code, .cx-description { - @include forVersion(3.3) { - span { - @include cx-configurator-truncate-content(); - } + span { + @include cx-configurator-truncate-content(); } } } diff --git a/feature-libs/product-configurator/rulebased/styles/mixins/_configurator-attribute-type.scss b/feature-libs/product-configurator/rulebased/styles/mixins/_configurator-attribute-type.scss index 39ef2e62042..66350c1e112 100644 --- a/feature-libs/product-configurator/rulebased/styles/mixins/_configurator-attribute-type.scss +++ b/feature-libs/product-configurator/rulebased/styles/mixins/_configurator-attribute-type.scss @@ -2,14 +2,11 @@ display: flex; flex-direction: row; padding-inline-start: 0px; - padding-inline-end: 34px; + padding-inline-end: 0px; + padding-block-start: 10px; padding-block-end: 0px; margin-inline-start: 17px; - - @include forVersion(3.3) { - padding-inline-end: 0px; - margin-inline-end: 17px; - } + margin-inline-end: 17px; } diff --git a/feature-libs/product-configurator/rulebased/styles/mixins/_configurator-footer-container.scss b/feature-libs/product-configurator/rulebased/styles/mixins/_configurator-footer-container.scss index 683fcdcb4d2..0450fe2d3db 100644 --- a/feature-libs/product-configurator/rulebased/styles/mixins/_configurator-footer-container.scss +++ b/feature-libs/product-configurator/rulebased/styles/mixins/_configurator-footer-container.scss @@ -2,31 +2,17 @@ display: flex; justify-content: flex-end; margin: 0 auto; - padding-inline-start: 15px; - padding-inline-end: 15px; - padding-block-start: 15px; - padding-block-end: 15px; margin-block-start: 15px; + padding-inline-start: 16px; + padding-inline-end: 16px; + padding-block-start: 16px; + padding-block-end: 16px; - @include forVersion(3.3) { + @include media-breakpoint-down(sm) { + justify-content: center; padding-inline-start: 16px; padding-inline-end: 16px; padding-block-start: 16px; padding-block-end: 16px; } - - @include media-breakpoint-down(sm) { - padding-inline-start: 20px; - padding-inline-end: 20px; - padding-block-start: 20px; - padding-block-end: 20px; - justify-content: center; - - @include forVersion(3.3) { - padding-inline-start: 16px; - padding-inline-end: 16px; - padding-block-start: 16px; - padding-block-end: 16px; - } - } } diff --git a/feature-libs/product-configurator/rulebased/styles/mixins/_configurator-required-error-msg.scss b/feature-libs/product-configurator/rulebased/styles/mixins/_configurator-required-error-msg.scss index 7e8b27636de..b6eb7c1d79a 100644 --- a/feature-libs/product-configurator/rulebased/styles/mixins/_configurator-required-error-msg.scss +++ b/feature-libs/product-configurator/rulebased/styles/mixins/_configurator-required-error-msg.scss @@ -3,10 +3,8 @@ color: var(--cx-color-danger); font-size: 14px; - @include forVersion(3.3) { - cx-icon { - padding-inline-end: 5px; - } + cx-icon { + padding-inline-end: 5px; } } } diff --git a/projects/storefrontstyles/scss/layout/page-templates/_product-detail.scss b/projects/storefrontstyles/scss/layout/page-templates/_product-detail.scss index ec3a63fd03f..62c007fd080 100644 --- a/projects/storefrontstyles/scss/layout/page-templates/_product-detail.scss +++ b/projects/storefrontstyles/scss/layout/page-templates/_product-detail.scss @@ -11,17 +11,11 @@ grid-column-gap: 20px; grid-row-gap: 0px; grid-template-columns: 1fr 1fr; - grid-template-rows: repeat(2, auto) 1fr; - @include forVersion(3.1) { - grid-template-rows: repeat(5, auto) 1fr; - } + grid-template-rows: repeat(5, auto) 1fr; cx-product-images { grid-column: 1; - grid-row: 1 / span 5; - @include forVersion(3.1) { - grid-row: 1 / span 6; - } + grid-row: 1 / span 6; } cx-product-intro { From 29f91f70f4e3b9fdb1ff3c0f5aa8236715fa18ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikola=20Zari=C4=87?= Date: Tue, 15 Jun 2021 16:36:50 +0200 Subject: [PATCH 2/4] fix: Schematics - add ExternalRouting to the feature set (#12780) closes #12486 --- .../src/add-spartacus/spartacus-features.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/projects/schematics/src/add-spartacus/spartacus-features.ts b/projects/schematics/src/add-spartacus/spartacus-features.ts index 059e4772375..36026f7484b 100644 --- a/projects/schematics/src/add-spartacus/spartacus-features.ts +++ b/projects/schematics/src/add-spartacus/spartacus-features.ts @@ -320,6 +320,21 @@ function configureSpartacusModules( }); }); + [ + `// External routes, + ExternalRoutesModule.forRoot(),`, + ].forEach((content) => { + addModuleImport(sourceFile, { + import: [ + { + moduleSpecifier: SPARTACUS_CORE, + namedImports: ['ExternalRoutesModule'], + }, + ], + content, + }); + }); + saveAndFormat(sourceFile); break; From 4e343b148c3c5b3926fee3b441746e795ea607f1 Mon Sep 17 00:00:00 2001 From: Brian Gamboc-Javiniar Date: Tue, 15 Jun 2021 11:34:54 -0400 Subject: [PATCH 3/4] fix: Improve addresses for getAddressCardContent for the order overview (#10595) closes GH-10524 --- .../order-overview.component.spec.ts | 23 +++++++++++++++- .../order-overview.component.ts | 26 +++++++++++++++---- 2 files changed, 43 insertions(+), 6 deletions(-) diff --git a/projects/storefrontlib/src/shared/components/order-overview/order-overview.component.spec.ts b/projects/storefrontlib/src/shared/components/order-overview/order-overview.component.spec.ts index e425ed8bb86..2f410f74be5 100644 --- a/projects/storefrontlib/src/shared/components/order-overview/order-overview.component.spec.ts +++ b/projects/storefrontlib/src/shared/components/order-overview/order-overview.component.spec.ts @@ -1,5 +1,5 @@ import { Component, Input } from '@angular/core'; -import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { Address, DeliveryMode, @@ -107,6 +107,9 @@ const mockOrder: Order = { }, }; +const mockUnformattedAddress = 'test1, , test3, test4'; +const mockFormattedAddress = 'test1, test2, test3, test4'; + class MockTranslationService { translate(): Observable { return of(); @@ -491,4 +494,22 @@ describe('OrderOverviewComponent', () => { ); }); }); + + describe('normalize formatted address', () => { + it('should normalize address when line 2 is empty in address', () => { + const address = component['normalizeFormattedAddress']( + mockUnformattedAddress + ); + + expect(address).toEqual('test1, test3, test4'); + }); + + it('should not change the format when line 2 exist in address', () => { + const address = component['normalizeFormattedAddress']( + mockFormattedAddress + ); + + expect(address).toEqual(mockFormattedAddress); + }); + }); }); diff --git a/projects/storefrontlib/src/shared/components/order-overview/order-overview.component.ts b/projects/storefrontlib/src/shared/components/order-overview/order-overview.component.ts index 8622e8e8b25..3165e4d472d 100644 --- a/projects/storefrontlib/src/shared/components/order-overview/order-overview.component.ts +++ b/projects/storefrontlib/src/shared/components/order-overview/order-overview.component.ts @@ -178,11 +178,17 @@ export class OrderOverviewComponent { getAddressCardContent(deliveryAddress: Address): Observable { return this.translation.translate('addressCard.shipTo').pipe( filter(() => Boolean(deliveryAddress)), - map((textTitle) => ({ - title: textTitle, - textBold: `${deliveryAddress.firstName} ${deliveryAddress.lastName}`, - text: [deliveryAddress.formattedAddress, deliveryAddress.country.name], - })) + map((textTitle) => { + const formattedAddress = this.normalizeFormattedAddress( + deliveryAddress.formattedAddress + ); + + return { + title: textTitle, + textBold: `${deliveryAddress.firstName} ${deliveryAddress.lastName}`, + text: [formattedAddress, deliveryAddress.country.name], + }; + }) ); } @@ -239,4 +245,14 @@ export class OrderOverviewComponent { return month + ' ' + day + ' ' + year; } + + private normalizeFormattedAddress(formattedAddress: string): string { + const addresses = formattedAddress + .split(',') + .map((address) => address.trim()); + + const newFormattedAddress = addresses.filter(Boolean).join(', '); + + return newFormattedAddress; + } } From 8af89f67a3538317e75341bf0ab4837f1db437f7 Mon Sep 17 00:00:00 2001 From: Renuchan Thambirajah <71661414+ren-tham@users.noreply.github.com> Date: Tue, 15 Jun 2021 16:36:56 -0400 Subject: [PATCH 4/4] chore: Refactor of routerService.go 8169 (#12638) * Refactor of routerService.go Co-authored-by: Krzysztof Platis --- docs/migration/4_0.md | 4 +++ ...rator-add-to-cart-button.component.spec.ts | 11 ++----- ...nfigurator-add-to-cart-button.component.ts | 11 +++---- .../store-finder-search.component.spec.ts | 32 ++++++++++++------- .../store-finder-search.component.ts | 12 +++++-- .../update-email-component.service.spec.ts | 1 - .../update-email-component.service.ts | 13 +++++--- .../routing/facade/routing.service.spec.ts | 2 -- .../src/routing/facade/routing.service.ts | 12 ++----- .../routing/store/actions/router.action.ts | 1 - .../store/effects/router.effect.spec.ts | 4 +-- .../routing/store/effects/router.effect.ts | 4 +-- .../data/routing.service.ts.migration.ts | 17 ++++++++++ .../methods-and-properties-deprecations.ts | 4 ++- projects/schematics/src/shared/constants.ts | 1 + .../my-coupons.component.service.spec.ts | 12 +++++-- .../my-coupons.component.service.ts | 6 +++- .../return-request.service.spec.ts | 1 - .../return-request.service.ts | 13 +++++--- 19 files changed, 98 insertions(+), 63 deletions(-) create mode 100644 projects/schematics/src/migrations/4_0/methods-and-properties-deprecations/data/routing.service.ts.migration.ts diff --git a/docs/migration/4_0.md b/docs/migration/4_0.md index d81a085c1e7..bc4dd3664c8 100644 --- a/docs/migration/4_0.md +++ b/docs/migration/4_0.md @@ -792,6 +792,10 @@ The following properties where removed in 4.0: `AuthRedirectService` is a new, required constructor dependency. +### RoutingService +`RoutingService.go` - Removed 2nd argument `query`. Use `extras.queryParams` instead. +`RoutingService.navigate` - Removed 2nd argument `query`. Use `extras.queryParams` instead. + ### AuthRedirectService - `#reportNotAuthGuard` - method not needed anymore. Every visited URL is now remembered automatically as redirect URL on `NavigationEnd` event. diff --git a/feature-libs/product-configurator/rulebased/components/add-to-cart-button/configurator-add-to-cart-button.component.spec.ts b/feature-libs/product-configurator/rulebased/components/add-to-cart-button/configurator-add-to-cart-button.component.spec.ts index 83518c503e1..5ecc7af56fc 100644 --- a/feature-libs/product-configurator/rulebased/components/add-to-cart-button/configurator-add-to-cart-button.component.spec.ts +++ b/feature-libs/product-configurator/rulebased/components/add-to-cart-button/configurator-add-to-cart-button.component.spec.ts @@ -31,7 +31,6 @@ const navParamsOverview: any = { params: { ownerType: 'cartEntry', entityKey: CART_ENTRY_KEY }, }; -const attributes = {}; const mockOwner = mockProductConfiguration.owner; const mockRouterData: ConfiguratorRouter.Data = { @@ -249,10 +248,7 @@ describe('ConfigAddToCartButtonComponent', () => { it('should navigate to OV in case configuration is cart bound and we are on product config page', () => { mockRouterData.pageType = ConfiguratorRouter.PageType.CONFIGURATION; performUpdateCart(); - expect(routingService.go).toHaveBeenCalledWith( - navParamsOverview, - attributes - ); + expect(routingService.go).toHaveBeenCalledWith(navParamsOverview); expect( configuratorGroupsService.setGroupStatusVisited @@ -298,10 +294,7 @@ describe('ConfigAddToCartButtonComponent', () => { it('should navigate to overview in case configuration has not been added yet and we are on configuration page', () => { ensureProductBound(); component.onAddToCart(mockProductConfiguration, mockRouterData); - expect(routingService.go).toHaveBeenCalledWith( - navParamsOverview, - attributes - ); + expect(routingService.go).toHaveBeenCalledWith(navParamsOverview); }); it('should remove one configuration (cart bound) in case configuration has not yet been added and we are on configuration page', () => { diff --git a/feature-libs/product-configurator/rulebased/components/add-to-cart-button/configurator-add-to-cart-button.component.ts b/feature-libs/product-configurator/rulebased/components/add-to-cart-button/configurator-add-to-cart-button.component.ts index 62eb95d0a01..250872788be 100644 --- a/feature-libs/product-configurator/rulebased/components/add-to-cart-button/configurator-add-to-cart-button.component.ts +++ b/feature-libs/product-configurator/rulebased/components/add-to-cart-button/configurator-add-to-cart-button.component.ts @@ -65,13 +65,10 @@ export class ConfiguratorAddToCartButtonComponent { configuratorType: string, owner: CommonConfigurator.Owner ): void { - this.routingService.go( - { - cxRoute: 'configureOverview' + configuratorType, - params: { ownerType: 'cartEntry', entityKey: owner.id }, - }, - {} - ); + this.routingService.go({ + cxRoute: 'configureOverview' + configuratorType, + params: { ownerType: 'cartEntry', entityKey: owner.id }, + }); } protected displayConfirmationMessage(key: string): void { diff --git a/feature-libs/storefinder/components/store-finder-search/store-finder-search.component.spec.ts b/feature-libs/storefinder/components/store-finder-search/store-finder-search.component.spec.ts index fc960f4efb7..1261683cf73 100644 --- a/feature-libs/storefinder/components/store-finder-search/store-finder-search.component.spec.ts +++ b/feature-libs/storefinder/components/store-finder-search/store-finder-search.component.spec.ts @@ -7,7 +7,11 @@ import { I18nTestingModule, RoutingService } from '@spartacus/core'; import { StoreFinderSearchComponent } from './store-finder-search.component'; import { ICON_TYPE } from '@spartacus/storefront'; -const query = 'address'; +const query = { + queryParams: { + query: 'address', + }, +}; const keyEvent = { key: 'Enter', @@ -77,19 +81,21 @@ describe('StoreFinderSearchComponent', () => { }); it('should dispatch new query', () => { - component.searchBox.setValue(query); + component.searchBox.setValue(query.queryParams.query); component.findStores(component.searchBox.value); - expect(routingService.go).toHaveBeenCalledWith(['store-finder/find'], { - query, - }); + expect(routingService.go).toHaveBeenCalledWith( + ['store-finder/find'], + query + ); }); it('should call onKey and dispatch query', () => { - component.searchBox.setValue(query); + component.searchBox.setValue(query.queryParams.query); component.onKey(keyEvent); - expect(routingService.go).toHaveBeenCalledWith(['store-finder/find'], { - query, - }); + expect(routingService.go).toHaveBeenCalledWith( + ['store-finder/find'], + query + ); }); it('should only call onKey', () => { @@ -100,14 +106,16 @@ describe('StoreFinderSearchComponent', () => { it('should view stores near by my location', () => { component.viewStoresWithMyLoc(); expect(routingService.go).toHaveBeenCalledWith(['store-finder/find'], { - useMyLocation: true, + queryParams: { + useMyLocation: true, + }, }); }); it('should call findStores if search value provided and Enter is an event', () => { spyOn(component, 'findStores'); - component.searchBox.setValue(query); + component.searchBox.setValue(query.queryParams.query); component.onKey(keyEvent); - expect(component.findStores).toHaveBeenCalledWith(query); + expect(component.findStores).toHaveBeenCalledWith(query.queryParams.query); }); }); diff --git a/feature-libs/storefinder/components/store-finder-search/store-finder-search.component.ts b/feature-libs/storefinder/components/store-finder-search/store-finder-search.component.ts index fa51f566dc9..259e8179d28 100644 --- a/feature-libs/storefinder/components/store-finder-search/store-finder-search.component.ts +++ b/feature-libs/storefinder/components/store-finder-search/store-finder-search.component.ts @@ -14,11 +14,19 @@ export class StoreFinderSearchComponent { constructor(private routingService: RoutingService) {} findStores(address: string) { - this.routingService.go(['store-finder/find'], { query: address }); + this.routingService.go(['store-finder/find'], { + queryParams: { + query: address, + }, + }); } viewStoresWithMyLoc() { - this.routingService.go(['store-finder/find'], { useMyLocation: true }); + this.routingService.go(['store-finder/find'], { + queryParams: { + useMyLocation: true, + }, + }); } onKey(event: any) { diff --git a/feature-libs/user/profile/components/update-email/update-email-component.service.spec.ts b/feature-libs/user/profile/components/update-email/update-email-component.service.spec.ts index 72359aa75b5..a3dc9381a01 100644 --- a/feature-libs/user/profile/components/update-email/update-email-component.service.spec.ts +++ b/feature-libs/user/profile/components/update-email/update-email-component.service.spec.ts @@ -132,7 +132,6 @@ describe('UpdateEmailComponentService', () => { authService.coreLogout().then(() => { expect(routingService.go).toHaveBeenCalledWith( { cxRoute: 'login' }, - undefined, { state: { newUid: 'tester@sap.com', diff --git a/feature-libs/user/profile/components/update-email/update-email-component.service.ts b/feature-libs/user/profile/components/update-email/update-email-component.service.ts index ac5484c09a8..c553ef76431 100644 --- a/feature-libs/user/profile/components/update-email/update-email-component.service.ts +++ b/feature-libs/user/profile/components/update-email/update-email-component.service.ts @@ -72,11 +72,14 @@ export class UpdateEmailComponentService { this.form.reset(); // TODO(#9638): Use logout route when it will support passing redirect url this.authService.coreLogout().then(() => { - this.routingService.go({ cxRoute: 'login' }, undefined, { - state: { - newUid, - }, - }); + this.routingService.go( + { cxRoute: 'login' }, + { + state: { + newUid, + }, + } + ); }); } diff --git a/projects/core/src/routing/facade/routing.service.spec.ts b/projects/core/src/routing/facade/routing.service.spec.ts index 23919d39f3a..7c683f18d92 100644 --- a/projects/core/src/routing/facade/routing.service.spec.ts +++ b/projects/core/src/routing/facade/routing.service.spec.ts @@ -66,7 +66,6 @@ describe('RoutingService', () => { expect(store.dispatch).toHaveBeenCalledWith( new RoutingActions.RouteGoAction({ path: ['generated', 'path'], - query: undefined, extras: undefined, }) ); @@ -142,7 +141,6 @@ describe('RoutingService', () => { expect(store.dispatch).toHaveBeenCalledWith( new RoutingActions.RouteGoAction({ path: ['/'], - query: undefined, extras: undefined, }) ); diff --git a/projects/core/src/routing/facade/routing.service.ts b/projects/core/src/routing/facade/routing.service.ts index a028666672a..cc4d6658a58 100644 --- a/projects/core/src/routing/facade/routing.service.ts +++ b/projects/core/src/routing/facade/routing.service.ts @@ -74,10 +74,9 @@ export class RoutingService { * @param query * @param extras: Represents the extra options used during navigation. */ - go(commands: UrlCommands, query?: object, extras?: NavigationExtras): void { + go(commands: UrlCommands, extras?: NavigationExtras): void { const path = this.semanticPathService.transform(commands); - - return this.navigate(path, query, extras); + return this.navigate(path, extras); } /** @@ -146,15 +145,10 @@ export class RoutingService { * @param query * @param extras: Represents the extra options used during navigation. */ - protected navigate( - path: any[], - query?: object, - extras?: NavigationExtras - ): void { + protected navigate(path: any[], extras?: NavigationExtras): void { this.store.dispatch( new RoutingActions.RouteGoAction({ path, - query, extras, }) ); diff --git a/projects/core/src/routing/store/actions/router.action.ts b/projects/core/src/routing/store/actions/router.action.ts index d067b59ec80..d8006a7bac8 100644 --- a/projects/core/src/routing/store/actions/router.action.ts +++ b/projects/core/src/routing/store/actions/router.action.ts @@ -13,7 +13,6 @@ export class RouteGoAction implements Action { constructor( public payload: { path: string[]; - query?: object; extras?: NavigationExtras; } ) {} diff --git a/projects/core/src/routing/store/effects/router.effect.spec.ts b/projects/core/src/routing/store/effects/router.effect.spec.ts index 8d710ca2a3f..e9a716b4f6d 100644 --- a/projects/core/src/routing/store/effects/router.effect.spec.ts +++ b/projects/core/src/routing/store/effects/router.effect.spec.ts @@ -46,9 +46,7 @@ describe('Router Effects', () => { spyOn(router, 'navigate'); spyOn(router, 'navigateByUrl'); effects.navigate$.subscribe(() => { - expect(router.navigate).toHaveBeenCalledWith(['/test'], { - queryParams: undefined, - }); + expect(router.navigate).toHaveBeenCalledWith(['/test'], {}); }); }); }); diff --git a/projects/core/src/routing/store/effects/router.effect.ts b/projects/core/src/routing/store/effects/router.effect.ts index 879c1147f0d..2845284e7a6 100644 --- a/projects/core/src/routing/store/effects/router.effect.ts +++ b/projects/core/src/routing/store/effects/router.effect.ts @@ -16,8 +16,8 @@ export class RouterEffects { navigate$: Observable = this.actions$.pipe( ofType(RoutingActions.ROUTER_GO), map((action: RoutingActions.RouteGoAction) => action.payload), - tap(({ path, query: queryParams, extras }) => { - this.router.navigate(path, { queryParams, ...extras }); + tap(({ path, extras }) => { + this.router.navigate(path, { ...extras }); }) ); diff --git a/projects/schematics/src/migrations/4_0/methods-and-properties-deprecations/data/routing.service.ts.migration.ts b/projects/schematics/src/migrations/4_0/methods-and-properties-deprecations/data/routing.service.ts.migration.ts new file mode 100644 index 00000000000..9a14959cfe5 --- /dev/null +++ b/projects/schematics/src/migrations/4_0/methods-and-properties-deprecations/data/routing.service.ts.migration.ts @@ -0,0 +1,17 @@ +import { + TODO_SPARTACUS, + SPARTACUS_CORE, + ROUTING_SERVICE, + GO, +} from '../../../../shared/constants'; +import { MethodPropertyDeprecation } from '../../../../shared/utils/file-utils'; + +// projects/core/src/routing/facade/routing.service.ts +export const ROUTING_SERVICE_MIGRATION: MethodPropertyDeprecation[] = [ + { + class: ROUTING_SERVICE, + importPath: SPARTACUS_CORE, + deprecatedNode: GO, + comment: `// ${TODO_SPARTACUS} The second argument of the method ${GO} has been removed. Use extras.queryParams instead.`, + }, +]; diff --git a/projects/schematics/src/migrations/4_0/methods-and-properties-deprecations/methods-and-properties-deprecations.ts b/projects/schematics/src/migrations/4_0/methods-and-properties-deprecations/methods-and-properties-deprecations.ts index b7caaff1f9d..e4e0e2a3891 100644 --- a/projects/schematics/src/migrations/4_0/methods-and-properties-deprecations/methods-and-properties-deprecations.ts +++ b/projects/schematics/src/migrations/4_0/methods-and-properties-deprecations/methods-and-properties-deprecations.ts @@ -5,8 +5,8 @@ import { ADDED_TO_CART_DIALOG_COMPONENT_MIGRATION } from './data/added-to-cart-d import { CONFIGURATOR_ATTRIBUTE_DROP_DOWN_COMPONENT_MIGRATION } from './data/configurator-attribute-drop-down.component.migration'; import { CONFIGURATOR_ATTRIBUTE_NUMERIC_INPUT_FIELD_COMPONENT_MIGRATION } from './data/configurator-attribute-numeric-input-field.component.migration'; import { CONFIGURATOR_ATTRIBUTE_RADIO_BUTTON_COMPONENT_MIGRATION } from './data/configurator-attribute-radio-button.component.migration'; -import { CONFIGURATOR_PRODUCT_TITLE_COMPONENT_MIGRATION } from './data/configurator-product-title.component.migration'; import { CONFIGURATOR_GROUP_MENU_COMPONENT_MIGRATION } from './data/configurator-group-menu.component.migration'; +import { CONFIGURATOR_PRODUCT_TITLE_COMPONENT_MIGRATION } from './data/configurator-product-title.component.migration'; import { CONTENT_PAGE_META_RESOLVER_MIGRATION, PAGE_META_SERVICE_MIGRATION, @@ -19,6 +19,7 @@ import { OCC_ENDPOINTS_SERVICE_MIGRATION, } from './data/occ-endpoints.service.migration'; import { PAGE_EVENT_BUILDER_MIGRATION } from './data/page-event.builder.ts.migration'; +import { ROUTING_SERVICE_MIGRATION } from './data/routing.service.ts.migration'; import { SELECTIVE_CART_SERVICE_MIGRATION } from './data/selective-cart.service.migration'; export const METHOD_PROPERTY_DATA: MethodPropertyDeprecation[] = [ @@ -36,6 +37,7 @@ export const METHOD_PROPERTY_DATA: MethodPropertyDeprecation[] = [ ...CONFIGURATOR_ATTRIBUTE_NUMERIC_INPUT_FIELD_COMPONENT_MIGRATION, ...CONFIGURATOR_ATTRIBUTE_RADIO_BUTTON_COMPONENT_MIGRATION, ...CONFIGURATOR_PRODUCT_TITLE_COMPONENT_MIGRATION, + ...ROUTING_SERVICE_MIGRATION, ...CONFIGURATOR_GROUP_MENU_COMPONENT_MIGRATION, ]; diff --git a/projects/schematics/src/shared/constants.ts b/projects/schematics/src/shared/constants.ts index 7d90fd64443..42f96054506 100644 --- a/projects/schematics/src/shared/constants.ts +++ b/projects/schematics/src/shared/constants.ts @@ -861,6 +861,7 @@ export const GET_LOADED = 'getLoaded'; export const IS_STABLE = 'isStable'; export const STOREFINDER_MODULE = 'StoreFinderModule'; +export const GO = 'go'; export const CREATE_EVENT_FROM_INPUT = 'createEventFromInput'; export const ON_SELECT = 'onSelect'; diff --git a/projects/storefrontlib/src/cms-components/myaccount/my-coupons/my-coupons.component.service.spec.ts b/projects/storefrontlib/src/cms-components/myaccount/my-coupons/my-coupons.component.service.spec.ts index 909404d971a..5802883e744 100644 --- a/projects/storefrontlib/src/cms-components/myaccount/my-coupons/my-coupons.component.service.spec.ts +++ b/projects/storefrontlib/src/cms-components/myaccount/my-coupons/my-coupons.component.service.spec.ts @@ -51,7 +51,11 @@ describe('MyCouponsComponentService', () => { cxRoute: 'search', params: { query: RELEVANCE }, }, - { couponcode: 'CouponForAllProduct' } + { + queryParams: { + couponcode: 'CouponForAllProduct', + }, + } ); }); @@ -64,7 +68,11 @@ describe('MyCouponsComponentService', () => { query: RELEVANCE + CUSTOMER_COUPON_CODE + 'CouponForPartProduct', }, }, - { couponcode: 'CouponForPartProduct' } + { + queryParams: { + couponcode: 'CouponForPartProduct', + }, + } ); }); diff --git a/projects/storefrontlib/src/cms-components/myaccount/my-coupons/my-coupons.component.service.ts b/projects/storefrontlib/src/cms-components/myaccount/my-coupons/my-coupons.component.service.ts index ff9fe1b57b4..a2de6ec9fb0 100644 --- a/projects/storefrontlib/src/cms-components/myaccount/my-coupons/my-coupons.component.service.ts +++ b/projects/storefrontlib/src/cms-components/myaccount/my-coupons/my-coupons.component.service.ts @@ -32,7 +32,11 @@ export class MyCouponsComponentService { cxRoute: 'search', params: { query: this.buildSearchParam(coupon) }, }, - { couponcode: coupon.couponId } + { + queryParams: { + couponcode: coupon.couponId, + }, + } ); } diff --git a/projects/storefrontlib/src/cms-components/myaccount/order/return-request-detail/return-request.service.spec.ts b/projects/storefrontlib/src/cms-components/myaccount/order/return-request-detail/return-request.service.spec.ts index 26d164ea478..56e6793b2b0 100644 --- a/projects/storefrontlib/src/cms-components/myaccount/order/return-request-detail/return-request.service.spec.ts +++ b/projects/storefrontlib/src/cms-components/myaccount/order/return-request-detail/return-request.service.spec.ts @@ -146,7 +146,6 @@ describe('ReturnRequestService', () => { service.backToList(); expect(routingService.go).toHaveBeenCalledWith( { cxRoute: 'orders' }, - null, { state: { activeTab: 1, diff --git a/projects/storefrontlib/src/cms-components/myaccount/order/return-request-detail/return-request.service.ts b/projects/storefrontlib/src/cms-components/myaccount/order/return-request-detail/return-request.service.ts index 35cd9be832b..9d85f421534 100644 --- a/projects/storefrontlib/src/cms-components/myaccount/order/return-request-detail/return-request.service.ts +++ b/projects/storefrontlib/src/cms-components/myaccount/order/return-request-detail/return-request.service.ts @@ -78,10 +78,13 @@ export class ReturnRequestService { } backToList(): void { - this.routingService.go({ cxRoute: 'orders' }, null, { - state: { - activeTab: 1, - }, - }); + this.routingService.go( + { cxRoute: 'orders' }, + { + state: { + activeTab: 1, + }, + } + ); } }