@medipass/checkout-sdk 3.0.0-alpha.2 → 3.0.0-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medipass/checkout-sdk",
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0-alpha.3",
   "description": "Describe medipass-checkout-sdk here",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -28,7 +28,6 @@
     "@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",
@@ -36,10 +35,12 @@
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "7.11.1",
     "nodemon": "2.0.12",
+    "postcss": "8.4.27",
     "prettier": "2.8.1",
     "rollup": "3.27.0",
     "rollup-plugin-import-css": "3.3.1",
     "rollup-plugin-polyfill-node": "0.12.0",
+    "rollup-plugin-postcss": "4.0.2",
     "typescript": "5.1.6"
   },
   "exports": {

package/postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  'postcss-import': {},
+};

package/rollup.config.mjs

@@ -4,7 +4,8 @@ import typescript from '@rollup/plugin-typescript';
 import commonjs from '@rollup/plugin-commonjs';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import nodePolyfills from 'rollup-plugin-polyfill-node';
-import css from 'rollup-plugin-import-css';
+// import css from 'rollup-plugin-import-css';
+import postcss from 'rollup-plugin-postcss';
 
 export default {
   input: './src/index.ts',
@@ -28,8 +29,9 @@ export default {
     terser(),
     typescript(),
     commonjs({ include: /node_modules/ }),
+    postcss({ extract: true }),
     nodeResolve(),
     nodePolyfills(),
-    css(),
+    // css(),
   ],
 };

package/src/index.ts

@@ -1,10 +1,10 @@
-import _get from 'lodash/get';
 import overlay from './overlay';
 import { ORIGINS, ENVS, EVENTS } from './constants';
-import './style.css';
 import initialiseWindow from './initialiseWindow';
 import updatePaymentDetails, { UpdatePaymentDetails } from './requestUpdatePaymentDetails';
 
+import './style.css';
+
 ////////////////////////////////////////////////////////////
 
 let _windowReferenceObject: Window | null | undefined = null;
@@ -73,7 +73,7 @@ const checkoutSDK: CheckoutSdk = {
         clearInterval(timer);
         return;
       }
-      if (_get(_windowReferenceObject, 'closed')) {
+      if (_windowReferenceObject?.closed) {
         clearInterval(timer);
         handleClose();
       }
@@ -107,7 +107,7 @@ const checkoutSDK: CheckoutSdk = {
     ////////////////////////////////////////////////////////////
 
     const checkWindowClosed = () => {
-      if (_get(_windowReferenceObject, 'closed')) {
+      if (_windowReferenceObject?.closed) {
         clearInterval(timer);
         handleClose();
       }
@@ -150,11 +150,11 @@ const checkoutSDK: CheckoutSdk = {
         if (!e || !origin) return;
 
         // Ensure the message is coming from the correct origin.
-        if (_get(e, 'origin') !== origin) return;
+        if (e?.origin !== origin) return;
 
-        const event = _get(e, 'data.event');
-        const transactionId = _get(e, 'data.transactionId');
-        const receiptAutoSent = _get(e, 'data.receiptAutoSent');
+        const event = e?.data?.event;
+        const transactionId = e?.data?.transactionId;
+        const receiptAutoSent = e?.data?.receiptAutoSent;
 
         if (!event || !transactionId) return;
 

package/src/initialiseWindow.ts

@@ -1,5 +1,3 @@
-import _get from 'lodash/get';
-
 const POPUP_WIDTH = 450;
 
 const getWindowFeatures = ({
@@ -20,8 +18,8 @@ function initialiseWindow({ url }: { url: string }) {
 
   // 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.
-  const windowHeight = _get(window, 'outerHeight') || _get(window, 'innerHeight');
-  const windowWidth = _get(window, 'outerWidth') || _get(window, 'innerWidth');
+  const windowHeight = window?.outerHeight || window?.innerHeight;
+  const windowWidth = window?.outerWidth || window?.innerWidth;
 
   const popupHeight = windowHeight * 0.8;
   const popupWidth = windowWidth > POPUP_WIDTH ? POPUP_WIDTH : windowWidth * 0.25;

package/src/overlay.ts

@@ -1,6 +1,5 @@
 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';
 
@@ -32,7 +31,7 @@ function createElement({
   if (styles) {
     newElement.style.cssText = toCss(styles);
   }
-  if (_get(newElement, 'addEventListener') && onClick) {
+  if (newElement?.addEventListener && onClick) {
     newElement.addEventListener('click', () => {
       onClick();
     });

package/src/requestUpdatePaymentDetails.ts

@@ -1,7 +1,6 @@
-import _get from 'lodash/get';
 import updatePaymentOverlay from './updatePaymentOverlay';
 import { ENVS, EVENTS, ERROR_MESSAGES, ORIGINS } from './constants';
-import coreSDK from '@medipass/web-sdk';
+import coreSDK, { Business, PaginatedResponse } from '@medipass/web-sdk';
 import initialiseWindow from './initialiseWindow';
 
 if (!coreSDK.hasInit) {
@@ -84,7 +83,7 @@ const updatePaymentDetails = async ({
   };
 
   const checkWindowClosed = () => {
-    if (_get(windowReferenceObject, 'closed')) {
+    if (windowReferenceObject?.closed) {
       clearInterval(timer);
       handleClose();
     }
@@ -105,12 +104,12 @@ const updatePaymentDetails = async ({
   // 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 myBusinesses = (await coreSDK.businesses.getMyBusinesses()) as unknown as PaginatedResponse<Business>;
+  const myBusiness = myBusinesses?.items?.[0];
+  const myBusinessId = myBusiness?._id;
 
   const patient = await coreSDK.patients.getBusinessPatientByRefId(myBusinessId, patientRefId);
-  const patientId = _get(patient, '_id');
+  const patientId = patient?._id;
 
   const requestPaymentMethodResponse = await coreSDK.patients.requestUpdatePatientPaymentMethod(
     myBusinessId,
@@ -121,7 +120,7 @@ const updatePaymentDetails = async ({
     },
   );
 
-  const paymentMethodUpdateLink = _get(requestPaymentMethodResponse, 'paymentMethodUpdateLink');
+  const paymentMethodUpdateLink = requestPaymentMethodResponse?.paymentMethodUpdateLink;
 
   const openWindow = () => {
     // windowReferenceObject may not be defined if browser blocks the pop-up.
@@ -149,9 +148,9 @@ const updatePaymentDetails = async ({
       if (!e || !origin) return;
 
       // Ensure the message is coming from the correct origin.
-      if (_get(e, 'origin') !== origin) return;
+      if (e?.origin !== origin) return;
 
-      const event = _get(e, 'data.event');
+      const event = e?.data?.event;
 
       if (!event) return;
 

package/src/updatePaymentOverlay.ts

@@ -1,6 +1,5 @@
 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';
 
@@ -32,7 +31,7 @@ function createElement({
   if (styles) {
     newElement.style.cssText = toCss(styles);
   }
-  if (_get(newElement, 'addEventListener') && onClick) {
+  if (newElement?.addEventListener && onClick) {
     newElement.addEventListener('click', () => {
       onClick();
     });