clinic-connect-widget 1.1.9 → 1.1.10

package/README.md

@@ -49,6 +49,15 @@ You can pre-select a doctor or product context by passing additional attributes.
     
     data-product-id="YOUR_PRODUCT_ID"
     data-url-video="YOUR_VIDEO_URL"
+
+    data-appointment-mode="ONLINE"
+    data-schedule-mode="TELENOW"
+    data-resource-id="YOUR_RESOURCE_ID"
+    data-resource-type="DOCTOR"
+    data-subscription="YOUR_SUBSCRIPTION_ID"
+    data-service-id="YOUR_SERVICE_ID"
+    data-order-id="YOUR_ORDER_ID"
+
     data-locale="vi">
 </script>
 ```
@@ -64,14 +73,21 @@ The widget is highly configurable via `data-` attributes on the script tag.
 | `data-service-operator` | The Service Operator ID (e.g., 'TRUE_DOC'). | **Yes** | - |
 | `data-trigger-element-id`| The generic DOM ID of the element where you want to render the inline trigger card (instead of floating). | No | `null` |
 | `data-locale` | Language code (e.g., 'vi', 'en'). | No | `vi` |
-| `data-store-id` | The Store ID associated with the booking system. | No | `null` |
-| `data-org-id` | The Organization ID. | No | `null` |
+| `data-store-id` | The Store ID associated with the booking system. | No | `demo-store` |
+| `data-org-id` | The Organization ID. | No | `demo-org` |
 | `data-doctor-id` | Pre-select a specific doctor context. | No | `null` |
 | `data-doctor-name` | Custom name for the doctor (Dynamic). | No | `null` |
 | `data-doctor-specialty` | Custom specialty for the doctor (Dynamic). | No | `null` |
 | `data-doctor-avatar` | Custom avatar URL for the doctor (Dynamic). | No | `null` |
 | `data-product-id` | Pre-select a specific product or service package. | No | `null` |
 | `data-url-video` | URL for the introductory video used in the permission flow. | No | `null` |
+| `data-appointment-mode`| Mode of appointment (e.g., 'ONLINE', 'OFFLINE'). | No | `null` |
+| `data-schedule-mode` | Mode of schedule (e.g., 'SCHEDULED', 'TELENOW'). | No | `null` |
+| `data-resource-id` | ID of the specific resource to book. | No | `null` |
+| `data-resource-type` | Type of the resource (e.g., 'DOCTOR'). | No | `null` |
+| `data-subscription` | Subscription package ID. | No | `null` |
+| `data-service-id` | Specific service ID for the booking. | No | `null` |
+| `data-order-id` | External order ID to link with the booking. | No | `null` |
 
 ## Client Hooks (API)
 
@@ -145,7 +161,7 @@ To verify the final build behaves as expected:
 
 ## Project Structure
 
-*   `src/api/`: Handles API simulation and fetching widget configuration.
+*   `src/api/`: Handles API integration, parsing customer data, calling ActionBooking API, etc.
 *   `src/core/`: Main widget logic (`ClinicWidget` class), lifecycle management, and event binding.
 *   `src/state/`: Centralized state management (Store pattern).
 *   `src/ui/`: Contains HTML Templates (`templates.js`) and CSS Styles (`styles.js`).

package/dist/clinic-widget.es.js

@@ -72,7 +72,7 @@ const CONFIG = {
   LIVEKIT_URL: "wss://livekit.longvan.vn",
   PARTICIPANTS_API_URL: "https://call.longvan.vn/api/livekit/room/participants",
   API_BASE_URL: "https://portal.longvan.vn",
-  BOOKING_API_URL: "https://portal.longvan.vn/dynamic-collection/public/v2/schedule/createBooking",
+  BOOKING_API_URL: "https://portal.longvan.vn/dynamic-collection/public/v2/schedule/actionBooking",
   USER_GRAPHQL: "https://user.longvan.vn/user-gateway/graphql",
   CRM_GRAPHQL: "https://crm.longvan.vn/authorization-gateway/graphql",
   PRODUCT_GRAPHQL: "https://product-service.longvan.vn/product-service/graphql",
@@ -256,20 +256,41 @@ class ApiService {
     }
   }
   async createBooking(bookingData) {
-    const { partnerId, ownerId, employeeId, startDateExpect, appointmentMode, clinicId } = bookingData;
-    const baseUrl = this.config.bookingApiUrl || CONFIG.BOOKING_API_URL;
-    const cleanBaseUrl = baseUrl.endsWith("/") ? baseUrl.slice(0, -1) : baseUrl;
-    const url2 = `${cleanBaseUrl}/${clinicId}`;
+    const url2 = this.config.bookingApiUrl || CONFIG.BOOKING_API_URL;
+    const {
+      partnerId,
+      ownerId,
+      employeeId,
+      startDateExpect,
+      endDateExpect,
+      appointmentMode = "ONLINE",
+      scheduleMode = "TELENOW",
+      resourceId,
+      resourceType = "DOCTOR",
+      serviceOperatorId,
+      note,
+      subscription,
+      serviceId,
+      orderId
+    } = bookingData;
     const payload = {
       partnerId,
       ownerId,
       employeeId,
       startDateExpect,
-      endDateExpect: bookingData.endDateExpect,
-      // Pass through if provided
-      appointmentMode
+      endDateExpect,
+      appointmentMode,
+      scheduleMode,
+      resourceId: resourceId || employeeId,
+      // Default to employeeId if not provided
+      resourceType,
+      serviceOperatorId,
+      note
     };
-    console.log("[ApiService] Creating background booking:", { url: url2, payload });
+    if (subscription) payload.subscription = subscription;
+    if (serviceId) payload.serviceId = serviceId;
+    if (orderId) payload.orderId = orderId;
+    console.log("[ApiService] Creating Booking (ActionBooking):", { url: url2, payload });
     try {
       const res = await fetch(url2, {
         method: "POST",
@@ -280,11 +301,11 @@ class ApiService {
         body: JSON.stringify(payload)
       });
       if (!res.ok) {
-        console.warn("[ApiService] Background booking request failed:", res.status, res.statusText);
+        console.warn("[ApiService] ActionBooking request failed:", res.status, res.statusText);
         return null;
       }
       const json = await res.json();
-      console.log("[ApiService] Background booking response:", json);
+      console.log("[ApiService] ActionBooking response:", json);
       return json;
     } catch (e2) {
       console.error("[ApiService] Error initiating booking:", e2);
@@ -682,7 +703,7 @@ const consultationHtml = `<div class="td-consultation-modal">\r
     </aside>\r
 </div>\r
 `;
-const patientFormHtml = '<div class="td-overlay-wrapper">\r\n    <div class="td-modal-centered" id="td-patient-form">\r\n        <header class="td-header">\r\n            <div class="td-header-title">\r\n                <div class="td-icon-box">\r\n                    <span class="material-symbols-outlined">medical_services</span>\r\n                </div>\r\n                <span>Tư vấn trực tuyến</span>\r\n            </div>\r\n            <button class="td-close-btn" id="td-form-close">\r\n                <span class="material-symbols-outlined">close</span>\r\n            </button>\r\n        </header>\r\n\r\n        <div class="td-content">\r\n            <div class="td-form-container">\r\n                <div class="td-form-page-header">\r\n                    <h1 class="td-form-title">Kết nối với Bác sĩ</h1>\r\n                    <p class="td-form-desc">Vui lòng nhập thông tin để bắt đầu tư vấn trực tuyến.</p>\r\n                </div>\r\n\r\n                <form class="td-form" id="td-info-form">\r\n                    <div class="td-input-group">\r\n                        <label class="td-label">Họ và tên <span style="color: red;">*</span></label>\r\n                        <input type="text" class="td-input" name="name" placeholder="VD: Nguyễn Văn A" required />\r\n                    </div>\r\n\r\n                    <div class="td-input-group">\r\n                        <label class="td-label">Số điện thoại <span style="color: red;">*</span></label>\r\n                        <div style="position: relative;">\r\n                            <input type="tel" class="td-input" name="phone" placeholder="VD: 0912 345 678" required />\r\n                            <!-- <div\r\n                                style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--td-primary);">\r\n                                <span class="material-symbols-outlined" style="font-size: 20px;">smartphone</span>\r\n                            </div> -->\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- <div class="td-input-group">\r\n                        <label class="td-label">Triệu chứng của bạn?</label>\r\n                        <div class="td-chips-group">\r\n                            <button type="button" class="td-chip active">Sốt <span class="material-symbols-outlined"\r\n                                    style="font-size: 16px;">check</span></button>\r\n                            <button type="button" class="td-chip">Ho / Cảm cúm</button>\r\n                            <button type="button" class="td-chip">Đau đầu</button>\r\n                            <button type="button" class="td-chip">Đau bụng</button>\r\n                            <button type="button" class="td-chip">Đau bụng</button>\r\n                        </div>\r\n                    </div> -->\r\n\r\n                    <!-- <div class="td-input-group">\r\n                        <label class="td-label">Mô tả thêm <span\r\n                                style="color: var(--td-text-sub); font-weight: 400;">(Tùy\r\n                                chọn)</span></label>\r\n                        <textarea class="td-textarea" name="symptoms"\r\n                            placeholder="Bạn đang cảm thấy như thế nào?"></textarea>\r\n                    </div> -->\r\n\r\n                    <div style="margin-top: 8px;">\r\n                        <button type="submit" class="td-btn td-btn-primary" id="td-form-submit">\r\n                            Bắt đầu tư vấn\r\n                            <span class="material-symbols-outlined" style="margin-left: 8px;">arrow_forward</span>\r\n                        </button>\r\n                    </div>\r\n\r\n                    <div class="td-secure-note">\r\n                        <span class="material-symbols-outlined" style="font-size: 14px;">lock</span>\r\n                        Thông tin y tế được bảo mật 100%\r\n                    </div>\r\n                </form>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>';
+const patientFormHtml = '<div class="td-overlay-wrapper">\r\n    <div class="td-modal-centered" id="td-patient-form">\r\n        <header class="td-header">\r\n            <div class="td-header-title">\r\n                <div class="td-icon-box">\r\n                    <span class="material-symbols-outlined">medical_services</span>\r\n                </div>\r\n                <span>Tư vấn trực tuyến</span>\r\n            </div>\r\n            <button class="td-close-btn" id="td-form-close">\r\n                <span class="material-symbols-outlined">close</span>\r\n            </button>\r\n        </header>\r\n\r\n        <div class="td-content">\r\n            <div class="td-form-container">\r\n                <div class="td-form-page-header">\r\n                    <h1 class="td-form-title">Kết nối với Bác sĩ</h1>\r\n                    <p class="td-form-desc">Vui lòng nhập thông tin để bắt đầu tư vấn trực tuyến.</p>\r\n                </div>\r\n\r\n                <form class="td-form" id="td-info-form">\r\n                    <div class="td-input-group">\r\n                        <label class="td-label">Họ và tên <span style="color: red;">*</span></label>\r\n                        <input type="text" class="td-input" name="name" placeholder="VD: Nguyễn Văn A" required />\r\n                    </div>\r\n\r\n                    <div class="td-input-group">\r\n                        <label class="td-label">Số điện thoại <span style="color: red;">*</span></label>\r\n                        <div style="position: relative;">\r\n                            <input type="tel" class="td-input" name="phone" placeholder="VD: 0912 345 678" required />\r\n                            <!-- <div\r\n                                style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--td-primary);">\r\n                                <span class="material-symbols-outlined" style="font-size: 20px;">smartphone</span>\r\n                            </div> -->\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- <div class="td-input-group">\r\n                        <label class="td-label">Triệu chứng của bạn?</label>\r\n                        <div class="td-chips-group">\r\n                            <button type="button" class="td-chip active">Sốt <span class="material-symbols-outlined"\r\n                                    style="font-size: 16px;">check</span></button>\r\n                            <button type="button" class="td-chip">Ho / Cảm cúm</button>\r\n                            <button type="button" class="td-chip">Đau đầu</button>\r\n                            <button type="button" class="td-chip">Đau bụng</button>\r\n                            <button type="button" class="td-chip">Đau bụng</button>\r\n                        </div>\r\n                    </div> -->\r\n\r\n                    <div class="td-input-group">\r\n                        <label class="td-label">Mô tả thêm <span\r\n                                style="color: var(--td-text-sub); font-weight: 400;">(Tùy\r\n                                chọn)</span></label>\r\n                        <textarea class="td-textarea" name="note"\r\n                            placeholder="Bạn đang cảm thấy như thế nào?"></textarea>\r\n                    </div>\r\n\r\n                    <div style="margin-top: 8px;">\r\n                        <button type="submit" class="td-btn td-btn-primary" id="td-form-submit">\r\n                            Bắt đầu tư vấn\r\n                            <span class="material-symbols-outlined" style="margin-left: 8px;">arrow_forward</span>\r\n                        </button>\r\n                    </div>\r\n\r\n                    <div class="td-secure-note">\r\n                        <span class="material-symbols-outlined" style="font-size: 14px;">lock</span>\r\n                        Thông tin y tế được bảo mật 100%\r\n                    </div>\r\n                </form>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>';
 const postConsultationHtml = '<div class="td-overlay-wrapper">\r\n    <div class="td-modal-centered" id="td-summary-view" style="max-width: 600px;">\r\n        <header class="td-header">\r\n            <h2 class="td-header-title" style="font-size: 16px;">Tổng kết tư vấn</h2>\r\n            <button class="td-close-btn" id="td-summary-close">\r\n                <span class="material-symbols-outlined">close</span>\r\n            </button>\r\n        </header>\r\n\r\n        <div class="td-content">\r\n            <div class="td-summary-container">\r\n                <!-- Success Header -->\r\n                <div class="td-success-header">\r\n                    <div class="td-success-icon">\r\n                        <span class="material-symbols-outlined" style="font-size: 32px;">check_circle</span>\r\n                    </div>\r\n                    <h3 class="td-summary-title">Tư vấn Hoàn tất</h3>\r\n                    <p class="td-summary-desc">Cuộc hẹn đã được ghi nhận vào hồ sơ sức khỏe của bạn.</p>\r\n                </div>\r\n\r\n                <!-- Info Grid -->\r\n                <div class="td-info-grid">\r\n                    <div class="td-info-card">\r\n                        <div class="td-info-label">MÃ CUỘC HẸN</div>\r\n                        <div class="td-info-value">{{bookingCode}}</div>\r\n                    </div>\r\n                    <div class="td-info-card">\r\n                        <div class="td-info-label">THỜI GIAN</div>\r\n                        <div class="td-info-value">{{visitTime}}</div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div id="td-prescription-container">\r\n                    {{prescriptionList}}\r\n                </div>\r\n\r\n                <!-- Footer Actions Removed as requested -->\r\n                <!-- <div class="td-footer-actions"></div> -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>';
 const inlineTriggerHtml = `<style>\r
     @keyframes td-pulse-animation {\r
@@ -29286,22 +29307,31 @@ class ClinicWidget {
             const teleNowSlot = state.teleNowSlot || {};
             const formatDate = (val) => {
               if (!val) return null;
-              const d = new Date(val);
+              const numVal = !isNaN(Number(val)) && typeof val !== "boolean" && String(val).trim() !== "" ? Number(val) : val;
+              const d = new Date(numVal);
               if (isNaN(d.getTime())) return null;
               const offsetMs = d.getTimezoneOffset() * 60 * 1e3;
               const local = new Date(d.getTime() - offsetMs);
-              return local.toISOString().slice(0, 16);
+              return local.toISOString().slice(0, 19);
             };
-            const startDateExpect = formatDate(teleNowSlot.startDateExpect) || formatDate(/* @__PURE__ */ new Date());
+            const startDateExpect = formatDate(teleNowSlot.startDateExpect);
             const endDateExpect = formatDate(teleNowSlot.endDateExpect);
+            const doctorId = ((_a = state.doctor) == null ? void 0 : _a.id) || this.config.doctorId;
             const bookingRes = await this.api.createBooking({
               partnerId: orgId,
               ownerId: customerId,
-              employeeId: ((_a = state.doctor) == null ? void 0 : _a.id) || this.config.doctorId,
+              employeeId: doctorId,
               startDateExpect,
               endDateExpect,
-              appointmentMode: "ONLINE",
-              clinicId: orgId
+              appointmentMode: this.config.appointmentMode || "ONLINE",
+              scheduleMode: this.config.scheduleMode || "TELENOW",
+              resourceId: this.config.resourceId || doctorId,
+              resourceType: this.config.resourceType || "DOCTOR",
+              serviceOperatorId: this.config.serviceOperator,
+              subscription: this.config.subscription,
+              serviceId: this.config.serviceId,
+              orderId: this.config.orderId,
+              note: formData.get("note") || ""
             });
             console.log("[Clinic-Connect] [API] Booking Response Received:", bookingRes);
             if (bookingRes && bookingRes.id) {
@@ -30259,6 +30289,13 @@ class ClinicWidget {
   const doctorName = currentScript ? currentScript.getAttribute("data-doctor-name") : null;
   const doctorSpecialty = currentScript ? currentScript.getAttribute("data-doctor-specialty") : null;
   const serviceOperator = currentScript ? currentScript.getAttribute("data-service-operator") : null;
+  const appointmentMode = currentScript ? currentScript.getAttribute("data-appointment-mode") : null;
+  const scheduleMode = currentScript ? currentScript.getAttribute("data-schedule-mode") : null;
+  const resourceId = currentScript ? currentScript.getAttribute("data-resource-id") : null;
+  const resourceType = currentScript ? currentScript.getAttribute("data-resource-type") : null;
+  const subscription = currentScript ? currentScript.getAttribute("data-subscription") : null;
+  const serviceId = currentScript ? currentScript.getAttribute("data-service-id") : null;
+  const orderId = currentScript ? currentScript.getAttribute("data-order-id") : null;
   const config = {
     widgetId,
     triggerElementId,
@@ -30272,6 +30309,13 @@ class ClinicWidget {
     doctorName,
     doctorSpecialty,
     serviceOperator,
+    appointmentMode,
+    scheduleMode,
+    resourceId,
+    resourceType,
+    subscription,
+    serviceId,
+    orderId,
     scriptElement: currentScript
   };
   function initWidget() {