diff --git a/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/google-pay/google-pay.component.ts b/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/google-pay/google-pay.component.ts index 0a82baf711f..8914d3e5063 100644 --- a/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/google-pay/google-pay.component.ts +++ b/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/google-pay/google-pay.component.ts @@ -37,7 +37,7 @@ export class OpfGooglePayComponent implements OnInit { this.opfGooglePayService.loadResources().then(() => { this.opfGooglePayService.initClient(this.activeConfiguration); this.opfGooglePayService.isReadyToPay().then((response: any) => { - this.isReadyToPayState$.next(response?.result); + this.isReadyToPayState$.next(!!response?.result); this.changeDetectionRef.detectChanges(); if (response.result && this.googlePayButtonContainer) { this.opfGooglePayService.renderPaymentButton( diff --git a/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/google-pay/google-pay.service.spec.ts b/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/google-pay/google-pay.service.spec.ts index e6c4835eb95..48a94a18196 100644 --- a/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/google-pay/google-pay.service.spec.ts +++ b/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/google-pay/google-pay.service.spec.ts @@ -12,7 +12,10 @@ import { OpfResourceLoaderService } from '@spartacus/opf/base/root'; import { OpfPaymentFacade } from '@spartacus/opf/payment/root'; import { OpfQuickBuyTransactionService } from '@spartacus/opf/quick-buy/core'; import { + OPF_GOOGLE_PAY_PROVIDER_NAME, OPF_QUICK_BUY_ADDRESS_FIELD_PLACEHOLDER, + OpfQuickBuyConfig, + OpfQuickBuyGooglePayProvider, OpfQuickBuyLocation, OpfQuickBuyProviderType, } from '@spartacus/opf/quick-buy/root'; @@ -47,6 +50,7 @@ describe('OpfGooglePayService', () => { let mockQuickBuyTransactionService: jasmine.SpyObj; let mockPaymentFacade: jasmine.SpyObj; let mockQuickBuyButtonsService: jasmine.SpyObj; + let mockOpfQuickBuyConfig: jasmine.SpyObj; beforeEach(() => { mockResourceLoaderService = jasmine.createSpyObj( @@ -84,6 +88,14 @@ describe('OpfGooglePayService', () => { ['getQuickBuyProviderConfig'] ); + mockOpfQuickBuyConfig = { + providers: { + [OPF_GOOGLE_PAY_PROVIDER_NAME]: { + resourceUrl: 'fakeUrl', + } as OpfQuickBuyGooglePayProvider, + }, + }; + const googlePayApiMock = { payments: { api: { @@ -119,6 +131,10 @@ describe('OpfGooglePayService', () => { provide: OpfQuickBuyButtonsService, useValue: mockQuickBuyButtonsService, }, + { + provide: OpfQuickBuyConfig, + useValue: mockOpfQuickBuyConfig, + }, ], }); diff --git a/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/google-pay/google-pay.service.ts b/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/google-pay/google-pay.service.ts index b3d09f963c0..37e7ed64855 100644 --- a/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/google-pay/google-pay.service.ts +++ b/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/google-pay/google-pay.service.ts @@ -16,9 +16,12 @@ import { import { OpfPaymentFacade } from '@spartacus/opf/payment/root'; import { OpfQuickBuyTransactionService } from '@spartacus/opf/quick-buy/core'; import { + OPF_GOOGLE_PAY_PROVIDER_NAME, OPF_QUICK_BUY_ADDRESS_FIELD_PLACEHOLDER, OPF_QUICK_BUY_DEFAULT_MERCHANT_NAME, + OpfQuickBuyConfig, OpfQuickBuyDeliveryType, + OpfQuickBuyGooglePayProvider, OpfQuickBuyLocation, OpfQuickBuyProviderType, QuickBuyTransactionDetails, @@ -39,9 +42,7 @@ export class OpfGooglePayService { OpfQuickBuyTransactionService ); protected opfQuickBuyButtonsService = inject(OpfQuickBuyButtonsService); - - protected readonly GOOGLE_PAY_JS_URL = - 'https://pay.google.com/gp/p/js/pay.js'; + protected opfQuickBuyConfig = inject(OpfQuickBuyConfig); private googlePaymentClient: google.payments.api.PaymentsClient; @@ -138,8 +139,16 @@ export class OpfGooglePayService { } loadResources(): Promise { + const opfGooglePayConfig: OpfQuickBuyGooglePayProvider | undefined = + this.opfQuickBuyConfig?.providers?.[OPF_GOOGLE_PAY_PROVIDER_NAME]; + + if (!opfGooglePayConfig?.resourceUrl?.length) { + return Promise.reject('Config not found'); + } return this.opfResourceLoaderService.loadResources([ - { url: this.GOOGLE_PAY_JS_URL }, + { + url: opfGooglePayConfig.resourceUrl, + }, ]); } diff --git a/integration-libs/opf/quick-buy/root/config/default-opf-quick-buy-config.ts b/integration-libs/opf/quick-buy/root/config/default-opf-quick-buy-config.ts new file mode 100644 index 00000000000..530d6df71cc --- /dev/null +++ b/integration-libs/opf/quick-buy/root/config/default-opf-quick-buy-config.ts @@ -0,0 +1,15 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP Spartacus team + * + * SPDX-License-Identifier: Apache-2.0 + */ + +import { OpfQuickBuyConfig } from './opf-quick-buy-config'; + +export const defaultOpfQuickBuyConfig: OpfQuickBuyConfig = { + providers: { + googlePay: { + resourceUrl: '', + }, + }, +}; diff --git a/integration-libs/opf/quick-buy/root/config/index.ts b/integration-libs/opf/quick-buy/root/config/index.ts new file mode 100644 index 00000000000..f9e16353f22 --- /dev/null +++ b/integration-libs/opf/quick-buy/root/config/index.ts @@ -0,0 +1,8 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP Spartacus team + * + * SPDX-License-Identifier: Apache-2.0 + */ + +export * from './default-opf-quick-buy-config'; +export * from './opf-quick-buy-config'; diff --git a/integration-libs/opf/quick-buy/root/config/opf-quick-buy-config.ts b/integration-libs/opf/quick-buy/root/config/opf-quick-buy-config.ts new file mode 100644 index 00000000000..5636f9f6ced --- /dev/null +++ b/integration-libs/opf/quick-buy/root/config/opf-quick-buy-config.ts @@ -0,0 +1,20 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP Spartacus team + * + * SPDX-License-Identifier: Apache-2.0 + */ + +import { Injectable } from '@angular/core'; +import { Config } from '@spartacus/core'; + +@Injectable({ + providedIn: 'root', + useExisting: Config, +}) +export abstract class OpfQuickBuyConfig { + providers?: any; +} + +declare module '@spartacus/core' { + interface Config extends OpfQuickBuyConfig {} +} diff --git a/integration-libs/opf/quick-buy/root/model/opf-quick-buy.model.ts b/integration-libs/opf/quick-buy/root/model/opf-quick-buy.model.ts index 2f1ea16d424..08d94206c5d 100644 --- a/integration-libs/opf/quick-buy/root/model/opf-quick-buy.model.ts +++ b/integration-libs/opf/quick-buy/root/model/opf-quick-buy.model.ts @@ -50,3 +50,9 @@ export enum OpfQuickBuyProviderType { APPLE_PAY = 'APPLE_PAY', GOOGLE_PAY = 'GOOGLE_PAY', } + +export const OPF_GOOGLE_PAY_PROVIDER_NAME = 'googlePay'; + +export interface OpfQuickBuyGooglePayProvider { + resourceUrl?: string; +} diff --git a/integration-libs/opf/quick-buy/root/opf-quick-buy-root.module.ts b/integration-libs/opf/quick-buy/root/opf-quick-buy-root.module.ts index 799e1a17ae2..f19cfa8be5a 100644 --- a/integration-libs/opf/quick-buy/root/opf-quick-buy-root.module.ts +++ b/integration-libs/opf/quick-buy/root/opf-quick-buy-root.module.ts @@ -5,7 +5,12 @@ */ import { NgModule } from '@angular/core'; -import { CmsConfig, provideDefaultConfigFactory } from '@spartacus/core'; +import { + CmsConfig, + provideDefaultConfig, + provideDefaultConfigFactory, +} from '@spartacus/core'; +import { defaultOpfQuickBuyConfig } from './config'; import { OPF_QUICK_BUY_FEATURE } from './feature-name'; export function defaultOpfQuickBuyCmsComponentsConfig(): CmsConfig { @@ -22,6 +27,7 @@ export function defaultOpfQuickBuyCmsComponentsConfig(): CmsConfig { @NgModule({ providers: [ provideDefaultConfigFactory(defaultOpfQuickBuyCmsComponentsConfig), + provideDefaultConfig(defaultOpfQuickBuyConfig), ], }) export class OpfQuickBuyRootModule {} diff --git a/integration-libs/opf/quick-buy/root/public_api.ts b/integration-libs/opf/quick-buy/root/public_api.ts index 794e9f4a3c5..95ee241ec6d 100644 --- a/integration-libs/opf/quick-buy/root/public_api.ts +++ b/integration-libs/opf/quick-buy/root/public_api.ts @@ -4,6 +4,7 @@ * SPDX-License-Identifier: Apache-2.0 */ +export * from './config/index'; export * from './facade/index'; export * from './feature-name'; export * from './model/index'; diff --git a/integration-libs/opf/schematics/add-opf/__snapshots__/index_spec.ts.snap b/integration-libs/opf/schematics/add-opf/__snapshots__/index_spec.ts.snap index 1c97473974f..156c0c67417 100644 --- a/integration-libs/opf/schematics/add-opf/__snapshots__/index_spec.ts.snap +++ b/integration-libs/opf/schematics/add-opf/__snapshots__/index_spec.ts.snap @@ -3,7 +3,7 @@ exports[`Spartacus SAP OPF integration schematics: ng-add SAP OPF feature general setup should add the feature using the lazy loading syntax 1`] = ` "import { NgModule } from '@angular/core'; import { CmsConfig, provideConfig } from "@spartacus/core"; -import { OPF_QUICK_BUY_FEATURE, OpfQuickBuyRootModule } from "@spartacus/opf/quick-buy/root"; +import { OPF_QUICK_BUY_FEATURE, OpfQuickBuyConfig, OpfQuickBuyRootModule } from "@spartacus/opf/quick-buy/root"; @NgModule({ declarations: [], @@ -17,7 +17,16 @@ import { OPF_QUICK_BUY_FEATURE, OpfQuickBuyRootModule } from "@spartacus/opf/qui import('@spartacus/opf/quick-buy').then((m) => m.OpfQuickBuyModule), }, } - })] + }), + provideConfig({ + providers: + { + googlePay: { + resourceUrl: "PLACEHOLDER_GOOGLE_PAY_API_URL" + } + } + }) + ] }) export class OpfFeatureModule { } " @@ -26,7 +35,7 @@ export class OpfFeatureModule { } exports[`Spartacus SAP OPF integration schematics: ng-add SAP OPF feature general setup should add the feature using the lazy loading syntax 2`] = ` "import { NgModule } from '@angular/core'; import { CmsConfig, provideConfig } from "@spartacus/core"; -import { OPF_QUICK_BUY_FEATURE, OpfQuickBuyRootModule } from "@spartacus/opf/quick-buy/root"; +import { OPF_QUICK_BUY_FEATURE, OpfQuickBuyConfig, OpfQuickBuyRootModule } from "@spartacus/opf/quick-buy/root"; @NgModule({ declarations: [], @@ -40,7 +49,16 @@ import { OPF_QUICK_BUY_FEATURE, OpfQuickBuyRootModule } from "@spartacus/opf/qui import('@spartacus/opf/quick-buy').then((m) => m.OpfQuickBuyModule), }, } - })] + }), + provideConfig({ + providers: + { + googlePay: { + resourceUrl: "PLACEHOLDER_GOOGLE_PAY_API_URL" + } + } + }) + ] }) export class OpfFeatureModule { } " diff --git a/integration-libs/opf/schematics/add-opf/schema.json b/integration-libs/opf/schematics/add-opf/schema.json index c106443db2c..96ea7de885f 100644 --- a/integration-libs/opf/schematics/add-opf/schema.json +++ b/integration-libs/opf/schematics/add-opf/schema.json @@ -52,6 +52,10 @@ "commerceCloudPublicKey": { "type": "string", "description": "Commerce Clould public key required for authentication between OPF Cloud Commerce Adapter and Spartacus" + }, + "opfGooglePayApiUrl": { + "type": "string", + "description": "GooglePay Api url required for Quick Buy Google Pay Integration." } }, "required": [] diff --git a/projects/schematics/src/shared/lib-configs/integration-libs/opf-schematics-config.ts b/projects/schematics/src/shared/lib-configs/integration-libs/opf-schematics-config.ts index 431dfab3e65..ac096630134 100644 --- a/projects/schematics/src/shared/lib-configs/integration-libs/opf-schematics-config.ts +++ b/projects/schematics/src/shared/lib-configs/integration-libs/opf-schematics-config.ts @@ -36,12 +36,14 @@ import { ORDER_MODULE } from '../order-schematics-config'; export interface SpartacusOpfOptions extends LibraryOptions { opfBaseUrl?: string; commerceCloudPublicKey?: string; + opfGooglePayApiUrl?: string; } export const OPF_FOLDER_NAME = 'opf'; export const OPF_MODULE_NAME = 'Opf'; export const OPF_SCSS_FILE_NAME = 'opf.scss'; export const OPF_CONFIG = 'OpfConfig'; +export const OPF_QUICKBUY_CONFIG = 'OpfQuickBuyConfig'; export const OPF_CHECKOUT_FEATURE_NAME_CONSTANT = 'OPF_CHECKOUT_FEATURE'; export const OPF_CHECKOUT_MODULE = 'OpfCheckoutModule'; @@ -262,6 +264,7 @@ export const OPF_QUICK_BUY_SCHEMATICS_CONFIG: SchematicConfig = { scssFileName: OPF_SCSS_FILE_NAME, importStyle: SPARTACUS_OPF, }, + customConfig: buildOpfQuickBuyConfig, }; function buildOpfConfig( @@ -287,3 +290,26 @@ function buildOpfConfig( }, }; } + +function buildOpfQuickBuyConfig( + options: SpartacusOpfOptions +): AdditionalFeatureConfiguration { + return { + providers: { + import: [ + { + moduleSpecifier: SPARTACUS_OPF_QUICK_BUY_ROOT, + namedImports: [OPF_QUICKBUY_CONFIG], + }, + ], + content: `<${OPF_QUICKBUY_CONFIG}>{ + providers: + { + googlePay: { + resourceUrl: "${options.opfGooglePayApiUrl || 'PLACEHOLDER_GOOGLE_PAY_API_URL'}" + } + } + }`, + }, + }; +} diff --git a/projects/storefrontapp/src/app/spartacus/features/opf/opf-feature.module.ts b/projects/storefrontapp/src/app/spartacus/features/opf/opf-feature.module.ts index dd12cd2e454..0d8a3b47498 100644 --- a/projects/storefrontapp/src/app/spartacus/features/opf/opf-feature.module.ts +++ b/projects/storefrontapp/src/app/spartacus/features/opf/opf-feature.module.ts @@ -36,7 +36,10 @@ import { OpfPaymentRootModule, } from '@spartacus/opf/payment/root'; import { + OPF_GOOGLE_PAY_PROVIDER_NAME, OPF_QUICK_BUY_FEATURE, + OpfQuickBuyConfig, + OpfQuickBuyGooglePayProvider, OpfQuickBuyRootModule, } from '@spartacus/opf/quick-buy/root'; import { environment } from '../../../../environments/environment'; @@ -109,6 +112,13 @@ if (environment.b2b) { commerceCloudPublicKey: 'ab4RhYGZ+w5B0SALMPOPlepWk/kmDQjTy2FU5hrQoFg=', }, }), + provideConfig({ + providers: { + [OPF_GOOGLE_PAY_PROVIDER_NAME]: { + resourceUrl: 'https://pay.google.com/gp/p/js/pay.js', + } as OpfQuickBuyGooglePayProvider, + }, + }), ...extensionProviders, ], }) diff --git a/scripts/install/config.default.sh b/scripts/install/config.default.sh index 7939b6e3e48..70f38ea6bba 100644 --- a/scripts/install/config.default.sh +++ b/scripts/install/config.default.sh @@ -93,6 +93,8 @@ EPD_VISUALIZATION_BASE_URL= # The base URL and public key values are required for connection to Cloud Commerce Adapter (OPF) OPF_BASE_URL= OPF_CLIENT_PUBLIC_KEY= +# Google Pay Api url required for Quick Buy Google Pay integration. +OPF_QUICK_BUY_GOOGLE_PAY_RESOURCE_URL= #NPM connection info #NPM_URL must start by 'https://' and end with '/' char diff --git a/scripts/install/config.opf.sh b/scripts/install/config.opf.sh index f2ad2f3b090..6423af8b76f 100644 --- a/scripts/install/config.opf.sh +++ b/scripts/install/config.opf.sh @@ -8,6 +8,5 @@ BASE_SITE="electronics-spa-standalone" # The base URL and public key values are required for connection to Cloud Commerce Adapter (OPF) OPF_BASE_URL="https://cp96avkh5f-integrati2-d2.opf.commerce.stage.context.cloud.sap/commerce-cloud-adapter-stage/storefront" OPF_CLIENT_PUBLIC_KEY="k2N3m3TJPLragwia5ZUvS/qkIPVQoy5qjUkOAB6Db+U=" - -# TODO: Comment out the line below after OPF branch is merged into develop. -BRANCH="epic/opf" +# Google Pay Api url required for Quick Buy Google Pay integration. +OPF_QUICK_BUY_GOOGLE_PAY_RESOURCE_URL="https://pay.google.com/gp/p/js/pay.js" diff --git a/scripts/install/functions.sh b/scripts/install/functions.sh index c8ad7e646e1..92e75a32396 100644 --- a/scripts/install/functions.sh +++ b/scripts/install/functions.sh @@ -136,7 +136,7 @@ function add_epd_visualization { function add_opf { if [ "$ADD_OPF" = true ] ; then - ng add @spartacus/opf@${SPARTACUS_VERSION} --opf-base-url ${OPF_BASE_URL} --commerce-cloud-public-key ${OPF_CLIENT_PUBLIC_KEY} --skip-confirmation --no-interactive + ng add @spartacus/opf@${SPARTACUS_VERSION} --opf-base-url ${OPF_BASE_URL} --commerce-cloud-public-key ${OPF_CLIENT_PUBLIC_KEY} --opf-google-pay-api-url ${OPF_QUICK_BUY_GOOGLE_PAY_RESOURCE_URL} --skip-confirmation --no-interactive fi }