{"version":3,"file":"index.tgBS_nfu.js","sources":["../../../../components/cp/CpMenu/CpMenu.vue","../../../../components/cp/CpModal/CpModalReportIssue/CpModalReportIssue.vue","../../../../pages/menu/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import {useI18n} from 'vue-i18n';\n  import useCpBem from '~/composables/useCpBem';\n  import CpAlert from '~/components/cp/CpAlert/CpAlert.vue';\n  import CpBodyAction from '~/components/cp/CpBodyAction/CpBodyAction.vue';\n  import CpButton from '~/components/cp/CpButton/CpButton.vue';\n  import CpText from '~/components/cp/CpText/CpText.vue';\n  import CpIconStandard from '~/components/cp/CpIcon/CpIconStandard/CpIconStandard.vue';\n\n  defineProps<{\n    notActivated: boolean\n    logged: boolean\n  }>();\n\n  const emit = defineEmits<{\n    (e: 'show-login-modal'): void\n    (e: 'activate-account'): void\n    (e: 'report'): void\n  }>();\n\n  const {b, e} = useCpBem('cp-menu');\n  const {t} = useI18n();\n</script>\n\n<template>\n    <div :class=\"b\">\n        <div v-if=\"notActivated && logged\" :class=\"e('main-action-container')\">\n            <CpAlert\n                :close-icon=\"false\"\n                kind=\"critical\"\n                action\n                :action-text=\"t('activateAccount')\"\n                @alert:click=\"emit('activate-account')\"\n            >\n                <CpText variant=\"body-regular\">\n                    {{ t('needActivateAccount') }}\n                </CpText>\n            </CpAlert>\n        </div>\n        <div v-if=\"!logged\" :class=\"e('main-action-container')\">\n            <div :class=\"e('card')\">\n                <CpText variant=\"body-regular\">\n                    {{ t('logMessage') }}\n                </CpText>\n                <CpButton\n                    :label=\"t('logIn')\"\n                    full-width\n                    kind=\"label\"\n                    color=\"primary\"\n                    data-testid=\"card-login-button\"\n                    @click=\"emit('show-login-modal')\"\n                />\n            </div>\n        </div>\n\n        <CpBodyAction\n            icon=\"home\"\n            :label=\"t('home')\"\n            :to=\"{ name: 'home' }\"\n            data-testid=\"menu-home-option\"\n        />\n        <CpBodyAction\n            v-if=\"logged\"\n            icon=\"person\"\n            :label=\"t('myAccount')\"\n            :to=\"{ name: 'account' }\"\n            data-testid=\"menu-account-option\"\n        />\n        <CpBodyAction\n            v-if=\"logged\"\n            icon=\"view_list\"\n            :label=\"t('myOrders')\"\n            :to=\"{ name: 'account-orders' }\"\n            data-testid=\"menu-orders-option\"\n        />\n        <CpBodyAction\n            icon=\"view_module\"\n            :label=\"t('categories')\"\n            :to=\"{ name: 'categories' }\"\n            data-testid=\"menu-categories-option\"\n        />\n        <CpBodyAction\n            icon=\"history\"\n            :label=\"t('history')\"\n            :to=\"{ name: 'view-history' }\"\n            data-testid=\"menu-history-option\"\n        />\n        <CpBodyAction\n            icon=\"info_outline\"\n            :label=\"t('informationCenter')\"\n            :to=\"{ name: 'information-center' }\"\n            data-testid=\"menu-information-option\"\n        />\n        <CpBodyAction\n            icon=\"support_agent\"\n            :label=\"t('costumerService')\"\n            :to=\"{ name: 'sac' }\"\n            data-testid=\"menu-sac-option\"\n        />\n        <CpBodyAction\n            icon=\"connect_without_contact\"\n            :label=\"t('connect')\"\n            :to=\"{ name: 'connect-with-us' }\"\n            data-testid=\"menu-connect-option\"\n        />\n        <CpBodyAction\n            icon=\"report\"\n            :label=\"t('report')\"\n            data-testid=\"menu-report-option\"\n            @click=\"emit('report')\"\n        />\n\n        <div :class=\"e('footer')\">\n            <CpText variant=\"caption-regular\">\n                {{ t('madeWith') }}\n            </CpText>\n            <CpIconStandard icon=\"favorite\" kind=\"small\" type=\"primary\" />\n            <CpText variant=\"caption-regular\">\n                {{ t('inMexico') }}\n            </CpText>\n        </div>\n    </div>\n</template>\n\n<style scoped lang=\"scss\">\n  @import 'assets/style/global';\n  .cp-menu {\n    &__main-action-container {\n      padding: $cp-gutter;\n    }\n    &__card {\n      border: $cp-border-standard;\n      border-radius: $cp-border-radius-rounded;\n      padding: $cp-gutter;\n      display: flex;\n      flex-direction: column;\n      gap: $cp-gutter-small;\n      justify-content: center;\n      align-items: center;\n    }\n    &__footer {\n      display: flex;\n      gap: 4px;\n      justify-content: center;\n      align-items: center;\n      padding: $cp-gutter;\n    }\n  }\n</style>\n\n<i18n locale=\"es-US\">\n  needActivateAccount: \"Tu cuenta requiere ser activada.\"\n  activateAccount: \"Activar cuenta\"\n  logMessage: \"Obtén una experiencia de navegación más personalizada al ingresar a tu cuenta.\"\n  logIn: \"Ingresar\"\n  home: \"Inicio\"\n  myAccount: \"Mi cuenta\"\n  myOrders: \"Mis pedidos\"\n  categories: \"Comprar por categoría\"\n  history: \"Historial\"\n  informationCenter: \"Centro de información\"\n  costumerService: \"Atención al cliente\"\n  connect: \"Conecta con nosotros\"\n  configuration: \"Configuración y acerca de la app\"\n  report: \"Reportar un problema\"\n  madeWith: \"Hecho con\"\n  inMexico: \"en México\"\n</i18n>\n","<script setup lang=\"ts\">\n  import {useI18n} from 'vue-i18n';\n  import {computed} from 'vue';\n  import useCpBem from '~/composables/useCpBem';\n  import CpSectionHeader from '~/components/cp/CpSection/CpSectionHeader/CpSectionHeader.vue';\n  import CpIconStandard from '~/components/cp/CpIcon/CpIconStandard/CpIconStandard.vue';\n  import type {IBodyAction} from '~/types';\n  import CpButton from '~/components/cp/CpButton/CpButton.vue';\n  import CpText from '~/components/cp/CpText/CpText.vue';\n  import CpBodyAction from '~/components/cp/CpBodyAction/CpBodyAction.vue';\n  import CpModal from '~/components/cp/CpModal/CpModal.vue';\n  import {EXTERNAL_LINKS} from '~/utils';\n\n  const showModal = defineModel<boolean>('showModal', {required: true});\n  const kind = defineModel<'Start' | 'PurchaseAndOrders'>('kind');\n\n  const emits = defineEmits({\n    closeModal: null,\n  });\n  const {b, e} = useCpBem('cp-modal-report-issue');\n  const {t} = useI18n();\n\n  interface IBodyActionReport extends IBodyAction {\n    click?: () => void\n  }\n  type modalData = {\n    title: string,\n    description: string,\n    actions: Array<IBodyActionReport>,\n    buttonText: string\n  }\n\n  const modalConfiguration = computed((): modalData => {\n    switch (kind.value) {\n      case 'Start':\n        return {\n          title: t('problem'),\n          description: t('guidance'),\n          actions: [\n            {\n              title: t('appFunctionality'),\n              icon: 'phone_android',\n              link: EXTERNAL_LINKS.mailtoAppSupport,\n            },\n            {\n              title: t('orderManagement'),\n              icon: 'shopping_cart',\n              click: () => {\n                kind.value = 'PurchaseAndOrders';\n              },\n            },\n          ],\n          buttonText: t('close'),\n        };\n      default:\n        return {\n          title: t('orderManagement'),\n          description: t('customerService'),\n          actions: [\n            {\n              title: 'Whatsapp',\n              icon: 'whatsapp',\n              link: EXTERNAL_LINKS.whatsapp,\n              target: '_blank',\n            },\n            {\n              title: t('phone'),\n              icon: 'phone',\n              link: EXTERNAL_LINKS.telCustomerSupport,\n            },\n            {\n              title: t('email'),\n              icon: 'mail',\n              link: EXTERNAL_LINKS.mailtoCustomerSupport,\n            },\n          ],\n          buttonText: t('back'),\n        };\n    }\n  });\n\n  const closeModal = () => {\n    kind.value = 'Start';\n    showModal.value = false;\n    emits('closeModal');\n  };\n\n  const handleButton = () => {\n    if (kind.value === 'Start') {\n      showModal.value = false;\n    } else {\n      kind.value = 'Start';\n    }\n  };\n\n</script>\n\n<template>\n    <div :class=\"b\">\n        <CpModal v-model:show=\"showModal\" @close-modal=\"closeModal\">\n            <CpSectionHeader :title=\"t('report')\" type=\"h3\" button=\"close\" @header-action=\"closeModal\" />\n            <div :class=\"e('body')\">\n                <CpIconStandard icon=\"feedback\" type=\"primary\" kind=\"extra-large\" />\n                <div :class=\"e('text-container')\">\n                    <CpText variant=\"subheading\">\n                        {{ t(`${modalConfiguration.title}`) }}\n                    </CpText>\n                    <CpText variant=\"body-regular\">\n                        {{ t(`${modalConfiguration.description}`) }}\n                    </CpText>\n                </div>\n            </div>\n            <div :class=\"e('options')\">\n                <CpBodyAction\n                    v-for=\"action in modalConfiguration.actions\"\n                    :key=\"action.title\"\n                    :icon=\"action.icon\"\n                    :accordion=\"false\"\n                    :label=\"action.title\"\n                    :divider=\"true\"\n                    :target=\"action.target\"\n                    :to=\"action.link\"\n                    @click=\"action.click\"\n                />\n            </div>\n            <div :class=\"e('button-container')\">\n                <CpButton :label=\"modalConfiguration.buttonText\"\n                    :full-width=\"true\"\n                    kind=\"label\"\n                    :hollow=\"true\"\n                    @click=\"handleButton\"\n                />\n            </div>\n        </CpModal>\n    </div>\n</template>\n\n<style scoped lang=\"scss\">\n  @import \"assets/style/global.scss\";\n  .cp-modal-report-issue {\n\n    &__body {\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      padding: $cp-gutter;\n      gap: $cp-gutter;\n    }\n\n    &__button-container {\n      width: 100%;\n      padding: $cp-gutter;\n    }\n\n    &__text-container {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      flex-direction: column;\n      gap: $cp-gutter-small;\n      text-align: center;\n    }\n\n    &__options {\n      border-top: $cp-border-standard;\n    }\n  }\n</style>\n\n<i18n locale=\"es-US\">\n  report: 'Realizar un reporte'\n  problem: '¿Tienes un problema?'\n  orderManagement: 'Compras o gestión de pedidos'\n  guidance: 'Selecciona con qué tipo de inconveniente te encontraste, para guiarte al mejor medio de comunicación con nosotros y darle solución.'\n  customerService: 'Selecciona la opción que prefieras para ponerte en contacto con Servicio al Cliente.'\n  close: 'Cerrar'\n  back: 'Regresar'\n  appFunctionality: 'Funcionamiento del sitio'\n  phone: 'Teléfono'\n  email: 'Correo electrónico'\n</i18n>\n","<script setup lang=\"ts\">\n  import {useCpUser} from '~/composables/useCpUser';\n  const user = useCpUser();\n  const handleLoginEvent = () => useEvent('show-login-modal', {show: true, route: 'home'});\n\n  const showModalActivateAccount = ref(false);\n\n  const kind = ref<'Start' | 'PurchaseAndOrders'>('Start');\n  const visibleModalReport = ref<boolean>(false);\n\n  // TODO: This page not exist in desktop version\n  useSeoMeta({\n    title: 'Menú | Cyberpuerta.mx',\n    // description: '',\n    // ogUrl: '',\n    ogTitle: 'Menú | Cyberpuerta.mx',\n    // ogDescription: '',\n  });\n  // useHead({\n  //   link: [{\n  //     rel: 'canonical',\n  //     href: '',\n  //   }],\n  // });\n</script>\n\n<template>\n    <div>\n        <CpMenu\n            :logged=\"user.isAuthenticated.value\"\n            :not-activated=\"!user.isConfirmed.value\"\n            @show-login-modal=\"handleLoginEvent\"\n            @activate-account=\"showModalActivateAccount = true\"\n            @report=\"visibleModalReport = true\"\n        />\n        <CpModalVerificationActivateAccount v-model:show=\"showModalActivateAccount\" />\n        <CpModalReportIssue v-model:showModal=\"visibleModalReport\" v-model:kind=\"kind\" />\n    </div>\n</template>\n"],"names":["emit","__emit","b","e","useCpBem","t","useI18n","showModal","_useModel","kind","emits","modalConfiguration","computed","EXTERNAL_LINKS","closeModal","handleButton","user","useCpUser","handleLoginEvent","useEvent","showModalActivateAccount","ref","visibleModalReport","useSeoMeta"],"mappings":"mpDAcE,MAAMA,EAAOC,EAMP,CAAC,EAAAC,EAAG,EAAAC,CAAC,EAAIC,EAAS,SAAS,EAC3B,CAAC,EAAAC,GAAKC,ijHCRN,MAAAC,EAAYC,iBACZC,EAAOD,YAEPE,EAAQT,EAGR,CAAC,EAAAC,EAAG,EAAAC,CAAC,EAAIC,EAAS,uBAAuB,EACzC,CAAC,EAAAC,GAAKC,IAYNK,EAAqBC,EAAS,IAAiB,CACnD,OAAQH,EAAK,MAAO,CAClB,IAAK,QACI,MAAA,CACL,MAAOJ,EAAE,SAAS,EAClB,YAAaA,EAAE,UAAU,EACzB,QAAS,CACP,CACE,MAAOA,EAAE,kBAAkB,EAC3B,KAAM,gBACN,KAAMQ,EAAe,gBACvB,EACA,CACE,MAAOR,EAAE,iBAAiB,EAC1B,KAAM,gBACN,MAAO,IAAM,CACXI,EAAK,MAAQ,mBACf,CACF,CACF,EACA,WAAYJ,EAAE,OAAO,CAAA,EAEzB,QACS,MAAA,CACL,MAAOA,EAAE,iBAAiB,EAC1B,YAAaA,EAAE,iBAAiB,EAChC,QAAS,CACP,CACE,MAAO,WACP,KAAM,WACN,KAAMQ,EAAe,SACrB,OAAQ,QACV,EACA,CACE,MAAOR,EAAE,OAAO,EAChB,KAAM,QACN,KAAMQ,EAAe,kBACvB,EACA,CACE,MAAOR,EAAE,OAAO,EAChB,KAAM,OACN,KAAMQ,EAAe,qBACvB,CACF,EACA,WAAYR,EAAE,MAAM,CAAA,CAE1B,CAAA,CACD,EAEKS,EAAa,IAAM,CACvBL,EAAK,MAAQ,QACbF,EAAU,MAAQ,GAClBG,EAAM,YAAY,CAAA,EAGdK,EAAe,IAAM,CACrBN,EAAK,QAAU,QACjBF,EAAU,MAAQ,GAElBE,EAAK,MAAQ,OACf,q3DC1FF,MAAMO,EAAOC,IACPC,EAAmB,IAAMC,EAAS,mBAAoB,CAAC,KAAM,GAAM,MAAO,MAAA,CAAO,EAEjFC,EAA2BC,EAAI,EAAK,EAEpCZ,EAAOY,EAAmC,OAAO,EACjDC,EAAqBD,EAAa,EAAK,EAGlC,OAAAE,EAAA,CACT,MAAO,wBAGP,QAAS,uBAAA,CAEV"}