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

package/src/overlay.ts

@@ -0,0 +1,272 @@
+import { ROOT_ELEMENT_ID } from './constants';
+import toCss from './utils/object-to-css';
+import _get from 'lodash/get';
+
+const SUBHEADING_ELEMENT_ID = 'medipass-checkout-sdk-subheading';
+
+function createElement({
+  window,
+  element,
+  text,
+  id,
+  styles,
+  onClick,
+}: {
+  window: Window;
+  element: string;
+  text?: string;
+  id?: string;
+  styles?: Record<string, string>;
+  onClick?: () => void;
+}) {
+  if (!window) return null;
+
+  const 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', () => {
+      onClick();
+    });
+  }
+
+  return newElement;
+}
+
+interface Overlay {
+  contentElement: HTMLElement | null;
+  removeOverlay: () => void;
+  createOverlay: ({
+    window,
+    onClickRelaunch,
+    onClickCancel,
+  }: {
+    window: Window;
+    onClickRelaunch: () => void;
+    onClickCancel: () => void;
+  }) => void;
+  createSubHeading: ({
+    window,
+    onClickRelaunch,
+    onClickCancel,
+  }: {
+    window: Window;
+    onClickRelaunch: () => void;
+    onClickCancel: () => void;
+  }) => HTMLElement | null;
+  updateSubHeading: ({
+    window,
+    onClickRelaunch,
+    onClickCancel,
+  }: {
+    window: Window;
+    onClickRelaunch: () => void;
+    onClickCancel: () => void;
+  }) => void;
+}
+
+const overlay: Overlay = {
+  contentElement: null,
+
+  removeOverlay() {
+    const containerDiv = document.getElementById(ROOT_ELEMENT_ID);
+    if (!containerDiv) return;
+    containerDiv.remove();
+  },
+
+  createOverlay({
+    window,
+    onClickRelaunch,
+    onClickCancel,
+  }: {
+    window: Window;
+    onClickRelaunch: () => void;
+    onClickCancel: () => void;
+  }) {
+    if (!window) return;
+
+    const containerDiv = createElement({
+      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',
+      },
+    });
+
+    const content = createElement({
+      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;
+
+    ////////////////////////////////////////////////////////////
+
+    const heading = createElement({
+      window,
+      element: 'div',
+      text: 'Secure Medipass payment in progress',
+      styles: {
+        color: 'white',
+        'font-size': '35px',
+        'font-weight': '600',
+        'margin-bottom': '30px',
+      },
+    });
+
+    ////////////////////////////////////////////////////////////
+
+    const subHeading = this.createSubHeading({ window, onClickRelaunch, onClickCancel });
+
+    ////////////////////////////////////////////////////////////
+
+    if (!content) return;
+    if (!containerDiv) return;
+
+    if (heading) {
+      content.appendChild(heading);
+    }
+    if (subHeading) {
+      content.appendChild(subHeading);
+    }
+
+    containerDiv.appendChild(content);
+
+    ////////////////////////////////////////////////////////////
+
+    window.document.body.appendChild(containerDiv);
+  },
+
+  createSubHeading({
+    window,
+    onClickRelaunch,
+    onClickCancel,
+  }: {
+    window: Window;
+    onClickRelaunch: () => void;
+    onClickCancel: () => void;
+  }) {
+    if (!window) return null;
+
+    const subHeadingContainer = createElement({
+      window,
+      id: SUBHEADING_ELEMENT_ID,
+      element: 'div',
+    });
+
+    const subHeading1 = createElement({
+      window,
+      element: 'div',
+      text: "Don't see the payment window?",
+    });
+
+    const link1 = createElement({
+      window,
+      element: 'a',
+      text: 'Click here',
+      onClick: onClickRelaunch,
+      styles: {
+        'text-decoration': 'underline',
+        cursor: 'pointer',
+        'font-weight': '600',
+      },
+    });
+    const subHeading2 = createElement({
+      window,
+      element: 'span',
+      text: ' to relaunch and complete your payment.',
+    });
+
+    const subHeading3 = createElement({
+      window,
+      element: 'div',
+      text: 'OR',
+      styles: {
+        'margin-top': '20px',
+        'margin-bottom': '20px',
+      },
+    });
+
+    const link2 = createElement({
+      window,
+      element: 'a',
+      text: 'Click here to cancel the payment.',
+      onClick: onClickCancel,
+      styles: {
+        'text-decoration': 'underline',
+        cursor: 'pointer',
+        'font-weight': '600',
+      },
+    });
+
+    if (!subHeadingContainer) return null;
+
+    if (subHeading1) {
+      subHeadingContainer.appendChild(subHeading1);
+    }
+    if (link1) {
+      subHeadingContainer.appendChild(link1);
+    }
+    if (subHeading2) {
+      subHeadingContainer.appendChild(subHeading2);
+    }
+    if (subHeading3) {
+      subHeadingContainer.appendChild(subHeading3);
+    }
+    if (link2) {
+      subHeadingContainer.appendChild(link2);
+    }
+
+    return subHeadingContainer;
+  },
+
+  updateSubHeading({
+    window,
+    onClickRelaunch,
+    onClickCancel,
+  }: {
+    window: Window;
+    onClickRelaunch: () => void;
+    onClickCancel: () => void;
+  }) {
+    if (!window) return null;
+
+    const subheaderElement = document.getElementById(SUBHEADING_ELEMENT_ID);
+    if (subheaderElement) {
+      subheaderElement.remove();
+    }
+
+    const newSubheading = this.createSubHeading({ window, onClickRelaunch, onClickCancel });
+    if (this.contentElement && this?.contentElement?.appendChild && newSubheading) {
+      this.contentElement.appendChild(newSubheading);
+    }
+  },
+};
+
+export default overlay;

package/src/requestUpdatePaymentDetails.ts

@@ -0,0 +1,190 @@
+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();
+}
+
+interface UpdatePaymentDetailsBase {
+  patientRefId: string;
+  env: typeof ENVS[keyof typeof ENVS];
+  onSuccess: () => void;
+  onFailure: () => void;
+  onCancel: () => void;
+  onClose: () => void;
+  callbackOrigin: string;
+}
+
+interface UpdatePaymentDetailsWithApiKey extends UpdatePaymentDetailsBase {
+  apiKey: string;
+  token?: never;
+}
+
+interface UpdatePaymentDetailsWithToken extends UpdatePaymentDetailsBase {
+  token: string;
+  apiKey?: never;
+}
+
+export type UpdatePaymentDetails = UpdatePaymentDetailsWithApiKey | UpdatePaymentDetailsWithToken;
+
+const updatePaymentDetails = async ({
+  apiKey,
+  token,
+  patientRefId,
+  env,
+  onSuccess,
+  onFailure,
+  onCancel,
+  onClose,
+  callbackOrigin,
+}: UpdatePaymentDetails) => {
+  if (!apiKey && !token) throw new Error(ERROR_MESSAGES.NO_API_KEY_OR_NO_TOKEN);
+  if (!patientRefId) throw new Error(ERROR_MESSAGES.NO_PATIENT_REF_ID);
+  if (!env) throw new Error(ERROR_MESSAGES.NO_ENVIROMENT_SET);
+  if (!callbackOrigin) throw new Error(ERROR_MESSAGES.NO_CALLBACK_ORIGIN);
+
+  let isSessionComplete = false;
+  const sdkConfig: { env: typeof ENVS[keyof typeof ENVS] | 'staging' } = { 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}`);
+  }
+
+  let windowReferenceObject = initialiseWindow({ url: '' });
+
+  const handleClose = () => {
+    updatePaymentOverlay.removeOverlay();
+
+    if (!isSessionComplete) {
+      onClose && onClose();
+    }
+
+    if (!windowReferenceObject) return;
+    windowReferenceObject.close();
+  };
+
+  const onClickRelaunch = () => {
+    if (!windowReferenceObject) {
+      windowReferenceObject = initialiseWindow({ url: '' });
+      return;
+    }
+    windowReferenceObject.focus();
+  };
+
+  const checkWindowClosed = () => {
+    if (_get(windowReferenceObject, 'closed')) {
+      clearInterval(timer);
+      handleClose();
+    }
+  };
+
+  const 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, onClickRelaunch, onClickCancel });
+
+  // Check the window every 0.5 seconds to see if it has been closed.
+  const timer = setInterval(checkWindowClosed, 500);
+
+  const myBusinesses = await coreSDK.businesses.getMyBusinesses();
+  const myBusiness = myBusinesses.items[0];
+  const myBusinessId = _get(myBusiness, '_id');
+
+  const patient = await coreSDK.patients.getBusinessPatientByRefId(myBusinessId, patientRefId);
+  const patientId = _get(patient, '_id');
+
+  const requestPaymentMethodResponse = await coreSDK.patients.requestUpdatePatientPaymentMethod(
+    myBusinessId,
+    patientId,
+    {
+      sms: { sendToPatientRecordMobile: false, mobile: patient.mobile },
+      callbackOrigin: callbackOrigin,
+    },
+  );
+
+  const paymentMethodUpdateLink = _get(requestPaymentMethodResponse, 'paymentMethodUpdateLink');
+
+  const 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', e => onReceiveMessage(e));
+
+    const onReceiveMessage = (e: MessageEvent<any>) => {
+      if (!e) return;
+      getMessage(e);
+    };
+
+    const getMessage = (e: MessageEvent<any>) => {
+      const origin = ORIGINS[env];
+
+      if (!e || !origin) return;
+
+      // Ensure the message is coming from the correct origin.
+      if (_get(e, 'origin') !== origin) return;
+
+      const 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(() => {
+          onSuccess && onSuccess();
+          if (windowReferenceObject) {
+            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(() => {
+          onCancel && onCancel();
+          if (windowReferenceObject) {
+            windowReferenceObject.close();
+          }
+        }, 1500);
+      }
+    };
+
+    return windowReferenceObject;
+  };
+
+  openWindow();
+};
+
+export default updatePaymentDetails;

package/{es → src}/style.css

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

package/src/updatePaymentOverlay.ts

@@ -0,0 +1,247 @@
+import { ROOT_ELEMENT_ID } from './constants';
+import toCss from './utils/object-to-css';
+import _get from 'lodash/get';
+
+const SUBHEADING_ELEMENT_ID = 'medipass-checkout-sdk-subheading';
+
+function createElement({
+  window,
+  element,
+  text,
+  id,
+  styles,
+  onClick,
+}: {
+  window: Window;
+  element: string;
+  text?: string;
+  id?: string;
+  styles?: Record<string, string>;
+  onClick?: () => void;
+}) {
+  if (!window) return null;
+
+  const 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', () => {
+      onClick();
+    });
+  }
+
+  return newElement;
+}
+
+interface Overlay {
+  contentElement: HTMLElement | null;
+  removeOverlay: () => void;
+  createOverlay: ({
+    window,
+    onClickRelaunch,
+    onClickCancel,
+  }: {
+    window: Window;
+    onClickRelaunch: () => void;
+    onClickCancel: () => void;
+  }) => void;
+  createSubHeading: ({
+    window,
+    onClickRelaunch,
+    onClickCancel,
+  }: {
+    window: Window;
+    onClickRelaunch: () => void;
+    onClickCancel: () => void;
+  }) => HTMLElement | null;
+  updateSubHeading: ({
+    window,
+    onClickRelaunch,
+    onClickCancel,
+  }: {
+    window: Window;
+    onClickRelaunch: () => void;
+    onClickCancel: () => void;
+  }) => void;
+}
+
+const overlay: Overlay = {
+  contentElement: null,
+
+  removeOverlay() {
+    const containerDiv = document.getElementById(ROOT_ELEMENT_ID);
+    if (!containerDiv) return;
+    containerDiv.remove();
+  },
+
+  createOverlay({ window, onClickRelaunch, onClickCancel }) {
+    if (!window) return null;
+
+    const containerDiv = createElement({
+      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',
+      },
+    });
+
+    const content = createElement({
+      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;
+
+    ////////////////////////////////////////////////////////////
+
+    const heading = createElement({
+      window,
+      element: 'div',
+      text: 'Updates to patient payment information are in progress',
+      styles: {
+        color: 'white',
+        'font-size': '35px',
+        'font-weight': '600',
+        'margin-bottom': '30px',
+      },
+    });
+
+    ////////////////////////////////////////////////////////////
+
+    const subHeading = this.createSubHeading({ window, onClickRelaunch, onClickCancel });
+
+    ////////////////////////////////////////////////////////////
+
+    if (!content) return;
+    if (!containerDiv) return;
+
+    if (heading) {
+      content.appendChild(heading);
+    }
+    if (subHeading) {
+      content.appendChild(subHeading);
+    }
+    containerDiv.appendChild(content);
+
+    ////////////////////////////////////////////////////////////
+
+    window.document.body.appendChild(containerDiv);
+  },
+
+  createSubHeading({ window, onClickRelaunch, onClickCancel }) {
+    if (!window) return null;
+
+    const subHeadingContainer = createElement({
+      window,
+      id: SUBHEADING_ELEMENT_ID,
+      element: 'div',
+    });
+
+    const subHeading1 = createElement({
+      window,
+      element: 'div',
+      text: "Don't see the window?",
+    });
+
+    const link1 = createElement({
+      window,
+      element: 'a',
+      text: 'Click here',
+      onClick: onClickRelaunch,
+      styles: {
+        'text-decoration': 'underline',
+        cursor: 'pointer',
+        'font-weight': '600',
+      },
+    });
+    const subHeading2 = createElement({
+      window,
+      element: 'span',
+      text: ' to relaunch and complete updating patient payment details.',
+    });
+
+    const subHeading3 = createElement({
+      window,
+      element: 'div',
+      text: 'OR',
+      styles: {
+        'margin-top': '20px',
+        'margin-bottom': '20px',
+      },
+    });
+
+    const link2 = createElement({
+      window,
+      element: 'a',
+      text: 'Click here to cancel this request.',
+      onClick: onClickCancel,
+      styles: {
+        'text-decoration': 'underline',
+        cursor: 'pointer',
+        'font-weight': '600',
+      },
+    });
+
+    if (!subHeadingContainer) return null;
+
+    if (subHeading1) {
+      subHeadingContainer.appendChild(subHeading1);
+    }
+    if (link1) {
+      subHeadingContainer.appendChild(link1);
+    }
+    if (subHeading2) {
+      subHeadingContainer.appendChild(subHeading2);
+    }
+    if (subHeading3) {
+      subHeadingContainer.appendChild(subHeading3);
+    }
+    if (link2) {
+      subHeadingContainer.appendChild(link2);
+    }
+
+    return subHeadingContainer;
+  },
+
+  updateSubHeading({ window, onClickRelaunch, onClickCancel }) {
+    if (!window) return null;
+
+    const subheaderElement = document.getElementById(SUBHEADING_ELEMENT_ID);
+    if (subheaderElement) {
+      subheaderElement.remove();
+    }
+
+    const newSubheading = this.createSubHeading({ window, onClickRelaunch, onClickCancel });
+    if (this.contentElement && this?.contentElement?.appendChild && newSubheading) {
+      this.contentElement.appendChild(newSubheading);
+    }
+  },
+};
+
+export default overlay;