{"version":3,"file":"-y7tj7xQ.js","sources":["../../../../pages/onboarding/verification/index.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {ROUTE_LOGIN, ROUTE_SIGNUP} from \"~/constants/routes\";\nimport * as zod from \"zod\";\nimport {URL_ACCOUNT, URL_REACTIVATE_PAGE} from \"~/constants/urls\";\nimport ValidationError from \"~/models/ValidationError\";\nimport {DEFAULT_ERROR_MESSAGE} from \"~/constants/error-messages\";\nimport {GET_USER} from \"~/stores/actions\";\nimport {onMounted} from \"vue\";\nimport AppStoreButtons from \"~/components/AppStoreButtons.vue\";\n\ndefinePageMeta({\n  layout: \"default-no-footer\",\n});\n\nconst routeLogin = ROUTE_LOGIN;\nconst routeSignup = ROUTE_SIGNUP;\nconst busy = ref(false);\nconst submitClicked = ref(false);\n\nconst verificationToken = ref(\"\");\nconst verificationCode = ref(\"\");\nconst errorMessage = ref<string | null>(null);\n\nconst route = useRoute();\nconst router = useRouter();\n\nconst store = useAuthStore();\n\nconst validationSchema = toTypedSchema(\n  zod.object({\n    code: zod\n      .string({\n        required_error: \"Code is required\",\n      })\n      .nullable(),\n  })\n);\n\nonMounted(() => {\n  verificationCode.value = route.query.code as string;\n  verificationToken.value = route.query.verificationId as string;\n  if (!verificationToken.value) {\n    router.push(ROUTE_LOGIN);\n  }\n});\n\nconst submitVerify = async function (values, actions) {\n  submitClicked.value = true;\n  try {\n    busy.value = true;\n    errorMessage.value = null;\n    const verifyResponse = await store[VERIFY]({\n      code: values.code,\n      verificationId: verificationToken.value,\n    });\n    if (verifyResponse.error) {\n      errorMessage.value = verifyResponse.error;\n\n      return;\n    }\n\n    await store[GET_USER]();\n    if (store.subscription === \"cancelled\") {\n      window.location.href = URL_REACTIVATE_PAGE;\n    } else {\n      window.location.href = verifyResponse.redirect\n        ? verifyResponse.redirect\n        : URL_ACCOUNT;\n    }\n  } catch (error) {\n    if (error instanceof ValidationError) {\n      actions.setErrors(error.fieldErrors);\n    } else {\n      errorMessage.value = error.response?.data.error || DEFAULT_ERROR_MESSAGE;\n    }\n  } finally {\n    busy.value = false;\n  }\n};\n</script>\n\n<template>\n  <div class=\"tw-overflow-hidden tw-flex-1 tw-flex tw-flex-col\">\n    <section\n      class=\"tw-max-w-screen-xxl tw-w-full tw-mx-auto tw-relative tw-overflow-hidden md:tw-overflow-visible tw-pt-[32px] md:tw-pt-[42px] tw-pb-4 sm:tw-pb-2 tw-z-10 tw-bg-[#f8f0e6]\"\n    >\n      <img\n        alt=\"\"\n        class=\"tw-hidden md:tw-block tw-absolute -tw-bottom-[100px] lg:tw-bottom-[-158px] tw-left-[20px] tw-w-[200px] lg:tw-w-[250px] min-[1024px]:tw-max-w-[330px] min-[1420px]:tw-max-w-[492px] min-[1024px]:tw-w-full\"\n        src=\"/assets/images/signup/left-illustration.png\"\n      />\n      <img\n        alt=\"\"\n        class=\"tw-hidden md:tw-block tw-absolute -tw-bottom-[120px] lg:-tw-bottom-[100px] min-[1420px]:-tw-bottom-[181px] tw-right-[20px] lg:tw-right-[50px] min-[1420px]:tw-right-[110px] tw-w-[200px] min-[1024px]:tw-max-w-[250px] min-[1420px]:tw-max-w-[390px] min-[1024px]:tw-w-full\"\n        src=\"/assets/images/signup/bottom-illustration.png\"\n      />\n      <img\n        alt=\"\"\n        class=\"tw-absolute -tw-top-[50px] md:-tw-top-2 -tw-top-2 -tw-right-1 min-[380px]:tw-right-2 md:-tw-right-[20px] lg:tw-right-[72px] tw-w-[180px] lg:tw-w-[21vw] tw-max-w-[283px] tw-pointer-events-none -tw-z-1\"\n        src=\"/assets/images/signup/top-illustration.png\"\n      />\n\n      <div class=\"tw-container\">\n        <div\n          class=\"tw-max-w-[308px] md:tw-max-w-none tw-mx-auto tw-pr-[110px] md:tw-pr-0\"\n        >\n          <h1\n            class=\"tw-text-[22px] md:tw-text-[28px] lg:tw-text-[35px] tw-font-black md:tw-text-center tw-leading-[1.04] md:tw-leading-normal tw-mb-[18px] md:tw-mb-1\"\n          >\n            Please enter the verification code<br />\n            that was sent to your email.\n          </h1>\n        </div>\n\n        <div class=\"w-full tw-max-w-[308px] md:tw-max-w-[360px] tw-mx-auto\">\n          <div class=\"mx-auto mt-24 w-full px-36 sm:max-w-408\">\n            <Form\n              ref=\"form\"\n              v-slot=\"{ errors }\"\n              :validation-schema=\"validationSchema\"\n              class=\"w-full tw-max-w-[308px] md:tw-max-w-[360px] tw-mx-auto\"\n              novalidate\n              @submit=\"submitVerify\"\n            >\n              <div\n                v-if=\"errorMessage\"\n                aria-live=\"polite\"\n                class=\"input-error-msg tw-mb-2\"\n                v-text=\"errorMessage\"\n              ></div>\n              <div>\n                <div class=\"tw-mb-[9px] email-input\">\n                  <Field\n                    :aria-invalid=\"submitClicked && Boolean(errors['code'])\"\n                    :class=\"{\n                      'input-error': submitClicked && Boolean(errors['code']),\n                    }\"\n                    :model-value=\"verificationCode\"\n                    aria-errormessage=\"error-code\"\n                    autocomplete=\"code\"\n                    class=\"tw-h-10 tw-w-full tw-rounded-[7px] tw-px-4 tw-text-base tw-nl-green-100 placeholder:tw-text-nl-green-100/50 tw-shadow-nl-6\"\n                    name=\"code\"\n                    placeholder=\"Code from email\"\n                    type=\"text\"\n                  />\n                  <ErrorMessage\n                    class=\"input-error-msg tw-mt-2\"\n                    name=\"code\"\n                    v-if=\"submitClicked\"\n                  />\n                </div>\n              </div>\n              <div></div>\n              <div class=\"mt-38 sm:mt-20\">\n                <button\n                  @click=\"submitClicked = true\"\n                  :disabled=\"busy\"\n                  class=\"btn tw-w-full sm:tw-mt-[12px] tw-mt-[22px] focus:tw-bg-nl-violet-200 tw-text-[16px] p-2 min-h-[42px] flex items-center hover:tw-bg-nl-violet-200 tw-font-bold md:tw-font-semibold md:tw-py-[11px]\"\n                  type=\"submit\"\n                >\n                  Verify\n                </button>\n\n                <div\n                  class=\"tw-mt-[17px] tw-text-center sm:tw-text-[16px] tw-text-[14px] tracking-a03\"\n                >\n                  The code may take up to 1-2 minutes to arrive.<br />\n                  If you did not receive a code, please try\n                  <router-link :to=\"routeLogin\"><u>logging in</u></router-link>\n                  again or reach out to\n                  <a class=\"link\" href=\"mailto: support@nurturelife.com\"\n                    >support@nurturelife.com</a\n                  >.\n                </div>\n\n                <div\n                  class=\"tw-flex tw-items-center tw-justify-center tw-gap-3 tw-font-bold tw-py-4\"\n                >\n                  <CaptureIconWave />\n                  OR\n                  <CaptureIconWave />\n                </div>\n\n                <div\n                  class=\"tw-flex tw-flex-wrap tw-items-center tw-justify-center tw-uppercase tw-text-[14px] tw-leading-[1.28] tw-gap-[6px]\"\n                >\n                  <router-link\n                    :to=\"routeLogin\"\n                    class=\"tw-underline hover:tw-no-underline\"\n                    >Log In\n                  </router-link>\n                  |\n                  <router-link\n                    :to=\"routeSignup\"\n                    class=\"tw-underline hover:tw-no-underline\"\n                    >sign up\n                  </router-link>\n                </div>\n              </div>\n            </Form>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section\n      class=\"tw-flex-1 tw-bg-nl-green-400 tw-text-nl-yellow-100 tw-pt-11 sm:tw-pt-[100px] tw-pb-[60px] lg:tw-pt-[96px] sm:tw-pb-[85px] tw-text-left sm:tw-text-center tw-font-agenda sm:tw-mt-0 tw-relative tw-z-1 tw-overflow-hidden\"\n    >\n      <div\n        class=\"tw-absolute tw-top-[-2px] tw-left-0 -tw-right-[30px] md:tw-right-0 max-[479px]:tw-h-[38px] max-[767px]:tw-h-[50px] md:tw-h-[60px] lg:tw-h-[100px] tw-w-full tw-bg-greenwavedown-mb md:tw-bg-greenwavedown tw-bg-center lg:tw-bg-[calc(50%+118px)_top] md:tw-bg-[length:1223px_59px] tw-z-1 tw-bg-repeat-x max-md:tw-bg-cover\"\n      ></div>\n\n      <AppStoreButtons></AppStoreButtons>\n    </section>\n  </div>\n</template>\n"],"names":["routeLogin","ROUTE_LOGIN","routeSignup","ROUTE_SIGNUP","busy","ref","submitClicked","verificationToken","verificationCode","errorMessage","route","useRoute","router","useRouter","store","useAuthStore","validationSchema","toTypedSchema","zod.object","zod.string","onMounted","submitVerify","values","actions","verifyResponse","VERIFY","GET_USER","URL_REACTIVATE_PAGE","URL_ACCOUNT","error","ValidationError","_a","DEFAULT_ERROR_MESSAGE"],"mappings":"4gGAcA,MAAMA,EAAaC,EACbC,EAAcC,EACdC,EAAOC,EAAI,EAAK,EAChBC,EAAgBD,EAAI,EAAK,EAEzBE,EAAoBF,EAAI,EAAE,EAC1BG,EAAmBH,EAAI,EAAE,EACzBI,EAAeJ,EAAmB,IAAI,EAEtCK,EAAQC,IACRC,EAASC,IAETC,EAAQC,IAERC,EAAmBC,EACvBC,EAAW,CACT,KAAMC,EACI,CACN,eAAgB,kBACjB,CAAA,EACA,SAAS,CAAA,CACb,CAAA,EAGHC,EAAU,IAAM,CACGZ,EAAA,MAAQE,EAAM,MAAM,KACnBH,EAAA,MAAQG,EAAM,MAAM,eACjCH,EAAkB,OACrBK,EAAO,KAAKX,CAAW,CACzB,CACD,EAEK,MAAAoB,EAAe,eAAgBC,EAAQC,EAAS,OACpDjB,EAAc,MAAQ,GAClB,GAAA,CACFF,EAAK,MAAQ,GACbK,EAAa,MAAQ,KACrB,MAAMe,EAAiB,MAAMV,EAAMW,CAAM,EAAE,CACzC,KAAMH,EAAO,KACb,eAAgBf,EAAkB,KAAA,CACnC,EACD,GAAIiB,EAAe,MAAO,CACxBf,EAAa,MAAQe,EAAe,MAEpC,MACF,CAEM,MAAAV,EAAMY,CAAQ,IAChBZ,EAAM,eAAiB,YACzB,OAAO,SAAS,KAAOa,EAEvB,OAAO,SAAS,KAAOH,EAAe,SAClCA,EAAe,SACfI,QAECC,EAAO,CACVA,aAAiBC,EACXP,EAAA,UAAUM,EAAM,WAAW,EAEnCpB,EAAa,QAAQsB,EAAAF,EAAM,WAAN,YAAAE,EAAgB,KAAK,QAASC,CACrD,QACA,CACA5B,EAAK,MAAQ,EACf,CAAA"}