Hyva Checkout 1.3.0+ Compatibility (CSP Support) (#174)

* Additional constraints required as part of 1.3.0> Hyva Checkout

* Make module compatible with Hyva and Alpine CSP

* Update E2E workflow to support Hyva's latest version requirements

* Fixes@

Author: aashwin-rvvup

.github/workflows/e2e.yaml

@@ -18,14 +18,12 @@ jobs:
       fail-fast: false
       matrix:
         include:
-          - MAGENTO_VERSION: 2.4.5
-            HYVA_CHECKOUT_VERSION: 1.1.29
-          - MAGENTO_VERSION: 2.4.6
-            HYVA_CHECKOUT_VERSION: 1.1.29
           - MAGENTO_VERSION: 2.4.7
             HYVA_CHECKOUT_VERSION: 1.1.29
           - MAGENTO_VERSION: 2.4.7
             HYVA_CHECKOUT_VERSION: 1.2.0
+          - MAGENTO_VERSION: 2.4.7
+            HYVA_CHECKOUT_VERSION: ^1.3.0
 
     env:
       MAGENTO_VERSION: ${{ matrix.MAGENTO_VERSION }}

Test/End-2-End/Pages/VisitCheckoutPayment.js

@@ -1,6 +1,6 @@
-import {expect} from "@playwright/test";
+import { expect } from "@playwright/test";
 import Cart from "../Components/Cart";
-import {v7 as uuidv7} from 'uuid';
+import { v7 as uuidv7 } from "uuid";
 
 export default class VisitCheckoutPayment {
   constructor(page) {
@@ -14,7 +14,7 @@ export default class VisitCheckoutPayment {
 
     await this.page
       .getByLabel("Email address", { exact: true })
-        .fill(uuidv7() + "@example.com");
+      .fill(uuidv7() + "@example.com");
     await this.page.getByLabel("First name").fill("John");
     await this.page.getByLabel("Last name").fill("Doe");
     await this.page.getByLabel("Street address").fill("123 Main St");

Test/End-2-End/clearpay.spec.js

@@ -1,7 +1,7 @@
-import {expect, test} from "@playwright/test";
+import { expect, test } from "@playwright/test";
 import VisitCheckoutPayment from "./Pages/VisitCheckoutPayment";
 import Cart from "./Components/Cart";
-import {v7 as uuidv7} from 'uuid';
+import { v7 as uuidv7 } from "uuid";
 // This test is quite far, but the Clearpay modal is quite a bit flakey. It sometimes works, sometimes doesn't.
 test.skip("Can place an order", async ({ page, browser }) => {
   const visitCheckoutPayment = new VisitCheckoutPayment(page);
@@ -23,7 +23,7 @@ test.skip("Can place an order", async ({ page, browser }) => {
 
   await frame
     .getByLabel("Email or mobile number")
-      .fill(uuidv7() + "@example.com");
+    .fill(uuidv7() + "@example.com");
   await frame.getByRole("button", { name: "Continue" }).click();
 
   await frame

Test/End-2-End/pay_by_bank.spec.js

@@ -31,8 +31,9 @@ test("Can place an order using pay by bank", async ({ page, browser }) => {
   );
 });
 
-
-test("Prevent close is handled on bank selection screen and can only be closed by pressing 'x'", async ({page}) => {
+test("Prevent close is handled on bank selection screen and can only be closed by pressing 'x'", async ({
+  page,
+}) => {
   const visitCheckoutPayment = new VisitCheckoutPayment(page);
   await visitCheckoutPayment.visit();
 
@@ -41,7 +42,7 @@ test("Prevent close is handled on bank selection screen and can only be closed b
    * failure to open popup modal
    */
   await page.waitForTimeout(3000);
-  await page.getByRole("button", {name: "Place order"}).click();
+  await page.getByRole("button", { name: "Place order" }).click();
 
   const frame = page.frameLocator("iframe.rvvup-modal");
   await expect(frame.getByLabel("Mock Bank")).toBeVisible();

Test/End-2-End/paypal.spec.js

@@ -71,7 +71,9 @@ test("Can place an order from the product page using PayPal", async ({
     "You are currently paying with PayPal. If you want to cancel this process",
   );
 
-  const children = await page.$$("#payment-methods ol > li, #payment-method-list > div");
+  const children = await page.$$(
+    "#payment-methods ol > li, #payment-method-list > div",
+  );
   await expect(children.length).toBe(1);
 
   await page.getByRole("button", { name: "Place order" }).click();

docker/scripts/configure-hyva.sh

@@ -11,6 +11,7 @@ composer config repositories.hyva-themes/magento2-email-module git git@gitlab.hy
 composer config repositories.hyva-themes/magento2-default-theme git git@gitlab.hyva.io:hyva-themes/magento2-default-theme.git
 composer config repositories.hyva-themes/magento2-compat-module-fallback git git@gitlab.hyva.io:hyva-themes/magento2-compat-module-fallback.git
 composer config repositories.hyva-themes/magento2-order-cancellation-webapi git git@gitlab.hyva.io:hyva-themes/magento2-order-cancellation-webapi.git
+composer config repositories.hyva-themes/magento2-mollie-theme-bundle git git@gitlab.hyva.io:hyva-themes/hyva-compat/magento2-mollie-theme-bundle.git
 composer config repositories.hyva-themes/hyva-checkout git git@gitlab.hyva.io:hyva-checkout/checkout.git
 if [ "$HYVA_CHECKOUT_VERSION" == "latest" ] || [ -z "$HYVA_CHECKOUT_VERSION" ]; then
     composer require --prefer-source hyva-themes/magento2-default-theme hyva-themes/magento2-hyva-checkout

src/view/frontend/templates/cart/paypal.phtml

@@ -3,6 +3,7 @@
  * @var \Magento\Framework\Escaper $escaper
  * @var \Rvvup\PaymentsHyvaCheckout\Block\Paypal $block
  * @var \Rvvup\Payments\ViewModel\PayPal $paypalViewModel
+ * @var Hyva\Theme\ViewModel\HyvaCsp $hyvaCsp
  */
 $paypalViewModel = $block->getData('rvvup_payments_paypal_view_model');
 
@@ -20,8 +21,8 @@ if ($paypalViewModel === null ||
 ?>
 
 <div class="rvvup-paypal-express grow z-0"
-     x-data="rvvupPayPalExpressButton()"
-     x-init="initRvvup()"
+     x-data="rvvupPayPalExpressButton"
+     x-init="initRvvup"
      wire:ignore>
     <div class="<?= $block->getNameInLayout() ?>-container"></div>
 </div>
@@ -181,4 +182,6 @@ if ($paypalViewModel === null ||
             },
         }
     }
+    window.addEventListener('alpine:init', () => Alpine.data('rvvupPayPalExpressButton', rvvupPayPalExpressButton), {once: true});
 </script>
+<?php $hyvaCsp->registerInlineScript() ?>

src/view/frontend/templates/component/messaging/error.phtml

@@ -7,6 +7,7 @@ use Rvvup\PaymentsHyvaCheckout\Block\Checkout\Messaging;
 
 /** @var Messaging $block */
 /** @var Escaper $escaper */
+/** @var Hyva\Theme\ViewModel\HyvaCsp $hyvaCsp */
 
 $error = $block->getRvvupError();
 ?>
@@ -22,6 +23,7 @@ $error = $block->getRvvupError();
             ]);
         });
     </script>
+<?php $hyvaCsp->registerInlineScript() ?>
 <?php endif; ?>
 
 <script>
@@ -38,3 +40,4 @@ $error = $block->getRvvupError();
         }
     });
 </script>
+<?php $hyvaCsp->registerInlineScript() ?>

src/view/frontend/templates/component/payment/apple-pay-hosted-processor.phtml

@@ -6,6 +6,7 @@ use Magento\Framework\View\Element\Template;
 
 /** @var Template $block */
 /** @var Escaper $escaper */
+/** @var Hyva\Theme\ViewModel\HyvaCsp $hyvaCsp */
 ?>
 <div wire:ignore>
     <style>
@@ -44,4 +45,5 @@ use Magento\Framework\View\Element\Template;
             }
         })();
     </script>
+<?php $hyvaCsp->registerInlineScript() ?>
 </div>

src/view/frontend/templates/component/payment/apple-pay-inline-processor.phtml

@@ -7,6 +7,7 @@ use Magento\Framework\View\Element\Template;
 /** @var Template $block */
 /** @var Escaper $escaper */
 /** @var \Rvvup\PaymentsHyvaCheckout\Magewire\Checkout\Payment\ApplePayProcessor $magewire */
+/** @var Hyva\Theme\ViewModel\HyvaCsp $hyvaCsp */
 ?>
 <div id="rvvup-apple-pay-inline" data-quoteamount="<?php echo $magewire->quoteAmount; ?>" data-quotecurrency="<?php echo $magewire->quoteCurrency; ?>">
     <style>
@@ -129,4 +130,5 @@ use Magento\Framework\View\Element\Template;
             });
         })();
     </script>
+<?php $hyvaCsp->registerInlineScript() ?>
 </div>