From 8775364a89507d778810639ce1d24d06345b701b Mon Sep 17 00:00:00 2001
From: "e.kireev" <e.kireev@xsolla.com>
Date: Tue, 2 Apr 2024 21:26:02 +0300
Subject: [PATCH] fix(PAYMENTS-18786) google pay, payment methods

---
 .../pages/google-pay/google-pay-button-color.type.ts |  1 +
 .../pages/google-pay/google-pay-button.component.ts  |  8 +++++++-
 .../payment-methods-attributes.enum.ts               |  1 +
 .../payment-methods/payment-methods.component.ts     | 12 ++++++++++--
 4 files changed, 19 insertions(+), 3 deletions(-)
 create mode 100644 src/features/headless-checkout/web-components/pages/google-pay/google-pay-button-color.type.ts

diff --git a/src/features/headless-checkout/web-components/pages/google-pay/google-pay-button-color.type.ts b/src/features/headless-checkout/web-components/pages/google-pay/google-pay-button-color.type.ts
new file mode 100644
index 0000000..ed03e02
--- /dev/null
+++ b/src/features/headless-checkout/web-components/pages/google-pay/google-pay-button-color.type.ts
@@ -0,0 +1 @@
+export type GooglePayButtonColorType = 'default' | 'white' | 'black';
diff --git a/src/features/headless-checkout/web-components/pages/google-pay/google-pay-button.component.ts b/src/features/headless-checkout/web-components/pages/google-pay/google-pay-button.component.ts
index 138987a..996f035 100644
--- a/src/features/headless-checkout/web-components/pages/google-pay/google-pay-button.component.ts
+++ b/src/features/headless-checkout/web-components/pages/google-pay/google-pay-button.component.ts
@@ -1,14 +1,20 @@
 import { SecureComponentAbstract } from '../../../../../core/web-components/secure-component/secure-component.abstract';
 import { headlessCheckoutAppUrl } from '../../../environment';
+import { GooglePayButtonColorType } from './google-pay-button-color.type';
 
 export class GooglePayButtonComponent extends SecureComponentAbstract {
   protected componentName = 'pages/google-pay-button';
+  private buttonColor: GooglePayButtonColorType = 'default';
+
+  public setButtonColor(color: GooglePayButtonColorType): void {
+    this.buttonColor = color;
+  }
 
   protected getHtml(): string {
     return this.getSecureHtml();
   }
 
   protected getSecureHtml(): string {
-    return `<iframe allow='payment' src='${headlessCheckoutAppUrl}/secure-components/${this.componentName}'></iframe>`;
+    return `<iframe allow='payment' src='${headlessCheckoutAppUrl}/secure-components/${this.componentName}?buttonColor=${this.buttonColor}'></iframe>`;
   }
 }
diff --git a/src/features/headless-checkout/web-components/payment-methods/payment-methods-attributes.enum.ts b/src/features/headless-checkout/web-components/payment-methods/payment-methods-attributes.enum.ts
index 24bd949..712795e 100644
--- a/src/features/headless-checkout/web-components/payment-methods/payment-methods-attributes.enum.ts
+++ b/src/features/headless-checkout/web-components/payment-methods/payment-methods-attributes.enum.ts
@@ -1,5 +1,6 @@
 export enum PaymentMethodsAttributes {
   country = 'country',
+  skipPaymentMethodsCount = 'skipPaymentMethodsCount',
   notFound = 'not-found',
   searchPlaceholder = 'search-placeholder',
   saveMethodMode = 'save-method-mode',
diff --git a/src/features/headless-checkout/web-components/payment-methods/payment-methods.component.ts b/src/features/headless-checkout/web-components/payment-methods/payment-methods.component.ts
index 818d4c7..041e28d 100644
--- a/src/features/headless-checkout/web-components/payment-methods/payment-methods.component.ts
+++ b/src/features/headless-checkout/web-components/payment-methods/payment-methods.component.ts
@@ -41,7 +41,10 @@ export class PaymentMethodsComponent extends WebComponentAbstract {
   }
 
   public static get observedAttributes(): string[] {
-    return [PaymentMethodsAttributes.country];
+    return [
+      PaymentMethodsAttributes.country,
+      PaymentMethodsAttributes.skipPaymentMethodsCount,
+    ];
   }
 
   protected connectedCallback(): void {
@@ -78,6 +81,7 @@ export class PaymentMethodsComponent extends WebComponentAbstract {
   private loadRegularMethods(): void {
     const country =
       this.getAttribute(PaymentMethodsAttributes.country) ?? undefined;
+
     void this.headlessCheckout
       .getRegularMethods({ country, isSaveMethodMode: this.isSaveMethodMode })
       .then(this.paymentMethodsLoadedHandler);
@@ -86,7 +90,11 @@ export class PaymentMethodsComponent extends WebComponentAbstract {
   private readonly paymentMethodsLoadedHandler = (
     paymentMethods: PaymentMethod[],
   ): void => {
-    this.paymentMethods = paymentMethods;
+    const skipPaymentMethodsCount = Number(
+      this.getAttribute(PaymentMethodsAttributes.skipPaymentMethodsCount),
+    );
+
+    this.paymentMethods = paymentMethods.slice(skipPaymentMethodsCount);
     this.visibleMethods = this.paymentMethods;
     this.filteredMethods = this.visibleMethods.slice();