medos-sdk 1.2.0 → 1.2.1

package/dist/vanilla/AppointmentCalendarWidget.js

@@ -900,8 +900,8 @@ class AppointmentCalendarWidget {
             return `
         <div class="medos-section-card">
           <div class="medos-section-header">
-            ${VanillaIcons.phone(14)}
-            <span class="medos-section-title">Search Patient</span>
+            ${VanillaIcons.phone(18)}
+            <span class="medos-section-title">Verify Details</span>
           </div>
           <div class="medos-section-body">
             <p class="medos-section-description">Enter Phone Number</p>
@@ -914,7 +914,7 @@ class AppointmentCalendarWidget {
                   type="tel" 
                   class="medos-input" 
                   id="medos-phone" 
-                  placeholder="XXXXXXXXXX" 
+                  placeholder="0000 000 000" 
                   value="${this.escapeHtml(this.state.patientPhone)}" 
                   maxlength="15"
                 />
@@ -924,16 +924,16 @@ class AppointmentCalendarWidget {
                 ? '<div class="medos-validation-error">Phone number should be 7-15 digits</div>'
                 : ""}
           </div>
-        </div>
-        <div class="medos-actions">
-          <button class="medos-btn medos-btn-primary" id="medos-btn-send-otp" ${canSendOtp ? "" : "disabled"}>${this.state.otpSending ? "Sending..." : "Continue"}</button>
+          <div class="medos-actions">
+            <button class="medos-btn medos-btn-primary" id="medos-btn-send-otp" ${canSendOtp ? "" : "disabled"}>${this.state.otpSending ? "Sending..." : "Continue"}</button>
+          </div>
         </div>
       `;
         }
         return `
       <div class="medos-section-card">
         <div class="medos-section-header">
-          ${VanillaIcons.phone(14)}
+          ${VanillaIcons.phone(18)}
           <span class="medos-section-title">Enter OTP</span>
         </div>
         <div class="medos-section-body">
@@ -943,19 +943,19 @@ class AppointmentCalendarWidget {
               type="text" 
               class="medos-input medos-otp-input" 
               id="medos-otp" 
-              placeholder="Enter 6-digit OTP" 
+              placeholder="000000" 
               value="${this.escapeHtml(this.state.otpCode)}" 
               maxlength="6"
             />
           </div>
           <button class="medos-link-btn" id="medos-btn-change-number">Change phone number</button>
         </div>
-      </div>
-      <div class="medos-actions">
-        <button class="medos-btn medos-btn-secondary" id="medos-btn-resend-otp">Resend OTP</button>
-        <button class="medos-btn medos-btn-primary" id="medos-btn-verify-otp" ${this.state.otpCode.length === 6 && !this.state.otpVerifying
+        <div class="medos-actions">
+          <button class="medos-btn medos-btn-secondary" id="medos-btn-resend-otp">Resend OTP</button>
+          <button class="medos-btn medos-btn-primary" id="medos-btn-verify-otp" ${this.state.otpCode.length === 6 && !this.state.otpVerifying
             ? ""
             : "disabled"}>${this.state.otpVerifying ? "Verifying..." : "Verify OTP"}</button>
+        </div>
       </div>
     `;
     }
@@ -968,7 +968,7 @@ class AppointmentCalendarWidget {
         return `
       <div class="medos-section-card">
         <div class="medos-section-header">
-          <h3 class="medos-section-title" style="font-size: var(--medos-typography-font-size-xl, 20px);">Choose Booking Option</h3>
+          <h3 class="medos-section-title">Choose Booking Option</h3>
         </div>
         <div class="medos-section-body">
           <p class="medos-section-description">
@@ -1002,7 +1002,7 @@ class AppointmentCalendarWidget {
                 .join("")}
               </div>
             </div>
-            ${hasActivePacks ? '<hr style="margin: 6px 0;" />' : ""}
+            ${hasActivePacks ? '<hr style="margin: 24px 0;" />' : ""}
           `
             : ""}
           
@@ -1050,10 +1050,10 @@ class AppointmentCalendarWidget {
             : ""}
           </div>
         </div>
-      </div>
-      <div class="medos-actions">
-        <button class="medos-btn medos-btn-secondary" id="medos-btn-back">${VanillaIcons.arrowLeft(14)} Back</button>
-        <button class="medos-btn medos-btn-primary" id="medos-btn-continue" ${this.state.bookingOptionType ? "" : "disabled"}>Next</button>
+        <div class="medos-actions">
+          <button class="medos-btn medos-btn-secondary" id="medos-btn-back">${VanillaIcons.arrowLeft(14)} Back</button>
+          <button class="medos-btn medos-btn-primary" id="medos-btn-continue" ${this.state.bookingOptionType ? "" : "disabled"}>Next</button>
+        </div>
       </div>
     `;
     }