@propbinder/mobile-design 0.2.54 → 0.2.56

package/fesm2022/propbinder-mobile-design.mjs

@@ -16659,6 +16659,8 @@ class DsMobileBookingModalComponent {
     confirmBookingText = 'Bekræft booking';
     availableDates;
     availableTimeSlots;
+    useMockData = false;
+    onSubmit;
     swiperComponent;
     // Signals for reactive state management
     dateOptions = signal([], ...(ngDevMode ? [{ debugName: "dateOptions" }] : []));
@@ -16672,7 +16674,9 @@ class DsMobileBookingModalComponent {
     }, ...(ngDevMode ? [{ debugName: "canConfirm" }] : []));
     constructor(modalController) {
         this.modalController = modalController;
-        this.generateMockData();
+    }
+    ngOnInit() {
+        this.initializeData();
     }
     /**
      * After view init - force swiper update to fix initial positioning
@@ -16721,9 +16725,9 @@ class DsMobileBookingModalComponent {
         };
     }, ...(ngDevMode ? [{ debugName: "dateDisabledFn" }] : []));
     /**
-     * Generate mock date and time data or use provided available data
+     * Initialize date and time data or optionally use mock data for testing
      */
-    generateMockData() {
+    initializeData() {
         if (this.availableDates && this.availableDates.length > 0) {
             this.dateOptions.set(this.availableDates);
             const firstAvailableDate = this.availableDates.find(d => d.state !== 'disabled') || this.availableDates[0];
@@ -16738,11 +16742,16 @@ class DsMobileBookingModalComponent {
                 const selectedRef = updatedDates.find(d => d.id === firstAvailableDate.id);
                 if (selectedRef) {
                     this.selectedDate.set(selectedRef);
-                    this.generateTimeSlots(selectedRef.fullDate, selectedRef.date);
+                    this.initializeTimeSlots(selectedRef.fullDate, selectedRef.id);
                 }
             }
             return;
         }
+        if (!this.useMockData) {
+            this.dateOptions.set([]);
+            this.timeSlots.set([]);
+            return;
+        }
         const dates = [];
         const today = new Date();
         const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
@@ -16771,21 +16780,25 @@ class DsMobileBookingModalComponent {
         // Set the first available date as selected and generate time slots for it
         if (firstAvailableDate) {
             this.selectedDate.set(firstAvailableDate);
-            this.generateTimeSlots(firstAvailableDate.fullDate, firstAvailableDate.date);
+            this.initializeTimeSlots(firstAvailableDate.fullDate, firstAvailableDate.id);
         }
         else {
             // Fallback to today if no available dates
-            this.generateTimeSlots(today);
+            this.initializeTimeSlots(today);
         }
     }
     /**
      * Generate time slots based on selected date and dynamic available timeslots
      */
-    generateTimeSlots(date, dateStringKey) {
+    initializeTimeSlots(date, dateStringKey) {
         if (this.availableTimeSlots && dateStringKey && this.availableTimeSlots[dateStringKey]) {
             this.timeSlots.set(this.availableTimeSlots[dateStringKey]);
             return;
         }
+        if (!this.useMockData) {
+            this.timeSlots.set([]);
+            return;
+        }
         const slots = [];
         const currentHour = new Date().getHours();
         const isToday = date.toDateString() === new Date().toDateString();
@@ -16824,7 +16837,7 @@ class DsMobileBookingModalComponent {
         this.dateOptions.set(updatedDates);
         this.selectedDate.set(selectedDate);
         // Regenerate time slots for the selected date
-        this.generateTimeSlots(selectedDate.fullDate, selectedDate.date);
+        this.initializeTimeSlots(selectedDate.fullDate, selectedDate.id);
         // Reset time selection
         this.selectedTimeSlot.set(null);
     }
@@ -16868,8 +16881,6 @@ class DsMobileBookingModalComponent {
             return;
         // Set loading state
         this.isConfirming.set(true);
-        // Simulate booking API call with 2 second delay
-        await new Promise(resolve => setTimeout(resolve, 2000));
         const result = {
             facilityId: this.facilityId,
             facilityTitle: this.facilityTitle,
@@ -16877,7 +16888,20 @@ class DsMobileBookingModalComponent {
             selectedTimeSlot: this.selectedTimeSlot(),
             timestamp: new Date()
         };
-        await this.modalController.dismiss(result, 'confirm');
+        try {
+            if (this.onSubmit) {
+                await this.onSubmit(result);
+            }
+            else {
+                // Simulate booking API call with 2 second delay
+                await new Promise(resolve => setTimeout(resolve, 2000));
+            }
+            await this.modalController.dismiss(result, 'confirm');
+        }
+        catch (e) {
+            console.error('Booking confirmation failed in onSubmit hook', e);
+            this.isConfirming.set(false);
+        }
     }
     /**
      * Handle close button click
@@ -16886,7 +16910,7 @@ class DsMobileBookingModalComponent {
         await this.modalController.dismiss(null, 'cancel');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileBookingModalComponent, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileBookingModalComponent, isStandalone: true, selector: "ds-mobile-booking-modal", inputs: { facilityId: "facilityId", facilityTitle: "facilityTitle", daysAhead: "daysAhead", selectFromCalendarText: "selectFromCalendarText", confirmBookingText: "confirmBookingText", availableDates: "availableDates", availableTimeSlots: "availableTimeSlots" }, viewQueries: [{ propertyName: "swiperComponent", first: true, predicate: DsMobileSwiperComponent, descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileBookingModalComponent, isStandalone: true, selector: "ds-mobile-booking-modal", inputs: { facilityId: "facilityId", facilityTitle: "facilityTitle", daysAhead: "daysAhead", selectFromCalendarText: "selectFromCalendarText", confirmBookingText: "confirmBookingText", availableDates: "availableDates", availableTimeSlots: "availableTimeSlots", useMockData: "useMockData", onSubmit: "onSubmit" }, viewQueries: [{ propertyName: "swiperComponent", first: true, predicate: DsMobileSwiperComponent, descendants: true }], ngImport: i0, template: `
     <ds-mobile-modal-base 
       headerTitle="Hvornår skal det være?"
       [showCloseButton]="true"
@@ -17057,6 +17081,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], availableTimeSlots: [{
                 type: Input
+            }], useMockData: [{
+                type: Input
+            }], onSubmit: [{
+                type: Input
             }], swiperComponent: [{
                 type: ViewChild,
                 args: [DsMobileSwiperComponent]
@@ -17301,6 +17329,10 @@ class DsMobileBookingModalService extends BaseModalService {
             componentProps.availableDates = options.availableDates;
         if (options.availableTimeSlots !== undefined)
             componentProps.availableTimeSlots = options.availableTimeSlots;
+        if (options.useMockData !== undefined)
+            componentProps.useMockData = options.useMockData;
+        if (options.onSubmit !== undefined)
+            componentProps.onSubmit = options.onSubmit;
         if (options.labels?.selectFromCalendar)
             componentProps.selectFromCalendarText = options.labels.selectFromCalendar;
         if (options.labels?.confirmBooking)
@@ -19167,7 +19199,8 @@ class DsMobileFacilityDetailModalComponent {
             facilityTitle: this.facilityData.facilityTitle,
             facilityThumbnail: this.facilityData.heroImage,
             availableDates: this.facilityData.availableDates,
-            availableTimeSlots: this.facilityData.availableTimeSlots
+            availableTimeSlots: this.facilityData.availableTimeSlots,
+            useMockData: this.facilityData.useMockData
         });
     }
     /**
@@ -25059,7 +25092,8 @@ class MobileBookingPageComponent {
                 availabilityStatus: facility.availabilityStatus,
                 statusLabel: facility.statusLabel,
                 bookingDate: facility.bookingDate,
-                bookingTime: facility.bookingTime
+                bookingTime: facility.bookingTime,
+                useMockData: true // Aktivér mock data til lokal test
             });
         }
     }