simpo-component-library 3.6.213 → 3.6.215
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/ecommerce/sections/book-appointment/book-appointment.component.mjs +3 -3
- package/esm2022/lib/elements/text-editor/text-editor.component.mjs +2 -4
- package/fesm2022/simpo-component-library.mjs +3 -5
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/directive/background-directive.d.ts +1 -1
- package/lib/directive/button-directive.directive.d.ts +1 -1
- package/lib/directive/color.directive.d.ts +1 -1
- package/lib/ecommerce/sections/new-collection/new-collection.component.d.ts +1 -1
- package/lib/ecommerce/sections/product-desc/product-desc.component.d.ts +1 -1
- package/lib/ecommerce/sections/product-list/product-list.component.d.ts +1 -1
- package/lib/ecommerce/sections/store-list/store-list.component.d.ts +1 -1
- package/lib/ecommerce/sections/store-page/store-page.component.d.ts +1 -1
- package/lib/elements/link-editor/link-editor.component.d.ts +1 -1
- package/lib/sections/banner-carousel/banner-carousel.component.d.ts +1 -1
- package/lib/sections/banner-grid-section/banner-grid-section.component.d.ts +1 -1
- package/lib/sections/contact-us/contact-us.component.d.ts +1 -1
- package/lib/sections/header-section/header-section.component.d.ts +1 -1
- package/lib/sections/moving-text/moving-text.component.d.ts +1 -1
- package/lib/sections/pricing-section/pricing-section.component.d.ts +1 -1
- package/package.json +1 -1
- package/simpo-component-library-3.6.215.tgz +0 -0
- package/simpo-component-library-3.6.213.tgz +0 -0
|
@@ -1602,9 +1602,7 @@ class TextEditorComponent {
|
|
|
1602
1602
|
return doc.body.innerHTML;
|
|
1603
1603
|
}
|
|
1604
1604
|
getText() {
|
|
1605
|
-
const textContent = this.value
|
|
1606
|
-
.replace(/<\/?[^>]+(>|$)/g, "")
|
|
1607
|
-
.replace(/\s+/g, ' ').trim();
|
|
1605
|
+
const textContent = this.value?.replace(/<\/?[^>]+(>|$)/g, "")?.replace(/\s+/g, ' ').trim() ?? "";
|
|
1608
1606
|
if (!textContent) {
|
|
1609
1607
|
return "";
|
|
1610
1608
|
}
|
|
@@ -20081,7 +20079,7 @@ class BookAppointmentComponent extends BaseSection {
|
|
|
20081
20079
|
return window.innerWidth <= 475;
|
|
20082
20080
|
}
|
|
20083
20081
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookAppointmentComponent, deps: [{ token: StorageServiceService }, { token: RestService }, { token: i2$2.Router }, { token: i4$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
20084
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BookAppointmentComponent, isStandalone: true, selector: "simpo-book-appointment", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<main class=\"main-content\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"container\">\r\n <div class=\"content-grid\">\r\n <!-- Left Form Section -->\r\n <div class=\"form-section\">\r\n <!-- Service Description -->\r\n <div class=\"card service-description\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n <h2 class=\"section-title\">Try at Home Service</h2>\r\n <p>Our Try at Home consultant will visit your location to show you the designs at your convenience.</p>\r\n </div>\r\n\r\n <!-- Pincode Section -->\r\n <!-- <div class=\"card\">\r\n <h3 class=\"section-title\">\r\n <svg class=\"icon\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\" />\r\n </svg>\r\n Service Location\r\n </h3>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Enter your pincode</label>\r\n <input type=\"text\" class=\"form-input\" placeholder=\"Enter 6-digit pincode\"\r\n maxlength=\"6\" />\r\n <div class=\"pincode-success\" *ngIf=\"pincode.length === 6\">\r\n \u2713 Service available in your area\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n <!-- Date Selection -->\r\n <div class=\"card\">\r\n <h3 class=\"section-title\">Select a Date</h3>\r\n <div class=\"date-grid\">\r\n <div class=\"single-date\" *ngFor=\"let day of weekDays\" (click)=\"checkAvailability(day)\"\r\n [style.border]=\"day.dateWithMonth === customerDetails.date ? '2px solid ' + styles?.background?.accentColor : 'none'\">\r\n <div class=\"time\">\r\n <div class=\"day\">{{day.day.substring(0,3)}}</div>\r\n <div class=\"date\">{{day.date}}</div>\r\n </div>\r\n <div class=\"design\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">{{trialCartItem?.length ?? 0}}\r\n Designs</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Time Selection -->\r\n <div class=\"card\">\r\n <div class=\"section\">\r\n <h2 class=\"section-title\">Select a Time</h2>\r\n <div class=\"time-grid\">\r\n <div class=\"time-slot\" *ngFor=\"let time of timeSlots\" (click)=\"selectTime(time)\"\r\n [ngClass]=\"{'selected': time === customerDetails.time}\">\r\n <div class=\"more-slot-badge\">More Slot Left</div>\r\n <div class=\"time-text\">{{time}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Customer Details -->\r\n <div class=\"card\">\r\n <h3 class=\"section-title\">Contact Details</h3>\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Full Name *</label>\r\n <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverName\"\r\n placeholder=\"Enter your full name\" />\r\n </div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Phone Number *</label>\r\n <input type=\"tel\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverPhone\"\r\n placeholder=\"Enter your phone number\" />\r\n </div>\r\n </div>\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Email *</label>\r\n <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverEmail\"\r\n placeholder=\"Enter your full name\" />\r\n </div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">City *</label>\r\n <input type=\"city\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.cityName\"\r\n placeholder=\"Enter your city\" />\r\n </div>\r\n </div>\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">State *</label>\r\n <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.stateName\"\r\n placeholder=\"Enter your full name\" />\r\n </div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Pincode *</label>\r\n <input type=\"tel\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.zipCode\"\r\n placeholder=\"Enter your phone number\" />\r\n </div>\r\n </div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Complete Address *</label>\r\n <textarea class=\"form-input form-textarea\" [(ngModel)]=\"customerDetails.addressDetails.addressLine1\"\r\n placeholder=\"Enter your complete address\"></textarea>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <!-- Sidebar -->\r\n <div class=\"sidebar\">\r\n <div class=\"card\">\r\n <h3 class=\"designs-header\">Your Shortlisted Designs</h3>\r\n <!-- <div class=\"designs-count\">{{ getSelectedDesigns().length }}/4 SELECTED</div> -->\r\n\r\n <div class=\"design-parent\">\r\n <div class=\"design-item\" *ngFor=\"let item of trialCartItem\">\r\n <div class=\"design-content\">\r\n <img class=\"design-image\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n alt=\"\">\r\n <!-- <div class=\"\">Design Image</div> -->\r\n\r\n <div class=\"design-info\">\r\n <h3 class=\"item-title\">{{item.itemName}}</h3>\r\n <div class=\"item-price\">\r\n <span class=\"current-price\">\u20B9{{item.discountedPrice | number: '1.0-2'}}</span>\r\n <span class=\"original-price\" *ngIf=\"item.sellingPrice > item.discountedPrice\">\u20B9{{item.sellingPrice |\r\n number:\r\n '1.0-2'}}</span>\r\n </div>\r\n <div class=\"item-options\" *ngIf=\"item.itemVariant\">\r\n <span *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">{{ varient }}: {{\r\n item.itemVariant.properties[varient] | uppercase }}</span>\r\n </div>\r\n </div>\r\n <!-- <button class=\"design-select\" [class.selected]=\"design.selected\" (click)=\"toggleDesign(design.id)\">\r\n {{ design.selected ? 'Selected' : 'Select' }}\r\n </button> -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button class=\"add-design\" (click)=\"addMoreDesign()\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\r\n </svg>\r\n Add More Designs\r\n </button>\r\n\r\n <div class=\"summary\">\r\n <!-- <div class=\"summary-row\">\r\n <span class=\"summary-label\">Selected Designs:</span>\r\n <span class=\"summary-value\">{{ getSelectedDesigns().length }}</span>\r\n </div> -->\r\n <div class=\"summary-row\">\r\n <span class=\"summary-label\">Service:</span>\r\n <span class=\"summary-value free-service\">FREE</span>\r\n </div>\r\n </div>\r\n\r\n <button class=\"book-button\" (click)=\"bookAppointment()\" simpoButtonDirective *ngIf=\"!loader\"\r\n [disabled]=\"isValid\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"styles?.background\">\r\n {{data?.action?.buttons?.[1]?.content?.label ?? 'Book Try at Home Appointment'}}\r\n </button>\r\n <button class=\"book-button loader-btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" *ngIf=\"loader\"\r\n [backgroundInfo]=\"styles?.background\"><mat-spinner></mat-spinner> Booking</button>\r\n <p class=\"disclaimer\">Our consultant will contact you to confirm the appointment</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isEcommerce]=\"true\"></simpo-hover-elements>\r\n </div>\r\n</main>\r\n", styles: ["*{font-family:var(--primary-font-family)!important}.main-content{padding:32px 0;position:relative}.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:32px}.form-section{display:flex;flex-direction:column;gap:24px}.card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a;border:1px solid #e2e8f0}.section-title{font-size:18px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:12px}.icon{width:20px;height:20px;fill:#7c3aed}.service-description p{line-height:1.6}.form-group{margin-bottom:16px}.form-label{display:block;font-size:14px;font-weight:500;color:#374151;margin-bottom:8px}.form-input{width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;transition:all .2s}.form-input:focus{outline:none;border-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed1a}.form-textarea{resize:vertical;height:80px}.pincode-success{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;padding:12px;border-radius:8px;font-size:14px;font-weight:500;margin-top:8px}.date-grid{display:flex;gap:12px}.date-button,.time-button{padding:16px 12px;border:1px solid #d1d5db;border-radius:8px;background:#fff;cursor:pointer;text-align:center;transition:all .2s;font-size:14px}.date-button:hover,.time-button:hover{border-color:#7c3aed;background:#faf5ff}.date-button.selected,.time-button.selected{border-color:#7c3aed;background:#f3e8ff;color:#7c3aed;font-weight:600}.time-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.sidebar{position:sticky;top:24px;height:fit-content}.designs-header{font-size:18px;font-weight:600;color:#1e293b;margin-bottom:16px}.designs-count{font-size:14px;color:#64748b;margin-bottom:16px}.design-item{border:1px solid #e2e8f0;border-radius:8px;padding:16px;margin-bottom:12px;transition:all .2s}.design-item:hover{border-color:#7c3aed}.design-content{display:flex;gap:12px;align-items:flex-start}.design-image{width:80px;height:80px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#64748b;flex-shrink:0}.design-info{flex:1}.design-name{font-weight:500;color:#1e293b;margin-bottom:4px;font-size:14px}.design-price{color:#7c3aed;font-weight:600;font-size:14px}.design-select{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;border:1px solid;background:#fff}.design-select.selected{background:#f3e8ff;color:#7c3aed;border-color:#7c3aed}.design-select:not(.selected){color:#64748b;border-color:#d1d5db}.add-design{width:100%;padding:5px 3px;border:2px dashed #d1d5db;border-radius:8px;background:#fff;color:#64748b;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;font-size:1rem!important}.add-design:hover{border-color:#7c3aed;color:#7c3aed}.summary{margin-top:24px;padding-top:24px;border-top:1px solid #e2e8f0}.summary-row{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}.summary-label{color:#64748b}.summary-value{font-weight:500}.free-service{color:#059669}.book-button{width:100%;padding:6px 10px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;margin-top:24px;transition:all .2s;font-size:1rem!important}.book-button:hover:not(:disabled){background:linear-gradient(135deg,#6d28d9,#db2777)}.book-button:disabled{opacity:.5;cursor:not-allowed}.disclaimer{font-size:12px;color:#64748b;text-align:center;margin-top:12px}.slide-in{animation:slideIn .3s ease-out}.time-grid{display:flex;gap:16px;flex-wrap:wrap}.time-slot{position:relative;background:#fff;border:2px solid #e5e7eb;border-radius:10px;padding:5px 4px;cursor:pointer;transition:all .2s ease;min-width:120px;text-align:center}.time-slot:hover{border-color:#d1d5db;transform:translateY(-2px)}.time-slot.selected{border-color:#8b5cf6;background:#f3f4f6}.time-slot .time-text{font-size:14px;font-weight:600;color:#374151}.time-slot.selected .time-text{color:#8b5cf6}.more-slot-badge{position:absolute;top:-8px;left:50%;transform:translate(-50%);background:#f97316;color:#fff;font-size:9px;font-weight:600;padding:1px 8px;border-radius:12px;white-space:nowrap}.single-date{text-align:center;width:9%;background:#f6f3f9;cursor:pointer;border-radius:15px}.single-date .time{padding:10px 6px}.single-date .day{font-size:.8rem}.single-date .date{font-size:1rem;font-weight:700}.single-date .design{font-size:.7rem;padding:5px 6px;font-weight:700;border-bottom-left-radius:15px;border-bottom-right-radius:15px}.item-title{font-size:.9rem;font-weight:500;color:#111827;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px;margin-bottom:8px}.current-price{font-size:1rem;font-weight:600;color:#111827}.original-price{font-size:1rem;color:#9ca3af;text-decoration:line-through}.discount{background:#fef3c7;color:#d97706;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-options{display:flex;gap:10px;font-size:14px;color:#6b7280;margin-bottom:12px}.design-parent{height:250px;overflow:scroll}.loader-btn{display:flex;align-items:center;justify-content:center;gap:15px}.loader-btn mat-spinner{height:20px!important;width:20px!important}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.content-grid,.form-row,.time-grid{grid-template-columns:1fr}}@media screen and (max-width: 475px){.date-grid{overflow-x:scroll;max-width:274px;width:100%}.single-date{width:50%}}\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: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }] }); }
|
|
20082
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BookAppointmentComponent, isStandalone: true, selector: "simpo-book-appointment", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<main class=\"main-content\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"container\">\r\n <div class=\"content-grid\">\r\n <!-- Left Form Section -->\r\n <div class=\"form-section\">\r\n <!-- Service Description -->\r\n <div class=\"card service-description\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n <h2 class=\"section-title\">Try at Home Service</h2>\r\n <p>Our Try at Home consultant will visit your location to show you the designs at your convenience.</p>\r\n </div>\r\n\r\n <!-- Pincode Section -->\r\n <!-- <div class=\"card\">\r\n <h3 class=\"section-title\">\r\n <svg class=\"icon\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\" />\r\n </svg>\r\n Service Location\r\n </h3>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Enter your pincode</label>\r\n <input type=\"text\" class=\"form-input\" placeholder=\"Enter 6-digit pincode\"\r\n maxlength=\"6\" />\r\n <div class=\"pincode-success\" *ngIf=\"pincode.length === 6\">\r\n \u2713 Service available in your area\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n <!-- Date Selection -->\r\n <div class=\"card\">\r\n <h3 class=\"section-title\">Select a Date</h3>\r\n <div class=\"date-grid\">\r\n <div class=\"single-date\" *ngFor=\"let day of weekDays\" (click)=\"checkAvailability(day)\"\r\n [style.border]=\"day.dateWithMonth === customerDetails.date ? '2px solid ' + styles?.background?.accentColor : 'none'\">\r\n <div class=\"time\">\r\n <div class=\"day\">{{day.day.substring(0,3)}}</div>\r\n <div class=\"date\">{{day.date}}</div>\r\n </div>\r\n <div class=\"design\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">{{trialCartItem?.length ?? 0}}\r\n Designs</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Time Selection -->\r\n <div class=\"card\">\r\n <div class=\"section\">\r\n <h2 class=\"section-title\">Select a Time</h2>\r\n <div class=\"time-grid\">\r\n <div class=\"time-slot\" *ngFor=\"let time of timeSlots\" (click)=\"selectTime(time)\"\r\n [ngClass]=\"{'selected': time === customerDetails.time}\">\r\n <div class=\"more-slot-badge\">More Slot Left</div>\r\n <div class=\"time-text\">{{time}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Customer Details -->\r\n <div class=\"card\">\r\n <h3 class=\"section-title\">Contact Details</h3>\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Full Name *</label>\r\n <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverName\"\r\n placeholder=\"Enter your full name\" />\r\n </div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Phone Number *</label>\r\n <input type=\"tel\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverPhone\"\r\n placeholder=\"Enter your phone number\" />\r\n </div>\r\n </div>\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Email *</label>\r\n <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverEmail\"\r\n placeholder=\"Enter your full name\" />\r\n </div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">City *</label>\r\n <input type=\"city\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.cityName\"\r\n placeholder=\"Enter your city\" />\r\n </div>\r\n </div>\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">State *</label>\r\n <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.stateName\"\r\n placeholder=\"Enter your full name\" />\r\n </div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Pincode *</label>\r\n <input type=\"tel\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.zipCode\"\r\n placeholder=\"Enter your phone number\" />\r\n </div>\r\n </div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Complete Address *</label>\r\n <textarea class=\"form-input form-textarea\" [(ngModel)]=\"customerDetails.addressDetails.addressLine1\"\r\n placeholder=\"Enter your complete address\"></textarea>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <!-- Sidebar -->\r\n <div class=\"sidebar\">\r\n <div class=\"card\">\r\n <h3 class=\"designs-header\">Your Shortlisted Designs</h3>\r\n <!-- <div class=\"designs-count\">{{ getSelectedDesigns().length }}/4 SELECTED</div> -->\r\n\r\n <div class=\"design-parent\">\r\n <div class=\"design-item\" *ngFor=\"let item of trialCartItem\">\r\n <div class=\"design-content\">\r\n <img class=\"design-image\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n alt=\"\">\r\n <!-- <div class=\"\">Design Image</div> -->\r\n\r\n <div class=\"design-info\">\r\n <h3 class=\"item-title\">{{item.itemName}}</h3>\r\n <div class=\"item-price\">\r\n <span class=\"current-price\">\u20B9{{item.discountedPrice | number: '1.0-2'}}</span>\r\n <span class=\"original-price\" *ngIf=\"item.sellingPrice > item.discountedPrice\">\u20B9{{item.sellingPrice |\r\n number:\r\n '1.0-2'}}</span>\r\n </div>\r\n <div class=\"item-options\" *ngIf=\"item.itemVariant\">\r\n <span *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">{{ varient }}: {{\r\n item.itemVariant.properties[varient] | uppercase }}</span>\r\n </div>\r\n </div>\r\n <!-- <button class=\"design-select\" [class.selected]=\"design.selected\" (click)=\"toggleDesign(design.id)\">\r\n {{ design.selected ? 'Selected' : 'Select' }}\r\n </button> -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button class=\"add-design\" (click)=\"addMoreDesign()\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\r\n </svg>\r\n Add More Designs\r\n </button>\r\n\r\n <div class=\"summary\">\r\n <!-- <div class=\"summary-row\">\r\n <span class=\"summary-label\">Selected Designs:</span>\r\n <span class=\"summary-value\">{{ getSelectedDesigns().length }}</span>\r\n </div> -->\r\n <div class=\"summary-row\">\r\n <span class=\"summary-label\">Service:</span>\r\n <span class=\"summary-value free-service\">FREE</span>\r\n </div>\r\n </div>\r\n\r\n <button class=\"book-button\" (click)=\"bookAppointment()\" simpoButtonDirective *ngIf=\"!loader\"\r\n [disabled]=\"isValid\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"styles?.background\">\r\n {{data?.action?.buttons?.[1]?.content?.label ?? 'Book Try at Home Appointment'}}\r\n </button>\r\n <button class=\"book-button loader-btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" *ngIf=\"loader\"\r\n [backgroundInfo]=\"styles?.background\"><mat-spinner></mat-spinner> Booking</button>\r\n <p class=\"disclaimer\">Our consultant will contact you to confirm the appointment</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isEcommerce]=\"true\"></simpo-hover-elements>\r\n </div>\r\n</main>\r\n", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.main-content{padding:32px 0;position:relative}.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:32px}.form-section{display:flex;flex-direction:column;gap:24px}.card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a;border:1px solid #e2e8f0}.section-title{font-size:18px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:12px}.icon{width:20px;height:20px;fill:#7c3aed}.service-description p{line-height:1.6}.form-group{margin-bottom:16px}.form-label{display:block;font-size:14px;font-weight:500;color:#374151;margin-bottom:8px}.form-input{width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;transition:all .2s}.form-input:focus{outline:none;border-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed1a}.form-textarea{resize:vertical;height:80px}.pincode-success{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;padding:12px;border-radius:8px;font-size:14px;font-weight:500;margin-top:8px}.date-grid{display:flex;gap:12px}.date-button,.time-button{padding:16px 12px;border:1px solid #d1d5db;border-radius:8px;background:#fff;cursor:pointer;text-align:center;transition:all .2s;font-size:14px}.date-button:hover,.time-button:hover{border-color:#7c3aed;background:#faf5ff}.date-button.selected,.time-button.selected{border-color:#7c3aed;background:#f3e8ff;color:#7c3aed;font-weight:600}.time-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.sidebar{position:sticky;top:24px;height:fit-content}.designs-header{font-size:18px;font-weight:600;color:#1e293b;margin-bottom:16px}.designs-count{font-size:14px;color:#64748b;margin-bottom:16px}.design-item{border:1px solid #e2e8f0;border-radius:8px;padding:16px;margin-bottom:12px;transition:all .2s}.design-item:hover{border-color:#7c3aed}.design-content{display:flex;gap:12px;align-items:flex-start}.design-image{width:80px;height:80px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#64748b;flex-shrink:0}.design-info{flex:1}.design-name{font-weight:500;color:#1e293b;margin-bottom:4px;font-size:14px}.design-price{color:#7c3aed;font-weight:600;font-size:14px}.design-select{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;border:1px solid;background:#fff}.design-select.selected{background:#f3e8ff;color:#7c3aed;border-color:#7c3aed}.design-select:not(.selected){color:#64748b;border-color:#d1d5db}.add-design{width:100%;padding:5px 3px;border:2px dashed #d1d5db;border-radius:8px;background:#fff;color:#64748b;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;font-size:1rem!important}.add-design:hover{border-color:#7c3aed;color:#7c3aed}.summary{margin-top:24px;padding-top:24px;border-top:1px solid #e2e8f0}.summary-row{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}.summary-label{color:#64748b}.summary-value{font-weight:500}.free-service{color:#059669}.book-button{width:100%;padding:6px 10px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;margin-top:24px;transition:all .2s;font-size:1rem!important}.book-button:hover:not(:disabled){background:linear-gradient(135deg,#6d28d9,#db2777)}.book-button:disabled{opacity:.5;cursor:not-allowed}.disclaimer{font-size:12px;color:#64748b;text-align:center;margin-top:12px}.slide-in{animation:slideIn .3s ease-out}.time-grid{display:flex;gap:16px;flex-wrap:wrap}.time-slot{position:relative;background:#fff;border:2px solid #e5e7eb;border-radius:10px;padding:5px 4px;cursor:pointer;transition:all .2s ease;min-width:120px;text-align:center}.time-slot:hover{border-color:#d1d5db;transform:translateY(-2px)}.time-slot.selected{border-color:#8b5cf6;background:#f3f4f6}.time-slot .time-text{font-size:14px;font-weight:600;color:#374151}.time-slot.selected .time-text{color:#8b5cf6}.more-slot-badge{position:absolute;top:-8px;left:50%;transform:translate(-50%);background:#f97316;color:#fff;font-size:9px;font-weight:600;padding:1px 8px;border-radius:12px;white-space:nowrap}.single-date{text-align:center;width:9%;background:#f6f3f9;cursor:pointer;border-radius:15px}.single-date .time{padding:10px 6px}.single-date .day{font-size:.8rem}.single-date .date{font-size:1rem;font-weight:700}.single-date .design{font-size:.7rem;padding:5px 6px;font-weight:700;border-bottom-left-radius:15px;border-bottom-right-radius:15px}.item-title{font-size:.9rem;font-weight:500;color:#111827;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px;margin-bottom:8px}.current-price{font-size:1rem;font-weight:600;color:#111827}.original-price{font-size:1rem;color:#9ca3af;text-decoration:line-through}.discount{background:#fef3c7;color:#d97706;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-options{display:flex;gap:10px;font-size:14px;color:#6b7280;margin-bottom:12px}.design-parent{height:250px;overflow:scroll}.loader-btn{display:flex;align-items:center;justify-content:center;gap:15px}.loader-btn mat-spinner{height:20px!important;width:20px!important}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.content-grid,.form-row,.time-grid{grid-template-columns:1fr}}@media screen and (max-width: 475px){.date-grid{overflow-x:scroll;max-width:274px;width:100%}.single-date{width:50%}}\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: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }] }); }
|
|
20085
20083
|
}
|
|
20086
20084
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookAppointmentComponent, decorators: [{
|
|
20087
20085
|
type: Component,
|
|
@@ -20096,7 +20094,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
20096
20094
|
ToastModule,
|
|
20097
20095
|
MatProgressSpinnerModule,
|
|
20098
20096
|
HoverElementsComponent
|
|
20099
|
-
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<main class=\"main-content\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"container\">\r\n <div class=\"content-grid\">\r\n <!-- Left Form Section -->\r\n <div class=\"form-section\">\r\n <!-- Service Description -->\r\n <div class=\"card service-description\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n <h2 class=\"section-title\">Try at Home Service</h2>\r\n <p>Our Try at Home consultant will visit your location to show you the designs at your convenience.</p>\r\n </div>\r\n\r\n <!-- Pincode Section -->\r\n <!-- <div class=\"card\">\r\n <h3 class=\"section-title\">\r\n <svg class=\"icon\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\" />\r\n </svg>\r\n Service Location\r\n </h3>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Enter your pincode</label>\r\n <input type=\"text\" class=\"form-input\" placeholder=\"Enter 6-digit pincode\"\r\n maxlength=\"6\" />\r\n <div class=\"pincode-success\" *ngIf=\"pincode.length === 6\">\r\n \u2713 Service available in your area\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n <!-- Date Selection -->\r\n <div class=\"card\">\r\n <h3 class=\"section-title\">Select a Date</h3>\r\n <div class=\"date-grid\">\r\n <div class=\"single-date\" *ngFor=\"let day of weekDays\" (click)=\"checkAvailability(day)\"\r\n [style.border]=\"day.dateWithMonth === customerDetails.date ? '2px solid ' + styles?.background?.accentColor : 'none'\">\r\n <div class=\"time\">\r\n <div class=\"day\">{{day.day.substring(0,3)}}</div>\r\n <div class=\"date\">{{day.date}}</div>\r\n </div>\r\n <div class=\"design\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">{{trialCartItem?.length ?? 0}}\r\n Designs</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Time Selection -->\r\n <div class=\"card\">\r\n <div class=\"section\">\r\n <h2 class=\"section-title\">Select a Time</h2>\r\n <div class=\"time-grid\">\r\n <div class=\"time-slot\" *ngFor=\"let time of timeSlots\" (click)=\"selectTime(time)\"\r\n [ngClass]=\"{'selected': time === customerDetails.time}\">\r\n <div class=\"more-slot-badge\">More Slot Left</div>\r\n <div class=\"time-text\">{{time}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Customer Details -->\r\n <div class=\"card\">\r\n <h3 class=\"section-title\">Contact Details</h3>\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Full Name *</label>\r\n <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverName\"\r\n placeholder=\"Enter your full name\" />\r\n </div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Phone Number *</label>\r\n <input type=\"tel\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverPhone\"\r\n placeholder=\"Enter your phone number\" />\r\n </div>\r\n </div>\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Email *</label>\r\n <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverEmail\"\r\n placeholder=\"Enter your full name\" />\r\n </div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">City *</label>\r\n <input type=\"city\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.cityName\"\r\n placeholder=\"Enter your city\" />\r\n </div>\r\n </div>\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">State *</label>\r\n <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.stateName\"\r\n placeholder=\"Enter your full name\" />\r\n </div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Pincode *</label>\r\n <input type=\"tel\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.zipCode\"\r\n placeholder=\"Enter your phone number\" />\r\n </div>\r\n </div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Complete Address *</label>\r\n <textarea class=\"form-input form-textarea\" [(ngModel)]=\"customerDetails.addressDetails.addressLine1\"\r\n placeholder=\"Enter your complete address\"></textarea>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <!-- Sidebar -->\r\n <div class=\"sidebar\">\r\n <div class=\"card\">\r\n <h3 class=\"designs-header\">Your Shortlisted Designs</h3>\r\n <!-- <div class=\"designs-count\">{{ getSelectedDesigns().length }}/4 SELECTED</div> -->\r\n\r\n <div class=\"design-parent\">\r\n <div class=\"design-item\" *ngFor=\"let item of trialCartItem\">\r\n <div class=\"design-content\">\r\n <img class=\"design-image\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n alt=\"\">\r\n <!-- <div class=\"\">Design Image</div> -->\r\n\r\n <div class=\"design-info\">\r\n <h3 class=\"item-title\">{{item.itemName}}</h3>\r\n <div class=\"item-price\">\r\n <span class=\"current-price\">\u20B9{{item.discountedPrice | number: '1.0-2'}}</span>\r\n <span class=\"original-price\" *ngIf=\"item.sellingPrice > item.discountedPrice\">\u20B9{{item.sellingPrice |\r\n number:\r\n '1.0-2'}}</span>\r\n </div>\r\n <div class=\"item-options\" *ngIf=\"item.itemVariant\">\r\n <span *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">{{ varient }}: {{\r\n item.itemVariant.properties[varient] | uppercase }}</span>\r\n </div>\r\n </div>\r\n <!-- <button class=\"design-select\" [class.selected]=\"design.selected\" (click)=\"toggleDesign(design.id)\">\r\n {{ design.selected ? 'Selected' : 'Select' }}\r\n </button> -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button class=\"add-design\" (click)=\"addMoreDesign()\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\r\n </svg>\r\n Add More Designs\r\n </button>\r\n\r\n <div class=\"summary\">\r\n <!-- <div class=\"summary-row\">\r\n <span class=\"summary-label\">Selected Designs:</span>\r\n <span class=\"summary-value\">{{ getSelectedDesigns().length }}</span>\r\n </div> -->\r\n <div class=\"summary-row\">\r\n <span class=\"summary-label\">Service:</span>\r\n <span class=\"summary-value free-service\">FREE</span>\r\n </div>\r\n </div>\r\n\r\n <button class=\"book-button\" (click)=\"bookAppointment()\" simpoButtonDirective *ngIf=\"!loader\"\r\n [disabled]=\"isValid\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"styles?.background\">\r\n {{data?.action?.buttons?.[1]?.content?.label ?? 'Book Try at Home Appointment'}}\r\n </button>\r\n <button class=\"book-button loader-btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" *ngIf=\"loader\"\r\n [backgroundInfo]=\"styles?.background\"><mat-spinner></mat-spinner> Booking</button>\r\n <p class=\"disclaimer\">Our consultant will contact you to confirm the appointment</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isEcommerce]=\"true\"></simpo-hover-elements>\r\n </div>\r\n</main>\r\n", styles: ["*{font-family:var(--primary-font-family)!important}.main-content{padding:32px 0;position:relative}.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:32px}.form-section{display:flex;flex-direction:column;gap:24px}.card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a;border:1px solid #e2e8f0}.section-title{font-size:18px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:12px}.icon{width:20px;height:20px;fill:#7c3aed}.service-description p{line-height:1.6}.form-group{margin-bottom:16px}.form-label{display:block;font-size:14px;font-weight:500;color:#374151;margin-bottom:8px}.form-input{width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;transition:all .2s}.form-input:focus{outline:none;border-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed1a}.form-textarea{resize:vertical;height:80px}.pincode-success{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;padding:12px;border-radius:8px;font-size:14px;font-weight:500;margin-top:8px}.date-grid{display:flex;gap:12px}.date-button,.time-button{padding:16px 12px;border:1px solid #d1d5db;border-radius:8px;background:#fff;cursor:pointer;text-align:center;transition:all .2s;font-size:14px}.date-button:hover,.time-button:hover{border-color:#7c3aed;background:#faf5ff}.date-button.selected,.time-button.selected{border-color:#7c3aed;background:#f3e8ff;color:#7c3aed;font-weight:600}.time-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.sidebar{position:sticky;top:24px;height:fit-content}.designs-header{font-size:18px;font-weight:600;color:#1e293b;margin-bottom:16px}.designs-count{font-size:14px;color:#64748b;margin-bottom:16px}.design-item{border:1px solid #e2e8f0;border-radius:8px;padding:16px;margin-bottom:12px;transition:all .2s}.design-item:hover{border-color:#7c3aed}.design-content{display:flex;gap:12px;align-items:flex-start}.design-image{width:80px;height:80px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#64748b;flex-shrink:0}.design-info{flex:1}.design-name{font-weight:500;color:#1e293b;margin-bottom:4px;font-size:14px}.design-price{color:#7c3aed;font-weight:600;font-size:14px}.design-select{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;border:1px solid;background:#fff}.design-select.selected{background:#f3e8ff;color:#7c3aed;border-color:#7c3aed}.design-select:not(.selected){color:#64748b;border-color:#d1d5db}.add-design{width:100%;padding:5px 3px;border:2px dashed #d1d5db;border-radius:8px;background:#fff;color:#64748b;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;font-size:1rem!important}.add-design:hover{border-color:#7c3aed;color:#7c3aed}.summary{margin-top:24px;padding-top:24px;border-top:1px solid #e2e8f0}.summary-row{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}.summary-label{color:#64748b}.summary-value{font-weight:500}.free-service{color:#059669}.book-button{width:100%;padding:6px 10px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;margin-top:24px;transition:all .2s;font-size:1rem!important}.book-button:hover:not(:disabled){background:linear-gradient(135deg,#6d28d9,#db2777)}.book-button:disabled{opacity:.5;cursor:not-allowed}.disclaimer{font-size:12px;color:#64748b;text-align:center;margin-top:12px}.slide-in{animation:slideIn .3s ease-out}.time-grid{display:flex;gap:16px;flex-wrap:wrap}.time-slot{position:relative;background:#fff;border:2px solid #e5e7eb;border-radius:10px;padding:5px 4px;cursor:pointer;transition:all .2s ease;min-width:120px;text-align:center}.time-slot:hover{border-color:#d1d5db;transform:translateY(-2px)}.time-slot.selected{border-color:#8b5cf6;background:#f3f4f6}.time-slot .time-text{font-size:14px;font-weight:600;color:#374151}.time-slot.selected .time-text{color:#8b5cf6}.more-slot-badge{position:absolute;top:-8px;left:50%;transform:translate(-50%);background:#f97316;color:#fff;font-size:9px;font-weight:600;padding:1px 8px;border-radius:12px;white-space:nowrap}.single-date{text-align:center;width:9%;background:#f6f3f9;cursor:pointer;border-radius:15px}.single-date .time{padding:10px 6px}.single-date .day{font-size:.8rem}.single-date .date{font-size:1rem;font-weight:700}.single-date .design{font-size:.7rem;padding:5px 6px;font-weight:700;border-bottom-left-radius:15px;border-bottom-right-radius:15px}.item-title{font-size:.9rem;font-weight:500;color:#111827;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px;margin-bottom:8px}.current-price{font-size:1rem;font-weight:600;color:#111827}.original-price{font-size:1rem;color:#9ca3af;text-decoration:line-through}.discount{background:#fef3c7;color:#d97706;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-options{display:flex;gap:10px;font-size:14px;color:#6b7280;margin-bottom:12px}.design-parent{height:250px;overflow:scroll}.loader-btn{display:flex;align-items:center;justify-content:center;gap:15px}.loader-btn mat-spinner{height:20px!important;width:20px!important}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.content-grid,.form-row,.time-grid{grid-template-columns:1fr}}@media screen and (max-width: 475px){.date-grid{overflow-x:scroll;max-width:274px;width:100%}.single-date{width:50%}}\n"] }]
|
|
20097
|
+
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<main class=\"main-content\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"container\">\r\n <div class=\"content-grid\">\r\n <!-- Left Form Section -->\r\n <div class=\"form-section\">\r\n <!-- Service Description -->\r\n <div class=\"card service-description\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n <h2 class=\"section-title\">Try at Home Service</h2>\r\n <p>Our Try at Home consultant will visit your location to show you the designs at your convenience.</p>\r\n </div>\r\n\r\n <!-- Pincode Section -->\r\n <!-- <div class=\"card\">\r\n <h3 class=\"section-title\">\r\n <svg class=\"icon\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\" />\r\n </svg>\r\n Service Location\r\n </h3>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Enter your pincode</label>\r\n <input type=\"text\" class=\"form-input\" placeholder=\"Enter 6-digit pincode\"\r\n maxlength=\"6\" />\r\n <div class=\"pincode-success\" *ngIf=\"pincode.length === 6\">\r\n \u2713 Service available in your area\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n <!-- Date Selection -->\r\n <div class=\"card\">\r\n <h3 class=\"section-title\">Select a Date</h3>\r\n <div class=\"date-grid\">\r\n <div class=\"single-date\" *ngFor=\"let day of weekDays\" (click)=\"checkAvailability(day)\"\r\n [style.border]=\"day.dateWithMonth === customerDetails.date ? '2px solid ' + styles?.background?.accentColor : 'none'\">\r\n <div class=\"time\">\r\n <div class=\"day\">{{day.day.substring(0,3)}}</div>\r\n <div class=\"date\">{{day.date}}</div>\r\n </div>\r\n <div class=\"design\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">{{trialCartItem?.length ?? 0}}\r\n Designs</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Time Selection -->\r\n <div class=\"card\">\r\n <div class=\"section\">\r\n <h2 class=\"section-title\">Select a Time</h2>\r\n <div class=\"time-grid\">\r\n <div class=\"time-slot\" *ngFor=\"let time of timeSlots\" (click)=\"selectTime(time)\"\r\n [ngClass]=\"{'selected': time === customerDetails.time}\">\r\n <div class=\"more-slot-badge\">More Slot Left</div>\r\n <div class=\"time-text\">{{time}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Customer Details -->\r\n <div class=\"card\">\r\n <h3 class=\"section-title\">Contact Details</h3>\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Full Name *</label>\r\n <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverName\"\r\n placeholder=\"Enter your full name\" />\r\n </div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Phone Number *</label>\r\n <input type=\"tel\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverPhone\"\r\n placeholder=\"Enter your phone number\" />\r\n </div>\r\n </div>\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Email *</label>\r\n <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverEmail\"\r\n placeholder=\"Enter your full name\" />\r\n </div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">City *</label>\r\n <input type=\"city\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.cityName\"\r\n placeholder=\"Enter your city\" />\r\n </div>\r\n </div>\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">State *</label>\r\n <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.stateName\"\r\n placeholder=\"Enter your full name\" />\r\n </div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Pincode *</label>\r\n <input type=\"tel\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.zipCode\"\r\n placeholder=\"Enter your phone number\" />\r\n </div>\r\n </div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Complete Address *</label>\r\n <textarea class=\"form-input form-textarea\" [(ngModel)]=\"customerDetails.addressDetails.addressLine1\"\r\n placeholder=\"Enter your complete address\"></textarea>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <!-- Sidebar -->\r\n <div class=\"sidebar\">\r\n <div class=\"card\">\r\n <h3 class=\"designs-header\">Your Shortlisted Designs</h3>\r\n <!-- <div class=\"designs-count\">{{ getSelectedDesigns().length }}/4 SELECTED</div> -->\r\n\r\n <div class=\"design-parent\">\r\n <div class=\"design-item\" *ngFor=\"let item of trialCartItem\">\r\n <div class=\"design-content\">\r\n <img class=\"design-image\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n alt=\"\">\r\n <!-- <div class=\"\">Design Image</div> -->\r\n\r\n <div class=\"design-info\">\r\n <h3 class=\"item-title\">{{item.itemName}}</h3>\r\n <div class=\"item-price\">\r\n <span class=\"current-price\">\u20B9{{item.discountedPrice | number: '1.0-2'}}</span>\r\n <span class=\"original-price\" *ngIf=\"item.sellingPrice > item.discountedPrice\">\u20B9{{item.sellingPrice |\r\n number:\r\n '1.0-2'}}</span>\r\n </div>\r\n <div class=\"item-options\" *ngIf=\"item.itemVariant\">\r\n <span *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">{{ varient }}: {{\r\n item.itemVariant.properties[varient] | uppercase }}</span>\r\n </div>\r\n </div>\r\n <!-- <button class=\"design-select\" [class.selected]=\"design.selected\" (click)=\"toggleDesign(design.id)\">\r\n {{ design.selected ? 'Selected' : 'Select' }}\r\n </button> -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button class=\"add-design\" (click)=\"addMoreDesign()\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\r\n </svg>\r\n Add More Designs\r\n </button>\r\n\r\n <div class=\"summary\">\r\n <!-- <div class=\"summary-row\">\r\n <span class=\"summary-label\">Selected Designs:</span>\r\n <span class=\"summary-value\">{{ getSelectedDesigns().length }}</span>\r\n </div> -->\r\n <div class=\"summary-row\">\r\n <span class=\"summary-label\">Service:</span>\r\n <span class=\"summary-value free-service\">FREE</span>\r\n </div>\r\n </div>\r\n\r\n <button class=\"book-button\" (click)=\"bookAppointment()\" simpoButtonDirective *ngIf=\"!loader\"\r\n [disabled]=\"isValid\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"styles?.background\">\r\n {{data?.action?.buttons?.[1]?.content?.label ?? 'Book Try at Home Appointment'}}\r\n </button>\r\n <button class=\"book-button loader-btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" *ngIf=\"loader\"\r\n [backgroundInfo]=\"styles?.background\"><mat-spinner></mat-spinner> Booking</button>\r\n <p class=\"disclaimer\">Our consultant will contact you to confirm the appointment</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isEcommerce]=\"true\"></simpo-hover-elements>\r\n </div>\r\n</main>\r\n", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.main-content{padding:32px 0;position:relative}.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:32px}.form-section{display:flex;flex-direction:column;gap:24px}.card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a;border:1px solid #e2e8f0}.section-title{font-size:18px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:12px}.icon{width:20px;height:20px;fill:#7c3aed}.service-description p{line-height:1.6}.form-group{margin-bottom:16px}.form-label{display:block;font-size:14px;font-weight:500;color:#374151;margin-bottom:8px}.form-input{width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;transition:all .2s}.form-input:focus{outline:none;border-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed1a}.form-textarea{resize:vertical;height:80px}.pincode-success{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;padding:12px;border-radius:8px;font-size:14px;font-weight:500;margin-top:8px}.date-grid{display:flex;gap:12px}.date-button,.time-button{padding:16px 12px;border:1px solid #d1d5db;border-radius:8px;background:#fff;cursor:pointer;text-align:center;transition:all .2s;font-size:14px}.date-button:hover,.time-button:hover{border-color:#7c3aed;background:#faf5ff}.date-button.selected,.time-button.selected{border-color:#7c3aed;background:#f3e8ff;color:#7c3aed;font-weight:600}.time-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.sidebar{position:sticky;top:24px;height:fit-content}.designs-header{font-size:18px;font-weight:600;color:#1e293b;margin-bottom:16px}.designs-count{font-size:14px;color:#64748b;margin-bottom:16px}.design-item{border:1px solid #e2e8f0;border-radius:8px;padding:16px;margin-bottom:12px;transition:all .2s}.design-item:hover{border-color:#7c3aed}.design-content{display:flex;gap:12px;align-items:flex-start}.design-image{width:80px;height:80px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#64748b;flex-shrink:0}.design-info{flex:1}.design-name{font-weight:500;color:#1e293b;margin-bottom:4px;font-size:14px}.design-price{color:#7c3aed;font-weight:600;font-size:14px}.design-select{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;border:1px solid;background:#fff}.design-select.selected{background:#f3e8ff;color:#7c3aed;border-color:#7c3aed}.design-select:not(.selected){color:#64748b;border-color:#d1d5db}.add-design{width:100%;padding:5px 3px;border:2px dashed #d1d5db;border-radius:8px;background:#fff;color:#64748b;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;font-size:1rem!important}.add-design:hover{border-color:#7c3aed;color:#7c3aed}.summary{margin-top:24px;padding-top:24px;border-top:1px solid #e2e8f0}.summary-row{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}.summary-label{color:#64748b}.summary-value{font-weight:500}.free-service{color:#059669}.book-button{width:100%;padding:6px 10px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;margin-top:24px;transition:all .2s;font-size:1rem!important}.book-button:hover:not(:disabled){background:linear-gradient(135deg,#6d28d9,#db2777)}.book-button:disabled{opacity:.5;cursor:not-allowed}.disclaimer{font-size:12px;color:#64748b;text-align:center;margin-top:12px}.slide-in{animation:slideIn .3s ease-out}.time-grid{display:flex;gap:16px;flex-wrap:wrap}.time-slot{position:relative;background:#fff;border:2px solid #e5e7eb;border-radius:10px;padding:5px 4px;cursor:pointer;transition:all .2s ease;min-width:120px;text-align:center}.time-slot:hover{border-color:#d1d5db;transform:translateY(-2px)}.time-slot.selected{border-color:#8b5cf6;background:#f3f4f6}.time-slot .time-text{font-size:14px;font-weight:600;color:#374151}.time-slot.selected .time-text{color:#8b5cf6}.more-slot-badge{position:absolute;top:-8px;left:50%;transform:translate(-50%);background:#f97316;color:#fff;font-size:9px;font-weight:600;padding:1px 8px;border-radius:12px;white-space:nowrap}.single-date{text-align:center;width:9%;background:#f6f3f9;cursor:pointer;border-radius:15px}.single-date .time{padding:10px 6px}.single-date .day{font-size:.8rem}.single-date .date{font-size:1rem;font-weight:700}.single-date .design{font-size:.7rem;padding:5px 6px;font-weight:700;border-bottom-left-radius:15px;border-bottom-right-radius:15px}.item-title{font-size:.9rem;font-weight:500;color:#111827;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px;margin-bottom:8px}.current-price{font-size:1rem;font-weight:600;color:#111827}.original-price{font-size:1rem;color:#9ca3af;text-decoration:line-through}.discount{background:#fef3c7;color:#d97706;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-options{display:flex;gap:10px;font-size:14px;color:#6b7280;margin-bottom:12px}.design-parent{height:250px;overflow:scroll}.loader-btn{display:flex;align-items:center;justify-content:center;gap:15px}.loader-btn mat-spinner{height:20px!important;width:20px!important}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.content-grid,.form-row,.time-grid{grid-template-columns:1fr}}@media screen and (max-width: 475px){.date-grid{overflow-x:scroll;max-width:274px;width:100%}.single-date{width:50%}}\n"] }]
|
|
20100
20098
|
}], ctorParameters: () => [{ type: StorageServiceService }, { type: RestService }, { type: i2$2.Router }, { type: i4$1.MessageService }], propDecorators: { data: [{
|
|
20101
20099
|
type: Input
|
|
20102
20100
|
}], index: [{
|