{"version":3,"file":"Mentor-C9Y1M5_f.js","sources":["../../../app/javascript/modules/growthmentor/mentors/components/Mentor.vue"],"sourcesContent":["<template>\n  <div>\n    <Card padding-class=\"tw-p-5\" class=\"tw-relative tw-overflow-hidden\">\n      <div\n        v-if=\"isBlurred\"\n        class=\"tw-absolute tw-inset-0 tw-z-50 tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center tw-backdrop-blur\"\n      >\n        <BaseButton\n          color=\"primary\"\n          @click=\"openModal(UNLOCK_FULL_ACCESS_MODAL_NAME)\"\n        >\n          <LockIcon class=\"tw-mr-2 tw-h-4 tw-w-4\" />\n          Create Account to Unlock All Mentors\n        </BaseButton>\n      </div>\n      <div\n        ref=\"cardWrapperRef\"\n        :class=\"{ 'tw-pointer-events-none tw-select-none': isBlurred }\"\n      >\n        <div class=\"tw-flex tw-flex-wrap md:tw-flex-nowrap\">\n          <div class=\"tw-order-1 tw-shrink-0 tw-grow md:tw-mr-4 md:tw-grow-0\">\n            <SkeletonLoader\n              :is-loading=\"isLoading\"\n              size-classes=\"tw-size-[144px] tw-rounded-xl\"\n            >\n              <a :href=\"mentor.personalUrl\" target=\"_blank\">\n                <Avatar\n                  size=\"3xl\"\n                  :src=\"mentor.avatarUrl\"\n                  :alt=\"`${mentor.displayName}'s avatar`\"\n                  :is-featured=\"mentor.featured\"\n                  square\n                />\n              </a>\n            </SkeletonLoader>\n          </div>\n          <div\n            class=\"tw-order-3 tw-mt-4 tw-flex tw-grow tw-flex-col tw-space-y-2 tw-self-center md:tw-order-2 md:tw-mt-0\"\n          >\n            <div\n              class=\"tw-flex tw-flex-col tw-space-y-1 lg:tw-flex-row lg:tw-items-center lg:tw-space-x-3 lg:tw-space-y-0\"\n            >\n              <SkeletonLoader\n                :is-loading=\"isLoading\"\n                size-classes=\"tw-w-44 tw-h-8 tw-rounded-full\"\n              >\n                <a\n                  class=\"tw-order-2 tw-mt-2 tw-w-max hover:tw-text-neutral-700 md:tw-order-1 md:tw-mt-0\"\n                  :href=\"mentor.personalUrl\"\n                  target=\"_blank\"\n                >\n                  <h2 class=\"tw-text-2xl tw-font-bold\">\n                    {{ mentor.displayName }}\n                  </h2>\n                </a>\n              </SkeletonLoader>\n              <AddMentorToListButton\n                v-if=\"!isLoading\"\n                :mentor-id=\"mentor.id\"\n                :mentor-added-to-lists=\"mentorAddedToLists\"\n                class=\"tw-order-1 md:tw-order-2\"\n              >\n                <template\n                  #button=\"{\n                    openModal: openListModal,\n                    isAddedToAnyList,\n                    lists,\n                  }\"\n                >\n                  <BaseButton\n                    size=\"xs\"\n                    :color=\"\n                      isAddedToAnyList ? 'secondary' : 'outline-secondary'\n                    \"\n                    @click=\"openListModal\"\n                    :is-disabled=\"isMentorCurrentUser\"\n                  >\n                    <template v-if=\"!isAddedToAnyList\">\n                      <AddToListIcon\n                        class=\"tw-ml-0.5 tw-mr-2 tw-h-3 tw-w-3 tw-shrink-0\"\n                      />\n                      Add to list\n                    </template>\n                    <template v-else>\n                      <CheckIcon class=\"tw-mr-2 tw-h-3 tw-w-3 tw-shrink-0\" />\n                      Added to\n                      {{ lists.map((name) => `\"${name}\"`).join(', ') }}\n                      {{ lists.length > 1 ? 'lists' : 'list' }}\n                    </template>\n                  </BaseButton>\n                </template>\n              </AddMentorToListButton>\n            </div>\n            <SkeletonLoader\n              :is-loading=\"isLoading\"\n              size-classes=\"tw-w-52 tw-h-4 tw-rounded-full\"\n            >\n              <div class=\"tw-text tw-text-neutral-600\">\n                {{ mentor.professionTitle }}\n              </div>\n            </SkeletonLoader>\n            <div class=\"tw-text-xs tw-text-neutral-400\">\n              <div class=\"tw-flex tw-flex-wrap tw-gap-x-6 tw-gap-y-2\">\n                <span class=\"tw-inline-flex tw-items-center tw-gap-1.5\">\n                  <SkeletonLoader\n                    :is-loading=\"isLoading\"\n                    size-classes=\"tw-w-64 tw-h-2 tw-rounded-full tw-mt-1\"\n                  >\n                    <LocationIcon class=\"tw--mt-0.5 tw-h-[15px] tw-w-[11px]\" />\n                    <span>{{ mentor.livingInWithTimezone }}</span>\n                  </SkeletonLoader>\n                </span>\n                <span\n                  v-if=\"mentor.languageList && mentor.languageList.length\"\n                  class=\"tw-inline-flex tw-items-center tw-gap-1.5\"\n                >\n                  <SkeletonLoader\n                    :is-loading=\"isLoading\"\n                    size-classes=\"tw-w-24 tw-h-2 tw-rounded-full tw-mt-1\"\n                  >\n                    <GlobeIcon class=\"tw-h-4 tw-w-4\" />\n                    <span>{{ mentor.languageList.join(', ') }}</span>\n                  </SkeletonLoader>\n                </span>\n                <span>\n                  <SkeletonLoader\n                    :is-loading=\"isLoading\"\n                    size-classes=\"tw-w-16 tw-h-2 tw-rounded-full tw-mt-1\"\n                  >\n                    {{ mentor.fromDetails }}\n                  </SkeletonLoader>\n                </span>\n                <div\n                  v-if=\"mentor.respondsIn\"\n                  class=\"tw-inline-flex tw-items-center tw-gap-1.5\"\n                >\n                  <SkeletonLoader\n                    :is-loading=\"isLoading\"\n                    size-classes=\"tw-w-32 tw-h-2 tw-rounded-full tw-mt-1\"\n                  >\n                    <LightningIcon\n                      class=\"tw-h-3.5 tw-w-3.5 tw-text-success-500\"\n                    />\n                    Usually responds in {{ mentor.respondsIn }}\n                  </SkeletonLoader>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            class=\"tw-order-2 tw-flex tw-shrink-0 tw-flex-col tw-items-end md:tw-order-3 md:tw-w-[240px]\"\n          >\n            <div\n              class=\"tw-flex tw-items-center tw-space-x-2 tw-text-2xl tw-font-semibold\"\n            >\n              <SkeletonLoader\n                :is-loading=\"isLoading\"\n                size-classes=\"tw-w-24 tw-h-8 tw-rounded-lg\"\n              >\n                <div class=\"tw-shrink-0\">\n                  <StarIcon class=\"tw-h-4 tw-w-4 tw-text-warning-500\" />\n                </div>\n                <span>{{ parseFloat(mentor.rating).toFixed(2) }}</span>\n              </SkeletonLoader>\n            </div>\n            <SkeletonLoader\n              :is-loading=\"isLoading\"\n              size-classes=\"tw-w-32 tw-h-3 tw-rounded-full tw-mt-2\"\n            >\n              <div class=\"tw-text-xs tw-text-neutral-400\">\n                {{ mentor.reviewsForMeCount }} reviews /\n                {{ mentor.coursesCount }} sessions\n              </div>\n            </SkeletonLoader>\n            <div\n              class=\"tw-mt-3 tw-flex tw-items-center tw-space-x-2 tw-font-semibold\"\n            >\n              <SkeletonLoader\n                :is-loading=\"isLoading\"\n                size-classes=\"tw-w-20 tw-h-6 tw-rounded-full\"\n              >\n                <span :class=\"{ 'tw-text-success-500': isCourseFree }\">\n                  {{ priceRate }}\n                </span>\n                <CreditCardIcon class=\"tw-h-4 tw-w-4 tw-text-neutral-300\" />\n              </SkeletonLoader>\n            </div>\n          </div>\n        </div>\n        <hr class=\"tw-mb-4 tw-mt-2 md:tw-hidden\" />\n        <div class=\"tw-mt-4 tw-justify-between md:tw-flex md:tw-space-x-6\">\n          <div>\n            <p class=\"tw-text-neutral-600\">\n              <SkeletonLoader\n                :is-loading=\"isLoading\"\n                size-classes=\"tw-w-92 tw-h-4 tw-rounded-full\"\n              >\n                {{ mentor.aboutMe }}\n              </SkeletonLoader>\n              <SkeletonLoader\n                :is-loading=\"isLoading\"\n                size-classes=\"tw-w-64 tw-h-4 tw-rounded-full tw-mt-2\"\n              />\n              <SkeletonLoader\n                :is-loading=\"isLoading\"\n                size-classes=\"tw-w-72 tw-h-4 tw-rounded-full tw-mt-2\"\n              />\n              <SkeletonLoader\n                :is-loading=\"isLoading\"\n                size-classes=\"tw-w-48 tw-h-4 tw-rounded-full tw-mt-2\"\n              />\n              <SkeletonLoader\n                :is-loading=\"isLoading\"\n                size-classes=\"tw-w-60 tw-h-4 tw-rounded-full tw-mt-2\"\n              />\n            </p>\n            <ExpertiseTabs\n              v-if=\"isExpertiseSectionShown && !isLoading\"\n              class=\"tw-mt-4\"\n            >\n              <ExpertiseTab title=\"Expertise\">\n                <div class=\"tw-mt-4 tw-flex tw-flex-wrap tw-gap-3\">\n                  <MentorExpertiseTag\n                    v-for=\"(specialty, index) in mentor.specialties\"\n                    :key=\"index\"\n                    :name=\"specialty.name\"\n                    :description=\"specialty.description\"\n                  >\n                    {{ specialty.name }}\n                  </MentorExpertiseTag>\n                </div>\n              </ExpertiseTab>\n              <ExpertiseTab title=\"Industry\">\n                <div class=\"tw-mt-4 tw-flex tw-flex-wrap tw-gap-3\">\n                  <MentorExpertiseTag\n                    v-for=\"(industry, index) in mentor.industries\"\n                    :key=\"index\"\n                    :name=\"industry.name\"\n                    :description=\"industry.description\"\n                  >\n                    {{ industry.name }}\n                  </MentorExpertiseTag>\n                </div>\n              </ExpertiseTab>\n              <ExpertiseTab title=\"Tools\">\n                <div class=\"tw-mt-4 tw-flex tw-flex-wrap tw-gap-3\">\n                  <MentorExpertiseTag\n                    v-for=\"(tool, index) in mentor.toolsList\"\n                    :key=\"index\"\n                    :name=\"tool.name\"\n                    :description=\"tool.description\"\n                  >\n                    {{ tool.name }}\n                  </MentorExpertiseTag>\n                </div>\n              </ExpertiseTab>\n            </ExpertiseTabs>\n          </div>\n          <hr class=\"tw-my-4 md:tw-hidden\" />\n          <div class=\"tw-shrink-0 md:tw-w-[240px]\">\n            <SkeletonLoader\n              :is-loading=\"isLoading\"\n              size-classes=\"tw-w-full tw-h-20 tw-rounded-lg\"\n            >\n              <NextAvailable\n                :is-available=\"mentor.available\"\n                :next-available-time=\"mentor.nextAvailableTime\"\n              />\n            </SkeletonLoader>\n            <div class=\"tw-mt-4 tw-flex tw-flex-col tw-space-y-2\">\n              <SkeletonLoader\n                :is-loading=\"isLoading\"\n                size-classes=\"tw-w-full tw-h-10 tw-rounded-full\"\n              >\n                <RequestCallButton\n                  :is-available=\"mentor.available\"\n                  :mentor-slug=\"mentor.slug\"\n                  :is-mentor-chargeable=\"mentor.chargeable\"\n                />\n              </SkeletonLoader>\n              <SkeletonLoader\n                :is-loading=\"isLoading\"\n                size-classes=\"tw-w-full tw-h-10 tw-rounded-full\"\n              >\n                <BaseButton\n                  color=\"outline-secondary\"\n                  is-block\n                  :href=\"mentor.personalUrl\"\n                  target=\"_blank\"\n                >\n                  View Profile\n                </BaseButton>\n              </SkeletonLoader>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Card>\n    <slot name=\"bottom\" />\n  </div>\n</template>\n\n<script setup>\nimport Avatar from '@/shared/components/avatar/Avatar.vue'\nimport Card from '@/shared/components/Card.vue'\nimport ExpertiseTabs from '@/shared/components/tabs/ExpertiseTabs/ExpertiseTabs.vue'\nimport ExpertiseTab from '@/shared/components/tabs/ExpertiseTabs/ExpertiseTab.vue'\nimport BaseButton from '@/shared/components/BaseButton.vue'\nimport RequestCallButton from '@/shared/components/RequestCallButton.vue'\nimport LocationIcon from '@/assets/images/icons/location.svg'\nimport GlobeIcon from '@/assets/images/icons/globe.svg'\nimport StarIcon from '@/assets/images/icons/star.svg'\nimport CreditCardIcon from '@/assets/images/icons/credit-card.svg'\nimport LockIcon from '@/assets/images/icons/lock.svg'\nimport AddToListIcon from '@/assets/images/icons/add-to-list.svg'\nimport CheckIcon from '@/assets/images/icons/check.svg'\nimport { UNLOCK_FULL_ACCESS_MODAL_NAME } from '@/shared/data/globalVariables.js'\nimport AddMentorToListButton from '@/shared/components/AddMentorToListButton.vue'\nimport LightningIcon from '@/assets/images/icons/lightning.svg'\nimport MentorExpertiseTag from '@/modules/growthmentor/mentors/components/MentorExpertiseTag.vue'\nimport NextAvailable from '@/modules/growthmentor/mentors/components/NextAvailable.vue'\nimport { computed, nextTick, onMounted, ref } from 'vue'\nimport { useCurrentUser } from '@/shared/composables/useCurrentUser.js'\nimport { useModals } from '@/shared/composables/useModals.js'\nimport SkeletonLoader from '@/shared/components/SkeletonLoader.vue'\n\nconst props = defineProps({\n  mentor: {\n    type: Object,\n    required: true,\n  },\n  isBlurred: {\n    type: Boolean,\n    default: false,\n  },\n  isLoading: {\n    type: Boolean,\n    default: false,\n  },\n  mentorAddedToLists: {\n    type: Array,\n    default: () => [],\n  },\n  isExpertiseSectionShown: {\n    type: Boolean,\n    default: false,\n  },\n})\n\nconst { currentUser } = useCurrentUser()\nconst { openModal } = useModals()\n\nconst cardWrapperRef = ref(null)\n\nconst isCourseFree = computed(() => {\n  return Number(props.mentor.hourRate) === 0\n})\nconst priceRate = computed(() => {\n  if (isCourseFree.value) return 'Free'\n  return `${props.mentor.hourRateCurrency} / hour`\n})\nconst isMentorCurrentUser = computed(() => {\n  return props.mentor.id === currentUser.value.id\n})\n\nonMounted(() => {\n  // Disable tabbing in the entire card if is blurred\n  if (props.isBlurred) {\n    // nextTick is needed because ExpertiseTabs are not mounted yet, so we can't loop through them\n    nextTick(() => {\n      const focusableElements = cardWrapperRef.value.querySelectorAll(\n        'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n      )\n      focusableElements.forEach((element) => {\n        element.setAttribute('tabindex', '-1')\n      })\n    })\n  }\n})\n</script>\n"],"names":["props","__props","currentUser","useCurrentUser","openModal","useModals","cardWrapperRef","ref","isCourseFree","computed","priceRate","isMentorCurrentUser","onMounted","nextTick","element"],"mappings":"uqGAsUA,MAAMA,EAAQC,EAuBR,CAAE,YAAAC,CAAa,EAAGC,EAAgB,EAClC,CAAE,UAAAC,CAAW,EAAGC,EAAW,EAE3BC,EAAiBC,EAAI,IAAI,EAEzBC,EAAeC,EAAS,IACrB,OAAOT,EAAM,OAAO,QAAQ,IAAM,CAC1C,EACKU,EAAYD,EAAS,IACrBD,EAAa,MAAc,OACxB,GAAGR,EAAM,OAAO,gBAAgB,SACxC,EACKW,EAAsBF,EAAS,IAC5BT,EAAM,OAAO,KAAOE,EAAY,MAAM,EAC9C,EAED,OAAAU,EAAU,IAAM,CAEVZ,EAAM,WAERa,EAAS,IAAM,CACaP,EAAe,MAAM,iBAC7C,0EACD,EACiB,QAASQ,GAAY,CACrCA,EAAQ,aAAa,WAAY,IAAI,CAC7C,CAAO,CACP,CAAK,CAEL,CAAC"}