fix: paypal button rendering on checkout

plentymarkets · Nov 18, 2024 · a48959c · a48959c
1 parent 9554dec
commit a48959c
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 30 deletions.
diff --git a/apps/web/__tests__/support/pageObjects/CheckoutPageObject.ts b/apps/web/__tests__/support/pageObjects/CheckoutPageObject.ts
@@ -224,6 +224,13 @@ export class CheckoutPageObject extends PageObject {
     return this;
   }
 
+  checkPayPal() {
+    cy.intercept('/plentysystems/setPaymentProvider').as('setPaymentProvider');
+    cy.getByTestId('payment-method-6001').check({ force: true });
+    cy.wait('@setPaymentProvider');
+    return this;
+  }
+
   fillAddressForm() {
     cy.getFixture('addressForm').then((fixture) => {
       this.fillForm(fixture);
@@ -243,4 +250,8 @@ export class CheckoutPageObject extends PageObject {
     this.saveShipping.click({ force: true });
     return this;
   }
+
+  get payPalButton() {
+    return cy.get('.paypal-buttons-context-iframe').first();
+  }
 }
diff --git a/apps/web/__tests__/test/feature/paypalButtons.cy.ts b/apps/web/__tests__/test/feature/paypalButtons.cy.ts
@@ -0,0 +1,41 @@
+import { CartPageObject } from '../../support/pageObjects/CartPageObject';
+import { CheckoutPageObject } from '../../support/pageObjects/CheckoutPageObject';
+import { HomePageObject } from '../../support/pageObjects/HomePageObject';
+import { ProductListPageObject } from '../../support/pageObjects/ProductListPageObject';
+import { paths } from '../../../utils/paths';
+import { MyAccountPageObject } from '../../support/pageObjects/MyAccountPageObject';
+
+const checkout = new CheckoutPageObject();
+const cart = new CartPageObject();
+const homePage = new HomePageObject();
+const productListPage = new ProductListPageObject();
+const myAccount: MyAccountPageObject = new MyAccountPageObject();
+
+beforeEach(() => {
+  cy.clearCookies();
+  cy.setCookie('vsf-locale', 'en');
+  cy.setCookie('consent-cookie', '{"Essentials":{"Session":true,"Consent":true,"Session2":true},"External Media":{"Session":false,"Consent":false,"Session2":false},"Functional":{"Session":false,"Consent":false,"Session2":false},"Marketing":{"Session":false,"Consent":false,"Session2":false}}');
+  cy.visitAndHydrate(paths.home);
+});
+
+describe('Feature: PayPal button rendering', () => {
+  it('[smoke] Render PayPal button on checkout after refresh', () => {
+    cy.intercept('/plentysystems/doLogin').as('doLogin');
+    cy.intercept('/plentysystems/getPaymentProviders').as('getPaymentProviders');
+
+    cy.visitAndHydrate(paths.authLogin);
+    myAccount.successLogin();
+
+    cy.wait('@doLogin').visitAndHydrate(paths.home);
+
+    homePage.goToCategory();
+    productListPage.addToCart();
+    cart.openCart();
+    checkout.goToCheckout().checkPayPal();
+
+    cy.reload();
+    cy.wait('@getPaymentProviders');
+
+    checkout.payPalButton.should("exist");
+  });
+});
diff --git a/apps/web/components/OrderSummary/OrderSummary.vue b/apps/web/components/OrderSummary/OrderSummary.vue
@@ -65,7 +65,7 @@
         <h2 data-testid="total-label">{{ t('total') }}</h2>
         <h2 data-testid="total">{{ n(totals.total, 'currency') }}</h2>
       </div>
-      <UiDivider class="w-auto" />
+      <UiDivider class="w-auto mb-4" />
       <slot />
     </div>
   </div>

diff --git a/apps/web/composables/useApplePay/useApplePay.ts b/apps/web/composables/useApplePay/useApplePay.ts
@@ -30,7 +30,7 @@ export const useApplePay = () => {
     const { data: cart } = useCart();
     const currency = computed(() => cartGetters.getCurrency(cart.value) || (useAppConfig().fallbackCurrency as string));
     const { getScript } = usePayPal();
-    const script = await getScript(currency.value);
+    const script = await getScript(currency.value, true);
 
     if (!script) return false;
 
@@ -147,20 +147,24 @@ export const useApplePay = () => {
   };
 
   const checkIsEligible = async () => {
-    if (
-      (await initialize()) &&
-      typeof ApplePaySession !== 'undefined' &&
-      state.value.script &&
-      ApplePaySession &&
-      ApplePaySession.canMakePayments() &&
-      state.value.config.isEligible
-    ) {
-      await useSdk().plentysystems.doHandleAllowPaymentApplePay({
-        canMakePayments: true,
-      });
-      return true;
+    try {
+      if (
+        (await initialize()) &&
+        typeof ApplePaySession !== 'undefined' &&
+        state.value.script &&
+        ApplePaySession &&
+        ApplePaySession.canMakePayments() &&
+        state.value.config.isEligible
+      ) {
+        await useSdk().plentysystems.doHandleAllowPaymentApplePay({
+          canMakePayments: true,
+        });
+        return true;
+      }
+      return false;
+    } catch {
+      return false;
     }
-    return false;
   };
 
   return {

diff --git a/apps/web/composables/useGooglePay/useGooglePay.ts b/apps/web/composables/useGooglePay/useGooglePay.ts
@@ -33,7 +33,7 @@ export const useGooglePay = () => {
     const { data: cart } = useCart();
     const currency = computed(() => cartGetters.getCurrency(cart.value) || (useAppConfig().fallbackCurrency as string));
     const { getScript } = usePayPal();
-    const script = await getScript(currency.value);
+    const script = await getScript(currency.value, true);
 
     if (!script) return false;
 
@@ -153,20 +153,24 @@ export const useGooglePay = () => {
   };
 
   const checkIsEligible = async () => {
-    if (await initialize()) {
-      const request = getIsReadyToPayRequest();
-      const response = await toRaw(state.value.paymentsClient).isReadyToPay(request);
-
-      if (response.result) {
-        await useSdk().plentysystems.doHandleAllowPaymentGooglePay({
-          allowedPaymentMethods: toRaw(
-            state.value.googleConfig.allowedPaymentMethods,
-          ) as PayPalGooglePayAllowedPaymentMethod[],
-        });
-        return true;
+    try {
+      if (await initialize()) {
+        const request = getIsReadyToPayRequest();
+        const response = await toRaw(state.value.paymentsClient).isReadyToPay(request);
+
+        if (response.result) {
+          await useSdk().plentysystems.doHandleAllowPaymentGooglePay({
+            allowedPaymentMethods: toRaw(
+              state.value.googleConfig.allowedPaymentMethods,
+            ) as PayPalGooglePayAllowedPaymentMethod[],
+          });
+          return true;
+        }
       }
+      return false;
+    } catch {
+      return false;
     }
-    return false;
   };
 
   return {

diff --git a/apps/web/pages/checkout.vue b/apps/web/pages/checkout.vue
@@ -43,7 +43,7 @@
           <SfLoaderCircular v-if="cartLoading" class="absolute top-[130px] right-0 left-0 m-auto z-[999]" size="2xl" />
           <Coupon />
           <OrderSummary v-if="cart" :cart="cart" class="mt-4">
-            <client-only v-if="selectedPaymentId === paypalPaymentId">
+            <div v-if="selectedPaymentId === paypalPaymentId">
               <PayPalExpressButton
                 :disabled="!termsAccepted || disableBuyButton"
                 @validation-callback="handleReadyToBuy"
@@ -54,7 +54,7 @@
                 :amount="cartGetters.getTotal(cartGetters.getTotals(cart))"
                 :commit="true"
               />
-            </client-only>
+            </div>
             <UiButton
               v-else-if="selectedPaymentId === paypalCreditCardPaymentId"
               type="submit"