feat: Add CTA Scripts feature (#17991)

CXSPA-4532

integration-libs/opf/_index.scss

@@ -9,7 +9,7 @@
 $opf-components-allowlist: cx-opf-checkout-payment-and-review,
   cx-opf-checkout-payments, cx-opf-checkout-billing-address-form,
   cx-opf-checkout-payment-wrapper, cx-opf-checkout-terms-and-conditions-alert,
-  cx-opf-error-modal !default;
+  cx-opf-error-modal, cx-opf-cta-element !default;
 
 $skipComponentStyles: () !default;
 

integration-libs/opf/base/components/opf-base-components.module.ts

@@ -5,10 +5,11 @@
  */
 
 import { NgModule } from '@angular/core';
+import { OpfCtaScriptsModule } from './opf-cta/opf-cta-scripts';
 import { OpfErrorModalModule } from './opf-error-modal/opf-error-modal.module';
 
 @NgModule({
-  imports: [OpfErrorModalModule],
+  imports: [OpfErrorModalModule, OpfCtaScriptsModule],
   providers: [],
 })
 export class OpfBaseComponentsModule {}

integration-libs/opf/base/components/opf-cta/opf-cta-element/index.ts

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

integration-libs/opf/base/components/opf-cta/opf-cta-element/opf-cta-element.component.html

@@ -0,0 +1 @@
+<div *ngIf="ctaScriptHtml" [innerHTML]="ctaScriptHtml | cxSafeHtml"></div>

integration-libs/opf/base/components/opf-cta/opf-cta-element/opf-cta-element.component.spec.ts

@@ -0,0 +1,19 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { OpfCtaElementComponent } from './opf-cta-element.component';
+
+describe('OpfCtaButton', () => {
+  let component: OpfCtaElementComponent;
+  let fixture: ComponentFixture<OpfCtaElementComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [OpfCtaElementComponent],
+    });
+    fixture = TestBed.createComponent(OpfCtaElementComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

integration-libs/opf/base/components/opf-cta/opf-cta-element/opf-cta-element.component.ts

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2023 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'cx-opf-cta-element',
+  templateUrl: './opf-cta-element.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OpfCtaElementComponent {
+  @Input() ctaScriptHtml: string;
+}

integration-libs/opf/base/components/opf-cta/opf-cta-element/opf-cta-element.module.ts

@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2023 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { SafeHtmlModule } from '@spartacus/storefront';
+import { OpfCtaElementComponent } from './opf-cta-element.component';
+
+@NgModule({
+  declarations: [OpfCtaElementComponent],
+  imports: [CommonModule, SafeHtmlModule],
+  exports: [OpfCtaElementComponent],
+})
+export class OpfCtaElementModule {}

integration-libs/opf/base/components/opf-cta/opf-cta-scripts/index.ts

@@ -0,0 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2023 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './opf-cta-scripts.component';
+export * from './opf-cta-scripts.module';
+export * from './opf-cta-scripts.service';

integration-libs/opf/base/components/opf-cta/opf-cta-scripts/opf-cta-scripts.component.html

@@ -0,0 +1,13 @@
+<ng-container *ngIf="ctaHtmls$ | async as ctaHtmls; else loading">
+  <ng-container *ngIf="ctaHtmls?.length">
+    <cx-opf-cta-element
+      *ngFor="let ctaHtml of ctaHtmls"
+      [ctaScriptHtml]="ctaHtml"
+    ></cx-opf-cta-element>
+  </ng-container>
+</ng-container>
+<ng-template #loading>
+  <div class="cx-spinner">
+    <cx-spinner></cx-spinner>
+  </div>
+</ng-template>

integration-libs/opf/base/components/opf-cta/opf-cta-scripts/opf-cta-scripts.component.spec.ts

@@ -0,0 +1,78 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { of, throwError } from 'rxjs';
+import { OpfCtaScriptsComponent } from './opf-cta-scripts.component';
+import { OpfCtaScriptsService } from './opf-cta-scripts.service';
+import createSpy = jasmine.createSpy;
+
+const mockHtmlsList = [
+  '<div  style="border-style: solid;text-align:center;border-radius:10px;align-content:center;background-color:yellow;color:black"><h2>Thanks for purchasing our great products</h2><h3>Please use promo code:<b>123abc</b> for your next purchase<h3></div><script>console.log(\'CTA Script #1 is running\')</script>',
+  '<div  style="border-style: solid;text-align:center;border-radius:10px;align-content:center;background-color:yellow;color:black"><h2>Thanks again for purchasing our great products</h2><h3>Please use promo code:<b>123abc</b> for your next purchase<h3></div><script>console.log(\'CTA Script #2 is running\')</script>',
+];
+const ctaElementSelector = 'cx-opf-cta-element';
+describe('OpfCtaScriptsComponent', () => {
+  let component: OpfCtaScriptsComponent;
+  let fixture: ComponentFixture<OpfCtaScriptsComponent>;
+  let opfCtaScriptsService: jasmine.SpyObj<OpfCtaScriptsService>;
+
+  const createComponentInstance = () => {
+    fixture = TestBed.createComponent(OpfCtaScriptsComponent);
+    component = fixture.componentInstance;
+  };
+  beforeEach(() => {
+    opfCtaScriptsService = jasmine.createSpyObj('OpfCtaScriptsService', [
+      'getCtaHtmlslList',
+    ]);
+
+    TestBed.configureTestingModule({
+      declarations: [OpfCtaScriptsComponent],
+      providers: [
+        { provide: OpfCtaScriptsService, useValue: opfCtaScriptsService },
+      ],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    opfCtaScriptsService.getCtaHtmlslList.and.returnValue(of(mockHtmlsList));
+    createComponentInstance();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should return Htmls list and display ctaButton elements', (done) => {
+    component.ctaHtmls$.subscribe((htmlList) => {
+      expect(htmlList[0]).toBeTruthy();
+      fixture.detectChanges();
+      expect(
+        fixture.nativeElement.querySelectorAll(ctaElementSelector).length
+      ).toEqual(2);
+      done();
+    });
+  });
+
+  it('should isError be true when error is thrown', (done) => {
+    opfCtaScriptsService.getCtaHtmlslList = createSpy().and.returnValue(
+      throwError('error')
+    );
+    createComponentInstance();
+    component.ctaHtmls$.subscribe((htmlList) => {
+      expect(htmlList).toEqual([]);
+      fixture.detectChanges();
+      expect(
+        fixture.nativeElement.querySelector(ctaElementSelector)
+      ).toBeFalsy();
+      done();
+    });
+  });
+
+  it('should display spinner when html list is undefined', (done) => {
+    opfCtaScriptsService.getCtaHtmlslList = createSpy().and.returnValue(
+      of(undefined)
+    );
+    createComponentInstance();
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('cx-spinner')).toBeTruthy();
+    done();
+  });
+});

integration-libs/opf/base/components/opf-cta/opf-cta-scripts/opf-cta-scripts.component.ts

@@ -0,0 +1,25 @@
+/*
+ * SPDX-FileCopyrightText: 2023 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { of } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import { OpfCtaScriptsService } from './opf-cta-scripts.service';
+
+@Component({
+  selector: 'cx-opf-cta-scripts',
+  templateUrl: './opf-cta-scripts.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OpfCtaScriptsComponent {
+  protected opfCtaScriptService = inject(OpfCtaScriptsService);
+
+  ctaHtmls$ = this.opfCtaScriptService.getCtaHtmlslList().pipe(
+    catchError(() => {
+      return of([]);
+    })
+  );
+}

integration-libs/opf/base/components/opf-cta/opf-cta-scripts/opf-cta-scripts.module.ts

@@ -0,0 +1,32 @@
+/*
+ * SPDX-FileCopyrightText: 2023 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import {
+  CmsConfig,
+  FeaturesConfig,
+  provideDefaultConfig,
+} from '@spartacus/core';
+import { SpinnerModule } from '@spartacus/storefront';
+import { OpfCtaElementModule } from '../opf-cta-element';
+import { OpfCtaScriptsComponent } from './opf-cta-scripts.component';
+
+@NgModule({
+  declarations: [OpfCtaScriptsComponent],
+  providers: [
+    provideDefaultConfig(<CmsConfig | FeaturesConfig>{
+      cmsComponents: {
+        OpfCtaScriptsComponent: {
+          component: OpfCtaScriptsComponent,
+        },
+      },
+    }),
+  ],
+  exports: [OpfCtaScriptsComponent],
+  imports: [CommonModule, OpfCtaElementModule, SpinnerModule],
+})
+export class OpfCtaScriptsModule {}