feat: add OPF integration

[Matejk00]

No description provided.

[cla-assistant]

All committers have signed the CLA.

[Platonn]

[MEDIUM]

If possible, let's not mix static and reactive programming Here we're making a side-effect of setting a static property this.activeCartId in the Observable flow, and later in this flow we read the value from the static property.
Mixing static and reactive programming is harder to reason about and also prone to issues in async edge cases.

1. I suggest to remove the property protected activeCartId, as not necessary.

2. Then we can simply pass the cartId to the method this.setPaymentInitiationConfig(), e.g. as a first argument:

Suggested change

	switchMap(([userId, cartId]: [string, string]) => {
	this.activeCartId = cartId;
	return this.cartAccessCodeService.getCartAccessCode(userId, cartId);
	}),
	filter((response) => Boolean(response?.accessCode)),
	map(({ accessCode: otpKey }) =>
	this.setPaymentInitiationConfig(otpKey, paymentOptionId)
	),
	switchMap(([userId, cartId]: [string, string]) =>
	this.cartAccessCodeService.getCartAccessCode(userId, cartId).pipe(
	filter((response) => Boolean(response?.accessCode)),
	map(({ accessCode: otpKey }) =>
	this.setPaymentInitiationConfig(cartId, otpKey, paymentOptionId)
	)
	)
	),

    protected setPaymentInitiationConfig(
+     cartId: string,
      otpKey: string,
      paymentOptionId: number
    ) {
      return {
        otpKey,
        config: {
          configurationId: String(paymentOptionId),
-         cartId: this.activeCartId,
+         cartId

[Platonn]

[MAJOR]

JS of this component (and its indirect dependencies like OpfPaymentVerificationService and OpfResourceLoaderService) is now eagerly loaded in main.js on every page. It unnecessarily slows down the load of SEO-critical pages like homepage, PDP, PLP.

Note: it happens only when the OPF feature is installed by the customer.

Instead, I suggest to move out as much a spossible of the logic of this component to a lazy-loadable service/facade. Thanks to that, only the component's definition (and a tiny HTML template) will be loaded in main.js, but the actual logic of this component (and its indirect dependencies) will be lazy-loaded only when entering the payment-verification page.

[Platonn]

[MEDIUM]

According to our Coding Guidelines, in newly written source code, let's use inject() function instead of constructors for Dependency Injection.

You might find this automated conversion tool useful: https://ngxtension.netlify.app/utilities/migrations/inject-migration/