@seamlessdocs/payment-modals 1.0.43 → 1.0.45

package/index.html

@@ -21,29 +21,29 @@
     <script src="https://core.spreedly.com/iframe/express-2.min.js"></script>
     <script src="./build/payment-modals.js"></script>
     <script>
-      const triggers = document.querySelectorAll('.links a');
-      const callbacks = {
-        withoutPay: () => {
+      var triggers = document.querySelectorAll('.links a');
+      var callbacks = {
+        withoutPay: function() {
           console.log('withoutPay');
         },
-        withPay: () => {
+        withPay: function() {
           console.log('withPay');
         },
-        close: () => {
+        close: function() {
           console.log('close');
         },
-        skip: () => {
+        skip: function() {
           console.log('skip');
         },
-        retry: () => {
+        retry: function() {
           console.log('retry');
         },
-        successModalContinue: () => {
+        successModalContinue: function() {
           console.log('successModalContinue');
         }
       };
 
-      triggers[0].addEventListener('click', event => {
+      triggers[0].addEventListener('click', function(event) {
         window.handlePaymentModal.chooseModal({
           title: 'Pay now or later',
           description:
@@ -56,10 +56,10 @@
           }
         });
       });
-      triggers[1].addEventListener('click', event => {
+      triggers[1].addEventListener('click', function(event) {
         window.handlePaymentModal.processingModal();
       });
-      triggers[2].addEventListener('click', event => {
+      triggers[2].addEventListener('click', function(event) {
         window.handlePaymentModal.errorModal({
           isOptional: false,
           callbacks: {
@@ -68,7 +68,7 @@
           }
         });
       });
-      triggers[3].addEventListener('click', event => {
+      triggers[3].addEventListener('click', function(event) {
         window.handlePaymentModal.errorModal({
           isOptional: true,
           errorText: 'error',
@@ -79,11 +79,11 @@
           }
         });
       });
-      triggers[4].addEventListener('click', event => {
+      triggers[4].addEventListener('click', function(event) {
         window.handlePaymentModal.successModal({ description: 'my text' });
       });
 
-      triggers[5].addEventListener('click', event => {
+      triggers[5].addEventListener('click', function(event) {
         window.handlePaymentModal.selectPaymentModal({
           isPaymentRequired: false,
           bankAccountValue: 25,
@@ -93,23 +93,23 @@
           isCreditCardFeeEnable: true,
           isBankAccountFeeEnable: false,
           callbacks: {
-            onPayByBank: () => {
+            onPayByBank: function() {
               console.log('pay by bank');
             },
-            onPayByCreditCard: () => {
+            onPayByCreditCard: function() {
               console.log('pay by credit card');
             },
-            onClose: () => {
+            onClose: function() {
               console.log('close');
             },
-            onSkipPayment: () => {
+            onSkipPayment: function() {
               console.log('onSkipPayment');
             }
           }
         });
       });
 
-      triggers[6].addEventListener('click', event => {
+      triggers[6].addEventListener('click', function(event) {
         window.handlePaymentModal.achPaymentModal({
           amount: 22,
           totalAmount: 24.24,
@@ -117,19 +117,19 @@
           description: 'Text from the description field in the gateway details modal.',
           feeName: 'ololo',
           callbacks: {
-            onPay: (...args) => {
-              setTimeout(() => {
-                alert(JSON.stringify(args, null, 2));
+            onPay: function() {
+              setTimeout(function() {
+                console.log('Pay');
               }, 400);
             },
-            onClose: () => {
+            onClose: function() {
               console.log('close');
             }
           }
         });
       });
 
-      triggers[7].addEventListener('click', event => {
+      triggers[7].addEventListener('click', function(event) {
         window.handlePaymentModal.none();
       });
     </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamlessdocs/payment-modals",
-  "version": "1.0.43",
+  "version": "1.0.45",
   "description": "",
   "main": "build/payment-modals.js",
   "scripts": {
@@ -17,6 +17,7 @@
     "@babel/runtime": "^7.4.5",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.6",
+    "babel-polyfill": "^6.26.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "css-loader": "^2.1.1",
     "eslint": "^5.16.0",
@@ -41,6 +42,7 @@
     "webpack-dev-server": "^3.2.1"
   },
   "dependencies": {
+    "@babel/polyfill": "^7.12.1",
     "babel-plugin-import": "^1.11.0",
     "base64-image-loader": "^1.2.1",
     "classnames": "^2.2.6",

package/src/Components/ACHPaymentModal/ACHPaymentModal.module.css

@@ -121,3 +121,20 @@
 .moneyValue {
   word-break: break-all;
 }
+
+@media (max-width: 520px) {
+  .modal {
+    flex-direction: column;
+  }
+
+  .paymentInfoContainer {
+    width: 100%;
+
+    border-radius: 6px 6px 0px 0px;
+  }
+
+  .paymentFormContainer {
+    box-sizing: border-box;
+    padding: 15px 15px 0px;
+  }
+}

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

@@ -153,11 +153,11 @@
 
 @media (max-width: 520px) {
   .modal {
-    padding: 35px 35px 0px 35px;
+    padding: 15px 15px 0px 15px;
   }
 
   .header {
-    font-size: 26px;
+    font-size: 20px;
   }
 
   .withoutPaymentBtn {
@@ -167,10 +167,20 @@
   .contentContainer {
     margin-top: 10px;
   }
-}
 
-@media (max-width: 360px) {
-  .header {
-    font-size: 24px;
+  .paymentTypeContainer {
+    padding: 10px 14px 14px 14px;
+  }
+
+  .payButton {
+    margin-top: 5px;
+    padding: 5px 0;
+  }
+
+  .paymentTypeLabel {
+    margin-top: 10px;
+
+    font-size: 17px;
+    line-height: 17px;
   }
 }

package/src/index.jsx

@@ -1,3 +1,5 @@
+import '@babel/polyfill';
+
 import React from 'react';
 import ReactDOM from 'react-dom';