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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/build/payment-modals.js +1 -1
  2. package/index.html +1 -0
  3. package/package.json +12 -14
  4. package/src/Components/ACHPaymentModal/Form/FieldContainer/index.jsx +4 -4
  5. package/src/index.jsx +25 -6
  6. package/webpack.config.js +4 -22
package/index.html CHANGED
@@ -3,6 +3,7 @@
3
3
  <head>
4
4
  <meta charset="utf-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <!--<link rel="stylesheet" href="index.css" /> -->
6
7
  <title>Payment Modals</title>
7
8
  </head>
8
9
  <body>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seamlessdocs/payment-modals",
3
- "version": "2.0.0-beta.1",
3
+ "version": "2.0.0-beta.10",
4
4
  "description": "Payment modals for SeamlessDocs",
5
5
  "main": "build/payment-modals.js",
6
6
  "repository": {
@@ -30,31 +30,28 @@
30
30
  "eslint-config-prettier": "^9.1.0",
31
31
  "eslint-plugin-import": "^2.29.1",
32
32
  "eslint-plugin-jsx-a11y": "^6.8.0",
33
- "eslint-plugin-prettier": "^5.1.3",
33
+ "eslint-plugin-prettier": "^5.2.0",
34
34
  "eslint-plugin-react": "^7.33.2",
35
- "file-loader": "^3.0.1",
35
+ "eslint-plugin-react-hooks": "^4.6.0",
36
+ "file-loader": "^6.2.0",
36
37
  "html-loader": "^4.2.0",
37
38
  "html-webpack-plugin": "^5.6.0",
38
39
  "image-webpack-loader": "^6.0.0",
39
40
  "mini-css-extract-plugin": "^2.7.6",
41
+ "postcss": "^8.4.35",
42
+ "prettier": "^3.2.5",
40
43
  "sass": "^1.69.0",
41
- "prettier": "^1.17.0",
42
- "react": "^18.2.0",
43
- "react-dom": "^18.2.0",
44
44
  "sass-loader": "^13.3.0",
45
45
  "style-loader": "^3.3.3",
46
46
  "svg-inline-loader": "^0.8.0",
47
- "url-loader": "^1.1.2",
47
+ "url-loader": "^4.1.1",
48
48
  "webpack": "^5.89.0",
49
49
  "webpack-cli": "^5.1.4",
50
50
  "webpack-dev-server": "^5.0.0"
51
51
  },
52
- "peerDependencies": {
53
- "react": ">=18.0.0",
54
- "react-dom": ">=18.0.0"
55
- },
56
52
  "dependencies": {
57
53
  "@kofile/platform-react-payrix": "1.7.47",
54
+ "@tippyjs/react": "^4.2.6",
58
55
  "babel-plugin-import": "^1.11.0",
59
56
  "base64-image-loader": "^1.2.1",
60
57
  "classnames": "^2.2.6",
@@ -63,8 +60,9 @@
63
60
  "postcss-loader": "^7.3.4",
64
61
  "postcss-nested": "^4.1.2",
65
62
  "prop-types": "^15.7.2",
66
- "react-inlinesvg": "^1.1.7",
67
- "react-select": "^3.1.0",
68
- "react-tippy": "^1.4.0"
63
+ "react": "^18.2.0",
64
+ "react-dom": "^18.2.0",
65
+ "react-inlinesvg": "^4.2.0",
66
+ "react-select": "^5.8.0"
69
67
  }
70
68
  }
package/src/Components/ACHPaymentModal/Form/FieldContainer/index.jsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import classNames from 'classnames';
3
3
  import PropTypes from 'prop-types';
4
- import { Tooltip } from 'react-tippy';
4
+ import Tippy from '@tippyjs/react';
5
5
 
6
6
  import { Field } from 'formik';
7
7
 
@@ -10,7 +10,7 @@ import validIcon from '../../../../assets/img/valid-icon.svg';
10
10
 
11
11
  import styles from './FieldContainer.module.css';
12
12
 
13
- import 'react-tippy/dist/tippy.css';
13
+ import 'tippy.js/dist/tippy.css';
14
14
 
15
15
  const FieldContainer = ({ name, label, children }) => {
16
16
  return (
@@ -24,9 +24,9 @@ const FieldContainer = ({ name, label, children }) => {
24
24
  <div className={styles.fieldHeader}>
25
25
  <div className={styles.fieldName}>{label}</div>
26
26
  {meta.touched && meta.error && (
27
- <Tooltip title={meta.error} arrow>
27
+ <Tippy content={meta.error} arrow>
28
28
  <img src={errorIcon} alt="error" />
29
- </Tooltip>
29
+ </Tippy>
30
30
  )}
31
31
  {meta.touched && !meta.error && (
32
32
  <img className={styles.validationIcon} src={validIcon} alt="valid" />
package/src/index.jsx CHANGED
@@ -1,6 +1,5 @@
1
1
  import React from 'react';
2
- import { createRoot } from 'react-dom/client';
3
-
2
+ import ReactDOM from 'react-dom/client';
4
3
  import ChooseModal from './Components/ChooseModal';
5
4
  import ProcessingModal from './Components/ProcessingModal';
6
5
  import ErrorModal from './Components/ErrorModal';
@@ -17,18 +16,38 @@ import { restoreNativeEventConstructor, loadJQuery } from './shims';
17
16
  import '../index.css';
18
17
  import './OpenViewStyles.css';
19
18
 
19
+ // Store root instances to manage React 18 roots
20
+ const rootInstances = new Map();
21
+
22
+ // Helper function to get createRoot
23
+ // React and ReactDOM are bundled internally, so we use the imported version directly
24
+ const getCreateRoot = () => {
25
+ if (ReactDOM && typeof ReactDOM.createRoot === 'function') {
26
+ return ReactDOM.createRoot;
27
+ }
28
+
29
+ throw new Error(
30
+ 'createRoot is not available. ReactDOM.createRoot should be available from the bundled react-dom/client.'
31
+ );
32
+ };
33
+
20
34
  // Helper function to render with React 18 createRoot
21
- let rootInstance = null;
22
35
  const renderModal = (element, containerId) => {
23
36
  const containerElement = document.getElementById(containerId);
24
37
  if (!containerElement) {
25
38
  console.warn(`Container element with id "${containerId}" not found`);
26
39
  return;
27
40
  }
28
- if (!rootInstance) {
29
- rootInstance = createRoot(containerElement);
41
+
42
+ // Get or create root instance
43
+ let root = rootInstances.get(containerId);
44
+ if (!root) {
45
+ const createRoot = getCreateRoot();
46
+ root = createRoot(containerElement);
47
+ rootInstances.set(containerId, root);
30
48
  }
31
- rootInstance.render(element);
49
+
50
+ root.render(element);
32
51
  };
33
52
 
34
53
  const handlePaymentModal = {};
package/webpack.config.js CHANGED
@@ -1,4 +1,5 @@
1
1
  const path = require('path');
2
+ const webpack = require('webpack');
2
3
  const HtmlWebpackPlugin = require('html-webpack-plugin');
3
4
 
4
5
  module.exports = (_env, argv) => {
@@ -18,28 +19,9 @@ module.exports = (_env, argv) => {
18
19
  clean: true,
19
20
  globalObject: 'this'
20
21
  },
21
- // Solo aplicar externals en producción
22
- // En desarrollo, React debe estar incluido en el bundle
23
- externals: isProduction ? {
24
- 'react': {
25
- commonjs: 'react',
26
- commonjs2: 'react',
27
- amd: 'react',
28
- root: 'React'
29
- },
30
- 'react-dom': {
31
- commonjs: 'react-dom',
32
- commonjs2: 'react-dom',
33
- amd: 'react-dom',
34
- root: 'ReactDOM'
35
- },
36
- 'react-dom/client': {
37
- commonjs: 'react-dom/client',
38
- commonjs2: 'react-dom/client',
39
- amd: 'react-dom/client',
40
- root: 'ReactDOM'
41
- }
42
- } : {},
22
+ // No externals - bundle everything including React and ReactDOM
23
+ // This makes the package fully self-contained
24
+ externals: {},
43
25
  module: {
44
26
  rules: [
45
27
  {