{"version":3,"file":"request-call.page-T5ZkV9EW.js","sources":["../../../app/javascript/modules/growthmentor/sessions/request-call.page.vue"],"sourcesContent":["<template>\n  <Container class=\"tw-mt-12\">\n    <div>\n      <h1 class=\"tw-heading-2\">Session Request</h1>\n    </div>\n    <div\n      class=\"tw-mt-4 tw-flex tw-flex-col tw-space-y-4 lg:tw-flex-row lg:tw-space-x-8 lg:tw-space-y-0\"\n    >\n      <div class=\"tw-flex tw-w-full tw-flex-col tw-space-y-4 lg:tw-w-9/12\">\n        <Card>\n          <h2 class=\"tw-heading-3\">Session Details</h2>\n          <div class=\"tw-my-6 tw-flex tw-items-center tw-space-x-3\">\n            <InertiaLink :href=\"`/mentors/${mentor.slug}`\">\n              <Avatar\n                :src=\"mentor.avatarUrl\"\n                :alt=\"`${mentor.displayName}'s avatar`\"\n                :is-featured=\"mentor.featured\"\n                size=\"lg\"\n              />\n            </InertiaLink>\n            <div>\n              <h3 class=\"tw-text-neutral-400\">Mentor</h3>\n              <InertiaLink :href=\"`/mentors/${mentor.slug}`\">\n                <h4 class=\"tw-font-semibold\">{{ mentor.displayName }}</h4>\n              </InertiaLink>\n            </div>\n          </div>\n          <hr />\n          <div class=\"tw-mt-6\">\n            <h3 class=\"tw-heading-5\">Schedule Session Duration</h3>\n            <p class=\"tw-text-sm tw-text-neutral-500\">\n              Sessions must be scheduled at least 48 hours in advance.\n            </p>\n            <div class=\"tw-mt-4\">\n              <FormRadioGroup\n                v-model=\"sessionRequestForm.duration\"\n                :options=\"sessionDurationOptions\"\n                button-classes=\"tw-p-5 tw-space-x-5\"\n              >\n                <template #default=\"{ option }\">\n                  <div class=\"tw-text-left\">\n                    <div class=\"tw-text-xl tw-font-semibold\">\n                      {{ option.value }} min\n                    </div>\n                    <div class=\"tw-text-sm tw-text-neutral-400\">\n                      {{ option.cost }} total bill\n                    </div>\n                  </div>\n                </template>\n              </FormRadioGroup>\n            </div>\n          </div>\n          <div class=\"tw-mt-6\">\n            <h3 class=\"tw-heading-5\">Communication Tool</h3>\n            <p class=\"tw-text-sm tw-text-neutral-500\">\n              Choose which tool you wish to use to have your session.\n            </p>\n            <div class=\"tw-mt-4\">\n              <FormRadioGroup\n                v-model=\"sessionRequestForm.communicationTool\"\n                :errors=\"sessionRequestForm.errors.communication_tool\"\n                @input=\"sessionRequestForm.clearErrors('communication_tool')\"\n                :options=\"mentor.communicationToolOptions\"\n                button-classes=\"tw-h-20 tw-space-x-5\"\n                @click=\"handleInputClick\"\n              >\n                <template #default=\"{ option }\">\n                  <div\n                    class=\"tw-mr-4 tw-flex tw-items-center tw-space-x-4 tw-text-left\"\n                  >\n                    <SkypeLogo\n                      v-if=\"option.value === 'skype'\"\n                      class=\"tw-w-8 tw-shrink-0\"\n                    />\n                    <ZoomLogo\n                      v-if=\"option.value === 'zoom'\"\n                      class=\"tw-w-8 tw-shrink-0\"\n                    />\n                    <GoogleMeetLogo\n                      v-if=\"option.value === 'google_hangouts'\"\n                      class=\"tw-w-10 tw-shrink-0\"\n                    />\n                    <img\n                      v-if=\"option.value === 'growthmentor'\"\n                      src=\"../../../assets/images/growthmentor-call-badge.png\"\n                      alt=\"\"\n                      class=\"tw-w-24\"\n                    />\n                    <div>\n                      <div>\n                        {{ option.label }}\n                      </div>\n                      <div\n                        v-if=\"option.value === 'growthmentor'\"\n                        class=\"tw-text-sm tw-text-neutral-500\"\n                      >\n                        Now you can start a video call right from your session\n                      </div>\n                    </div>\n                  </div>\n                </template>\n              </FormRadioGroup>\n            </div>\n          </div>\n        </Card>\n        <Card>\n          <div>\n            <h3 class=\"tw-heading-5\">Schedule Session</h3>\n            <p class=\"tw-text-sm tw-text-neutral-500\">\n              Sessions must be scheduled at least 48 hours in advance.\n            </p>\n            <BaseButton\n              @click=\"openModal(CALENDAR_SLOT_PICKER_MODAL)\"\n              class=\"tw-mt-4\"\n            >\n              <OpeningTimesIcon class=\"tw-mr-2 tw-h-4 tw-w-4\" />\n              {{\n                sessionRequestForm.startsAt\n                  ? formatDate(sessionRequestForm.startsAt)\n                  : 'Select Date/Time'\n              }}\n            </BaseButton>\n            <FormErrors\n              :errors=\"sessionRequestForm.errors.starts_at\"\n              class=\"tw-mt-2\"\n            />\n          </div>\n          <hr class=\"tw-my-6\" />\n          <div>\n            <FormInput\n              v-model=\"sessionRequestForm.headline\"\n              :is-error=\"Boolean(sessionRequestForm.errors.headline)\"\n              :errors=\"sessionRequestForm.errors.headline\"\n              @input=\"sessionRequestForm.clearErrors('headline')\"\n              tooltip=\"Summarize the topic of your request in just 1 sentence.\"\n              type=\"text\"\n              @click=\"handleInputClick\"\n            >\n              <template #label>Objective</template>\n            </FormInput>\n          </div>\n          <hr class=\"tw-my-6\" />\n          <div>\n            <FormSelect\n              v-model=\"sessionRequestForm.category\"\n              :is-error=\"Boolean(sessionRequestForm.errors.category)\"\n              :errors=\"sessionRequestForm.errors.category\"\n              @input=\"sessionRequestForm.clearErrors('category')\"\n              :options=\"mentor.expertiseList\"\n              tooltip=\"\"\n              test_id=\"session-category-select\"\n            >\n              <template #label>\n                Functional skills area in which you are seeking advice\n              </template>\n            </FormSelect>\n            <FormInput\n              v-model=\"sessionRequestForm.message\"\n              :is-error=\"Boolean(sessionRequestForm.errors.message)\"\n              :errors=\"sessionRequestForm.errors.message\"\n              @input=\"sessionRequestForm.clearErrors('message')\"\n              @click=\"handleInputClick\"\n              as=\"textarea\"\n              class=\"tw-my-6\"\n              rows=\"4\"\n              test_id=\"session-message\"\n              tooltip=\"Write a couple of sentences describing the core challenge you're facing.\"\n              type=\"text\"\n              :min-characters=\"100\"\n            >\n              <template #label>Problem/challenge</template>\n            </FormInput>\n            <FormInput\n              v-model=\"sessionRequestForm.desirableOutcome\"\n              :is-error=\"Boolean(sessionRequestForm.errors.desirable_outcome)\"\n              :errors=\"sessionRequestForm.errors.desirable_outcome\"\n              @input=\"sessionRequestForm.clearErrors('desirable_outcome')\"\n              @click=\"handleInputClick\"\n              as=\"textarea\"\n              tooltip=\"Paint a picture of what a successful session would look like to you.\"\n              class=\"tw-my-6\"\n              rows=\"4\"\n              test_id=\"session-desirable-outcome\"\n              :min-characters=\"100\"\n            >\n              <template #label>Desired outcome of the call</template>\n            </FormInput>\n          </div>\n\n          <div v-if=\"mentor.pricing > 0\" class=\"tw-mt-4\">\n            <h2 class=\"tw-heading-3\">Payment Details</h2>\n            <div class=\"tw-my-3\">\n              <FormRadio\n                v-model=\"sessionRequestForm.creditCard\"\n                v-for=\"card in cards\"\n                :key=\"card.id\"\n                :value=\"card.stripeId\"\n                class=\"tw-mb-2\"\n              >\n                <div v-if=\"card.customerType === 'User'\">\n                  <span class=\"tw-capitalize\">{{ card.provider }}</span>\n                  ending {{ card.displayText }}\n                </div>\n                <div v-else>Team card ({{ card.team }})</div>\n              </FormRadio>\n              <FormErrors\n                :errors=\"sessionRequestForm.errors.creditCard\"\n                class=\"tw-mt-2\"\n              />\n            </div>\n            <BaseButton\n              size=\"small\"\n              @click=\"addNewCard\"\n              test_id=\"add-new-card-button\"\n            >\n              Add new card\n            </BaseButton>\n            <hr class=\"tw-my-4\" />\n          </div>\n          <FormCheckbox\n            v-model=\"rulesCheckbox.status\"\n            :is-error=\"rulesCheckbox.isError\"\n            @input=\"rulesCheckbox.isError = false\"\n            test_id=\"form-checkbox\"\n          >\n            <p>\n              I have properly formulated this session request as per\n              <a\n                href=\"https://www.growthmentor.com/faq/how-to-write-a-session-request/\"\n                class=\"tw-link\"\n                target=\"_blank\"\n              >\n                best practices\n              </a>\n              and will ensure that I show up in a timely fashion to the call.\n            </p>\n          </FormCheckbox>\n          <div class=\"tw-mt-4\">\n            <BaseButton\n              v-if=\"mentor.id !== currentUser.id\"\n              color=\"primary\"\n              :is-disabled=\"sessionRequestForm.processing\"\n              @click=\"submitSessionRequest\"\n              test_id=\"confirm-session-button\"\n            >\n              <LoadingCircle\n                v-if=\"sessionRequestForm.processing\"\n                size=\"16\"\n                color=\"tw-text-white\"\n                class=\"tw-mr-2\"\n              />\n              Confirm Session Request\n            </BaseButton>\n            <div\n              v-else\n              v-tooltip=\"'You cannot create a session with yourself'\"\n              class=\"tw-w-max\"\n            >\n              <BaseButton color=\"primary\" is-disabled>\n                Confirm Session Request\n              </BaseButton>\n            </div>\n          </div>\n        </Card>\n      </div>\n      <div class=\"tw-w-full lg:tw-w-3/12\">\n        <DashboardCarousel :elements=\"videos\" header=\"Tips & Resources\">\n          <template #default=\"{ element }\">\n            <TipsAndResourcesVideo\n              :id=\"element.id\"\n              :title=\"element.title\"\n              :wistia-id=\"element.wistiaId\"\n              :youtube-id=\"element.youtubeId\"\n              :tracking-object=\"{\n                name: 'New Session Video Clicked',\n              }\"\n            />\n          </template>\n        </DashboardCarousel>\n      </div>\n    </div>\n\n    <NewCreditCardModal\n      :name=\"NEW_CREDIT_CARD_MODAL\"\n      :stripe-key=\"stripePublicKey\"\n      @success=\"reloadCards\"\n    />\n    <CalendarSlotPickerModal\n      v-model=\"sessionRequestForm.startsAt\"\n      :name=\"CALENDAR_SLOT_PICKER_MODAL\"\n      :selected-session-duration=\"Number(sessionRequestForm.duration)\"\n      @input=\"sessionRequestForm.clearErrors('starts_at')\"\n    />\n  </Container>\n  <UnlockFullAccessModal v-if=\"hasRole(ROLE.GUEST)\" />\n</template>\n\n<script setup>\nimport Container from '@/shared/components/Container.vue'\nimport Card from '@/shared/components/Card.vue'\nimport Avatar from '@/shared/components/avatar/Avatar.vue'\nimport BaseButton from '@/shared/components/BaseButton.vue'\nimport FormInput from '@/shared/components/forms/FormInput.vue'\nimport FormCheckbox from '@/shared/components/forms/FormCheckbox.vue'\nimport FormRadio from '@/shared/components/forms/FormRadio.vue'\nimport FormRadioGroup from '@/shared/components/forms/FormRadioGroup.vue'\nimport SkypeLogo from '@/assets/images/skype.svg'\nimport ZoomLogo from '@/assets/images/zoom.svg'\nimport GoogleMeetLogo from '@/assets/images/google-meet.svg'\nimport NewCreditCardModal from '@/shared/components/modals/NewCreditCardModal.vue'\nimport FormSelect from '@/shared/components/forms/FormSelect.vue'\nimport { router, useForm } from '@inertiajs/vue3'\nimport snakeCaseKeys from 'snakecase-keys'\nimport FormErrors from '@/shared/components/forms/FormErrors.vue'\nimport LoadingCircle from '@/shared/components/LoadingCircle.vue'\nimport OpeningTimesIcon from '@/assets/images/icons/opening-times.svg'\nimport TipsAndResourcesVideo from '@/shared/components/TipsAndResourcesVideo.vue'\nimport CalendarSlotPickerModal from '@/shared/components/calendar/CalendarSlotPickerModal.vue'\nimport { computed, ref, watch } from 'vue'\nimport { useModals } from '@/shared/composables/useModals.js'\nimport { useDateManager } from '@/shared/composables/useDateManager.js'\nimport { useCurrentUser } from '@/shared/composables/useCurrentUser.js'\nimport DashboardCarousel from '@/modules/growthmentor/dashboard/components/DashboardCarousel.vue'\nimport UnlockFullAccessModal from '@/shared/components/modals/UnlockFullAccessModal.vue'\nimport { UNLOCK_FULL_ACCESS_MODAL_NAME } from '@/shared/data/globalVariables.js'\nimport { usePermissionSystem } from '@/shared/composables/usePermissionSystem.js'\nimport { ROLE } from '@/shared/data/permissionSystem.js'\n\nconst props = defineProps({\n  mentor: {\n    type: Object,\n    default: () => {},\n  },\n  videos: {\n    type: Array,\n    default: () => [],\n  },\n  cards: {\n    type: Array,\n    default: () => [],\n  },\n  stripePublicKey: {\n    type: String,\n    default: '',\n  },\n})\n\nconst { openModal } = useModals()\nconst { formatDate } = useDateManager()\nconst { currentUser } = useCurrentUser()\nconst { hasRole } = usePermissionSystem()\n\nconst NEW_CREDIT_CARD_MODAL = 'new-credit-card'\nconst CALENDAR_SLOT_PICKER_MODAL = 'calendar-slot-picker'\nconst rulesCheckbox = ref({\n  status: false,\n  isError: false,\n})\nconst sessionRequestForm = useForm({\n  duration: String(props.mentor.initialCourseDuration),\n  communicationTool: null,\n  startsAt: null,\n  headline: '',\n  category: '',\n  message: '',\n  desirableOutcome: '',\n  creditCard: props.cards.length\n    ? props.cards.find((card) => card.default).stripeId\n    : null,\n})\n\nconst sessionDurationOptions = computed(() => {\n  return Object.entries(props.mentor.courseDurations).map(([key, value]) => ({\n    value: key,\n    cost: value,\n  }))\n})\n\nwatch(\n  () => sessionRequestForm.duration,\n  () => {\n    sessionRequestForm.startsAt = null\n  },\n)\n\nconst reloadCards = () => {\n  router.reload({ only: ['cards'] })\n}\n\nconst submitSessionRequest = () => {\n  if (hasRole(ROLE.GUEST)) {\n    return openModal(UNLOCK_FULL_ACCESS_MODAL_NAME)\n  }\n\n  if (!rulesCheckbox.value.status) {\n    rulesCheckbox.value.isError = true\n    return\n  }\n\n  sessionRequestForm\n    .transform((data) => {\n      return {\n        course: {\n          ...snakeCaseKeys(data),\n        },\n      }\n    })\n    .post(`/mentors/${props.mentor.slug}/sessions`)\n}\n\nconst handleInputClick = () => {\n  if (hasRole(ROLE.GUEST)) {\n    openModal(UNLOCK_FULL_ACCESS_MODAL_NAME)\n  }\n}\n\nconst addNewCard = () => {\n  if (hasRole(ROLE.GUEST)) {\n    openModal(UNLOCK_FULL_ACCESS_MODAL_NAME)\n  } else {\n    openModal(NEW_CREDIT_CARD_MODAL)\n  }\n}\n</script>\n"],"names":["NEW_CREDIT_CARD_MODAL","CALENDAR_SLOT_PICKER_MODAL","props","__props","openModal","useModals","formatDate","useDateManager","currentUser","useCurrentUser","hasRole","usePermissionSystem","rulesCheckbox","ref","sessionRequestForm","useForm","card","sessionDurationOptions","computed","key","value","watch","reloadCards","router","submitSessionRequest","ROLE","UNLOCK_FULL_ACCESS_MODAL_NAME","data","snakeCaseKeys","handleInputClick","addNewCard"],"mappings":"ioHAgWMA,EAAwB,kBACxBC,EAA6B,yNAzBnC,MAAMC,EAAQC,EAmBR,CAAE,UAAAC,CAAW,EAAGC,EAAW,EAC3B,CAAE,WAAAC,CAAY,EAAGC,GAAgB,EACjC,CAAE,YAAAC,CAAa,EAAGC,EAAgB,EAClC,CAAE,QAAAC,CAAS,EAAGC,EAAqB,EAInCC,EAAgBC,EAAI,CACxB,OAAQ,GACR,QAAS,EACX,CAAC,EACKC,EAAqBC,EAAQ,CACjC,SAAU,OAAOb,EAAM,OAAO,qBAAqB,EACnD,kBAAmB,KACnB,SAAU,KACV,SAAU,GACV,SAAU,GACV,QAAS,GACT,iBAAkB,GAClB,WAAYA,EAAM,MAAM,OACpBA,EAAM,MAAM,KAAMc,GAASA,EAAK,OAAO,EAAE,SACzC,IACN,CAAC,EAEKC,EAAyBC,EAAS,IAC/B,OAAO,QAAQhB,EAAM,OAAO,eAAe,EAAE,IAAI,CAAC,CAACiB,EAAKC,CAAK,KAAO,CACzE,MAAOD,EACP,KAAMC,CACV,EAAI,CACH,EAEDC,EACE,IAAMP,EAAmB,SACzB,IAAM,CACJA,EAAmB,SAAW,IAC/B,CACH,EAEA,MAAMQ,EAAc,IAAM,CACxBC,GAAO,OAAO,CAAE,KAAM,CAAC,OAAO,CAAC,CAAE,CACnC,EAEMC,EAAuB,IAAM,CACjC,GAAId,EAAQe,EAAK,KAAK,EACpB,OAAOrB,EAAUsB,CAA6B,EAGhD,GAAI,CAACd,EAAc,MAAM,OAAQ,CAC/BA,EAAc,MAAM,QAAU,GAC9B,MACD,CAEDE,EACG,UAAWa,IACH,CACL,OAAQ,CACN,GAAGC,GAAcD,CAAI,CACtB,CACF,EACF,EACA,KAAK,YAAYzB,EAAM,OAAO,IAAI,WAAW,CAClD,EAEM2B,EAAmB,IAAM,CACzBnB,EAAQe,EAAK,KAAK,GACpBrB,EAAUsB,CAA6B,CAE3C,EAEMI,EAAa,IAAM,CACnBpB,EAAQe,EAAK,KAAK,EACpBrB,EAAUsB,CAA6B,EAEvCtB,EAAUJ,CAAqB,CAEnC"}