{"version":3,"file":"DmRqVc39.js","sources":["../../../../components/Contact.vue"],"sourcesContent":["<script setup>\nconst config = useRuntimeConfig();\n\nconst formState = reactive({\n  firstname: \"\",\n  lastname: \"\",\n  phonenumber: \"\",\n  email: \"\",\n  title: \"\",\n  message: \"\",\n  demands: [],\n  source: 12,\n});\n\nconst validatorPhonenumber = async (_rule, value) => {\n  const phoneNumberRegex = /^(0[3|5|7|8|9])+([0-9]{8})$/;\n\n  if (value.length && !phoneNumberRegex.test(value)) {\n    return Promise.reject('Số điện thoại không hợp lệ');\n  }\n\n  if (errors.phonenumber) {\n    return Promise.reject(errors.phonenumber);\n  }\n\n  return Promise.resolve();\n};\n\nconst validatorEmail = async (_rule, value) => {\n  if (errors.email) {\n    return Promise.reject(errors.email);\n  }\n  return Promise.resolve();\n};\n\nconst rules = {\n  firstname: { required: true, message: \"Tên không được để trống\" },\n  lastname: { required: true, message: \"Họ không được để trống\" },\n  phonenumber: [{ required: true, message: \"Số điện thoại không được để trống\" }, { validator: validatorPhonenumber }],\n  email: [\n    { required: true, message: \"Email không được để trống\" },\n    { type: \"email\", message: \"Email không đúng định dạng\" },\n    { validator: validatorEmail },\n  ],\n  title: { required: true, message: \"Chức vụ không được để trống\" },\n  message: { required: true, message: \"Lời nhắn không được để trống\" },\n};\n\nlet errors = {};\n\nconst demands = ref([]);\n\nconst loading = ref(false);\nconst formRef = ref();\nconst visibleResultModal = ref(false);\n\nconst getDemands = async () => {\n  try {\n    const response = await $fetch(\"api/contacts/demands\", { baseURL: config.public.baseUrl.crm });\n    demands.value = response.data;\n  } catch (error) {\n    console.log(error);\n  }\n};\n\nconst onSubmit = async () => {\n  loading.value = true;\n  const formData = new FormData();\n\n  for (const key in formState) {\n    if (key === \"demands\") {\n      for (const id of formState[key]) {\n        formData.append(\"demands[]\", +id);\n      }\n      continue;\n    }\n\n    formData.append(key, formState[key]);\n  }\n\n  try {\n    const response = await $fetch(\"api/lead/create\", {\n      baseURL: config.public.baseUrl.crm,\n      method: \"POST\",\n      body: formData,\n    });\n    if (response.status) {\n      loading.value = false;\n      formRef.value.resetFields();\n      visibleResultModal.value = true;\n    }\n  } catch (error) {\n    if (error.status === 404) {\n      errors = error.data.error;\n      formRef.value.validateFields();\n      errors = {};\n    }\n    loading.value = false;\n    console.log(error);\n  }\n};\n\nonMounted(() => {\n  getDemands();\n});\n</script>\n\n<template>\n  <div class=\"xl:flex gap-8\">\n    <div class=\"basis-1/2\">\n      <div class=\"p-10\">\n        <h3 class=\"border-b-2 pb-4\">Quy trình triển khai</h3>\n        <div class=\"pt-5 flex\">\n          <h3 class=\"text-primary\">01</h3>\n          <div class=\"pt-2 pl-5\">Tạo tài khoản</div>\n        </div>\n        <div class=\"pt-5 flex\">\n          <h3 class=\"text-primary\">02</h3>\n          <div class=\"pt-2 pl-5\">Dùng thử sản phẩm</div>\n        </div>\n        <div class=\"pt-5 flex\">\n          <h3 class=\"text-primary\">03</h3>\n          <div class=\"pt-2 pl-5\">Đề xuất gói sản phẩm phù hợp</div>\n        </div>\n        <div class=\"pt-5 flex\">\n          <h3 class=\"text-primary\">04</h3>\n          <div class=\"pt-2 pl-5\">Lên phương án đề xuất</div>\n        </div>\n        <div class=\"pt-5 flex\">\n          <h3 class=\"text-primary\">05</h3>\n          <div class=\"pt-2 pl-5\">Gửi bản báo giá</div>\n        </div>\n        <div class=\"pt-5 flex\">\n          <h3 class=\"text-primary\">06</h3>\n          <div class=\"pt-2 pl-5\">Ký hợp đồng & triển khai</div>\n        </div>\n      </div>\n    </div>\n    <div class=\"basis-1/2\">\n      <section id=\"contact-us\" class=\"bg-white p-10 rounded-[48px] shadow-lg shadow-[#c6c6c6]\">\n        <div class=\"max-xl:text-center\">\n          <h3 class=\"font-semibold\">Hãy kết nối với chúng tôi ngay</h3>\n          <p class=\"subtitle-2 text-[#333333] mt-4\">\n            Vui lòng điền thông tin của bạn ở dưới đây để đăng ký dùng thử hoặc nhận tư vấn miễn phí.\n          </p>\n\n          <a-form\n            ref=\"formRef\"\n            class=\"w-full mt-5 max-xl:text-left\"\n            layout=\"vertical\"\n            :model=\"formState\"\n            :rules=\"rules\"\n            @finish=\"onSubmit\"\n          >\n            <div class=\"sm:flex\">\n              <a-form-item label=\"Tên\" class=\"sm:w-1/2\" name=\"firstname\">\n                <a-input v-model:value=\"formState.firstname\" placeholder=\"Nhập tên\" />\n              </a-form-item>\n\n              <a-form-item label=\"Họ\" class=\"sm:w-1/2 sm:ml-6\" name=\"lastname\">\n                <a-input v-model:value=\"formState.lastname\" placeholder=\"Nhập họ\" />\n              </a-form-item>\n            </div>\n\n            <a-form-item label=\"Số điện thoại\" class=\"flex-1\" name=\"phonenumber\">\n              <a-input v-model:value=\"formState.phonenumber\" placeholder=\"Nhập số điện thoại\" />\n            </a-form-item>\n\n            <a-form-item label=\"Email\" class=\"flex-1\" name=\"email\">\n              <a-input v-model:value=\"formState.email\" placeholder=\"Nhập email\" />\n            </a-form-item>\n\n            <a-form-item label=\"Sản phẩm quan tâm\" class=\"block flex-1\" name=\"demands\">\n              <a-checkbox-group\n                v-model:value=\"formState.demands\"\n                class=\"w-full grid grid-cols-[repeat(auto-fit,minmax(230px,1fr))] gap-x-1 gap-y-2\"\n              >\n                <a-checkbox class=\"!ml-0\" v-for=\"item in demands\" :value=\"+item.id\">{{ item.description }}</a-checkbox>\n              </a-checkbox-group>\n            </a-form-item>\n\n            <a-form-item label=\"Lời nhắn\" name=\"message\">\n              <a-textarea v-model:value=\"formState.message\" placeholder=\"Để lại lời nhắn\" :rows=\"5\"></a-textarea>\n            </a-form-item>\n\n            <a-form-item class=\"text-right\">\n              <button\n                class=\"primary w-full hover:opacity-80 transition-all duration-300\"\n                type=\"submit\"\n                :disabled=\"loading\"\n              >\n                Gửi thông tin\n              </button>\n            </a-form-item>\n          </a-form>\n\n          <a-modal :visible=\"visibleResultModal\" :footer=\"null\" :closable=\"false\">\n            <h3 class=\"text-primary text-center\">Cám ơn bạn đã quan tâm giải pháp của Miraway.</h3>\n            <div class=\"mt-2 text-center\">Chúng tôi sẽ liên hệ bạn thong thời gian sớm nhất!</div>\n\n            <div class=\"text-center mt-6\">\n              <button class=\"primary hover:opacity-80 transition-all duration-300\" @click=\"visibleResultModal = false\">\n                Đóng\n              </button>\n            </div>\n          </a-modal>\n        </div>\n      </section>\n    </div>\n  </div>\n</template>\n"],"names":["config","useRuntimeConfig","formState","reactive","rules","_rule","value","phoneNumberRegex","errors","demands","ref","loading","formRef","visibleResultModal","getDemands","response","error","onSubmit","formData","key","id","onMounted"],"mappings":"yjDACA,MAAMA,EAASC,EAAgB,EAEzBC,EAAYC,EAAS,CACzB,UAAW,GACX,SAAU,GACV,YAAa,GACb,MAAO,GACP,MAAO,GACP,QAAS,GACT,QAAS,CAAE,EACX,OAAQ,EACV,CAAC,EAuBKC,EAAQ,CACZ,UAAW,CAAE,SAAU,GAAM,QAAS,yBAA2B,EACjE,SAAU,CAAE,SAAU,GAAM,QAAS,wBAA0B,EAC/D,YAAa,CAAC,CAAE,SAAU,GAAM,QAAS,qCAAuC,CAAE,UAxBvD,MAAOC,EAAOC,IAAU,CACnD,MAAMC,EAAmB,8BAEzB,OAAID,EAAM,QAAU,CAACC,EAAiB,KAAKD,CAAK,EACvC,QAAQ,OAAO,4BAA4B,EAGhDE,EAAO,YACF,QAAQ,OAAOA,EAAO,WAAW,EAGnC,QAAQ,SACjB,EAYqH,EACnH,MAAO,CACL,CAAE,SAAU,GAAM,QAAS,2BAA6B,EACxD,CAAE,KAAM,QAAS,QAAS,4BAA8B,EACxD,CAAE,UAdiB,MAAOH,EAAOC,IAC/BE,EAAO,MACF,QAAQ,OAAOA,EAAO,KAAK,EAE7B,QAAQ,SAUgB,CAC9B,EACD,MAAO,CAAE,SAAU,GAAM,QAAS,6BAA+B,EACjE,QAAS,CAAE,SAAU,GAAM,QAAS,8BAAgC,CACtE,EAEA,IAAIA,EAAS,CAAA,EAEb,MAAMC,EAAUC,EAAI,CAAA,CAAE,EAEhBC,EAAUD,EAAI,EAAK,EACnBE,EAAUF,EAAG,EACbG,EAAqBH,EAAI,EAAK,EAE9BI,EAAa,SAAY,CAC7B,GAAI,CACF,MAAMC,EAAW,MAAM,OAAO,uBAAwB,CAAE,QAASf,EAAO,OAAO,QAAQ,GAAG,CAAE,EAC5FS,EAAQ,MAAQM,EAAS,IAC1B,OAAQC,EAAO,CACd,QAAQ,IAAIA,CAAK,CAClB,CACH,EAEMC,EAAW,SAAY,CAC3BN,EAAQ,MAAQ,GAChB,MAAMO,EAAW,IAAI,SAErB,UAAWC,KAAOjB,EAAW,CAC3B,GAAIiB,IAAQ,UAAW,CACrB,UAAWC,KAAMlB,EAAUiB,CAAG,EAC5BD,EAAS,OAAO,YAAa,CAACE,CAAE,EAElC,QACD,CAEDF,EAAS,OAAOC,EAAKjB,EAAUiB,CAAG,CAAC,CACpC,CAED,GAAI,EACe,MAAM,OAAO,kBAAmB,CAC/C,QAASnB,EAAO,OAAO,QAAQ,IAC/B,OAAQ,OACR,KAAMkB,CACZ,CAAK,GACY,SACXP,EAAQ,MAAQ,GAChBC,EAAQ,MAAM,cACdC,EAAmB,MAAQ,GAE9B,OAAQG,EAAO,CACVA,EAAM,SAAW,MACnBR,EAASQ,EAAM,KAAK,MACpBJ,EAAQ,MAAM,iBACdJ,EAAS,CAAA,GAEXG,EAAQ,MAAQ,GAChB,QAAQ,IAAIK,CAAK,CAClB,CACH,EAEA,OAAAK,EAAU,IAAM,CACdP,GACF,CAAC"}