feat: add terms and conditions message alert

Closes: CXSPA-3171

integration-libs/opf/_index.scss

@@ -8,7 +8,8 @@
 
 $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-error-modal !default;
+  cx-opf-checkout-payment-wrapper, cx-opf-checkout-terms-and-conditions-alert,
+  cx-opf-error-modal !default;
 
 $skipComponentStyles: () !default;
 

integration-libs/opf/checkout/assets/translations/en/opf.i18n.ts

@@ -19,6 +19,8 @@ export const opf = {
       itemsToBeShipped: 'Items to be shipped',
       proceedPayment: 'Place Order',
       retryPayment: 'Retry to Continue',
+      checkTermsAndConditionsFirst:
+        'You must agree Terms & Conditions to see available payment options.',
       errors: {
         loadActiveConfigurations:
           'We are unable to load payment options at this time. Please try again later.',

integration-libs/opf/checkout/components/opf-checkout-payment-and-review/opf-checkout-payment-and-review.component.html

@@ -33,6 +33,10 @@ <h3>{{ 'opf.checkout.termsAndConditions' | cxTranslate }}</h3>
 
   <cx-opf-checkout-billing-address-form></cx-opf-checkout-billing-address-form>
 
+  <cx-opf-checkout-terms-and-conditions-alert
+    [isVisible]="termsAndConditionInvalid"
+  ></cx-opf-checkout-terms-and-conditions-alert>
+
   <cx-opf-checkout-payments
     [disabled]="termsAndConditionInvalid"
   ></cx-opf-checkout-payments>

integration-libs/opf/checkout/components/opf-checkout-payment-and-review/opf-checkout-payment-and-review.module.ts

@@ -26,6 +26,7 @@ import {
 } from '@spartacus/storefront';
 import { OpfCheckoutBillingAddressFormModule } from '../opf-checkout-billing-address-form/opf-checkout-billing-address-form.module';
 import { OpfCheckoutPaymentsModule } from '../opf-checkout-payments/opf-checkout-payments.module';
+import { OpfCheckoutTermsAndConditionsAlertModule } from '../opf-checkout-terms-and-conditions-alert/opf-checkout-terms-and-conditions-alert.module';
 import { OpfCheckoutPaymentAndReviewComponent } from './opf-checkout-payment-and-review.component';
 
 @NgModule({
@@ -42,6 +43,7 @@ import { OpfCheckoutPaymentAndReviewComponent } from './opf-checkout-payment-and
     PromotionsModule,
     IconModule,
     CardModule,
+    OpfCheckoutTermsAndConditionsAlertModule,
   ],
 
   providers: [

integration-libs/opf/checkout/components/opf-checkout-payments/opf-checkout-payments.component.html

@@ -8,6 +8,9 @@ <h3>
     class="cx-payment-options-list"
     *ngIf="!activeConfigurationsState?.loading; else loading"
   >
+    <cx-opf-checkout-terms-and-conditions-alert
+      [isVisible]="disabled"
+    ></cx-opf-checkout-terms-and-conditions-alert>
     <div
       class="form-check"
       *ngFor="let configuration of activeConfigurationsState?.data"

integration-libs/opf/checkout/components/opf-checkout-payments/opf-checkout-payments.component.spec.ts

@@ -16,6 +16,7 @@ import {
 } from '@spartacus/opf/base/root';
 
 import { BehaviorSubject, Observable, of } from 'rxjs';
+import { OpfCheckoutTermsAndConditionsAlertModule } from '../opf-checkout-terms-and-conditions-alert';
 import { OpfCheckoutPaymentsComponent } from './opf-checkout-payments.component';
 
 const mockActiveConfigurations: ActiveConfiguration[] = [
@@ -81,7 +82,7 @@ describe('OpfCheckoutPaymentsComponent', () => {
       of(mockOpfPaymentMetadata)
     );
     await TestBed.configureTestingModule({
-      imports: [I18nTestingModule],
+      imports: [I18nTestingModule, OpfCheckoutTermsAndConditionsAlertModule],
       declarations: [OpfCheckoutPaymentsComponent],
       providers: [
         {

integration-libs/opf/checkout/components/opf-checkout-payments/opf-checkout-payments.module.ts

@@ -9,6 +9,7 @@ import { NgModule } from '@angular/core';
 import { I18nModule } from '@spartacus/core';
 import { SpinnerModule } from '@spartacus/storefront';
 import { OpfCheckoutPaymentWrapperModule } from '../opf-checkout-payment-wrapper';
+import { OpfCheckoutTermsAndConditionsAlertModule } from '../opf-checkout-terms-and-conditions-alert/opf-checkout-terms-and-conditions-alert.module';
 import { OpfCheckoutPaymentsComponent } from './opf-checkout-payments.component';
 
 @NgModule({
@@ -17,8 +18,9 @@ import { OpfCheckoutPaymentsComponent } from './opf-checkout-payments.component'
   imports: [
     CommonModule,
     I18nModule,
-    OpfCheckoutPaymentWrapperModule,
     SpinnerModule,
+    OpfCheckoutPaymentWrapperModule,
+    OpfCheckoutTermsAndConditionsAlertModule,
   ],
 })
 export class OpfCheckoutPaymentsModule {}

integration-libs/opf/checkout/components/opf-checkout-terms-and-conditions-alert/index.ts

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

integration-libs/opf/checkout/components/opf-checkout-terms-and-conditions-alert/opf-checkout-terms-and-conditions-alert.component.html

@@ -0,0 +1,13 @@
+<div *ngIf="isVisible" class="cx-opf-checkout-terms-and-conditions-alert">
+  <div class="alert alert-info">
+    <span class="alert-icon">
+      <cx-icon [type]="iconTypes.INFO"></cx-icon>
+    </span>
+    <span class="message">
+      {{ 'opf.checkout.checkTermsAndConditionsFirst' | cxTranslate }}</span
+    >
+    <button class="close" type="button" (click)="close()">
+      <cx-icon [type]="iconTypes.CLOSE"></cx-icon>
+    </button>
+  </div>
+</div>

integration-libs/opf/checkout/components/opf-checkout-terms-and-conditions-alert/opf-checkout-terms-and-conditions-alert.component.spec.ts

@@ -0,0 +1,71 @@
+import { Component, Input, Pipe, PipeTransform } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { OpfCheckoutTermsAndConditionsAlertComponent } from './opf-checkout-terms-and-conditions-alert.component';
+
+@Component({
+  selector: 'cx-icon',
+  template: '<ng-content></ng-content>',
+})
+class MockIconComponent {
+  @Input() type: string;
+}
+
+@Pipe({
+  name: 'cxTranslate',
+})
+class MockTranslatePipe implements PipeTransform {
+  transform(): any {}
+}
+
+const alertSelector = '.cx-opf-checkout-terms-and-conditions-alert';
+
+describe('OpfCheckoutTermsAndConditionsAlertComponent', () => {
+  let fixture: ComponentFixture<OpfCheckoutTermsAndConditionsAlertComponent>;
+  let component: OpfCheckoutTermsAndConditionsAlertComponent;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        OpfCheckoutTermsAndConditionsAlertComponent,
+        MockIconComponent,
+        MockTranslatePipe,
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(
+      OpfCheckoutTermsAndConditionsAlertComponent
+    );
+    component = fixture.componentInstance;
+  });
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render component if isVisible is set to true', () => {
+    component.isVisible = true;
+    fixture.detectChanges();
+    const alertElement = fixture.nativeElement.querySelector(alertSelector);
+
+    expect(alertElement).toBeTruthy();
+  });
+
+  it('should not render component if isVisible is set to false', () => {
+    component.isVisible = false;
+    fixture.detectChanges();
+    const alertElement = fixture.nativeElement.querySelector(alertSelector);
+
+    expect(alertElement).toBeNull();
+  });
+
+  it('should set isVisible to false, if close method is called', () => {
+    component.isVisible = true;
+    fixture.detectChanges();
+    const alertElement = fixture.nativeElement.querySelector(alertSelector);
+
+    expect(alertElement).toBeTruthy();
+
+    component.close();
+    expect(component.isVisible).toBeFalsy();
+  });
+});

integration-libs/opf/checkout/components/opf-checkout-terms-and-conditions-alert/opf-checkout-terms-and-conditions-alert.component.ts

@@ -0,0 +1,23 @@
+/*
+ * SPDX-FileCopyrightText: 2023 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ICON_TYPE } from '@spartacus/storefront';
+
+@Component({
+  selector: 'cx-opf-checkout-terms-and-conditions-alert',
+  templateUrl: './opf-checkout-terms-and-conditions-alert.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OpfCheckoutTermsAndConditionsAlertComponent {
+  iconTypes = ICON_TYPE;
+
+  @Input() isVisible: boolean;
+
+  close() {
+    this.isVisible = false;
+  }
+}

integration-libs/opf/checkout/components/opf-checkout-terms-and-conditions-alert/opf-checkout-terms-and-conditions-alert.module.ts

@@ -0,0 +1,18 @@
+/*
+ * 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 { I18nModule } from '@spartacus/core';
+import { IconModule } from '@spartacus/storefront';
+import { OpfCheckoutTermsAndConditionsAlertComponent } from './opf-checkout-terms-and-conditions-alert.component';
+
+@NgModule({
+  declarations: [OpfCheckoutTermsAndConditionsAlertComponent],
+  exports: [OpfCheckoutTermsAndConditionsAlertComponent],
+  imports: [CommonModule, I18nModule, IconModule],
+})
+export class OpfCheckoutTermsAndConditionsAlertModule {}

integration-libs/opf/checkout/components/public_api.ts

@@ -7,3 +7,4 @@
 export * from './opf-checkout-components.module';
 export * from './opf-checkout-payment-and-review/index';
 export * from './opf-checkout-payments/index';
+export * from './opf-checkout-terms-and-conditions-alert/index';

integration-libs/opf/checkout/styles/components/_index.scss

@@ -2,3 +2,4 @@
 @import './opf-checkout-payments';
 @import './opf-checkout-billing-address-form';
 @import './opf-checkout-payment-wrapper';
+@import './opf-checkout-terms-and-conditions-alert';

integration-libs/opf/checkout/styles/components/_opf-checkout-payment-and-review.scss

@@ -86,4 +86,11 @@
       font-weight: var(--cx-font-weight-semi);
     }
   }
+
+  > cx-opf-checkout-terms-and-conditions-alert {
+    display: none;
+    @include media-breakpoint-down(md) {
+      display: block;
+    }
+  }
 }

integration-libs/opf/checkout/styles/components/_opf-checkout-payments.scss

@@ -24,5 +24,12 @@
       border-color: var(--cx-color-medium);
       background-color: var(--cx-color-light);
     }
+
+    > cx-opf-checkout-terms-and-conditions-alert {
+      display: block;
+      @include media-breakpoint-down(md) {
+        display: none;
+      }
+    }
   }
 }

integration-libs/opf/checkout/styles/components/_opf-checkout-terms-and-conditions-alert.scss

@@ -0,0 +1,15 @@
+%cx-opf-checkout-terms-and-conditions-alert {
+  .alert {
+    .close {
+      top: var(--cx-top, 50%);
+      right: 1.5rem;
+      margin-top: -12px;
+      &:before {
+        margin: 0;
+      }
+    }
+    .message {
+      padding: 10px 0;
+    }
+  }
+}