@seamlessdocs/payment-modals 2.0.0-beta.2 → 2.0.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamlessdocs/payment-modals",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.4",
   "description": "Payment modals for SeamlessDocs",
   "main": "build/payment-modals.js",
   "repository": {
@@ -38,8 +38,8 @@
     "image-webpack-loader": "^6.0.0",
     "mini-css-extract-plugin": "^2.7.6",
     "prettier": "^1.17.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "sass": "^1.69.0",
     "sass-loader": "^13.3.0",
     "style-loader": "^3.3.3",
@@ -50,8 +50,8 @@
     "webpack-dev-server": "^5.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "dependencies": {
     "@kofile/platform-react-payrix": "1.7.47",
@@ -65,7 +65,6 @@
     "prop-types": "^15.7.2",
     "react-inlinesvg": "^1.1.7",
     "react-select": "^3.1.0",
-    "react-tippy": "^1.4.0",
-    "use-sync-external-store": "^1.2.0"
+    "react-tippy": "^1.4.0"
   }
 }

package/src/index.jsx

@@ -1,5 +1,7 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+// Import createRoot - webpack will handle this correctly:
+// - In development: bundled from react-dom/client
+// - In production: external, resolved to ReactDOM global via webpack externals
+import { createRoot as createRootFromModule } from 'react-dom/client';
 
 import ChooseModal from './Components/ChooseModal';
 import ProcessingModal from './Components/ProcessingModal';
@@ -17,14 +19,70 @@ import { restoreNativeEventConstructor, loadJQuery } from './shims';
 import '../index.css';
 import './OpenViewStyles.css';
 
-// Helper function to render with React 16 ReactDOM.render
+// Store root instances to manage React 18 roots
+const rootInstances = new Map();
+
+// Helper function to get createRoot - handles both bundled (dev) and external (prod) scenarios
+const getCreateRoot = () => {
+  // Strategy 1: Try the imported module (works in development when bundled)
+  if (createRootFromModule && typeof createRootFromModule === 'function') {
+    return createRootFromModule;
+  }
+  
+  // Strategy 2: Try to require react-dom/client directly (works in development)
+  try {
+    const reactDomClient = require('react-dom/client');
+    if (reactDomClient && reactDomClient.createRoot && typeof reactDomClient.createRoot === 'function') {
+      return reactDomClient.createRoot;
+    }
+  } catch (e) {
+    // Ignore require errors - module might not be available
+  }
+  
+  // Strategy 3: Try to require react-dom and access createRoot (works in development)
+  try {
+    const ReactDOM = require('react-dom');
+    if (ReactDOM && typeof ReactDOM.createRoot === 'function') {
+      return ReactDOM.createRoot;
+    }
+  } catch (e) {
+    // Ignore require errors
+  }
+  
+  // Strategy 4: Access ReactDOM from global scope (works in production with externals)
+  // Also works in development if React is loaded globally
+  const ReactDOM = (typeof window !== 'undefined' && window.ReactDOM) 
+    || (typeof global !== 'undefined' && global.ReactDOM)
+    || (typeof self !== 'undefined' && self.ReactDOM);
+  
+  if (ReactDOM && typeof ReactDOM.createRoot === 'function') {
+    return ReactDOM.createRoot;
+  }
+  
+  throw new Error(
+    'createRoot is not available. Make sure React 18 is loaded. ' +
+    'In development, react-dom should be bundled. ' +
+    'In production, ReactDOM should be available globally.'
+  );
+};
+
+// Helper function to render with React 18 createRoot
 const renderModal = (element, containerId) => {
   const containerElement = document.getElementById(containerId);
   if (!containerElement) {
     console.warn(`Container element with id "${containerId}" not found`);
     return;
   }
-  ReactDOM.render(element, containerElement);
+  
+  // Get or create root instance
+  let root = rootInstances.get(containerId);
+  if (!root) {
+    const createRoot = getCreateRoot();
+    root = createRoot(containerElement);
+    rootInstances.set(containerId, root);
+  }
+  
+  root.render(element);
 };
 
 const handlePaymentModal = {};

package/webpack.config.js

@@ -34,6 +34,12 @@ module.exports = (_env, argv) => {
         amd: 'react-dom',
         root: 'ReactDOM'
       },
+      'react-dom/client': {
+        commonjs: 'react-dom',
+        commonjs2: 'react-dom',
+        amd: 'react-dom',
+        root: 'ReactDOM'
+      }
     } : {},
     module: {
       rules: [
@@ -95,18 +101,7 @@ module.exports = (_env, argv) => {
         template: path.join(__dirname, 'index.html'),
         inject: 'body',
         scriptLoading: 'blocking'
-      }),
-      // Replace 'react' imports from @kofile/platform-react-payrix with our polyfilled version
-      new webpack.NormalModuleReplacementPlugin(
-        /^react$/,
-        function(resource) {
-          const context = resource.context || '';
-          // Only replace for @kofile/platform-react-payrix
-          if (context.includes('@kofile') && context.includes('platform-react-payrix')) {
-            resource.request = path.resolve(__dirname, 'src/react-with-polyfills.js');
-          }
-        }
-      )
+      })
     ],
     devServer: {
       port: 9000,
@@ -126,8 +121,7 @@ module.exports = (_env, argv) => {
       modules: [path.join(__dirname, 'src'), path.join(__dirname), 'node_modules'],
       extensions: ['.js', '.jsx', '.scss', '.css'],
       alias: {
-        'react-virtualized/List': 'react-virtualized/dist/es/List',
-        'react/jsx-runtime': path.resolve(__dirname, 'src/jsx-runtime-shim.js')
+        'react-virtualized/List': 'react-virtualized/dist/es/List'
       }
     }
   };

package/src/jsx-runtime-shim.js

@@ -1,19 +0,0 @@
-// Shim for react/jsx-runtime to support React 16
-// This provides the jsx and jsxs functions that React 17+ uses
-// but implemented using React.createElement for React 16 compatibility
-
-import React from 'react';
-
-// jsx function for single children
-export function jsx(type, props, key) {
-  return React.createElement(type, { ...props, key });
-}
-
-// jsxs function for multiple children
-export function jsxs(type, props, key) {
-  return React.createElement(type, { ...props, key });
-}
-
-// Fragment support
-export const Fragment = React.Fragment;
-

package/src/react-with-polyfills.js

@@ -1,18 +0,0 @@
-// React wrapper that includes polyfills for React 16 compatibility
-// This exports everything from React plus useSyncExternalStore polyfill
-
-import * as React from 'react';
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
-
-// Re-export everything from React
-export * from 'react';
-
-// Add useSyncExternalStore to the default export
-export default {
-  ...React,
-  useSyncExternalStore
-};
-
-// Also export useSyncExternalStore as a named export
-export { useSyncExternalStore };
-