PR for landing page

.env-cmdrc

@@ -59,5 +59,10 @@
   "pdf-invoices": {
     "CX_BASE_URL": "https://api.cg79x9wuu9-eccommerc1-s5-public.model-t.myhybris.cloud",
     "CX_PDF_INVOICES": "true"
+  },
+  "myaccount-v2":{
+    "CX_BASE_URL": "https://api.cg79x9wuu9-eccommerc1-s5-public.model-t.myhybris.cloud",
+    "CX_PDF_INVOICES": "true",
+    "CX_MYACCOUNT_V2": "true"
   }
 }

.vscode/launch.json

@@ -4,60 +4,19 @@
   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
-    {
-      "type": "node",
-      "request": "attach",
-      "name": "Attach by Process ID",
-      "processId": "${command:PickProcess}"
-    },
-    {
-      "type": "firefox",
-      "request": "launch",
-      "reAttach": true,
-      "name": "Launch Firefox against localhost",
-      "url": "http://localhost:4200",
-      "pathMappings": [
-        {
-          "url": "webpack:///",
-          "path": "${workspaceFolder}/projects"
-        }
-      ]
-    },
-    {
-      "type": "chrome",
-      "request": "launch",
-      "name": "Launch Chrome against localhost",
-      "url": "http://localhost:4200",
-      "webRoot": "${workspaceFolder}/projects",
-      "sourceMapPathOverrides": {
-        "": "${webRoot}/"
+      {
+          "name": "Launch Chrome",
+          "request": "launch",
+          "type": "chrome",
+          "url": "http://localhost:4200",
+          "webRoot": "${workspaceFolder}"
+      },
+      {
+          "type": "msedge",
+          "request": "launch",
+          "name": "Launch Edge against localhost",
+          "url": "http://localhost:4200",
+          "webRoot": "${workspaceFolder}"
       }
-    },
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "Debug schematics",
-      "skipFiles": ["<node_internals>/**"],
-      "program": "${workspaceFolder}/node_modules/@angular/cli/bin/ng",
-      "args": ["add", "--skip-confirmation", "@spartacus/schematics@latest"],
-      "console": "integratedTerminal",
-      "outFiles": ["${workspaceFolder}/node_modules/@spartacus/**/*.js"]
-    },
-
-    // to debug a schematics Jest test, make sure that a spec.ts file is currently opened.
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "Debug project/schematics Jest test",
-      "program": "${workspaceFolder}/node_modules/.bin/jest",
-      "args": [
-        "${fileBasenameNoExtension}",
-        "--config",
-        "projects/schematics/jest.schematics.config.js"
-      ],
-      "console": "integratedTerminal",
-      "internalConsoleOptions": "neverOpen",
-      "disableOptimisticBPs": true
-    }
   ]
-}
+}

core-libs/setup/tsconfig.lib.json

@@ -81,7 +81,13 @@
       "@spartacus/user/profile": ["dist/user/profile"],
       "@spartacus/user/profile/occ": ["dist/user/profile/occ"],
       "@spartacus/user/profile/root": ["dist/user/profile/root"],
-      "@spartacus/storefront": ["dist/storefrontlib"]
+      "@spartacus/storefront": ["dist/storefrontlib"],
+      "@spartacus/pdf-invoices/assets": ["dist/pdf-invoices/assets"],
+      "@spartacus/pdf-invoices/components": ["dist/pdf-invoices/components"],
+      "@spartacus/pdf-invoices/core": ["dist/pdf-invoices/core"],
+      "@spartacus/pdf-invoices": ["dist/pdf-invoices"],
+      "@spartacus/pdf-invoices/occ": ["dist/pdf-invoices/occ"],
+      "@spartacus/pdf-invoices/root": ["dist/pdf-invoices/root"]
     }
   },
   "angularCompilerOptions": {

feature-libs/checkout/tsconfig.lib.json

@@ -83,7 +83,13 @@
       "@spartacus/user/profile/core": ["dist/user/profile/core"],
       "@spartacus/user/profile": ["dist/user/profile"],
       "@spartacus/user/profile/occ": ["dist/user/profile/occ"],
-      "@spartacus/user/profile/root": ["dist/user/profile/root"]
+      "@spartacus/user/profile/root": ["dist/user/profile/root"],
+      "@spartacus/pdf-invoices/assets": ["dist/pdf-invoices/assets"],
+      "@spartacus/pdf-invoices/components": ["dist/pdf-invoices/components"],
+      "@spartacus/pdf-invoices/core": ["dist/pdf-invoices/core"],
+      "@spartacus/pdf-invoices": ["dist/pdf-invoices"],
+      "@spartacus/pdf-invoices/occ": ["dist/pdf-invoices/occ"],
+      "@spartacus/pdf-invoices/root": ["dist/pdf-invoices/root"]
     }
   },
   "angularCompilerOptions": {

feature-libs/customer-ticketing/assets/translations/en/customer-ticketing.ts

@@ -52,4 +52,10 @@ export const customerTicketing = {
     closeRequest: 'Close Request',
     ticketNotFound: 'Ticket not found.',
   },
+  myAccountV2CustomerTicketing: {
+    heading: 'Customer Service',
+    showMore: 'Show More',
+    changedOn: 'Changed On: {{value}}',
+    ticketId: 'ID: {{value}}',
+  },
 };

feature-libs/customer-ticketing/assets/translations/translations.ts

@@ -18,5 +18,6 @@ export const customerTicketingTranslationChunksConfig: TranslationChunksConfig =
       'customerTicketingList',
       'createCustomerTicket',
       'customerTicketingDetails',
+      'myAccountV2CustomerTicketing',
     ],
   };

feature-libs/customer-ticketing/components/customer-ticketing-components.module.ts

@@ -15,6 +15,7 @@ import { CustomerTicketingListModule } from './list/customer-ticketing-list';
 import { CustomerTicketingDetailsModule } from './details/customer-ticketing-details';
 import { CustomerTicketingReopenModule } from './details/customer-ticketing-reopen';
 import { CustomerTicketingMessagesModule } from './details/customer-ticketing-messages';
+import { MyAccountV2CustomerTicketingModule } from './myaccount-v2';
 
 @NgModule({
   imports: [
@@ -26,6 +27,7 @@ import { CustomerTicketingMessagesModule } from './details/customer-ticketing-me
     CustomerTicketingListModule,
     CustomerTicketingMessagesModule,
     CustomerTicketingCreateModule,
+    MyAccountV2CustomerTicketingModule,
   ],
   providers: [provideDefaultConfig(defaultCustomerTicketingFormLayoutConfig)],
 })

feature-libs/customer-ticketing/components/myaccount-v2/index.ts

@@ -0,0 +1,8 @@
+/*
+ * SPDX-FileCopyrightText: 2023 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './myaccount-v2-customer-ticketing.component';
+export * from './myaccount-v2-customer-ticketing.module';

feature-libs/customer-ticketing/components/myaccount-v2/myaccount-v2-customer-ticketing.component.html

@@ -0,0 +1,63 @@
+<ng-container>
+  <div class="cx-myaccount-customer-ticket-header">
+    <!-- HEADER -->
+    <div class="cx-myaccount-customer-ticket-heading">
+      {{ 'myAccountV2CustomerTicketing.heading' | cxTranslate }}
+    </div>
+
+    <!-- SHOW MORE -->
+    <div class="cx-myaccount-customer-ticket-show-more">
+      <a
+        id="show-more-requests"
+        class="btn-link cx-action-link"
+        [routerLink]="
+          {
+            cxRoute: 'supportTickets'
+          } | cxUrl
+        "
+      >
+        {{ 'myAccountV2CustomerTicketing.showMore' | cxTranslate }}
+      </a>
+    </div>
+  </div>
+  <ng-container *ngIf="tickets$ | async as ticketList; else spinner">
+    <ng-container *ngIf="ticketList.tickets.length > 0; else noCustomerTickets">
+      <div class="cx-myaccount-customer-ticket-body">
+        <ng-container *ngFor="let ticket of ticketList.tickets">
+          <div class="cx-myaccount-customer-ticket-details">
+            <span class="cx-myaccount-customer-ticket-subject">
+              {{ ticket.subject }}
+            </span>
+            <span class="cx-myaccount-customer-ticket-details-light">
+              | {{ ticket.ticketCategory?.name }}
+            </span>
+            <span class="cx-myaccount-customer-ticket-details-light">
+              |
+              {{
+                'myAccountV2CustomerTicketing.ticketId'
+                  | cxTranslate: { value: ticket.id }
+              }}
+            </span>
+          </div>
+          <div class="cx-myaccount-customer-ticket-details-light">
+            {{
+              'myAccountV2CustomerTicketing.changedOn'
+                | cxTranslate
+                  : { value: ticket.modifiedAt | cxDate: 'd, MMMM, yyyy' }
+            }}
+          </div>
+        </ng-container>
+      </div>
+    </ng-container>
+  </ng-container>
+</ng-container>
+
+<ng-template #noCustomerTickets>
+  <div class="cx-myaccount-no-ticket">
+    {{ 'customerTicketingList.noTickets' | cxTranslate }}
+  </div>
+</ng-template>
+
+<ng-template #spinner>
+  <cx-spinner></cx-spinner>
+</ng-template>

feature-libs/customer-ticketing/components/myaccount-v2/myaccount-v2-customer-ticketing.component.spec.ts

@@ -0,0 +1,131 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { RouterTestingModule } from '@angular/router/testing';
+import {
+  I18nTestingModule,
+  RoutingService,
+  TranslationService,
+} from '@spartacus/core';
+import { TicketList } from '@spartacus/customer-ticketing/root';
+import { BehaviorSubject, EMPTY, Observable, of } from 'rxjs';
+import { MyAccountV2CustomerTicketingComponent } from './myaccount-v2-customer-ticketing.component';
+
+const mockTicketList: TicketList = {
+  pagination: {},
+  sorts: [],
+  tickets: [
+    {
+      id: '0000001',
+      modifiedAt: '2021-01-13T10:06:57+0000',
+      subject: 'My drill is broken.',
+      ticketCategory: {
+        id: 'ENQUIRY',
+        name: 'Enquiry',
+      },
+    },
+  ],
+};
+
+@Pipe({
+  name: 'cxUrl',
+})
+class MockUrlPipe implements PipeTransform {
+  transform() {}
+}
+@Pipe({
+  name: 'cxTranslate',
+})
+class MockTranslatePipe implements PipeTransform {
+  transform(): any {}
+}
+class MockRoutingService {
+  go() {}
+}
+
+class MockTranslationService {
+  translate(): Observable<string> {
+    return EMPTY;
+  }
+}
+
+class MockcustomerTicketingFacade {
+  getTickets(
+    _pageSize: number,
+    _currentPage?: number,
+    _sort?: string
+  ): Observable<TicketList> {
+    return mockTicketList$.asObservable();
+  }
+
+  clearTicketList() {}
+}
+
+const mockTicketList$ = new BehaviorSubject<TicketList>(mockTicketList);
+
+describe('MyAccountV2CustomerTicketingComponent', () => {
+  let component: MyAccountV2CustomerTicketingComponent;
+  let fixture: ComponentFixture<MyAccountV2CustomerTicketingComponent>;
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [RouterTestingModule, I18nTestingModule],
+        declarations: [
+          MyAccountV2CustomerTicketingComponent,
+          MockTranslatePipe,
+          MockUrlPipe,
+        ],
+        providers: [
+          {
+            provide: 'CustomerTicketingFacade',
+            useClass: MockcustomerTicketingFacade,
+          },
+          { provide: RoutingService, useClass: MockRoutingService },
+          { provide: TranslationService, useClass: MockTranslationService },
+        ],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(MyAccountV2CustomerTicketingComponent);
+      component = fixture.componentInstance;
+      component.tickets$ = of(mockTicketList);
+      fixture.detectChanges();
+    })
+  );
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display heading', () => {
+    const heading = fixture.debugElement.query(
+      By.css('.cx-myaccount-customer-ticket-heading')
+    );
+    expect(heading.nativeElement).not.toBeNull();
+    const link = fixture.debugElement.query(By.css('#show-more-requests'));
+    expect(link).not.toBeNull();
+  });
+
+  it('should show 1 return request', () => {
+    const details = fixture.debugElement.query(
+      By.css('.cx-myaccount-customer-ticket-details')
+    );
+    expect(details.nativeElement).not.toBeNull();
+    const noTicket = fixture.debugElement.query(
+      By.css('.cx-myaccount-no-ticket')
+    );
+    expect(noTicket).toBeNull();
+  });
+  it('should show no return request', () => {
+    component.tickets$ = of({ tickets: [] });
+    fixture.detectChanges();
+    const details = fixture.debugElement.query(
+      By.css('.cx-myaccount-customer-ticket-details')
+    );
+    expect(details).toBeNull();
+    const noTicket = fixture.debugElement.query(
+      By.css('.cx-myaccount-no-ticket')
+    );
+    expect(noTicket).not.toBeNull();
+  });
+});

feature-libs/customer-ticketing/components/myaccount-v2/myaccount-v2-customer-ticketing.component.ts

@@ -0,0 +1,23 @@
+/*
+ * SPDX-FileCopyrightText: 2023 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Component, inject } from '@angular/core';
+import {
+  CustomerTicketingFacade,
+  TicketList,
+} from '@spartacus/customer-ticketing/root';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'cx-myaccount-v2-customer-ticketing',
+  templateUrl: './myaccount-v2-customer-ticketing.component.html',
+})
+export class MyAccountV2CustomerTicketingComponent {
+  protected PAGE_SIZE = 1;
+  protected customerTicketingFacade = inject(CustomerTicketingFacade);
+  tickets$: Observable<TicketList | undefined> =
+    this.customerTicketingFacade.getTickets(this.PAGE_SIZE);
+}