@seamlessdocs/payment-modals 1.0.55 → 1.0.57

package/index.html

@@ -15,6 +15,9 @@
       <a href="#" id="successModal">Open "Successful Payment" modal</a>
       <a href="#" id="selectPaymentModal">Open "Select Payment" modal</a>
       <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="govOSPayInvoiceSummaryModal">Open "GovOS Pay Invoice Summary" modal</a>
       <a href="#" id="none">Close</a>
     </div>
     <div id="payment-modal"></div>
@@ -130,6 +133,134 @@
       });
 
       triggers[7].addEventListener('click', function(event) {
+        window.handlePaymentModal.govOSPayACHPaymentModal({
+          amount: 2424,
+          paymentCorrelationId: String(Math.random()).slice(2),
+          paymentConfig: {
+            providerAccountCode: "54c574a2-5271-4c93-bd68-57e39930a52a",
+            mapping: {
+              platformApplicationCode: "FORMS",
+              platformTenantCode: "TESTFORCE",
+              providerName: "GovOS Pay",
+              accountName: "Test studio 3",
+              configuration: {
+                accessCredentials: {
+                  gatewayName: "GovOS Pay",
+                  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',
+          callbacks: {
+            onPay: function () {
+              setTimeout(function () {
+                console.log('Pay');
+              }, 400);
+            },
+            onClose: function() {
+              console.log('close');
+            }
+          }
+        });
+      });
+
+      triggers[8].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: "GovOS Pay",
+              accountName: "Test studio 3",
+              configuration: {
+                accessCredentials: {
+                  gatewayName: "GovOS Pay",
+                  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',
+          callbacks: {
+            onPay: function () {
+              setTimeout(function () {
+                console.log('Pay');
+              }, 400);
+            },
+            onClose: function() {
+              console.log('close');
+            }
+          }
+        });
+      });
+
+      triggers[9].addEventListener('click', function(event) {
+        window.handlePaymentModal.govOSPayInvoiceSummaryModal({
+          transactionData: [
+            {
+              entityName: 'Test entity',
+              lineItems: [
+                {
+                  title: 'Test title',
+                  description: 'Test description',
+                  quantity: 1,
+                  unitPrice: 100,
+                },
+                {
+                  title: 'Test Fee',
+                  description: 'Test description 2',
+                  quantity: 1,
+                  unitPrice: 200,
+                }
+              ],
+            }
+          ],
+          callbacks: {
+            onClose: function() {
+              console.log('close');
+            },
+            onSubmit: function() {
+              console.log('submit');
+            }
+          }
+        });
+      });
+
+      triggers[10].addEventListener('click', function(event) {
         window.handlePaymentModal.none();
       });
     </script>

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@seamlessdocs/payment-modals",
-  "version": "1.0.55",
+  "version": "1.0.57",
   "description": "Payment modals for SeamlessDocs",
   "main": "build/payment-modals.js",
   "repository": {
-    "url": "https://github.com/SeamlessDocsDev/PaymentModals"    
+    "url": "https://github.com/SeamlessDocsDev/PaymentModals"
   },
   "scripts": {
     "start": "webpack-dev-server --mode development",
@@ -44,6 +44,7 @@
     "webpack-dev-server": "^3.2.1"
   },
   "dependencies": {
+    "@kofile/platform-react-payrix": "1.6.15",
     "babel-plugin-import": "^1.11.0",
     "base64-image-loader": "^1.2.1",
     "classnames": "^2.2.6",

package/src/Components/GovOSPayACHPaymentModal/GovOSPayACHPaymentModal.module.css

@@ -0,0 +1,40 @@
+.modalContainer {
+  overflow-y: auto;
+
+  box-sizing: border-box;
+  max-width: 600px;
+  height: 100%;
+  max-height: calc(100vh - 150px);
+
+  border-radius: none;
+  background: none;
+}
+
+.modal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+
+  border-radius: 6px;
+  background: #fff;
+}
+
+.backIcon {
+  margin-right: 8px;
+}
+
+.backTextContainer {
+  display: flex;
+  align-items: center;
+
+  margin-bottom: 10px;
+
+  cursor: pointer;
+
+  color: white;
+
+  font-size: 13px;
+  line-height: 16px;
+}

package/src/Components/GovOSPayACHPaymentModal/index.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ACHPayment } from '@kofile/platform-react-payrix';
+
+import Modal from '../Modal';
+
+import backIcon from '../../assets/img/back.svg';
+
+import styles from './GovOSPayACHPaymentModal.module.css';
+
+const GovOSPayACHPaymentModal = ({
+  amount,
+  onPay,
+  onClose,
+  paymentCorrelationId,
+  paymentConfig,
+  transactionUrl,
+}) => {
+  return (
+    <Modal className={styles.modalContainer}>
+      <div
+        className={styles.backTextContainer}
+        onClick={onClose}
+        onKeyDown={onClose}
+        role="button"
+        tabIndex="0"
+      >
+        <img className={styles.backIcon} src={backIcon} alt="back" />
+        Back to form
+      </div>
+      <div className={styles.modal}>
+        <ACHPayment
+          lineItems={[]}
+          providerConfig={paymentConfig}
+          applicationName={'GovOS Studio'}
+          transactionUrl={transactionUrl}
+          correlationId={paymentCorrelationId}
+          amount={amount}
+          onSuccess={onPay}
+        />
+      </div>
+    </Modal>
+  );
+};
+
+GovOSPayACHPaymentModal.propTypes = {
+  onPay: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+  amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  paymentCorrelationId: PropTypes.string.isRequired,
+  paymentConfig: PropTypes.object.isRequired,
+  transactionUrl: PropTypes.string.isRequired,
+};
+
+export default GovOSPayACHPaymentModal;

package/src/Components/GovOSPayCardPaymentModal/GovOSPayCardPaymentModal.module.css

@@ -0,0 +1,40 @@
+.modalContainer {
+  overflow-y: auto;
+
+  box-sizing: border-box;
+  max-width: 600px;
+  height: 100%;
+  max-height: calc(100vh - 150px);
+
+  border-radius: none;
+  background: none;
+}
+
+.modal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+
+  border-radius: 6px;
+  background: #fff;
+}
+
+.backIcon {
+  margin-right: 8px;
+}
+
+.backTextContainer {
+  display: flex;
+  align-items: center;
+
+  margin-bottom: 10px;
+
+  cursor: pointer;
+
+  color: white;
+
+  font-size: 13px;
+  line-height: 16px;
+}

package/src/Components/GovOSPayCardPaymentModal/index.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CardPayment } from '@kofile/platform-react-payrix';
+
+import Modal from '../Modal';
+
+import backIcon from '../../assets/img/back.svg';
+
+import styles from './GovOSPayCardPaymentModal.module.css';
+
+const GovOSPayCardPaymentModal = ({
+  amount,
+  onPay,
+  onClose,
+  paymentCorrelationId,
+  paymentConfig,
+  transactionUrl,
+}) => {
+  return (
+    <Modal className={styles.modalContainer}>
+      <div
+        className={styles.backTextContainer}
+        onClick={onClose}
+        onKeyDown={onClose}
+        role="button"
+        tabIndex="0"
+      >
+        <img className={styles.backIcon} src={backIcon} alt="back" />
+        Back to form
+      </div>
+      <div className={styles.modal}>
+        <CardPayment
+          lineItems={[]}
+          providerConfig={paymentConfig}
+          applicationName={'GovOS Studio'}
+          transactionUrl={transactionUrl}
+          correlationId={paymentCorrelationId}
+          amount={amount}
+          onSuccess={onPay}
+        />
+      </div>
+    </Modal>
+  );
+};
+
+GovOSPayCardPaymentModal.propTypes = {
+  onPay: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+  amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  paymentCorrelationId: PropTypes.string.isRequired,
+  paymentConfig: PropTypes.object.isRequired,
+  transactionUrl: PropTypes.string.isRequired,
+};
+
+export default GovOSPayCardPaymentModal;

package/src/Components/GovOSPayInvoiceSummaryModal/GovOSPayInvoiceSummaryModal.module.css

@@ -0,0 +1,40 @@
+.modalContainer {
+  overflow-y: auto;
+
+  box-sizing: border-box;
+  max-width: 600px;
+  height: 100%;
+  max-height: calc(100vh - 150px);
+
+  border-radius: none;
+  background: none;
+}
+
+.modal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+
+  border-radius: 6px;
+  background: #fff;
+}
+
+.backIcon {
+  margin-right: 8px;
+}
+
+.backTextContainer {
+  display: flex;
+  align-items: center;
+
+  margin-bottom: 10px;
+
+  cursor: pointer;
+
+  color: white;
+
+  font-size: 13px;
+  line-height: 16px;
+}

package/src/Components/GovOSPayInvoiceSummaryModal/index.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { InvoiceSummary } from '@kofile/platform-react-payrix';
+
+import Modal from '../Modal';
+
+import backIcon from '../../assets/img/back.svg';
+
+import styles from './GovOSPayInvoiceSummaryModal.module.css';
+
+const GovOSPayInvoiceSummaryModal = ({
+  onSubmit,
+  onClose,
+  transactionData,
+}) => {
+  return (
+    <Modal className={styles.modalContainer}>
+      <div
+        className={styles.backTextContainer}
+        onClick={onClose}
+        onKeyDown={onClose}
+        role="button"
+        tabIndex="0"
+      >
+        <img className={styles.backIcon} src={backIcon} alt="back" />
+        Back to form
+      </div>
+      <div className={styles.modal}>
+        <InvoiceSummary
+          onSubmit={onSubmit}
+          transactionData={transactionData}
+        />
+      </div>
+    </Modal>
+  );
+};
+
+GovOSPayInvoiceSummaryModal.propTypes = {
+  onSubmit: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+  transactionData: PropTypes.arrayOf(PropTypes.shape({
+    entityName: PropTypes.string,
+    lineItems: PropTypes.arrayOf(PropTypes.shape({
+      title: PropTypes.string,
+      description: PropTypes.string,
+      quantity: PropTypes.number,
+      unitPrice: PropTypes.number,
+    })),
+  })).isRequired,
+};
+
+export default GovOSPayInvoiceSummaryModal;

package/src/Components/SelectPaymentModal/SelectPaymentModal.module.css

@@ -103,7 +103,7 @@
 }
 
 .creditCardIcon {
-  margin-top: 10px;
+  margin: 7.5px 0;
 }
 
 .paymentValue {

package/src/index.jsx

@@ -8,6 +8,9 @@ import SuccessModal from './Components/SuccessModal';
 import EmptyModal from './Components/EmptyModal';
 import SelectPaymentModal from './Components/SelectPaymentModal';
 import ACHPaymentModal from './Components/ACHPaymentModal';
+import GovOSPayACHPaymentModal from './Components/GovOSPayACHPaymentModal';
+import GovOSPayCardPaymentModal from './Components/GovOSPayCardPaymentModal';
+import GovOSPayInvoiceSummaryModal from './Components/GovOSPayInvoiceSummaryModal';
 
 import './OpenViewStyles.css';
 
@@ -85,6 +88,45 @@ handlePaymentModal.achPaymentModal = settings => {
   );
 };
 
+handlePaymentModal.govOSPayACHPaymentModal = settings => {
+  ReactDOM.render(
+    <GovOSPayACHPaymentModal
+      onPay={settings.callbacks.onPay}
+      onClose={settings.callbacks.onClose}
+      amount={settings.amount}
+      paymentCorrelationId={settings.paymentCorrelationId}
+      paymentConfig={settings.paymentConfig}
+      transactionUrl={settings.transactionUrl}
+    />,
+    document.getElementById('payment-modal')
+  );
+}
+
+handlePaymentModal.govOSPayCardPaymentModal = settings => {
+  ReactDOM.render(
+    <GovOSPayCardPaymentModal
+      onPay={settings.callbacks.onPay}
+      onClose={settings.callbacks.onClose}
+      amount={settings.amount}
+      paymentCorrelationId={settings.paymentCorrelationId}
+      paymentConfig={settings.paymentConfig}
+      transactionUrl={settings.transactionUrl}
+    />,
+    document.getElementById('payment-modal')
+  );
+}
+
+handlePaymentModal.govOSPayInvoiceSummaryModal = settings => {
+  ReactDOM.render(
+    <GovOSPayInvoiceSummaryModal
+      onSubmit={settings.callbacks.onSubmit}
+      onClose={settings.callbacks.onClose}
+      transactionData={settings.transactionData}
+    />,
+    document.getElementById('payment-modal')
+  );
+}
+
 handlePaymentModal.none = () => {
   ReactDOM.render(<EmptyModal />, document.getElementById('payment-modal'));
 };