Quick Booking Form delay bug. Need Help.

Ask the community
, ,
1

Hi. I created a Quick Booking form like the one in this example: https://www.wix.com/corvid/example/quick-book-and-pending-appointments

But, when I access the page, there’s a bit of delay in getting the slot information to fill the dropdowns. Customers are having difficulty specially on mobile. When I try to choose the day, it will clear off the day that I chose, then I have to choose it again, then the available times will take long to show up.

I don’t know why this is happening, but it prevents the customers from having a smooth “checkout” experience and I loose potential customers.

Any ideas??

I published a copy of the website so you could test and see it, specially mobile: https://buenok.wixsite.com/website-1/agendar

Here’s the page code too:

import wixBookings from 'wix-bookings';
import wixData from 'wix-data';
import wixWindow from 'wix-window';
import wixLocation from 'wix-location'; 

$w.onReady(() => {
    waitForLoading();
});

export function buttonPagSeguroNew_click(event) {
    wixLocation.to("http://pag.ae/7VpqYTEuq");
    $w('#preloader').show();
    waitForLoading();
}

function waitForLoading() {
    setTimeout(() => {
        $w('#preloader').hide('FadeOut');
    }, 28000);
}

function showAulasReg() {
    $w('#slideshow').changeSlide(0);
    $w('#marque').enable();
    $w('#agende').disable();
    $w('#pague').disable();
    $w('#confirme').disable();
    $w('#AulasRegLine').show();
    $w('#AulaIntroLine').hide();
    $w('#PagaLine').hide();
    $w('#ConfirmLine').hide();

    $w('#aulasReg').enable();
    $w('#aulaIntro').disable();
    $w('#pagamento').disable();
    $w('#confirm').disable();
}

function showAulaIntro() {
    $w('#slideshow').changeSlide(1);
    $w('#marque').disable();
    $w('#agende').enable();
    $w('#pague').disable();
    $w('#confirme').disable();
    $w('#AulasRegLine').hide();
    $w('#AulaIntroLine').show();
    $w('#PagaLine').hide();
    $w('#ConfirmLine').hide();

    $w('#aulasReg').disable();
    $w('#aulaIntro').enable();
    $w('#pagamento').disable();
    $w('#confirm').disable();
}

function showPagamento() {
    $w('#slideshow').changeSlide(2);
    $w('#marque').disable();
    $w('#agende').disable();
    $w('#pague').enable();
    $w('#confirme').disable();
    $w('#AulasRegLine').hide();
    $w('#AulaIntroLine').hide();
    $w('#PagaLine').show();
    $w('#ConfirmLine').hide();

    $w('#aulasReg').disable();
    $w('#aulaIntro').disable();
    $w('#pagamento').enable();
    $w('#confirm').disable();
}

export function aulasReg_click(event) {
    showAulasReg();
}

export function marque_click(event) {
 if(wixWindow.formFactor === "Mobile" || wixWindow.formFactor === "Tablet"){
    showAulasReg();
    }
}

export function aulaIntro_click(event) {
    showAulaIntro();
}

export function agende_click(event) {
 if(wixWindow.formFactor === "Mobile" || wixWindow.formFactor === "Tablet"){
    showAulaIntro();
    }
}

export function pagamento_click(event) {
    showPagamento();  
}

export function pague_click(event) {
 if(wixWindow.formFactor === "Mobile" || wixWindow.formFactor === "Tablet"){
    showPagamento();
    }
}

//mobile code

$w.onReady(function () {
 if(wixWindow.formFactor === "Mobile" || wixWindow.formFactor === "Tablet" &&
    wixWindow.rendering.renderCycle === 1){
 // code that will only run on mobile
  $w('#marque').show();
  $w('#agende').show();
  $w('#pague').show();
  $w('#confirme').show();

}

});

//desktop code

//Second Booking - AulaIntrodutoria

const serviceId = '7ac4b7cc-a26a-4a83-b4cb-6710de094dbb';
let slotsMap = {};

$w.onReady(function () {
 const today = new Date();
    today.setDate(today.getDate() + 2);
 const daysOfTheWeek = ["Dom","Seg","Ter","Qua","Qui","Sex", "Sáb"]
    $w('#dayPicker').options = getWeekDays(today).map(day => {
 return{
            label: `${daysOfTheWeek[day.date.getDay()]} ${day.date.toLocaleDateString("pt-BR")}`,
            value: day.date.toISOString()
            }
    });
    $w('#dayPicker').onChange((event, $w) => {
 const selectedDate = new Date(event.target.value);
        findAvailableSlots(selectedDate);
    });
     $w('#buttonSubmit').onClick(() => validadeAndSubmitForm());
});

async function findAvailableSlots(dateString) {
    slotsMap = {};
 const startDateTime = getMidnight(dateString);
 const endDateTime = getNextMidnight (dateString);
 const options = {
        startDateTime,
        endDateTime
    };
 const availableSlots = await getNonPendingAvailableSlots(serviceId, options);

 if (availableSlots.length === 0) {
        $w("#slotPicker").options = []
        $w("#slotPicker").placeholder = "Indisponível"
        $w("#slotPicker").selectedIndex = undefined;
        $w("#slotPicker").disable();    
    }
 else  {
        $w("#slotPicker").options = availableSlots.map(slot => {
            slotsMap[slot._id] = slot;
 let startTime = slot.startDateTime;
 let timeString = getTimeOfDay(startTime);
 return {
                label: timeString,
                value: slot._id
            }
        });
        $w("#slotPicker").placeholder = "Horários disponíveis";
        $w("#slotPicker").selectedIndex = undefined;
        $w("#slotPicker").enable();
    }
}

async function validadeAndSubmitForm() {
    $w("#errorMessage").hide();
    $w("#buttonSubmit").disable();

 const formFields = ["inputNome", "inputSobrenome", "inputDN", "inputEmail", "inputWhatsApp", "dayPicker", "slotPicker"];

 if (formFields.every(input => $w(`#${input}`).valid)) {
 const slot = slotsMap[$w("#slotPicker").value];
 const newRequest = {
        nome: $w("#inputNome").value,
        sobrenome: $w('#inputSobrenome').value,
        dataNascimento: $w('#inputDN').value,
        email: $w('#inputEmail').value,
        whatsapp: $w('#inputWhatsApp').value,
        requestedSlot: slot,
        status: "PENDING"
    };
 await wixData.insert("pendingAppointments", newRequest);
    $w('#AnchorTop').scrollTo();
    showPagamento()
    }
 else {
        $w('#errorMessage').show();
        $w('#buttonSubmit').enable();
    }
}

async function getNonPendingAvailableSlots (requestedServiceId, options = {}) {
 const pending = (await getPendingAppointments()).map(appointment => appointment.requestedSlot._id);
 let availableSlots = (await wixBookings.getServiceAvailability(requestedServiceId, options)).slots;
    availableSlots = availableSlots.filter(slot => !pending.includes(slot._id));
 return availableSlots;
}

async function getPendingAppointments (){
 return (await wixData.query("pendingAppointments").find()).items.filter(item => item.status === "PENDING");
}

function getMidnight (date) {
 let midnight = new Date(date);
    midnight.setHours(0, 0, 0, 0);
 return midnight;
}

function getNextMidnight (date) {
 let midnight = new Date(date);
    midnight.setHours(24, 0, 0, 0);
 return midnight;
}

function getWeekDays (startDate) {
 let weekDays = [];
 let current = getMidnight(startDate);
 
 for (let i = 0; i < 7; i++) {
        weekDays.push({
            _id: "day" + i,
            date: current
        });
        current = getNextMidnight(current)
    }
 return weekDays;
}

function getTimeOfDay(date) {
 return date.toLocaleTimeString("pt-BR",{ hour: "2-digit", minute: "2-digit"}).toLowerCase();
}

//First Booking - Acompanhamento

const serviceID = '62728e97-66ee-4643-acd3-cf00ecfbf8db';
let SlotsMap = {};

$w.onReady(function () {
 const today = new Date();
 const daysOfTheWeek = ["Domingo","Segunda","Terça","Quarta","Quinta","Sexta", "Sábado"]
    $w('#pickDay').options = GetWeekDays(today).map(day => {
 return{
            label: `${daysOfTheWeek[day.date.getDay()]}`,
            value: day.date.toISOString()
            }
    });
    $w('#pickDay').onChange((event, $w) => {
 const selectedDate = new Date(event.target.value);
        FindAvailableSlots(selectedDate);
    });
     $w('#buttonSubmit1').onClick(() => ValidadeAndSubmitForm());
});

async function FindAvailableSlots(dateString) {
    SlotsMap = {};
 const startDateTime = GetMidnight(dateString);
 const endDateTime = GetNextMidnight (dateString);
 const options = {
        startDateTime,
        endDateTime
    };
 const availableSlots = await GetNonPendingAvailableSlots(serviceID, options);

 if (availableSlots.length === 0) {
        $w("#pickTime").options = []
        $w("#pickTime").placeholder = "Indisponível"
        $w("#pickTime").selectedIndex = undefined;
        $w("#pickTime").disable();  
    }
 else  {
        $w("#pickTime").options = availableSlots.map(slot => {
            SlotsMap[slot._id] = slot;
 let startTime = slot.startDateTime;
 let timeString = GetTimeOfDay(startTime);
 return {
                label: timeString,
                value: slot._id
            }
        });
        $w("#pickTime").placeholder = "Horários disponíveis";
        $w("#pickTime").selectedIndex = undefined;
        $w("#pickTime").enable();
    }
}

async function ValidadeAndSubmitForm() {
    $w("#error").hide();
    $w("#buttonSubmit1").disable();

 const formFields = ["inputNome", "inputSobrenome", "inputDN", "inputEmail", "inputWhatsApp", "pickDay", "pickTime"];

 if (formFields.every(input => $w(`#${input}`).valid)) {
 const slot = SlotsMap[$w("#pickTime").value];
 const newRequest = {
        nome: $w("#inputNome").value,
        sobrenome: $w('#inputSobrenome').value,
        dataNascimento: $w('#inputDN').value,
        email: $w('#inputEmail').value,
        whatsapp: $w('#inputWhatsApp').value,
        requestedSlot: slot,
        status: "PENDING"
    };
 await wixData.insert("pendingClasses", newRequest);
    $w('#AnchorTop').scrollTo();
    showAulaIntro()
    }
 else {
        $w('#error').show();
        $w('#buttonSubmit1').enable();
    }
}

async function GetNonPendingAvailableSlots (requestedServiceId, options = {}) {
 const pending = (await GetPendingAppointments()).map(appointment => appointment.requestedSlot._id);
 let availableSlots = (await wixBookings.getServiceAvailability(requestedServiceId, options)).slots;
    availableSlots = availableSlots.filter(slot => !pending.includes(slot._id));
 return availableSlots;
}

async function GetPendingAppointments (){
 return (await wixData.query("pendingClasses").find()).items.filter(item => item.status === "PENDING");
}

function GetMidnight (date) {
 let midnight = new Date(date);
    midnight.setHours(0, 0, 0, 0);
 return midnight;
}

function GetNextMidnight (date) {
 let midnight = new Date(date);
    midnight.setHours(24, 0, 0, 0);
 return midnight;
}

function GetWeekDays (startDate) {
 let weekDays = [];
 let current = GetMidnight(startDate);

 for (let i = 0; i < 7; i++) {
        weekDays.push({
            _id: "day" + i,
            date: current
        });
        current = GetNextMidnight(current)
    }
 return weekDays;
}

function GetTimeOfDay(date) {
 return date.toLocaleTimeString("pt-BR",{ hour: "2-digit", minute: "2-digit"}).toLowerCase();
}
2

First thing is that renderCylcle is no longer used, it has been deprecated.

wixWindow.rendering.renderCycle === 1

renderCycle
Deprecated: Gets the current cycle in the rendering process.
Description
Deprecation note: The renderCycle property no longer works as expected. It will always return 1.
Rendering - Velo API Reference - Wix.com
Velo: About the Page Rendering Process | Help Center | Wix.com

3

Ok. Took that out and published. Waiting for further insight…

4

Could anyone could look into this? I really need to get this resolved asap. :confused: If anyone is available please.