{"version":3,"mappings":";0lCAGA,MAAMA,EAAYC,IAEZC,EAAQC,EAORC,EAAYC,EAAS,IACrBH,EAAM,MAAQA,EAAM,MAAc,GAAGA,EAAM,IAAI,KAAKA,EAAM,KAAK,GAC/DA,EAAM,MAAcA,EAAM,MACvB,IACR,EAEK,CAAE,aAAAI,GAAiBC,IAEnBC,EAAaH,EAAS,IACnB,GAAGL,EAAU,MAAQ,KAAO,EAAE,cAAcE,EAAM,QAAQ,IAAI,EACtE,k/BCnBD,MAAMA,EAAQC,EAKRM,EAAQ,gBAERC,EAAWL,EAAS,IAAM,CAC9B,GAAI,CAACH,EAAM,KAAM,MAAO,GACxB,MAAMS,GAAWT,EAAM,MAAQ,IAAI,MAAMO,CAAK,EAC1C,OAACE,EACEA,EAAQ,IAAKC,GAAUA,EAAM,MAAM,EAAG,EAAE,CAAC,EAD3B,EAC2B,CACjD,EAEKC,EAAOC,EAAe,EAAE,EAE3B,GAAAJ,EAAS,MAAM,OAAO,CAEjB,MAAE,KAAMK,CAAA,GAAmB,CAAAC,EAAAC,CAAA,EAAAC,EAAA,IAAAC,EAAS,gBAAiB,CACzD,MAAO,CACL,KAAMT,EAAS,MAAM,KAAK,GAAG,EAC7B,SAAUR,EAAM,QAClB,gBACD,oBAEIW,EAAA,MAAQE,EAAS,OAAsB,EAC9C,CAGM,MAAAK,EAAYf,EAAS,IAAM,CAC3B,IAACH,EAAM,KAAa,SACxB,GAAI,CAACW,EAAK,MAAO,OAAOX,EAAM,KAC9B,IAAImB,EAAOnB,EAAM,KACR,OAAAQ,EAAA,MAAM,QAASY,GAAY,CAC5B,MAAAC,GAAeV,EAAK,OAAS,CAAC,GAAG,KAAMW,GAAMA,EAAE,OAASF,CAAO,EAChEC,IACLF,EAAOA,EAAK,QAAQ,YAAYC,CAAO,aAAcC,EAAY,IAAI,GACtE,EACMF,CAAA,CACR,qdC1CYI,GAAa,IAAM,CAC9B,MAAMC,EAAQC,IACRC,EAAUd,EAAI,EAAK,EAEnBe,EAAkBxB,EAAS,IACxB,MAAM,QAAQqB,EAAM,MAAM,OAAO,EACpCA,EAAM,MAAM,QACZ,CAACA,EAAM,MAAM,OAAO,EAAE,OAAQI,GAAMA,CAAC,EAAE,IAAKA,GAAMA,GAAA,YAAAA,EAAG,aAAa,CACvE,EAEKC,EAAqB1B,EAAS,IAAM,CACxC,MAAM2B,EAAWH,EAAgB,MAAM,SAAS,UAAU,EACpDI,EAAeJ,EAAgB,MAAM,SAAS,UAAU,EACvD,OACL,SAAAG,EACA,UAAW,CAACA,GAAY,CAACC,EACzB,aAAAA,CAAA,CACF,CACD,EAEKC,EAAyC7B,EAAS,IAAM,CAC5D,MAAM8B,EACJN,EAAgB,MAAM,SAAS,uBAAuB,GAAKD,EAAQ,MAC9D,OACL,WAAAO,EACA,UAAW,CAACA,CAAA,CACd,CACD,EAED,OAAAC,EAAU,IAAM,CACdR,EAAQ,MAAQ,GACjB,EAEM,CACL,mBAAAG,EACA,uCAAAG,CAAA,CAEJ,sgCClCA,MAAMR,EAAQC,IACR3B,EAAYC,IACZ,CAAE,mBAAA8B,EAAoB,uCAAAG,CAAuC,EACjET,GAAW,EAEPY,EAAaC,KAOnB,QAAQ,KAAK,eAAe,EAEtB,MAAA9B,EAAaH,EAAS,IACnBqB,EAAM,OAAO,YAChB,kCAAkCA,EAAM,OAAO,WAAW,GAC1D,oCAAoCW,EAAW,QAAQ,EAC5D,EAEK,CAAE,KAAME,IAAkB,CAAAvB,EAAAC,CAAA,EAAAC,EAAA,IAAAC,EAAkBX,eAAU,oBAG5D,GAFA,QAAQ,QAAQ,eAAe,EAE3B,CAAC+B,EAAQ,MAAO,MAAMC,EAAS,kBAAkB,EAErD,QAAQ,KAAK,WAAW,EACxB,KAAM,CAAE,KAAMC,CAAI,GAAI,CAAAzB,EAAAC,CAAA,EAAAC,EAAA,IAAMC,EAM1B,aAAaO,EAAM,OAAO,EAAE,GAAI,CAChC,MAAO,CACL,SAAUa,EAAQ,MAAM,GACxB,UAAWb,EAAM,MAAM,WAAa,GACpC,QAAS,MACX,GACF,aAAC,oBAGD,GAFA,QAAQ,QAAQ,WAAW,EAEvB,CAACe,EAAI,MAAO,MAAMD,EAAS,eAAe,EAE9C,MAAME,EAAY,GAAGD,EAAI,MAAM,KAAK,MAAMF,EAAQ,MAAM,IAAI,GAC1DvC,EAAU,MAAQ,GAAK,kBACzB,GACM2C,EAAkB7B,EACtB2B,EAAI,MAAM,aAAeA,EAAI,MAAM,YAAY,OAAS,IACpDA,EAAI,MAAM,YAAY,MAAM,EAAG,GAAG,EAAI,MACtCA,EAAI,MAAM,aAGLG,GAAA,CACT,MAAOF,EACP,QAASA,EACT,YAAaC,EAAgB,MAC7B,cAAeA,EAAgB,MAChC,EAEeE,KAEhB,MAAMC,EAAMC,KAEJC,GAAA,CACN,KAAM,IAAM,OACN,SAACC,EAAAV,EAAQ,QAAR,MAAAU,EAAe,OAAQ,CAACjD,EAAU,MAAc,GAC9C,CACL,CACE,IAAK,OACL,KAAM,YACN,KAAM8C,EAAIP,EAAQ,MAAM,KAAM,CAC5B,MAAO,GACR,CACH,EAEJ,EACD,EAED,KAAM,CAAE,aAAAjC,EAAc,gBAAA4C,CAAgB,EAAI3C,EAAgB,EAC1C2C,GAAAD,EAAAV,GAAA,YAAAA,EAAS,QAAT,YAAAU,EAAgB,YAAY,EAEtC,MAAAE,EAAWrC,EAAI,EAAK,EAC1BsB,EAAU,SAAY,CACpB,MAAMgB,EAAS,EACfD,EAAS,MAAQ,GAClB,EAED,MAAME,EAAcvC,EAClBoB,EAAuC,MAAM,YAE/CE,EAAU,SAAY,CACpB,MAAMgB,EAAS,EACVC,EAAY,QACHA,EAAA,MAAQnB,EAAuC,MAAM,WACnE,CACD,EAEK,MAAAoB,EAAsBxC,EAAI,EAAK","names":["unbranded","useUnbranded","props","__props","cityState","computed","primaryColor","usePrimaryColor","companyUrl","regex","snippets","matches","match","data","ref","response","__temp","__restore","_withAsyncContext","useFetch","finalHtml","HTML","snippet","snippetData","s","useABTests","route","useRoute","mounted","appliedVariants","a","formVariantsABTest","showFull","showStepsAlt","descriptionBeforeFormVsAfterFormABTest","showBefore","onMounted","requestUrl","useRequestURL","company","error404","job","metaTitle","metaDescription","useSeoMeta","useCanonicalUrl","img","useImage","useHead","_a","setPrimaryColor","showForm","nextTick","showContent","showFullDescription"],"ignoreList":[],"sources":["../../../../components/job/JobHeading.vue","../../../../components/job/JobRichTextWithSnippets.vue","../../../../composables/useABTests.ts","../../../../pages/jobs/[company-slug]/[id].vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Job, JobWithLocations, Company } from \"@/types\";\n\nconst unbranded = useUnbranded();\n\nconst props = defineProps<{\n  job: Job | JobWithLocations;\n  company: Company;\n  city?: string;\n  state?: string;\n}>();\n\nconst cityState = computed(() => {\n  if (props.city && props.state) return `${props.city}, ${props.state}`;\n  if (props.state) return props.state;\n  return null;\n});\n\nconst { primaryColor } = usePrimaryColor();\n\nconst companyUrl = computed(() => {\n  return `${unbranded.value ? \"/u\" : \"\"}/companies/${props.company.slug}`;\n});\n</script>\n<template>\n  <div\n    class=\"flex items-center p-6 bg-white rounded-md shadow dark:shadow-gray-700 dark:bg-slate-900\"\n  >\n    <NuxtLink v-if=\"company\" :to=\"companyUrl\">\n      <NuxtImg\n        width=\"128\"\n        height=\"128\"\n        :src=\"company.logo || '/no-image-placeholder.png'\"\n        :alt=\"company.name || 'No image available'\"\n        class=\"w-16 h-16 p-1 bg-white rounded-full shadow md:p-2 md:h-28 md:w-28 dark:bg-slate-900 dark:shadow-gray-700\"\n      />\n    </NuxtLink>\n\n    <div class=\"mt-0 ms-4\">\n      <h1>\n        <a href=\"#job-description\">\n        <span class=\"text-xl font-semibold\">{{ job.title }}</span>\n        <div class=\"items-center mt-2 lg:flex\">\n          <span class=\"flex items-center font-medium text-slate-400 me-2\">\n            <IconBuildingOfficeOutline\n              class=\"w-4 mr-1\"\n              :style=\"{ color: primaryColor || '' }\"\n            />\n            {{ company.name }}</span\n          >\n\n          <JobLocationLabel\n            v-if=\"!unbranded\"\n            class=\"text-slate-400\"\n            :job=\"job\"\n            :primary-state=\"state\"\n            :primary-city=\"city\"\n            :loadLocations=\"true\"\n          />\n\n          <span\n            v-if=\"unbranded && cityState\"\n            class=\"flex items-center text-base font-medium text-slate-400\"\n          >\n            <IconMapPinOutline\n              class=\"w-4 mr-1\"\n              :style=\"{ color: primaryColor || '' }\"\n            />\n            {{ cityState }}\n          </span>\n        </div>\n      </a>\n      </h1>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { Snippet } from '~/types';\n\nconst props = defineProps<{\n  clientId: string;\n  html: string;\n}>();\n\nconst regex = /\\[([^\\]]+)\\]/g;\n\nconst snippets = computed(() => {\n  if (!props.html) return [];\n  const matches = (props.html || \"\").match(regex);\n  if (!matches) return [];\n  return matches.map((match) => match.slice(1, -1));\n});\n\nconst data = ref<Snippet[]>([])\n\nif(snippets.value.length){\n\n  const { data: response } = await useFetch(\"/api/snippets\", {\n    query: {\n      name: snippets.value.join(\",\"),\n      clientId: props.clientId,\n    },\n  });\n\n  data.value = response.value as Snippet[] || [];\n}\n\n\nconst finalHtml = computed(() => {\n  if (!props.html) return \"\";\n  if (!data.value) return props.html;\n  let HTML = props.html;\n  snippets.value.forEach((snippet) => {\n    const snippetData = (data.value || []).find((s) => s.name === snippet);\n    if (!snippetData) return;\n    HTML = HTML.replace(`<strong>[${snippet}]</strong>`, snippetData.body);\n  });\n  return HTML;\n});\n</script>\n<template>\n  <div class=\"prose\" v-html=\"finalHtml\"></div>\n</template>\n","export const useABTests = () => {\n  const route = useRoute();\n  const mounted = ref(false);\n\n  const appliedVariants = computed(() => {\n    return Array.isArray(route.query.variant)\n      ? route.query.variant\n      : [route.query.variant].filter((a) => a).map((a) => a?.toLowerCase());\n  });\n\n  const formVariantsABTest = computed(() => {\n    const showFull = appliedVariants.value.includes(\"fullform\");\n    const showStepsAlt = appliedVariants.value.includes(\"stepsalt\");\n    return {\n      showFull,\n      showSteps: !showFull && !showStepsAlt,\n      showStepsAlt: showStepsAlt,\n    };\n  });\n\n  const descriptionBeforeFormVsAfterFormABTest = computed(() => {\n    const showBefore =\n      appliedVariants.value.includes(\"descriptionbeforeform\") && mounted.value;\n    return {\n      showBefore,\n      showAfter: !showBefore,\n    };\n  });\n\n  onMounted(() => {\n    mounted.value = true;\n  });\n\n  return {\n    formVariantsABTest,\n    descriptionBeforeFormVsAfterFormABTest,\n  };\n};\n","<script setup lang=\"ts\">\nimport type { Job, Company, Location, Form } from \"@/types\";\n\nconst route = useRoute();\nconst unbranded = useUnbranded();\nconst { formVariantsABTest, descriptionBeforeFormVsAfterFormABTest } =\n  useABTests();\n\nconst requestUrl = useRequestURL();\n\n// These requests MUST be made in sequence\n// the company must be fetched first to get the company id\n// this is because the job endpoint requires the company id\n// and sometimes the company id isn't provided in the route\n// this is the case for custom domains\nconsole.time(\"fetch company\");\n\nconst companyUrl = computed(() => {\n  return route.params.companyslug\n    ? `/api/companies/bySlugFromCache/${route.params.companyslug}`\n    : `/api/companies/byDomainFromCache/${requestUrl.hostname}`;\n});\n\nconst { data: company } = await useFetch<Company>(companyUrl);\nconsole.timeEnd(\"fetch company\");\n\nif (!company.value) throw error404(\"Client not found\");\n\nconsole.time(\"fetch job\");\nconst { data: job } = await useFetch<\n  Job & {\n    client: Company;\n    locations: Location[];\n    form: Form;\n  }\n>(`/api/jobs/${route.params.id}`, {\n  query: {\n    clientId: company.value.id,\n    published: route.query.published ?? true,\n    include: \"form\",\n  },\n});\nconsole.timeEnd(\"fetch job\");\n\nif (!job.value) throw error404(\"Job not found\");\n\nconst metaTitle = `${job.value.title} | ${company.value.name}${\n  unbranded.value ? \"\" : \" | Hire Truckers\"\n}`;\nconst metaDescription = ref(\n  job.value.description && job.value.description.length > 160\n    ? job.value.description.slice(0, 160) + \"...\"\n    : job.value.description\n);\n\nuseSeoMeta({\n  title: metaTitle,\n  ogTitle: metaTitle,\n  description: metaDescription.value,\n  ogDescription: metaDescription.value,\n});\n\nuseCanonicalUrl();\n\nconst img = useImage();\n\nuseHead({\n  link: () => {\n    if (!company.value?.logo || !unbranded.value) return [];\n    return [\n      {\n        rel: \"icon\",\n        type: \"image/png\",\n        href: img(company.value.logo, {\n          width: 32,\n        }),\n      },\n    ];\n  },\n});\n\nconst { primaryColor, setPrimaryColor } = usePrimaryColor();\nsetPrimaryColor(company?.value?.primaryColor);\n\nconst showForm = ref(false);\nonMounted(async () => {\n  await nextTick();\n  showForm.value = true;\n});\n\nconst showContent = ref(\n  descriptionBeforeFormVsAfterFormABTest.value.showBefore\n);\nonMounted(async () => {\n  await nextTick();\n  if (!showContent.value) {\n    showContent.value = descriptionBeforeFormVsAfterFormABTest.value.showBefore;\n  }\n});\n\nconst showFullDescription = ref(false);\n</script>\n\n<template>\n  <template v-if=\"company && job\">\n    <section\n      class=\"py-16 bg-slate-50 dark:bg-slate-800\"\n      :class=\"{\n        'md:py-24 py-16': !unbranded,\n        'py-8': unbranded,\n      }\"\n    >\n      <JobHeading\n        class=\"block md:hidden\"\n        :job=\"job\"\n        :company=\"company\"\n        :city=\"($route.query.city as string)\"\n        :state=\"($route.query.state as string)\"\n      />\n      <div class=\"container mt-5 md:max-w-full lg:max-w-[1600px]\">\n        <div class=\"grid md:grid-cols-12 grid-cols-1 gap-[30px]\">\n          <div\n            class=\"lg:col-span-8 md:col-span-6\"\n            :class=\"{\n              'order-1': descriptionBeforeFormVsAfterFormABTest.showBefore,\n              'order-2 md:order-1':\n                descriptionBeforeFormVsAfterFormABTest.showAfter,\n            }\"\n          >\n            <JobHeading\n              class=\"hidden md:flex\"\n              :job=\"job\"\n              :company=\"company\"\n              :city=\"($route.query.city as string)\"\n              :state=\"($route.query.state as string)\"\n            />\n            <div\n              :class=\"{\n                hidden: !showContent,\n                'md:block': true,\n              }\"\n            >\n              <div\n                :class=\"{\n                  'h-56 md:h-auto overflow-hidden fade-bottom':\n                    descriptionBeforeFormVsAfterFormABTest.showBefore &&\n                    !showFullDescription,\n                }\"\n              >\n                <JobDescription\n                  v-if=\"job.description && company.id\"\n                  :description=\"job.description\"\n                  :clientId=\"company.id\"\n                />\n              </div>\n              <div class=\"text-center\">\n                <button\n                  v-if=\"\n                    !showFullDescription &&\n                    descriptionBeforeFormVsAfterFormABTest.showBefore\n                  \"\n                  class=\"btn btn-outline btn-neutral btn-sm md:hidden\"\n                  @click=\"showFullDescription = !showFullDescription\"\n                >\n                  Read Full Description\n                </button>\n              </div>\n            </div>\n          </div>\n          <!--end col-->\n\n          <div class=\"relative order-1 lg:col-span-4 md:col-span-6\">\n            <JobPhoneNumber />\n            <div\n              v-if=\"!showForm\"\n              class=\"flex justify-center items-center h-40 md:hidden\"\n            >\n              <AppLoader />\n            </div>\n            <Transition name=\"form\">\n              <div\n                v-if=\"showForm\"\n                class=\"sticky top-20 bg-white rounded-md shadow dark:shadow-gray-700 dark:bg-slate-900\"\n              >\n                <div v-if=\"job?.form\">\n                  <LazyJobFormCustom\n                    :company=\"company\"\n                    :job=\"job\"\n                    @loaded=\"showContent = true\"\n                  />\n                </div>\n                <div v-else>\n                  <LazyJobFormFull\n                    v-if=\"formVariantsABTest.showFull\"\n                    :company=\"company\"\n                    :job=\"job\"\n                    @loaded=\"showContent = true\"\n                  />\n                  <LazyJobFormStepsAlt\n                    v-else-if=\"formVariantsABTest.showStepsAlt\"\n                    :company=\"company\"\n                    :job=\"job\"\n                    @loaded=\"showContent = true\"\n                  />\n                  <LazyJobFormSteps\n                    v-else\n                    :company=\"company\"\n                    :job=\"job\"\n                    @loaded=\"showContent = true\"\n                  />\n                </div>\n              </div>\n            </Transition>\n          </div>\n          <!--end col-->\n        </div>\n        <!--end grid-->\n      </div>\n      <!--end container-->\n    </section>\n    <!--end section-->\n  </template>\n</template>\n\n<style scoped>\n:deep(button.btn:not(.btn-outline)) {\n  @apply block w-full border-none;\n  background-color: v-bind(primaryColor);\n}\n.tab {\n  @apply font-bold;\n}\n\n.fade-in-left {\n  animation-name: fadeInLeft;\n  animation-duration: 0.5s;\n  animation-fill-mode: forwards;\n  opacity: 0;\n}\n.fade-in-right {\n  animation-name: fadeInRight;\n  animation-duration: 0.5s;\n  animation-fill-mode: forwards;\n  opacity: 0;\n}\n\n@keyframes fadeInRight {\n  from {\n    opacity: 0;\n    transform: translateX(50px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes fadeInLeft {\n  from {\n    opacity: 0;\n    transform: translateX(-50px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n:deep(.prose li::before) {\n  color: v-bind(primaryColor);\n}\n:deep(.prose h1) {\n  margin-top: 1.5rem;\n}\n\n.form-enter-active,\n.form-leave-active {\n  transition: all 1s ease;\n}\n\n.form-enter-from,\n.form-leave-to {\n  opacity: 0;\n  transform: translateY(30px);\n}\n\n.fade-bottom {\n  position: relative;\n}\n.fade-bottom::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 4rem; /* Height of the fade effect */\n\n  background: linear-gradient(to bottom, transparent, #f7fafc);\n}\n\n@media (min-width: 768px) {\n  .fade-bottom::after {\n    display: none;\n  }\n}\n</style>\n"],"file":"_nuxt/D2UVLOsp.js"}