diff --git a/feature-libs/customer-ticketing/styles/components/_my-account-v2-customer-ticketing.scss b/feature-libs/customer-ticketing/styles/components/_my-account-v2-customer-ticketing.scss index 6bce426d92e..e53344a3451 100644 --- a/feature-libs/customer-ticketing/styles/components/_my-account-v2-customer-ticketing.scss +++ b/feature-libs/customer-ticketing/styles/components/_my-account-v2-customer-ticketing.scss @@ -6,11 +6,11 @@ justify-content: space-between; margin: 1rem; //top-right-bottom-left .cx-my-account-customer-ticket-heading { - font-size: 18px; + font-size: 16px; font-weight: 700; } .cx-my-account-customer-ticket-show-more { - font-size: 16px; + font-size: 14px; font-weight: 600; } } @@ -29,11 +29,11 @@ align-items: center; } .cx-my-account-customer-ticket-subject { - font-size: 18px; + font-size: 16px; font-weight: 700; } .cx-my-account-customer-ticket-details-light { - font-size: 14px; + font-size: 12px; font-weight: 400; color: var(--cx-color-secondary); } diff --git a/feature-libs/order/README.md b/feature-libs/order/README.md index afa15739b43..233bc91e06a 100644 --- a/feature-libs/order/README.md +++ b/feature-libs/order/README.md @@ -3,7 +3,7 @@ Spartacus Order feature can be added to the existing Spartacus application by running `ng add @spartacus/order`. For more information about Spartacus schematics, visit the [official Spartacus schematics documentation page](https://sap.github.io/spartacus-docs/schematics/). To see enhanced UI in Order History and Order Details page in B2C storefront, -1. Add `{ provide: MY_ACCOUNT_V2_ORDER, useValue: true },` to order-feature.module.ts file `providers` array. +1. Add `{ provide: USE_MY_ACCOUNT_V2_ORDER, useValue: true },` to order-feature.module.ts file `providers` array. 2. Add `pdf-invoices` feature to the storefront, if not installed already. For more information, see [Spartacus](https://github.com/SAP/spartacus). diff --git a/feature-libs/order/components/order-details/order-details.module.ts b/feature-libs/order/components/order-details/order-details.module.ts index ac69b7aef64..55f919d48c7 100644 --- a/feature-libs/order/components/order-details/order-details.module.ts +++ b/feature-libs/order/components/order-details/order-details.module.ts @@ -19,7 +19,7 @@ import { provideDefaultConfigFactory, UrlModule, } from '@spartacus/core'; -import { MY_ACCOUNT_V2_ORDER, OrderOutlets } from '@spartacus/order/root'; +import { USE_MY_ACCOUNT_V2_ORDER, OrderOutlets } from '@spartacus/order/root'; import { CardModule, IconModule, @@ -50,7 +50,7 @@ import { OrderOverviewComponent } from './order-overview/order-overview.componen import { defaultReorderLayoutConfig } from './reoder-layout.config'; function registerOrderOutletFactory(): () => void { - const isMyAccountV2 = inject(MY_ACCOUNT_V2_ORDER); + const isMyAccountV2 = inject(USE_MY_ACCOUNT_V2_ORDER); const outletService = inject(OutletService); const componentFactoryResolver = inject(ComponentFactoryResolver); return () => { @@ -157,7 +157,7 @@ const moduleComponents = [ provideDefaultConfig(defaultConsignmentTrackingLayoutConfig), provideDefaultConfig(defaultReorderLayoutConfig), provideDefaultConfigFactory(() => - inject(MY_ACCOUNT_V2_ORDER) ? myAccountV2CmsMapping : {} + inject(USE_MY_ACCOUNT_V2_ORDER) ? myAccountV2CmsMapping : {} ), { provide: MODULE_INITIALIZER, diff --git a/feature-libs/order/components/order-history/order-history.module.ts b/feature-libs/order/components/order-history/order-history.module.ts index bc820b3bf5e..51a0b081115 100644 --- a/feature-libs/order/components/order-history/order-history.module.ts +++ b/feature-libs/order/components/order-history/order-history.module.ts @@ -23,7 +23,7 @@ import { SpinnerModule, } from '@spartacus/storefront'; import { OrderHistoryComponent } from './order-history.component'; -import { MY_ACCOUNT_V2_ORDER } from '@spartacus/order/root'; +import { USE_MY_ACCOUNT_V2_ORDER } from '@spartacus/order/root'; import { MyAccountV2OrderHistoryComponent, MyAccountV2OrderConsolidatedInformationComponent, @@ -69,7 +69,7 @@ const moduleComponents = [ }, }), provideDefaultConfigFactory(() => - inject(MY_ACCOUNT_V2_ORDER) ? myAccountV2CmsMapping : {} + inject(USE_MY_ACCOUNT_V2_ORDER) ? myAccountV2CmsMapping : {} ), ], }) diff --git a/feature-libs/order/root/tokens/context.ts b/feature-libs/order/root/tokens/context.ts index e1122faf3ba..a42c5faa95b 100644 --- a/feature-libs/order/root/tokens/context.ts +++ b/feature-libs/order/root/tokens/context.ts @@ -14,7 +14,7 @@ export const OrderConfirmationOrderEntriesContextToken = new InjectionToken( 'OrderConfirmationOrderEntriesContext' ); -export const MY_ACCOUNT_V2_ORDER = new InjectionToken( +export const USE_MY_ACCOUNT_V2_ORDER = new InjectionToken( 'feature flag to enable enhanced UI for Order related pages under My-Account', { providedIn: 'root', factory: () => false } ); diff --git a/feature-libs/order/styles/components/my-account-v2/_my-account-v2-order.scss b/feature-libs/order/styles/components/my-account-v2/_my-account-v2-order.scss index f48ca395b0b..b7cfa7c66c3 100644 --- a/feature-libs/order/styles/components/my-account-v2/_my-account-v2-order.scss +++ b/feature-libs/order/styles/components/my-account-v2/_my-account-v2-order.scss @@ -6,11 +6,11 @@ justify-content: space-between; margin: 1rem; //top-right-bottom-left .cx-my-account-view-heading { - font-size: 18px; + font-size: 16px; font-weight: 700; } .cx-my-account-view-show-more { - font-size: 16px; + font-size: 14px; font-weight: 600; } } @@ -28,11 +28,11 @@ border: 1px solid var(--cx-color-medium); border-radius: 0; .cx-my-account-view-status { - font-size: 18px; + font-size: 16px; font-weight: 700; } .cx-my-account-view-code { - font-size: 14px; + font-size: 12px; font-weight: 400; color: var(--cx-color-secondary); } @@ -65,22 +65,22 @@ margin: 1 rem; padding: 15px 15px 15px 20px; .cx-my-account-view-product-name { - font-size: 16px; + font-size: 14px; font-weight: 600; } .cx-my-account-view-purchased-on { - font-size: 14px; + font-size: 12px; font-weight: 400; } .cx-my-account-view-item-count { - font-size: 14px; + font-size: 12px; font-weight: 400; } } .cx-my-account-view-order-column-1-details-bottom { padding: 15px 15px 15px 20px; .cx-my-account-view-total-price { - font-size: 16px; + font-size: 14px; font-weight: 600; } } @@ -92,7 +92,7 @@ display: flex; justify-content: right; color: var(--cx-color-secondary); - font-size: 16px; + font-size: 14px; font-weight: 600; align-items: flex-end; } diff --git a/feature-libs/user/account/styles/_my-account-v2-user.scss b/feature-libs/user/account/styles/_my-account-v2-user.scss index 1ceedcd6d79..2ad257a471f 100644 --- a/feature-libs/user/account/styles/_my-account-v2-user.scss +++ b/feature-libs/user/account/styles/_my-account-v2-user.scss @@ -1,10 +1,10 @@ .cx-my-account-v2-user { - border: 1px solid var(--cx-color-light); + border: 1px solid var(--cx-color-medium); width: 250px; padding: 20px 5px 5px 25px; gap: 40px; height: 120px; - margin: 40px 0px 0px 5px; + margin: 2rem 0rem 0rem 0rem; .cx-name { .cx-sign-out { diff --git a/projects/storefrontapp/src/app/spartacus/features/order/order-feature.module.ts b/projects/storefrontapp/src/app/spartacus/features/order/order-feature.module.ts index e634eb50af0..becdec47687 100644 --- a/projects/storefrontapp/src/app/spartacus/features/order/order-feature.module.ts +++ b/projects/storefrontapp/src/app/spartacus/features/order/order-feature.module.ts @@ -11,7 +11,7 @@ import { orderTranslations, } from '@spartacus/order/assets'; import { - MY_ACCOUNT_V2_ORDER, + USE_MY_ACCOUNT_V2_ORDER, OrderRootModule, ORDER_FEATURE, } from '@spartacus/order/root'; @@ -28,7 +28,7 @@ import { environment } from '../../../../environments/environment'; }, }), { - provide: MY_ACCOUNT_V2_ORDER, + provide: USE_MY_ACCOUNT_V2_ORDER, useValue: environment.myAccountV2, }, provideConfig({ diff --git a/projects/storefrontstyles/scss/components/content/navigation/_my-account-v2-navigation.scss b/projects/storefrontstyles/scss/components/content/navigation/_my-account-v2-navigation.scss index 093a78baff1..1376d7c791c 100644 --- a/projects/storefrontstyles/scss/components/content/navigation/_my-account-v2-navigation.scss +++ b/projects/storefrontstyles/scss/components/content/navigation/_my-account-v2-navigation.scss @@ -26,6 +26,7 @@ display: block; padding: 10px 5px 15px 5px; background-color: var(--cx-color-background); + border: 1px solid var(--cx-color-medium); width: 250px; height: 40px; margin-top: 20px; @@ -34,7 +35,8 @@ > nav > ul { > li { a { - border: 1px solid var(--cx-color-light); + border: 1px solid var(--cx-color-medium); + border-top: none; //to avoid double border } margin-bottom: 20px; } diff --git a/projects/storefrontstyles/scss/layout/page-templates/_myaccount-v2-page.scss b/projects/storefrontstyles/scss/layout/page-templates/_myaccount-v2-page.scss index f1c8949ee6c..fe1179ecd28 100644 --- a/projects/storefrontstyles/scss/layout/page-templates/_myaccount-v2-page.scss +++ b/projects/storefrontstyles/scss/layout/page-templates/_myaccount-v2-page.scss @@ -1,33 +1,19 @@ %MyAccountViewPageTemplate { max-width: var(--cx-page-width-max); margin: auto; - display: flex; cx-page-slot { cx-banner { - height: 120px; - margin-top: 40px; - margin-bottom: -500px; - border: 1px solid var(--cx-color-light); + margin: 2rem 0rem 0.5rem 0rem; + border: 1px solid var(--cx-color-medium); } } - - @include media-breakpoint-down(md) { - flex-direction: column; - } .LeftContentSlot { + float: left; max-width: 25%; - @include media-breakpoint-down(md) { - width: 100%; - max-width: none; - } } .RightContentSlot { + float: left; max-width: 75%; - - @include media-breakpoint-down(md) { - width: 100%; - max-width: none; - } } }