@medipass/checkout-sdk 2.1.0 → 3.0.0-alpha.1

package/{es/utils/object-to-css.js → src/utils/object-to-css.ts}

@@ -1,3 +1,5 @@
-export default (function (style) {
+const toCss = (style: Record<string, string>) => {
   return JSON.stringify(style, null, '\t').replace(/"/g, '').replace(/,\n/g, ';').replace(/\}/g, '').replace(/\{/g, '');
-});
+};
+
+export default toCss;

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+    "compilerOptions": {
+      "target": "ESNext",
+      "useDefineForClassFields": true,
+      "lib": ["ESNext", "DOM", "DOM.Iterable"],
+      "module": "ESNext",
+      "skipLibCheck": true,
+      "allowJs": true,
+      "esModuleInterop": true,
+      "baseUrl": "src",
+      "declaration": true,
+      "sourceMap": false,
+      "rootDir": "./src",
+  
+      /* Bundler mode */
+      "moduleResolution": "Node",
+      "resolveJsonModule": true,
+      "isolatedModules": true,
+      "jsx": "react",
+      "outDir": "./dist",
+      "allowSyntheticDefaultImports": true,
+  
+      /* Linting */
+      "strict": true,
+      "noUnusedLocals": false,
+      "noUnusedParameters": false,
+      "noFallthroughCasesInSwitch": true,
+  
+      "typeRoots" : ["node_modules/@types", "types"],
+    },
+    "include": ["src", "types"]
+}

package/es/constants.js

@@ -1,23 +0,0 @@
-var _ORIGINS;
-
-export var ENVS = {
-  LOCAL: 'local',
-  DEV: 'dev',
-  STG: 'stg',
-  PROD_BLUE: 'prod-blue',
-  PROD: 'prod'
-};
-export var ORIGINS = (_ORIGINS = {}, _ORIGINS[ENVS.LOCAL] = 'http://localhost:3001', _ORIGINS[ENVS.DEV] = 'https://dev-my.medipass.io', _ORIGINS[ENVS.STG] = 'https://stg-my.medipass.io', _ORIGINS[ENVS.PROD_BLUE] = 'https://my-blue.medipass.io', _ORIGINS[ENVS.PROD] = 'https://my.medipass.io', _ORIGINS);
-export var EVENTS = {
-  SUCCESS: 'success',
-  fAILURE: 'failure',
-  CANCEL: 'cancel'
-};
-export var ERROR_MESSAGES = {
-  NO_API_KEY_OR_NO_TOKEN: 'apiKey or token is not provided',
-  NO_PATIENT_REF_ID: 'patientRefId is not provided',
-  NO_ENVIROMENT_SET: 'environment must be set',
-  NO_CALLBACK_ORIGIN: 'callbackOrigin must be set',
-  GENERAL_ERROR: 'Please ensure that all required values are passed'
-};
-export var ROOT_ELEMENT_ID = 'medipass-checkout-sdk-root';

package/es/index.js

@@ -1,264 +0,0 @@
-import _get from 'lodash/get';
-import overlay from './overlay';
-import { ORIGINS, ENVS, EVENTS } from './constants';
-import './style.css';
-import initialiseWindow from './initialiseWindow';
-import updatePaymentDetails from './requestUpdatePaymentDetails'; ////////////////////////////////////////////////////////////
-
-var _windowReferenceObject = null; ////////////////////////////////////////////////////////////
-
-var checkoutSDK = {
-  ENVS: ENVS,
-  isCheckoutInitiated: false,
-  isCheckoutComplete: null,
-  env: null,
-  onSuccess: null,
-  onFailure: null,
-  onCancel: null,
-  onCose: null,
-  init: function init(_ref) {
-    var _this = this;
-
-    var env = _ref.env,
-        onSuccess = _ref.onSuccess,
-        onFailure = _ref.onFailure,
-        onCancel = _ref.onCancel,
-        onClose = _ref.onClose;
-    if (!env) return;
-    this.env = env;
-    this.onSuccess = onSuccess;
-    this.onFailure = onFailure;
-    this.onCancel = onCancel;
-    this.onClose = onClose; // Open a blank window
-
-    _windowReferenceObject = initialiseWindow({
-      url: ''
-    });
-
-    var handleClose = function handleClose() {
-      overlay.removeOverlay();
-      onClose && onClose();
-      if (!_windowReferenceObject) return;
-
-      _windowReferenceObject.close();
-    };
-
-    var onClickRelaunch = function onClickRelaunch() {
-      if (!_windowReferenceObject) {
-        _windowReferenceObject = initialiseWindow({
-          url: ''
-        });
-        return;
-      }
-
-      _windowReferenceObject.focus();
-    };
-
-    var checkWindowClosed = function checkWindowClosed() {
-      if (_this.isCheckoutInitiated) {
-        clearInterval(timer);
-        return;
-      }
-
-      if (_get(_windowReferenceObject, 'closed')) {
-        clearInterval(timer);
-        handleClose();
-      }
-    };
-
-    var onClickCancel = function onClickCancel() {
-      overlay.removeOverlay();
-
-      if (_windowReferenceObject) {
-        _windowReferenceObject.close();
-      }
-
-      clearInterval(timer);
-      onClose && onClose();
-    }; // This creates the gray overlay covering the client's screen while payment is in progress.
-
-
-    overlay.createOverlay({
-      window: window,
-      onClickRelaunch: onClickRelaunch,
-      onClickCancel: onClickCancel
-    }); // Check the window every 0.5 seconds to see if it has been closed.
-
-    var timer = setInterval(checkWindowClosed, 500);
-  },
-  createCheckout: function createCheckout(_ref2) {
-    var _this2 = this;
-
-    var paymentRequestUrl = _ref2.paymentRequestUrl;
-    if (!paymentRequestUrl || !window) return;
-    var env = this.env;
-    var onSuccess = this.onSuccess;
-    var onFailure = this.onFailure;
-    var onCancel = this.onCancel;
-    var onClose = this.onClose; ////////////////////////////////////////////////////////////
-
-    var checkWindowClosed = function checkWindowClosed() {
-      if (_get(_windowReferenceObject, 'closed')) {
-        clearInterval(timer);
-        handleClose();
-      }
-    }; // Check the window every 0.5 seconds to see if it has been closed.
-
-
-    var timer = setInterval(checkWindowClosed, 500);
-    this.isCheckoutInitiated = true; ////////////////////////////////////////////////////////////
-
-    var openWindow = function openWindow() {
-      // windowReferenceObject may not be defined if browser blocks the pop-up.
-      if (!_windowReferenceObject) {
-        _windowReferenceObject = initialiseWindow({
-          url: paymentRequestUrl
-        });
-      } else {
-        _windowReferenceObject.location.replace(paymentRequestUrl);
-      }
-
-      if (!_windowReferenceObject) {
-        return;
-      } // Start listening for incoming messages    
-
-
-      window.addEventListener('message', function (e) {
-        return onReceiveMessage(e);
-      });
-
-      var onReceiveMessage = function onReceiveMessage(e) {
-        if (!e) return;
-        var transactionId = getMessage(e);
-
-        if (transactionId) {
-          _this2.isCheckoutComplete = true;
-        }
-      };
-
-      var getMessage = function getMessage(e) {
-        var origin = ORIGINS[env];
-        if (!e || !origin) return; // Ensure the message is coming from the correct origin.
-
-        if (_get(e, 'origin') !== origin) return;
-
-        var event = _get(e, 'data.event');
-
-        var transactionId = _get(e, 'data.transactionId');
-
-        var receiptAutoSent = _get(e, 'data.receiptAutoSent');
-
-        if (!event || !transactionId) return;
-
-        if (event === EVENTS.SUCCESS) {
-          if (receiptAutoSent) {
-            // Give 1.5 seconds for the user to see the success page before auto-closing the pop-up.
-            setTimeout(function () {
-              onSuccess && onSuccess({
-                transactionId: transactionId
-              });
-
-              _windowReferenceObject.close();
-            }, 1500);
-          } else {
-            onSuccess && onSuccess({
-              transactionId: transactionId
-            });
-          }
-
-          return transactionId;
-        }
-
-        if (event === EVENTS.fAILURE) {
-          onFailure && onFailure({
-            transactionId: transactionId
-          });
-          return transactionId;
-        }
-
-        if (event === EVENTS.CANCEL) {
-          // Give 1.5 seconds for the user to see the reject page before auto-closing the pop-up.
-          setTimeout(function () {
-            onCancel && onCancel({
-              transactionId: transactionId
-            });
-
-            _windowReferenceObject.close();
-          }, 1500);
-          return transactionId;
-        }
-      };
-
-      return _windowReferenceObject;
-    }; ////////////////////////////////////////////////////////////
-    // open the pop-up
-
-
-    openWindow(); ////////////////////////////////////////////////////////////
-
-    var handleClose = function handleClose() {
-      // We need to remove the gray overlay covering the client's screen.
-      overlay.removeOverlay(); // If the pop-up has been closed before a payment action has been taken out, then we
-      // need to invoke the onClose callback.
-
-      if (!_this2.isCheckoutComplete) {
-        onClose && onClose();
-      }
-
-      if (!_windowReferenceObject) return;
-
-      _windowReferenceObject.close();
-    }; ////////////////////////////////////////////////////////////
-
-
-    var onClickRelaunch = function onClickRelaunch() {
-      if (!_windowReferenceObject) {
-        _windowReferenceObject = openWindow();
-        return;
-      }
-
-      _windowReferenceObject.focus();
-    };
-
-    var onClickCancel = function onClickCancel() {
-      if (_windowReferenceObject) {
-        _windowReferenceObject.close();
-      } else {
-        clearInterval(timer);
-      }
-
-      overlay.removeOverlay();
-      onClose && onClose();
-    }; // Reset the relaunch and cancel functions on the subheading
-
-
-    overlay.updateSubheading({
-      window: window,
-      onClickRelaunch: onClickRelaunch,
-      onClickCancel: onClickCancel
-    }); ////////////////////////////////////////////////////////////
-  },
-  requestUpdatePaymentDetails: function requestUpdatePaymentDetails(_ref3) {
-    var apiKey = _ref3.apiKey,
-        token = _ref3.token,
-        patientRefId = _ref3.patientRefId,
-        env = _ref3.env,
-        onSuccess = _ref3.onSuccess,
-        onFailure = _ref3.onFailure,
-        onCancel = _ref3.onCancel,
-        onClose = _ref3.onClose,
-        callbackOrigin = _ref3.callbackOrigin;
-    updatePaymentDetails({
-      apiKey: apiKey,
-      token: token,
-      patientRefId: patientRefId,
-      env: env,
-      onSuccess: onSuccess,
-      onFailure: onFailure,
-      onCancel: onCancel,
-      onClose: onClose,
-      callbackOrigin: callbackOrigin
-    });
-  }
-};
-export default checkoutSDK;

package/es/initialiseWindow.js

@@ -1,34 +0,0 @@
-import _get from 'lodash/get';
-var POPUP_WIDTH = 450;
-
-var getWindowFeatures = function getWindowFeatures(_ref) {
-  var height = _ref.height,
-      width = _ref.width,
-      left = _ref.left,
-      top = _ref.top;
-  return "menubar=no, location=no, resizable=no, scrollbars=yes, status=no, height=" + height + ", width=" + width + ", left=" + left + ", top=" + top;
-};
-
-function initialiseWindow(_ref2) {
-  var url = _ref2.url;
-  if (!window) return; // The target window could either be in an iframe, or just a normal standalone window.
-  // We need to grab the correct window height and width for calculating dimensions.
-
-  var windowHeight = _get(window, 'outerHeight') || _get(window, 'innerHeight');
-
-  var windowWidth = _get(window, 'outerWidth') || _get(window, 'innerWidth');
-
-  var popupHeight = windowHeight * 0.80;
-  var popupWidth = windowWidth > POPUP_WIDTH ? POPUP_WIDTH : windowWidth * 0.25;
-  var xPosition = windowWidth / 2 - popupWidth / 2;
-  var yPosition = windowHeight / 2 - popupHeight / 2;
-  var windowRef = window.open(url, 'Medipass Checkout', getWindowFeatures({
-    height: popupHeight,
-    width: popupWidth,
-    left: xPosition,
-    top: yPosition
-  }));
-  return windowRef;
-}
-
-export default initialiseWindow;

package/es/overlay.js

@@ -1,184 +0,0 @@
-import { ROOT_ELEMENT_ID } from './constants';
-import toCss from './utils/object-to-css';
-import _get from 'lodash/get';
-var SUBHEADING_ELEMENT_ID = 'medipass-checkout-sdk-subheading';
-
-function createElement(_ref) {
-  var window = _ref.window,
-      element = _ref.element,
-      text = _ref.text,
-      id = _ref.id,
-      styles = _ref.styles,
-      onClick = _ref.onClick;
-  if (!window) return;
-  var newElement = window.document.createElement(element);
-
-  if (text) {
-    newElement.innerHTML = text;
-  }
-
-  if (id) {
-    newElement.id = id;
-  }
-
-  if (styles) {
-    newElement.style.cssText = toCss(styles);
-  }
-
-  if (_get(newElement, 'addEventListener') && onClick) {
-    newElement.addEventListener('click', function () {
-      onClick();
-    });
-  }
-
-  return newElement;
-}
-
-var overlay = {
-  contentElement: null,
-  removeOverlay: function removeOverlay() {
-    var containerDiv = document.getElementById(ROOT_ELEMENT_ID);
-    if (!containerDiv) return;
-    containerDiv.remove();
-  },
-  createOverlay: function createOverlay(_ref2) {
-    var window = _ref2.window,
-        onClickRelaunch = _ref2.onClickRelaunch,
-        onClickCancel = _ref2.onClickCancel;
-    if (!window) return;
-    var containerDiv = createElement({
-      window: window,
-      element: 'div',
-      id: ROOT_ELEMENT_ID,
-      styles: {
-        'z-index': '2147483100',
-        position: 'fixed',
-        top: '0',
-        left: '0',
-        width: '100%',
-        height: '100%',
-        'background-color': 'rgba(0, 0, 0, 0.8)',
-        'font-family': 'Lato',
-        color: 'white',
-        display: 'flex'
-      }
-    });
-    var content = createElement({
-      window: window,
-      element: 'div',
-      styles: {
-        'max-width': '360px',
-        'margin-left': 'auto',
-        'margin-right': 'auto',
-        'margin-top': 'auto',
-        'margin-bottom': 'auto',
-        'text-align': 'center'
-      }
-    });
-    this.contentElement = content; ////////////////////////////////////////////////////////////  
-
-    var heading = createElement({
-      window: window,
-      element: 'div',
-      text: 'Secure Medipass payment in progress',
-      styles: {
-        color: 'white',
-        'font-size': '35px',
-        'font-weight': '600',
-        'margin-bottom': '30px'
-      }
-    }); ////////////////////////////////////////////////////////////
-
-    var subHeading = this.createSubHeading({
-      window: window,
-      onClickRelaunch: onClickRelaunch,
-      onClickCancel: onClickCancel
-    }); ////////////////////////////////////////////////////////////
-
-    content.appendChild(heading);
-    content.appendChild(subHeading);
-    containerDiv.appendChild(content); ////////////////////////////////////////////////////////////
-
-    window.document.body.appendChild(containerDiv);
-  },
-  createSubHeading: function createSubHeading(_ref3) {
-    var window = _ref3.window,
-        onClickRelaunch = _ref3.onClickRelaunch,
-        onClickCancel = _ref3.onClickCancel;
-    if (!window) return;
-    var subHeadingContainer = createElement({
-      window: window,
-      id: SUBHEADING_ELEMENT_ID,
-      element: 'div'
-    });
-    var subHeading1 = createElement({
-      window: window,
-      element: 'div',
-      text: 'Don\'t see the payment window?'
-    });
-    var link1 = createElement({
-      window: window,
-      element: 'a',
-      text: 'Click here',
-      onClick: onClickRelaunch,
-      styles: {
-        'text-decoration': 'underline',
-        cursor: 'pointer',
-        'font-weight': '600'
-      }
-    });
-    var subHeading2 = createElement({
-      window: window,
-      element: 'span',
-      text: ' to relaunch and complete your payment.'
-    });
-    var subHeading3 = createElement({
-      window: window,
-      element: 'div',
-      text: 'OR',
-      styles: {
-        'margin-top': '20px',
-        'margin-bottom': '20px'
-      }
-    });
-    var link2 = createElement({
-      window: window,
-      element: 'a',
-      text: 'Click here to cancel the payment.',
-      onClick: onClickCancel,
-      styles: {
-        'text-decoration': 'underline',
-        cursor: 'pointer',
-        'font-weight': '600'
-      }
-    });
-    subHeadingContainer.appendChild(subHeading1);
-    subHeadingContainer.appendChild(link1);
-    subHeadingContainer.appendChild(subHeading2);
-    subHeadingContainer.appendChild(subHeading3);
-    subHeadingContainer.appendChild(link2);
-    return subHeadingContainer;
-  },
-  updateSubheading: function updateSubheading(_ref4) {
-    var window = _ref4.window,
-        onClickRelaunch = _ref4.onClickRelaunch,
-        onClickCancel = _ref4.onClickCancel;
-    if (!window) return;
-    var subheaderElement = document.getElementById(SUBHEADING_ELEMENT_ID);
-
-    if (subheaderElement) {
-      subheaderElement.remove();
-    }
-
-    var newSubheading = this.createSubHeading({
-      window: window,
-      onClickRelaunch: onClickRelaunch,
-      onClickCancel: onClickCancel
-    });
-
-    if (this.contentElement && _get(this.contentElement, 'appendChild')) {
-      this.contentElement.appendChild(newSubheading);
-    }
-  }
-};
-export default overlay;