{"version":3,"file":"BlC4Llro.js","sources":["../../../../storyblok/latest-ads.vue"],"sourcesContent":["<script setup>\n// todo lang=\"ts\"\n\nimport giveAwayIcon from '~/assets/svg/give-away.svg?url';\nimport buyForMeIcon from '~/assets/svg/buy-for-me.svg?url';\nimport moveDeliverIcon from '~/assets/svg/move-deliver.svg?url';\nimport recyclingIcon from '~/assets/svg/recycling.svg?url';\n\nconst route = useRoute();\nconst { locale } = useI18n();\n\nconst props = defineProps({\n    blok: {\n        type: Object,\n        default: () => ({}),\n    },\n});\n\nconst { marketToCountry, languageToCountry } = useAppConfig();\n\nconst ads = ref([]);\n\nonMounted(() => {\n    const base_url = 'https://api.tiptapp.co/v1/web/listings/recent/';\n\n    const country = marketToCountry[route.query.market] || languageToCountry[locale.value] || 'en';\n\n    const url = `${base_url}${country}?count=${props.blok.count}&type=${props.blok.type}&state=${props.blok.state}`;\n\n    fetch(url)\n        .then((response) => {\n            if (response.ok) {\n                return response.json();\n            } else {\n                throw new Error('Failed to fetch ads');\n            }\n        })\n        .then((data) => {\n            ads.value = data.items;\n        });\n});\n\nfunction stateColor(adState) {\n    switch (adState) {\n        case 'assigned':\n            return 'bg-[rgba(8,216,140,0.9)]'; // Help's on the way\n        case 'pickedUp':\n            return 'bg-[rgba(68,68,68,0.85)]'; // Picked up\n        default:\n            return '';\n    }\n}\n\nfunction stateText(adState) {\n    switch (adState) {\n        case 'assigned':\n            switch (locale.value) {\n                case 'en':\n                    return \"HELP'S ON THE WAY\";\n                case 'de':\n                    return 'HILFE IST UNTERWEGS';\n                case 'pt':\n                    return 'AJUDA A CAMINHO';\n                case 'sv':\n                    return 'HJÄLP PÅ VÄG';\n                default:\n                    return \"HELP'S ON THE WAY\";\n            }\n        case 'pickedUp':\n            switch (locale.value) {\n                case 'en':\n                    return 'PICKED UP';\n                case 'de':\n                    return 'ABGEHOLT';\n                case 'pt':\n                    return 'RECOLHIDO';\n                case 'sv':\n                    return 'HÄMTAD';\n                default:\n                    return 'PICKED UP';\n            }\n        default:\n            return '';\n    }\n}\n\nfunction typeIcon(adType) {\n    switch (adType) {\n        case 'h2t':\n            return moveDeliverIcon;\n        case 'b4m':\n            return buyForMeIcon;\n        case 'giaw':\n            return giveAwayIcon;\n        case 'paaw':\n            return recyclingIcon;\n        default:\n            return null;\n    }\n}\n\nfunction priceText(ad) {\n    const { pay, ccy } = ad;\n\n    switch (ccy) {\n        case 'SEK':\n            return `${pay} kr`;\n        case 'GBP':\n            return `£${pay}`;\n        case 'EUR':\n            return `${pay} €`;\n        default:\n            return '';\n    }\n}\n</script>\n\n<template>\n    <!-- Block start -->\n    <section\n        v-if=\"ads.length === Number.parseInt(blok.count, 10)\"\n        class=\"bg-white dark:bg-midnight-blue\"\n    >\n        <div class=\"py-8 px-4 mx-auto max-w-screen-xl lg:px-12 text-center lg:py-16\">\n            <h1 class=\"mb-4 font-light text-gray-900 dark:text-white\">\n                {{ blok.title }}\n            </h1>\n            <p\n                class=\"font-light text-gray-500 sm:text-lg md:px-20 lg:px-38 xl:px-48 dark:text-gray-400\"\n            >\n                {{ blok.description }}\n            </p>\n            <div class=\"mt-8 grid grid-cols-2 md:grid-cols-6 gap-4\">\n                <a v-for=\"ad in ads\" :href=\"`https://tiptapp.com/ad/${ad._id}`\" target=\"_blank\">\n                    <div\n                        class=\"overflow-hidden bg-no-repeat bg-cover bg-center rounded-xl aspect-square text-white shadow-lg\"\n                        :style=\"`background-image: url('${ad.imageUrls[0]}-s')`\"\n                    >\n                        <div\n                            class=\"relative bg-gradient-to-t from-[rgba(0,0,0,0.8)] bg-blend-multiply h-full w-full\"\n                        >\n                            <!-- Need to determine ad state to set correct color and text:\n                             Published (without helper selected) no label\n                             \"Help's on the way\": rgba(8,216,140,0.9)\n                             \"Picked up\" / \"Delivered\": rgba(68,68,68,0.85)\n                        -->\n                            <div :class=\"`${stateColor(ad.state)} py-1.5`\">\n                                <p class=\"font-serif font-extrabold leading-tight text-[11px]\">\n                                    {{ stateText(ad.state) }}\n                                </p>\n                            </div>\n                            <div class=\"absolute bottom-0 left-0 px-2 py-2 text-left\">\n                                <p class=\"font-normal leading-tight text-sm\">{{ ad.title }}</p>\n                                <div class=\"flex items-center mt-1\">\n                                    <!-- Need to determine ad type to set correct icon: \n                                     move-deliver.svg\n                                     buy-for-me.svg\n                                     recycling.svg\n                                     give-away.svg\n                                -->\n                                    <img\n                                        v-if=\"typeIcon(ad.type)\"\n                                        class=\"h-[24px] pr-1.5\"\n                                        :src=\"typeIcon(ad.type)\"\n                                        :alt=\"`${ad.type} icon`\"\n                                    />\n                                    <p class=\"font-extrabold text-xl\">{{ priceText(ad) }}</p>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </a>\n            </div>\n\n            <div v-if=\"blok.ctaText && blok.ctaLink\" class=\"my-10\">\n                <BlokLink\n                    :to=\"blok.ctaLink\"\n                    class=\"inline-flex items-center font-medium text-primary-600 dark:text-primary-500 hover:underline\"\n                >\n                    {{ blok.ctaText }}\n                    <svg\n                        class=\"ml-2 w-4 h-4\"\n                        fill=\"currentColor\"\n                        viewBox=\"0 0 20 20\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                    >\n                        <path\n                            fill-rule=\"evenodd\"\n                            d=\"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z\"\n                            clip-rule=\"evenodd\"\n                        ></path>\n                    </svg>\n                </BlokLink>\n            </div>\n        </div>\n    </section>\n    <!-- Block end -->\n</template>\n"],"names":["route","useRoute","locale","useI18n","props","__props","marketToCountry","languageToCountry","useAppConfig","ads","ref","onMounted","base_url","country","url","response","data","stateColor","adState","stateText","typeIcon","adType","moveDeliverIcon","buyForMeIcon","giveAwayIcon","recyclingIcon","priceText","ad","pay","ccy"],"mappings":"m/BAQA,MAAMA,EAAQC,EAAQ,EAChB,CAAE,OAAAC,CAAM,EAAKC,IAEbC,EAAQC,EAOR,CAAE,gBAAAC,EAAiB,kBAAAC,GAAsBC,IAEzCC,EAAMC,EAAI,CAAA,CAAE,EAElBC,EAAU,IAAM,CACZ,MAAMC,EAAW,iDAEXC,EAAUP,EAAgBN,EAAM,MAAM,MAAM,GAAKO,EAAkBL,EAAO,KAAK,GAAK,KAEpFY,EAAM,GAAGF,CAAQ,GAAGC,CAAO,UAAUT,EAAM,KAAK,KAAK,SAASA,EAAM,KAAK,IAAI,UAAUA,EAAM,KAAK,KAAK,GAE7G,MAAMU,CAAG,EACJ,KAAMC,GAAa,CAChB,GAAIA,EAAS,GACT,OAAOA,EAAS,OAEhB,MAAM,IAAI,MAAM,qBAAqB,CAErD,CAAS,EACA,KAAMC,GAAS,CACZP,EAAI,MAAQO,EAAK,KAC7B,CAAS,CACT,CAAC,EAED,SAASC,EAAWC,EAAS,CACzB,OAAQA,EAAO,CACX,IAAK,WACD,MAAO,2BACX,IAAK,WACD,MAAO,2BACX,QACI,MAAO,EACd,CACL,CAEA,SAASC,EAAUD,EAAS,CACxB,OAAQA,EAAO,CACX,IAAK,WACD,OAAQhB,EAAO,MAAK,CAChB,IAAK,KACD,MAAO,oBACX,IAAK,KACD,MAAO,sBACX,IAAK,KACD,MAAO,kBACX,IAAK,KACD,MAAO,eACX,QACI,MAAO,mBACd,CACL,IAAK,WACD,OAAQA,EAAO,MAAK,CAChB,IAAK,KACD,MAAO,YACX,IAAK,KACD,MAAO,WACX,IAAK,KACD,MAAO,YACX,IAAK,KACD,MAAO,SACX,QACI,MAAO,WACd,CACL,QACI,MAAO,EACd,CACL,CAEA,SAASkB,EAASC,EAAQ,CACtB,OAAQA,EAAM,CACV,IAAK,MACD,OAAOC,EACX,IAAK,MACD,OAAOC,EACX,IAAK,OACD,OAAOC,EACX,IAAK,OACD,OAAOC,EACX,QACI,OAAO,IACd,CACL,CAEA,SAASC,EAAUC,EAAI,CACnB,KAAM,CAAE,IAAAC,EAAK,IAAAC,CAAK,EAAGF,EAErB,OAAQE,EAAG,CACP,IAAK,MACD,MAAO,GAAGD,CAAG,MACjB,IAAK,MACD,MAAO,IAAIA,CAAG,GAClB,IAAK,MACD,MAAO,GAAGA,CAAG,KACjB,QACI,MAAO,EACd,CACL"}