PR for landing page (#17978)

Co-authored-by: Jayashree <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Mohit Sisodiya <[email protected]>

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

@@ -5,7 +5,9 @@
  */
 
 import { customerTicketing } from './customer-ticketing';
+import { myAccountV2CustomerTicketing } from './my-account-v2-customer-ticketing';
 
 export const en = {
   customerTicketing,
+  myAccountV2CustomerTicketing,
 };

feature-libs/customer-ticketing/assets/translations/en/my-account-v2-customer-ticketing.ts

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2023 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const myAccountV2CustomerTicketing = {
+  myAccountV2CustomerTicketing: {
+    heading: 'Customer Service',
+    showMore: 'Show More',
+    changedOn: 'Changed On: {{value}}',
+    ticketId: 'ID: {{value}}',
+    subjectLabel: 'Subject',
+    idLabel: 'Customer Service Id',
+  },
+};

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

@@ -19,4 +19,5 @@ export const customerTicketingTranslationChunksConfig: TranslationChunksConfig =
       'createCustomerTicket',
       'customerTicketingDetails',
     ],
+    myAccountV2CustomerTicketing: ['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 './my-account-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/my-account-v2/index.ts

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

feature-libs/customer-ticketing/components/my-account-v2/my-account-v2-customer-ticketing.component.html

@@ -0,0 +1,82 @@
+<ng-container>
+  <div class="cx-my-account-customer-ticket-header">
+    <!-- HEADER -->
+    <div
+      class="cx-my-account-customer-ticket-heading"
+      [attr.aria-label]="'myAccountV2CustomerTicketing.heading' | cxTranslate"
+    >
+      {{ 'myAccountV2CustomerTicketing.heading' | cxTranslate }}
+    </div>
+
+    <!-- SHOW MORE -->
+    <div class="cx-my-account-customer-ticket-show-more">
+      <a
+        id="show-more-requests"
+        [attr.aria-label]="
+          'myAccountV2CustomerTicketing.showMore' | cxTranslate
+        "
+        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-my-account-customer-ticket-body">
+        <ng-container *ngFor="let ticket of ticketList.tickets">
+          <div class="cx-my-account-customer-ticket-details">
+            <span
+              class="cx-my-account-customer-ticket-subject"
+              [attr.aria-label]="
+                'myAccountV2CustomerTicketing.subjectLabel' | cxTranslate
+              "
+            >
+              {{ ticket.subject }}
+            </span>
+            <span class="cx-my-account-customer-ticket-details-light">
+              | {{ ticket.ticketCategory?.name }}
+            </span>
+            <span
+              class="cx-my-account-customer-ticket-details-light"
+              [attr.aria-label]="
+                'myAccountV2CustomerTicketing.idLabel' | cxTranslate
+              "
+            >
+              |
+              {{
+                'myAccountV2CustomerTicketing.ticketId'
+                  | cxTranslate: { value: ticket.id }
+              }}
+            </span>
+          </div>
+          <div class="cx-my-account-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-my-account-no-ticket"
+    [attr.aria-label]="'customerTicketingList.noTickets' | cxTranslate"
+  >
+    {{ 'customerTicketingList.noTickets' | cxTranslate }}
+  </div>
+</ng-template>
+
+<ng-template #spinner>
+  <cx-spinner></cx-spinner>
+</ng-template>

feature-libs/customer-ticketing/components/my-account-v2/my-account-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 './my-account-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-my-account-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-my-account-customer-ticket-details')
+    );
+    expect(details.nativeElement).not.toBeNull();
+    const noTicket = fixture.debugElement.query(
+      By.css('.cx-my-account-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-my-account-customer-ticket-details')
+    );
+    expect(details).toBeNull();
+    const noTicket = fixture.debugElement.query(
+      By.css('.cx-my-account-no-ticket')
+    );
+    expect(noTicket).not.toBeNull();
+  });
+});

feature-libs/customer-ticketing/components/my-account-v2/my-account-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-my-account-v2-customer-ticketing',
+  templateUrl: './my-account-v2-customer-ticketing.component.html',
+})
+export class MyAccountV2CustomerTicketingComponent {
+  protected readonly PAGE_SIZE = 1;
+  protected customerTicketingFacade = inject(CustomerTicketingFacade);
+  tickets$: Observable<TicketList | undefined> =
+    this.customerTicketingFacade.getTickets(this.PAGE_SIZE);
+}

feature-libs/customer-ticketing/components/my-account-v2/my-account-v2-customer-ticketing.module.ts

@@ -0,0 +1,35 @@
+/*
+ * SPDX-FileCopyrightText: 2023 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { NgModule } from '@angular/core';
+import {
+  provideDefaultConfig,
+  CmsConfig,
+  AuthGuard,
+  I18nModule,
+  UrlModule,
+} from '@spartacus/core';
+import { MyAccountV2CustomerTicketingComponent } from './my-account-v2-customer-ticketing.component';
+import { SpinnerModule } from '@spartacus/storefront';
+import { RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  declarations: [MyAccountV2CustomerTicketingComponent],
+  exports: [MyAccountV2CustomerTicketingComponent],
+  providers: [
+    provideDefaultConfig(<CmsConfig>{
+      cmsComponents: {
+        MyAccountViewRequestsComponent: {
+          component: MyAccountV2CustomerTicketingComponent,
+          guards: [AuthGuard],
+        },
+      },
+    }),
+  ],
+  imports: [CommonModule, I18nModule, UrlModule, SpinnerModule, RouterModule],
+})
+export class MyAccountV2CustomerTicketingModule {}

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

@@ -8,3 +8,4 @@ export * from './customer-ticketing-components.module';
 export * from './details/index';
 export * from './list/index';
 export * from './shared/index';
+export * from './my-account-v2/index';

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

@@ -31,6 +31,7 @@ export function defaultCustomerTicketingComponentsConfig(): CmsConfig {
           'SupportTicketDetailsComponent',
           'SupportTicketReopenComponent',
           'SupportTicketCloseComponent',
+          'MyAccountViewRequestsComponent',
         ],
       },
 

feature-libs/customer-ticketing/styles/components/_index.scss

@@ -2,12 +2,13 @@
 @import './customer-ticketing-details';
 @import './customer-ticketing-dialog';
 @import './customer-ticketing-list';
+@import './my-account-v2-customer-ticketing';
 
 $customer-ticketing-allowlist: cx-customer-ticketing-create-dialog,
   cx-customer-ticketing-reopen-dialog, cx-customer-ticketing-close-dialog,
   cx-customer-ticketing-reopen, cx-customer-ticketing-close,
   cx-customer-ticketing-create, cx-customer-ticketing-details,
-  cx-customer-ticketing-list !default;
+  cx-customer-ticketing-list, cx-my-account-v2-customer-ticketing !default;
 
 $skipComponentStyles: () !default;