{"version":3,"mappings":"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","names":["_sfc_main","FadeTransition","mapState","state","_a","_b","_c","step","mapActions","mapMutations","design","option","updatedDesign","_hoisted_2","_hoisted_4","_hoisted_5","_hoisted_7","_hoisted_8","_hoisted_9","_openBlock","_createElementBlock","_hoisted_1","_createVNode","_component_fade_transition","_withCtx","$options","_hoisted_3","_ctx","_createCommentVNode","_createElementVNode","_hoisted_6","_toDisplayString","_Fragment","_renderList","_normalizeStyle","_normalizeClass","$event","_cache","_withModifiers","args","SvgIcon","BuilderImage","marqueSvg","routes","percentageToComplete","route","_component_svg_icon","$data","_component_router_view","_component_builder_image","store","createStore","filters","commit","index","updatedDesigns","data","parsedBuilderData","htmlChanged","dispatch","getters","params","api","error","bookType","pageType","coverType","sizeType","formatType","designs","filter","colour","flag","path","code","categories","BookType","__vitePreload","PaperType","CoverType","SizeType","FormatType","DesignStep","router","createRouter","createWebHistory","ready","node","translations","props","app","createApp","GiftBuilder","giftBuilderData","I18n","initialBookType","initialPageType"],"ignoreList":[],"sources":["../../../app/javascript/components/catalog/giftBuilder/BuilderImage.vue","../../../app/javascript/components/catalog/giftBuilder/GiftBuilder.vue","../../../app/javascript/store/giftBuilder.js","../../../app/javascript/routers/giftBuilder.js","../../../app/javascript/entrypoints/giftBuilder.js"],"sourcesContent":["<template>\n  <div\n    key=\"builderImage\"\n    class=\"flex-1 builder-right overflow-hidden relative hidden md:block\">\n    <fade-transition>\n      <img\n        v-if=\"currentConfigurationStep && currentConfigurationStep.imageUrl\"\n        :src=\"currentConfigurationStep.imageUrl\"\n        :alt=\"currentConfigurationStep.step\"\n        class=\"block object-cover w-full h-full builder-img\" />\n      <div\n        v-else-if=\"designStep\"\n        class=\"flex justify-center\">\n        <fade-transition>\n          <img\n            v-if=\"selectedDesign\"\n            :key=\"selectedDesign.image\"\n            class=\"block object-cover w-full h-full builder-img\"\n            :src=\"selectedDesign.image\"\n            alt=\"design\" />\n        </fade-transition>\n        <div class=\"absolute bottom-6 text-center br-3 p-4 glass\">\n          <div v-if=\"selectedDesign && selectedDesign.colour_options.length\">\n            <p class=\"typeset-4\">{{ t(\"book-builder.more-colours\") }}</p>\n            <ul class=\"flex list-unstyled mt-3 justify-center\">\n              <li\n                v-for=\"option in selectedDesign.colour_options\"\n                :key=\"option\"\n                :style=\"{ backgroundColor: `#${option.hex_code}` }\"\n                class=\"colour-option h-5 w-5 br-circle mx-2 mb-4 cursor-pointer\"\n                :class=\"{\n                  border: selectedDesign.analytics_id === option.analytics_id\n                }\"\n                @click=\"handleColourOptionClick(option)\"></li>\n            </ul>\n          </div>\n          <a\n            class=\"underline\"\n            target=\"_blank\"\n            href=\"#\"\n            @click.prevent=\"findOutMore\">\n            {{ t(\"book-builder.find-out-more\") }}\n          </a>\n        </div>\n      </div>\n    </fade-transition>\n  </div>\n</template>\n\n<script>\nimport { mapActions, mapMutations, mapState } from \"vuex\";\nimport FadeTransition from \"@/app/javascript/components/transitions/FadeTransition.vue\";\n\nexport default {\n  name: \"BuilderImage\",\n  components: {\n    FadeTransition\n  },\n  computed: {\n    ...mapState({\n      bookType: state => state.bookType,\n      pageType: state => state.pageType,\n      coverType: state => state.coverType,\n      sizeType: state => state.sizeType,\n      formatType: state => state.formatType,\n      selectedDesign: state => state.selectedDesign\n    }),\n    configurationSteps() {\n      return [\n        {\n          step: \"book-type\",\n          imageUrl: this.bookType?.imageUrl\n        },\n        {\n          step: \"page-type\",\n          imageUrl: this.pageType?.imageUrl\n        },\n        {\n          step: \"cover-type\",\n          imageUrl: this.coverTypeImage\n        },\n        {\n          step: \"size-type\",\n          imageUrl: this.sizeTypeImage\n        },\n        {\n          step: \"format-type\",\n          imageUrl: this.formatType?.imageUrl\n        }\n      ];\n    },\n    currentConfigurationStep() {\n      return this.configurationSteps.find(step =>\n        this.$route.fullPath.includes(step.step)\n      );\n    },\n    designStep() {\n      return this.$route.fullPath.includes(\"design\");\n    },\n    findOutMorePath() {\n      return `${window.countryCode}/${this.selectedDesign.slug}`;\n    },\n    coverTypeImage() {\n      if (!this.bookType || !this.coverType) return null;\n      switch (this.bookType.categoryId) {\n        case 763:\n          return this.coverType.midYearDiaryImageUrl;\n        case 805:\n          return this.coverType.academicDiaryImageUrl;\n        case 815:\n          return this.coverType.recipeImageUrl;\n        default:\n          return this.coverType.notebookImageUrl;\n      }\n    },\n    sizeTypeImage() {\n      if (!this.bookType || !this.sizeType) return null; // Early return if null\n\n      switch (this.bookType.categoryId) {\n        case 73:\n          return this.sizeType.notebookImageUrl;\n        default:\n          return this.sizeType.diaryImageUrl;\n      }\n    }\n  },\n  methods: {\n    ...mapActions([\"replaceDesignWithOption\"]),\n    ...mapMutations([\"setSelectedDesign\"]),\n    selectDesign(design) {\n      analytics.track(\"Gift Builder Selected Design\", {\n        analytics_id: design.analytics_id\n      });\n      this.setSelectedDesign(design);\n    },\n    handleColourOptionClick(option) {\n      const updatedDesign = {\n        ...this.selectedDesign,\n        ...option\n      };\n      this.selectDesign(updatedDesign);\n    },\n    findOutMore() {\n      if (!this.selectedDesign) return;\n\n      analytics.track(\"Gift Builder - Clicked Find out more\", {\n        id: this.selectedDesign.analytics_id\n      });\n      window.open(this.findOutMorePath, \"_blank\");\n    }\n  }\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.builder-right {\n  grid-column: 3/-1;\n}\n\n.builder-img {\n  width: 100%;\n  display: block;\n  position: absolute;\n  left: 0;\n}\n</style>\n","<template>\n  <div class=\"overflow-hidden flex flex-col max-h-svh min-h-svh\">\n    <div\n      class=\"builder-nav py-4 bg-paper-1 flex items-center justify-center px-3 md:px-5\">\n      <div class=\"items-center absolute left-5 hidden md:flex\">\n        <svg-icon\n          name=\"leftarrow-small-thin\"\n          class=\"mr-3\" />\n        <a\n          href=\"#\"\n          class=\"underline\"\n          @click.prevent=\"goToHome\">\n          {{ t(\"book-builder.back-home\") }}\n        </a>\n      </div>\n      <div class=\"flex-1 flex justify-center\">\n        <a\n          href=\"#\"\n          class=\"block w-32 md:w-40\"\n          @click.prevent=\"goToHome\">\n          <img\n            :src=\"marqueSvg\"\n            class=\"block m-auto\" />\n        </a>\n      </div>\n    </div>\n    <div class=\"flex flex-1 flex-col overflow-hidden\">\n      <div\n        :style=\"progressStyles\"\n        class=\"h-3 book-builder-progress-bar w-full bg-green-2 flex-no-shrink\"></div>\n      <div\n        class=\"w-full flex bg-white book-builder-grid flex-1 overflow-hidden bg-paper-2\">\n        <router-view key=\"view\" />\n\n        <!-- RIGHT IMAGE -->\n        <builder-image />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { mapState } from \"vuex\";\nimport SvgIcon from \"@/app/javascript/components/shared/SvgIcon.vue\";\n// eslint-disable-next-line import/no-unresolved\nimport marqueSvg from \"@/app/assets/images/logo-marque.svg?url\";\n\nimport BuilderImage from \"./BuilderImage.vue\";\n\nexport default {\n  name: \"GiftBuilder\",\n  components: {\n    SvgIcon,\n    BuilderImage\n  },\n  data() {\n    return {\n      marqueSvg,\n      progress: 100\n    };\n  },\n  computed: {\n    ...mapState({\n      rootPath: state => state.rootPath\n    }),\n    route() {\n      return this.$route;\n    },\n    stepNumber() {\n      return this.$route.meta.number;\n    },\n    progressStyles() {\n      return {\n        transform: `translateX(-${this.progress}%)`\n      };\n    }\n  },\n  watch: {\n    route() {\n      this.checkProgress();\n\n      if (this.route.meta && this.stepNumber) {\n        analytics.track(\"Viewed Book Builder\", {\n          step: this.route.name,\n          number: this.stepNumber\n        });\n      }\n    }\n  },\n  methods: {\n    async goToHome() {\n      await analytics.track(\"Gift Builder - Clicked Back to homepage\");\n      window.location.href = this.rootPath;\n    },\n    checkProgress() {\n      const { routes } = this.$router.options;\n\n      const currentIndex = routes.findIndex(\n        route => route.path === this.route.path\n      );\n\n      const percentageToComplete = (currentIndex / routes.length) * 100;\n\n      this.progress = 100 - percentageToComplete;\n    }\n  }\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.book-builder-grid {\n  display: grid;\n\n  @media (min-width: $screen-md-min) {\n    grid-template-columns: 1fr 486px 486px 1fr;\n  }\n  @media (min-width: $screen-lg-min) {\n    grid-template-columns: 1fr 640px 640px 1fr;\n  }\n}\n\n.builder-left {\n  grid-column: 2/3;\n}\n\n.builder-right {\n  grid-column: 3/-1;\n}\n\n.builder-img {\n  width: 100%;\n  display: block;\n  position: absolute;\n}\n\n.book-builder-progress-bar {\n  transition: transform 0.4s ease-in-out;\n  z-index: 2;\n}\n</style>\n","import { createStore } from \"vuex\";\nimport api from \"../api\";\n\nexport default createStore({\n  state: {\n    bookType: null,\n    pageType: null,\n    coverType: null,\n    sizeType: null,\n    formatType: null,\n    selectedDesign: null,\n    selectedDesignIndex: null,\n    colourOption: null,\n    selectedFilter: null,\n    bookDesigns: [],\n    styleFilters: [],\n    loading: false,\n    rootPath: \"\",\n    storeCode: \"gb\",\n    categories: {}\n  },\n  getters: {\n    filtersJSONForResults: state => {\n      let filters = {};\n\n      if (state.selectedFilter) {\n        filters.styles = [state.selectedFilter.name];\n      }\n\n      if (state.coverType && state.formatType?.categoryId !== 911) {\n        // Daily Diaries only have one cover type, so this filter doesn't exist on the category\n        filters = {\n          ...filters,\n          ...state.coverType.filters[state.storeCode]\n        };\n      }\n\n      if (state.sizeType) {\n        filters = {\n          ...filters,\n          ...state.sizeType.filters[state.storeCode]\n        };\n      }\n\n      return JSON.stringify(filters);\n    },\n    categoryIdForResults: state => {\n      if (\n        state.pageType &&\n        state.bookType.categoryId === 73 &&\n        state.coverType.key === \"hard-back\"\n      ) {\n        return state.pageType.categoryId;\n      }\n\n      if (state.formatType) {\n        return state.formatType.categoryId;\n      }\n\n      return state.bookType.categoryId;\n    }\n  },\n  actions: {\n    replaceDesignWithOption({ commit, state }, { updatedDesign, index }) {\n      const updatedDesigns = [...state.bookDesigns];\n      updatedDesigns[index] = updatedDesign;\n      commit(\"setBookDesigns\", updatedDesigns);\n      commit(\"setSelectedDesign\", updatedDesign);\n    },\n    setResultsAndFilters({ state, commit }, data) {\n      const parsedBuilderData = JSON.parse(data.builder_json);\n      commit(\"setBookDesigns\", parsedBuilderData);\n      commit(\"setStyleFilters\", data.style_filters);\n\n      // This will assign the first design[0] from the builderData to the selectedDesign state, but will only be assigned on the initial fetch for the designs\n      if (!state.selectedDesign) {\n        commit(\"setSelectedDesign\", parsedBuilderData[0]);\n\n        if (parsedBuilderData[0].colour_options) {\n          commit(\"setColourOption\", parsedBuilderData[0].colour_options[0]);\n        }\n      }\n\n      setTimeout(() => {\n        const htmlChanged = new Event(\"htmlChanged\");\n        window.dispatchEvent(htmlChanged);\n      }, 100);\n    },\n    async fetchDesigns({ commit, dispatch, getters }) {\n      commit(\"setLoading\", true);\n\n      try {\n        const params = {\n          category_id: getters.categoryIdForResults,\n          filters: getters.filtersJSONForResults\n        };\n\n        const { data } = await api.post(\"/book-builder/data\", params, {\n          headers: {\n            \"Content-Type\": \"application/json\"\n          }\n        });\n\n        dispatch(\"setResultsAndFilters\", data);\n\n        commit(\"setLoading\", false);\n      } catch (error) {\n        console.log(error);\n        commit(\"setBookDesigns\", []);\n      }\n    }\n  },\n  mutations: {\n    setBookType(state, bookType) {\n      state.bookType = bookType;\n    },\n    setPageType(state, pageType) {\n      state.pageType = pageType;\n    },\n    setCoverType(state, coverType) {\n      state.coverType = coverType;\n    },\n    setSizeType(state, sizeType) {\n      state.sizeType = sizeType;\n    },\n    setFormatType(state, formatType) {\n      state.formatType = formatType;\n    },\n    setBookDesigns(state, designs) {\n      state.bookDesigns = designs;\n    },\n    setSelectedDesign(state, design) {\n      state.selectedDesign = design;\n    },\n    setSelectedFilter(state, filter) {\n      state.selectedFilter = filter;\n    },\n    setStyleFilters(state, filters) {\n      state.styleFilters = filters;\n    },\n    setColourOption(state, colour) {\n      state.colourOption = colour;\n    },\n    setLoading(state, flag) {\n      state.loading = flag;\n    },\n    setRootPath(state, path) {\n      state.rootPath = path;\n    },\n    setStoreCode(state, code) {\n      state.storeCode = code;\n    },\n    setCategories(state, categories) {\n      state.categories = categories;\n    }\n  }\n});\n","import { createRouter, createWebHistory } from \"vue-router\";\n\nconst BookType = () => import(\"../components/catalog/giftBuilder/BookType.vue\");\nconst PaperType = () =>\n  import(\"../components/catalog/giftBuilder/PaperType.vue\");\nconst CoverType = () =>\n  import(\"../components/catalog/giftBuilder/CoverType.vue\");\nconst SizeType = () => import(\"../components/catalog/giftBuilder/SizeType.vue\");\nconst FormatType = () =>\n  import(\"../components/catalog/giftBuilder/FormatType.vue\");\nconst DesignStep = () =>\n  import(\"../components/catalog/giftBuilder/DesignStep.vue\");\n\nconst routes = [\n  {\n    path: \"/\",\n    redirect: \"/book-type\"\n  },\n  {\n    path: \"/book-type\",\n    component: BookType,\n    name: \"Book Type\",\n    meta: { number: 1 }\n  },\n  {\n    path: \"/page-type\",\n    component: PaperType,\n    name: \"Paper Type\",\n    meta: { number: 2 }\n  },\n  {\n    path: \"/cover-type\",\n    component: CoverType,\n    name: \"Cover Type\",\n    meta: { number: 3 }\n  },\n  {\n    path: \"/size-type\",\n    component: SizeType,\n    name: \"Size Type\",\n    meta: { number: 4 }\n  },\n  {\n    path: \"/format-type\",\n    component: FormatType,\n    name: \"Format Type\",\n    meta: { number: 5 }\n  },\n  {\n    path: \"/choose-design\",\n    component: DesignStep,\n    name: \"Design Type\",\n    meta: { number: 6 }\n  }\n];\n\nconst router = createRouter({\n  routes,\n  history: createWebHistory(`${window.countryCode}/book-builder`),\n  scrollBehavior() {\n    return { left: 0, top: 0 };\n  }\n});\n\nexport default router;\n","import \"../modules/segmentS2S\";\nimport \"../modules/analytics\";\n\nimport { createApp } from \"vue\";\nimport giftBuilderData from \"@/app/javascript/utils/giftBuilderData.json\";\nimport GiftBuilder from \"@/app/javascript/components/catalog/giftBuilder/GiftBuilder.vue\";\nimport store from \"../store/giftBuilder\";\nimport router from \"../routers/giftBuilder\";\nimport I18n from \"../plugins/i18n\";\n\nimport { ready } from \"../utils/listeners\";\n\nready(() => {\n  const node = document.getElementById(\"gift-builder-app\");\n\n  if (!node) {\n    return;\n  }\n\n  const translations = JSON.parse(node.dataset.translations);\n\n  const props = JSON.parse(node.dataset.props);\n\n  const app = createApp(GiftBuilder);\n\n  app.provide(\"giftBuilderData\", giftBuilderData);\n\n  app.use(router);\n  app.use(store);\n  app.use(I18n, translations);\n\n  const initialBookType = props.categories[Object.keys(props.categories)[0]][0];\n  store.commit(\"setBookType\", initialBookType);\n\n  const initialPageType = giftBuilderData[\"page-type\"][0];\n  store.commit(\"setPageType\", initialPageType);\n\n  store.commit(\"setRootPath\", props.rootPath);\n  store.commit(\"setCategories\", props.categories);\n  store.commit(\"setStoreCode\", props.storeCode);\n\n  app.mount(node);\n});\n"],"file":"assets/giftBuilder-Be6rN6gU.js"}