@medipass/checkout-sdk 2.0.1 → 3.0.0-alpha.0

package/package.json

@@ -1,29 +1,55 @@
 {
   "name": "@medipass/checkout-sdk",
-  "version": "2.0.1",
+  "version": "3.0.0-alpha.0",
   "description": "Describe medipass-checkout-sdk here",
-  "main": "lib/index.js",
-  "module": "es/index.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
   "files": [
     "es",
     "lib",
     "umd"
   ],
   "scripts": {
-    "build": "nwb build-web-module --copy-files",
+    "build": "yarn rollup -c",
+    "build:types": "tsc --project tsconfig.build.json --module esnext --declarationDir ./dist/types --emitDeclarationOnly --declaration --declarationMap",
+    "check-types": "tsc --noEmit",
+    "clean": "rm -rf dist",
     "develop": "nodemon -w src -x 'yarn build'",
-    "clean": "nwb clean-module",
-    "lint": "eslint src/",
+    "lint": "eslint \"**/*.{ts,tsx}\"",
+    "lint:fix": "eslint \"**/*.{ts,tsx}\" --fix",
     "prepublishOnly": "npm run build",
     "test": "nwb test",
     "test:coverage": "nwb test --coverage",
     "test:watch": "nwb test --server"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@medipass/utils": "11.80.7",
+    "@medipass/web-sdk": "11.64.8"
+  },
   "devDependencies": {
-    "eslint": "5.10.0",
+    "@rollup/plugin-commonjs": "25.0.3",
+    "@rollup/plugin-json": "6.0.0",
+    "@rollup/plugin-node-resolve": "15.0.2",
+    "@rollup/plugin-terser": "0.4.3",
+    "@rollup/plugin-typescript": "11.1.2",
+    "@types/file-saver": "2.0.5",
+    "@types/lodash": "4.14.196",
+    "@typescript-eslint/eslint-plugin": "5.57.1",
+    "@typescript-eslint/parser": "5.57.1",
+    "eslint": "8.39.0",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "7.11.1",
     "nodemon": "2.0.12",
-    "nwb": "0.25.2"
+    "prettier": "2.8.1",
+    "rollup": "3.27.0",
+    "rollup-plugin-import-css": "3.3.1",
+    "rollup-plugin-polyfill-node": "0.12.0",
+    "typescript": "5.1.6"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js"
+    }
   }
 }

package/es/constants.js

@@ -1,16 +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 ROOT_ELEMENT_ID = 'medipass-checkout-sdk-root';

package/es/index.js

@@ -1,272 +0,0 @@
-import _get from 'lodash/get';
-import overlay from './overlay';
-import { ORIGINS, ENVS, EVENTS } from './constants';
-import './style.css';
-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;
-} ////////////////////////////////////////////////////////////
-
-
-var _windowReferenceObject = null; ////////////////////////////////////////////////////////////
-
-var checkoutSDK = {
-  ENVS: ENVS,
-  isCheckoutInitiated: false,
-  isCheckoutComplete: null,
-  env: null,
-  onSuccess: null,
-  onFailure: null,
-  onCancel: null,
-  onCose: null,
-  init: function init(_ref3) {
-    var _this = this;
-
-    var env = _ref3.env,
-        onSuccess = _ref3.onSuccess,
-        onFailure = _ref3.onFailure,
-        onCancel = _ref3.onCancel,
-        onClose = _ref3.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(_ref4) {
-    var _this2 = this;
-
-    var paymentRequestUrl = _ref4.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
-    }); ////////////////////////////////////////////////////////////
-  }
-};
-export default checkoutSDK;

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;

package/es/style.css

@@ -1 +0,0 @@
-@import url("https://fonts.googleapis.com/css?family=Lato:400,700");

package/es/utils/object-to-css.js

@@ -1,3 +0,0 @@
-export default (function (style) {
-  return JSON.stringify(style, null, '\t').replace(/"/g, '').replace(/,\n/g, ';').replace(/\}/g, '').replace(/\{/g, '');
-});

package/lib/constants.js

@@ -1,25 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.ROOT_ELEMENT_ID = exports.EVENTS = exports.ORIGINS = exports.ENVS = void 0;
-
-var _ORIGINS;
-
-var ENVS = {
-  LOCAL: 'local',
-  DEV: 'dev',
-  STG: 'stg',
-  PROD_BLUE: 'prod-blue',
-  PROD: 'prod'
-};
-exports.ENVS = ENVS;
-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);
-exports.ORIGINS = ORIGINS;
-var EVENTS = {
-  SUCCESS: 'success',
-  fAILURE: 'failure',
-  CANCEL: 'cancel'
-};
-exports.EVENTS = EVENTS;
-var ROOT_ELEMENT_ID = 'medipass-checkout-sdk-root';
-exports.ROOT_ELEMENT_ID = ROOT_ELEMENT_ID;