@seamlessdocs/payment-modals 2.0.0-beta.8 → 2.0.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamlessdocs/payment-modals",
-  "version": "2.0.0-beta.8",
+  "version": "2.0.0-beta.9",
   "description": "Payment modals for SeamlessDocs",
   "main": "build/payment-modals.js",
   "repository": {
@@ -30,21 +30,23 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-prettier": "^5.2.0",
     "eslint-plugin-react": "^7.33.2",
-    "file-loader": "^3.0.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "file-loader": "^6.2.0",
     "html-loader": "^4.2.0",
     "html-webpack-plugin": "^5.6.0",
     "image-webpack-loader": "^6.0.0",
     "mini-css-extract-plugin": "^2.7.6",
-    "prettier": "^1.17.0",
+    "postcss": "^8.4.35",
+    "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.69.0",
     "sass-loader": "^13.3.0",
     "style-loader": "^3.3.3",
     "svg-inline-loader": "^0.8.0",
-    "url-loader": "^1.1.2",
+    "url-loader": "^4.1.1",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.0"
@@ -55,6 +57,7 @@
   },
   "dependencies": {
     "@kofile/platform-react-payrix": "1.7.47",
+    "@tippyjs/react": "^4.2.6",
     "babel-plugin-import": "^1.11.0",
     "base64-image-loader": "^1.2.1",
     "classnames": "^2.2.6",
@@ -63,8 +66,7 @@
     "postcss-loader": "^7.3.4",
     "postcss-nested": "^4.1.2",
     "prop-types": "^15.7.2",
-    "react-inlinesvg": "^1.1.7",
-    "react-select": "^3.1.0",
-    "react-tippy": "^1.4.0"
+    "react-inlinesvg": "^4.2.0",
+    "react-select": "^5.8.0"
   }
 }

package/src/Components/ACHPaymentModal/Form/FieldContainer/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import { Tooltip } from 'react-tippy';
+import Tippy from '@tippyjs/react';
 
 import { Field } from 'formik';
 
@@ -10,7 +10,7 @@ import validIcon from '../../../../assets/img/valid-icon.svg';
 
 import styles from './FieldContainer.module.css';
 
-import 'react-tippy/dist/tippy.css';
+import 'tippy.js/dist/tippy.css';
 
 const FieldContainer = ({ name, label, children }) => {
   return (
@@ -24,9 +24,9 @@ const FieldContainer = ({ name, label, children }) => {
           <div className={styles.fieldHeader}>
             <div className={styles.fieldName}>{label}</div>
             {meta.touched && meta.error && (
-              <Tooltip title={meta.error} arrow>
+              <Tippy content={meta.error} arrow>
                 <img src={errorIcon} alt="error" />
-              </Tooltip>
+              </Tippy>
             )}
             {meta.touched && !meta.error && (
               <img className={styles.validationIcon} src={validIcon} alt="valid" />

package/src/index.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 import ChooseModal from './Components/ChooseModal';
 import ProcessingModal from './Components/ProcessingModal';
 import ErrorModal from './Components/ErrorModal';
@@ -14,29 +16,42 @@ import { restoreNativeEventConstructor, loadJQuery } from './shims';
 import '../index.css';
 import './OpenViewStyles.css';
 
+// Expose React and ReactDOM globally for compatibility
+// In development, these are bundled and need to be exposed
+// In production, these should already be available externally
+if (typeof window !== 'undefined') {
+  if (!window.React) {
+    window.React = React;
+  }
+  if (!window.ReactDOM) {
+    window.ReactDOM = ReactDOM;
+  }
+}
+
 // Store root instances to manage React 18 roots
 const rootInstances = new Map();
 
 // Helper function to get createRoot - works in both development and production
-// IMPORTANT: This function ONLY uses the global ReactDOM to avoid conflicts
-// In development, React must be exposed globally (webpack will bundle it)
-// In production, React is external and must be available globally
+// In development, ReactDOM is imported and exposed globally
+// In production, ReactDOM is external and should be available globally
 const getCreateRoot = () => {
-  // Access ReactDOM from global scope - this is the ONLY way we access React
-  // This prevents multiple React instances and internal conflicts
-  const ReactDOM = (typeof window !== 'undefined' && window.ReactDOM) 
+  // First try to use the imported ReactDOM (development)
+  if (ReactDOM && typeof ReactDOM.createRoot === 'function') {
+    return ReactDOM.createRoot;
+  }
+  
+  // Fallback to global ReactDOM (production or if imported version not available)
+  const globalReactDOM = (typeof window !== 'undefined' && window.ReactDOM) 
     || (typeof global !== 'undefined' && global.ReactDOM)
     || (typeof self !== 'undefined' && self.ReactDOM);
   
-  if (ReactDOM && typeof ReactDOM.createRoot === 'function') {
-    return ReactDOM.createRoot;
+  if (globalReactDOM && typeof globalReactDOM.createRoot === 'function') {
+    return globalReactDOM.createRoot;
   }
   
   throw new Error(
-    'createRoot is not available. Make sure React 18 is loaded and ReactDOM is available globally. ' +
-    'ReactDOM should be accessible as window.ReactDOM. ' +
-    'In development, ensure React is loaded before this script. ' +
-    'In production, React must be external and available as window.ReactDOM.'
+    'createRoot is not available. Make sure React 18 is loaded and ReactDOM is available. ' +
+    'ReactDOM should be accessible as window.ReactDOM or imported from react-dom/client.'
   );
 };
 

package/webpack.config.js

@@ -21,19 +21,26 @@ module.exports = (_env, argv) => {
     },
     // Solo aplicar externals en producción
     // En desarrollo, React debe estar incluido en el bundle
-    externals: isProduction ? {
-      'react': {
-        commonjs: 'react',
-        commonjs2: 'react',
-        amd: 'react',
-        root: 'React'
-      },
-      'react-dom': {
-        commonjs: 'react-dom',
-        commonjs2: 'react-dom',
-        amd: 'react-dom',
-        root: 'ReactDOM'
+    externals: isProduction ? function({ context, request }, callback) {
+      // Handle react and react-dom as externals
+      if (/^react$/.test(request)) {
+        return callback(null, {
+          commonjs: 'react',
+          commonjs2: 'react',
+          amd: 'react',
+          root: 'React'
+        });
+      }
+      if (/^react-dom$/.test(request) || /^react-dom\/client$/.test(request)) {
+        return callback(null, {
+          commonjs: 'react-dom',
+          commonjs2: 'react-dom',
+          amd: 'react-dom',
+          root: 'ReactDOM'
+        });
       }
+      // Don't externalize anything else
+      callback();
     } : {},
     module: {
       rules: [
@@ -95,23 +102,8 @@ module.exports = (_env, argv) => {
         template: path.join(__dirname, 'index.html'),
         inject: 'body',
         scriptLoading: 'blocking'
-      }),
-      // In development, expose ReactDOM globally at the start of the bundle
-      !isProduction && new webpack.BannerPlugin({
-        banner: `
-(function() {
-  try {
-    if (typeof window !== 'undefined' && typeof require !== 'undefined' && !window.ReactDOM) {
-      var ReactDOM = require('react-dom');
-      if (ReactDOM) window.ReactDOM = ReactDOM;
-    }
-  } catch(e) {}
-})();
-        `.trim(),
-        raw: true,
-        entryOnly: true
       })
-    ].filter(Boolean),
+    ],
     devServer: {
       port: 9000,
       compress: true,