@seamlessdocs/payment-modals 1.0.65 → 2.0.0-beta.10

package/config/webpack.config.js

@@ -11,7 +11,7 @@ const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const safePostCssParser = require('postcss-safe-parser');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
@@ -242,19 +242,9 @@ module.exports = function(webpackEnv) {
           sourceMap: shouldUseSourceMap,
         }),
         // This is only used in production mode
-        new OptimizeCSSAssetsPlugin({
-          cssProcessorOptions: {
-            parser: safePostCssParser,
-            map: shouldUseSourceMap
-              ? {
-                  // `inline: false` forces the sourcemap to be output into a
-                  // separate file
-                  inline: false,
-                  // `annotation: true` appends the sourceMappingURL to the end of
-                  // the css file, helping the browser find the sourcemap
-                  annotation: true,
-                }
-              : false,
+        new CssMinimizerPlugin({
+          minimizerOptions: {
+            preset: ['default'],
           },
         }),
       ],
@@ -305,6 +295,18 @@ module.exports = function(webpackEnv) {
         // Make sure your source files are compiled, as they will not be processed in any way.
         new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
       ],
+      // Some libraries import Node modules but don't use them in the browser.
+      // Tell Webpack to provide empty mocks for them so importing them works.
+      fallback: {
+        module: false,
+        dgram: false,
+        dns: false,
+        fs: false,
+        http2: false,
+        net: false,
+        tls: false,
+        child_process: false,
+      },
     },
     resolveLoader: {
       plugins: [
@@ -637,18 +639,6 @@ module.exports = function(webpackEnv) {
           formatter: isEnvProduction ? typescriptFormatter : undefined,
         }),
     ].filter(Boolean),
-    // Some libraries import Node modules but don't use them in the browser.
-    // Tell Webpack to provide empty mocks for them so importing them works.
-    node: {
-      module: 'empty',
-      dgram: 'empty',
-      dns: 'mock',
-      fs: 'empty',
-      http2: 'empty',
-      net: 'empty',
-      tls: 'empty',
-      child_process: 'empty',
-    },
     // Turn off performance processing because we utilize
     // our own hints via the FileSizeReporter
     performance: false,

package/config/webpackDevServer.config.js

@@ -28,16 +28,25 @@ module.exports = function(proxy, allowedHost) {
     // So we will disable the host check normally, but enable it if you have
     // specified the `proxy` setting. Finally, we let you override it if you
     // really know what you're doing with a special environment variable.
-    disableHostCheck:
-      !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
+    // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
+    // websites from potentially accessing local content through DNS rebinding.
+    // For Webpack 5, we use allowedHosts instead of disableHostCheck
+    allowedHosts: proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true' 
+      ? 'all' 
+      : 'auto',
     // Enable gzip compression of generated files.
     compress: true,
     // Silence WebpackDevServer's own logs since they're generally not useful.
     // It will still show compile warnings and errors with this setting.
-    clientLogLevel: 'none',
+    client: {
+      logging: 'none',
+      webSocketURL: allowedHost ? {
+        hostname: allowedHost,
+      } : undefined,
+    },
     // By default WebpackDevServer serves physical files from current directory
     // in addition to all the virtual build products that it serves from memory.
-    // This is confusing because those files won’t automatically be available in
+    // This is confusing because those files won't automatically be available in
     // production build folder unless we copy them. However, copying the whole
     // project directory is dangerous because we may expose sensitive files.
     // Instead, we establish a convention that only files in `public` directory
@@ -49,21 +58,23 @@ module.exports = function(proxy, allowedHost) {
     // for files like `favicon.ico`, `manifest.json`, and libraries that are
     // for some reason broken when imported through Webpack. If you just want to
     // use an image, put it in `src` and `import` it from JavaScript instead.
-    contentBase: paths.appPublic,
-    // By default files from `contentBase` will not trigger a page reload.
-    watchContentBase: true,
+    static: {
+      directory: paths.appPublic,
+      watch: true,
+    },
     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
     // for the WebpackDevServer client so it can learn when the files were
     // updated. The WebpackDevServer client is included as an entry point
     // in the Webpack development configuration. Note that only changes
     // to CSS are currently hot reloaded. JS changes will refresh the browser.
     hot: true,
+    liveReload: false,
     // It is important to tell WebpackDevServer to use the same "root" path
     // as we specified in the config. In development, we always serve from /.
     publicPath: '/',
     // WebpackDevServer is noisy by default so we emit custom message instead
     // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
-    quiet: true,
+    // Note: 'quiet' option is deprecated in Webpack 5, use client.logging instead
     // Reportedly, this avoids CPU overload on some systems.
     // https://github.com/facebook/create-react-app/issues/293
     // src/node_modules is not ignored to support absolute imports
@@ -80,16 +91,19 @@ module.exports = function(proxy, allowedHost) {
       // See https://github.com/facebook/create-react-app/issues/387.
       disableDotRule: true,
     },
-    public: allowedHost,
     proxy,
-    before(app, server) {
+    setupMiddlewares: (middlewares, devServer) => {
+      if (!devServer) {
+        throw new Error('webpack-dev-server is not defined');
+      }
+      const app = devServer.app;
       if (fs.existsSync(paths.proxySetup)) {
         // This registers user provided middleware for proxy reasons
         require(paths.proxySetup)(app);
       }
 
       // This lets us fetch source contents from webpack for the error overlay
-      app.use(evalSourceMapMiddleware(server));
+      app.use(evalSourceMapMiddleware(devServer));
       // This lets us open files from the runtime error overlay.
       app.use(errorOverlayMiddleware());
 
@@ -99,6 +113,7 @@ module.exports = function(proxy, allowedHost) {
       // it used the same host and port.
       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
       app.use(noopServiceWorkerMiddleware());
+      return middlewares;
     },
   };
 };

package/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="index.css" />
+    <!--<link rel="stylesheet" href="index.css" /> -->
     <title>Payment Modals</title>
   </head>
   <body>
@@ -22,7 +22,6 @@
     </div>
     <div id="payment-modal"></div>
     <script src="https://core.spreedly.com/iframe/express-2.min.js"></script>
-    <script src="./build/payment-modals.js"></script>
     <script>
       var triggers = document.querySelectorAll('.links a');
       var callbacks = {

package/package.json

@@ -1,62 +1,68 @@
 {
   "name": "@seamlessdocs/payment-modals",
-  "version": "1.0.65",
+  "version": "2.0.0-beta.10",
   "description": "Payment modals for SeamlessDocs",
   "main": "build/payment-modals.js",
   "repository": {
     "url": "https://github.com/SeamlessDocsDev/PaymentModals"
   },
+  "engines": {
+    "node": ">=22.0.0"
+  },
   "scripts": {
     "start": "webpack-dev-server --mode development",
-    "dev": "webpack --mode development ./src/index.jsx --output ./build/payment-modals.js",
-    "build": "webpack --mode production ./src/index.jsx --output ./build/payment-modals.js"
+    "dev": "webpack --mode development",
+    "build": "webpack --mode production"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.2",
-    "@babel/plugin-syntax-class-properties": "^7.2.0",
-    "@babel/plugin-transform-runtime": "^7.4.4",
-    "@babel/preset-env": "^7.6.2",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/runtime": "^7.4.5",
-    "babel-eslint": "^10.0.1",
-    "babel-loader": "^8.0.6",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "css-loader": "^2.1.1",
-    "eslint": "^5.16.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-prettier": "^4.2.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.1",
-    "eslint-plugin-prettier": "^3.0.1",
-    "eslint-plugin-react": "^7.13.0",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "^3.0.1",
+    "@babel/core": "^7.23.7",
+    "@babel/eslint-parser": "^7.23.3",
+    "@babel/plugin-syntax-class-properties": "^7.12.13",
+    "@babel/plugin-transform-runtime": "^7.23.7",
+    "@babel/preset-env": "^7.23.7",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/runtime": "^7.23.7",
+    "babel-loader": "^9.1.3",
+    "css-loader": "^6.8.1",
+    "css-minimizer-webpack-plugin": "^5.0.1",
+    "eslint": "^8.56.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-prettier": "^5.2.0",
+    "eslint-plugin-react": "^7.33.2",
+    "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": "^0.5.0",
-    "node-sass": "^4.11.0",
-    "prettier": "^1.17.0",
-    "sass-loader": "^7.1.0",
-    "style-loader": "^0.23.1",
+    "mini-css-extract-plugin": "^2.7.6",
+    "postcss": "^8.4.35",
+    "prettier": "^3.2.5",
+    "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",
-    "webpack": "^4.41.0",
-    "webpack-cli": "^3.3.9",
-    "webpack-dev-server": "^3.2.1"
+    "url-loader": "^4.1.1",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.0"
   },
   "dependencies": {
-    "@kofile/platform-react-payrix": "1.6.15",
+    "@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",
     "download": "^7.1.0",
     "formik": "^2.1.5",
-    "postcss-loader": "^3.0.0",
+    "postcss-loader": "^7.3.4",
     "postcss-nested": "^4.1.2",
     "prop-types": "^15.7.2",
-    "react": "^16.10.1",
-    "react-dom": "^16.10.1",
-    "react-inlinesvg": "^1.1.7",
-    "react-select": "^3.1.0",
-    "react-tippy": "^1.4.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.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,6 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-
+import ReactDOM from 'react-dom/client';
 import ChooseModal from './Components/ChooseModal';
 import ProcessingModal from './Components/ProcessingModal';
 import ErrorModal from './Components/ErrorModal';
@@ -14,12 +13,47 @@ import GovOSPayInvoiceSummaryModal from './Components/GovOSPayInvoiceSummaryModa
 
 import { restoreNativeEventConstructor, loadJQuery } from './shims';
 
+import '../index.css';
 import './OpenViewStyles.css';
 
+// Store root instances to manage React 18 roots
+const rootInstances = new Map();
+
+// Helper function to get createRoot
+// React and ReactDOM are bundled internally, so we use the imported version directly
+const getCreateRoot = () => {
+  if (ReactDOM && typeof ReactDOM.createRoot === 'function') {
+    return ReactDOM.createRoot;
+  }
+  
+  throw new Error(
+    'createRoot is not available. ReactDOM.createRoot should be available from the bundled react-dom/client.'
+  );
+};
+
+// 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;
+  }
+  
+  // 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 = {};
 
 handlePaymentModal.chooseModal = settings => {
-  ReactDOM.render(
+  renderModal(
     <ChooseModal
       title={settings.title}
       description={settings.description}
@@ -28,16 +62,16 @@ handlePaymentModal.chooseModal = settings => {
       onWithPay={settings.callbacks.withPay}
       onClose={settings.callbacks.close}
     />,
-    document.getElementById('payment-modal')
+    'payment-modal'
   );
 };
 
 handlePaymentModal.processingModal = () => {
-  ReactDOM.render(<ProcessingModal />, document.getElementById('payment-modal'));
+  renderModal(<ProcessingModal />, 'payment-modal');
 };
 
 handlePaymentModal.errorModal = settings => {
-  ReactDOM.render(
+  renderModal(
     <ErrorModal
       isOptional={settings.isOptional}
       errorText={settings.errorText}
@@ -45,19 +79,19 @@ handlePaymentModal.errorModal = settings => {
       onRetry={settings.callbacks.retry}
       onClose={settings.callbacks.close}
     />,
-    document.getElementById('payment-modal')
+    'payment-modal'
   );
 };
 
 handlePaymentModal.successModal = settings => {
-  ReactDOM.render(
+  renderModal(
     <SuccessModal description={settings.description} />,
-    document.getElementById('payment-modal')
+    'payment-modal'
   );
 };
 
 handlePaymentModal.selectPaymentModal = settings => {
-  ReactDOM.render(
+  renderModal(
     <SelectPaymentModal
       isPaymentRequired={settings.isPaymentRequired}
       onPayByBank={settings.callbacks.onPayByBank}
@@ -71,12 +105,12 @@ handlePaymentModal.selectPaymentModal = settings => {
       isCreditCardFeeEnable={settings.isCreditCardFeeEnable}
       isBankAccountFeeEnable={settings.isBankAccountFeeEnable}
     />,
-    document.getElementById('payment-modal')
+    'payment-modal'
   );
 };
 
 handlePaymentModal.achPaymentModal = settings => {
-  ReactDOM.render(
+  renderModal(
     <ACHPaymentModal
       onPay={settings.callbacks.onPay}
       onClose={settings.callbacks.onClose}
@@ -86,14 +120,14 @@ handlePaymentModal.achPaymentModal = settings => {
       description={settings.description}
       feeName={settings.feeName}
     />,
-    document.getElementById('payment-modal')
+    'payment-modal'
   );
 };
 
 // TODO: Remove use of shims when mootools is removed
 handlePaymentModal.govOSPayACHPaymentModal = settings => {
   restoreNativeEventConstructor();
-  ReactDOM.render(
+  renderModal(
     <GovOSPayACHPaymentModal
       onPay={settings.callbacks.onPay}
       onClose={settings.callbacks.onClose}
@@ -105,7 +139,7 @@ handlePaymentModal.govOSPayACHPaymentModal = settings => {
       updateTransactionUrl={settings.updateTransactionUrl}
       lineItems={settings.lineItems}
     />,
-    document.getElementById('payment-modal')
+    'payment-modal'
   );
 }
 
@@ -113,7 +147,7 @@ handlePaymentModal.govOSPayACHPaymentModal = settings => {
 handlePaymentModal.govOSPayCardPaymentModal = settings => {
   restoreNativeEventConstructor();
   loadJQuery(() => {
-    ReactDOM.render(
+    renderModal(
       <GovOSPayCardPaymentModal
         onPay={settings.callbacks.onPay}
         onClose={settings.callbacks.onClose}
@@ -126,7 +160,7 @@ handlePaymentModal.govOSPayCardPaymentModal = settings => {
         updateTransactionUrl={settings.updateTransactionUrl}
         lineItems={settings.lineItems}
       />,
-      document.getElementById('payment-modal')
+      'payment-modal'
     );
   });
 }
@@ -134,18 +168,18 @@ handlePaymentModal.govOSPayCardPaymentModal = settings => {
 // TODO: Remove use of shims when mootools is removed
 handlePaymentModal.govOSPayInvoiceSummaryModal = settings => {
   restoreNativeEventConstructor();
-  ReactDOM.render(
+  renderModal(
     <GovOSPayInvoiceSummaryModal
       onSubmit={settings.callbacks.onSubmit}
       onClose={settings.callbacks.onClose}
       transactionData={settings.transactionData}
     />,
-    document.getElementById('payment-modal')
+    'payment-modal'
   );
 }
 
 handlePaymentModal.none = () => {
-  ReactDOM.render(<EmptyModal />, document.getElementById('payment-modal'));
+  renderModal(<EmptyModal />, 'payment-modal');
 };
 
 window.handlePaymentModal = handlePaymentModal;

package/webpack.config.js

@@ -1,4 +1,6 @@
 const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = (_env, argv) => {
   const isProduction = argv.mode === 'production';
@@ -8,11 +10,18 @@ module.exports = (_env, argv) => {
     },
     output: {
       filename: 'payment-modals.js',
-      path: '/build',
-      library: 'payment-modals',
-      libraryTarget: 'umd',
-      umdNamedDefine: true
+      path: path.resolve(__dirname, 'build'),
+      library: {
+        name: 'payment-modals',
+        type: 'umd'
+      },
+      umdNamedDefine: true,
+      clean: true,
+      globalObject: 'this'
     },
+    // No externals - bundle everything including React and ReactDOM
+    // This makes the package fully self-contained
+    externals: {},
     module: {
       rules: [
         {
@@ -23,18 +32,20 @@ module.exports = (_env, argv) => {
           }
         },
         {
-          test: /\.css$/,
+          test: /\.module\.css$/,
           use: [
             'style-loader',
             {
               loader: 'css-loader',
               options: {
                 importLoaders: 1,
-                modules: true
+                modules: {
+                  localIdentName: '[local]__[hash:base64:5]',
+                  exportLocalsConvention: 'camelCase'
+                }
               }
             }
-          ],
-          include: /\.module\.css$/
+          ]
         },
         {
           test: /\.css$/,
@@ -55,24 +66,41 @@ module.exports = (_env, argv) => {
           use: {
             loader: 'html-loader',
             options: {
-              attrs: ['img:src', 'link:href']
+              sources: {
+                list: [
+                  { tag: 'img', attribute: 'src', type: 'src' },
+                  { tag: 'link', attribute: 'href', type: 'src' }
+                ]
+              }
             }
           }
         }
       ]
     },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: path.join(__dirname, 'index.html'),
+        inject: 'body',
+        scriptLoading: 'blocking'
+      })
+    ],
     devServer: {
       port: 9000,
       compress: true,
       open: true,
-      publicPath: '/build/',
-      contentBase: path.join(__dirname, 'build'),
+      static: [
+        {
+          directory: path.join(__dirname),
+          publicPath: '/',
+          watch: true
+        }
+      ],
       historyApiFallback: true
     },
     devtool: isProduction ? false : 'inline-source-map',
     resolve: {
-      modules: [path.join(__dirname, 'src'), 'node_modules'],
-      extensions: ['.js', '.jsx', '.scss'],
+      modules: [path.join(__dirname, 'src'), path.join(__dirname), 'node_modules'],
+      extensions: ['.js', '.jsx', '.scss', '.css'],
       alias: {
         'react-virtualized/List': 'react-virtualized/dist/es/List'
       }