{"version":3,"file":"CalendarSlotPickerModal-w_fS9yaG.js","sources":["../../../app/javascript/shared/components/calendar/CalendarAvailableSlotButton.vue","../../../app/javascript/shared/components/calendar/CalendarSlotPickerModal.vue"],"sourcesContent":["<template>\n  <button\n    v-bind=\"$attrs\"\n    class=\"tw-inline-flex tw-w-full tw-select-none tw-items-center tw-justify-center tw-rounded-md tw-border tw-py-2 tw-transition-colors disabled:tw-cursor-not-allowed\"\n    :class=\"[\n      isSelected\n        ? 'tw-border-primary-500 tw-bg-primary-500 tw-text-white hover:tw-border-primary-400 hover:tw-bg-primary-400'\n        : 'tw-border-primary-200 tw-text-primary-500 hover:tw-border-primary-50 hover:tw-bg-primary-50',\n    ]\"\n    :test_id=\"`slot-${startsAt}`\"\n  >\n    <time :datetime=\"ISOString\">\n      {{ formatDate(startsAt, 'hh:mm a') }}\n    </time>\n    <CheckIcon v-show=\"isSelected\" class=\"tw-ml-1 tw-h-2.5 tw-w-2.5\" />\n  </button>\n</template>\n\n<script setup>\nimport CheckIcon from '@/assets/images/icons/check.svg'\nimport { DateTime } from 'luxon'\nimport { computed } from 'vue'\nimport { useDateManager } from '@/shared/composables/useDateManager.js'\n\nconst props = defineProps({\n  isSelected: {\n    type: Boolean,\n    required: true,\n  },\n  startsAt: {\n    type: Number,\n    required: true,\n  },\n})\n\nconst { formatDate } = useDateManager()\n\nconst ISOString = computed(() => {\n  return DateTime.fromSeconds(props.startsAt).toISO()\n})\n</script>\n","<template>\n  <FormModal\n    header=\"Select available time slot\"\n    :name=\"name\"\n    width-class=\"tw-max-w-[850px]\"\n  >\n    <FormModalBody\n      padding-class=\"tw-p-4\"\n      footer-button-text=\"Save\"\n      @submit=\"handleSubmit\"\n    >\n      <div class=\"tw-space-y-4\">\n        <div class=\"tw-text-center tw-text-sm tw-text-neutral-400\">\n          Calendar shows dates in {{ timezone }} timezone.\n        </div>\n        <div class=\"tw-flex tw-items-start tw-justify-between\">\n          <CalendarPaginationButton\n            @click=\"decrementWeek\"\n            :disabled=\"!canWeekBeDecremented || isLoadingAvailableSlots\"\n            class=\"tw-mt-3\"\n            direction=\"left\"\n          />\n\n          <div class=\"tw-relative tw-grow\">\n            <transition name=\"fade\">\n              <div\n                v-if=\"isLoadingAvailableSlots\"\n                class=\"tw-absolute tw-grid tw-h-full tw-w-full tw-place-items-center tw-rounded-lg tw-bg-black/10\"\n              >\n                <LoadingCircle size=\"32\" />\n              </div>\n            </transition>\n            <div\n              class=\"tw-grid tw-grid-cols-2 tw-divide-x tw-divide-neutral-200 tw-text-sm sm:tw-grid-cols-4 md:tw-grid-cols-7\"\n            >\n              <div\n                v-for=\"day in weekDays\"\n                :key=\"day.formattedDate\"\n                class=\"tw-px-2 tw-pb-12 tw-pt-2 tw-text-center\"\n              >\n                <div class=\"tw-font-semibold\">\n                  {{ formatDate(day.date, 'cccc') }}\n                </div>\n                <div>\n                  {{ formatDate(day.date, 'dd MMM.') }}\n                </div>\n                <div\n                  v-if=\"availableSlots[day.formattedDate]\"\n                  class=\"tw-mt-4 tw-space-y-1.5\"\n                >\n                  <CalendarAvailableSlotButton\n                    v-for=\"slot in availableSlots[day.formattedDate]\"\n                    :key=\"slot.startsAt\"\n                    :starts-at=\"slot.startsAt\"\n                    :is-selected=\"slot.startsAt === modelValue\"\n                    :disabled=\"isLoadingAvailableSlots\"\n                    @click=\"emit('update:modelValue', slot.startsAt)\"\n                  />\n                </div>\n                <div v-else class=\"tw-mt-6 tw-select-none tw-text-neutral-200\">\n                  -\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <CalendarPaginationButton\n            @click=\"incrementWeek\"\n            class=\"tw-mt-3\"\n            :disabled=\"!canWeekBeIncremented || isLoadingAvailableSlots\"\n            direction=\"right\"\n            test_id=\"next-week-button\"\n          />\n        </div>\n        <div\n          v-if=\"availableSlotsRequestStatus === RequestStatus.ERROR\"\n          class=\"tw-text-center tw-text-sm tw-text-error-500\"\n        >\n          Something went wrong. Please try again.\n        </div>\n      </div>\n    </FormModalBody>\n  </FormModal>\n</template>\n\n<script setup>\nimport LoadingCircle from '@/shared/components/LoadingCircle.vue'\nimport { RequestStatus } from '@/shared/utils/requestStatus.js'\nimport CalendarPaginationButton from '@/shared/components/calendar/CalendarPaginationButton.vue'\nimport CalendarAvailableSlotButton from '@/shared/components/calendar/CalendarAvailableSlotButton.vue'\nimport FormModal from '@/shared/components/modals/FormModal/FormModal.vue'\nimport FormModalBody from '@/shared/components/modals/FormModal/FormModalBody.vue'\nimport { DateTime } from 'luxon'\nimport camelcaseKeys from 'camelcase-keys'\nimport axios from 'axios'\nimport { useScreenWidth } from '@/shared/composables/useScreenWidth.js'\nimport { computed, onBeforeMount, ref, watch } from 'vue'\nimport { usePage } from '@inertiajs/vue3'\nimport { useDateManager } from '@/shared/composables/useDateManager.js'\nimport { useModals } from '@/shared/composables/useModals.js'\nimport { useCurrentUser } from '@/shared/composables/useCurrentUser.js'\n\n// Each session can be booked 2 days before the session starts, so we have to make sure that we start fetching available slots on correct date\nconst SHIFT_CALENDAR_BY_DAYS = 2\nconst AVAILABLE_SLOTS_KEY_DATE_FORMAT = 'dd-MM-yyyy'\n\nconst emit = defineEmits(['update:modelValue', 'submit'])\n\nconst props = defineProps({\n  name: {\n    type: String,\n    required: true,\n  },\n  selectedSessionDuration: {\n    type: Number,\n    required: true,\n  },\n  modelValue: {\n    type: Number,\n    default: 0,\n  },\n})\n\nconst { screenWidth, tailwindScreens } = useScreenWidth()\nconst page = usePage()\nconst { formatDate } = useDateManager()\nconst { closeModal } = useModals()\nconst { timezone } = useCurrentUser()\n\nconst firstDayInRange = ref(undefined)\nconst lastDayInRange = ref(undefined)\nconst availableSlots = ref({})\nconst availableSlotsCount = ref(0)\nconst availableSlotsRequestStatus = ref(RequestStatus.IDLE)\n\nconst canWeekBeDecremented = computed(() => {\n  const subtractedDate = firstDayInRange.value.minus({\n    days: SHIFT_CALENDAR_BY_DAYS,\n  })\n  return !DateTime.now().hasSame(subtractedDate, 'day')\n})\nconst canWeekBeIncremented = computed(() => {\n  return lastDayInRange.value.minus({ months: 2 }) < DateTime.now()\n})\nconst weekDays = computed(() => {\n  return Array.from({ length: daysToDisplay.value }, (_, index) => {\n    const date = firstDayInRange.value.plus({ days: index })\n    return {\n      date,\n      formattedDate: date.toFormat(AVAILABLE_SLOTS_KEY_DATE_FORMAT),\n    }\n  })\n})\nconst isLoadingAvailableSlots = computed(() => {\n  return availableSlotsRequestStatus.value === RequestStatus.LOADING\n})\nconst daysToDisplay = computed(() => {\n  if (screenWidth.value < tailwindScreens.sm) {\n    return 2\n  }\n  if (screenWidth.value < tailwindScreens.md) {\n    return 4\n  }\n  return 7\n})\n\nwatch(\n  () => props.selectedSessionDuration,\n  () => {\n    fetchAvailableSlots({\n      from: firstDayInRange.value,\n      to: lastDayInRange.value,\n    })\n  },\n)\n// Each time user changes the screen size, we want to reset the calendar and fetch slots for the new range\nwatch(screenWidth, () => {\n  initCalendar()\n})\n\nconst initDaysInRange = () => {\n  firstDayInRange.value = DateTime.now()\n    .startOf('day')\n    .plus({ days: SHIFT_CALENDAR_BY_DAYS })\n  lastDayInRange.value = DateTime.now()\n    .endOf('day')\n    .plus({ days: daysToDisplay.value - 1 + SHIFT_CALENDAR_BY_DAYS })\n}\n\nconst fetchAvailableSlots = async ({ from, to }) => {\n  availableSlotsRequestStatus.value = RequestStatus.LOADING\n  try {\n    // Checking whether NOW + SHIFT_CALENDAR_BY_DAYS is the same day what from\n    // If so, it means that we are on the first page, and we should take into account current time (hours, minutes, seconds)\n    // If not, it means that we are in the future, and we start from 00:00:00\n    const twoDaysFromNow = DateTime.now().plus({\n      days: SHIFT_CALENDAR_BY_DAYS,\n    })\n    const fromTimestamp = twoDaysFromNow.hasSame(from, 'day')\n      ? twoDaysFromNow.toSeconds()\n      : from.toSeconds()\n    const toTimestamp = to.toSeconds()\n    const { data } = await axios.get(\n      `/mentors/${page.props.mentor.id}/availability`,\n      {\n        params: {\n          from: Math.trunc(fromTimestamp),\n          to: Math.trunc(toTimestamp),\n          slot: props.selectedSessionDuration,\n        },\n      },\n    )\n\n    availableSlotsCount.value = data.length\n    availableSlots.value = camelcaseKeys(data).reduce((accumulator, date) => {\n      const formattedDay = formatDate(\n        date.startsAt,\n        AVAILABLE_SLOTS_KEY_DATE_FORMAT,\n      )\n      if (accumulator[formattedDay]) {\n        accumulator[formattedDay] = [...accumulator[formattedDay], date]\n      } else {\n        accumulator[formattedDay] = [date]\n      }\n      return accumulator\n    }, {})\n\n    firstDayInRange.value = from\n    lastDayInRange.value = to\n    availableSlotsRequestStatus.value = RequestStatus.SUCCESS\n  } catch (error) {\n    console.log(error)\n    availableSlotsRequestStatus.value = RequestStatus.ERROR\n  }\n}\nconst initCalendar = () => {\n  initDaysInRange()\n  fetchAvailableSlots({\n    from: firstDayInRange.value,\n    to: lastDayInRange.value,\n  })\n}\n\nconst incrementWeek = () => {\n  fetchAvailableSlots({\n    from: firstDayInRange.value.plus({ days: daysToDisplay.value }),\n    to: lastDayInRange.value.plus({ days: daysToDisplay.value }),\n  })\n}\n\nconst decrementWeek = () => {\n  fetchAvailableSlots({\n    from: firstDayInRange.value.minus({ days: daysToDisplay.value }),\n    to: lastDayInRange.value.minus({ days: daysToDisplay.value }),\n  })\n}\n\nconst handleSubmit = () => {\n  closeModal(props.name)\n  emit('submit')\n}\n\nonBeforeMount(() => {\n  initCalendar()\n})\n</script>\n"],"names":["props","__props","formatDate","useDateManager","ISOString","computed","DateTime","SHIFT_CALENDAR_BY_DAYS","AVAILABLE_SLOTS_KEY_DATE_FORMAT","emit","__emit","screenWidth","tailwindScreens","useScreenWidth","page","usePage","closeModal","useModals","timezone","useCurrentUser","firstDayInRange","ref","lastDayInRange","availableSlots","availableSlotsCount","availableSlotsRequestStatus","RequestStatus","canWeekBeDecremented","subtractedDate","canWeekBeIncremented","weekDays","daysToDisplay","_","index","date","isLoadingAvailableSlots","watch","fetchAvailableSlots","initCalendar","initDaysInRange","from","to","twoDaysFromNow","fromTimestamp","toTimestamp","data","axios","camelcaseKeys","accumulator","formattedDay","error","incrementWeek","decrementWeek","handleSubmit","onBeforeMount"],"mappings":"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"}