pih-appointment-widget 0.0.38 → 0.0.39

package/README.md

@@ -1,70 +1,70 @@
-# Getting Started with Create React App
-
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
-
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
-
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
-
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

package/babel.config.js

@@ -1,6 +1,6 @@
-module.exports = {
-    presets: [
-      '@babel/preset-env',
-      '@babel/preset-react'
-    ],
+module.exports = {
+    presets: [
+      '@babel/preset-env',
+      '@babel/preset-react'
+    ],
   };

package/dist/App.js

@@ -26,20 +26,21 @@ var _react = _interopRequireDefault(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _AppointmentPage = _interopRequireWildcard(require("./components/AppointmentPage.js"));
 var _ICD10Assistant = _interopRequireDefault(require("./components/ICD10Assistant.jsx"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 let bookingWidgetInstance = null;
 
 // SDK for embedding appointment widget
 const BookingSDK = {
-  /**
-   * Show appointment widget with configuration
-   * @param {object} config - Configuration object
-   * @param {string} config.apiBaseUrl - Base URL for API
-   * @param {string} config.hospitalId - Hospital ID
-   * @param {number} config.doctorId - Doctor ID
-   * @param {string} config.joinCallUrl - Video call URL
-   * @param {function} onAction - Optional callback for actions
+  /**
+   * Show appointment widget with configuration
+   * @param {object} config - Configuration object
+   * @param {string} config.apiBaseUrl - Base URL for API
+   * @param {string} config.hospitalId - Hospital ID
+   * @param {number} config.doctorId - Doctor ID
+   * @param {string} config.joinCallUrl - Video call URL
+   * @param {function} onAction - Optional callback for actions
    */
   showWidget: (config, onAction) => {
     if (!bookingWidgetInstance) {

package/dist/components/AppointmentPage.js

@@ -8,10 +8,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _appointmentService = require("../services/appointmentService");
 var _httpService = require("../services/httpService");
 var _apiConfig = require("../constants/apiConfig");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // Decode JWT payload (no verification; for display only). Returns {} on invalid/missing.
 function getJwtPayload(token) {
   if (!token || typeof token !== "string") return {};
@@ -21,7 +19,7 @@ function getJwtPayload(token) {
     const base64 = parts[1].replace(/-/g, "+").replace(/_/g, "/");
     const padded = base64.padEnd(base64.length + (4 - base64.length % 4) % 4, "=");
     return JSON.parse(atob(padded));
-  } catch (_unused) {
+  } catch {
     return {};
   }
 }
@@ -41,32 +39,26 @@ const PIH_APPOINTMENT_WIDGET_DATA_ATTR = "data-pih-widget";
 
 // Extract from SSO login response (not from appToken JWT — these are only in login response)
 function extractAppToken(response) {
-  var _ref, _ref2, _ref3, _response$data$access, _response$data, _response$data2;
   if (!response || response.err) return null;
-  return (_ref = (_ref2 = (_ref3 = (_response$data$access = (_response$data = response.data) === null || _response$data === void 0 ? void 0 : _response$data.access_token) !== null && _response$data$access !== void 0 ? _response$data$access : (_response$data2 = response.data) === null || _response$data2 === void 0 ? void 0 : _response$data2.token) !== null && _ref3 !== void 0 ? _ref3 : response.token) !== null && _ref2 !== void 0 ? _ref2 : response.accessToken) !== null && _ref !== void 0 ? _ref : null;
+  return response.data?.access_token ?? response.data?.token ?? response.token ?? response.accessToken ?? null;
 }
 function extractDoctorIdFromLoginResponse(response) {
-  var _ref4, _response$data$doctor;
-  if (!(response !== null && response !== void 0 && response.data)) return null;
-  const id = (_ref4 = (_response$data$doctor = response.data.doctor_id) !== null && _response$data$doctor !== void 0 ? _response$data$doctor : response.data.doctorId) !== null && _ref4 !== void 0 ? _ref4 : null;
+  if (!response?.data) return null;
+  const id = response.data.doctor_id ?? response.data.doctorId ?? null;
   console.log(id, 'extractDoctorIdFromLoginResponse -> id');
   return id != null ? String(id) : null;
 }
 function extractUserNameFromLoginResponse(response) {
-  var _ref5, _ref6, _response$data$name;
-  if (!(response !== null && response !== void 0 && response.data)) return null;
-  const name = (_ref5 = (_ref6 = (_response$data$name = response.data.name) !== null && _response$data$name !== void 0 ? _response$data$name : response.data.doctor_name) !== null && _ref6 !== void 0 ? _ref6 : response.data.userName) !== null && _ref5 !== void 0 ? _ref5 : null;
+  if (!response?.data) return null;
+  const name = response.data.name ?? response.data.doctor_name ?? response.data.userName ?? null;
   return name != null ? String(name) : null;
 }
 
 // Error boundary so a render error never shows a blank screen
 class AppointmentErrorBoundary extends _react.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      hasError: false
-    });
-  }
+  state = {
+    hasError: false
+  };
   static getDerivedStateFromError() {
     return {
       hasError: true
@@ -123,21 +115,21 @@ class AppointmentErrorBoundary extends _react.Component {
 }
 
 // SDK Component - accepts configuration from parent app
-const AppointmentPage = _ref7 => {
+const AppointmentPage = _ref => {
   let {
     config = {}
-  } = _ref7;
+  } = _ref;
   const [storedApiBaseUrl, setStoredApiBaseUrl] = (0, _react.useState)(() => {
     try {
       return typeof localStorage !== "undefined" ? localStorage.getItem(STORAGE_KEY_API_BASE_URL) : null;
-    } catch (_unused2) {
+    } catch {
       return null;
     }
   });
   const [storedHospitalId, setStoredHospitalId] = (0, _react.useState)(() => {
     try {
       return typeof localStorage !== "undefined" ? localStorage.getItem(STORAGE_KEY_HOSPITAL_ID) : null;
-    } catch (_unused3) {
+    } catch {
       return null;
     }
   });
@@ -148,14 +140,14 @@ const AppointmentPage = _ref7 => {
   const [storedIdToken, setStoredIdToken] = (0, _react.useState)(() => {
     try {
       return typeof localStorage !== "undefined" ? localStorage.getItem(STORAGE_KEY_ID_TOKEN) : null;
-    } catch (_unused4) {
+    } catch {
       return null;
     }
   });
   const [storedEmail, setStoredEmail] = (0, _react.useState)(() => {
     try {
       return typeof localStorage !== "undefined" ? localStorage.getItem(STORAGE_KEY_EMAIL) : null;
-    } catch (_unused5) {
+    } catch {
       return null;
     }
   });
@@ -170,12 +162,14 @@ const AppointmentPage = _ref7 => {
       if (token && String(token).trim()) {
         const prevToken = localStorage.getItem(STORAGE_KEY_ID_TOKEN);
         if (prevToken !== token) {
-          // New token from parent (e.g. Flutter re-login) — clear app token and force SSO for the new session.
-          // refreshLoginTrigger increment guarantees SSO re-runs even if appToken was already null in state.
+          // New token from parent (e.g. Flutter re-login) — clear stored credentials.
+          // Only increment refreshLoginTrigger when there was an existing appToken to evict;
+          // if appToken is already absent, the SSO effect will fire naturally via !appToken.
+          const hadAppToken = !!localStorage.getItem(STORAGE_KEY_APP_TOKEN);
           setAppToken(null);
           setDoctorIdFromLogin(null);
           setUserName(null);
-          setRefreshLoginTrigger(t => t + 1);
+          if (hadAppToken) setRefreshLoginTrigger(t => t + 1);
           localStorage.removeItem(STORAGE_KEY_APP_TOKEN);
           localStorage.removeItem(STORAGE_KEY_DOCTOR_ID);
           localStorage.removeItem(STORAGE_KEY_USER_NAME);
@@ -200,21 +194,21 @@ const AppointmentPage = _ref7 => {
   const [appToken, setAppToken] = (0, _react.useState)(() => {
     try {
       return typeof localStorage !== "undefined" ? localStorage.getItem(STORAGE_KEY_APP_TOKEN) : null;
-    } catch (_unused6) {
+    } catch {
       return null;
     }
   });
   const [doctorIdFromLogin, setDoctorIdFromLogin] = (0, _react.useState)(() => {
     try {
       return typeof localStorage !== "undefined" ? localStorage.getItem(STORAGE_KEY_DOCTOR_ID) : null;
-    } catch (_unused7) {
+    } catch {
       return null;
     }
   });
   const [userName, setUserName] = (0, _react.useState)(() => {
     try {
       return typeof localStorage !== "undefined" ? localStorage.getItem(STORAGE_KEY_USER_NAME) : null;
-    } catch (_unused8) {
+    } catch {
       return null;
     }
   });
@@ -225,7 +219,7 @@ const AppointmentPage = _ref7 => {
       const hasId = localStorage.getItem(STORAGE_KEY_ID_TOKEN);
       const hasEmail = localStorage.getItem(STORAGE_KEY_EMAIL);
       return !hasApp && !!(hasId && hasEmail);
-    } catch (_unused9) {
+    } catch {
       return false;
     }
   });
@@ -287,7 +281,7 @@ const AppointmentPage = _ref7 => {
     const y = date.getFullYear();
     const m = String(date.getMonth() + 1).padStart(2, "0");
     const d = String(date.getDate()).padStart(2, "0");
-    return "".concat(y, "-").concat(m, "-").concat(d);
+    return `${y}-${m}-${d}`;
   };
   const getDateRange = option => {
     const today = new Date();
@@ -318,8 +312,8 @@ const AppointmentPage = _ref7 => {
         to = formatLocalDate(lastOfMonth);
         break;
       case "currentYear":
-        from = "".concat(today.getFullYear(), "-01-01");
-        to = "".concat(today.getFullYear(), "-12-31");
+        from = `${today.getFullYear()}-01-01`;
+        to = `${today.getFullYear()}-12-31`;
         break;
       default:
         from = to = getTodayDate();
@@ -344,7 +338,7 @@ const AppointmentPage = _ref7 => {
       case "currentYear":
         return "Current Year";
       case "custom":
-        return isMobile ? "Custom" : "".concat(fromDate, " to ").concat(toDate);
+        return isMobile ? "Custom" : `${fromDate} to ${toDate}`;
       default:
         return "Today";
     }
@@ -429,12 +423,12 @@ const AppointmentPage = _ref7 => {
 
   // Helper to get unique identifier from appointment
   const getAppointmentId = appointment => {
-    return (appointment === null || appointment === void 0 ? void 0 : appointment.id) || (appointment === null || appointment === void 0 ? void 0 : appointment._id) || (appointment === null || appointment === void 0 ? void 0 : appointment.appointmentId) || (appointment === null || appointment === void 0 ? void 0 : appointment.patientId) || JSON.stringify(appointment);
+    return appointment?.id || appointment?._id || appointment?.appointmentId || appointment?.patientId || JSON.stringify(appointment);
   };
 
   // Generate avatar with first letter if no image
   const getPatientAvatar = appointment => {
-    if (appointment !== null && appointment !== void 0 && appointment.image) {
+    if (appointment?.image) {
       return appointment.image;
     }
     // Return null to use the letter avatar component
@@ -555,8 +549,8 @@ const AppointmentPage = _ref7 => {
   // Returns true if the current time is within 2 hours after the appointment's scheduled slot time.
   // Handles date format: "Sun, 15 Mar 2026" and time format: "12:15 PM"
   const isWithinJoinWindow = appointment => {
-    const dateStr = (appointment === null || appointment === void 0 ? void 0 : appointment.date) || (appointment === null || appointment === void 0 ? void 0 : appointment.appointmentDate);
-    const timeStr = (appointment === null || appointment === void 0 ? void 0 : appointment.time) || (appointment === null || appointment === void 0 ? void 0 : appointment.appointmentTime);
+    const dateStr = appointment?.date || appointment?.appointmentDate;
+    const timeStr = appointment?.time || appointment?.appointmentTime;
     if (!dateStr || !timeStr) return false;
     try {
       // Parse "12:15 PM" or "9:30 AM" into 24-hour h/m values
@@ -576,11 +570,11 @@ const AppointmentPage = _ref7 => {
       }
       if (isNaN(h) || isNaN(m)) return false;
       // "Sun, 15 Mar 2026 12:15:00" — space-separated; JS parses RFC-like date strings correctly
-      const appointmentDate = new Date("".concat(dateStr, " ").concat(String(h).padStart(2, "0"), ":").concat(String(m).padStart(2, "0"), ":00"));
+      const appointmentDate = new Date(`${dateStr} ${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:00`);
       if (isNaN(appointmentDate.getTime())) return false;
       const windowEnd = new Date(appointmentDate.getTime() + 2 * 60 * 60 * 1000);
       return new Date() <= windowEnd;
-    } catch (_unused0) {
+    } catch {
       return false;
     }
   };
@@ -591,7 +585,6 @@ const AppointmentPage = _ref7 => {
     setCallLoading(true);
     setCallError(null);
     try {
-      var _response$data3;
       const callConfig = {
         apiBaseUrl,
         hospitalId,
@@ -619,7 +612,7 @@ const AppointmentPage = _ref7 => {
         setCallError("Session expired. Re-authenticating...");
         return;
       }
-      if (response.err || !((_response$data3 = response.data) !== null && _response$data3 !== void 0 && _response$data3.token)) {
+      if (response.err || !response.data?.token) {
         setCallError(String(response.err || "Failed to initiate call"));
         return;
       }
@@ -842,6 +835,7 @@ const AppointmentPage = _ref7 => {
         setAppToken(null);
         setDoctorIdFromLogin(null);
         setUserName(null);
+        setRefreshLoginTrigger(0); // reset trigger even on failure to prevent infinite retry loops
         try {
           if (typeof localStorage !== "undefined") {
             localStorage.removeItem(STORAGE_KEY_APP_TOKEN);
@@ -858,6 +852,7 @@ const AppointmentPage = _ref7 => {
         setUserName(name);
         setTokenError(null);
         setRedirectToHome(false);
+        setRefreshLoginTrigger(0); // reset one-shot trigger so SSO doesn't re-fire on next dep change
         try {
           if (typeof localStorage !== "undefined") {
             localStorage.setItem(STORAGE_KEY_APP_TOKEN, token);
@@ -868,7 +863,7 @@ const AppointmentPage = _ref7 => {
       }
     }).catch(err => {
       if (!cancelled) {
-        setTokenError((err === null || err === void 0 ? void 0 : err.message) || "Authentication failed. Please try again.");
+        setTokenError(err?.message || "Authentication failed. Please try again.");
         setAppToken(null);
       }
     }).finally(() => {
@@ -900,7 +895,32 @@ const AppointmentPage = _ref7 => {
 
     // Add responsive styles and animations
     const style = document.createElement("style");
-    style.innerHTML = "\n      @keyframes spin {\n        0% { transform: rotate(0deg); }\n        100% { transform: rotate(360deg); }\n      }\n      \n      @media (max-width: 768px) {\n        .appointments-grid {\n          grid-template-columns: 1.5fr 1fr 0.8fr !important;\n        }\n        .appointments-header-grid {\n          grid-template-columns: 1.5fr 1fr 0.8fr !important;\n        }\n        .hide-on-mobile {\n          display: none !important;\n        }\n      }\n      @media (max-width: 480px) {\n        .appointments-header-grid {\n          font-size: 10px !important;\n        }\n        .appointments-grid {\n          font-size: 11px !important;\n        }\n      }\n    ";
+    style.innerHTML = `
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+      
+      @media (max-width: 768px) {
+        .appointments-grid {
+          grid-template-columns: 1.5fr 1fr 0.8fr !important;
+        }
+        .appointments-header-grid {
+          grid-template-columns: 1.5fr 1fr 0.8fr !important;
+        }
+        .hide-on-mobile {
+          display: none !important;
+        }
+      }
+      @media (max-width: 480px) {
+        .appointments-header-grid {
+          font-size: 10px !important;
+        }
+        .appointments-grid {
+          font-size: 11px !important;
+        }
+      }
+    `;
     document.head.appendChild(style);
 
     // Handle window resize
@@ -953,7 +973,7 @@ const AppointmentPage = _ref7 => {
         justifyContent: "center",
         padding: "24px"
       }
-    }, /*#__PURE__*/_react.default.createElement("style", null, "@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }"), /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/_react.default.createElement("style", null, `@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }`), /*#__PURE__*/_react.default.createElement("div", {
       style: {
         width: "40px",
         height: "40px",
@@ -1712,7 +1732,7 @@ const AppointmentPage = _ref7 => {
       style: {
         fontSize: "13px"
       }
-    }, searchQuery ? "No appointments found for \"".concat(searchQuery, "\"") : "No appointments found"), searchQuery && /*#__PURE__*/_react.default.createElement("button", {
+    }, searchQuery ? `No appointments found for "${searchQuery}"` : "No appointments found"), searchQuery && /*#__PURE__*/_react.default.createElement("button", {
       onClick: () => setSearchQuery(""),
       style: {
         marginTop: "12px",
@@ -1991,7 +2011,7 @@ const AppointmentPage = _ref7 => {
         fontWeight: "700",
         fontSize: isMobile ? "12px" : "13px"
       }
-    }, (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.specialisation) || (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.speciality) || "N/A")), /*#__PURE__*/_react.default.createElement("div", {
+    }, selectedAppointment?.specialisation || selectedAppointment?.speciality || "N/A")), /*#__PURE__*/_react.default.createElement("div", {
       style: {
         textAlign: "right"
       }
@@ -2006,7 +2026,7 @@ const AppointmentPage = _ref7 => {
         fontWeight: "700",
         fontSize: isMobile ? "12px" : "13px"
       }
-    }, (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.type) || (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.appointmentType) || "Online"))), /*#__PURE__*/_react.default.createElement("div", {
+    }, selectedAppointment?.type || selectedAppointment?.appointmentType || "Online"))), /*#__PURE__*/_react.default.createElement("div", {
       style: {
         display: "flex",
         justifyContent: "space-between"
@@ -2026,7 +2046,7 @@ const AppointmentPage = _ref7 => {
         fontWeight: "700",
         fontSize: isMobile ? "12px" : "13px"
       }
-    }, (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.date) || (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.appointmentDate) || "N/A")), /*#__PURE__*/_react.default.createElement("div", {
+    }, selectedAppointment?.date || selectedAppointment?.appointmentDate || "N/A")), /*#__PURE__*/_react.default.createElement("div", {
       style: {
         textAlign: "right"
       }
@@ -2041,7 +2061,7 @@ const AppointmentPage = _ref7 => {
         fontWeight: "700",
         fontSize: isMobile ? "12px" : "13px"
       }
-    }, (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.time) || (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.appointmentTime) || "N/A"))), /*#__PURE__*/_react.default.createElement("div", {
+    }, selectedAppointment?.time || selectedAppointment?.appointmentTime || "N/A"))), /*#__PURE__*/_react.default.createElement("div", {
       style: {
         display: "flex",
         justifyContent: "space-between"
@@ -2061,7 +2081,7 @@ const AppointmentPage = _ref7 => {
         fontWeight: "700",
         fontSize: isMobile ? "12px" : "13px"
       }
-    }, (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.doctor) || (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.doctorName) || "N/A"))), /*#__PURE__*/_react.default.createElement("div", {
+    }, selectedAppointment?.doctor || selectedAppointment?.doctorName || "N/A"))), /*#__PURE__*/_react.default.createElement("div", {
       style: {
         display: "flex",
         justifyContent: "space-between"
@@ -2081,7 +2101,7 @@ const AppointmentPage = _ref7 => {
         fontWeight: "700",
         fontSize: isMobile ? "12px" : "13px"
       }
-    }, (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.hospital) || (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.hospitalName) || "N/A"))), /*#__PURE__*/_react.default.createElement("div", {
+    }, selectedAppointment?.hospital || selectedAppointment?.hospitalName || "N/A"))), /*#__PURE__*/_react.default.createElement("div", {
       style: {
         display: "flex",
         justifyContent: "space-between"
@@ -2102,7 +2122,7 @@ const AppointmentPage = _ref7 => {
         fontSize: isMobile ? "11px" : "12px",
         lineHeight: "1.4"
       }
-    }, (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.reason) || (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.reasonForAppointment) || "No reason provided"))), (activeTab === "upcoming" || activeTab === "completed" && isWithinJoinWindow(selectedAppointment)) && /*#__PURE__*/_react.default.createElement("div", {
+    }, selectedAppointment?.reason || selectedAppointment?.reasonForAppointment || "No reason provided"))), (activeTab === "upcoming" || activeTab === "completed" && isWithinJoinWindow(selectedAppointment)) && /*#__PURE__*/_react.default.createElement("div", {
       style: {
         display: "flex",
         flexDirection: isMobile ? "column" : "row",
@@ -2155,12 +2175,12 @@ const AppointmentPage = _ref7 => {
     }, "Select an appointment to view details"))))))), showPipVideo && /*#__PURE__*/_react.default.createElement("div", {
       style: {
         position: "fixed",
-        left: isPipFullscreen ? "0" : isMobile ? "10px" : "".concat(pipPosition.x, "px"),
-        top: isPipFullscreen ? "0" : isMobile ? "70px" : "".concat(pipPosition.y, "px"),
+        left: isPipFullscreen ? "0" : isMobile ? "10px" : `${pipPosition.x}px`,
+        top: isPipFullscreen ? "0" : isMobile ? "70px" : `${pipPosition.y}px`,
         right: isPipFullscreen ? "0" : isMobile ? "10px" : "auto",
         bottom: isPipFullscreen ? "0" : "auto",
-        width: isPipFullscreen ? "100vw" : isMobile ? "calc(100vw - 20px)" : isPipMinimized ? "350px" : "".concat(pipSize.width, "px"),
-        height: isPipFullscreen ? "100vh" : isPipMinimized ? "auto" : isMobile ? "300px" : "".concat(pipSize.height, "px"),
+        width: isPipFullscreen ? "100vw" : isMobile ? "calc(100vw - 20px)" : isPipMinimized ? "350px" : `${pipSize.width}px`,
+        height: isPipFullscreen ? "100vh" : isPipMinimized ? "auto" : isMobile ? "300px" : `${pipSize.height}px`,
         background: "#FFFFFF",
         borderRadius: isPipFullscreen ? "0" : "8px",
         boxShadow: "0 8px 24px rgba(0, 0, 0, 0.3)",
@@ -2211,7 +2231,7 @@ const AppointmentPage = _ref7 => {
         textOverflow: "ellipsis",
         whiteSpace: "nowrap"
       }
-    }, "Video Call - ", (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.patientName) || "Patient")), /*#__PURE__*/_react.default.createElement("div", {
+    }, "Video Call - ", selectedAppointment?.patientName || "Patient")), /*#__PURE__*/_react.default.createElement("div", {
       style: {
         display: "flex",
         gap: isMobile ? "4px" : "6px",
@@ -2340,7 +2360,7 @@ const AppointmentPage = _ref7 => {
       src: (() => {
         if (!callToken) return "";
         const base = String(joinCallUrlBase || "");
-        return "".concat(base).concat(callToken);
+        return `${base}${callToken}`;
       })(),
       style: {
         width: "100%",
@@ -2411,7 +2431,12 @@ const AppointmentPage = _ref7 => {
         background: "transparent",
         zIndex: 10001
       }
-    })), /*#__PURE__*/_react.default.createElement("style", null, "\n            @keyframes pulse {\n              0%, 100% { opacity: 1; }\n              50% { opacity: 0.5; }\n            }\n          "))), showAuthError && /*#__PURE__*/_react.default.createElement("div", {
+    })), /*#__PURE__*/_react.default.createElement("style", null, `
+            @keyframes pulse {
+              0%, 100% { opacity: 1; }
+              50% { opacity: 0.5; }
+            }
+          `))), showAuthError && /*#__PURE__*/_react.default.createElement("div", {
       style: {
         position: "fixed",
         inset: 0,