feat: Support payment provider icons

Closes: CXSPA-6402

integration-libs/opf/base/root/model/opf-base.model.ts

@@ -11,6 +11,7 @@ export interface ActiveConfiguration {
   providerType?: OpfPaymentProviderType;
   displayName?: string;
   acquirerCountryCode?: string;
+  logoUrl?: string;
 }
 
 export interface OpfDynamicScript {

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

@@ -33,6 +33,12 @@ <h3>
       >
         <div class="cx-payment-type">
           {{ configuration.displayName }}
+          <img
+            *ngIf="configuration?.logoUrl"
+            [src]="configuration.logoUrl"
+            [alt]="configuration.displayName"
+            class="cx-payment-logo"
+          />
         </div>
       </label>
       <cx-opf-checkout-payment-wrapper

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

@@ -15,6 +15,8 @@ import {
   OpfPaymentProviderType,
 } from '@spartacus/opf/base/root';
 
+import { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
 import { BehaviorSubject, Observable, of } from 'rxjs';
 import { OpfCheckoutTermsAndConditionsAlertModule } from '../opf-checkout-terms-and-conditions-alert';
 import { OpfCheckoutPaymentsComponent } from './opf-checkout-payments.component';
@@ -29,6 +31,7 @@ const mockActiveConfigurations: ActiveConfiguration[] = [
     id: 2,
     providerType: OpfPaymentProviderType.PAYMENT_GATEWAY,
     displayName: 'Test2',
+    logoUrl: 'logoUrl',
   },
   {
     id: 3,
@@ -73,6 +76,7 @@ describe('OpfCheckoutPaymentsComponent', () => {
   let fixture: ComponentFixture<OpfCheckoutPaymentsComponent>;
   let globalMessageService: GlobalMessageService;
   let opfMetadataStoreServiceMock: jasmine.SpyObj<OpfMetadataStoreService>;
+  let el: DebugElement;
 
   beforeEach(async () => {
     opfMetadataStoreServiceMock = jasmine.createSpyObj(
@@ -101,6 +105,7 @@ describe('OpfCheckoutPaymentsComponent', () => {
 
     fixture = TestBed.createComponent(OpfCheckoutPaymentsComponent);
     component = fixture.componentInstance;
+    el = fixture.debugElement;
   });
   beforeEach(() => {
     globalMessageService = TestBed.inject(GlobalMessageService);
@@ -172,4 +177,34 @@ describe('OpfCheckoutPaymentsComponent', () => {
 
     expect(component.selectedPaymentId).toBe(defaultSelectedPaymentOptionId);
   });
+
+  it('should render payment provider logo', () => {
+    activeConfigurationsState$.next({
+      loading: false,
+      error: false,
+      data: mockActiveConfigurations,
+    });
+
+    fixture.detectChanges();
+
+    mockActiveConfigurations.forEach((configuration) => {
+      const logoElement = el.query(
+        By.css(
+          'label[for=paymentId-' + configuration.id + ']  .cx-payment-logo'
+        )
+      );
+
+      if (configuration?.logoUrl) {
+        expect(logoElement).toBeTruthy();
+        expect(logoElement.nativeElement.attributes['alt'].value).toBe(
+          configuration.displayName
+        );
+        expect(logoElement.nativeElement.attributes['src'].value).toBe(
+          configuration.logoUrl
+        );
+      } else {
+        expect(logoElement).toBeFalsy();
+      }
+    });
+  });
 });

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

@@ -14,6 +14,10 @@
 
     input:disabled + .form-check-label {
       color: var(--cx-color-medium);
+
+      .cx-payment-logo {
+        opacity: 0.3;
+      }
     }
 
     input[type='radio'] {
@@ -31,5 +35,10 @@
         display: none;
       }
     }
+
+    .cx-payment-logo {
+      max-height: 30px;
+      margin: -2px 0 0 4px;
+    }
   }
 }