{"version":3,"file":"FreeSessionsLimitModal-p-wJrthi.js","sources":["../../../app/javascript/shared/composables/taxes/useDoubleUpQueueTax.js","../../../app/javascript/shared/components/modals/FreeSessionsLimitModal.vue"],"sourcesContent":["import { ref } from 'vue'\nimport { REQUEST_STATUS } from '@/shared/data/requestStatus.js'\nimport axios from 'axios'\n\nexport const useDoubleUpQueueTax = () => {\n  const subtotal = ref(0)\n  const tax = ref(0)\n  const total = ref(0)\n  const requestStatus = ref(REQUEST_STATUS.IDLE)\n  const abortController = ref(new AbortController())\n\n  const fetchDoubleUpQueueTax = async () => {\n    if (\n      requestStatus.value === REQUEST_STATUS.PENDING &&\n      !abortController.value.signal.aborted\n    ) {\n      return abortController.value.abort()\n    }\n\n    try {\n      abortController.value = new AbortController()\n      requestStatus.value = REQUEST_STATUS.PENDING\n      const { data } = await axios.get('/session-limits/prices', {\n        signal: abortController.value.signal,\n      })\n      subtotal.value = data.subtotal\n      tax.value = data.tax\n      total.value = data.total\n      requestStatus.value = REQUEST_STATUS.SUCCESS\n    } catch (error) {\n      if (error.message === 'canceled') return\n      requestStatus.value = REQUEST_STATUS.ERROR\n    }\n  }\n\n  return {\n    subtotal,\n    tax,\n    total,\n    requestStatus,\n    fetchDoubleUpQueueTax,\n  }\n}\n","<template>\n  <div>\n    <BaseModal :name=\"name\" width-class=\"tw-max-w-[550px]\">\n      <div>\n        <div\n          class=\"tw-flex tw-justify-center tw-rounded-t-xl tw-bg-error-500 tw-p-3\"\n        >\n          <WarningIcon class=\"tw-h-6 tw-w-6 tw-text-white\" />\n        </div>\n        <div class=\"tw-p-5 tw-text-center\">\n          <h2 class=\"tw-heading-2\">Free sessions limit reached</h2>\n\n          <p v-if=\"!hideDescription\" class=\"tw-mt-3 tw-text-neutral-500\">\n            Sorry, you have already reached the limit of\n            <strong class=\"tw-font-medium\">\n              {{ accessControl.subscription.privileges.freeCalls.count }}\n              sessions\n            </strong>\n            in the queue at one time.\n            <a\n              class=\"tw-link\"\n              href=\"https://www.growthmentor.com/faq/active-session-limit/\"\n              target=\"_blank\"\n            >\n              Click here to learn more.\n            </a>\n          </p>\n\n          <div\n            v-if=\"accessControl.subscription.privileges.doubleUpQueue\"\n            class=\"tw-mt-4 tw-rounded-md tw-border tw-border-success-100 tw-bg-gradient-to-r tw-from-success-50 tw-via-white tw-to-white tw-p-6\"\n          >\n            <div\n              class=\"tw-text-xs tw-font-semibold tw-uppercase tw-text-success-500\"\n            >\n              Upgrade free sessions limit\n            </div>\n            <div class=\"tw-mt-3 tw-text-lg\">Book 6 Free Calls at a Time</div>\n            <p class=\"tw-text-sm tw-text-neutral-500\">\n              One-time fee for 30 days of double queue\n            </p>\n            <p\n              class=\"tw-inline-flex tw-items-center tw-text-sm tw-text-neutral-500\"\n            >\n              Pay today:\n              <SkeletonLoader\n                :is-loading=\"total === 0\"\n                size-classes=\"tw-w-8 tw-h-4 tw-mx-1 tw-rounded\"\n              >\n                <span class=\"tw-mx-1\">\n                  {{ formatCurrency(total) }}\n                </span>\n              </SkeletonLoader>\n              <template v-if=\"tax > 0\">\n                incl. VAT\n                <PricingDetailsTooltip\n                  :tax=\"tax\"\n                  :subtotal=\"subtotal\"\n                  class=\"tw-ml-1\"\n                />\n              </template>\n            </p>\n            <div class=\"tw-mt-3\">\n              <transition name=\"fade\" mode=\"out-in\">\n                <div\n                  v-if=\"areConfirmationButtonsShown\"\n                  class=\"tw-flex tw-items-center tw-justify-center tw-space-x-4\"\n                >\n                  <BaseButton\n                    color=\"outline-gray\"\n                    @click=\"hideConfirmationButtons\"\n                  >\n                    Cancel payment\n                  </BaseButton>\n                  <BaseButton color=\"outline-green\" @click=\"doubleUpQueue\">\n                    Confirm payment\n                  </BaseButton>\n                </div>\n                <BaseButton\n                  v-else\n                  @click=\"showConfirmationButtons\"\n                  color=\"outline-green\"\n                  class=\"tw-bg-transparent tw-uppercase\"\n                  :is-disabled=\"doubleUpQueueForm.processing\"\n                >\n                  <LoadingCircle\n                    v-if=\"doubleUpQueueForm.processing\"\n                    size=\"16\"\n                    class=\"tw-mr-2\"\n                  />\n                  <CopyLinkIcon v-else class=\"tw-mr-2 tw-w-4\" />\n                  Double up your queue\n                </BaseButton>\n              </transition>\n            </div>\n            <FormErrors\n              :errors=\"doubleUpQueueForm.errors.creditCard\"\n              class=\"tw-mt-4\"\n            />\n          </div>\n\n          <div\n            v-if=\"isSubscriptionTier(SUBSCRIPTION_TIER.BABY)\"\n            class=\"tw-mt-4 tw-rounded-md tw-border tw-border-success-100 tw-bg-gradient-to-r tw-from-success-50 tw-via-white tw-to-white tw-p-6\"\n          >\n            <div\n              class=\"tw-text-xs tw-font-semibold tw-uppercase tw-text-success-500\"\n            >\n              Membership upgrade\n            </div>\n            <div class=\"tw-mt-3 tw-text-lg\">Upgrade your Membership</div>\n            <p class=\"tw-text-sm tw-text-neutral-500\">\n              You may book paid calls or upgrade your plan to get 3 free calls\n              in the queue at once.\n            </p>\n            <BaseButton\n              color=\"outline-green\"\n              class=\"tw-mt-3 tw-uppercase\"\n              href=\"/subscription/plans\"\n              is-inertia-link\n            >\n              Upgrade your plan\n              <ExternalLinkIcon class=\"tw-ml-2 tw-h-4 tw-w-4\" />\n            </BaseButton>\n          </div>\n\n          <BaseButton\n            color=\"outline-gray\"\n            @click=\"closeModal(name)\"\n            class=\"tw-mt-6\"\n            :is-disabled=\"doubleUpQueueForm.processing\"\n          >\n            Close\n          </BaseButton>\n        </div>\n      </div>\n    </BaseModal>\n\n    <ConfirmationModal\n      :name=\"confirmationModalName\"\n      header=\"Payment confirmation\"\n      description=\"You will be charged $100 + tax and you will be able to book 6 free calls at a time for 30 days.\"\n      cancel-button-text=\"Go back\"\n      confirmation-button-text=\"Confirm\"\n    >\n      <template #icon>\n        <WarningIcon />\n      </template>\n    </ConfirmationModal>\n    <BaseModal :name=\"successModalName\" width-class=\"tw-max-w-[550px]\">\n      <div>\n        <div\n          class=\"tw-flex tw-justify-center tw-rounded-t-xl tw-bg-success-500 tw-p-3 tw-text-white\"\n        >\n          <CheckOutlineIcon class=\"tw-h-6 tw-w-6\" />\n        </div>\n        <div class=\"tw-p-5 tw-text-center\">\n          <h2 class=\"tw-heading-2\">Payment successful</h2>\n          <p class=\"tw-text-neutral-400\">\n            Now you can book up to 6 free calls at a time for 30 days.\n          </p>\n          <div class=\"tw-mt-4 tw-text-right\">\n            <BaseButton\n              color=\"outline-gray\"\n              @click=\"closeModal(successModalName)\"\n            >\n              Close\n            </BaseButton>\n          </div>\n        </div>\n      </div>\n    </BaseModal>\n  </div>\n</template>\n\n<script setup>\nimport BaseButton from '../BaseButton.vue'\nimport WarningIcon from '@/assets/images/icons/warning.svg'\nimport CopyLinkIcon from '@/assets/images/colored-icons/copy-link.svg'\nimport LoadingCircle from '@/shared/components/LoadingCircle.vue'\nimport ConfirmationModal from '@/shared/components/modals/ConfirmationModal.vue'\nimport CheckOutlineIcon from '@/assets/images/icons/check-outline-2.svg'\nimport ExternalLinkIcon from '@/assets/images/icons/external-link.svg'\nimport FormErrors from '@/shared/components/forms/FormErrors.vue'\nimport { useForm } from '@inertiajs/vue3'\nimport { computed, nextTick, onMounted, ref } from 'vue'\nimport { useModals } from '@/shared/composables/useModals.js'\nimport { usePermissionSystem } from '@/shared/composables/usePermissionSystem.js'\nimport { SUBSCRIPTION_TIER } from '@/shared/data/permissionSystem.js'\nimport BaseModal from '@/shared/components/BaseModal.vue'\nimport { useDoubleUpQueueTax } from '@/shared/composables/taxes/useDoubleUpQueueTax.js'\nimport SkeletonLoader from '@/shared/components/SkeletonLoader.vue'\nimport { formatCurrency } from '../../utils/formatCurrency.js'\nimport PricingDetailsTooltip from '@/shared/components/PricingDetailsTooltip.vue'\n\nconst props = defineProps({\n  name: {\n    type: String,\n    required: true,\n  },\n  hideDescription: {\n    type: Boolean,\n    default: false,\n  },\n})\n\nconst { accessControl, isSubscriptionTier } = usePermissionSystem()\nconst { closeModal, openModal } = useModals()\nconst { tax, fetchDoubleUpQueueTax, subtotal, total } = useDoubleUpQueueTax()\n\nconst doubleUpQueueForm = useForm({})\nconst areConfirmationButtonsShown = ref(false)\n\nconst confirmationModalName = computed(() => {\n  return props.name + '-confirmation'\n})\nconst successModalName = computed(() => {\n  return props.name + '-success'\n})\n\nconst showConfirmationButtons = () => {\n  areConfirmationButtonsShown.value = true\n}\n\nconst hideConfirmationButtons = () => {\n  areConfirmationButtonsShown.value = false\n}\n\nconst doubleUpQueue = () => {\n  hideConfirmationButtons()\n  doubleUpQueueForm.patch(`/mentee/session_limits`, {\n    preserveScroll: true,\n    onSuccess: () => {\n      closeModal(props.name)\n      nextTick(() => {\n        openModal(successModalName.value)\n      })\n    },\n  })\n}\n\nonMounted(() => {\n  if (!accessControl.value.subscription.privileges.doubleUpQueue) return\n  fetchDoubleUpQueueTax()\n})\n</script>\n"],"names":["useDoubleUpQueueTax","subtotal","ref","tax","total","requestStatus","REQUEST_STATUS","abortController","data","axios","error","props","__props","accessControl","isSubscriptionTier","usePermissionSystem","closeModal","openModal","useModals","fetchDoubleUpQueueTax","doubleUpQueueForm","useForm","areConfirmationButtonsShown","confirmationModalName","computed","successModalName","showConfirmationButtons","hideConfirmationButtons","doubleUpQueue","nextTick","onMounted"],"mappings":"yoBAIY,MAACA,EAAsB,IAAM,CACvC,MAAMC,EAAWC,EAAI,CAAC,EAChBC,EAAMD,EAAI,CAAC,EACXE,EAAQF,EAAI,CAAC,EACbG,EAAgBH,EAAII,EAAe,IAAI,EACvCC,EAAkBL,EAAI,IAAI,eAAiB,EA0BjD,MAAO,CACL,SAAAD,EACA,IAAAE,EACA,MAAAC,EACA,cAAAC,EACA,sBA7B4B,SAAY,CACxC,GACEA,EAAc,QAAUC,EAAe,SACvC,CAACC,EAAgB,MAAM,OAAO,QAE9B,OAAOA,EAAgB,MAAM,MAAO,EAGtC,GAAI,CACFA,EAAgB,MAAQ,IAAI,gBAC5BF,EAAc,MAAQC,EAAe,QACrC,KAAM,CAAE,KAAAE,CAAM,EAAG,MAAMC,EAAM,IAAI,yBAA0B,CACzD,OAAQF,EAAgB,MAAM,MACtC,CAAO,EACDN,EAAS,MAAQO,EAAK,SACtBL,EAAI,MAAQK,EAAK,IACjBJ,EAAM,MAAQI,EAAK,MACnBH,EAAc,MAAQC,EAAe,OACtC,OAAQI,EAAO,CACd,GAAIA,EAAM,UAAY,WAAY,OAClCL,EAAc,MAAQC,EAAe,KACtC,CACF,CAQA,CACH,w5DCyJA,MAAMK,EAAQC,EAWR,CAAE,cAAAC,EAAe,mBAAAC,CAAoB,EAAGC,EAAqB,EAC7D,CAAE,WAAAC,EAAY,UAAAC,CAAW,EAAGC,EAAW,EACvC,CAAE,IAAAf,EAAK,sBAAAgB,EAAuB,SAAAlB,EAAU,MAAAG,CAAK,EAAKJ,EAAqB,EAEvEoB,EAAoBC,EAAQ,EAAE,EAC9BC,EAA8BpB,EAAI,EAAK,EAEvCqB,EAAwBC,EAAS,IAC9Bb,EAAM,KAAO,eACrB,EACKc,EAAmBD,EAAS,IACzBb,EAAM,KAAO,UACrB,EAEKe,EAA0B,IAAM,CACpCJ,EAA4B,MAAQ,EACtC,EAEMK,EAA0B,IAAM,CACpCL,EAA4B,MAAQ,EACtC,EAEMM,EAAgB,IAAM,CAC1BD,EAAyB,EACzBP,EAAkB,MAAM,yBAA0B,CAChD,eAAgB,GAChB,UAAW,IAAM,CACfJ,EAAWL,EAAM,IAAI,EACrBkB,EAAS,IAAM,CACbZ,EAAUQ,EAAiB,KAAK,CACxC,CAAO,CACF,CACL,CAAG,CACH,EAEA,OAAAK,EAAU,IAAM,CACTjB,EAAc,MAAM,aAAa,WAAW,eACjDM,EAAuB,CACzB,CAAC"}