{"version":3,"file":"index--l_7rpfm.js","sources":["../../../resources/js/components/ColorMatch/GetStarted.vue","../../../resources/js/components/ColorMatch/SkinToneLevel.vue","../../../resources/js/components/ColorMatch/SkinTonePicture.vue","../../../resources/js/components/ColorMatch/CoverageType.vue","../../../resources/js/components/ColorMatch/PowderType.vue","../../../resources/js/components/ColorMatch/Age.vue","../../../resources/js/components/ColorMatch/Preparing.vue","../../../resources/js/components/ColorMatch/Results.vue","../../../resources/js/components/ColorMatch/index.vue"],"sourcesContent":["<template>\n\t<div class=\"!px-4 !py-16 flex flex-col gap-4 items-center !container relative mx-auto !max-w-seint\">\n\t\t<color-match-share-link :affiliate-code=\"affiliateCode\" />\n\t\t<h1 class=\"!m-0 !p-0 font-butler-light text-3xl/[38px] font-light\">Get color matched</h1>\n\t\t<p class=\"!m-0 !p-0 text-sm text-center\">\n\t\t\tAnswer a few questions to get personalized recommendations in under 2 minutes\n\t\t</p>\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\taria-label=\"Get started with color match\"\n\t\t\t@click=\"handleNextStep\"\n\t\t\tclass=\"btn-primary-fg !mt-3 flex h-12 w-[360px] flex-col items-center justify-center bg-black text-[11px]/[14px] uppercase\"\n\t\t>\n\t\t\tGet Started\n\t\t</button>\n\t</div>\n</template>\n<script setup>\nconst props = defineProps({\n\taffiliateCode: {\n\t\ttype: String,\n\t\tdefault: null,\n\t},\n\tsetStep: {\n\t\ttype: Function,\n\t\trequired: true,\n\t},\n})\n\nconst handleNextStep = () => props.setStep(1)\n</script>\n","<template>\n\t<div class=\"relative !px-4 !py-16 flex flex-col gap-4 items-center !container mx-auto !max-w-seint\">\n\t\t<h1 class=\"!m-0 !p-0 font-butler-light text-3xl/[38px] font-light text-center\">\n\t\t\tSelect the level that best matches your skin tone\n\t\t</h1>\n\t\t<ul class=\"!m-0 !p-0 flex flex-col gap-6 md:grid md:grid-cols-2\">\n\t\t\t<li v-for=\"(value, key) in levels\" :key=\"key\" class=\"flex flex-col gap-2\">\n\t\t\t\t<h4 class=\"text-sm\">{{ key }}</h4>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t:aria-label=\"`Select Level ${value.level}`\"\n\t\t\t\t\t@click=\"() => handleNextStep(value.level, key)\"\n\t\t\t\t\t:class=\"[\n\t\t\t\t\t\t'grid grid-cols-4 gap-0.5 hover:ring-2 hover:ring-black',\n\t\t\t\t\t\tisActiveLevel(value.level) ? 'ring-2 ring-black' : '',\n\t\t\t\t\t]\"\n\t\t\t\t>\n\t\t\t\t\t<img v-for=\"{ src, alt } in value.images\" :src=\"src\" :alt=\"alt\" :key=\"alt\" />\n\t\t\t\t</button>\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n</template>\n<script setup>\nimport { onMounted } from 'vue'\n\nconst props = defineProps({\n\tlevels: {\n\t\ttype: Object,\n\t\trequired: true,\n\t},\n\tisActiveLevel: {\n\t\ttype: Function,\n\t\trequired: true,\n\t},\n\tsetLevelId: {\n\t\ttype: Function,\n\t\trequired: true,\n\t},\n\tsetLevelName: {\n\t\ttype: Function,\n\t\trequired: true,\n\t},\n\tsetStep: {\n\t\ttype: Function,\n\t\trequired: true,\n\t},\n})\n\nonMounted(() => {\n\twindow.scrollTo(0, 0)\n})\n\nconst handleNextStep = (selectionId, selectionName) => {\n\tprops.setLevelId(selectionId)\n\tprops.setLevelName(selectionName)\n\tprops.setStep(2)\n}\n</script>\n","<template>\n\t<div class=\"relative !px-4 !py-16 flex flex-col gap-4 items-center !container mx-auto !max-w-seint\">\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\taria-label=\"Go Back\"\n\t\t\t@click=\"handleBackStep\"\n\t\t\tclass=\"inline-flex items-center absolute left-4 top-5 gap-2 text-[11px]/[14px] uppercase font-medium\"\n\t\t>\n\t\t\t<svg-vue icon=\"back-arrow\" />\n\t\t\t<span>Back</span>\n\t\t</button>\n\t\t<h1 class=\"!m-0 !p-0 font-butler-light text-center text-3xl/[38px] font-light\">Let’s narrow this down</h1>\n\t\t<ul class=\"!m-0 !p-0 grid grid-cols-2 md:grid-cols-4 gap-x-2 gap-y-4\">\n\t\t\t<li v-for=\"imgObj in sublevelImages\" :key=\"imgObj.sublevel\">\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t:aria-label=\"`Select Sublevel ${imgObj.sublevel}`\"\n\t\t\t\t\t@click=\"() => handleNextStep(imgObj.sublevel, imgObj.value)\"\n\t\t\t\t\t:class=\"['hover:ring-2 hover:ring-black', isActiveSublevel(imgObj.sublevel) ? 'ring-2 ring-black' : '']\"\n\t\t\t\t>\n\t\t\t\t\t<img :src=\"imgObj.src\" :alt=\"imgObj.alt\" class=\"object-cover w-full h-auto\" />\n\t\t\t\t</button>\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n</template>\n<script setup>\nimport { onMounted } from 'vue'\n\nconst props = defineProps({\n\tsublevelImages: {\n\t\ttype: Array,\n\t\trequired: true,\n\t},\n\tisActiveSublevel: {\n\t\ttype: Function,\n\t\trequired: true,\n\t},\n\tsetSublevelName: {\n\t\ttype: Function,\n\t\trequired: true,\n\t},\n\tsetSublevelId: {\n\t\ttype: Function,\n\t\trequired: true,\n\t},\n\tsetStep: {\n\t\ttype: Function,\n\t\trequired: true,\n\t},\n})\n\nonMounted(() => {\n\twindow.scrollTo(0, 0)\n})\n\nconst handleBackStep = () => props.setStep(1)\nconst handleNextStep = (selectionName, selectionId) => {\n\tprops.setSublevelName(selectionName)\n\tprops.setSublevelId(selectionId)\n\tprops.setStep(3)\n}\n</script>\n","<template>\n\t<div class=\"relative !px-4 !py-16 flex flex-col gap-4 items-center !container mx-auto !max-w-seint\">\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\taria-label=\"Go Back\"\n\t\t\t@click=\"handleBackStep\"\n\t\t\tclass=\"inline-flex items-center absolute left-4 top-5 gap-2 text-[11px]/[14px] uppercase font-medium\"\n\t\t>\n\t\t\t<svg-vue icon=\"back-arrow\" />\n\t\t\t<span>Back</span>\n\t\t</button>\n\t\t<h1 class=\"!m-0 !p-0 font-butler-light text-3xl/[38px] font-light text-center\">\n\t\t\tWhat type of coverage do you like?\n\t\t</h1>\n\t\t<ul class=\"flex flex-col gap-3 w-full max-w-[400px] mx-auto !m-0 !p-0\">\n\t\t\t<li>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\taria-label=\"\"\n\t\t\t\t\t@click=\"() => handleNextStep('Light/Medium', 1)\"\n\t\t\t\t\t:class=\"[\n\t\t\t\t\t\t'flex flex-col items-center justify-center',\n\t\t\t\t\t\t'w-full !p-3',\n\t\t\t\t\t\t'seint-border hover:ring-2 hover:ring-light-gray-900 hover:dark:ring-white',\n\t\t\t\t\t\tcoverageName === 'Light/Medium' ? 'ring-2 ring-black' : 'border-brand-solid',\n\t\t\t\t\t]\"\n\t\t\t\t>\n\t\t\t\t\t<span class=\"text-sm\">Light / Medium</span>\n\t\t\t\t\t<span class=\"text-xs/[18px] max-w-80\"> Filter blemishes and targeted areas plus add natural dimension. </span>\n\t\t\t\t</button>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\taria-label=\"\"\n\t\t\t\t\t@click=\"() => handleNextStep('Medium/Full', 2)\"\n\t\t\t\t\t:class=\"[\n\t\t\t\t\t\t'flex flex-col items-center justify-center',\n\t\t\t\t\t\t'w-full !p-3',\n\t\t\t\t\t\t'seint-border hover:ring-2 hover:ring-light-gray-900 hover:dark:ring-white',\n\t\t\t\t\t\tcoverageName === 'Medium/Full' ? 'ring-2 ring-black' : 'border-brand-solid',\n\t\t\t\t\t]\"\n\t\t\t\t>\n\t\t\t\t\t<span class=\"text-sm\">Medium / Full</span>\n\t\t\t\t\t<span class=\"text-xs/[18px] max-w-80\">\n\t\t\t\t\t\tA buildable finish that evens out skin tone and conceals imperfections while maintaining a natural look.\n\t\t\t\t\t</span>\n\t\t\t\t</button>\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n</template>\n<script setup>\nimport { onMounted } from 'vue'\n\nconst props = defineProps({\n\tcoverageName: {\n\t\ttype: String,\n\t\tdefault: null,\n\t},\n\tsetCoverageName: {\n\t\ttype: Function,\n\t\trequired: true,\n\t},\n\tsetCoverageId: {\n\t\ttype: Function,\n\t\trequired: true,\n\t},\n\tsetStep: {\n\t\ttype: Function,\n\t\trequired: true,\n\t},\n})\n\nonMounted(() => {\n\twindow.scrollTo(0, 0)\n})\n\nconst handleBackStep = () => props.setStep(2)\nconst handleNextStep = (selectionName, selectionId) => {\n\tprops.setCoverageName(selectionName)\n\tprops.setCoverageId(selectionId)\n\tprops.setStep(4)\n}\n</script>\n","<template>\n\t<div class=\"relative !px-4 !py-16 flex flex-col gap-4 items-center !container mx-auto !max-w-seint\">\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\taria-label=\"Go Back\"\n\t\t\t@click=\"handleBackStep\"\n\t\t\tclass=\"inline-flex items-center absolute left-4 top-5 gap-2 text-[11px]/[14px] uppercase font-medium\"\n\t\t>\n\t\t\t<svg-vue icon=\"back-arrow\" />\n\t\t\t<span>Back</span>\n\t\t</button>\n\t\t<template v-if=\"levelId < 7\">\n\t\t\t<h1 class=\"!m-0 !p-0 font-butler-light text-3xl/[38px] font-light text-center\">\n\t\t\t\tWhat type of powder finish do you like?\n\t\t\t</h1>\n\t\t\t<ul class=\"flex flex-col gap-3 w-full max-w-[400px] mx-auto !m-0 !p-0\">\n\t\t\t\t<li v-for=\"option in powderTypeOptions\" :key=\"option\">\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\taria-label=\"\"\n\t\t\t\t\t\t@click=\"() => handleNextStep(option.name, option.value)\"\n\t\t\t\t\t\t:class=\"[\n\t\t\t\t\t\t\t'flex flex-col items-center justify-center',\n\t\t\t\t\t\t\t'w-full !p-3',\n\t\t\t\t\t\t\t'seint-border hover:ring-2 hover:ring-light-gray-900 hover:dark:ring-white',\n\t\t\t\t\t\t\tpowderTypeName === option.name ? 'ring-2 ring-black' : 'border-brand-solid',\n\t\t\t\t\t\t]\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<span class=\"text-sm\">{{ option.name }}</span>\n\t\t\t\t\t\t<span class=\"text-xs/[18px] max-w-80\">\n\t\t\t\t\t\t\t{{ option.description }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</template>\n\t\t<template v-else>\n\t\t\t<h1 class=\"!m-0 !p-0 font-butler-light text-3xl/[38px] font-light\">Do you like to use powder?</h1>\n\t\t\t<ul class=\"flex flex-col w-full max-w-[400px] mx-auto gap-3 !m-0 !p-0\">\n\t\t\t\t<li v-for=\"option in powderUseOptions\" :key=\"option\">\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\taria-label=\"\"\n\t\t\t\t\t\t@click=\"() => handleNextStep(option.name, option.value)\"\n\t\t\t\t\t\t:class=\"[\n\t\t\t\t\t\t\t'flex flex-col items-center justify-center',\n\t\t\t\t\t\t\t'w-full !p-3',\n\t\t\t\t\t\t\t'seint-border hover:ring-2 hover:ring-light-gray-900 hover:dark:ring-white',\n\t\t\t\t\t\t\tpowderTypeName === option.name ? 'ring-2 ring-black' : 'border-brand-solid',\n\t\t\t\t\t\t]\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<span class=\"text-sm\">{{ option.name }}</span>\n\t\t\t\t\t</button>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</template>\n\t</div>\n</template>\n<script setup>\nimport { ref, onMounted } from 'vue'\n\nconst props = defineProps({\n\tlevelId: {\n\t\ttype: Number,\n\t},\n\tpowderTypeName: {\n\t\ttype: String,\n\t\tdefault: null,\n\t},\n\tsetPowderTypeName: {\n\t\ttype: Function,\n\t\trequired: true,\n\t},\n\tsetPowderTypeId: {\n\t\ttype: Function,\n\t\trequired: true,\n\t},\n\tsetStep: {\n\t\ttype: Function,\n\t\trequired: true,\n\t},\n})\nconst powderTypeOptions = ref([\n\t{\n\t\tname: 'Matte',\n\t\tvalue: 1,\n\t\tdescription: 'A smooth, shine-free finish that minimizes pores, controls oil, and creates a polished, soft look.',\n\t},\n\t{\n\t\tname: 'Radiant / Glowy',\n\t\tvalue: 2,\n\t\tdescription:\n\t\t\t'A translucent, blurred finish that minimizes fine lines and pores while setting makeup without adding texture.',\n\t},\n\t{\n\t\tname: 'None',\n\t\tvalue: 0,\n\t\tdescription: 'I prefer a cream only look',\n\t},\n])\nconst powderUseOptions = ref([\n\t{\n\t\tname: 'Yes, I use it daily',\n\t\tvalue: 1,\n\t},\n\t{\n\t\tname: 'Sometimes, depending on the look',\n\t\tvalue: 2,\n\t},\n\t{\n\t\tname: 'No, I prefer a cream-only look',\n\t\tvalue: 0,\n\t},\n])\n\nonMounted(() => {\n\twindow.scrollTo(0, 0)\n})\n\nconst handleBackStep = () => props.setStep(3)\nconst handleNextStep = (selectionName, selectionId) => {\n\tprops.setPowderTypeName(selectionName)\n\tprops.setPowderTypeId(selectionId)\n\tprops.setStep(5)\n}\n</script>\n","<template>\n\t<div class=\"relative !px-4 !py-16 flex flex-col gap-4 items-center !container mx-auto !max-w-seint\">\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\taria-label=\"Go Back\"\n\t\t\t@click=\"handleBackStep\"\n\t\t\tclass=\"inline-flex items-center absolute left-4 top-5 gap-2 text-[11px]/[14px] uppercase font-medium\"\n\t\t>\n\t\t\t<svg-vue icon=\"back-arrow\" />\n\t\t\t<span>Back</span>\n\t\t</button>\n\t\t<div>\n\t\t\t<h1 class=\"!m-0 !p-0 font-butler-light text-3xl/[38px] font-light text-center\">Select your age range</h1>\n\t\t\t<p class=\"!m-0 !p-0 text-sm text-center\">(This helps us understand your skin needs)</p>\n\t\t</div>\n\t\t<ul class=\"flex flex-col w-full max-w-[400px] mx-auto gap-3 !m-0 !p-0\">\n\t\t\t<li v-for=\"option in options\" :key=\"option\">\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\taria-label=\"\"\n\t\t\t\t\t@click=\"() => handleNextStep(option)\"\n\t\t\t\t\t:class=\"[\n\t\t\t\t\t\t'flex flex-col items-center justify-center',\n\t\t\t\t\t\t'w-full !p-3',\n\t\t\t\t\t\t'seint-border hover:ring-2 hover:ring-light-gray-900 hover:dark:ring-white',\n\t\t\t\t\t\tageRange === option ? 'ring-2 ring-black' : 'border-brand-solid',\n\t\t\t\t\t]\"\n\t\t\t\t>\n\t\t\t\t\t<span class=\"text-sm\">{{ option }}</span>\n\t\t\t\t</button>\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n</template>\n<script setup>\nimport { ref, onMounted } from 'vue'\n\nconst props = defineProps({\n\tageRange: {\n\t\ttype: String,\n\t\tdefault: null,\n\t},\n\tsetAgeRange: {\n\t\ttype: Function,\n\t\trequired: true,\n\t},\n\tsetStep: {\n\t\ttype: Function,\n\t\trequired: true,\n\t},\n})\n\nconst options = ref(['Under 21', '21 - 34', '35 - 40', '41 - 50', '51 - 65', '65+'])\n\nonMounted(() => {\n\twindow.scrollTo(0, 0)\n})\n\nconst handleBackStep = () => props.setStep(4)\nconst handleNextStep = (selection) => {\n\tprops.setAgeRange(selection)\n\tprops.setStep(6)\n}\n</script>\n","<template>\n\t<div class=\"relative !px-4 flex flex-col gap-8 items-center !container mx-auto !max-w-seint\">\n\t\t<div class=\"flex flex-col gap-3 w-full max-w-[400px] !px-4 !py-16\">\n\t\t\t<h1 class=\"!m-0 !p-0 font-butler-light text-3xl/[38px] text-center font-light\">Preparing your results...</h1>\n\t\t\t<img :src=\"LOADING.src\" :alt=\"LOADING.alt\" class=\"w-full object-contain animate-pulse\" />\n\t\t</div>\n\t</div>\n</template>\n<script setup>\nimport { watch, onMounted } from 'vue'\n\nconst props = defineProps({\n\tloading: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n\tstep: {\n\t\ttype: Number,\n\t\tdefault: null,\n\t},\n\tsetStep: {\n\t\ttype: Function,\n\t\trequired: true,\n\t},\n})\n\nimport { LOADING } from './config'\n\nonMounted(() => {\n\twindow.scrollTo(0, 0)\n})\n\nwatch(\n\t() => props.loading,\n\t(isLoading) => {\n\t\tif (!isLoading && props.step === 6) {\n\t\t\t// was step 7 prior to input removal\n\t\t\tsetTimeout(() => {\n\t\t\t\tprops.setStep(7) // was 8\n\t\t\t}, 1000)\n\t\t}\n\t}\n)\n</script>\n","<template>\n\t<div class=\"relative !px-4 !pt-16 flex flex-col gap-4 items-center !container mx-auto !max-w-seint\">\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\taria-label=\"Go Back\"\n\t\t\t@click=\"handleReset\"\n\t\t\tclass=\"inline-flex items-center absolute left-4 top-5 gap-2 text-[11px]/[14px] uppercase font-medium\"\n\t\t>\n\t\t\t<svg-vue icon=\"back-arrow\" />\n\t\t\t<span>Start Over</span>\n\t\t</button>\n\t\t<h1 class=\"!m-0 !p-0 font-butler-light text-3xl/[38px] font-light max-w-80 text-center\">\n\t\t\tHere are your personalized recommendations\n\t\t</h1>\n\t\t<ul v-if=\"results\" class=\"w-full flex flex-col gap-12 !m-0 !p-0\">\n\t\t\t<li v-for=\"(products, key, index) in results\" :key=\"`${index}-${key}`\">\n\t\t\t\t<h4 class=\"text-base font-medium text-center !mb-6\">{{ key }}</h4>\n\t\t\t\t<ul class=\"!m-0 !p-0 flex flex-col gap-5\">\n\t\t\t\t\t<li v-for=\"product in products\" :key=\"product.item_title\" class=\"grid grid-cols-[88px_1fr] gap-4\">\n\t\t\t\t\t\t<figure>\n\t\t\t\t\t\t\t<video\n\t\t\t\t\t\t\t\tv-if=\"product.item_image.mimeType?.includes('video')\"\n\t\t\t\t\t\t\t\t:src=\"product.item_image.src\"\n\t\t\t\t\t\t\t\tautoplay\n\t\t\t\t\t\t\t\tloop\n\t\t\t\t\t\t\t\tmuted\n\t\t\t\t\t\t\t\tplaysinline\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<img v-else :src=\"product.item_image.src\" :alt=\"product.item_title\" class=\"w-full object-contain\" />\n\t\t\t\t\t\t</figure>\n\t\t\t\t\t\t<div class=\"flex flex-col gap-4\">\n\t\t\t\t\t\t\t<div class=\"flex flex-col gap-1\">\n\t\t\t\t\t\t\t\t<h5 class=\"!p-0 !m-0 text-sm font-medium\">{{ product.item_title }}</h5>\n\t\t\t\t\t\t\t\t<p class=\"!p-0 !m-0 text-sm font-normal\">{{ product.description }}</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<color-match-add-to-bag\n\t\t\t\t\t\t\t\t:item-sku=\"product.sku\"\n\t\t\t\t\t\t\t\t:item-id=\"product.item_id\"\n\t\t\t\t\t\t\t\t:price=\"product.item_price\"\n\t\t\t\t\t\t\t\t:out-of-stock=\"product.oos\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<template v-if=\"!key.includes('Collections')\">\n\t\t\t\t\t\t<color-match-bulk-add-to-bag :items=\"products\" />\n\t\t\t\t\t</template>\n\t\t\t\t</ul>\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n\t<section class=\"bg-utility-gray-100 !mt-8 flex flex-col gap-8 items-center !pt-6 !px-4 !pb-10 w-full\">\n\t\t<div>\n\t\t\t<h1 class=\"!m-0 !p-0 font-butler-light text-3xl/[38px] font-light\">Save your results?</h1>\n\t\t\t<p class=\"!m-0 !p-0 text-sm text-center\">We'll email your results</p>\n\t\t</div>\n\t\t<div class=\"flex flex-col gap-2 w-full max-w-[400px]\">\n\t\t\t<input\n\t\t\t\tname=\"fullName\"\n\t\t\t\ttype=\"text\"\n\t\t\t\tplaceholder=\"Full name\"\n\t\t\t\tv-model=\"fullName\"\n\t\t\t\tclass=\"!h-11 placeholder:text-placeholder text-sm bg-primary_no-hover !seint-border border-brand-solid focus:border-brand-solid focus:!ring-0 focus:outline-none\"\n\t\t\t/>\n\t\t\t<input\n\t\t\t\tname=\"email\"\n\t\t\t\ttype=\"email\"\n\t\t\t\tplaceholder=\"Email address\"\n\t\t\t\tv-model=\"email\"\n\t\t\t\t@input=\"validateEmail\"\n\t\t\t\tclass=\"!h-11 placeholder:text-placeholder !m-0 text-sm bg-primary_no-hover !seint-border border-brand-solid focus:border-brand-solid focus:!ring-0 focus:outline-none\"\n\t\t\t/>\n\t\t\t<div v-if=\"showShareWithAffiliate\" class=\"inline-flex items-center gap-x-2 !mb-2\">\n\t\t\t\t<label class=\"relative flex items-center rounded-none cursor-pointer\" for=\"shareWithAffiliate\">\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\tid=\"shareWithAffiliate\"\n\t\t\t\t\t\tname=\"shareWithAffiliate\"\n\t\t\t\t\t\tv-model=\"shareWithAffiliate\"\n\t\t\t\t\t\tclass=\"!mr-0 before:content[''] text-black peer relative h-5 w-5 cursor-pointer !appearance-none rounded-none border border-secondary transition-all before:absolute before:top-1/2 before:left-1/2 before:block before:h-7 before:w-7 before:-translate-y-1/2 before:-translate-x-1/2 before:rounded-none before:bg-black before:opacity-0 before:transition-opacity checked:border-black checked:bg-black checked:before:bg-black hover:before:opacity-10 focus:!border-black focus:!shadow-none focus:outline-none focus:ring-offset-0 focus:ring-transparent focus:!rounded-none focus:!text-black\"\n\t\t\t\t\t/>\n\t\t\t\t</label>\n\t\t\t\t<label for=\"shareWithAffiliate\" class=\"cursor-pointer select-none\"> Share with {{ affiliateName }} </label>\n\t\t\t</div>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\t:disabled=\"disabled || loading\"\n\t\t\t\taria-label=\"Next\"\n\t\t\t\t@click=\"handleSendResults\"\n\t\t\t\tclass=\"uppercase btn-primary-border btn-primary-fg btn-primary-bg !py-4 w-full text-[11px]/[14px] border disabled:border-disabled_sublte disabled:bg-disabled disabled:fg-disabled\"\n\t\t\t>\n\t\t\t\t{{ loading ? 'Sending' : 'Submit' }}\n\t\t\t</button>\n\t\t</div>\n\t\t<p v-if=\"affiliateEmail\" class=\"text-xs/[18px] text-center max-w-[370px]\">\n\t\t\tHave questions? Contact {{ affiliateName }}\n\t\t\t<a :href=\"affiliateEmail\" aria-label=\"Contact Your Artist\" class=\"underline\">here</a>\n\t\t</p>\n\t\t<p class=\"text-xs/[18px] text-center max-w-[370px]\">\n\t\t\tBy entering your email address, you agree to our\n\t\t\t<a :href=\"privacyRoute\" target=\"_blank\" class=\"underline\">Privacy Policy</a>.\n\t\t</p>\n\t</section>\n</template>\n<script setup>\nimport { ref, computed, onMounted } from 'vue'\n\nconst props = defineProps({\n\tprivacyRoute: {\n\t\ttype: String,\n\t\trequired: true,\n\t},\n\tinitialFullName: {\n\t\ttype: String,\n\t\tdefault: null,\n\t},\n\tinitialEmail: {\n\t\ttype: String,\n\t\tdefault: null,\n\t},\n\tresults: {\n\t\ttype: Object,\n\t\tdefault: null,\n\t},\n\tsendResults: {\n\t\ttype: Function,\n\t\trequired: true,\n\t},\n\treset: {\n\t\ttype: Function,\n\t\trequired: true,\n\t},\n\taffiliate: {\n\t\ttype: Object,\n\t\tdefault: null,\n\t},\n})\n\nconst loading = ref(false)\nconst fullName = ref(props.initialFullName)\nconst email = ref(props.initialEmail)\nconst emailValid = ref(false)\nconst showShareWithAffiliate = ref(!!props.affiliate)\nconst shareWithAffiliate = ref(false)\n\nonMounted(() => {\n\tvalidateEmail()\n\twindow.scrollTo(0, 0)\n})\n\nconst disabled = computed(() => {\n\tconst isFullNameReady = !!fullName.value\n\tconst isEmailReady = !!email.value\n\tconst isEmailValid = emailValid.value\n\treturn ![isFullNameReady, isEmailReady, isEmailValid].every(Boolean)\n})\nconst affiliateName = computed(() => {\n\tif (showShareWithAffiliate.value) {\n\t\treturn `Artist Affiliate - ${props.affiliate.firstName} ${props.affiliate.lastName}`\n\t}\n\treturn null\n})\nconst affiliateEmail = computed(() => {\n\tif (showShareWithAffiliate.value) {\n\t\treturn `mailto:${props.affiliate.email}`\n\t}\n\treturn null\n})\n\nconst validateEmail = () => {\n\tconst emailPattern = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\n\temailValid.value = emailPattern.test(email.value)\n}\nconst handleSendResults = async () => {\n\tloading.value = true\n\tprops.sendResults({\n\t\tfullName: fullName.value,\n\t\temail: email.value,\n\t\tsendEmail: true,\n\t\tshareWithAffiliate: shareWithAffiliate.value,\n\t\taffiliate: props.affiliate,\n\t})\n\tsetTimeout(() => {\n\t\tloading.value = false\n\t\tfullName.value = null\n\t\temail.value = null\n\t\tshareWithAffiliate.value = false\n\t}, 5000)\n}\nconst handleReset = () => props.reset()\n</script>\n","<template>\n\t<get-started v-if=\"step === 0\" key=\"get-started-step\" :set-step=\"setStep\" :affiliate-code=\"affiliateCode\" />\n\t<skin-tone-level\n\t\tv-else-if=\"step === 1\"\n\t\tkey=\"skin-tone-level-step\"\n\t\t:levels=\"levels\"\n\t\t:is-active-level=\"isActiveLevel\"\n\t\t:set-level-id=\"setLevelId\"\n\t\t:set-level-name=\"setLevelName\"\n\t\t:set-step=\"setStep\"\n\t/>\n\t<skin-tone-picture\n\t\tv-else-if=\"step === 2\"\n\t\tkey=\"skin-tone-picture-step\"\n\t\t:sublevel-images=\"sublevelImages\"\n\t\t:is-active-sublevel=\"isActiveSublevel\"\n\t\t:set-sublevel-name=\"setSublevelName\"\n\t\t:set-sublevel-id=\"setSublevelId\"\n\t\t:set-step=\"setStep\"\n\t/>\n\t<coverage-type\n\t\tv-else-if=\"step === 3\"\n\t\tkey=\"coverage-type-step\"\n\t\t:coverage-name=\"coverageName\"\n\t\t:set-step=\"setStep\"\n\t\t:set-coverage-name=\"setCoverageName\"\n\t\t:set-coverage-id=\"setCoverageId\"\n\t/>\n\t<powder-type\n\t\tv-else-if=\"step === 4\"\n\t\tkey=\"powder-type-step\"\n\t\t:level-id=\"levelId\"\n\t\t:powder-type-name=\"powderTypeName\"\n\t\t:set-powder-type-name=\"setPowderTypeName\"\n\t\t:set-powder-type-id=\"setPowderTypeId\"\n\t\t:set-step=\"setStep\"\n\t/>\n\t<age v-else-if=\"step === 5\" key=\"age-step\" :age-range=\"ageRange\" :set-age-range=\"setAgeRange\" :set-step=\"setStep\" />\n\t<!--\n\t<contact-info\n\t\tv-else-if=\"step === 6\"\n\t\tkey=\"contact-info\"\n\t\t:privacy-route=\"privacyRoute\"\n\t\t:initial-full-name=\"fullName\"\n\t\t:initial-email=\"email\"\n\t\t:set-step=\"setStep\"\n\t\t:set-full-name=\"setFullName\"\n\t\t:set-email=\"setEmail\"\n\t\t:set-send-email=\"setSendEmail\"\n\t/>\n\t-->\n\t<preparing v-else-if=\"step === 6\" key=\"preparing-step\" :loading=\"loading\" :step=\"step\" :set-step=\"setStep\" />\n\t<results\n\t\tv-else-if=\"step === 7\"\n\t\tkey=\"results-step\"\n\t\t:privacy-route=\"privacyRoute\"\n\t\t:initial-full-name=\"fullName\"\n\t\t:initial-email=\"email\"\n\t\t:results=\"results\"\n\t\t:send-results=\"sendResults\"\n\t\t:reset=\"reset\"\n\t\t:affiliate=\"affiliate\"\n\t/>\n</template>\n<script setup>\nimport { onMounted } from 'vue'\nimport { storeToRefs } from 'pinia'\n\nimport GetStarted from './GetStarted.vue'\nimport SkinToneLevel from './SkinToneLevel.vue'\nimport SkinTonePicture from './SkinTonePicture.vue'\nimport CoverageType from './CoverageType.vue'\nimport PowderType from './PowderType.vue'\nimport Age from './Age.vue'\nimport ContactInfo from './ContactInfo.vue'\nimport Preparing from './Preparing.vue'\nimport Results from './Results.vue'\n\nimport { useColorMatchStore } from '@stores'\n\nconst props = defineProps({\n\taffiliate: {\n\t\ttype: Object,\n\t\tdefault: null,\n\t},\n\taffiliateCode: {\n\t\ttype: String,\n\t\tdefault: null,\n\t},\n\tquizUuid: {\n\t\ttype: String,\n\t\trequired: true,\n\t},\n\tprogressEndpoint: {\n\t\ttype: String,\n\t\trequired: true,\n\t},\n\tresultsEndpoint: {\n\t\ttype: String,\n\t\trequired: true,\n\t},\n\tprivacyRoute: {\n\t\ttype: String,\n\t\trequired: true,\n\t},\n})\n\nconst store = useColorMatchStore()\nconst {\n\tlevels,\n\tisActiveLevel,\n\tstep,\n\tsublevelImages,\n\tisActiveSublevel,\n\tcoverageName,\n\tlevelId,\n\tpowderTypeName,\n\tageRange,\n\tfullName,\n\temail,\n\tloading,\n\tresults,\n} = storeToRefs(store)\nconst {\n\tsetUuid,\n\tsetResultsEndpoint,\n\tsetProgressEndpoint,\n\tsetStep,\n\tsetLevelId,\n\tsetLevelName,\n\tsetSublevelName,\n\tsetSublevelId,\n\tsetCoverageName,\n\tsetCoverageId,\n\tsetPowderTypeName,\n\tsetPowderTypeId,\n\tsetAgeRange,\n\tsetFullName,\n\tsetEmail,\n\tsetSendEmail,\n\tsendResults,\n\treset,\n} = store\n\nonMounted(async () => {\n\tsetUuid(props.quizUuid)\n\tsetResultsEndpoint(props.resultsEndpoint)\n\tsetProgressEndpoint(props.progressEndpoint)\n\n\tconst promises = Object.values(levels.value).map((level) => {\n\t\treturn level.images.map((obj) => {\n\t\t\treturn new Promise((resolve) => {\n\t\t\t\tconst img = new Image()\n\t\t\t\timg.src = obj.src\n\t\t\t\timg.onload = resolve\n\t\t\t})\n\t\t})\n\t})\n\tawait Promise.all(promises.flat())\n})\n</script>\n"],"names":["props","__props","handleNextStep","onMounted","selectionId","selectionName","handleBackStep","powderTypeOptions","ref","powderUseOptions","options","selection","watch","isLoading","loading","fullName","email","emailValid","showShareWithAffiliate","shareWithAffiliate","validateEmail","disabled","computed","isFullNameReady","isEmailReady","isEmailValid","affiliateName","affiliateEmail","emailPattern","handleSendResults","handleReset","store","useColorMatchStore","levels","isActiveLevel","step","sublevelImages","isActiveSublevel","coverageName","levelId","powderTypeName","ageRange","results","storeToRefs","setUuid","setResultsEndpoint","setProgressEndpoint","setStep","setLevelId","setLevelName","setSublevelName","setSublevelId","setCoverageName","setCoverageId","setPowderTypeName","setPowderTypeId","setAgeRange","setFullName","setEmail","setSendEmail","sendResults","reset","promises","level","obj","resolve","img"],"mappings":"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"}