npm - @medipass/checkout-sdk - Versions diffs - 2.0.0 → 2.1.0 - Mend

@medipass/checkout-sdk 2.0.0 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/README.md +64 -3
package/es/constants.js +7 -0
package/es/index.js +32 -40
package/es/initialiseWindow.js +34 -0
package/es/overlay.js +12 -2
package/es/requestUpdatePaymentDetails.js +232 -0
package/es/updatePaymentOverlay.js +184 -0
package/lib/constants.js +9 -1
package/lib/index.js +37 -41
package/lib/initialiseWindow.js +42 -0
package/lib/overlay.js +12 -2
package/lib/requestUpdatePaymentDetails.js +244 -0
package/lib/updatePaymentOverlay.js +196 -0
package/package.json +5 -2
package/umd/checkout-sdk.js +49346 -1115
package/umd/checkout-sdk.min.js +30 -2
package/umd/checkout-sdk.min.js.map +1 -1
package/umd/main.3a4213e0.css +1 -1
package/umd/main.3a4213e0.css.map +1 -1

package/README.md CHANGED Viewed

@@ -7,8 +7,12 @@ The Medipass Checkout SDK is a client-side JavaScript library which allows you t
 - [Medipass Checkout SDK](#medipass-checkout-sdk)
   - [Table of Contents](#table-of-contents)
   - [Install](#install)
-  - [Basic Usage](#basic-usage)
+  - [Create Checkout](#create-checkout)
+    - [Basic Usage](#basic-usage)
     - [With a `<script>` tag](#with-a-script-tag)
+  - [Request To Update Patient Card Details](#request-to-update-patient-card-details)
+      - [Example](#example)
+      - [Using `<script>` tag](#using-script-tag)
   - [API](#api)
     - [sdk.init(config)](#sdkinitconfig)
       - [config](#config)
@@ -27,7 +31,11 @@ or NPM:
 npm install @medipass/checkout-sdk
 ```
-## Basic Usage
+## Create Checkout
+A payment request URL is passed to the createCheckout function, which opens a secure pop-up window to Medipass to take the payment.
+### Basic Usage
 ```jsx
 import medipassCheckoutSDK from '@medipass/checkout-sdk';
@@ -51,7 +59,7 @@ medipassCheckoutSDK.init({
 const paymentRequestUrl = getPaymentRequestUrl();
-medipassCheckoutSDK.createCheckout({
+await medipassCheckoutSDK.createCheckout({
   paymentRequestUrl // the paymentRequestUrl returned after creating a Medipass invoice
 });
@@ -92,6 +100,59 @@ medipassCheckoutSDK.createCheckout({
 </html>
 ```
+## Request To Update Patient Card Details
+You can update a patient's payment details using the requestUpdatePaymentDetails function.
+### Example
+```jsx
+import medipassCheckoutSDK from '@medipass/checkout-sdk';
+// or: const medipassCheckoutSDK = require('@medipass/checkout-sdk');
+await medipassCheckoutSDK.requestUpdatePaymentDetails({
+  apiKey, // apiKey | undefined
+  token, // token | undefined
+  patientRefId, // patientRefId
+  env, // 'stg' | 'prod'
+  onSuccess, // Invoked when the payment method update has been successful
+  onFailure, // Invoked when the payment method update has failed
+  onCancel, // Invoked when the payment method update has been rejected
+  onClose, // Invoked when the pop-up window has been closed by the user
+  callbackOrigin // The origin of the window invoking the checkout SDK
+});
+```
+### Using `<script>` tag
+```html
+<html>
+  <head>
+    <script src="https://unpkg.com/@medipass/checkout-sdk/umd/@medipass/checkout-sdk.min.js"></script>
+  </head>
+  <body>
+    <script>
+  medipassCheckoutSDK.requestUpdatePaymentDetails({
+    apiKey, // apiKey | undefined
+    token, // token | undefined
+    patientRefId, // patientRefId
+    env, // 'stg' | 'prod'
+    onSuccess, // Invoked when the payment method update has been successful
+    onFailure, // Invoked when the payment method update has failed
+    onCancel, // Invoked when the payment method update has been rejected
+    onClose, // Invoked when the pop-up window has been closed by the user
+    callbackOrigin // The origin of the window invoking the checkout SDK
+});
+    </script>
+  </body>
+</html>
+```
+Take note of the following:
+1. medipassCheckoutSDK.int() should not be called when using requestUpdatePaymentDetails
+2. it is required that you pass either an apiKey or a token
 ## API
 ### sdk.init(config)

package/es/constants.js CHANGED Viewed

@@ -13,4 +13,11 @@ export var EVENTS = {
   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 CHANGED Viewed

@@ -2,38 +2,8 @@ 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;
-} ////////////////////////////////////////////////////////////
+import initialiseWindow from './initialiseWindow';
+import updatePaymentDetails from './requestUpdatePaymentDetails'; ////////////////////////////////////////////////////////////
 var _windowReferenceObject = null; ////////////////////////////////////////////////////////////
@@ -46,14 +16,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;
@@ -116,10 +86,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;
@@ -267,6 +237,28 @@ var checkoutSDK = {
       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 ADDED Viewed

@@ -0,0 +1,34 @@
+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 CHANGED Viewed

@@ -130,12 +130,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',
@@ -146,6 +155,7 @@ var overlay = {
     subHeadingContainer.appendChild(subHeading1);
     subHeadingContainer.appendChild(link1);
     subHeadingContainer.appendChild(subHeading2);
+    subHeadingContainer.appendChild(subHeading3);
     subHeadingContainer.appendChild(link2);
     return subHeadingContainer;
   },

package/es/requestUpdatePaymentDetails.js ADDED Viewed

@@ -0,0 +1,232 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+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); }); }; }
+import _get from 'lodash/get';
+import updatePaymentOverlay from './updatePaymentOverlay';
+import { ENVS, EVENTS, ERROR_MESSAGES, ORIGINS } from './constants';
+import coreSDK from '@medipass/web-sdk';
+import initialiseWindow from './initialiseWindow';
+if (!coreSDK.hasInit) {
+  coreSDK.setup();
+}
+var updatePaymentDetails = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.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 _regeneratorRuntime.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(ERROR_MESSAGES.NO_API_KEY_OR_NO_TOKEN);
+          case 3:
+            if (patientRefId) {
+              _context.next = 5;
+              break;
+            }
+            throw new Error(ERROR_MESSAGES.NO_PATIENT_REF_ID);
+          case 5:
+            if (env) {
+              _context.next = 7;
+              break;
+            }
+            throw new Error(ERROR_MESSAGES.NO_ENVIROMENT_SET);
+          case 7:
+            if (callbackOrigin) {
+              _context.next = 9;
+              break;
+            }
+            throw new Error(ERROR_MESSAGES.NO_CALLBACK_ORIGIN);
+          case 9:
+            isSessionComplete = false;
+            sdkConfig = {
+              env: env
+            };
+            if (env === ENVS.LOCAL) {
+              sdkConfig.env = ENVS.DEV;
+            }
+            if (env === ENVS.STG) {
+              sdkConfig.env = 'staging';
+            } // Set Medipass web-sdk config
+            coreSDK.setConfig(sdkConfig);
+            if (apiKey || token) {
+              coreSDK.setToken("Bearer " + (apiKey || token));
+            }
+            windowReferenceObject = initialiseWindow({
+              url: ''
+            });
+            handleClose = function handleClose() {
+              updatePaymentOverlay.removeOverlay();
+              if (!isSessionComplete) {
+                onClose && onClose();
+              }
+              if (!windowReferenceObject) return;
+              windowReferenceObject.close();
+            };
+            onClickRelaunch = function onClickRelaunch() {
+              if (!windowReferenceObject) {
+                windowReferenceObject = initialiseWindow({
+                  url: ''
+                });
+                return;
+              }
+              windowReferenceObject.focus();
+            };
+            checkWindowClosed = function checkWindowClosed() {
+              if (_get(windowReferenceObject, 'closed')) {
+                clearInterval(timer);
+                handleClose();
+              }
+            };
+            onClickCancel = function onClickCancel() {
+              updatePaymentOverlay.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.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 coreSDK.businesses.getMyBusinesses();
+          case 24:
+            myBusinesses = _context.sent;
+            myBusiness = myBusinesses.items[0];
+            myBusinessId = _get(myBusiness, '_id');
+            _context.next = 29;
+            return coreSDK.patients.getBusinessPatientByRefId(myBusinessId, patientRefId);
+          case 29:
+            patient = _context.sent;
+            patientId = _get(patient, '_id');
+            _context.next = 33;
+            return coreSDK.patients.requestUpdatePatientPaymentMethod(myBusinessId, patientId, {
+              sms: {
+                sendToPatientRecordMobile: false,
+                mobile: patient.mobile
+              },
+              callbackOrigin: callbackOrigin
+            });
+          case 33:
+            requestPaymentMethodResponse = _context.sent;
+            paymentMethodUpdateLink = _get(requestPaymentMethodResponse, 'paymentMethodUpdateLink');
+            openWindow = function openWindow() {
+              // windowReferenceObject may not be defined if browser blocks the pop-up.
+              if (!windowReferenceObject) {
+                windowReferenceObject = initialiseWindow({
+                  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 = 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');
+                if (!event) return;
+                if (event === 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 === EVENTS.fAILURE) {
+                  isSessionComplete = true;
+                  onFailure && onFailure();
+                }
+                if (event === 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);
+  };
+}();
+export default updatePaymentDetails;

package/es/updatePaymentOverlay.js ADDED Viewed

@@ -0,0 +1,184 @@
+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: '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 && _get(this.contentElement, 'appendChild')) {
+      this.contentElement.appendChild(newSubheading);
+    }
+  }
+};
+export default overlay;