@medipass/checkout-sdk 2.0.0 → 2.1.0

package/lib/constants.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.ROOT_ELEMENT_ID = exports.EVENTS = exports.ORIGINS = exports.ENVS = void 0;
+exports.ROOT_ELEMENT_ID = exports.ERROR_MESSAGES = exports.EVENTS = exports.ORIGINS = exports.ENVS = void 0;
 
 var _ORIGINS;
 
@@ -21,5 +21,13 @@ var EVENTS = {
   CANCEL: 'cancel'
 };
 exports.EVENTS = EVENTS;
+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'
+};
+exports.ERROR_MESSAGES = ERROR_MESSAGES;
 var ROOT_ELEMENT_ID = 'medipass-checkout-sdk-root';
 exports.ROOT_ELEMENT_ID = ROOT_ELEMENT_ID;

package/lib/index.js

@@ -11,39 +11,13 @@ var _constants = require("./constants");
 
 require("./style.css");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-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;
-};
+var _initialiseWindow = _interopRequireDefault(require("./initialiseWindow"));
 
-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 = (0, _get2["default"])(window, 'outerHeight') || (0, _get2["default"])(window, 'innerHeight');
-  var windowWidth = (0, _get2["default"])(window, 'outerWidth') || (0, _get2["default"])(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 _requestUpdatePaymentDetails = _interopRequireDefault(require("./requestUpdatePaymentDetails"));
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+////////////////////////////////////////////////////////////
 var _windowReferenceObject = null; ////////////////////////////////////////////////////////////
 
 var checkoutSDK = {
@@ -55,14 +29,14 @@ var checkoutSDK = {
   onFailure: null,
   onCancel: null,
   onCose: null,
-  init: function init(_ref3) {
+  init: function init(_ref) {
     var _this = this;
 
-    var env = _ref3.env,
-        onSuccess = _ref3.onSuccess,
-        onFailure = _ref3.onFailure,
-        onCancel = _ref3.onCancel,
-        onClose = _ref3.onClose;
+    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;
@@ -70,7 +44,7 @@ var checkoutSDK = {
     this.onCancel = onCancel;
     this.onClose = onClose; // Open a blank window
 
-    _windowReferenceObject = initialiseWindow({
+    _windowReferenceObject = (0, _initialiseWindow["default"])({
       url: ''
     });
 
@@ -85,7 +59,7 @@ var checkoutSDK = {
 
     var onClickRelaunch = function onClickRelaunch() {
       if (!_windowReferenceObject) {
-        _windowReferenceObject = initialiseWindow({
+        _windowReferenceObject = (0, _initialiseWindow["default"])({
           url: ''
         });
         return;
@@ -127,10 +101,10 @@ var checkoutSDK = {
 
     var timer = setInterval(checkWindowClosed, 500);
   },
-  createCheckout: function createCheckout(_ref4) {
+  createCheckout: function createCheckout(_ref2) {
     var _this2 = this;
 
-    var paymentRequestUrl = _ref4.paymentRequestUrl;
+    var paymentRequestUrl = _ref2.paymentRequestUrl;
     if (!paymentRequestUrl || !window) return;
     var env = this.env;
     var onSuccess = this.onSuccess;
@@ -152,7 +126,7 @@ var checkoutSDK = {
     var openWindow = function openWindow() {
       // windowReferenceObject may not be defined if browser blocks the pop-up.
       if (!_windowReferenceObject) {
-        _windowReferenceObject = initialiseWindow({
+        _windowReferenceObject = (0, _initialiseWindow["default"])({
           url: paymentRequestUrl
         });
       } else {
@@ -277,6 +251,28 @@ var checkoutSDK = {
       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;
+    (0, _requestUpdatePaymentDetails["default"])({
+      apiKey: apiKey,
+      token: token,
+      patientRefId: patientRefId,
+      env: env,
+      onSuccess: onSuccess,
+      onFailure: onFailure,
+      onCancel: onCancel,
+      onClose: onClose,
+      callbackOrigin: callbackOrigin
+    });
   }
 };
 var _default = checkoutSDK;

package/lib/initialiseWindow.js

@@ -0,0 +1,42 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 = (0, _get2["default"])(window, 'outerHeight') || (0, _get2["default"])(window, 'innerHeight');
+  var windowWidth = (0, _get2["default"])(window, 'outerWidth') || (0, _get2["default"])(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 _default = initialiseWindow;
+exports["default"] = _default;
+module.exports = exports.default;

package/lib/overlay.js

@@ -140,12 +140,21 @@ var overlay = {
     var subHeading2 = createElement({
       window: window,
       element: 'span',
-      text: ' to relaunch and complete your purchase '
+      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: 'or cancel.',
+      text: 'Click here to cancel the payment.',
       onClick: onClickCancel,
       styles: {
         'text-decoration': 'underline',
@@ -156,6 +165,7 @@ var overlay = {
     subHeadingContainer.appendChild(subHeading1);
     subHeadingContainer.appendChild(link1);
     subHeadingContainer.appendChild(subHeading2);
+    subHeadingContainer.appendChild(subHeading3);
     subHeadingContainer.appendChild(link2);
     return subHeadingContainer;
   },

package/lib/requestUpdatePaymentDetails.js

@@ -0,0 +1,244 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
+var _updatePaymentOverlay = _interopRequireDefault(require("./updatePaymentOverlay"));
+
+var _constants = require("./constants");
+
+var _webSdk = _interopRequireDefault(require("@medipass/web-sdk"));
+
+var _initialiseWindow = _interopRequireDefault(require("./initialiseWindow"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+if (!_webSdk["default"].hasInit) {
+  _webSdk["default"].setup();
+}
+
+var updatePaymentDetails = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regenerator["default"].mark(function _callee(_ref) {
+    var apiKey, token, patientRefId, env, onSuccess, onFailure, onCancel, onClose, callbackOrigin, isSessionComplete, sdkConfig, windowReferenceObject, handleClose, onClickRelaunch, checkWindowClosed, onClickCancel, timer, myBusinesses, myBusiness, myBusinessId, patient, patientId, requestPaymentMethodResponse, paymentMethodUpdateLink, openWindow;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            apiKey = _ref.apiKey, token = _ref.token, patientRefId = _ref.patientRefId, env = _ref.env, onSuccess = _ref.onSuccess, onFailure = _ref.onFailure, onCancel = _ref.onCancel, onClose = _ref.onClose, callbackOrigin = _ref.callbackOrigin;
+
+            if (!(!apiKey && !token)) {
+              _context.next = 3;
+              break;
+            }
+
+            throw new Error(_constants.ERROR_MESSAGES.NO_API_KEY_OR_NO_TOKEN);
+
+          case 3:
+            if (patientRefId) {
+              _context.next = 5;
+              break;
+            }
+
+            throw new Error(_constants.ERROR_MESSAGES.NO_PATIENT_REF_ID);
+
+          case 5:
+            if (env) {
+              _context.next = 7;
+              break;
+            }
+
+            throw new Error(_constants.ERROR_MESSAGES.NO_ENVIROMENT_SET);
+
+          case 7:
+            if (callbackOrigin) {
+              _context.next = 9;
+              break;
+            }
+
+            throw new Error(_constants.ERROR_MESSAGES.NO_CALLBACK_ORIGIN);
+
+          case 9:
+            isSessionComplete = false;
+            sdkConfig = {
+              env: env
+            };
+
+            if (env === _constants.ENVS.LOCAL) {
+              sdkConfig.env = _constants.ENVS.DEV;
+            }
+
+            if (env === _constants.ENVS.STG) {
+              sdkConfig.env = 'staging';
+            } // Set Medipass web-sdk config
+
+
+            _webSdk["default"].setConfig(sdkConfig);
+
+            if (apiKey || token) {
+              _webSdk["default"].setToken("Bearer " + (apiKey || token));
+            }
+
+            windowReferenceObject = (0, _initialiseWindow["default"])({
+              url: ''
+            });
+
+            handleClose = function handleClose() {
+              _updatePaymentOverlay["default"].removeOverlay();
+
+              if (!isSessionComplete) {
+                onClose && onClose();
+              }
+
+              if (!windowReferenceObject) return;
+              windowReferenceObject.close();
+            };
+
+            onClickRelaunch = function onClickRelaunch() {
+              if (!windowReferenceObject) {
+                windowReferenceObject = (0, _initialiseWindow["default"])({
+                  url: ''
+                });
+                return;
+              }
+
+              windowReferenceObject.focus();
+            };
+
+            checkWindowClosed = function checkWindowClosed() {
+              if ((0, _get2["default"])(windowReferenceObject, 'closed')) {
+                clearInterval(timer);
+                handleClose();
+              }
+            };
+
+            onClickCancel = function onClickCancel() {
+              _updatePaymentOverlay["default"].removeOverlay();
+
+              if (windowReferenceObject) {
+                windowReferenceObject.close();
+              }
+
+              clearInterval(timer);
+              onClose && onClose();
+            }; // This creates the gray overlay covering the client's screen while patient update their payment information.
+
+
+            _updatePaymentOverlay["default"].createOverlay({
+              window: window,
+              onClickRelaunch: onClickRelaunch,
+              onClickCancel: onClickCancel
+            }); // Check the window every 0.5 seconds to see if it has been closed.
+
+
+            timer = setInterval(checkWindowClosed, 500);
+            _context.next = 24;
+            return _webSdk["default"].businesses.getMyBusinesses();
+
+          case 24:
+            myBusinesses = _context.sent;
+            myBusiness = myBusinesses.items[0];
+            myBusinessId = (0, _get2["default"])(myBusiness, '_id');
+            _context.next = 29;
+            return _webSdk["default"].patients.getBusinessPatientByRefId(myBusinessId, patientRefId);
+
+          case 29:
+            patient = _context.sent;
+            patientId = (0, _get2["default"])(patient, '_id');
+            _context.next = 33;
+            return _webSdk["default"].patients.requestUpdatePatientPaymentMethod(myBusinessId, patientId, {
+              sms: {
+                sendToPatientRecordMobile: false,
+                mobile: patient.mobile
+              },
+              callbackOrigin: callbackOrigin
+            });
+
+          case 33:
+            requestPaymentMethodResponse = _context.sent;
+            paymentMethodUpdateLink = (0, _get2["default"])(requestPaymentMethodResponse, 'paymentMethodUpdateLink');
+
+            openWindow = function openWindow() {
+              // windowReferenceObject may not be defined if browser blocks the pop-up.
+              if (!windowReferenceObject) {
+                windowReferenceObject = (0, _initialiseWindow["default"])({
+                  url: paymentMethodUpdateLink
+                });
+              } else {
+                windowReferenceObject.location.replace(paymentMethodUpdateLink);
+              }
+
+              if (!windowReferenceObject) {
+                return;
+              } // Start listening for incoming messages    
+
+
+              window.addEventListener('message', function (e) {
+                return onReceiveMessage(e);
+              });
+
+              var onReceiveMessage = function onReceiveMessage(e) {
+                if (!e) return;
+                getMessage(e);
+              };
+
+              var getMessage = function getMessage(e) {
+                var origin = _constants.ORIGINS[env];
+                if (!e || !origin) return; // Ensure the message is coming from the correct origin.
+
+                if ((0, _get2["default"])(e, 'origin') !== origin) return;
+                var event = (0, _get2["default"])(e, 'data.event');
+                if (!event) return;
+
+                if (event === _constants.EVENTS.SUCCESS) {
+                  isSessionComplete = true; // Give 1.5 seconds for the user to see the success page before auto-closing the pop-up.
+
+                  setTimeout(function () {
+                    onSuccess && onSuccess();
+                    windowReferenceObject.close();
+                  }, 1500);
+                }
+
+                if (event === _constants.EVENTS.fAILURE) {
+                  isSessionComplete = true;
+                  onFailure && onFailure();
+                }
+
+                if (event === _constants.EVENTS.CANCEL) {
+                  isSessionComplete = true; // Give 1.5 seconds for the user to see the reject page before auto-closing the pop-up.
+
+                  setTimeout(function () {
+                    onCancel && onCancel();
+                    windowReferenceObject.close();
+                  }, 1500);
+                }
+              };
+
+              return windowReferenceObject;
+            };
+
+            openWindow();
+
+          case 37:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function updatePaymentDetails(_x) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+
+var _default = updatePaymentDetails;
+exports["default"] = _default;
+module.exports = exports.default;

package/lib/updatePaymentOverlay.js

@@ -0,0 +1,196 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _constants = require("./constants");
+
+var _objectToCss = _interopRequireDefault(require("./utils/object-to-css"));
+
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 = (0, _objectToCss["default"])(styles);
+  }
+
+  if ((0, _get2["default"])(newElement, 'addEventListener') && onClick) {
+    newElement.addEventListener('click', function () {
+      onClick();
+    });
+  }
+
+  return newElement;
+}
+
+var overlay = {
+  contentElement: null,
+  removeOverlay: function removeOverlay() {
+    var containerDiv = document.getElementById(_constants.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: _constants.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: 'Updates to patient payment information are 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 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 updating patient payment details.'
+    });
+    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 this request.',
+      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 && (0, _get2["default"])(this.contentElement, 'appendChild')) {
+      this.contentElement.appendChild(newSubheading);
+    }
+  }
+};
+var _default = overlay;
+exports["default"] = _default;
+module.exports = exports.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medipass/checkout-sdk",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Describe medipass-checkout-sdk here",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -19,7 +19,10 @@
     "test:coverage": "nwb test --coverage",
     "test:watch": "nwb test --server"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@medipass/utils": "11.69.2",
+    "@medipass/web-sdk": "11.43.0"
+  },
   "devDependencies": {
     "eslint": "5.10.0",
     "eslint-plugin-react": "7.11.1",