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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamlessdocs/payment-modals",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.3",
   "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,4 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import ChooseModal from './Components/ChooseModal';
 import ProcessingModal from './Components/ProcessingModal';
@@ -17,14 +16,25 @@ 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 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) {
+    root = createRoot(containerElement);
+    rootInstances.set(containerId, root);
+  }
+  
+  root.render(element);
 };
 
 const handlePaymentModal = {};

package/webpack.config.js

@@ -95,18 +95,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 +115,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 };
-