npm - @seamlessdocs/payment-modals - Versions diffs - 2.0.0-beta.8 → 2.0.0 - Mend

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

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 (9) hide show

package/README.md +200 -1
package/build/payment-modals.js +1 -1
package/config/webpackDevServer.config.js +2 -4
package/index.html +66 -2
package/package.json +12 -14
package/src/Components/ACHPaymentModal/Form/FieldContainer/index.jsx +4 -4
package/src/index.jsx +6 -20
package/webpack.config.js +2 -32
package/seamlessdocs-payment-modals-v2.0.0-beta.1.tgz +0 -0

package/config/webpackDevServer.config.js CHANGED Viewed

@@ -28,11 +28,9 @@ 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.
-    // 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'
+    allowedHosts: proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true'
+      ? 'all'
       : 'auto',
     // Enable gzip compression of generated files.
     compress: true,

package/index.html CHANGED Viewed

@@ -3,7 +3,6 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <!--<link rel="stylesheet" href="index.css" /> -->
     <title>Payment Modals</title>
   </head>
   <body>
@@ -17,6 +16,7 @@
       <a href="#" id="achPaymentModal">Open "ACH Payment" modal</a>
       <a href="#" id="govOSPayACHPaymentModal">Open "GovOS Pay ACH Payment" modal</a>
       <a href="#" id="govOSPayCardPaymentModal">Open "GovOS Pay Card Payment" modal</a>
+      <a href="#" id="govOSPayCardPaymentModalNcourt">Open "GovOS Pay Card Payment" modal (ncourt/payments)</a>
       <a href="#" id="govOSPayInvoiceSummaryModal">Open "GovOS Pay Invoice Summary" modal</a>
       <a href="#" id="none">Close</a>
     </div>
@@ -260,6 +260,70 @@
       });
       triggers[9].addEventListener('click', function(event) {
+        window.handlePaymentModal.govOSPayCardPaymentModal({
+          amount: 2200,
+          paymentCorrelationId: String(Math.random()).slice(2),
+          paymentConfig: {
+            providerAccountCode: "54c574a2-5271-4c93-bd68-57e39930a52a",
+            mapping: {
+              platformApplicationCode: "FORMS",
+              platformTenantCode: "TESTFORCE",
+              providerName: "ncourt",
+              accountName: "Test studio 3",
+              configuration: {
+                accessCredentials: {
+                  gatewayName: "ncourt",
+                  merchantId: "t1_mer_65e617f34f1e57a4ee46560",
+                  publicKey: "ae298630ef3e58ddd93079c908d5ff5e"
+                },
+                scriptUrl: "https://test-api.payrix.com/payFieldsScript"
+              }
+            },
+            merchantInformation: {
+              id: "t1_mer_65e617f34f1e57a4ee46560",
+              name: "Waxahachie City Test Merchant",
+              phone: "5555555555",
+              address: {
+                address1: "109 South Jackson Street",
+                address2: "",
+                city: "Waxahachie",
+                state: "TX",
+                zip: "75165",
+                phone: "5555555555"
+              }
+            }
+          },
+          transactionUrl: 'https://backend.dev.nonprod.seamlessdocs.com/payments/transactions/govOsPay/transaction.json',
+          getTransactionUrl: 'https://backend.dev.nonprod.seamlessdocs.com/payments/transactions/govOsPay/transactions/',
+          updateTransactionUrl: 'https://backend.dev.nonprod.seamlessdocs.com/payments/transactions/govOsPay/transactions/',
+          lineItems: [
+            {
+              title: "Document Fee",
+              description: "test",
+              quantity: 1,
+              unitPrice: 100,
+            },
+            {
+              title: "Fee Test Credit Card",
+              description: "test",
+              quantity: 1,
+              unitPrice: 2.0408163265306145,
+            },
+          ],
+          callbacks: {
+            onPay: function () {
+              setTimeout(function () {
+                console.log('Pay');
+              }, 400);
+            },
+            onClose: function() {
+              console.log('close');
+            }
+          }
+        });
+      });
+      triggers[10].addEventListener('click', function(event) {
         window.handlePaymentModal.govOSPayInvoiceSummaryModal({
           transactionData: [
             {
@@ -291,7 +355,7 @@
         });
       });
-      triggers[10].addEventListener('click', function(event) {
+      triggers[11].addEventListener('click', function(event) {
         window.handlePaymentModal.none();
       });
     </script>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@seamlessdocs/payment-modals",
-  "version": "2.0.0-beta.8",
+  "version": "2.0.0",
   "description": "Payment modals for SeamlessDocs",
   "main": "build/payment-modals.js",
   "repository": {
@@ -30,31 +30,28 @@
     "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",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "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",
+    "url-loader": "^4.1.1",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.0"
   },
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  },
   "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 +60,9 @@
     "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": "^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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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,48 +16,32 @@ 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 - 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
 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)
-    || (typeof global !== 'undefined' && global.ReactDOM)
-    || (typeof self !== 'undefined' && self.ReactDOM);
   if (ReactDOM && typeof ReactDOM.createRoot === 'function') {
     return ReactDOM.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. 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);
 };

package/webpack.config.js CHANGED Viewed

@@ -19,22 +19,7 @@ module.exports = (_env, argv) => {
       clean: true,
       globalObject: 'this'
     },
-    // 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: {},
     module: {
       rules: [
         {
@@ -95,23 +80,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,

package/seamlessdocs-payment-modals-v2.0.0-beta.1.tgz DELETED Viewed

Binary file