elpaypg 2.1.1 → 2.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elpaypg",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "description": "ELPAY PG - single-backend payment gateway module",
   "type": "module",
   "main": "./src/index.js",

package/public/css/checkout.css

@@ -2694,6 +2694,47 @@
       }
     }
 
+    /* --- RUNTIME RESPONSIVE GUARD ---
+       checkout.html measures the real rendered width of .ypg-wrapper and toggles
+       ypg-layout-compact / ypg-layout-single on <body>. These rules therefore win
+       over any media query and guarantee the QR/payment workspace is never squeezed
+       into an unusable sliver, no matter how the checkout is embedded. */
+    body.ypg-layout-compact .ypg-pc-sidebar {
+      display: none !important;
+    }
+
+    body.ypg-layout-compact .ypg-pc-methods-list {
+      width: 190px !important;
+      min-width: 190px !important;
+      max-width: 190px !important;
+      flex-shrink: 0 !important;
+    }
+
+    body.ypg-layout-compact .ypg-pc-active-view {
+      padding: 14px 18px !important;
+    }
+
+    /* Below ~900px the methods rail itself becomes the problem, so collapse it and
+       fall back to the tabbed method selector. */
+    body.ypg-layout-single .ypg-pc-methods-list {
+      display: none !important;
+    }
+
+    body.ypg-layout-single .ypg-pc-active-view {
+      width: 100% !important;
+      padding: 12px 14px !important;
+    }
+
+    body.ypg-layout-single .ypg-method-selector-bar {
+      display: flex !important;
+    }
+
+    body.ypg-layout-single .ypg-qr-card-container {
+      flex-wrap: wrap !important;
+      justify-content: center !important;
+      gap: 12px !important;
+    }
+
     /* NARROW DESKTOP (iframe width 768-1099px)
        The branding sidebar (310px) + methods rail (220px) together eat 530px of a
        ~900px modal, leaving too little for the QR workspace, which then gets clipped
@@ -3090,4 +3131,4 @@
         max-width: 170px !important;
         max-height: 170px !important;
       }
-    }
+    }

package/public/elpay-checkout.js

@@ -704,9 +704,9 @@
         /* DESKTOP / PC MODAL STYLES (Razorpay 2-Column Exact Layout) */
         @media (min-width: 768px) {
           .elpay-checkout-container {
-            width: 900px;
+            width: 960px;
             max-width: 95vw;
-            height: 600px;
+            height: 620px;
             max-height: 92vh;
             border-radius: 16px;
             box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
@@ -716,6 +716,15 @@
           }
         }
 
+        /* Large desktop: give the branding sidebar room so the QR workspace keeps
+           full width. Below this breakpoint the checkout hides the sidebar instead. */
+        @media (min-width: 1200px) {
+          .elpay-checkout-container {
+            width: 1100px;
+            height: 660px;
+          }
+        }
+
         /* MOBILE BOTTOM DRAWER / BOTTOM SHEET STYLES */
         @media (max-width: 767px) {
           .elpay-checkout-backdrop {

package/public/views/checkout.html

@@ -5,10 +5,10 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <title>{{MERCHANT_NAME}} · {{APP_NAME}} Checkout</title>
-  <link rel="stylesheet" href="/css/checkout.css">
+  <link rel="stylesheet" href="/css/checkout.css?v={{CSS_VERSION}}">
 </head>
 
-<body>
+<body data-elpay-version="{{CSS_VERSION}}">
 
   <!-- include:partials/splash.html -->
 
@@ -2828,6 +2828,42 @@
       });
     }
 
+    // --- RESPONSIVE LAYOUT GUARD ---
+    // The checkout is rendered inside an iframe whose width the stylesheet cannot
+    // always predict (the modal can be resized, the host page can be zoomed, and the
+    // wrapper is capped by 95vw). Media queries alone therefore sometimes kept the
+    // 3-column desktop layout alive in a container that was far too narrow, which
+    // squeezed the QR workspace down to ~210px and clipped it.
+    // Measuring the real rendered width and toggling layout modes makes the checkout
+    // degrade predictably: the branding panel drops first, then the methods rail.
+    const LAYOUT_COMPACT_MAX = 1100;
+    const LAYOUT_SINGLE_MAX = 900;
+
+    function applyResponsiveLayout() {
+      const wrapper = document.querySelector('.ypg-wrapper');
+      if (!wrapper) return;
+      const width = wrapper.getBoundingClientRect().width;
+      if (!width) return;
+      document.body.classList.toggle('ypg-layout-compact', width < LAYOUT_COMPACT_MAX);
+      document.body.classList.toggle('ypg-layout-single', width < LAYOUT_SINGLE_MAX);
+    }
+
+    function initResponsiveLayoutGuard() {
+      applyResponsiveLayout();
+      const wrapper = document.querySelector('.ypg-wrapper');
+      if (wrapper && typeof ResizeObserver !== 'undefined') {
+        try {
+          new ResizeObserver(applyResponsiveLayout).observe(wrapper);
+        } catch (e) { }
+      }
+      window.addEventListener('resize', applyResponsiveLayout);
+      window.addEventListener('orientationchange', applyResponsiveLayout);
+      console.log('[elpay-checkout] build', document.body.dataset.elpayVersion || 'unknown',
+        '| layout guard active');
+    }
+
+    initResponsiveLayoutGuard();
+
     // Boot checkout - restore preserved 1-week identity if available
     const bootPreserved = getPreservedIdentity();
     if (bootPreserved && bootPreserved.customer) {

package/src/router.js

@@ -97,6 +97,22 @@ export function createRouter(ctx = {}) {
   return router;
 }
 
+/**
+ * Reads the installed package version so static assets can be cache-busted.
+ * Without this a merchant browser can keep serving a stale checkout stylesheet
+ * after the package is upgraded, which silently re-introduces old layout bugs.
+ */
+function readPackageVersion() {
+  try {
+    const pkg = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8'));
+    return String(pkg.version || '0.0.0');
+  } catch {
+    return '0.0.0';
+  }
+}
+
+const ASSET_VERSION = readPackageVersion();
+
 function renderCheckoutPage(ctx, paymentId, state) {
   const template = loadTemplateWithPartials();
   const values = {
@@ -105,6 +121,7 @@ function renderCheckoutPage(ctx, paymentId, state) {
     APP_NAME: state?.branding?.appName || 'ELPAY PG',
     MERCHANT_NAME: state?.merchantName || 'Merchant Checkout',
     AMOUNT: state?.amount || '0.00',
+    CSS_VERSION: ASSET_VERSION,
     INITIAL_STATE_JSON: serializeForScript(state || {})
   };
   return renderTemplate(template, values);