{"version":3,"file":"contact.2380fd45.js","sources":["../../../../components/local/contact/ContactForm.vue"],"sourcesContent":["<template>\n  <div class=\"mx-auto max-w-2xl px-4 py-8\">\n    <div class=\"mb-8 text-center\">\n      <h1 class=\"text-3xl font-bold tracking-tight text-primary\">Contact Support</h1>\n      <p class=\"mt-2 text-lg text-gray-600\">\n        We're here to help. Fill out the form below and we'll get back to you as soon as\n        possible.\n      </p>\n    </div>\n    <div class=\"rounded-lg border bg-white p-8 shadow-sm contact-form\">\n      <form @submit.prevent=\"onSubmit\" class=\"space-y-8\">\n        <div>\n          <label for=\"category\" class=\"block text-sm font-medium text-gray-700\">Support Category</label>\n          <select v-model=\"form.category\" id=\"category\"\n            class=\"mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm\">\n            <option value=\"\" disabled>Select a category</option>\n            <option v-for=\"category in supportCategories\" :key=\"category.value\" :value=\"category.value\">\n              {{ category.label }}\n            </option>\n          </select>\n        </div>\n        <div>\n          <label for=\"subject\" class=\"block text-sm font-medium text-gray-700\">Subject</label>\n          <input v-model=\"form.subject\" type=\"text\" id=\"subject\"\n            class=\"mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm\"\n            placeholder=\"Enter the subject of your inquiry\" />\n          <span v-if=\"errors.subject\" class=\"text-red-500 text-sm\">{{\n            errors.subject\n            }}</span>\n        </div>\n        <div class=\"grid gap-4 sm:grid-cols-2\">\n          <div>\n            <label for=\"name\" class=\"block text-sm font-medium text-gray-700\">Name</label>\n            <input v-model=\"form.name\" type=\"text\" id=\"name\"\n              class=\"mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm\"\n              placeholder=\"Your name\" />\n            <span v-if=\"errors.name\" class=\"text-red-500 text-sm\">{{ errors.name }}</span>\n          </div>\n          <div>\n            <label for=\"email\" class=\"block text-sm font-medium text-gray-700\">Email</label>\n            <input v-model=\"form.email\" type=\"email\" id=\"email\"\n              class=\"mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm\"\n              placeholder=\"Your email address\" />\n            <span v-if=\"errors.email\" class=\"text-red-500 text-sm\">{{\n              errors.email\n              }}</span>\n          </div>\n        </div>\n        <div>\n          <label for=\"message\" class=\"block text-sm font-medium text-gray-700\">Message</label>\n          <textarea v-model=\"form.message\" id=\"message\" rows=\"4\"\n            class=\"mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm\"\n            placeholder=\"Please describe your issue or question in detail\"></textarea>\n          <span v-if=\"errors.message\" class=\"text-red-500 text-sm\">{{\n            errors.message\n            }}</span>\n        </div>\n        <button type=\"submit\"\n          class=\"w-full flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2\"\n          :disabled=\"isLoading\">\n          <span v-if=\"isLoading\" class=\"flex items-center\">\n            <svg class=\"animate-spin -ml-1 mr-2 h-5 w-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n              viewBox=\"0 0 24 24\">\n              <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n              <path class=\"opacity-75\" fill=\"currentColor\"\n                d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n              </path>\n            </svg>\n            Sending...\n          </span>\n          <span v-else>Send Support Request</span>\n        </button>\n      </form>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref, reactive, onMounted, getCurrentInstance } from \"vue\";\nimport { useAuthStore } from \"@/stores/auth\";\nimport { Api } from \"@/lib\";\n\nconst authStore = useAuthStore();\nconst app = getCurrentInstance();\nconst api = app?.appContext.config.globalProperties.$api as Api;\n\nconst supportCategories = [\n  { value: \"Contact Us\", label: \"Contact Us\" },\n  { value: \"Change Plan\", label: \"Change Plan\" },\n  { value: \"Move Address\", label: \"Move Address\" },\n];\n\nconst form = reactive({\n  category: \"\",\n  subject: \"\",\n  name: \"\",\n  email: \"\",\n  message: \"\",\n  responseMethod: \"email\",\n  phone: \"\",\n});\n\nconst errors = reactive({\n  category: \"\",\n  subject: \"\",\n  name: \"\",\n  email: \"\",\n  message: \"\",\n});\n\nconst isLoading = ref(false);\n\nconst validateEmail = (email: string) => {\n  const re = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n  return re.test(String(email).toLowerCase());\n};\n\nconst validateForm = () => {\n  let valid = true;\n  if (!form.name) {\n    errors.name = \"Name is required.\";\n    valid = false;\n  } else {\n    errors.name = \"\";\n  }\n  if (!form.email) {\n    errors.email = \"Email is required.\";\n    valid = false;\n  } else if (!validateEmail(form.email)) {\n    errors.email = \"Invalid email format.\";\n    valid = false;\n  } else {\n    errors.email = \"\";\n  }\n  if (!form.subject) {\n    errors.subject = \"Subject is required.\";\n    valid = false;\n  } else {\n    errors.subject = \"\";\n  }\n  if (!form.message) {\n    errors.message = \"Message is required.\";\n    valid = false;\n  } else {\n    errors.message = \"\";\n  }\n  return valid;\n};\n\nconst onSubmit = async () => {\n  if (!validateForm()) {\n    return;\n  }\n  isLoading.value = true;\n  try {\n    const accessToken = await authStore.getAccessTokenSilently();\n\n    const response = await api.post(\n      \"zendesk/createticket\",\n      {\n        category: form.category,\n        subject: form.subject,\n        name: form.name,\n        email: form.email,\n        message: form.message,\n      },\n      {\n        headers: { Authorization: `Bearer ${accessToken}` },\n      }\n    );\n\n    if (response.status === 200) {\n      alert(\"Support request submitted successfully. A Zendesk ticket has been created.\");\n      // Reset form\n      Object.keys(form).forEach((key) => {\n        (form as any)[key as keyof typeof form] = \"\";\n      });\n\n      if (authStore.user) {\n        form.name = authStore.user.name || \"\";\n        form.email = authStore.user.email || \"\";\n      }\n    } else {\n      throw new Error(\"Failed to submit support request.\");\n    }\n  } catch (err) {\n    console.error(err);\n    alert(\"Failed to submit support request.\");\n  } finally {\n    isLoading.value = false;\n  }\n};\n\nonMounted(async () => {\n  await authStore.loadUser();\n\n  if (authStore.user) {\n    form.name = authStore.user.name || \"\";\n    form.email = authStore.user.email || \"\";\n  }\n});\n</script>\n\n<style scoped>\n.contact-form {\n  background-color: #d7e6f2;\n  color: black;\n}\n</style>\n"],"names":["authStore","useAuthStore","app","getCurrentInstance","api","supportCategories","form","reactive","errors","isLoading","ref","validateEmail","email","validateForm","valid","onSubmit","accessToken","key","err","onMounted"],"mappings":"88DAkFA,MAAMA,EAAYC,IACZC,EAAMC,IACNC,EAAMF,GAAA,YAAAA,EAAK,WAAW,OAAO,iBAAiB,KAE9CG,EAAoB,CACxB,CAAE,MAAO,aAAc,MAAO,YAAa,EAC3C,CAAE,MAAO,cAAe,MAAO,aAAc,EAC7C,CAAE,MAAO,eAAgB,MAAO,cAAe,CAAA,EAG3CC,EAAOC,EAAS,CACpB,SAAU,GACV,QAAS,GACT,KAAM,GACN,MAAO,GACP,QAAS,GACT,eAAgB,QAChB,MAAO,EAAA,CACR,EAEKC,EAASD,EAAS,CACtB,SAAU,GACV,QAAS,GACT,KAAM,GACN,MAAO,GACP,QAAS,EAAA,CACV,EAEKE,EAAYC,EAAI,EAAK,EAErBC,EAAiBC,GACV,6BACD,KAAK,OAAOA,CAAK,EAAE,aAAa,EAGtCC,EAAe,IAAM,CACzB,IAAIC,EAAQ,GACR,OAACR,EAAK,KAIRE,EAAO,KAAO,IAHdA,EAAO,KAAO,oBACNM,EAAA,IAILR,EAAK,MAGEK,EAAcL,EAAK,KAAK,EAIlCE,EAAO,MAAQ,IAHfA,EAAO,MAAQ,wBACPM,EAAA,KAJRN,EAAO,MAAQ,qBACPM,EAAA,IAOLR,EAAK,QAIRE,EAAO,QAAU,IAHjBA,EAAO,QAAU,uBACTM,EAAA,IAILR,EAAK,QAIRE,EAAO,QAAU,IAHjBA,EAAO,QAAU,uBACTM,EAAA,IAIHA,CAAA,EAGHC,EAAW,SAAY,CACvB,GAACF,IAGL,CAAAJ,EAAU,MAAQ,GACd,GAAA,CACI,MAAAO,EAAc,MAAMhB,EAAU,yBAgBhC,IAda,MAAMI,EAAI,KACzB,uBACA,CACE,SAAUE,EAAK,SACf,QAASA,EAAK,QACd,KAAMA,EAAK,KACX,MAAOA,EAAK,MACZ,QAASA,EAAK,OAChB,EACA,CACE,QAAS,CAAE,cAAe,UAAUU,GAAc,CACpD,CAAA,GAGW,SAAW,IACtB,MAAM,4EAA4E,EAElF,OAAO,KAAKV,CAAI,EAAE,QAASW,GAAQ,CAChCX,EAAaW,CAAwB,EAAI,EAAA,CAC3C,EAEGjB,EAAU,OACPM,EAAA,KAAON,EAAU,KAAK,MAAQ,GAC9BM,EAAA,MAAQN,EAAU,KAAK,OAAS,QAGjC,OAAA,IAAI,MAAM,mCAAmC,QAE9CkB,GACP,QAAQ,MAAMA,CAAG,EACjB,MAAM,mCAAmC,CAAA,QACzC,CACAT,EAAU,MAAQ,EACpB,EAAA,EAGF,OAAAU,EAAU,SAAY,CACpB,MAAMnB,EAAU,WAEZA,EAAU,OACPM,EAAA,KAAON,EAAU,KAAK,MAAQ,GAC9BM,EAAA,MAAQN,EAAU,KAAK,OAAS,GACvC,CACD"}