From bb385ab0d26d531be3033a270604e19ad901920c Mon Sep 17 00:00:00 2001
From: Petrisor Frincu <petrisor.frincu@plentysystems.com>
Date: Mon, 9 Sep 2024 10:37:49 +0300
Subject: [PATCH 1/7] Implement googlepay payment method

---
 apps/web/assets/style.scss                    |   9 +
 .../web/components/PayPal/GooglePayButton.vue | 211 ++++++++++++++++++
 apps/web/components/PayPal/types.ts           |   6 +
 apps/web/composables/usePayPal/usePayPal.ts   |   2 +-
 apps/web/pages/checkout.vue                   |   4 +
 apps/web/tsconfig.json                        |   2 +-
 package.json                                  |   1 +
 yarn.lock                                     |   8 +
 8 files changed, 241 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/components/PayPal/GooglePayButton.vue

diff --git a/apps/web/assets/style.scss b/apps/web/assets/style.scss
index f54ea1f0b..087ea7cf6 100644
--- a/apps/web/assets/style.scss
+++ b/apps/web/assets/style.scss
@@ -57,3 +57,12 @@ apple-pay-button {
   --apple-pay-button-border-radius: 7px;
   --apple-pay-button-box-sizing: border-box;
 }
+
+#google-pay-button {
+  div {
+    button {
+      width: 100% !important;
+      display: block;
+    }
+  }
+}
diff --git a/apps/web/components/PayPal/GooglePayButton.vue b/apps/web/components/PayPal/GooglePayButton.vue
new file mode 100644
index 000000000..f4c8ca483
--- /dev/null
+++ b/apps/web/components/PayPal/GooglePayButton.vue
@@ -0,0 +1,211 @@
+<template>
+  <div class="flex items-center justify-center w-full my-2" v-if="isGooglePayLoaded">
+    <div class="border-t-2 flex-grow"></div>
+    <p class="px-2 text-sm uppercase text-gray-400">{{ $t('or') }}</p>
+    <div class="border-t-2 flex-grow"></div>
+  </div>
+  <div id="google-pay-button"></div>
+</template>
+
+<script lang="ts" setup>
+import { PayPalAddToCartCallback } from '~/components/PayPal/types';
+import { cartGetters, orderGetters } from '@plentymarkets/shop-api';
+
+let isGooglePayLoaded = false;
+let countryCodeString = 'DE';
+const { loadScript, executeOrder, createTransaction, captureOrder } = usePayPal();
+const { shippingPrivacyAgreement } = useAdditionalInformation();
+const { createOrder } = useMakeOrder();
+const { data: cart, clearCartItems } = useCart();
+const currency = computed(() => cartGetters.getCurrency(cart.value) || (useAppConfig().fallbackCurrency as string));
+const paypal = await loadScript(currency.value);
+const localePath = useLocalePath();
+const emits = defineEmits<{
+  (event: 'button-clicked', callback: PayPalAddToCartCallback): Promise<void>;
+}>();
+const loadGooglePay = async () => {
+  return new Promise((resolve, reject) => {
+    const scriptElement = document.createElement('script');
+    scriptElement.src = 'https://pay.google.com/gp/p/js/pay.js';
+    scriptElement.type = 'text/javascript';
+    scriptElement.addEventListener('load', resolve);
+    // eslint-disable-next-line unicorn/prefer-add-event-listener
+    scriptElement.onerror = reject;
+    document.head.append(scriptElement);
+  });
+};
+
+let paymentsClient: google.payments.api.PaymentsClient | null = null,
+  googlepayConfig: any = null;
+
+async function getGooglePayConfig() {
+  if (googlepayConfig === null) {
+    googlepayConfig = await (paypal as any).Googlepay().config();
+  }
+  return googlepayConfig;
+}
+
+async function getGooglePaymentDataRequest() {
+  const {
+    allowedPaymentMethods,
+    merchantInfo,
+    apiVersion,
+    apiVersionMinor,
+    countryCode,
+    transactionInfo,
+    callbackIntents,
+  } = await getGooglePayConfig();
+  countryCodeString = countryCode;
+  const baseRequest = {
+    apiVersion,
+    apiVersionMinor,
+    allowedPaymentMethods,
+    transactionInfo,
+    merchantInfo,
+    callbackIntents,
+  };
+  const paymentDataRequest = Object.assign({}, baseRequest);
+  paymentDataRequest.allowedPaymentMethods = allowedPaymentMethods;
+  paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
+  paymentDataRequest.merchantInfo = merchantInfo;
+  paymentDataRequest.callbackIntents = ['PAYMENT_AUTHORIZATION'];
+  return paymentDataRequest;
+}
+
+function onPaymentAuthorized(paymentData: any): Promise<google.payments.api.PaymentAuthorizationResult> {
+  return new Promise<google.payments.api.PaymentAuthorizationResult>((resolve) => {
+    processPayment(paymentData)
+      // eslint-disable-next-line promise/always-return
+      .then(() => {
+        resolve({
+          transactionState: 'SUCCESS',
+        } as google.payments.api.PaymentAuthorizationResult);
+      })
+      .catch((error) => {
+        resolve({
+          transactionState: 'ERROR',
+          error: {
+            message: error.message,
+          },
+        } as google.payments.api.PaymentAuthorizationResult);
+      });
+  });
+}
+
+function getGooglePaymentsClient() {
+  if (paymentsClient === null) {
+    paymentsClient = new google.payments.api.PaymentsClient({
+      environment: 'TEST',
+      paymentDataCallbacks: {
+        onPaymentAuthorized: onPaymentAuthorized,
+      },
+    });
+  }
+  return paymentsClient;
+}
+
+async function onGooglePayLoaded() {
+  const paymentsClient = getGooglePaymentsClient();
+  const { allowedPaymentMethods, apiVersion, apiVersionMinor } = await getGooglePayConfig();
+  try {
+    const response = await paymentsClient.isReadyToPay({ allowedPaymentMethods, apiVersion, apiVersionMinor });
+    isGooglePayLoaded = response.result;
+    if (response.result) {
+      addGooglePayButton();
+    }
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+function addGooglePayButton() {
+  const paymentsClient = getGooglePaymentsClient();
+  const button = paymentsClient.createButton({
+    onClick: onGooglePaymentButtonClicked,
+  });
+  const theContainer = document.querySelector('#google-pay-button');
+  if (theContainer) {
+    theContainer.append(button);
+  }
+}
+
+function getGoogleTransactionInfo() {
+  return {
+    countryCode: countryCodeString,
+    currencyCode: currency.value,
+    totalPriceStatus: 'FINAL',
+    totalPrice: cartGetters.getTotals(cart.value).total.toString(),
+  };
+}
+
+async function onGooglePaymentButtonClicked() {
+  emits('button-clicked', async (successfully) => {
+    if (successfully) {
+      const paymentDataRequest = await getGooglePaymentDataRequest();
+      const paymentsClient = getGooglePaymentsClient();
+      paymentsClient.loadPaymentData(paymentDataRequest);
+    }
+  });
+}
+
+async function processPayment(paymentData: any) {
+  try {
+    const transaction = await createTransaction('paypal');
+    if (!transaction || !transaction.id) throw new Error('Transaction creation failed.');
+    const order = await createOrder({
+      paymentId: cart.value.methodOfPaymentId,
+      shippingPrivacyHintAccepted: shippingPrivacyAgreement.value,
+    });
+    if (!order || !order.order || !order.order.id) throw new Error('Order creation failed.');
+
+    const { status } = await (paypal as any).Googlepay().confirmOrder({
+      orderId: transaction.id,
+      token: paymentData.token,
+      paymentMethodData: paymentData.paymentMethodData,
+    });
+
+    if (status === 'PAYER_ACTION_REQUIRED') {
+      // eslint-disable-next-line promise/catch-or-return
+      (paypal as any)
+        .Googlepay()
+        .initiatePayerAction({ orderId: order.order.id })
+        // eslint-disable-next-line promise/always-return
+        .then(async (data: any) => {
+          await captureOrder({
+            paypalOrderId: data.paypalOrderId,
+            paypalPayerId: data.paypalPayerId,
+          });
+          await executeOrder({
+            mode: 'paypal',
+            plentyOrderId: Number.parseInt(orderGetters.getId(order)),
+            paypalTransactionId: data.orderID,
+          });
+        });
+    } else {
+      await executeOrder({
+        mode: 'paypal',
+        plentyOrderId: Number.parseInt(orderGetters.getId(order)),
+        paypalTransactionId: transaction.id,
+      });
+    }
+    clearCartItems();
+    navigateTo(localePath(paths.confirmation + '/' + order.order.id + '/' + order.order.accessKey));
+
+    return { transactionState: 'SUCCESS' };
+  } catch (error: any) {
+    return {
+      transactionState: 'ERROR',
+      error: {
+        message: error.message,
+      },
+    };
+  }
+}
+onMounted(async () => {
+  await loadGooglePay().then(() => {
+    if (google && (paypal as any).Googlepay) {
+      onGooglePayLoaded().catch(console.error);
+    }
+  });
+});
+</script>
diff --git a/apps/web/components/PayPal/types.ts b/apps/web/components/PayPal/types.ts
index c330fce1d..84e96dd64 100644
--- a/apps/web/components/PayPal/types.ts
+++ b/apps/web/components/PayPal/types.ts
@@ -126,3 +126,9 @@ export type ApplepayType = {
   validateMerchant(argument0: ValidateMerchantParams): Promise<ValidateMerchantResponse>;
   confirmOrder(argument0: ConfirmOrderParams): Promise<void>;
 };
+
+export type GooglepayType = {
+  config(): Promise<ConfigResponse>;
+  validateMerchant(argument0: ValidateMerchantParams): Promise<ValidateMerchantResponse>;
+  confirmOrder(argument0: ConfirmOrderParams): Promise<void>;
+};
diff --git a/apps/web/composables/usePayPal/usePayPal.ts b/apps/web/composables/usePayPal/usePayPal.ts
index 969a2a207..0ac292902 100644
--- a/apps/web/composables/usePayPal/usePayPal.ts
+++ b/apps/web/composables/usePayPal/usePayPal.ts
@@ -89,7 +89,7 @@ export const usePayPal: UsePayPalMethodsReturn = () => {
           currency: currency,
           dataPartnerAttributionId: 'Plenty_Cart_PWA_PPCP',
           components:
-            'applepay,messages,buttons,funding-eligibility,card-fields,payment-fields,marks&enable-funding=paylater',
+            'googlepay,applepay,messages,buttons,funding-eligibility,card-fields,payment-fields,marks&enable-funding=paylater',
           locale: localePayPal,
           commit: commit,
         });
diff --git a/apps/web/pages/checkout.vue b/apps/web/pages/checkout.vue
index e6a03f8a3..cbd5a9c82 100644
--- a/apps/web/pages/checkout.vue
+++ b/apps/web/pages/checkout.vue
@@ -94,6 +94,10 @@
               :style="createOrderLoading || disableShippingPayment || cartLoading ? 'pointer-events: none;' : ''"
               @button-clicked="validateTerms"
             />
+            <PayPalGooglePayButton
+              :style="createOrderLoading || disableShippingPayment || cartLoading ? 'pointer-events: none;' : ''"
+              @button-clicked="validateTerms"
+            />
           </OrderSummary>
         </div>
       </div>
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index 4508a56b4..9210f5fc2 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "extends": "./.nuxt/tsconfig.json",
   "compilerOptions": {
-    "types": ["vitest/globals", "@vite-pwa/nuxt", "@types/applepayjs"],
+    "types": ["vitest/globals", "@vite-pwa/nuxt", "@types/applepayjs", "@types/googlepay"],
     "verbatimModuleSyntax": false,
   },
   "exclude": ["node_modules", "mocks", "__tests__", "cypress.config.ts"],
diff --git a/package.json b/package.json
index 60a7772f4..a71b94203 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
   "dependencies": {
     "@plentymarkets/shop-api": "^0.58.0",
     "@types/applepayjs": "^14.0.8",
+    "@types/googlepay": "^0.7.6",
     "@vee-validate/nuxt": "^4.13.1",
     "@vee-validate/yup": "^4.13.1",
     "country-flag-icons": "^1.5.12",
diff --git a/yarn.lock b/yarn.lock
index fb5a2deda..dcf8f8816 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4447,6 +4447,7 @@ __metadata:
     "@paypal/paypal-js": 8.1.0
     "@plentymarkets/shop-api": ^0.58.0
     "@types/applepayjs": ^14.0.8
+    "@types/googlepay": ^0.7.6
     "@types/uuid": ^9.0.8
     "@vee-validate/nuxt": ^4.13.1
     "@vee-validate/yup": ^4.13.1
@@ -5295,6 +5296,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/googlepay@npm:^0.7.6":
+  version: 0.7.6
+  resolution: "@types/googlepay@npm:0.7.6"
+  checksum: 6874d432fbf0badb9af24911d6c8fa446ed91e63267b83a281da3a79f591fd3bbe85656c03859adfd6de21f8d0355acdc515ba810515569ccdd40d1c4c40cdab
+  languageName: node
+  linkType: hard
+
 "@types/hash-sum@npm:^1.0.2":
   version: 1.0.2
   resolution: "@types/hash-sum@npm:1.0.2"

From ab9cefbebec77fb284e11288c15d70942892de1c Mon Sep 17 00:00:00 2001
From: Petrisor Frincu <petrisor.frincu@plentysystems.com>
Date: Mon, 9 Sep 2024 10:39:15 +0300
Subject: [PATCH 2/7] Implement googlepay payment method

---
 docs/changelog/changelog_de.md | 1 +
 docs/changelog/changelog_en.md | 1 +
 2 files changed, 2 insertions(+)

diff --git a/docs/changelog/changelog_de.md b/docs/changelog/changelog_de.md
index 8c0b3b324..6bb2f0c39 100644
--- a/docs/changelog/changelog_de.md
+++ b/docs/changelog/changelog_de.md
@@ -28,6 +28,7 @@
 - Das Logo kann jetzt vom plentysystems-System geladen werden.
 - Die "Erneut kaufen"-Funktionalität unterstützt Artikeleigenschaften.
 - PayPal-Button für PS Lazyload
+- Googlepay payment method
 
 ### Geändert
 
diff --git a/docs/changelog/changelog_en.md b/docs/changelog/changelog_en.md
index 64812b78e..f0086a0c3 100644
--- a/docs/changelog/changelog_en.md
+++ b/docs/changelog/changelog_en.md
@@ -43,6 +43,7 @@
 - Changed font size of wishlist icon counter and cart icon counter.
 - Added the appropriate size for the cookie bar elements in order to pass the Google PSI.
 - Added label tags for inputs in `NewsletterSubscribe.vue` component.
+- Implement Googlepay payment method
 
 ### 🩹 Fixed
 

From ef70e61b86ed598cf154d6d1bb6ecf4f339f49a0 Mon Sep 17 00:00:00 2001
From: Petrisor Frincu <petrisor.frincu@plentysystems.com>
Date: Wed, 11 Sep 2024 08:51:15 +0300
Subject: [PATCH 3/7] Implement googlepay payment method

---
 apps/web/components/PayPal/GooglePayButton.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/web/components/PayPal/GooglePayButton.vue b/apps/web/components/PayPal/GooglePayButton.vue
index f4c8ca483..116818a7c 100644
--- a/apps/web/components/PayPal/GooglePayButton.vue
+++ b/apps/web/components/PayPal/GooglePayButton.vue
@@ -205,6 +205,7 @@ onMounted(async () => {
   await loadGooglePay().then(() => {
     if (google && (paypal as any).Googlepay) {
       onGooglePayLoaded().catch(console.error);
+      return null;
     }
   });
 });

From 93495498251323e6fe946d6065cec345b43a3bb4 Mon Sep 17 00:00:00 2001
From: Petrisor Frincu <petrisor.frincu@plentysystems.com>
Date: Wed, 11 Sep 2024 08:57:10 +0300
Subject: [PATCH 4/7] Implement googlepay payment method

---
 apps/web/components/PayPal/GooglePayButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/components/PayPal/GooglePayButton.vue b/apps/web/components/PayPal/GooglePayButton.vue
index 116818a7c..a1fd88899 100644
--- a/apps/web/components/PayPal/GooglePayButton.vue
+++ b/apps/web/components/PayPal/GooglePayButton.vue
@@ -205,8 +205,8 @@ onMounted(async () => {
   await loadGooglePay().then(() => {
     if (google && (paypal as any).Googlepay) {
       onGooglePayLoaded().catch(console.error);
-      return null;
     }
+    return null;
   });
 });
 </script>

From f83e060c29682babeadaa15a00e2f9c24aea2fd0 Mon Sep 17 00:00:00 2001
From: Petrisor Frincu <petrisor.frincu@plentysystems.com>
Date: Wed, 11 Sep 2024 14:07:05 +0300
Subject: [PATCH 5/7] Implement googlepay payment method

---
 apps/web/components/PayPal/GooglePayButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/components/PayPal/GooglePayButton.vue b/apps/web/components/PayPal/GooglePayButton.vue
index a1fd88899..75e82e858 100644
--- a/apps/web/components/PayPal/GooglePayButton.vue
+++ b/apps/web/components/PayPal/GooglePayButton.vue
@@ -11,7 +11,7 @@
 import { PayPalAddToCartCallback } from '~/components/PayPal/types';
 import { cartGetters, orderGetters } from '@plentymarkets/shop-api';
 
-let isGooglePayLoaded = false;
+let isGooglePayLoaded = true;
 let countryCodeString = 'DE';
 const { loadScript, executeOrder, createTransaction, captureOrder } = usePayPal();
 const { shippingPrivacyAgreement } = useAdditionalInformation();

From 082499139f5687852657b72836d3d69eeb155d06 Mon Sep 17 00:00:00 2001
From: Petrisor Frincu <petrisor.frincu@plentysystems.com>
Date: Tue, 17 Sep 2024 10:31:51 +0300
Subject: [PATCH 6/7] Implement googlepay payment method

---
 apps/web/components/PayPal/GooglePayButton.vue | 16 +++++++++-------
 apps/web/components/PayPal/types.ts            |  6 ++++++
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/apps/web/components/PayPal/GooglePayButton.vue b/apps/web/components/PayPal/GooglePayButton.vue
index 75e82e858..0b1a18a6c 100644
--- a/apps/web/components/PayPal/GooglePayButton.vue
+++ b/apps/web/components/PayPal/GooglePayButton.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script lang="ts" setup>
-import { PayPalAddToCartCallback } from '~/components/PayPal/types';
+import { GooglePayPayerActionData, PayPalAddToCartCallback } from '~/components/PayPal/types';
 import { cartGetters, orderGetters } from '@plentymarkets/shop-api';
 
 let isGooglePayLoaded = true;
-let countryCodeString = 'DE';
+let countryCodeString = '';
 const { loadScript, executeOrder, createTransaction, captureOrder } = usePayPal();
 const { shippingPrivacyAgreement } = useAdditionalInformation();
 const { createOrder } = useMakeOrder();
@@ -72,7 +72,9 @@ async function getGooglePaymentDataRequest() {
   return paymentDataRequest;
 }
 
-function onPaymentAuthorized(paymentData: any): Promise<google.payments.api.PaymentAuthorizationResult> {
+function onPaymentAuthorized(
+  paymentData: google.payments.api.PaymentData,
+): Promise<google.payments.api.PaymentAuthorizationResult> {
   return new Promise<google.payments.api.PaymentAuthorizationResult>((resolve) => {
     processPayment(paymentData)
       // eslint-disable-next-line promise/always-return
@@ -148,7 +150,7 @@ async function onGooglePaymentButtonClicked() {
   });
 }
 
-async function processPayment(paymentData: any) {
+async function processPayment(paymentData: google.payments.api.PaymentData) {
   try {
     const transaction = await createTransaction('paypal');
     if (!transaction || !transaction.id) throw new Error('Transaction creation failed.');
@@ -170,7 +172,7 @@ async function processPayment(paymentData: any) {
         .Googlepay()
         .initiatePayerAction({ orderId: order.order.id })
         // eslint-disable-next-line promise/always-return
-        .then(async (data: any) => {
+        .then(async (data: GooglePayPayerActionData) => {
           await captureOrder({
             paypalOrderId: data.paypalOrderId,
             paypalPayerId: data.paypalPayerId,
@@ -192,11 +194,11 @@ async function processPayment(paymentData: any) {
     navigateTo(localePath(paths.confirmation + '/' + order.order.id + '/' + order.order.accessKey));
 
     return { transactionState: 'SUCCESS' };
-  } catch (error: any) {
+  } catch (error: unknown) {
     return {
       transactionState: 'ERROR',
       error: {
-        message: error.message,
+        message: error,
       },
     };
   }
diff --git a/apps/web/components/PayPal/types.ts b/apps/web/components/PayPal/types.ts
index 84e96dd64..0497b332c 100644
--- a/apps/web/components/PayPal/types.ts
+++ b/apps/web/components/PayPal/types.ts
@@ -121,6 +121,12 @@ export type ValidateMerchantResponse = {
   paypalDebugId: null | string;
 };
 
+export type GooglePayPayerActionData = {
+  paypalOrderId: string;
+  paypalPayerId: string;
+  orderID: string;
+};
+
 export type ApplepayType = {
   config(): Promise<ConfigResponse>;
   validateMerchant(argument0: ValidateMerchantParams): Promise<ValidateMerchantResponse>;

From 2f7bac8bb794b71b6d414b525064d8531f806c13 Mon Sep 17 00:00:00 2001
From: Petrisor Frincu <petrisor.frincu@plentysystems.com>
Date: Tue, 17 Sep 2024 10:35:04 +0300
Subject: [PATCH 7/7] Implement googlepay payment method

---
 apps/web/components/PayPal/GooglePayButton.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/web/components/PayPal/GooglePayButton.vue b/apps/web/components/PayPal/GooglePayButton.vue
index 0b1a18a6c..60183b194 100644
--- a/apps/web/components/PayPal/GooglePayButton.vue
+++ b/apps/web/components/PayPal/GooglePayButton.vue
@@ -162,7 +162,6 @@ async function processPayment(paymentData: google.payments.api.PaymentData) {
 
     const { status } = await (paypal as any).Googlepay().confirmOrder({
       orderId: transaction.id,
-      token: paymentData.token,
       paymentMethodData: paymentData.paymentMethodData,
     });