{"version":3,"mappings":"+7BAQA,MAAMA,EAAUC,EAAqB,IAAMC,EAAA,WAAO,uBAAwC,sFAAC,EACrFC,EAAcF,EAAqB,IAAMC,EAAA,WAAO,2BAA8B,0FAAC,EAE/EE,EAAQC,EAqCRC,EAAiB,KAAK,UAAU,CACrC,QAAW,CACV,iBAAoB,GACpB,MAAS,GACT,WAAc,GACd,SAAY,GACZ,QAAW,GACX,qBAAwB,GACxB,qBAAwB,EACzB,EACA,EAEKC,EAAYC,EAAI,EAAK,EACrBC,EAAgBD,IAChBE,EAAkBF,EAAI,EAAE,EAExBG,EAAkB,SAAY,OACnC,IAAIC,EAAM,kEAAkER,EAAM,IAAI,aAAaA,EAAM,IAAI,GAEzGA,EAAM,MAAQ,iBAAmBA,EAAM,MAAQ,YAAcA,EAAM,MAAQ,WAC9EQ,GAAO,qBAAqBR,EAAM,SAAS,qBAAqBA,EAAM,SAAS,GACrEA,EAAM,MAAQ,0BACjBQ,GAAA,oBAAmBC,EAAAT,EAAM,OAAN,YAAAS,EAAY,OAAO,IAG9C,MAAMC,EAAUF,CAAG,GAGdG,EAAiB,SAAY,OAU9B,IAAAH,EAAM,qDATOC,EAAAT,EAAM,OAAN,YAAAS,EAAY,UAED,IAAKG,GAC7BA,EAAQ,UACH,GAAGA,EAAQ,SAAS,IAAIA,EAAQ,SAAS,GAEzC,GAAGA,EAAQ,SAAS,EAE5B,EAAE,KAAK,GAAG,CAC4D,GAEvE,MAAMF,EAAUF,CAAG,GAGdE,EAAY,MAAOF,GAAgB,CACxCL,EAAU,MAAQ,GAClB,MAAM,MAAMK,EAAK,CAChB,OAAQ,OACR,QAAS,CACR,eAAgB,kBACjB,EACA,KAAMN,CAAA,CACN,EACA,KAAiBW,GAAA,CACb,IAACA,EAAS,GACP,UAAI,MAAM,6BAA6B,EAE9C,OAAOA,EAAS,MAAK,CACrB,EACA,KAAaC,GAAA,CACbR,EAAgB,MAAQQ,CAAA,CACxB,EACA,MAAeC,GAAA,CACfV,EAAc,MAAQ,sBACd,YAAI,SAAUU,CAAK,EAC3B,EACDZ,EAAU,MAAQ,IAGba,EAA0BZ,EAAI,EAAE,EAEhCa,EAAc,IAAM,CACrBjB,EAAM,MAAQ,gBACOgB,EAAA,MAAQE,EAAe,mCAAmC,EACxElB,EAAM,MAAQ,WACAgB,EAAA,MAAQE,EAAe,6CAA6C,EAClFlB,EAAM,MAAQ,aACAgB,EAAA,MAAQE,EAAe,+CAA+C,EAC/F,EAGKC,EAAgB,CACrB,KAAY,QACZ,OAAQ,GACR,QAAY,EACZ,QAAY,EACZ,IAAK,OACL,WAAY,GACZ,OAAQ,GACR,KAAM,GACN,WAAY,MACZ,YAAa,CACZ,IAAK,CACJ,QAAS,CACV,EACA,KAAM,CACL,QAAS,CACV,EACA,KAAM,CACL,QAAS,CACV,CACD,GAGD,OAAAC,EAAU,IAAM,aACX,GAACX,EAAAT,EAAM,OAAN,MAAAS,EAAY,eAAcY,EAAArB,EAAM,OAAN,MAAAqB,EAAY,UAC3BV,IAECJ,KAGbe,EAAAtB,EAAM,OAAN,MAAAsB,EAAY,MACSN,EAAA,OAAQO,EAAAvB,EAAM,OAAN,YAAAuB,EAAY,MAEhCN,GACb,CACA","names":["Spinner","defineAsyncComponent","__vitePreload","ProductCard","props","__props","productOptions","isLoading","ref","productsError","recommendations","getRelewiseData","url","_a","fetchData","getProductData","product","response","data","error","recommendationsHeadline","setHeadline","getTranslation","splideOptions","onMounted","_b","_c","_d"],"sources":["../../src/components/Files/Templates/Designs/Mobler/src/components/Recommendations.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { defineAsyncComponent, onMounted, ref} from 'vue'\r\nimport { getTranslation } from '@/ts/utilities.ts'\r\n\r\nimport {Splide, SplideSlide, SplideTrack} from '@splidejs/vue-splide'\r\nimport '@splidejs/vue-splide/css'\r\nimport {FontAwesomeIcon} from \"@fortawesome/vue-fontawesome\";\r\n\r\nconst Spinner = defineAsyncComponent(() => import(\"@/components/ui/decoration/Spinner.vue\"))\r\nconst ProductCard = defineAsyncComponent(() => import('@/components/ProductCard.vue'))\r\n\r\nconst props = defineProps({\r\n\tproductId: {\r\n\t\ttype: String,\r\n\t},\r\n\tvariantId: {\r\n\t\ttype: String,\r\n\t},\r\n\ttake: {\r\n\t\ttype: Number,\r\n\t\tdefault: 4\r\n\t},\r\n\tcontain: {\r\n\t\ttype: Boolean,\r\n\t\tdefault: true\r\n\t},\r\n\thasBackground: {\r\n\t\ttype: Boolean,\r\n\t\tdefault: false\r\n\t},\r\n\ttype: {\r\n\t\ttype: String,\r\n\t\tdefault: 'purchasedwith',\r\n\t\tvalidator: (value) => {\r\n\t\t\treturn [\r\n\t\t\t\t'purchasedwith',\r\n\t\t\t\t'alsoseen',\r\n\t\t\t\t'recently',\r\n\t\t\t\t'popularproductingroup'\r\n\t\t\t].includes(<string>value)\r\n\t\t}\r\n\t},\r\n\tdata: {\r\n\t\ttype: Object,\r\n\t\tdefault: () => {}\r\n\t}\r\n})\r\n\r\nconst productOptions = JSON.stringify({\r\n\t\"options\": {\r\n\t\t\"priceAndCampaign\": true,\r\n\t\t\"media\": true,\r\n\t\t\"dimensions\": true,\r\n\t\t\"delivery\": true,\r\n\t\t\"cylindo\": true,\r\n\t\t\"variantOptionsSimple\": true,\r\n\t\t\"productDetailsSimple\": true\r\n\t}\r\n})\r\n\r\nconst isLoading = ref(false)\r\nconst productsError = ref()\r\nconst recommendations = ref('')\r\n\r\nconst getRelewiseData = async () => {\r\n\tlet url = `/mobler-api/v2/products/recommendationsfeed?recommendationtype=${props.type}&PageSize=${props.take}`\r\n\r\n\tif (props.type == 'purchasedwith' || props.type == 'alsoseen' || props.type == 'recently') {\r\n\t\turl += `&currentproductid=${props.productId}&currentvariantid=${props.variantId}`\r\n\t} else if (props.type == 'popularproductingroup') {\r\n\t\turl += `&currentgroupid=${props.data?.groupId}`\r\n\t}\r\n\r\n\tawait fetchData(url)\r\n}\r\n\r\nconst getProductData = async () => {\r\n\tconst products = props.data?.products;\r\n\r\n\tconst productIds = products.map((product: any) => {\r\n\t\tif(product.variantId){\r\n\t\t\treturn `${product.productId}_${product.variantId}`\r\n\t\t} else {\r\n\t\t\treturn `${product.productId}`\r\n\t\t}\r\n\t}).join(',')\r\n\tlet url = `/mobler-api/v2/products/productsFeed?productIds=${productIds}`\r\n\r\n\tawait fetchData(url)\r\n}\r\n\r\nconst fetchData = async (url: string) => {\r\n\tisLoading.value = true\r\n\tawait fetch(url, {\r\n\t\tmethod: 'POST',\r\n\t\theaders: {\r\n\t\t\t'Content-Type': 'application/json'\r\n\t\t},\r\n\t\tbody: productOptions\r\n\t})\r\n\t.then(response => {\r\n\t\tif (!response.ok) {\r\n\t\t\tthrow new Error('Network response was not ok')\r\n\t\t}\r\n\t\treturn response.json()\r\n\t})\r\n\t.then(data => {\r\n\t\trecommendations.value = data\r\n\t})\r\n\t.catch(error => {\r\n\t\tproductsError.value = 'No product(s) found'\r\n\t\tconsole.log('Error:', error)\r\n\t})\r\n\tisLoading.value = false\r\n}\r\n\r\nconst recommendationsHeadline = ref('')\r\n\r\nconst setHeadline = () => {\r\n\tif (props.type == 'purchasedwith') {\r\n\t\trecommendationsHeadline.value = getTranslation('Recommendations:PowerStep.Heading')\r\n\t} else if (props.type == 'alsoseen') {\r\n\t\trecommendationsHeadline.value = getTranslation('Recommendations:CustomersAlsoViewed.Heading')\r\n\t} else if (props.type == 'recently') {\r\n\t\trecommendationsHeadline.value = getTranslation('Recommendations:LatestVisitedProducts.Heading')\r\n\t}\r\n}\r\n\r\nconst splideOptions = {\r\n\ttype      : 'slide',\r\n\trewind: true,\r\n\tperPage   : 1,\r\n\tperMove   : 1,\r\n\tgap: '1rem',\r\n\tpagination: false,\r\n\tarrows: true,\r\n\tdrag: true,\r\n\tmediaQuery: 'min',\r\n\tbreakpoints: {\r\n\t\t640: {\r\n\t\t\tperPage: 2,\r\n\t\t},\r\n\t\t1024: {\r\n\t\t\tperPage: 3,\r\n\t\t},\r\n\t\t1280: {\r\n\t\t\tperPage: 4,\r\n\t\t}\r\n\t}\r\n}\r\n\r\nonMounted(() => {\r\n\tif (!props.data?.isRelewise && props.data?.products) {\r\n\t\tgetProductData()\r\n\t} else {\r\n\t\tgetRelewiseData()\r\n\t}\r\n\r\n\tif (props.data?.title) {\r\n\t\trecommendationsHeadline.value = props.data?.title\r\n\t} else {\r\n\t\tsetHeadline()\r\n\t}\r\n})\r\n</script>\r\n\r\n<template>\r\n\t<!-- TODO: Look at programatically adding the slide functionality, determined on the amount of slides and the width of the slider\r\n\thttps://splidejs.com/guides/overflow/\r\n\tThis is because we struggle with always displaying a carousel on mobile (when we have more than 1 product), however on tablet and up\r\n\tit should consider how many we display \"perPage\" -->\r\n\t<Spinner v-if=\"isLoading\" class=\"container min-h-[50vh]\">\r\n\t\t{{ getTranslation('Products.Loading') }}\r\n\t</Spinner>\r\n\t<div v-else-if=\"productsError\">\r\n\t\t{{ getTranslation('Products.Error') }} {{ productsError }}\r\n\t</div>\r\n\t<template v-else>\r\n\t\t<div\r\n\t\t\tv-if=\"recommendations?.products && recommendations?.totalProductsCount > 0\"\r\n\t\t\tclass=\"py-8\"\r\n\t\t\t:class=\"props.hasBackground || props.data?.hasBackground ? 'bg-beige' : ''\">\r\n\t\t<div :class=\"{'container': contain}\" >\r\n\t\t\t<div class=\"flex flex-col gap-4 items-start md:flex-row md:items-center pb-6\">\r\n\t\t\t\t<h3 v-if=\"recommendationsHeadline\" id=\"carouselHeading\" class=\"text-center md:text-left\">{{ recommendationsHeadline }}</h3>\r\n\t\t\t\t<a v-if=\"props.data?.cta\" :href=\"props.data?.cta\" class=\"md:ml-auto px-6 py-2 rounded-full bg-black text-white hover:bg-black/90\">\r\n\t\t\t\t\t{{ props.data?.ctaTitle }}\r\n\t\t\t\t</a>\r\n\t\t\t</div>\r\n\t\t\t<div\r\n\t\t\t\tv-if=\"props.take <= 4\"\r\n\t\t\t\tclass=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\"\r\n\t\t\t\t>\r\n\t\t\t\t<ProductCard v-for=\"product in recommendations.products\" :product=\"product\" :key=\"product.key\" />\r\n\t\t\t</div>\r\n\t\t\t<div\r\n\t\t\t\tv-if=\"props.take > 4\"\r\n\t\t\t\t>\r\n\t\t\t\t<Splide\r\n\t\t\t\t\t:has-track=\"false\"\r\n\t\t\t\t\t:options=\"splideOptions\"\r\n\t\t\t\t\taria-labelledby=\"carouselHeading\">\r\n\t\t\t\t\t<SplideTrack>\r\n\t\t\t\t\t\t<SplideSlide v-for=\"product in recommendations.products\" :key=\"product.key\">\r\n\t\t\t\t\t\t\t<ProductCard :product=\"product\" class=\"h-full\" />\r\n\t\t\t\t\t\t</SplideSlide>\r\n\t\t\t\t\t</SplideTrack>\r\n\r\n\t\t\t\t\t<div class=\"splide__arrows\">\r\n\t\t\t\t\t\t<button class=\"splide__arrow splide__arrow--prev -left-4\"><font-awesome-icon :icon=\"['fal', 'chevron-right']\" /></button>\r\n\t\t\t\t\t\t<button class=\"splide__arrow splide__arrow--next -right-4\"><font-awesome-icon :icon=\"['fal', 'chevron-right']\" /></button>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</Splide>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n\t</template>\r\n</template>\r\n"],"file":"assets/Recommendations-1f09201d.js"}