CXSPA-5174 (#18030)

SAP · Oct 30, 2023 · 5fdc22b · 5fdc22b
1 parent c573c23
commit 5fdc22b
Show file tree

Hide file tree

Showing 10 changed files with 31 additions and 43 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -14,7 +14,7 @@ export const OrderConfirmationOrderEntriesContextToken = new InjectionToken(
   'OrderConfirmationOrderEntriesContext'
 );
 
-export const MY_ACCOUNT_V2_ORDER = new InjectionToken<boolean>(
+export const USE_MY_ACCOUNT_V2_ORDER = new InjectionToken<boolean>(
   '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
@@ -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
@@ -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
@@ -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(<I18nConfig>{

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
@@ -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
@@ -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;
-    }
   }
 }