{"version":3,"file":"J8f0eCH5.js","sources":["../../../../components/Plan/Select/Button.vue","../../../../components/Icon/PlanTextDecorLeft.vue","../../../../components/Icon/PlanTextDecorRight.vue","../../../../virtual:public?%2Fassets%2Fimages%2Fplans%2Fplans-page-decor-1.svg","../../../../virtual:public?%2Fassets%2Fimages%2Fplans%2Fnl-img-prod.webp","../../../../pages/onboarding/plans/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { formatMoney } from \"@/utils/helpers\";\nimport type { Plan } from \"@/stores/onbording.store\";\n\nconst props = defineProps<{\n  plan: Plan;\n}>();\n\nconst emit = defineEmits([\"selected\"]);\n\nconst planListState =\n  inject<Ref<{ selectedPlan: Plan | null }>>(\"planListState\");\n\nconst select = () => {\n  planListState.value.selectedPlan = props.plan;\n  return emit(\"selected\", props.plan);\n};\nconst isSelected = computed(() => {\n  return planListState?.value.selectedPlan?.id === props.plan.id;\n});\n</script>\n\n<template>\n  <div\n    class=\"tw-w-1/2 tw-p-2\"\n    :class=\"[isSelected ? 'shadow-s13' : 'shadow-s12']\"\n    @click.prevent=\"select\"\n  >\n    <a\n      href=\"#\"\n      class=\"tw-bg-nl-white-100 tw-pt-[31px] tw-pr-[25px] tw-pl-2.5 md:tw-pl-[17px] tw-pb-[21px] tw-rounded-[6px] tw-overflow-hidden tw-shadow-nl-8 md:tw-shadow-nl-7 tw-flex tw-flex-wrap tw-justify-center tw-relative tw-min-h-[116px]\"\n    >\n      <span\n        v-if=\"plan.tag\"\n        class=\"tw-absolute tw-top-0 tw-right-0 tw-left-0 tw-bg-nl-green-400 tw-py-[3px] tw-uppercase tw-text-white tw-font-bold tw-text-[14px] tw-leading-[0.90633] tw-text-center\"\n        >{{ plan.tag }}</span\n      >\n      <div class=\"tw-flex tw-justify-center tw-items-center\">\n        <strong\n          class=\"tw-text-[55px] tw-leading-[0.81] tw-font-black tw-nl-green-100 mt-0.5\"\n          >{{ plan.threshold }}</strong\n        >\n        <span\n          class=\"tw-pl-1.5 tw-text-[16px] tw-leading-[1.0625] tw-font-bold -tw-mt-1.5\"\n          >items <br />\n          per week</span\n        >\n      </div>\n      <div\n        class=\"tw-w-full tw-flex tw-items-center tw-justify-center tw-gap-1 tw-text-[16px] tw-leading-[1.125] tw-ml-[7px]\"\n      >\n        <span\n          v-show=\"\n          plan.promo_discount_type !== 'amount' &&\n            plan.displayPrice.pricePerMealWithAllDiscounts <\n            plan.displayPrice.pricePerMealWithInnerDiscount\n          \"\n          class=\"tw-text-[#a9c5ba] tw-relative\"\n        >\n          <span\n            class=\"tw-absolute tw-left-1/2 tw-top-1/2 tw-transform -tw-translate-y-1/2 -tw-translate-x-1/2\"\n          >\n            <svg\n              class=\"w-full\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"38\"\n              height=\"5\"\n              viewBox=\"0 0 38 5\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M1.04526 3.63503C7.26124 1.55665 26.6756 1.07775 37 2.99988\"\n                stroke=\"#A9C5BA\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n              />\n            </svg>\n          </span>\n          {{ formatMoney(plan.displayPrice.pricePerMealWithInnerDiscount) }}\n        </span>\n        <span\n          >{{\n            formatMoney(plan.displayPrice.pricePerMealWithAllDiscounts)\n          }}/item</span\n        >\n      </div>\n      <span\n        class=\"tw-absolute tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-right-2 icon-main-chevron-right tw-text-[20px]\"\n      ></span>\n    </a>\n  </div>\n</template>\n","<script setup lang=\"ts\"></script>\n<template>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"29\"\n    height=\"30\"\n    viewBox=\"0 0 29 30\"\n    fill=\"none\"\n  >\n    <rect\n      x=\"18.3948\"\n      y=\"1.75415\"\n      width=\"14.2532\"\n      height=\"4.5209\"\n      rx=\"2.26045\"\n      transform=\"rotate(59.4304 18.3948 1.75415)\"\n      fill=\"#F8F0E6\"\n    />\n    <rect\n      x=\"9.20166\"\n      y=\"8.06812\"\n      width=\"14.2532\"\n      height=\"4.52091\"\n      rx=\"2.26045\"\n      transform=\"rotate(34.6473 9.20166 8.06812)\"\n      fill=\"#F8F0E6\"\n    />\n    <rect\n      x=\"4.27319\"\n      y=\"16.6997\"\n      width=\"14.2532\"\n      height=\"4.5209\"\n      rx=\"2.26045\"\n      transform=\"rotate(15.887 4.27319 16.6997)\"\n      fill=\"#F8F0E6\"\n    />\n  </svg>\n</template>\n\n<style scoped></style>\n","<script setup lang=\"ts\"></script>\n<template>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"29\"\n    height=\"30\"\n    viewBox=\"0 0 29 30\"\n    fill=\"none\"\n  >\n    <rect\n      x=\"26.334\"\n      y=\"21.0898\"\n      width=\"14.2532\"\n      height=\"4.52091\"\n      rx=\"2.26045\"\n      transform=\"rotate(159.857 26.334 21.0898)\"\n      fill=\"#F8F0E6\"\n    />\n    <rect\n      x=\"21.7881\"\n      y=\"10.9056\"\n      width=\"14.2532\"\n      height=\"4.52091\"\n      rx=\"2.26045\"\n      transform=\"rotate(135.074 21.7881 10.9056)\"\n      fill=\"#F8F0E6\"\n    />\n    <rect\n      x=\"14.1909\"\n      y=\"4.49646\"\n      width=\"14.2532\"\n      height=\"4.5209\"\n      rx=\"2.26045\"\n      transform=\"rotate(116.314 14.1909 4.49646)\"\n      fill=\"#F8F0E6\"\n    />\n  </svg>\n</template>\n\n<style scoped></style>\n","import { publicAssetsURL } from '#internal/nuxt/paths';export default publicAssetsURL(\"/assets/images/plans/plans-page-decor-1.svg\")","import { publicAssetsURL } from '#internal/nuxt/paths';export default publicAssetsURL(\"/assets/images/plans/nl-img-prod.webp\")","<script setup lang=\"ts\">\nimport {onMounted} from \"vue\";\n\nuseHead({\n  link: [\n    {\n      rel: \"stylesheet\",\n      href: \"/assets/compile/tailwind.css\",\n    },\n  ],\n});\n\ndefinePageMeta({\n  layout: \"regflow-new\",\n});\nimport { URL_ACCOUNT_ORDERS_PAGE } from \"@/constants/urls\";\nimport type { Plan } from \"@/stores/onbording.store\";\n\nconst router = useRouter();\nconst route = useRoute();\nconst onboardingStore = useOnboardingStore();\nconst menusStore = useMenusStore();\nconst authStore = useAuthStore();\n\nconst listState = ref<{\n  selectedPlan: Plan | null;\n}>({\n  selectedPlan: null,\n});\n\nprovide(\"planListState\", listState);\n\nconst currentSelectedPlan = computed(() => {\n  return onboardingStore.selectedPlan;\n});\n\nfunction navigateToMenusPage() {\n  const navItem = menusStore.defaultMenuItem?.slug\n    ? { navItem: menusStore.defaultMenuItem.slug }\n    : {};\n  const resolvedUrl = router.resolve({\n    name: \"menus\",\n    query: { ...navItem, ...route.query },\n  });\n  window.location.href = resolvedUrl.href;\n}\n\nasync function submit() {\n  if (Number(authStore?.user?.id) > 0) {\n    window.location.href = URL_ACCOUNT_ORDERS_PAGE;\n    return;\n  }\n  if (!listState.value.selectedPlan) {\n    return;\n  }\n  if (\n    currentSelectedPlan.value &&\n    currentSelectedPlan.value.id == listState.value.selectedPlan.id\n  ) {\n    navigateToMenusPage();\n    return;\n  }\n\n  if (\n    currentSelectedPlan.value &&\n    currentSelectedPlan.value.threshold > listState.value.selectedPlan.threshold\n  ) {\n    await downgrade();\n  } else {\n    await onboardingStore.UPDATE_PLAN({\n      planId: listState.value.selectedPlan.id,\n      sourceUrl: window.location.href,\n    });\n  }\n\n  navigateToMenusPage();\n}\n\nasync function downgrade() {\n  await onboardingStore.UPDATE_PLAN({\n    planId: listState?.value?.selectedPlan?.id,\n    sourceUrl: window.location.href,\n  });\n}\n\nwatch(\n  () => currentSelectedPlan.value,\n  (newSelectedPlan) => {\n    listState.value.selectedPlan = newSelectedPlan;\n  }\n);\n\nonMounted(async () => {\n  //TODO temporary check to simulate mixin\n  let el = document.querySelector(\"#content\");\n  if (el) el.scrollIntoView(true);\n  listState.value.selectedPlan = currentSelectedPlan.value;\n  await menusStore.fetchMenuItems();\n});\n</script>\n<template>\n  <div\n    class=\"md:tw-h-[calc(var(--vh)-var(--om-floating-height)-72px)] tw-relative md:tw-z-10 md:tw-overflow-auto tw-pt-[33px] md:tw-pt-0 tw-mb-[18px] md:tw-mb-0\"\n  >\n    <div\n      class=\"tw-hidden md:tw-block tw-absolute tw-inset-0 tw-bg-[length:auto_calc(100%+33vh)] tw-bg-repeat tw-bg-[center_top] -tw-z-1\"\n      :style=\"{\n        backgroundImage: `url(/assets/images/plans/desktop-plans-bg.webp)`,\n      }\"\n    ></div>\n    <div\n      class=\"tw-flex tw-h-full tw-items-center tw-justify-center tw-pb-[5px] md:tw-py-[80px] md:tw-bg-nl-green-100 md:tw-bg-opacity-35\"\n    >\n      <div class=\"tw-container tw-px-[24px] tw-w-full\">\n        <div\n          class=\"md:tw-max-w-[500px] md:tw-min-h-[534px] md:tw-mx-auto tw-relative\"\n        >\n          <div class=\"tw-hidden md:tw-block tw-absolute tw-top-[14px] tw-bottom-0 -tw-left-10 -tw-right-5 tw-z-1 tw-translate-x-4\">\n            <img\n              src=\"/assets/images/plans/plans-page-decor-1.svg\"\n              class=\"tw-h-full\"\n              alt=\"decor\"\n            />\n          </div>\n          <div\n            class=\"tw-relative tw-z-2 md:tw-pt-[69px] md:tw-pb-5 md:tw-pl-[40px] md:tw-pr-[40px] tw-text-center tw-text-[16px] md:tw-text-[22px] tw-leading-[1.125] md:tw-leading-[1.09]\"\n          >\n            <div\n              class=\"tw-max-w-[400px] tw-mx-auto tw-mb-[18px] md:tw-mb-6 tw-font-medium md:tw-font-normal\"\n            >\n              <h2\n                class=\"tw-text-[34px] min-[375px]:tw-text-[36px] md:tw-text-[40px] tw-leading-none tw-text-uppercase tw-text-nl-green-100 tw-font-agenda tw-font-black mb-[6px] md:tw-mb-2.5 tw-uppercase\"\n              >\n                choose your plan\n              </h2>\n              <p class=\"max-md:tw-hidden\">The more you get, the more you save! Update your plan size, skip weeks, or cancel your account any time.</p>\n              <p class=\"md:tw-hidden\">The more you get, the more you save! Update your&nbsp;plan size, skip weeks, or cancel any time.</p>\n            </div>\n            <div\n              class=\"md:tw-max-w-[388px] tw-mx-auto tw-mb-[22px] md:tw-mb-[18px]\"\n            >\n              <div class=\"tw-flex tw-flex-wrap -tw-m-2 tw-text-left\">\n                <PlanSelectButton\n                  v-for=\"plan in onboardingStore.plans\"\n                  :key=\"plan.id\"\n                  :plan=\"plan\"\n                  @selected=\"submit\"\n                  data-cy=\"btn-shipping-plan\"\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"md:tw-hidden tw-overflow-clip\">\n      <div class=\"tw-overflow-hidden tw-pb-8\">\n        <div\n          class=\"tw-pt-8 md:tw-pt-[43px] min-[391px]:tw-pt-[50px] tw-pb-2.5 md:tw-pb-[21px] tw-relative tw-bg-nl-green-400\"\n        >\n          <div\n            class=\"tw-absolute -tw-top-px tw-left-0 tw-right-0 tw-h-[10px] min-[391px]:tw-h-[20px] tw-bg-no-repeat plans-t-curv\"\n          ></div>\n          <div class=\"tw-container\">\n            <ul\n              class=\"tw-text-center tw-text-nl-yellow-100 tw-text-[20px] tw-leading-[2] tw-font-black\"\n            >\n              <li>\n                <div class=\"tw-inline-flex tw-relative\">\n                  <span\n                    class=\"tw-absolute -tw-left-[21px] -tw-top-[9px] tw-w-[16px] tw-h-[24px]\"\n                  >\n                    <IconPlanTextDecorLeft />\n                  </span>\n                  Loved by thousands of kids\n                </div>\n              </li>\n              <li>\n                <div class=\"tw-inline-flex tw-relative\">\n                  <span\n                    class=\"tw-absolute -tw-right-[9px] -tw-top-[6px] tw-w-[16px] tw-h-[24px]\"\n                  >\n                    <IconPlanTextDecorRight />\n                  </span>\n                  Ready to serve in 1 minute\n                </div>\n              </li>\n              <li>\n                <div class=\"tw-inline-flex tw-relative\">\n                  <span\n                    class=\"tw-absolute -tw-left-[21px] -tw-top-[9px] tw-w-[16px] tw-h-[24px]\"\n                  >\n                    <IconPlanTextDecorLeft />\n                  </span>\n                  Made with real, clean ingredients\n                </div>\n              </li>\n            </ul>\n          </div>\n          <div\n            class=\"tw-absolute tw-top-full -tw-left-[6px] min-[391px]:-tw-left-[20px] -tw-right-[6px] min-[391px]:-tw-right-[18px] tw-h-[12px] min-[391px]:tw-h-[24px] tw-bg-no-repeat plans-b-curv\"\n          ></div>\n        </div>\n      </div>\n      <div class=\"-tw-mt-[32px] -tw-mb-[64px]\">\n        <img\n          src=\"/assets/images/plans/nl-img-prod.webp\"\n          class=\"w-full\"\n          alt=\"\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n\n.plans-t-curv {\n  background-image: url(\"/assets/images/plans/l-curve-t.svg\");\n}\n\n.plans-b-curv {\n  background-image: url(\"/assets/images/plans/l-curve-b.svg\");\n}\n\n</style>\n"],"names":["props","__props","emit","__emit","planListState","inject","select","isSelected","computed","_a","_hoisted_1","_hoisted_2","_createElementVNode","_hoisted_3","_hoisted_4","_hoisted_5","_cache","_imports_0","publicAssetsURL","_imports_1","useHead","router","useRouter","route","useRoute","onboardingStore","useOnboardingStore","menusStore","useMenusStore","authStore","useAuthStore","listState","ref","provide","currentSelectedPlan","navigateToMenusPage","navItem","resolvedUrl","submit","URL_ACCOUNT_ORDERS_PAGE","downgrade","_b","watch","newSelectedPlan","onMounted","el"],"mappings":"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"}