simpo-component-library 3.6.486 → 3.6.487
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/sections/appointment-form/appointment-booking/appointment-booking/appointment-booking.component.mjs +2 -2
- package/fesm2022/simpo-component-library.mjs +2 -3
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/sections/appointment-form/appointment-booking/appointment-booking/appointment-booking.component.d.ts +1 -1
- package/package.json +1 -1
- package/simpo-component-library-3.6.487.tgz +0 -0
|
@@ -59,7 +59,6 @@ import * as mapboxgl from 'mapbox-gl';
|
|
|
59
59
|
import * as i15 from '@angular/material/datepicker';
|
|
60
60
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
61
61
|
import moment from 'moment';
|
|
62
|
-
import * as i1$2 from '@simpo-ui/services/rest.service';
|
|
63
62
|
import { isBlurhashValid, decode } from 'blurhash';
|
|
64
63
|
import * as i7$3 from 'primeng/rating';
|
|
65
64
|
import { RatingModule } from 'primeng/rating';
|
|
@@ -12912,13 +12911,13 @@ class AppointmentBookingComponent {
|
|
|
12912
12911
|
goBack() {
|
|
12913
12912
|
this.matDialog.closeAll();
|
|
12914
12913
|
}
|
|
12915
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppointmentBookingComponent, deps: [{ token:
|
|
12914
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppointmentBookingComponent, deps: [{ token: RestService }, { token: EventsService }, { token: i3.MatDialog }, { token: i2$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12916
12915
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppointmentBookingComponent, isStandalone: true, selector: "simpo-appointment-booking", host: { listeners: { "document:click": "closeOnOutsideClick()" } }, ngImport: i0, template: "<section class=\"main_section\">\r\n <div class=\"main_header\">\r\n <div class=\"header d-flex justify-content-between align-items-center\">\r\n <div class=\"back-btn d-flex justify-content-center align-items-center cursor-pointer gap-2 mb-3\"\r\n (click)=\"goBack()\">\r\n <mat-icon>keyboard_backspace</mat-icon><span>Back to My Bookings</span>\r\n </div>\r\n <div class=\"header-title\">\r\n <h1>Book New Appointment</h1>\r\n <p>{{businessName ?? \"N/A\" }}</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"progress-bar\">\r\n <div class=\"progress-fill\" [style.width]=\"barWidth + '%'\"></div>\r\n </div>\r\n </div>\r\n <div class=\"main_body w-100 d-flex justify-content-center\"><ng-container *ngIf=\"selectedTab === 'serviceListing'\">\r\n <ng-container *ngTemplateOutlet=\"serviceListing\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedTab === 'locationListing'\">\r\n <ng-container *ngTemplateOutlet=\"locationListing\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedTab === 'staffListing'\">\r\n <ng-container *ngTemplateOutlet=\"staffListing\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedTab === 'dateSelection'\">\r\n <ng-container *ngTemplateOutlet=\"dateSelection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedTab==='contactDetails'\">\r\n <ng-container *ngTemplateOutlet=\"contactDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedTab==='paymentTab'\">\r\n <ng-container *ngTemplateOutlet=\"paymentTab\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedTab==='statusTemplate'\">\r\n <ng-container *ngTemplateOutlet=\"statusTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"main_footer d-flex justify-content-center align-items-center\" *ngIf=\"selectedTab!=='statusTemplate'\">\r\n <div class=\"footer-buttons\">\r\n <span class=\"back-footer-btn cursor-pointer\" (click)=\"previousStep()\">Back</span>\r\n <button class=\"continue-btn\" [disabled]=\"!activeButton\" (click)=\"nextStep()\"\r\n *ngIf=\"selectedTab!='paymentTab'\">{{!loader ? 'Continue' : 'Loading...'}}</button>\r\n <button class=\"complete_booking cursor-pointer\" *ngIf=\"selectedTab==='paymentTab'\"\r\n (click)=\"checkPayment()\">Complete Booking</button>\r\n </div>\r\n </div>\r\n</section>\r\n<ng-template #serviceListing>\r\n <div class=\"w-60 service_section\">\r\n <div class=\"service-selection\">\r\n <h2>Select a Service</h2>\r\n <p>Choose the service you'd like to book</p>\r\n\r\n <div class=\"services-grid\">\r\n <ng-container *ngFor=\"let service of serviceData\">\r\n <div class=\"\" (click)=\"selectService(service)\"\r\n [ngClass]=\"{ 'service-card-selected' : service?.selected, 'service-card': !service?.selected }\">\r\n <div class=\" service-header\">\r\n <div class=\"service-icon\"><mat-icon>person_outline</mat-icon></div>\r\n <div class=\"service-info\">\r\n <div class=\"service-title\">{{service?.name ? service?.name : 'N/A'}}</div>\r\n <div class=\"service-category\">Wellness</div>\r\n </div>\r\n <div>\r\n <div class=\"service-price\">\u20B9{{service?.priceDetails?.price ?\r\n service?.priceDetails?.price : 'N/A' }}</div>\r\n <div class=\"service-duration\">{{service?.duration ? service?.duration : 'N/A'}} min\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"service-description\">\r\n {{service?.description ? service?.description : 'N/A'}}\r\n </div>\r\n <div class=\"home-visit\" *ngIf=\"service?.homeAppointmentAvailable\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/982126c1758628863129furniture_16406103.png\">Home\r\n Visit Available</div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- <div class=\"service-card\">\r\n <div class=\"service-header\">\r\n <div class=\"service-icon\">\uD83D\uDC64</div>\r\n <div class=\"service-info\">\r\n <div class=\"service-title\">General Consultation</div>\r\n <div class=\"service-category\">Medical</div>\r\n </div>\r\n <div>\r\n <div class=\"service-price\">\u20B9800</div>\r\n <div class=\"service-duration\">30 min</div>\r\n </div>\r\n </div>\r\n <div class=\"service-description\">\r\n Comprehensive health consultation\r\n </div>\r\n </div>\r\n\r\n <div class=\"service-card\">\r\n <div class=\"service-header\">\r\n <div class=\"service-icon\">\uD83E\uDDE0</div>\r\n <div class=\"service-info\">\r\n <div class=\"service-title\">Mental Health Counseling</div>\r\n <div class=\"service-category\">Mental Health</div>\r\n </div>\r\n <div>\r\n <div class=\"service-price\">\u20B91500</div>\r\n <div class=\"service-duration\">45 min</div>\r\n </div>\r\n </div>\r\n <div class=\"service-description\">\r\n Professional psychological support\r\n </div>\r\n <div class=\"home-visit\">Home Visit Available</div>\r\n </div>\r\n\r\n <div class=\"service-card\">\r\n <div class=\"service-header\">\r\n <div class=\"service-icon\">\u2702</div>\r\n <div class=\"service-info\">\r\n <div class=\"service-title\">Hair Cut & Styling</div>\r\n <div class=\"service-category\">Beauty</div>\r\n </div>\r\n <div>\r\n <div class=\"service-price\">\u20B91200</div>\r\n <div class=\"service-duration\">45 min</div>\r\n </div>\r\n </div>\r\n <div class=\"service-description\">\r\n Professional hair cutting and styling\r\n </div>\r\n <div class=\"home-visit\">Home Visit Available</div>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #locationListing>\r\n <div class=\"location_header\">\r\n <div class=\"header flex-column align-items-start\">\r\n <h1>Choose Location</h1>\r\n <p>Select where you'd like to receive the service</p>\r\n </div>\r\n\r\n <div class=\"location-list\">\r\n <ng-container *ngFor=\"let location of locationData\">\r\n <div (click)=\"selectLocation(location)\"\r\n [ngClass]=\"{ 'location-card-selected' : location?.selected, 'location-card': !location?.selected }\">\r\n <div class=\"location-content\">\r\n <div class=\"location-info\">\r\n <div class=\"location-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/427226c1758629157758store_3171510.png\">\r\n </div>\r\n <div class=\"location-details\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <h3>{{location?.storeName ? location?.storeName : 'N/A'}}</h3>\r\n <div class=\"distance\"><mat-icon>location_on</mat-icon> 2.3 km</div>\r\n </div>\r\n <p>{{location?.addressDetails?.addressLine}}, {{location?.addressDetails?.city}},\r\n {{location?.addressDetails?.state}} {{location?.pincode}}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- <div class=\"location-card\">\r\n <div class=\"location-content\">\r\n <div class=\"location-info\">\r\n <div class=\"location-icon branch-icon\"></div>\r\n <div class=\"location-details\">\r\n <h3>Branch Clinic</h3>\r\n <p>456 Care Avenue, Health Zone, Mumbai 400015</p>\r\n </div>\r\n </div>\r\n <div class=\"distance\">5.8 km</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"location-card\">\r\n <div class=\"location-content\">\r\n <div class=\"location-info\">\r\n <div class=\"location-icon home-icon\"></div>\r\n <div class=\"location-details\">\r\n <h3>Home Visit</h3>\r\n <p>Your Location</p>\r\n </div>\r\n </div>\r\n <div class=\"distance\">0 km</div>\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #staffListing>\r\n <div class=\"w-60 overflow-hidden\">\r\n <div class=\"d-flex w-100 h-100\">\r\n <div class=\"w-100\">\r\n <!-- Header Section -->\r\n <div class=\"staff-header mb-3\">\r\n <h1 class=\"mb-1\">Select Staff Member</h1>\r\n <p class=\"staff-subtitle mb-0\">Choose your preferred professional</p>\r\n </div>\r\n\r\n <!-- Staff Cards -->\r\n <div class=\"d-flex flex-column gap-4 staff-list\">\r\n <ng-container *ngFor=\"let staff of staffData\">\r\n <div class=\" staff-card card rounded-3 p-4\" (click)=\"selectStaff(staff)\">\r\n <div class=\"d-flex align-items-start justify-content-between\">\r\n <div class=\"d-flex align-items-start flex-grow-1\">\r\n <div\r\n class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\r\n {{staff?.staffName.slice(0,3).toUpperCase()}}\r\n </div>\r\n <div class=\"staff-details flex-grow-1\">\r\n <h3 class=\"staff-name\">{{staff?.staffName ? staff?.staffName : 'N/A'}}</h3>\r\n <p class=\"staff-specialty\">General Medicine</p>\r\n <p class=\"staff-description mb-0\">Experienced physician with 10+ years in\r\n general\r\n medicine and wellness care.</p>\r\n </div>\r\n </div>\r\n <div class=\"rating-section\">\r\n <div class=\"star-rating d-flex align-items-center\">\r\n <span class=\"star-icon\"></span>\r\n <span class=\"rating-number\">4.9</span>\r\n </div>\r\n <div class=\"review-count\">156 reviews</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #dateSelection>\r\n <div class=\"w-60\">\r\n <div class=\"row justify-content-center h-100\">\r\n <div class=\"col-12 h-100\">\r\n <div class=\"datetime-header mb-2\">\r\n <h1 class=\"mb-3\">Select Date & Time</h1>\r\n <p class=\"datetime-subtitle mb-0\">Choose when you'd like your appointment</p>\r\n </div>\r\n\r\n <!-- Main Content -->\r\n <div class=\"d-flex gap-4 main_container\">\r\n <!-- Left Column - Date Selection -->\r\n <div class=\"w-50\">\r\n <div class=\"section-card card rounded-3 p-4 h-100\">\r\n <h3 class=\"section-title\">Select Date</h3>\r\n\r\n <div class=\"date-picker-container d-flex align-items-center\"\r\n (click)=\"$event.stopPropagation()\">\r\n <input type=\"text\" class=\"form-control date-input border-0 rounded-2\"\r\n placeholder=\"dd-mm-yyyy\" [value]=\"selectedDateStr\" readonly\r\n (click)=\"toggleCalendar($event)\">\r\n\r\n <mat-icon class=\"ms-2\" (click)=\"toggleCalendar($event)\">calendar_today</mat-icon>\r\n </div>\r\n <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"datepicker-popover\" *ngIf=\"showCalendar\">\r\n <mat-calendar [(selected)]=\"selectedDate\" (selectedChange)=\"onDateSelected($event)\">\r\n </mat-calendar>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Right Column - Time Selection -->\r\n <div class=\"w-50\">\r\n <div class=\"section-card card h-100 rounded-3 p-4\">\r\n <h3 class=\"section-title\">Available Times</h3>\r\n\r\n <!-- Time Slots Grid -->\r\n <div class=\"row g-2 mb-4 overflow-scroll\">\r\n <div class=\"col-4\" *ngFor=\"let time of locationTiming\">\r\n <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\r\n (click)=\"selectTimeSlot(time)\">{{time ?\r\n time?.value.slice(0,5) : 'N/A'}}</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Waitlist Section -->\r\n <div class=\"waitlist-section rounded-3\">\r\n <div class=\"d-flex align-items-start\">\r\n <div class=\"d-flex h-100 justify-content-between flex-column\"><span\r\n class=\"waitlist-icon check-icon\"></span>\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\">\r\n </div>\r\n <div>\r\n <div class=\"waitlist-title\">No slots available?</div>\r\n <div class=\"waitlist-description\">\r\n Add me to the waitlist for earlier\r\n availability\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n<ng-template #contactDetails>\r\n <div class=\"w-60\">\r\n <div class=\"d-flex\">\r\n <div class=\"h-100 w-100\">\r\n <!-- Header Section -->\r\n <div class=\"contact-header mb-2\">\r\n <h1 class=\"mb-0\">Contact Details</h1>\r\n <p class=\"contact-subtitle mb-0\">Provide your contact information</p>\r\n </div>\r\n\r\n <!-- Form Sections -->\r\n <div class=\"d-flex gap-3 details_container flex-column w-100\">\r\n <!-- Left Column - Personal Information -->\r\n <div class=\"d-flex gap-4\">\r\n <div class=\"w-50\">\r\n <div class=\"form-section card rounded-3 p-4 h-100\">\r\n <h3 class=\"section-title\">Personal Information</h3>\r\n\r\n <!-- Full Name -->\r\n <div class=\"mb-4\">\r\n <label class=\"form-label d-flex align-items-center\">\r\n Full Name\r\n <span class=\"required-asterisk\">*</span>\r\n </label>\r\n <input type=\"text\" class=\"form-control form-input rounded-2\"\r\n [(ngModel)]=\"appointmentPayload.customerDetail.name\"\r\n (ngModelChange)=\"checkRequiredValues()\">\r\n </div>\r\n\r\n <!-- Email Address -->\r\n <div class=\"mb-4\">\r\n <label class=\"form-label d-flex align-items-center\">\r\n Email Address\r\n <span class=\"required-asterisk\">*</span>\r\n </label>\r\n <input type=\"email\" class=\"form-control form-input rounded-2\"\r\n [(ngModel)]=\"appointmentPayload.customerDetail.email\"\r\n (ngModelChange)=\"checkRequiredValues()\">\r\n </div>\r\n\r\n <!-- Phone Number -->\r\n <div class=\"mb-0\">\r\n <label class=\"form-label d-flex align-items-center\">\r\n Phone Number\r\n <span class=\"required-asterisk\">*</span>\r\n </label>\r\n <input type=\"tel\" class=\"form-control form-input rounded-2\"\r\n [(ngModel)]=\"appointmentPayload.customerDetail.phoneNumber\"\r\n (ngModelChange)=\"checkRequiredValues()\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Right Column - Home Visit Details -->\r\n <div class=\"w-50\">\r\n <div class=\"form-section card rounded-3 p-4 h-100\">\r\n <h3 class=\"section-title\">Home Visit Details</h3>\r\n\r\n <!-- Home Address -->\r\n <div class=\"mb-4\">\r\n <label class=\"form-label d-flex align-items-center\">\r\n Home Address\r\n </label>\r\n <textarea class=\"form-control form-textarea rounded-2\"\r\n placeholder=\"Enter your complete address\"></textarea>\r\n </div>\r\n\r\n <!-- Special Instructions -->\r\n <div class=\"mb-0\">\r\n <label class=\"form-label d-flex align-items-center\">\r\n Special Instructions\r\n </label>\r\n <textarea class=\"form-control form-textarea rounded-2\"\r\n placeholder=\"Any special instructions for the professional (optional)\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"policies-container\">\r\n <!-- Header -->\r\n <h2 class=\"policies-title\">Policies & Terms</h2>\r\n\r\n <!-- Policy Items -->\r\n <div class=\"policy-items-container d-flex flex-column gap-3\">\r\n <!-- Cancellation Policy -->\r\n <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n (click)=\"showCancellationPolicy = !showCancellationPolicy\">\r\n <h3 class=\"policy-title\">Cancellation Policy</h3>\r\n <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n *ngIf=\"!showCancellationPolicy\">keyboard_arrow_right</mat-icon>\r\n <mat-icon *ngIf=\"showCancellationPolicy\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n *ngIf=\"showCancellationPolicy\">\r\n <span>• Free cancellation up to 24 hours before appointment</span>\r\n <span>• 50% charge for cancellations within 24 hours</span>\r\n <span>• No refund for no-shows</span>\r\n <span>• Emergency cancellations will be reviewed case by case</span>\r\n </div>\r\n\r\n <!-- Rescheduling Policy -->\r\n <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n (click)=\"showReducingPolicy = !showReducingPolicy\">\r\n <h3 class=\"policy-title\">Rescheduling Policy</h3>\r\n <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n *ngIf=\"!showReducingPolicy\">keyboard_arrow_right</mat-icon>\r\n <mat-icon *ngIf=\"showReducingPolicy\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n *ngIf=\"showReducingPolicy\">\r\n <span>• Free cancellation up to 24 hours before appointment</span>\r\n <span>• 50% charge for cancellations within 24 hours</span>\r\n <span>• No refund for no-shows</span>\r\n <span>• Emergency cancellations will be reviewed case by case</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Acceptance Section -->\r\n <div class=\"acceptance-section\">\r\n <div class=\"custom-checkbox\"></div>\r\n <p class=\"acceptance-text\">\r\n I understand and accept the cancellation & rescheduling policies and\r\n <a href=\"#\" class=\"terms-link\">Terms & Conditions<span\r\n class=\"external-link-icon\"></span></a>\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #paymentTab>\r\n <div class=\"w-60\">\r\n <div class=\"w-100 h-100\">\r\n <div class=\"w-100 d-flex justify-content-center align-items-center flex-column\">\r\n <!-- Header Section -->\r\n <div class=\"payment-header mb-3 w-100\">\r\n <h1 class=\"mb-0\">Payment & Confirmation</h1>\r\n <p class=\"payment-subtitle mb-0\">Review your booking and complete payment</p>\r\n </div>\r\n\r\n <!-- Booking Summary Card -->\r\n <div class=\"booking-summary-card w-50\">\r\n <h2 class=\"summary-title\">Booking Summary</h2>\r\n\r\n <!-- Service -->\r\n <div class=\"summary-row\">\r\n <div class=\"summary-label\">Service</div>\r\n <div class=\"summary-value\">{{selectedService?.name ? selectedService?.name : 'N/A'}}</div>\r\n </div>\r\n\r\n <!-- Professional -->\r\n <div class=\"summary-row\">\r\n <div class=\"summary-label\">Professional</div>\r\n <div class=\"summary-value\">{{selectedStaff?.staffName ? selectedStaff?.staffName : 'N/A'}}</div>\r\n </div>\r\n\r\n <!-- Location -->\r\n <div class=\"summary-row\">\r\n <div class=\"summary-label\">Location</div>\r\n <div class=\"summary-value\">{{selectedLocation?.storeName ? selectedLocation?.storeName : 'N/A'}}\r\n </div>\r\n </div>\r\n\r\n <!-- Date & Time -->\r\n <div class=\"summary-row\">\r\n <div class=\"summary-label\">Date & Time</div>\r\n <div class=\"summary-value\">{{selectedDate ? (selectedDate | date : 'shortData') :\r\n (selectedDateStr ? (selectedDateStr) : 'N/A')}} at\r\n 15:30</div>\r\n </div>\r\n\r\n <!-- Duration -->\r\n <div class=\"summary-row\">\r\n <div class=\"summary-label\">Duration</div>\r\n <div class=\"summary-value\">{{selectedService?.duration ? selectedService?.duration : 'N/A'}}\r\n minutes</div>\r\n </div>\r\n <div class=\"summary-row\">\r\n <div class=\"summary-label\">Tax Percent</div>\r\n <div class=\"summary-value\">{{selectedService?.priceDetails?.taxPercent ?\r\n selectedService?.priceDetails?.taxPercent : 'N/A'}}%</div>\r\n </div>\r\n <!-- Total -->\r\n <div class=\"summary-row total-row\">\r\n <div class=\"summary-label\">Total</div>\r\n <div class=\"summary-value\">\r\n <span class=\"currency-symbol\">\u20B9</span>{{selectedService?.priceDetails?.price ?\r\n selectedService?.priceDetails?.price : 'N/A'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #statusTemplate>\r\n <div class=\"booking-confirmation\">\r\n <!-- Success Icon -->\r\n <div class=\"success-icon\">\r\n <div class=\"checkmark-circle\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\r\n class=\"w-100 h-100\" *ngIf=\"apiStatus\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\r\n class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content -->\r\n <div class=\"confirmation-content\">\r\n <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\r\n <p class=\"confirmation-message\">\r\n {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book you appointment. Please\r\n try again later'}}\r\n </p>\r\n\r\n <!-- Details Card -->\r\n <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\r\n <div class=\"details-card\">\r\n <h3 class=\"details-title\">Appointment Details</h3>\r\n\r\n <div class=\"details-row\">\r\n <span class=\"detail-label\">Service</span>\r\n <span class=\"detail-value\">{{appointmentPayload.serviceDetail?.name ?\r\n appointmentPayload.serviceDetail?.name : 'N/A'}}</span>\r\n </div>\r\n\r\n <div class=\"details-row\">\r\n <span class=\"detail-label\">Professional</span>\r\n <span class=\"detail-value\">{{appointmentPayload.staffDetail?.name ?\r\n appointmentPayload.staffDetail?.name : 'N/A'}}</span>\r\n </div>\r\n <div class=\"details-row\">\r\n <span class=\"detail-label\">Date & Time</span>\r\n <span class=\"detail-value\">{{appointmentPayload.bookingDate ?\r\n appointmentPayload.bookingDate.slice(0,8) :\r\n 'N/A'}} at\r\n {{appointmentPayload.startTime ? appointmentPayload.startTime : 'N/A'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- Action Buttons -->\r\n <!-- <div class=\"action-buttons\">\r\n <button class=\"btn btn-outline\">View My Bookings</button>\r\n <button class=\"btn btn-primary\">Back to Admin</button>\r\n </div> -->\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#fff;color:#000;line-height:1.6}.main_header{padding:1%}.main_body{height:73vh}.header{display:flex;align-items:center;justify-content:space-between}.back-btn mat-icon{height:16px!important;width:20px!important;font-size:21px!important}.back-btn span{color:#000;font-size:15px;font-weight:500}.back-btn:hover{background-color:#f0f0f0}.header-title{flex-grow:1;margin-left:2rem}.header-title h1{font-size:20px;font-weight:600;margin-bottom:0}.header-title p{color:#666;font-size:14px}.step-indicator{font-size:14px;color:#000;font-weight:700}.progress-bar{width:100%;height:8px;background-color:#e0e0e0;margin-bottom:1rem;border-radius:10px;overflow:hidden}.w-60{width:60%!important}.progress-fill{height:100%;width:14.28%;background-color:#000}.service-selection{height:100%;overflow:hidden}.service-selection h2{font-size:20px;font-weight:600;margin-bottom:8px}.service-selection p{color:#666;font-size:16px;margin-bottom:1rem}.main_footer{border-top:1px solid black}.services-grid{display:grid;grid-template-columns:48% 48%;gap:15px;overflow-x:scroll;height:87%;padding-bottom:5px}.service-card{border:1px solid lightgrey;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-card:hover{background-color:#f9f9f9;box-shadow:0 4px 8px #0000001a}.service-card-selected{border:2px solid black;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:3rem}.service-info{flex-grow:1}.service-icon{width:40px;height:40px;border-radius:8px;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center;margin-right:1rem;font-size:20px;margin-top:.2rem}.service-title{font-size:18px;font-weight:600;margin-bottom:4px}.service-category{background-color:#f0f0f0;color:#000;padding:1% 4%;border-radius:12px;font-size:12px;font-weight:500;display:inline-block}.service-price{font-size:17px;font-weight:700;color:#000}.service-duration{font-size:12px;color:#666;display:flex;justify-content:center;align-items:center}.service-description{color:#666;font-size:15px;margin-bottom:.5rem;line-height:1.5}.home-visit{display:flex;align-items:center;font-size:12px;color:#666;border:1px solid lightgrey;padding:.5% 1%;border-radius:4px;background-color:#fff;width:10vw;height:3vh;white-space:nowrap;justify-content:space-around}.home-visit img{width:18px}.footer-buttons{display:flex;justify-content:space-between;align-items:center;padding-top:20px;width:60%}.back-footer-btn{color:#000;padding:12px 24px;font-size:16px}.continue-btn{background-color:#000;color:#fff;border:2px solid black;padding:.5%;border-radius:4px;font-size:15px!important;font-weight:600;cursor:pointer;width:6vw!important}.continue-btn:hover{background-color:#333}.continue-btn:disabled{background-color:#ccc;border-color:#ccc;cursor:not-allowed}.location_header{width:60%;overflow:hidden}.location_header .header h1{font-size:20px;font-weight:600;margin-bottom:.25rem}.location_header .header p{font-size:16px;color:#888;font-weight:400}.location-list{display:flex;flex-direction:column;gap:20px;height:64vh;overflow-x:scroll;padding-bottom:1%}.location-card{border:1px solid lightgrey;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-card:hover{box-shadow:0 4px 8px #0000001a}.location-card-selected{border:1px solid black;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-content{display:flex;align-items:center;justify-content:space-between}.location-info{display:flex;align-items:center;flex-grow:1}.location-icon{width:40px;height:40px;background-color:#d3d3d3;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-right:20px}.location-icon img{width:28px}.location-details{width:95%}.location-details h3{font-size:16px;font-weight:600;margin-bottom:0}.location-details p{font-size:14px;color:#aaa;line-height:1.4;margin:0}.distance{display:flex;align-items:center;color:#888;font-size:14px;margin-left:20px}.distance mat-icon{width:18px!important;height:15px!important;font-size:17px}.staff-header h1{font-size:20px;font-weight:600}.staff-subtitle{font-size:16px;color:#888;font-weight:400}.staff-card{border:1px solid lightgrey;cursor:pointer;transition:all .3s ease;padding-bottom:2rem!important}.staff-card:hover{box-shadow:0 4px 8px #0000001a}.staff-card.selected{border-color:#666}.staff-avatar{width:64px;height:64px;background-color:gray;font-size:20px;font-weight:600;color:#fff}.staff-name{font-size:16px;font-weight:600;margin-bottom:0}.staff-specialty{font-size:14px;color:gray;margin-bottom:8px}.staff-description{font-size:14px;color:gray;line-height:1.4}.rating-section{display:flex;flex-direction:column;align-items:flex-end}.star-rating{color:gold;font-size:16px;margin-bottom:4px;width:100%}.rating-number{font-size:18px;font-weight:600;color:#000}.review-count{font-size:12px;color:#888}.star-icon:before{content:\"\\2b50\";margin-right:4px}.staff_section{width:60%;overflow:hidden}.staff-list{height:64vh;overflow-x:scroll;padding-bottom:1%}.datetime-header h1{font-size:20px;font-weight:600;margin:0!important}.main_container{height:64vh}.datetime-subtitle{font-size:16px;color:#888;font-weight:400}.section-card{border:1px solid lightgrey}.section-title{font-size:17px;font-weight:600;margin-bottom:20px}.date-picker-container{border:1px solid lightgrey}.date-picker-container mat-icon{height:17px;font-size:18px}.date-input{font-size:16px;padding:2%;width:30%}.time-slot{border:1px solid lightgrey;font-size:14px;font-weight:500;padding:6%;cursor:pointer;transition:all .3s ease;text-align:center;min-width:80px}.time-slot:hover{box-shadow:0 4px 8px #0000001a}.time-slot.selected{background-color:#555;border-color:#777;color:#fff}.waitlist-section{background-color:gray;border:none;padding:20px;max-height:13vh}.waitlist-icon{color:#4ade80;font-size:18px;margin-right:8px}.waitlist-title{color:#fff;font-size:16px;font-weight:500;margin-bottom:8px}.waitlist-description{color:#aaa;font-size:14px;margin-bottom:0}.check-icon:before{content:\"\\2713\"}.contact-header h1{font-size:20px;font-weight:600}.contact-subtitle{font-size:16px;color:#888;font-weight:400}.form-section{border:1px solid lightgrey}.section-title{font-size:16px;font-weight:600;margin-bottom:24px}.form-label{font-size:14px;font-weight:500;margin-bottom:8px}.required-asterisk{color:#ff6b6b;margin-left:4px}.form-input{border:1px solid lightgrey;font-size:16px;padding:2%;transition:all .3s ease}.form-input:focus{border-color:#777}.form-input::placeholder{color:#aaa;font-size:14px}.form-textarea{border:1px solid lightgrey;font-size:16px;padding:12px 16px;resize:vertical;max-height:120px;transition:all .3s ease}.form-textarea:focus{border-color:#777}.form-textarea::placeholder{color:#aaa;font-size:14px}.optional-label{color:#888;font-size:12px;font-style:italic}.details_container{height:65vh;overflow-x:scroll;padding-bottom:1%}.policies-container{background-color:#fff;border:1px solid lightgrey;padding:2rem;border-radius:12px}.policies-title{font-size:16px;font-weight:600;color:#000;margin-bottom:1rem}.policy-item{background-color:#fff;border:1px solid lightgrey;border-radius:8px;padding:1%;cursor:pointer;transition:all .3s ease}.cancellation_policies{padding:1% .5%;font-weight:500}.policy-item:hover{background-color:#f8f9fa;border-color:#ccc}.policy-item:last-of-type{margin-bottom:32px}.policy-title{font-size:14px;font-weight:500;color:#000;margin:0}.acceptance-section{display:flex;align-items:flex-start;gap:12px;margin-top:8px}.custom-checkbox{width:20px;height:20px;background-color:#fff;border:1px solid lightgrey;border-radius:4px;margin-top:2px;cursor:pointer;position:relative;flex-shrink:0;transition:all .3s ease}.custom-checkbox:hover{border-color:#999;background-color:#f8f9fa}.custom-checkbox.checked{background-color:#007bff;border-color:#007bff}.custom-checkbox.checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700}.acceptance-text{font-size:14px;color:#000;line-height:1.5;margin:0}.terms-link{color:#007bff;text-decoration:none;font-weight:500;position:relative}.terms-link:hover{color:#0056b3;text-decoration:underline}.external-link-icon{margin-left:4px;font-size:12px;opacity:.8}.external-link-icon:after{content:\"\\2197\"}.payment-header h1{font-size:20px;font-weight:600;color:#000}.payment-subtitle{font-size:16px;color:#666;font-weight:400}.booking-summary-card{background-color:#fff;border:1px solid lightgrey;padding:2%;border-radius:12px}.summary-title{font-size:18px;font-weight:600;color:#000;margin-bottom:32px}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.summary-row:last-child{border-bottom:none;padding-bottom:0}.summary-label{font-size:16px;color:#000;font-weight:500}.summary-value{font-size:16px;color:#000;font-weight:400;text-align:right}.total-row{margin-top:16px;padding-top:16px}.total-row .summary-label,.total-row .summary-value{font-size:20px;font-weight:600}.currency-symbol{font-size:18px}.complete_booking{background:#90ee90;border:none;padding:.5%;width:12vw!important;font-size:15px!important;font-weight:500;border-radius:4px}.datepicker-popover{position:absolute;top:0;left:0;z-index:1000;background:#fff;border-radius:.5rem;box-shadow:0 6px 24px #0000001f;overflow:hidden}.booking-confirmation{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;width:60%;border-radius:10px}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:80px;height:80px;position:relative}.checkmark{width:80px;height:80px;border-radius:50%;display:block;stroke-width:3;stroke:#22c55e;stroke-miterlimit:10;animation:checkmark-fill .4s ease-in-out .4s forwards,checkmark-scale .3s ease-in-out .9s both}.checkmark-circle-path{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:3;stroke-miterlimit:10;stroke:#22c55e;fill:none;animation:checkmark-stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;stroke:#22c55e;stroke-width:3;animation:checkmark-stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes checkmark-stroke{to{stroke-dashoffset:0}}@keyframes checkmark-scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes checkmark-fill{to{box-shadow:inset 0 0 0 30px #22c55e}}.confirmation-content{width:100%;height:80%}.confirmation-title{font-size:18px;font-weight:700}.confirmation-message{font-size:1rem;margin-bottom:1rem;line-height:1.6;font-weight:500}.details-card{background:#ffffff1a;border:1px solid lightgrey;border-radius:16px;padding:1.5rem;margin-bottom:2rem;width:35vw}.details-title{font-size:1.25rem;font-weight:600;margin:0 0 1.5rem}.details-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.9rem;font-weight:500}.detail-value{font-weight:600;font-size:1rem}.action-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn{padding:.75rem 1.5rem;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s ease;border:none;min-width:140px}.btn-outline{background:transparent;border:2px solid rgba(255,255,255,.3);color:#fff}.btn-outline:hover{background:#ffffff1a;border-color:#ffffff80}.btn-primary{background:#fff;color:#1f2937}.btn-primary:hover{background:#f3f4f6;transform:translateY(-1px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i15.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
12917
12916
|
}
|
|
12918
12917
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppointmentBookingComponent, decorators: [{
|
|
12919
12918
|
type: Component,
|
|
12920
12919
|
args: [{ selector: 'simpo-appointment-booking', standalone: true, imports: [CdkDragPlaceholder, CommonModule, MatIcon, MatFormFieldModule, MatDatepickerModule, FormsModule], template: "<section class=\"main_section\">\r\n <div class=\"main_header\">\r\n <div class=\"header d-flex justify-content-between align-items-center\">\r\n <div class=\"back-btn d-flex justify-content-center align-items-center cursor-pointer gap-2 mb-3\"\r\n (click)=\"goBack()\">\r\n <mat-icon>keyboard_backspace</mat-icon><span>Back to My Bookings</span>\r\n </div>\r\n <div class=\"header-title\">\r\n <h1>Book New Appointment</h1>\r\n <p>{{businessName ?? \"N/A\" }}</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"progress-bar\">\r\n <div class=\"progress-fill\" [style.width]=\"barWidth + '%'\"></div>\r\n </div>\r\n </div>\r\n <div class=\"main_body w-100 d-flex justify-content-center\"><ng-container *ngIf=\"selectedTab === 'serviceListing'\">\r\n <ng-container *ngTemplateOutlet=\"serviceListing\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedTab === 'locationListing'\">\r\n <ng-container *ngTemplateOutlet=\"locationListing\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedTab === 'staffListing'\">\r\n <ng-container *ngTemplateOutlet=\"staffListing\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedTab === 'dateSelection'\">\r\n <ng-container *ngTemplateOutlet=\"dateSelection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedTab==='contactDetails'\">\r\n <ng-container *ngTemplateOutlet=\"contactDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedTab==='paymentTab'\">\r\n <ng-container *ngTemplateOutlet=\"paymentTab\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedTab==='statusTemplate'\">\r\n <ng-container *ngTemplateOutlet=\"statusTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"main_footer d-flex justify-content-center align-items-center\" *ngIf=\"selectedTab!=='statusTemplate'\">\r\n <div class=\"footer-buttons\">\r\n <span class=\"back-footer-btn cursor-pointer\" (click)=\"previousStep()\">Back</span>\r\n <button class=\"continue-btn\" [disabled]=\"!activeButton\" (click)=\"nextStep()\"\r\n *ngIf=\"selectedTab!='paymentTab'\">{{!loader ? 'Continue' : 'Loading...'}}</button>\r\n <button class=\"complete_booking cursor-pointer\" *ngIf=\"selectedTab==='paymentTab'\"\r\n (click)=\"checkPayment()\">Complete Booking</button>\r\n </div>\r\n </div>\r\n</section>\r\n<ng-template #serviceListing>\r\n <div class=\"w-60 service_section\">\r\n <div class=\"service-selection\">\r\n <h2>Select a Service</h2>\r\n <p>Choose the service you'd like to book</p>\r\n\r\n <div class=\"services-grid\">\r\n <ng-container *ngFor=\"let service of serviceData\">\r\n <div class=\"\" (click)=\"selectService(service)\"\r\n [ngClass]=\"{ 'service-card-selected' : service?.selected, 'service-card': !service?.selected }\">\r\n <div class=\" service-header\">\r\n <div class=\"service-icon\"><mat-icon>person_outline</mat-icon></div>\r\n <div class=\"service-info\">\r\n <div class=\"service-title\">{{service?.name ? service?.name : 'N/A'}}</div>\r\n <div class=\"service-category\">Wellness</div>\r\n </div>\r\n <div>\r\n <div class=\"service-price\">\u20B9{{service?.priceDetails?.price ?\r\n service?.priceDetails?.price : 'N/A' }}</div>\r\n <div class=\"service-duration\">{{service?.duration ? service?.duration : 'N/A'}} min\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"service-description\">\r\n {{service?.description ? service?.description : 'N/A'}}\r\n </div>\r\n <div class=\"home-visit\" *ngIf=\"service?.homeAppointmentAvailable\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/982126c1758628863129furniture_16406103.png\">Home\r\n Visit Available</div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- <div class=\"service-card\">\r\n <div class=\"service-header\">\r\n <div class=\"service-icon\">\uD83D\uDC64</div>\r\n <div class=\"service-info\">\r\n <div class=\"service-title\">General Consultation</div>\r\n <div class=\"service-category\">Medical</div>\r\n </div>\r\n <div>\r\n <div class=\"service-price\">\u20B9800</div>\r\n <div class=\"service-duration\">30 min</div>\r\n </div>\r\n </div>\r\n <div class=\"service-description\">\r\n Comprehensive health consultation\r\n </div>\r\n </div>\r\n\r\n <div class=\"service-card\">\r\n <div class=\"service-header\">\r\n <div class=\"service-icon\">\uD83E\uDDE0</div>\r\n <div class=\"service-info\">\r\n <div class=\"service-title\">Mental Health Counseling</div>\r\n <div class=\"service-category\">Mental Health</div>\r\n </div>\r\n <div>\r\n <div class=\"service-price\">\u20B91500</div>\r\n <div class=\"service-duration\">45 min</div>\r\n </div>\r\n </div>\r\n <div class=\"service-description\">\r\n Professional psychological support\r\n </div>\r\n <div class=\"home-visit\">Home Visit Available</div>\r\n </div>\r\n\r\n <div class=\"service-card\">\r\n <div class=\"service-header\">\r\n <div class=\"service-icon\">\u2702</div>\r\n <div class=\"service-info\">\r\n <div class=\"service-title\">Hair Cut & Styling</div>\r\n <div class=\"service-category\">Beauty</div>\r\n </div>\r\n <div>\r\n <div class=\"service-price\">\u20B91200</div>\r\n <div class=\"service-duration\">45 min</div>\r\n </div>\r\n </div>\r\n <div class=\"service-description\">\r\n Professional hair cutting and styling\r\n </div>\r\n <div class=\"home-visit\">Home Visit Available</div>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #locationListing>\r\n <div class=\"location_header\">\r\n <div class=\"header flex-column align-items-start\">\r\n <h1>Choose Location</h1>\r\n <p>Select where you'd like to receive the service</p>\r\n </div>\r\n\r\n <div class=\"location-list\">\r\n <ng-container *ngFor=\"let location of locationData\">\r\n <div (click)=\"selectLocation(location)\"\r\n [ngClass]=\"{ 'location-card-selected' : location?.selected, 'location-card': !location?.selected }\">\r\n <div class=\"location-content\">\r\n <div class=\"location-info\">\r\n <div class=\"location-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/427226c1758629157758store_3171510.png\">\r\n </div>\r\n <div class=\"location-details\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <h3>{{location?.storeName ? location?.storeName : 'N/A'}}</h3>\r\n <div class=\"distance\"><mat-icon>location_on</mat-icon> 2.3 km</div>\r\n </div>\r\n <p>{{location?.addressDetails?.addressLine}}, {{location?.addressDetails?.city}},\r\n {{location?.addressDetails?.state}} {{location?.pincode}}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- <div class=\"location-card\">\r\n <div class=\"location-content\">\r\n <div class=\"location-info\">\r\n <div class=\"location-icon branch-icon\"></div>\r\n <div class=\"location-details\">\r\n <h3>Branch Clinic</h3>\r\n <p>456 Care Avenue, Health Zone, Mumbai 400015</p>\r\n </div>\r\n </div>\r\n <div class=\"distance\">5.8 km</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"location-card\">\r\n <div class=\"location-content\">\r\n <div class=\"location-info\">\r\n <div class=\"location-icon home-icon\"></div>\r\n <div class=\"location-details\">\r\n <h3>Home Visit</h3>\r\n <p>Your Location</p>\r\n </div>\r\n </div>\r\n <div class=\"distance\">0 km</div>\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #staffListing>\r\n <div class=\"w-60 overflow-hidden\">\r\n <div class=\"d-flex w-100 h-100\">\r\n <div class=\"w-100\">\r\n <!-- Header Section -->\r\n <div class=\"staff-header mb-3\">\r\n <h1 class=\"mb-1\">Select Staff Member</h1>\r\n <p class=\"staff-subtitle mb-0\">Choose your preferred professional</p>\r\n </div>\r\n\r\n <!-- Staff Cards -->\r\n <div class=\"d-flex flex-column gap-4 staff-list\">\r\n <ng-container *ngFor=\"let staff of staffData\">\r\n <div class=\" staff-card card rounded-3 p-4\" (click)=\"selectStaff(staff)\">\r\n <div class=\"d-flex align-items-start justify-content-between\">\r\n <div class=\"d-flex align-items-start flex-grow-1\">\r\n <div\r\n class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\r\n {{staff?.staffName.slice(0,3).toUpperCase()}}\r\n </div>\r\n <div class=\"staff-details flex-grow-1\">\r\n <h3 class=\"staff-name\">{{staff?.staffName ? staff?.staffName : 'N/A'}}</h3>\r\n <p class=\"staff-specialty\">General Medicine</p>\r\n <p class=\"staff-description mb-0\">Experienced physician with 10+ years in\r\n general\r\n medicine and wellness care.</p>\r\n </div>\r\n </div>\r\n <div class=\"rating-section\">\r\n <div class=\"star-rating d-flex align-items-center\">\r\n <span class=\"star-icon\"></span>\r\n <span class=\"rating-number\">4.9</span>\r\n </div>\r\n <div class=\"review-count\">156 reviews</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #dateSelection>\r\n <div class=\"w-60\">\r\n <div class=\"row justify-content-center h-100\">\r\n <div class=\"col-12 h-100\">\r\n <div class=\"datetime-header mb-2\">\r\n <h1 class=\"mb-3\">Select Date & Time</h1>\r\n <p class=\"datetime-subtitle mb-0\">Choose when you'd like your appointment</p>\r\n </div>\r\n\r\n <!-- Main Content -->\r\n <div class=\"d-flex gap-4 main_container\">\r\n <!-- Left Column - Date Selection -->\r\n <div class=\"w-50\">\r\n <div class=\"section-card card rounded-3 p-4 h-100\">\r\n <h3 class=\"section-title\">Select Date</h3>\r\n\r\n <div class=\"date-picker-container d-flex align-items-center\"\r\n (click)=\"$event.stopPropagation()\">\r\n <input type=\"text\" class=\"form-control date-input border-0 rounded-2\"\r\n placeholder=\"dd-mm-yyyy\" [value]=\"selectedDateStr\" readonly\r\n (click)=\"toggleCalendar($event)\">\r\n\r\n <mat-icon class=\"ms-2\" (click)=\"toggleCalendar($event)\">calendar_today</mat-icon>\r\n </div>\r\n <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"datepicker-popover\" *ngIf=\"showCalendar\">\r\n <mat-calendar [(selected)]=\"selectedDate\" (selectedChange)=\"onDateSelected($event)\">\r\n </mat-calendar>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Right Column - Time Selection -->\r\n <div class=\"w-50\">\r\n <div class=\"section-card card h-100 rounded-3 p-4\">\r\n <h3 class=\"section-title\">Available Times</h3>\r\n\r\n <!-- Time Slots Grid -->\r\n <div class=\"row g-2 mb-4 overflow-scroll\">\r\n <div class=\"col-4\" *ngFor=\"let time of locationTiming\">\r\n <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\r\n (click)=\"selectTimeSlot(time)\">{{time ?\r\n time?.value.slice(0,5) : 'N/A'}}</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Waitlist Section -->\r\n <div class=\"waitlist-section rounded-3\">\r\n <div class=\"d-flex align-items-start\">\r\n <div class=\"d-flex h-100 justify-content-between flex-column\"><span\r\n class=\"waitlist-icon check-icon\"></span>\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\">\r\n </div>\r\n <div>\r\n <div class=\"waitlist-title\">No slots available?</div>\r\n <div class=\"waitlist-description\">\r\n Add me to the waitlist for earlier\r\n availability\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n<ng-template #contactDetails>\r\n <div class=\"w-60\">\r\n <div class=\"d-flex\">\r\n <div class=\"h-100 w-100\">\r\n <!-- Header Section -->\r\n <div class=\"contact-header mb-2\">\r\n <h1 class=\"mb-0\">Contact Details</h1>\r\n <p class=\"contact-subtitle mb-0\">Provide your contact information</p>\r\n </div>\r\n\r\n <!-- Form Sections -->\r\n <div class=\"d-flex gap-3 details_container flex-column w-100\">\r\n <!-- Left Column - Personal Information -->\r\n <div class=\"d-flex gap-4\">\r\n <div class=\"w-50\">\r\n <div class=\"form-section card rounded-3 p-4 h-100\">\r\n <h3 class=\"section-title\">Personal Information</h3>\r\n\r\n <!-- Full Name -->\r\n <div class=\"mb-4\">\r\n <label class=\"form-label d-flex align-items-center\">\r\n Full Name\r\n <span class=\"required-asterisk\">*</span>\r\n </label>\r\n <input type=\"text\" class=\"form-control form-input rounded-2\"\r\n [(ngModel)]=\"appointmentPayload.customerDetail.name\"\r\n (ngModelChange)=\"checkRequiredValues()\">\r\n </div>\r\n\r\n <!-- Email Address -->\r\n <div class=\"mb-4\">\r\n <label class=\"form-label d-flex align-items-center\">\r\n Email Address\r\n <span class=\"required-asterisk\">*</span>\r\n </label>\r\n <input type=\"email\" class=\"form-control form-input rounded-2\"\r\n [(ngModel)]=\"appointmentPayload.customerDetail.email\"\r\n (ngModelChange)=\"checkRequiredValues()\">\r\n </div>\r\n\r\n <!-- Phone Number -->\r\n <div class=\"mb-0\">\r\n <label class=\"form-label d-flex align-items-center\">\r\n Phone Number\r\n <span class=\"required-asterisk\">*</span>\r\n </label>\r\n <input type=\"tel\" class=\"form-control form-input rounded-2\"\r\n [(ngModel)]=\"appointmentPayload.customerDetail.phoneNumber\"\r\n (ngModelChange)=\"checkRequiredValues()\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Right Column - Home Visit Details -->\r\n <div class=\"w-50\">\r\n <div class=\"form-section card rounded-3 p-4 h-100\">\r\n <h3 class=\"section-title\">Home Visit Details</h3>\r\n\r\n <!-- Home Address -->\r\n <div class=\"mb-4\">\r\n <label class=\"form-label d-flex align-items-center\">\r\n Home Address\r\n </label>\r\n <textarea class=\"form-control form-textarea rounded-2\"\r\n placeholder=\"Enter your complete address\"></textarea>\r\n </div>\r\n\r\n <!-- Special Instructions -->\r\n <div class=\"mb-0\">\r\n <label class=\"form-label d-flex align-items-center\">\r\n Special Instructions\r\n </label>\r\n <textarea class=\"form-control form-textarea rounded-2\"\r\n placeholder=\"Any special instructions for the professional (optional)\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"policies-container\">\r\n <!-- Header -->\r\n <h2 class=\"policies-title\">Policies & Terms</h2>\r\n\r\n <!-- Policy Items -->\r\n <div class=\"policy-items-container d-flex flex-column gap-3\">\r\n <!-- Cancellation Policy -->\r\n <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n (click)=\"showCancellationPolicy = !showCancellationPolicy\">\r\n <h3 class=\"policy-title\">Cancellation Policy</h3>\r\n <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n *ngIf=\"!showCancellationPolicy\">keyboard_arrow_right</mat-icon>\r\n <mat-icon *ngIf=\"showCancellationPolicy\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n *ngIf=\"showCancellationPolicy\">\r\n <span>• Free cancellation up to 24 hours before appointment</span>\r\n <span>• 50% charge for cancellations within 24 hours</span>\r\n <span>• No refund for no-shows</span>\r\n <span>• Emergency cancellations will be reviewed case by case</span>\r\n </div>\r\n\r\n <!-- Rescheduling Policy -->\r\n <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n (click)=\"showReducingPolicy = !showReducingPolicy\">\r\n <h3 class=\"policy-title\">Rescheduling Policy</h3>\r\n <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n *ngIf=\"!showReducingPolicy\">keyboard_arrow_right</mat-icon>\r\n <mat-icon *ngIf=\"showReducingPolicy\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n *ngIf=\"showReducingPolicy\">\r\n <span>• Free cancellation up to 24 hours before appointment</span>\r\n <span>• 50% charge for cancellations within 24 hours</span>\r\n <span>• No refund for no-shows</span>\r\n <span>• Emergency cancellations will be reviewed case by case</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Acceptance Section -->\r\n <div class=\"acceptance-section\">\r\n <div class=\"custom-checkbox\"></div>\r\n <p class=\"acceptance-text\">\r\n I understand and accept the cancellation & rescheduling policies and\r\n <a href=\"#\" class=\"terms-link\">Terms & Conditions<span\r\n class=\"external-link-icon\"></span></a>\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #paymentTab>\r\n <div class=\"w-60\">\r\n <div class=\"w-100 h-100\">\r\n <div class=\"w-100 d-flex justify-content-center align-items-center flex-column\">\r\n <!-- Header Section -->\r\n <div class=\"payment-header mb-3 w-100\">\r\n <h1 class=\"mb-0\">Payment & Confirmation</h1>\r\n <p class=\"payment-subtitle mb-0\">Review your booking and complete payment</p>\r\n </div>\r\n\r\n <!-- Booking Summary Card -->\r\n <div class=\"booking-summary-card w-50\">\r\n <h2 class=\"summary-title\">Booking Summary</h2>\r\n\r\n <!-- Service -->\r\n <div class=\"summary-row\">\r\n <div class=\"summary-label\">Service</div>\r\n <div class=\"summary-value\">{{selectedService?.name ? selectedService?.name : 'N/A'}}</div>\r\n </div>\r\n\r\n <!-- Professional -->\r\n <div class=\"summary-row\">\r\n <div class=\"summary-label\">Professional</div>\r\n <div class=\"summary-value\">{{selectedStaff?.staffName ? selectedStaff?.staffName : 'N/A'}}</div>\r\n </div>\r\n\r\n <!-- Location -->\r\n <div class=\"summary-row\">\r\n <div class=\"summary-label\">Location</div>\r\n <div class=\"summary-value\">{{selectedLocation?.storeName ? selectedLocation?.storeName : 'N/A'}}\r\n </div>\r\n </div>\r\n\r\n <!-- Date & Time -->\r\n <div class=\"summary-row\">\r\n <div class=\"summary-label\">Date & Time</div>\r\n <div class=\"summary-value\">{{selectedDate ? (selectedDate | date : 'shortData') :\r\n (selectedDateStr ? (selectedDateStr) : 'N/A')}} at\r\n 15:30</div>\r\n </div>\r\n\r\n <!-- Duration -->\r\n <div class=\"summary-row\">\r\n <div class=\"summary-label\">Duration</div>\r\n <div class=\"summary-value\">{{selectedService?.duration ? selectedService?.duration : 'N/A'}}\r\n minutes</div>\r\n </div>\r\n <div class=\"summary-row\">\r\n <div class=\"summary-label\">Tax Percent</div>\r\n <div class=\"summary-value\">{{selectedService?.priceDetails?.taxPercent ?\r\n selectedService?.priceDetails?.taxPercent : 'N/A'}}%</div>\r\n </div>\r\n <!-- Total -->\r\n <div class=\"summary-row total-row\">\r\n <div class=\"summary-label\">Total</div>\r\n <div class=\"summary-value\">\r\n <span class=\"currency-symbol\">\u20B9</span>{{selectedService?.priceDetails?.price ?\r\n selectedService?.priceDetails?.price : 'N/A'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #statusTemplate>\r\n <div class=\"booking-confirmation\">\r\n <!-- Success Icon -->\r\n <div class=\"success-icon\">\r\n <div class=\"checkmark-circle\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\r\n class=\"w-100 h-100\" *ngIf=\"apiStatus\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\r\n class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content -->\r\n <div class=\"confirmation-content\">\r\n <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\r\n <p class=\"confirmation-message\">\r\n {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book you appointment. Please\r\n try again later'}}\r\n </p>\r\n\r\n <!-- Details Card -->\r\n <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\r\n <div class=\"details-card\">\r\n <h3 class=\"details-title\">Appointment Details</h3>\r\n\r\n <div class=\"details-row\">\r\n <span class=\"detail-label\">Service</span>\r\n <span class=\"detail-value\">{{appointmentPayload.serviceDetail?.name ?\r\n appointmentPayload.serviceDetail?.name : 'N/A'}}</span>\r\n </div>\r\n\r\n <div class=\"details-row\">\r\n <span class=\"detail-label\">Professional</span>\r\n <span class=\"detail-value\">{{appointmentPayload.staffDetail?.name ?\r\n appointmentPayload.staffDetail?.name : 'N/A'}}</span>\r\n </div>\r\n <div class=\"details-row\">\r\n <span class=\"detail-label\">Date & Time</span>\r\n <span class=\"detail-value\">{{appointmentPayload.bookingDate ?\r\n appointmentPayload.bookingDate.slice(0,8) :\r\n 'N/A'}} at\r\n {{appointmentPayload.startTime ? appointmentPayload.startTime : 'N/A'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- Action Buttons -->\r\n <!-- <div class=\"action-buttons\">\r\n <button class=\"btn btn-outline\">View My Bookings</button>\r\n <button class=\"btn btn-primary\">Back to Admin</button>\r\n </div> -->\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#fff;color:#000;line-height:1.6}.main_header{padding:1%}.main_body{height:73vh}.header{display:flex;align-items:center;justify-content:space-between}.back-btn mat-icon{height:16px!important;width:20px!important;font-size:21px!important}.back-btn span{color:#000;font-size:15px;font-weight:500}.back-btn:hover{background-color:#f0f0f0}.header-title{flex-grow:1;margin-left:2rem}.header-title h1{font-size:20px;font-weight:600;margin-bottom:0}.header-title p{color:#666;font-size:14px}.step-indicator{font-size:14px;color:#000;font-weight:700}.progress-bar{width:100%;height:8px;background-color:#e0e0e0;margin-bottom:1rem;border-radius:10px;overflow:hidden}.w-60{width:60%!important}.progress-fill{height:100%;width:14.28%;background-color:#000}.service-selection{height:100%;overflow:hidden}.service-selection h2{font-size:20px;font-weight:600;margin-bottom:8px}.service-selection p{color:#666;font-size:16px;margin-bottom:1rem}.main_footer{border-top:1px solid black}.services-grid{display:grid;grid-template-columns:48% 48%;gap:15px;overflow-x:scroll;height:87%;padding-bottom:5px}.service-card{border:1px solid lightgrey;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-card:hover{background-color:#f9f9f9;box-shadow:0 4px 8px #0000001a}.service-card-selected{border:2px solid black;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:3rem}.service-info{flex-grow:1}.service-icon{width:40px;height:40px;border-radius:8px;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center;margin-right:1rem;font-size:20px;margin-top:.2rem}.service-title{font-size:18px;font-weight:600;margin-bottom:4px}.service-category{background-color:#f0f0f0;color:#000;padding:1% 4%;border-radius:12px;font-size:12px;font-weight:500;display:inline-block}.service-price{font-size:17px;font-weight:700;color:#000}.service-duration{font-size:12px;color:#666;display:flex;justify-content:center;align-items:center}.service-description{color:#666;font-size:15px;margin-bottom:.5rem;line-height:1.5}.home-visit{display:flex;align-items:center;font-size:12px;color:#666;border:1px solid lightgrey;padding:.5% 1%;border-radius:4px;background-color:#fff;width:10vw;height:3vh;white-space:nowrap;justify-content:space-around}.home-visit img{width:18px}.footer-buttons{display:flex;justify-content:space-between;align-items:center;padding-top:20px;width:60%}.back-footer-btn{color:#000;padding:12px 24px;font-size:16px}.continue-btn{background-color:#000;color:#fff;border:2px solid black;padding:.5%;border-radius:4px;font-size:15px!important;font-weight:600;cursor:pointer;width:6vw!important}.continue-btn:hover{background-color:#333}.continue-btn:disabled{background-color:#ccc;border-color:#ccc;cursor:not-allowed}.location_header{width:60%;overflow:hidden}.location_header .header h1{font-size:20px;font-weight:600;margin-bottom:.25rem}.location_header .header p{font-size:16px;color:#888;font-weight:400}.location-list{display:flex;flex-direction:column;gap:20px;height:64vh;overflow-x:scroll;padding-bottom:1%}.location-card{border:1px solid lightgrey;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-card:hover{box-shadow:0 4px 8px #0000001a}.location-card-selected{border:1px solid black;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-content{display:flex;align-items:center;justify-content:space-between}.location-info{display:flex;align-items:center;flex-grow:1}.location-icon{width:40px;height:40px;background-color:#d3d3d3;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-right:20px}.location-icon img{width:28px}.location-details{width:95%}.location-details h3{font-size:16px;font-weight:600;margin-bottom:0}.location-details p{font-size:14px;color:#aaa;line-height:1.4;margin:0}.distance{display:flex;align-items:center;color:#888;font-size:14px;margin-left:20px}.distance mat-icon{width:18px!important;height:15px!important;font-size:17px}.staff-header h1{font-size:20px;font-weight:600}.staff-subtitle{font-size:16px;color:#888;font-weight:400}.staff-card{border:1px solid lightgrey;cursor:pointer;transition:all .3s ease;padding-bottom:2rem!important}.staff-card:hover{box-shadow:0 4px 8px #0000001a}.staff-card.selected{border-color:#666}.staff-avatar{width:64px;height:64px;background-color:gray;font-size:20px;font-weight:600;color:#fff}.staff-name{font-size:16px;font-weight:600;margin-bottom:0}.staff-specialty{font-size:14px;color:gray;margin-bottom:8px}.staff-description{font-size:14px;color:gray;line-height:1.4}.rating-section{display:flex;flex-direction:column;align-items:flex-end}.star-rating{color:gold;font-size:16px;margin-bottom:4px;width:100%}.rating-number{font-size:18px;font-weight:600;color:#000}.review-count{font-size:12px;color:#888}.star-icon:before{content:\"\\2b50\";margin-right:4px}.staff_section{width:60%;overflow:hidden}.staff-list{height:64vh;overflow-x:scroll;padding-bottom:1%}.datetime-header h1{font-size:20px;font-weight:600;margin:0!important}.main_container{height:64vh}.datetime-subtitle{font-size:16px;color:#888;font-weight:400}.section-card{border:1px solid lightgrey}.section-title{font-size:17px;font-weight:600;margin-bottom:20px}.date-picker-container{border:1px solid lightgrey}.date-picker-container mat-icon{height:17px;font-size:18px}.date-input{font-size:16px;padding:2%;width:30%}.time-slot{border:1px solid lightgrey;font-size:14px;font-weight:500;padding:6%;cursor:pointer;transition:all .3s ease;text-align:center;min-width:80px}.time-slot:hover{box-shadow:0 4px 8px #0000001a}.time-slot.selected{background-color:#555;border-color:#777;color:#fff}.waitlist-section{background-color:gray;border:none;padding:20px;max-height:13vh}.waitlist-icon{color:#4ade80;font-size:18px;margin-right:8px}.waitlist-title{color:#fff;font-size:16px;font-weight:500;margin-bottom:8px}.waitlist-description{color:#aaa;font-size:14px;margin-bottom:0}.check-icon:before{content:\"\\2713\"}.contact-header h1{font-size:20px;font-weight:600}.contact-subtitle{font-size:16px;color:#888;font-weight:400}.form-section{border:1px solid lightgrey}.section-title{font-size:16px;font-weight:600;margin-bottom:24px}.form-label{font-size:14px;font-weight:500;margin-bottom:8px}.required-asterisk{color:#ff6b6b;margin-left:4px}.form-input{border:1px solid lightgrey;font-size:16px;padding:2%;transition:all .3s ease}.form-input:focus{border-color:#777}.form-input::placeholder{color:#aaa;font-size:14px}.form-textarea{border:1px solid lightgrey;font-size:16px;padding:12px 16px;resize:vertical;max-height:120px;transition:all .3s ease}.form-textarea:focus{border-color:#777}.form-textarea::placeholder{color:#aaa;font-size:14px}.optional-label{color:#888;font-size:12px;font-style:italic}.details_container{height:65vh;overflow-x:scroll;padding-bottom:1%}.policies-container{background-color:#fff;border:1px solid lightgrey;padding:2rem;border-radius:12px}.policies-title{font-size:16px;font-weight:600;color:#000;margin-bottom:1rem}.policy-item{background-color:#fff;border:1px solid lightgrey;border-radius:8px;padding:1%;cursor:pointer;transition:all .3s ease}.cancellation_policies{padding:1% .5%;font-weight:500}.policy-item:hover{background-color:#f8f9fa;border-color:#ccc}.policy-item:last-of-type{margin-bottom:32px}.policy-title{font-size:14px;font-weight:500;color:#000;margin:0}.acceptance-section{display:flex;align-items:flex-start;gap:12px;margin-top:8px}.custom-checkbox{width:20px;height:20px;background-color:#fff;border:1px solid lightgrey;border-radius:4px;margin-top:2px;cursor:pointer;position:relative;flex-shrink:0;transition:all .3s ease}.custom-checkbox:hover{border-color:#999;background-color:#f8f9fa}.custom-checkbox.checked{background-color:#007bff;border-color:#007bff}.custom-checkbox.checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700}.acceptance-text{font-size:14px;color:#000;line-height:1.5;margin:0}.terms-link{color:#007bff;text-decoration:none;font-weight:500;position:relative}.terms-link:hover{color:#0056b3;text-decoration:underline}.external-link-icon{margin-left:4px;font-size:12px;opacity:.8}.external-link-icon:after{content:\"\\2197\"}.payment-header h1{font-size:20px;font-weight:600;color:#000}.payment-subtitle{font-size:16px;color:#666;font-weight:400}.booking-summary-card{background-color:#fff;border:1px solid lightgrey;padding:2%;border-radius:12px}.summary-title{font-size:18px;font-weight:600;color:#000;margin-bottom:32px}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.summary-row:last-child{border-bottom:none;padding-bottom:0}.summary-label{font-size:16px;color:#000;font-weight:500}.summary-value{font-size:16px;color:#000;font-weight:400;text-align:right}.total-row{margin-top:16px;padding-top:16px}.total-row .summary-label,.total-row .summary-value{font-size:20px;font-weight:600}.currency-symbol{font-size:18px}.complete_booking{background:#90ee90;border:none;padding:.5%;width:12vw!important;font-size:15px!important;font-weight:500;border-radius:4px}.datepicker-popover{position:absolute;top:0;left:0;z-index:1000;background:#fff;border-radius:.5rem;box-shadow:0 6px 24px #0000001f;overflow:hidden}.booking-confirmation{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;width:60%;border-radius:10px}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:80px;height:80px;position:relative}.checkmark{width:80px;height:80px;border-radius:50%;display:block;stroke-width:3;stroke:#22c55e;stroke-miterlimit:10;animation:checkmark-fill .4s ease-in-out .4s forwards,checkmark-scale .3s ease-in-out .9s both}.checkmark-circle-path{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:3;stroke-miterlimit:10;stroke:#22c55e;fill:none;animation:checkmark-stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;stroke:#22c55e;stroke-width:3;animation:checkmark-stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes checkmark-stroke{to{stroke-dashoffset:0}}@keyframes checkmark-scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes checkmark-fill{to{box-shadow:inset 0 0 0 30px #22c55e}}.confirmation-content{width:100%;height:80%}.confirmation-title{font-size:18px;font-weight:700}.confirmation-message{font-size:1rem;margin-bottom:1rem;line-height:1.6;font-weight:500}.details-card{background:#ffffff1a;border:1px solid lightgrey;border-radius:16px;padding:1.5rem;margin-bottom:2rem;width:35vw}.details-title{font-size:1.25rem;font-weight:600;margin:0 0 1.5rem}.details-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.9rem;font-weight:500}.detail-value{font-weight:600;font-size:1rem}.action-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn{padding:.75rem 1.5rem;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s ease;border:none;min-width:140px}.btn-outline{background:transparent;border:2px solid rgba(255,255,255,.3);color:#fff}.btn-outline:hover{background:#ffffff1a;border-color:#ffffff80}.btn-primary{background:#fff;color:#1f2937}.btn-primary:hover{background:#f3f4f6;transform:translateY(-1px)}\n"] }]
|
|
12921
|
-
}], ctorParameters: () => [{ type:
|
|
12920
|
+
}], ctorParameters: () => [{ type: RestService }, { type: EventsService }, { type: i3.MatDialog }, { type: i2$1.MatSnackBar }], propDecorators: { closeOnOutsideClick: [{
|
|
12922
12921
|
type: HostListener,
|
|
12923
12922
|
args: ['document:click']
|
|
12924
12923
|
}] } });
|