medos-sdk 1.1.7 → 1.1.8

package/dist/vanilla/EnquiryFormWidget.d.ts

@@ -12,6 +12,7 @@ declare class EnquiryFormWidget {
     private options;
     private mounted;
     private state;
+    private countryCodeSelect;
     constructor(container: HTMLElement | string, options: EnquiryFormWidgetOptions);
     private init;
     private validateContactStep;
@@ -22,6 +23,7 @@ declare class EnquiryFormWidget {
     private resetForm;
     private setState;
     private render;
+    private initializeCustomComponents;
     private renderStep;
     private renderStep0;
     private renderStep1;

package/dist/vanilla/EnquiryFormWidget.js

@@ -1,9 +1,21 @@
 import { EnquiryService } from "../services/EnquiryService";
 import { MedosClient } from "../client/MedosClient";
 import { validateName, validateEmail, validatePhoneNumber, validateSubject, validateMessage, validateCountryCode, } from "../enquiry-form/validation";
+import { VanillaIcons } from "./components/VanillaIcons";
+import { VanillaSelect } from "./components/VanillaSelect";
+import { injectThemedStyles } from "./components/theme-injector";
+const COUNTRY_CODES_ENQUIRY = [
+    { value: "+91", label: "🇮🇳 +91" },
+    { value: "+1", label: "🇺🇸 +1" },
+    { value: "+44", label: "🇬🇧 +44" },
+    { value: "+86", label: "🇨🇳 +86" },
+    { value: "+81", label: "🇯🇵 +81" },
+];
 class EnquiryFormWidget {
     constructor(container, options) {
         this.mounted = true;
+        this.countryCodeSelect = null;
+        injectThemedStyles();
         if (typeof container === "string") {
             const el = document.getElementById(container);
             if (!el) {
@@ -185,6 +197,23 @@ class EnquiryFormWidget {
       </div>
     `;
         this.attachEventListeners();
+        this.initializeCustomComponents();
+    }
+    initializeCustomComponents() {
+        if (this.state.step === 0) {
+            const countryCodeContainer = this.container.querySelector("#medos-enquiry-country-code-container");
+            if (countryCodeContainer) {
+                this.countryCodeSelect = new VanillaSelect(countryCodeContainer, COUNTRY_CODES_ENQUIRY, {
+                    placeholder: "Country",
+                    onValueChange: (value) => {
+                        this.state.countryCode = value;
+                    },
+                });
+                if (this.state.countryCode) {
+                    this.countryCodeSelect.setValue(this.state.countryCode);
+                }
+            }
+        }
     }
     renderStep() {
         switch (this.state.step) {
@@ -202,121 +231,147 @@ class EnquiryFormWidget {
     }
     renderStep0() {
         return `
-      <div class="medos-enquiry-section">
-        <label class="medos-enquiry-label">Full Name *</label>
-        <input 
-          type="text" 
-          class="medos-enquiry-input" 
-          id="medos-enquiry-name" 
-          placeholder="Enter your full name"
-          value="${this.escapeHtml(this.state.patientName)}"
-        />
-        
-        <label class="medos-enquiry-label" style="margin-top: 12px">Email Address *</label>
-        <input 
-          type="email" 
-          class="medos-enquiry-input" 
-          id="medos-enquiry-email" 
-          placeholder="your.email@example.com"
-          value="${this.escapeHtml(this.state.patientEmail)}"
-        />
-        
-        <label class="medos-enquiry-label" style="margin-top: 12px">Country Code *</label>
-        <input 
-          type="text" 
-          class="medos-enquiry-input" 
-          id="medos-enquiry-country-code" 
-          placeholder="+91"
-          value="${this.escapeHtml(this.state.countryCode)}"
-        />
-        
-        <label class="medos-enquiry-label" style="margin-top: 12px">Phone Number *</label>
-        <input 
-          type="tel" 
-          class="medos-enquiry-input" 
-          id="medos-enquiry-phone" 
-          placeholder="9876543210"
-          value="${this.escapeHtml(this.state.patientPhone)}"
-          maxlength="15"
-        />
-        
-        <div class="medos-enquiry-actions">
-          <button class="medos-enquiry-btn medos-enquiry-btn-secondary" id="medos-enquiry-btn-cancel">Cancel</button>
-          <button class="medos-enquiry-btn medos-enquiry-btn-primary" id="medos-enquiry-btn-next">Next</button>
+      <div class="medos-section-card">
+        <div class="medos-section-header">
+          ${VanillaIcons.user(14)}
+          <span class="medos-section-title">Contact Information</span>
+        </div>
+        <div class="medos-section-body">
+          <div class="medos-form-group">
+            <label class="medos-label">Full Name <span class="medos-required">*</span></label>
+            <input 
+              type="text" 
+              class="medos-input" 
+              id="medos-enquiry-name" 
+              placeholder="Enter your full name"
+              value="${this.escapeHtml(this.state.patientName)}"
+            />
+          </div>
+          
+          <div class="medos-form-group">
+            <label class="medos-label">Email Address <span class="medos-required">*</span></label>
+            <input 
+              type="email" 
+              class="medos-input" 
+              id="medos-enquiry-email" 
+              placeholder="your.email@example.com"
+              value="${this.escapeHtml(this.state.patientEmail)}"
+            />
+          </div>
+          
+          <div class="medos-form-group">
+            <label class="medos-label">Phone Number <span class="medos-required">*</span></label>
+            <div class="medos-phone-input-row">
+              <div class="medos-country-code-wrapper">
+                <div id="medos-enquiry-country-code-container"></div>
+              </div>
+              <div class="medos-phone-wrapper">
+                <input 
+                  type="tel" 
+                  class="medos-input" 
+                  id="medos-enquiry-phone" 
+                  placeholder="Enter phone number"
+                  value="${this.escapeHtml(this.state.patientPhone)}"
+                  maxlength="15"
+                />
+              </div>
+            </div>
+          </div>
         </div>
       </div>
+      
+      <div class="medos-actions">
+        <button class="medos-btn medos-btn-secondary" id="medos-enquiry-btn-cancel">Cancel</button>
+        <button class="medos-btn medos-btn-primary" id="medos-enquiry-btn-next">Next</button>
+      </div>
     `;
     }
     renderStep1() {
         return `
-      <div class="medos-enquiry-section">
-        <label class="medos-enquiry-label">Subject *</label>
-        <input 
-          type="text" 
-          class="medos-enquiry-input" 
-          id="medos-enquiry-subject" 
-          placeholder="What is your inquiry about?"
-          value="${this.escapeHtml(this.state.inquirySubject)}"
-        />
-        
-        <label class="medos-enquiry-label" style="margin-top: 12px">Message *</label>
-        <textarea 
-          class="medos-enquiry-textarea" 
-          id="medos-enquiry-message" 
-          placeholder="Please describe your inquiry in detail (max 1000 characters)"
-          maxlength="1000"
-        >${this.escapeHtml(this.state.inquiryMessage)}</textarea>
-        <div class="medos-enquiry-char-count">${this.state.inquiryMessage.length}/1000</div>
-        
-        <div class="medos-enquiry-actions">
-          <button class="medos-enquiry-btn medos-enquiry-btn-secondary" id="medos-enquiry-btn-back">Back</button>
-          <button class="medos-enquiry-btn medos-enquiry-btn-primary" id="medos-enquiry-btn-next">Next</button>
+      <div class="medos-section-card">
+        <div class="medos-section-header">
+          ${VanillaIcons.mail(14)}
+          <span class="medos-section-title">Inquiry Details</span>
+        </div>
+        <div class="medos-section-body">
+          <div class="medos-form-group">
+            <label class="medos-label">Subject <span class="medos-required">*</span></label>
+            <input 
+              type="text" 
+              class="medos-input" 
+              id="medos-enquiry-subject" 
+              placeholder="What is your inquiry about?"
+              value="${this.escapeHtml(this.state.inquirySubject)}"
+            />
+          </div>
+          
+          <div class="medos-form-group">
+            <label class="medos-label">Message <span class="medos-required">*</span></label>
+            <textarea 
+              class="medos-textarea" 
+              id="medos-enquiry-message" 
+              placeholder="Please describe your inquiry in detail (max 1000 characters)"
+              maxlength="1000"
+            >${this.escapeHtml(this.state.inquiryMessage)}</textarea>
+            <div class="medos-char-count">${this.state.inquiryMessage.length}/1000</div>
+          </div>
         </div>
       </div>
+      
+      <div class="medos-actions">
+        <button class="medos-btn medos-btn-secondary" id="medos-enquiry-btn-back">Back</button>
+        <button class="medos-btn medos-btn-primary" id="medos-enquiry-btn-next">Next</button>
+      </div>
     `;
     }
     renderStep2() {
         return `
-      <div class="medos-enquiry-section">
-        <label class="medos-enquiry-label">Preferred Contact Method *</label>
-        <div class="medos-enquiry-radio-group">
-          <label class="medos-enquiry-radio-label">
-            <input 
-              type="radio" 
-              name="contact-method" 
-              value="PHONE"
-              ${this.state.preferredContactMethod === "PHONE" ? "checked" : ""}
-              id="medos-enquiry-contact-phone"
-            />
-            <span>Phone</span>
-          </label>
-          <label class="medos-enquiry-radio-label">
-            <input 
-              type="radio" 
-              name="contact-method" 
-              value="EMAIL"
-              ${this.state.preferredContactMethod === "EMAIL" ? "checked" : ""}
-              id="medos-enquiry-contact-email"
-            />
-            <span>Email</span>
-          </label>
-          <label class="medos-enquiry-radio-label">
-            <input 
-              type="radio" 
-              name="contact-method" 
-              value="BOTH"
-              ${this.state.preferredContactMethod === "BOTH" ? "checked" : ""}
-              id="medos-enquiry-contact-both"
-            />
-            <span>Both</span>
-          </label>
+      <div class="medos-section-card">
+        <div class="medos-section-header">
+          ${VanillaIcons.phone(14)}
+          <span class="medos-section-title">Contact Preference</span>
         </div>
-        
-        <div class="medos-enquiry-actions">
-          <button class="medos-enquiry-btn medos-enquiry-btn-secondary" id="medos-enquiry-btn-back">Back</button>
-          <button class="medos-enquiry-btn medos-enquiry-btn-primary" id="medos-enquiry-btn-submit" ${this.state.loading ? "disabled" : ""} style="opacity: ${this.state.loading ? 0.6 : 1}">${this.state.loading ? "Submitting..." : "Submit Inquiry"}</button>
+        <div class="medos-section-body">
+          <p class="medos-section-description">How would you prefer to be contacted?</p>
+          <div class="medos-contact-options">
+            <label class="medos-radio-option ${this.state.preferredContactMethod === "PHONE" ? "selected" : ""}">
+              <input 
+                type="radio" 
+                name="contact-method" 
+                value="PHONE"
+                ${this.state.preferredContactMethod === "PHONE" ? "checked" : ""}
+                class="medos-radio-input"
+              />
+              <span class="medos-radio-label">Phone</span>
+            </label>
+            <label class="medos-radio-option ${this.state.preferredContactMethod === "EMAIL" ? "selected" : ""}">
+              <input 
+                type="radio" 
+                name="contact-method" 
+                value="EMAIL"
+                ${this.state.preferredContactMethod === "EMAIL" ? "checked" : ""}
+                class="medos-radio-input"
+              />
+              <span class="medos-radio-label">Email</span>
+            </label>
+            <label class="medos-radio-option ${this.state.preferredContactMethod === "BOTH" ? "selected" : ""}">
+              <input 
+                type="radio" 
+                name="contact-method" 
+                value="BOTH"
+                ${this.state.preferredContactMethod === "BOTH" ? "checked" : ""}
+                class="medos-radio-input"
+              />
+              <span class="medos-radio-label">Both</span>
+            </label>
+          </div>
         </div>
       </div>
+      
+      <div class="medos-actions">
+        <button class="medos-btn medos-btn-secondary" id="medos-enquiry-btn-back">Back</button>
+        <button class="medos-btn medos-btn-primary" id="medos-enquiry-btn-submit" ${this.state.loading ? "disabled" : ""} style="opacity: ${this.state.loading ? 0.6 : 1}">${this.state.loading ? "Submitting..." : "Submit Inquiry"}</button>
+      </div>
     `;
     }
     renderStep3() {

package/dist/vanilla/components/VanillaCalendar.d.ts

@@ -0,0 +1,32 @@
+export interface VanillaCalendarOptions {
+    pastDisabled?: boolean;
+    onSelect?: (date: Date) => void;
+    selectedDate?: Date;
+}
+export declare class VanillaCalendar {
+    private container;
+    private config;
+    private currentMonth;
+    private currentYear;
+    private selectedDate;
+    private today;
+    private static readonly DAYS_OF_WEEK;
+    private static readonly MONTHS;
+    constructor(container: HTMLElement | string, config?: VanillaCalendarOptions);
+    private getDaysInMonth;
+    private getFirstDayOfMonth;
+    private isSameDate;
+    private isBeforeToday;
+    private render;
+    private attachEventListeners;
+    private prevMonth;
+    private nextMonth;
+    private selectDate;
+    setSelectedDate(date: Date | null): void;
+    getSelectedDate(): Date | null;
+    goToDate(date: Date): void;
+    goToToday(): void;
+    setPastDisabled(disabled: boolean): void;
+    destroy(): void;
+}
+export default VanillaCalendar;