Fluent Booking Meeting Duration and Selected Time and Date

fb_to_ff_duration_timeDate.js

let pickedSlot = '';        
let pickedDurationNum = ''; 

function getDurationNumber() {
  const sel = document.querySelector('.fcal_multi_duration .fcal_duration.is_selected');
  if (sel) {
    const txt = sel.textContent.replace(/\s+/g, ' ').trim(); // "45 Minutes"
    const m = txt.match(/\d+/);
    if (m) return m[0];
  }

  const hidden = document.querySelector('input[name="fcal_booking"]');
  if (hidden && hidden.value) {
    try {
      const obj = JSON.parse(hidden.value);
      if (obj && obj.duration) return String(obj.duration).trim();
    } catch (_) {}
  }
  return '';
}

function focusFirstInVisibleStep() {
  const step = document.querySelector('.fluentform-step[aria-hidden="false"]');
  if (!step) return;
  const first = step.querySelector('input, select, textarea, button, [tabindex]:not([tabindex="-1"])');
  if (first) first.focus();
}
document.addEventListener('mousedown', function (e) {
  const navBtn = e.target.closest('.ff-btn-next, .ff-btn-prev');
  if (navBtn) navBtn.blur();
}, true);
document.addEventListener('keydown', function (e) {
  if (e.key !== 'Enter' && e.key !== ' ') return;
  const navBtn = e.target.closest('.ff-btn-next, .ff-btn-prev');
  if (navBtn) navBtn.blur();
}, true);
document.addEventListener('click', function (e) {
  const navBtn = e.target.closest('.ff-btn-next, .ff-btn-prev');
  if (navBtn) setTimeout(focusFirstInVisibleStep, 120);
});

document.addEventListener('click', function (e) {
  const spot = e.target.closest('.fcal_spot');        // time slot button
  const dur  = e.target.closest('.fcal_duration');    // duration pill
  const next = e.target.closest('.ff-btn-next');      // Next button

  if (spot) {
    setTimeout(() => {
      const el = document.querySelector('.slot_time_range span');
      if (el) pickedSlot = el.textContent.replace(/\s+/g, ' ').trim(); // clean spaces
      pickedDurationNum = getDurationNumber();
    }, 0);
  }

  if (dur) {
    setTimeout(() => {
      pickedDurationNum = getDurationNumber();
    }, 0);
  }

  if (next) {
    setTimeout(() => {
      // Date and Time Field
      const dateInput = document.querySelector('.mydate');
      if (dateInput && pickedSlot) {
        dateInput.value = pickedSlot;
        dateInput.dispatchEvent(new Event('input',  { bubbles: true }));
        dateInput.dispatchEvent(new Event('change', { bubbles: true }));
      }

    //Meeting Duratoin Field
      const durInput = document.querySelector('.fbduration');
      if (durInput) {
        if (!pickedDurationNum) pickedDurationNum = getDurationNumber();
        if (pickedDurationNum) {
          durInput.value = pickedDurationNum; // e.g. "45"
          durInput.dispatchEvent(new Event('input',  { bubbles: true }));
          durInput.dispatchEvent(new Event('change', { bubbles: true }));
        }
      }
    }, 100); 
  }
});