pih-appointment-widget 0.0.9 → 0.0.12

package/dist/components/AppointmentPage.js

@@ -6,18 +6,125 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 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); }
+// Decode JWT payload (no verification; for display only). Returns {} on invalid/missing.
+function getJwtPayload(token) {
+  if (!token || typeof token !== "string") return {};
+  try {
+    const parts = token.split(".");
+    if (parts.length !== 3) return {};
+    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) {
+    return {};
+  }
+}
+const STORAGE_KEY_ID_TOKEN = "pih_appointment_idToken";
+const STORAGE_KEY_EMAIL = "pih_appointment_email";
+const STORAGE_KEY_APP_TOKEN = "pih_appointment_appToken";
+const STORAGE_KEY_DOCTOR_ID = "pih_appointment_doctorId";
+const STORAGE_KEY_USER_NAME = "pih_appointment_userName";
+
+// 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;
+}
+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;
+  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;
+  return name != null ? String(name) : null;
+}
+
 // SDK Component - accepts configuration from parent app
-const AppointmentPage = _ref => {
+const AppointmentPage = _ref7 => {
   let {
     config = {}
-  } = _ref;
-  // Extract config with fallbacks to hardcoded defaults from apiConfig.js
+  } = _ref7;
   const apiBaseUrl = config.apiBaseUrl || _apiConfig.API_BASE_URL;
   const hospitalId = config.hospitalId || _apiConfig.DEFAULT_PARAMS.hospitalId;
-  const doctorId = config.doctorId || _apiConfig.DEFAULT_PARAMS.doctorId;
-  const joinCallUrl = config.joinCallUrl || _apiConfig.JOIN_CALL_URL;
+
+  // idToken/email: config first, then sessionStorage (so refresh keeps auth when used from another React app)
+  const [storedIdToken, setStoredIdToken] = (0, _react.useState)(() => {
+    try {
+      return typeof sessionStorage !== "undefined" ? sessionStorage.getItem(STORAGE_KEY_ID_TOKEN) : null;
+    } catch (_unused2) {
+      return null;
+    }
+  });
+  const [storedEmail, setStoredEmail] = (0, _react.useState)(() => {
+    try {
+      return typeof sessionStorage !== "undefined" ? sessionStorage.getItem(STORAGE_KEY_EMAIL) : null;
+    } catch (_unused3) {
+      return null;
+    }
+  });
+  const idToken = config.idToken || config.token || storedIdToken;
+  const email = config.email || storedEmail;
+
+  // Persist idToken/email when parent passes them (for refresh)
+  (0, _react.useEffect)(() => {
+    try {
+      if (typeof sessionStorage === "undefined") return;
+      if (config.idToken || config.token) {
+        sessionStorage.setItem(STORAGE_KEY_ID_TOKEN, config.idToken || config.token);
+        setStoredIdToken(config.idToken || config.token);
+      }
+      if (config.email) {
+        sessionStorage.setItem(STORAGE_KEY_EMAIL, config.email);
+        setStoredEmail(config.email);
+      }
+    } catch (e) {}
+  }, [config.idToken, config.token, config.email]);
+  const [appToken, setAppToken] = (0, _react.useState)(() => {
+    try {
+      return typeof sessionStorage !== "undefined" ? sessionStorage.getItem(STORAGE_KEY_APP_TOKEN) : null;
+    } catch (_unused4) {
+      return null;
+    }
+  });
+  const [doctorIdFromLogin, setDoctorIdFromLogin] = (0, _react.useState)(() => {
+    try {
+      return typeof sessionStorage !== "undefined" ? sessionStorage.getItem(STORAGE_KEY_DOCTOR_ID) : null;
+    } catch (_unused5) {
+      return null;
+    }
+  });
+  const [userName, setUserName] = (0, _react.useState)(() => {
+    try {
+      return typeof sessionStorage !== "undefined" ? sessionStorage.getItem(STORAGE_KEY_USER_NAME) : null;
+    } catch (_unused6) {
+      return null;
+    }
+  });
+  const [tokenLoading, setTokenLoading] = (0, _react.useState)(() => {
+    try {
+      if (typeof sessionStorage === "undefined") return false;
+      const hasApp = sessionStorage.getItem(STORAGE_KEY_APP_TOKEN);
+      const hasId = sessionStorage.getItem(STORAGE_KEY_ID_TOKEN);
+      const hasEmail = sessionStorage.getItem(STORAGE_KEY_EMAIL);
+      return !hasApp && !!(hasId && hasEmail);
+    } catch (_unused7) {
+      return false;
+    }
+  });
+  const [tokenError, setTokenError] = (0, _react.useState)(null);
+  const [refreshLoginTrigger, setRefreshLoginTrigger] = (0, _react.useState)(0);
+  const joinCallUrlBase = config.joinCallUrl || _apiConfig.JOIN_CALL_URL;
+  const joinCallUrl = appToken ? joinCallUrlBase.replace(/\/?$/, "/") + appToken : "";
+  const displayName = userName || getJwtPayload(idToken).name || getJwtPayload(idToken).sub || "User";
+
   // Helper function to get today's date in YYYY-MM-DD format
   const getTodayDate = () => {
     const today = new Date();
@@ -198,27 +305,36 @@ const AppointmentPage = _ref => {
       setSelectedAppointment(sortedAppointments[0]);
     }
   };
-
-  // Fetch appointments based on active tab and date filter
   const fetchAppointments = (0, _react.useCallback)(async () => {
+    if (!appToken) return;
+    const doctorId = doctorIdFromLogin || _apiConfig.DEFAULT_PARAMS.doctorId;
     setLoading(true);
     setError(null);
     try {
-      // Pass SDK configuration to service
       const serviceConfig = {
         apiBaseUrl,
         hospitalId,
-        doctorId
+        doctorId,
+        token: appToken
       };
-
-      // Fetch all appointments (no pagination params to BE)
       const response = await (0, _appointmentService.getAppointmentsByStatus)(activeTab, fromDate, toDate, serviceConfig);
-
-      // Handle different response structures
+      if (response.status === 401) {
+        try {
+          if (typeof sessionStorage !== "undefined") {
+            sessionStorage.removeItem(STORAGE_KEY_APP_TOKEN);
+            sessionStorage.removeItem(STORAGE_KEY_DOCTOR_ID);
+            sessionStorage.removeItem(STORAGE_KEY_USER_NAME);
+          }
+        } catch (e) {}
+        setAppToken(null);
+        setDoctorIdFromLogin(null);
+        setUserName(null);
+        setRefreshLoginTrigger(t => t + 1);
+        setError("Session expired. Re-authenticating...");
+        return;
+      }
       const appointmentsData = response.data || response.appointments || response || [];
       setAllAppointments(appointmentsData);
-
-      // Auto-select first appointment if available, otherwise clear selection
       if (appointmentsData.length > 0) {
         setSelectedAppointment(appointmentsData[0]);
       } else {
@@ -230,7 +346,7 @@ const AppointmentPage = _ref => {
     } finally {
       setLoading(false);
     }
-  }, [activeTab, fromDate, toDate, apiBaseUrl, hospitalId, doctorId]);
+  }, [activeTab, fromDate, toDate, apiBaseUrl, hospitalId, doctorIdFromLogin, appToken]);
 
   // Handle appointment selection - no API call, just show data from list
   const handleAppointmentSelect = appointment => {
@@ -424,15 +540,61 @@ const AppointmentPage = _ref => {
     return () => window.removeEventListener('resize', handleResize);
   }, [showPipVideo, isPipMinimized, isPipFullscreen, pipSize]);
 
+  // Call login API only when we have no appToken (or got 401 and need refresh). Otherwise use stored appToken.
+  (0, _react.useEffect)(() => {
+    const needLogin = idToken && email && (!appToken || refreshLoginTrigger > 0);
+    if (!needLogin) return;
+    let cancelled = false;
+    setTokenLoading(true);
+    setTokenError(null);
+    (0, _httpService.getTokenFromSso)(apiBaseUrl, hospitalId, idToken, email).then(response => {
+      if (cancelled) return;
+      const token = extractAppToken(response);
+      if (response.err || !token) {
+        setTokenError(response.err || "Failed to get token");
+        setAppToken(null);
+        setDoctorIdFromLogin(null);
+        setUserName(null);
+        try {
+          if (typeof sessionStorage !== "undefined") {
+            sessionStorage.removeItem(STORAGE_KEY_APP_TOKEN);
+            sessionStorage.removeItem(STORAGE_KEY_DOCTOR_ID);
+            sessionStorage.removeItem(STORAGE_KEY_USER_NAME);
+          }
+        } catch (e) {}
+      } else {
+        const doctorId = extractDoctorIdFromLoginResponse(response);
+        const name = extractUserNameFromLoginResponse(response);
+        setAppToken(token);
+        setDoctorIdFromLogin(doctorId);
+        setUserName(name);
+        setTokenError(null);
+        try {
+          if (typeof sessionStorage !== "undefined") {
+            sessionStorage.setItem(STORAGE_KEY_APP_TOKEN, token);
+            if (doctorId) sessionStorage.setItem(STORAGE_KEY_DOCTOR_ID, doctorId);
+            if (name) sessionStorage.setItem(STORAGE_KEY_USER_NAME, name);
+          }
+        } catch (e) {}
+      }
+    }).catch(() => {}).finally(() => {
+      if (!cancelled) setTokenLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [apiBaseUrl, hospitalId, idToken, email, refreshLoginTrigger]);
+
   // Reset page to 1 when filters change
   (0, _react.useEffect)(() => {
     setCurrentPage(1);
   }, [activeTab, selectedDate, fromDate, toDate, searchQuery]);
 
-  // Fetch appointments on mount and tab change
+  // Fetch appointments when we have appToken (tab/date change triggers refetch via fetchAppointments deps)
   (0, _react.useEffect)(() => {
+    if (tokenLoading || !appToken) return;
     fetchAppointments();
-  }, [fetchAppointments]);
+  }, [fetchAppointments, appToken, tokenLoading]);
 
   // Setup fonts and responsive styles
   (0, _react.useEffect)(() => {
@@ -471,6 +633,91 @@ const AppointmentPage = _ref => {
     };
   }, [showDatePicker]);
   let fontFamily = '"Nunito", serif';
+
+  // When token API fails, show only "Not authorized" / "Not found" — do not show the full Tele Consultation UI
+  if (tokenError) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        fontFamily,
+        background: "#F5F5F7",
+        boxSizing: "border-box",
+        height: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "24px",
+        textAlign: "center"
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        maxWidth: "400px",
+        padding: "32px 24px",
+        background: "#FFFFFF",
+        borderRadius: "12px",
+        boxShadow: "0 4px 20px rgba(0,0,0,0.08)"
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        fontSize: "48px",
+        marginBottom: "16px"
+      }
+    }, "\uD83D\uDD12"), /*#__PURE__*/_react.default.createElement("h2", {
+      style: {
+        fontSize: "20px",
+        fontWeight: 700,
+        color: "#1a1a1a",
+        margin: "0 0 8px 0"
+      }
+    }, "Not authorised"), /*#__PURE__*/_react.default.createElement("p", {
+      style: {
+        fontSize: "14px",
+        color: "#666",
+        margin: 0,
+        lineHeight: 1.5
+      }
+    }, tokenError), /*#__PURE__*/_react.default.createElement("p", {
+      style: {
+        fontSize: "13px",
+        color: "#999",
+        marginTop: "16px",
+        marginBottom: 0
+      }
+    }, "You are not authorised to use this service. Please sign in again or contact support.")));
+  }
+
+  // While checking token (SSO in progress), show a simple loading state instead of the full UI
+  if (tokenLoading && idToken && email) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        fontFamily,
+        background: "#F5F5F7",
+        boxSizing: "border-box",
+        height: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        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", {
+      style: {
+        width: "40px",
+        height: "40px",
+        border: "3px solid #f3f3f3",
+        borderTop: "3px solid #4C4DDC",
+        borderRadius: "50%",
+        animation: "spin 1s linear infinite",
+        marginBottom: "16px"
+      }
+    }), /*#__PURE__*/_react.default.createElement("p", {
+      style: {
+        fontSize: "14px",
+        color: "#666",
+        margin: 0
+      }
+    }, "Checking authorisation..."));
+  }
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       fontFamily,
@@ -587,7 +834,7 @@ const AppointmentPage = _ref => {
     style: {
       color: "#1a1a1a"
     }
-  }, "Sameera")), /*#__PURE__*/_react.default.createElement("img", {
+  }, displayName)), /*#__PURE__*/_react.default.createElement("img", {
     src: "https://w7.pngwing.com/pngs/340/946/png-transparent-avatar-user-computer-icons-software-developer-avatar-child-face-heroes-thumbnail.png",
     alt: "User",
     style: {
@@ -1029,7 +1276,29 @@ const AppointmentPage = _ref => {
       overflow: "auto",
       flex: 1
     }
-  }, loading ? /*#__PURE__*/_react.default.createElement("div", {
+  }, tokenLoading ? /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      padding: "40px",
+      color: "#888"
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      textAlign: "center"
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: "40px",
+      height: "40px",
+      border: "3px solid #f3f3f3",
+      borderTop: "3px solid #4C4DDC",
+      borderRadius: "50%",
+      animation: "spin 1s linear infinite",
+      margin: "0 auto 10px"
+    }
+  }), "Getting token...")) : loading ? /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: "flex",
       justifyContent: "center",

package/dist/constants/apiConfig.js

@@ -29,4 +29,4 @@ const DEFAULT_PARAMS = exports.DEFAULT_PARAMS = {
 const REQUEST_TIMEOUT = exports.REQUEST_TIMEOUT = 10000;
 
 // Join call URL (will be dynamic from auth API later)
-const JOIN_CALL_URL = exports.JOIN_CALL_URL = "https://wbafedevittisalwe01-had2b3e0a7h6fyey.westeurope-01.azurewebsites.net/call/eyJhbGciOiJIUzI1NiJ9.eyJtZXRhZGF0YSI6InVzZXItcm9sZTpkb2N0b3IiLCJuYW1lIjoiRHIuIE1hZ2VkIEZhaG15IiwidmlkZW8iOnsicm9vbUpvaW4iOnRydWUsInJvb20iOiIxMzUwMDgiLCJjYW5QdWJsaXNoIjp0cnVlLCJjYW5TdWJzY3JpYmUiOnRydWUsImNhblB1Ymxpc2hEYXRhIjp0cnVlfSwiaXNzIjoiQVBJa2JTTDg5Y0hxVlhZIiwiZXhwIjoxNzcxMzQxNjYyLCJuYmYiOjAsInN1YiI6ImhpbmF2aW5tYXRoQGdtYWlsLmNvbSJ9.3iJCdselxCHZ6IPzzgG3fGrIwInSszgqLeSgo3EX5bs";
+const JOIN_CALL_URL = exports.JOIN_CALL_URL = "https://wbafedevittisalwe01-had2b3e0a7h6fyey.westeurope-01.azurewebsites.net/call/";