@seamlessdocs/payment-modals 1.0.61 → 1.0.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamlessdocs/payment-modals",
-  "version": "1.0.61",
+  "version": "1.0.63",
   "description": "Payment modals for SeamlessDocs",
   "main": "build/payment-modals.js",
   "repository": {

package/src/Components/GovOSPayACHPaymentModal/index.jsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { ACHPayment } from '@kofile/platform-react-payrix';
 
 import Modal from '../Modal';
+import { restoreExtendedEventConstructor } from '../../shims';
 
 import backIcon from '../../assets/img/back.svg';
 
@@ -16,6 +17,11 @@ const GovOSPayACHPaymentModal = ({
   paymentConfig,
   transactionUrl,
 }) => {
+  useEffect(() => {
+    // TODO: Remove use of shims when mootools is removed
+    restoreExtendedEventConstructor();
+  }, []);
+
   return (
     <Modal className={styles.modalContainer}>
       <div

package/src/Components/GovOSPayCardPaymentModal/index.jsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { CardPayment } from '@kofile/platform-react-payrix';
 
 import Modal from '../Modal';
+import { restoreExtendedEventConstructor } from '../../shims';
 
 import backIcon from '../../assets/img/back.svg';
 
@@ -17,6 +18,11 @@ const GovOSPayCardPaymentModal = ({
   transactionMode,
   transactionUrl,
 }) => {
+  useEffect(() => {
+    // TODO: Remove use of shims when mootools is removed
+    restoreExtendedEventConstructor();
+  }, []);
+
   return (
     <Modal className={styles.modalContainer}>
       <div

package/src/Components/GovOSPayInvoiceSummaryModal/index.jsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { InvoiceSummary } from '@kofile/platform-react-payrix';
 
 import Modal from '../Modal';
+import { restoreExtendedEventConstructor } from '../../shims';
 
 import backIcon from '../../assets/img/back.svg';
 
@@ -13,6 +14,11 @@ const GovOSPayInvoiceSummaryModal = ({
   onClose,
   transactionData,
 }) => {
+  useEffect(() => {
+    // TODO: Remove use of shims when mootools is removed
+    restoreExtendedEventConstructor();
+  }, []);
+
   return (
     <Modal className={styles.modalContainer}>
       <div

package/src/index.jsx

@@ -12,7 +12,7 @@ import GovOSPayACHPaymentModal from './Components/GovOSPayACHPaymentModal';
 import GovOSPayCardPaymentModal from './Components/GovOSPayCardPaymentModal';
 import GovOSPayInvoiceSummaryModal from './Components/GovOSPayInvoiceSummaryModal';
 
-import { restoreNativeEventConstructor, restoreExtendedEventConstructor } from './shims';
+import { restoreNativeEventConstructor, loadJQuery } from './shims';
 
 import './OpenViewStyles.css';
 
@@ -104,25 +104,25 @@ handlePaymentModal.govOSPayACHPaymentModal = settings => {
     />,
     document.getElementById('payment-modal')
   );
-  restoreExtendedEventConstructor();
 }
 
 // TODO: Remove use of shims when mootools is removed
 handlePaymentModal.govOSPayCardPaymentModal = settings => {
   restoreNativeEventConstructor();
-  ReactDOM.render(
-    <GovOSPayCardPaymentModal
-      onPay={settings.callbacks.onPay}
-      onClose={settings.callbacks.onClose}
-      amount={settings.amount}
-      paymentCorrelationId={settings.paymentCorrelationId}
-      paymentConfig={settings.paymentConfig}
-      transactionMode={settings.transactionMode}
-      transactionUrl={settings.transactionUrl}
-    />,
-    document.getElementById('payment-modal')
-  );
-  restoreExtendedEventConstructor();
+  loadJQuery(() => {
+    ReactDOM.render(
+      <GovOSPayCardPaymentModal
+        onPay={settings.callbacks.onPay}
+        onClose={settings.callbacks.onClose}
+        amount={settings.amount}
+        paymentCorrelationId={settings.paymentCorrelationId}
+        paymentConfig={settings.paymentConfig}
+        transactionMode={settings.transactionMode}
+        transactionUrl={settings.transactionUrl}
+      />,
+      document.getElementById('payment-modal')
+    );
+  });
 }
 
 // TODO: Remove use of shims when mootools is removed
@@ -136,7 +136,6 @@ handlePaymentModal.govOSPayInvoiceSummaryModal = settings => {
     />,
     document.getElementById('payment-modal')
   );
-  restoreExtendedEventConstructor();
 }
 
 handlePaymentModal.none = () => {

package/src/shims.js

@@ -11,14 +11,37 @@ export function getNativeEventConstructor() {
 // This function is used to restore the native Event constructor
 // when the Event constructor is overridden by mootools
 export function restoreNativeEventConstructor() {
-  global.ExtendedEvent = global.Event;
+  window.ExtendedEvent = window.Event;
   const nativeEvent = getNativeEventConstructor();
-  global.Event = nativeEvent;
+  window.Event = nativeEvent;
 }
 
 // This function is used to restore the Extended Event constructor
 // so that mootools can continue to work
 export function restoreExtendedEventConstructor() {
-  global.Event = global.ExtendedEvent;
-  delete global.ExtendedEvent;
+  if (!window.ExtendedEvent) return;
+  window.Event = window.ExtendedEvent;
 }
+
+export function loadJQuery(callback) {
+  // Check if jQuery is already loaded
+  if (!window.jQuery) {
+    const script = document.createElement('script');
+    script.src = "https://code.jquery.com/jquery-3.7.1.min.js"
+    script.integrity = "sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
+    script.crossOrigin = 'anonymous';
+    script.onload = () => {
+      console.log('jQuery loaded:', window.jQuery.fn.jquery);
+      window.jQuery = jQuery.noConflict();
+      if (callback) {
+        callback();
+      }
+    };
+    document.body.appendChild(script);
+  } else {
+    console.log('jQuery already loaded:', window.jQuery.fn.jquery);
+    if (callback) {
+      callback();
+    }
+  }
+}