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

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 (8) hide show
  1. package/.babelrc +1 -1
  2. package/build/payment-modals.js +1 -1
  3. package/index.html +1 -0
  4. package/package.json +8 -7
  5. package/src/index.jsx +3 -7
  6. package/src/jsx-runtime-shim.js +19 -0
  7. package/src/react-with-polyfills.js +18 -0
  8. package/webpack.config.js +15 -8
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.2",
4
4
  "description": "Payment modals for SeamlessDocs",
5
5
  "main": "build/payment-modals.js",
6
6
  "repository": {
@@ -37,10 +37,10 @@
37
37
  "html-webpack-plugin": "^5.6.0",
38
38
  "image-webpack-loader": "^6.0.0",
39
39
  "mini-css-extract-plugin": "^2.7.6",
40
- "sass": "^1.69.0",
41
40
  "prettier": "^1.17.0",
42
- "react": "^18.2.0",
43
- "react-dom": "^18.2.0",
41
+ "react": "^16.14.0",
42
+ "react-dom": "^16.14.0",
43
+ "sass": "^1.69.0",
44
44
  "sass-loader": "^13.3.0",
45
45
  "style-loader": "^3.3.3",
46
46
  "svg-inline-loader": "^0.8.0",
@@ -50,8 +50,8 @@
50
50
  "webpack-dev-server": "^5.0.0"
51
51
  },
52
52
  "peerDependencies": {
53
- "react": ">=18.0.0",
54
- "react-dom": ">=18.0.0"
53
+ "react": "^16.8.0",
54
+ "react-dom": "^16.8.0"
55
55
  },
56
56
  "dependencies": {
57
57
  "@kofile/platform-react-payrix": "1.7.47",
@@ -65,6 +65,7 @@
65
65
  "prop-types": "^15.7.2",
66
66
  "react-inlinesvg": "^1.1.7",
67
67
  "react-select": "^3.1.0",
68
- "react-tippy": "^1.4.0"
68
+ "react-tippy": "^1.4.0",
69
+ "use-sync-external-store": "^1.2.0"
69
70
  }
70
71
  }
package/src/index.jsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { createRoot } from 'react-dom/client';
2
+ import ReactDOM from 'react-dom';
3
3
 
4
4
  import ChooseModal from './Components/ChooseModal';
5
5
  import ProcessingModal from './Components/ProcessingModal';
@@ -17,18 +17,14 @@ import { restoreNativeEventConstructor, loadJQuery } from './shims';
17
17
  import '../index.css';
18
18
  import './OpenViewStyles.css';
19
19
 
20
- // Helper function to render with React 18 createRoot
21
- let rootInstance = null;
20
+ // Helper function to render with React 16 ReactDOM.render
22
21
  const renderModal = (element, containerId) => {
23
22
  const containerElement = document.getElementById(containerId);
24
23
  if (!containerElement) {
25
24
  console.warn(`Container element with id "${containerId}" not found`);
26
25
  return;
27
26
  }
28
- if (!rootInstance) {
29
- rootInstance = createRoot(containerElement);
30
- }
31
- rootInstance.render(element);
27
+ ReactDOM.render(element, containerElement);
32
28
  };
33
29
 
34
30
  const handlePaymentModal = {};
package/src/jsx-runtime-shim.js ADDED
@@ -0,0 +1,19 @@
1
+ // Shim for react/jsx-runtime to support React 16
2
+ // This provides the jsx and jsxs functions that React 17+ uses
3
+ // but implemented using React.createElement for React 16 compatibility
4
+
5
+ import React from 'react';
6
+
7
+ // jsx function for single children
8
+ export function jsx(type, props, key) {
9
+ return React.createElement(type, { ...props, key });
10
+ }
11
+
12
+ // jsxs function for multiple children
13
+ export function jsxs(type, props, key) {
14
+ return React.createElement(type, { ...props, key });
15
+ }
16
+
17
+ // Fragment support
18
+ export const Fragment = React.Fragment;
19
+
package/src/react-with-polyfills.js ADDED
@@ -0,0 +1,18 @@
1
+ // React wrapper that includes polyfills for React 16 compatibility
2
+ // This exports everything from React plus useSyncExternalStore polyfill
3
+
4
+ import * as React from 'react';
5
+ import { useSyncExternalStore } from 'use-sync-external-store/shim';
6
+
7
+ // Re-export everything from React
8
+ export * from 'react';
9
+
10
+ // Add useSyncExternalStore to the default export
11
+ export default {
12
+ ...React,
13
+ useSyncExternalStore
14
+ };
15
+
16
+ // Also export useSyncExternalStore as a named export
17
+ export { useSyncExternalStore };
18
+
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) => {
@@ -33,12 +34,6 @@ module.exports = (_env, argv) => {
33
34
  amd: 'react-dom',
34
35
  root: 'ReactDOM'
35
36
  },
36
- 'react-dom/client': {
37
- commonjs: 'react-dom/client',
38
- commonjs2: 'react-dom/client',
39
- amd: 'react-dom/client',
40
- root: 'ReactDOM'
41
- }
42
37
  } : {},
43
38
  module: {
44
39
  rules: [
@@ -100,7 +95,18 @@ module.exports = (_env, argv) => {
100
95
  template: path.join(__dirname, 'index.html'),
101
96
  inject: 'body',
102
97
  scriptLoading: 'blocking'
103
- })
98
+ }),
99
+ // Replace 'react' imports from @kofile/platform-react-payrix with our polyfilled version
100
+ new webpack.NormalModuleReplacementPlugin(
101
+ /^react$/,
102
+ function(resource) {
103
+ const context = resource.context || '';
104
+ // Only replace for @kofile/platform-react-payrix
105
+ if (context.includes('@kofile') && context.includes('platform-react-payrix')) {
106
+ resource.request = path.resolve(__dirname, 'src/react-with-polyfills.js');
107
+ }
108
+ }
109
+ )
104
110
  ],
105
111
  devServer: {
106
112
  port: 9000,
@@ -120,7 +126,8 @@ module.exports = (_env, argv) => {
120
126
  modules: [path.join(__dirname, 'src'), path.join(__dirname), 'node_modules'],
121
127
  extensions: ['.js', '.jsx', '.scss', '.css'],
122
128
  alias: {
123
- 'react-virtualized/List': 'react-virtualized/dist/es/List'
129
+ 'react-virtualized/List': 'react-virtualized/dist/es/List',
130
+ 'react/jsx-runtime': path.resolve(__dirname, 'src/jsx-runtime-shim.js')
124
131
  }
125
132
  }
126
133
  };