{"version":3,"file":"AppointmentBooked.vue_vue_type_script_setup_true_lang-aadfcc20.js","sources":["../../src/views/appointments/components/appointment-booked/AddToCalendarButton.vue","../../src/views/appointments/components/appointment-booked/AppointmentBooked.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { Env } from '@/env'\nimport { useI18n } from '@/plugins/i18n'\nimport { useConfigurationStore } from '@/stores/useConfigurationStore'\nimport { computed } from 'vue'\n\nconst props = defineProps<{\n  appointmentId: string\n}>()\n\nconst { t } = useI18n()\nconst { organization } = useConfigurationStore()\n\nconst link = computed(() => {\n  return `${Env.VITE_VUE_APP_API_BASE}/v0/reservations/appointments/public/calendar/${props.appointmentId}/${organization}`\n})\n</script>\n\n<template>\n  <a :href=\"link\" class=\"text-primary\" target=\"_blank\" data-testid=\"add-to-calendar-link\">\n    {{ t('pages.appointments.form.booked.add_to_calendar') }}\n  </a>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { ThIcon } from '@/components/ui'\nimport { useI18n } from '@/plugins/i18n'\nimport type { Appointment } from '@/types/Appointment'\nimport {\n  isUserInDifferentTimezone,\n  formatAppointmentTimeRange,\n  formatAppointmentDate,\n  getStaffName,\n  getLineItemName\n} from '@/views/appointments/utils'\nimport { useConfigurationStore } from '@/stores/useConfigurationStore'\nimport MerchantTimezoneInfoText from '../MerchantTimezoneInfoText.vue'\nimport AddToCalendarButton from './AddToCalendarButton.vue'\nimport { getBranchAddress } from '@/views/appointments/components/choose-branch/utils'\n\nconst props = defineProps<{\n  appointment: Appointment\n  isRescheduled?: boolean\n}>()\n\nconst { t } = useI18n()\n\nconst store = useConfigurationStore()\n\nconst branch = computed(() => props.appointment.branch)\nconst branchAddress = computed(() => {\n  return branch.value ? getBranchAddress(branch.value) : null\n})\n\nconst merchantTimezone = computed(() => store.general.default_timezone)\n\nconst dateFormatted = computed(() =>\n  formatAppointmentDate(props.appointment.start, merchantTimezone.value)\n)\nconst appointmentTimeRangeFormatted = computed(() =>\n  formatAppointmentTimeRange(props.appointment, merchantTimezone.value)\n)\n</script>\n\n<template>\n  <div\n    class=\"max-w-[12.5rem] sm:max-w-[424px] mx-auto text-center\"\n    data-testid=\"appointment-summary\"\n  >\n    <header class=\"mb-4 sm:mb-8\">\n      <ThIcon class=\"w-10 mb-3 text-success\" is=\"CircleCheck\" />\n\n      <h3 class=\"text-base text-dark font-semibold\">\n        {{\n          t(\n            isRescheduled\n              ? 'pages.appointments.form.booked.rescheduled_title'\n              : 'pages.appointments.form.booked.title'\n          )\n        }}\n      </h3>\n\n      <p class=\"text-sm text-gray-800\">\n        {{ t('pages.appointments.form.confirmation_email_sent') }}\n      </p>\n    </header>\n\n    <section\n      class=\"sm:py-8 justify-center sm:border-y border-gray-400 flex flex-col sm:flex-row -mx-3\"\n    >\n      <div class=\"sm:w-1/2 px-3 max-sm:py-4 max-sm:border-y border-gray-400\">\n        <ThIcon class=\"hidden sm:inline-block text-gray-700 mb-2 w-8\" is=\"Calendar\" />\n\n        <div class=\"text-base text-dark font-semibold\">\n          <p v-if=\"isRescheduled\" class=\"text-success mb-1 text-tiny uppercase\">\n            {{ t('pages.appointments.form.booked.new_time') }}\n          </p>\n\n          <p class=\"mb-1\" data-testid=\"appointment-date\">{{ dateFormatted }}</p>\n\n          <p class=\"mb-1\" data-testid=\"appointment-time\">\n            {{ appointmentTimeRangeFormatted }}\n          </p>\n\n          <p\n            v-if=\"isUserInDifferentTimezone(merchantTimezone)\"\n            class=\"mb-1 leading-3\"\n            data-testid=\"timezone-hint\"\n          >\n            <MerchantTimezoneInfoText />\n          </p>\n        </div>\n\n        <AddToCalendarButton :appointment-id=\"appointment.id\" />\n      </div>\n\n      <div v-if=\"branch\" class=\"max-sm:py-4 sm:w-1/2 px-3\">\n        <ThIcon class=\"hidden sm:inline-block text-gray-700 mb-2 w-8\" is=\"Pin\" />\n\n        <div class=\"text-base text-dark font-semibold\">\n          <p data-testid=\"branch-name\">\n            {{ branch.name }}\n          </p>\n\n          <p v-if=\"branchAddress\" class=\"mt-1\" data-testid=\"branch-address\">\n            {{ branchAddress }}\n          </p>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"hidden sm:block py-8\">\n      <ThIcon class=\"w-8 mb-3.5 text-gray-700\" is=\"TaskList\" />\n\n      <ul class=\"text-sm space-y-2\">\n        <li v-for=\"(lineItem, index) in appointment.lineItems\" :key=\"index\">\n          <h4 class=\"text-dark\">{{ getLineItemName(lineItem) }}</h4>\n\n          <p class=\"text-gray-800\">\n            {{\n              t('pages.appointments.form.by_employee', {\n                employee: lineItem.staff\n                  ? getStaffName(lineItem.staff)\n                  : t('pages.appointments.form.first_available_employee_lowercase')\n              })\n            }}\n          </p>\n        </li>\n      </ul>\n    </section>\n  </div>\n</template>\n"],"names":["t","useI18n","organization","useConfigurationStore","link","computed","Env","props","store","branch","branchAddress","getBranchAddress","merchantTimezone","dateFormatted","formatAppointmentDate","appointmentTimeRangeFormatted","formatAppointmentTimeRange"],"mappings":"suBAUM,CAAE,EAAAA,GAAMC,IACR,CAAE,aAAAC,GAAiBC,IAEnBC,EAAOC,EAAS,IACb,GAAGC,EAAI,qBAAqB,iDAAiDC,EAAM,aAAa,IAAIL,CAAY,EACxH,0rCCOK,CAAE,EAAAF,GAAMC,IAERO,EAAQL,IAERM,EAASJ,EAAS,IAAME,EAAM,YAAY,MAAM,EAChDG,EAAgBL,EAAS,IACtBI,EAAO,MAAQE,EAAiBF,EAAO,KAAK,EAAI,IACxD,EAEKG,EAAmBP,EAAS,IAAMG,EAAM,QAAQ,gBAAgB,EAEhEK,EAAgBR,EAAS,IAC7BS,EAAsBP,EAAM,YAAY,MAAOK,EAAiB,KAAK,CAAA,EAEjEG,EAAgCV,EAAS,IAC7CW,EAA2BT,EAAM,YAAaK,EAAiB,KAAK,CAAA"}