Checkout Delivery/Pickup Time.

Ask the community
,
1

Hello,

I have used this tutorial to build a date selector.
https://www.wix.com/velo/example/delivery-time

Everything is working well except I want to enable Weekends but mainly just Saturdays as they are closed on Sunday’s.

I have tried changing the code to enable weekends but no luck. I am using moment.js but not sure if that is the issue.

I feel like it is in here somewhere;


import wixWindow from 'wix-window';
import wixData from 'wix-data';
import moment from 'moment';

const CONSTANTS = {
 SLOTS: [],
 MAX: 4,
 UNIT_DELTA: 'days',
 WEEKDAY_DELTA: 2,
 WEEKEND_DELTA: 4,
 THURSDAY: 4
}

$w.onReady(function () {
 const recievedData = wixWindow.lightbox.getContext();

    getSlots();
    skipTheWeekend();
    setDisabledDates();
    loadCustomerChoice(recievedData.cartId);

    $w('#deliveryDatePicker').onChange((event) => {
        setAvailableSlots($w('#deliveryDatePicker').value);
    });

    $w('#close').onClick((event) => {
        setDeliveryTime(recievedData.cartId, $w('#deliveryDatePicker').value, getSelectedDeliverySlot())

        setTimeout(function () {
            closeLightbox();
        }, 1000);
    });
});

function loadCustomerChoice(cartId) {
    wixData.query('deliveries')
        .eq('cartId', cartId)
        .find()
        .then((results) => {
 if (results.items.length > 0) {
                $w('#deliveryDatePicker').value = new Date(results.items[0].date);
                $w('#timeSlotDropdown').value = results.items[0].deliveryTime;
            } else {
                loadDeliverySlots(CONSTANTS.SLOTS);
            }
        })
        .catch((err) => {
            console.error('loadCustomerChoice error', err);
        });
}

function skipTheWeekend() {
 let day = new Date().getDay() === CONSTANTS.THURSDAY ? moment().add(CONSTANTS.WEEKEND_DELTA, CONSTANTS.UNIT_DELTA) : moment().add(CONSTANTS.WEEKDAY_DELTA, CONSTANTS.UNIT_DELTA);
    console.log("Day:", day);
    $w('#deliveryDatePicker').minDate = day._d;
    $w('#deliveryDatePicker').value = day._d;
}

function setDisabledDates() {
    wixData.query('deliveries-disableddates')
        .find()
        .then((results) => {
 if (results.items.length > 0) {
 let items = results.items;
 let dates = [];

                items.forEach(item => {
                    dates.push(item.date);
                });
                $w('#deliveryDatePicker').disabledDates = dates;
            }
        })
        .catch((err) => {
            console.error('getDisabledDates error', err);
        });
}

function getSlots() {
    wixData.query('deliveries-slots')
        .find()
        .then((results) => {
 if (results.items.length > 0) {
 let items = results.items;
                items.forEach(item => {
 CONSTANTS.SLOTS.push({ label: item.slots, value: item.slots });
                });
                loadDeliverySlots(CONSTANTS.SLOTS);
            }
        })
        .catch((err) => {
            console.error('getSlots error', err);
        });
}

function loadDeliverySlots(availableSlots) {
    $w('#timeSlotDropdown').options = availableSlots;
    $w('#timeSlotDropdown').selectedIndex = 0;
}

function setAvailableSlots(deliveryDay) {
 let slots = [];

    wixData.query('deliveries-availability')
        .eq('deliveryDate', deliveryDay.toDateString())
        .find()
        .then((results) => {
 if (results.items.length > 0) {
 let deliverySlots = results.items;

 // find full slots
 let fullSlots = [];
                deliverySlots.forEach(element => {
 if (element.counter >= CONSTANTS.MAX) {
                        fullSlots.push(element.deliveryTime);

                    }
                });

 // remove full slots from the slots list
 if (fullSlots.length > 0) {
                    fullSlots.forEach(element => {
 CONSTANTS.SLOTS.forEach(item => {
 if (element !== item.label) {
                                slots.push(item);
                            }
                        });
                    });
                    loadDeliverySlots(slots);
                } else {
                    loadDeliverySlots(CONSTANTS.SLOTS)
                }
            } else {
                loadDeliverySlots(CONSTANTS.SLOTS);
            }
        })
        .catch((err) => {
            console.error('setAvailableSlots error', err);
        });
}

function setDeliveryTime(cartId, date, time) {
    wixData.query('deliveries')
        .eq('cartId', cartId)
        .find()
        .then((results) => {
 if (results.items.length > 0) {
                deliveryUpdate(results.items[0]._id, date, time)
            } else {
                deliveryTimeInsert(cartId, date, time)
            }
        })
        .catch((err) => {
            console.error('setDelivery error', err);
        });
}

function deliveryUpdate(itemId, date, time) {
    wixData.get('deliveries', itemId)
        .then((item) => {
            item.date = date.toDateString();
            item.deliveryTime = time;
            item.orderNumber = '';

            wixData.update('deliveries', item);
        })
        .catch((err) => {
            console.error('deliveryUpdate error', err);
        });
}

function deliveryTimeInsert(cartId, date, time) {
 let toInsert = {
 'cartId': cartId,
 'date': new Date(date).toDateString(),
 'deliveryTime': time,
 'orderNumber': ''
    };

    wixData.insert('deliveries', toInsert)
        .then((result) => {
            console.log('deliveryInsert result', result);
        })
        .catch((err) => {
            console.error('deliveryInsert error', err);
        });
}

function closeLightbox() {
 let data = {
        deliveryDate: $w('#deliveryDatePicker').value,
        deliveryTime: $w('#timeSlotDropdown').value
    }
    wixWindow.lightbox.close(data);
}

function getSelectedDeliverySlot() {
 return $w('#timeSlotDropdown').value;
}

Sorry for the long Code snippet, any help would be greatly appreciated.
Also, can someone explain to me how the DeliveryAvailability database works or the Constant Slots?

Thank you so very much and stay safe!