{"version":3,"file":"Reviews-COVU7pDj.js","sources":["../../../node_modules/@heroicons/vue/24/solid/esm/BuildingStorefrontIcon.js","../../../node_modules/@heroicons/vue/24/solid/esm/ShoppingBagIcon.js","../../../resources/js/Pages/Reviews.vue"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nexport default function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 24 24\",\n    fill: \"currentColor\",\n    \"aria-hidden\": \"true\",\n    \"data-slot\": \"icon\"\n  }, [\n    _createElementVNode(\"path\", { d: \"M5.223 2.25c-.497 0-.974.198-1.325.55l-1.3 1.298A3.75 3.75 0 0 0 7.5 9.75c.627.47 1.406.75 2.25.75.844 0 1.624-.28 2.25-.75.626.47 1.406.75 2.25.75.844 0 1.623-.28 2.25-.75a3.75 3.75 0 0 0 4.902-5.652l-1.3-1.299a1.875 1.875 0 0 0-1.325-.549H5.223Z\" }),\n    _createElementVNode(\"path\", {\n      \"fill-rule\": \"evenodd\",\n      d: \"M3 20.25v-8.755c1.42.674 3.08.673 4.5 0A5.234 5.234 0 0 0 9.75 12c.804 0 1.568-.182 2.25-.506a5.234 5.234 0 0 0 2.25.506c.804 0 1.567-.182 2.25-.506 1.42.674 3.08.675 4.5.001v8.755h.75a.75.75 0 0 1 0 1.5H2.25a.75.75 0 0 1 0-1.5H3Zm3-6a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-.75.75h-3a.75.75 0 0 1-.75-.75v-3Zm8.25-.75a.75.75 0 0 0-.75.75v5.25c0 .414.336.75.75.75h3a.75.75 0 0 0 .75-.75v-5.25a.75.75 0 0 0-.75-.75h-3Z\",\n      \"clip-rule\": \"evenodd\"\n    })\n  ]))\n}","import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nexport default function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 24 24\",\n    fill: \"currentColor\",\n    \"aria-hidden\": \"true\",\n    \"data-slot\": \"icon\"\n  }, [\n    _createElementVNode(\"path\", {\n      \"fill-rule\": \"evenodd\",\n      d: \"M7.5 6v.75H5.513c-.96 0-1.764.724-1.865 1.679l-1.263 12A1.875 1.875 0 0 0 4.25 22.5h15.5a1.875 1.875 0 0 0 1.865-2.071l-1.263-12a1.875 1.875 0 0 0-1.865-1.679H16.5V6a4.5 4.5 0 1 0-9 0ZM12 3a3 3 0 0 0-3 3v.75h6V6a3 3 0 0 0-3-3Zm-3 8.25a3 3 0 1 0 6 0v-.75a.75.75 0 0 1 1.5 0v.75a4.5 4.5 0 1 1-9 0v-.75a.75.75 0 0 1 1.5 0v.75Z\",\n      \"clip-rule\": \"evenodd\"\n    })\n  ]))\n}","<script setup lang=\"ts\">\nimport dayjs from 'dayjs'\nimport { round } from 'lodash-es'\nimport { useI18n } from 'vue-i18n'\nimport { Link } from '@inertiajs/vue3'\nimport { useHelpers } from '@/Composables/helpers'\nimport Breadcrumbs from '@/Components/Breadcrumbs.vue'\nimport ApplicationHead from '@/Components/Layout/ApplicationHead.vue'\nimport Rating from '@/Components/UI/Rating.vue'\nimport { BuildingStorefrontIcon, ShoppingBagIcon, StarIcon } from '@heroicons/vue/24/solid'\nimport { Review } from '@interfaces/review.interface'\nimport Pagination from '@/Components/Pagination.vue'\n\ndefineProps<{\n    reviews: JsonResourcePaginated<Array<Review>>,\n    summary: Array<any>,\n    reviewsCount: number,\n    reviewsRatingAverage: number,\n}>()\n\nconst { t } = useI18n()\nconst { asset } = useHelpers()\n</script>\n\n<template>\n    <div>\n        <ApplicationHead :title=\"t('pages.reviews.title')\" :description=\"t('pages.reviews.title')\">\n            <meta property=\"og:type\" content=\"website\">\n            <meta property=\"og:image\" :content=\"asset('/images/social-logo.png')\">\n        </ApplicationHead>\n\n        <Breadcrumbs />\n\n        <div class=\"px-4 py-16 mx-auto bg-white max-w-7xl sm:px-6 lg:px-8\">\n            <div class=\"lg:grid lg:grid-cols-12 lg:gap-x-8\">\n                <div class=\"lg:col-span-4\">\n                    <h1 class=\"text-3xl font-bold tracking-tight xl:text-4xl text-slate-900\">{{ t('pages.reviews.title') }}</h1>\n\n                    <div class=\"flex items-center mt-3\">\n                        <div>\n                            <Rating :rating=\"reviewsRatingAverage\" />\n                            <p class=\"sr-only\">{{ t('components.review.stars-count', { count: round(reviewsRatingAverage) }) }}</p>\n                        </div>\n                        <p class=\"ml-2 text-sm text-slate-900\">{{ t('components.review.based-on-reviews', reviewsCount) }}</p>\n                    </div>\n\n                    <div class=\"mt-6\">\n                        <h2 class=\"sr-only\">Review data</h2>\n\n                        <dl class=\"space-y-3\">\n                            <div v-for=\"(item, itemIdx) in summary\" :key=\"itemIdx\" class=\"flex items-center text-sm\">\n                                <dt class=\"flex items-center flex-1\">\n                                    <p class=\"w-3 font-medium text-slate-900\">{{ item.rating }}<span class=\"sr-only\"> star reviews</span></p>\n                                    <div aria-hidden=\"true\" class=\"flex items-center flex-1 ml-1\">\n                                        <StarIcon class=\"flex-shrink-0 w-5 h-5 text-yellow-400\" aria-hidden=\"true\" />\n\n                                        <div class=\"relative flex-1 ml-3\">\n                                            <div class=\"h-3 bg-gray-100 border border-gray-200 rounded-full\"></div>\n\n                                            <div v-if=\"item.percentage > 0\" :style=\"{ width: `calc(${item.percentage}%)` }\" class=\"absolute inset-y-0 bg-yellow-400 border border-yellow-400 rounded-full\"></div>\n                                        </div>\n                                    </div>\n                                </dt>\n                                <dd class=\"w-10 ml-3 text-sm text-right tabular-nums text-slate-900\">{{ item.percentage }}%</dd>\n                            </div>\n                        </dl>\n                    </div>\n\n                    <div class=\"mt-10\">\n                        <h2 class=\"text-lg font-medium text-slate-900\">{{ t('pages.reviews.reviews-type') }}</h2>\n\n                        <div class=\"mt-6 space-y-1 text-sm font-medium leading-6 bg-white rounded-lg text-slate-700\">\n                            <Link :class=\"['flex rounded-[10px] p-1', (route().params as any).type !== 'products' ? 'bg-gray-50' : 'hover:bg-gray-50']\" :href=\"route('reviews', { type: 'shop' })\">\n                            <div class=\"flex items-center justify-center flex-none bg-white rounded-md shadow h-7 w-7 ring-1 ring-gray-900/10\">\n                                <BuildingStorefrontIcon class=\"w-5 h-5 fill-gray-400\" aria-hidden=\"true\" />\n                            </div>\n\n                            <div class=\"ml-3\">{{ t('pages.reviews.shop') }}</div>\n                            </Link>\n\n                            <Link :class=\"['flex rounded-[10px] p-1', (route().params as any).type === 'products' ? 'bg-gray-50' : 'hover:bg-gray-50']\" :href=\"route('reviews', { type: 'products' })\">\n                            <div class=\"flex items-center justify-center flex-none bg-white rounded-md shadow h-7 w-7 ring-1 ring-gray-900/10\">\n                                <ShoppingBagIcon class=\"w-5 h-5 fill-gray-400\" aria-hidden=\"true\" />\n                            </div>\n\n                            <div class=\"ml-3\">{{ t('pages.reviews.products') }}</div>\n                            </Link>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"mt-16 lg:col-span-7 lg:col-start-6 lg:mt-0\">\n                    <h3 class=\"sr-only\">Recent reviews</h3>\n\n                    <div class=\"flow-root\">\n                        <div class=\"-my-12 divide-y divide-gray-200\">\n                            <div v-if=\"reviews.data.length === 0\" class=\"text-center py-28\">\n                                <div class=\"mb-6 text-4xl\">😊</div>\n                                <p class=\"text-sm text-slate-700\">{{ t('components.review.no-reviews') }}</p>\n                            </div>\n\n                            <template v-else>\n                                <div v-for=\"review in reviews.data\" :key=\"review.id\" class=\"py-12\">\n                                    <div class=\"flex items-center text-sm gap-x-4\">\n                                        <Link v-if=\"review.product\" :href=\"route('product', { slug: review.product.slug })\">\n                                        <div class=\"relative w-12 h-12 overflow-hidden bg-gray-200 rounded-lg\">\n                                            <picture>\n                                                <source :data-srcset=\"review.product.image_card_webp_url\" type=\"image/webp\">\n                                                <source :data-srcset=\"review.product.image_card_url\" type=\"image/jpeg\">\n\n                                                <img :data-src=\"review.product.image_card_url\" class=\"object-cover object-center w-full h-full lazyload\" :alt=\"review.product.title\">\n                                            </picture>\n\n                                            <div class=\"absolute inset-0 bg-black bg-opacity-[0.02] transition-colors group-hover:bg-opacity-[0.04]\"></div>\n                                        </div>\n                                        </Link>\n\n                                        <div v-else class=\"inline-block w-12 h-12 overflow-hidden bg-gray-100 rounded-full\">\n                                            <svg class=\"w-full h-full text-slate-300\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                                                <path d=\"M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z\" />\n                                            </svg>\n                                        </div>\n\n                                        <div>\n                                            <p class=\"font-bold text-slate-900\">{{ review.name ?? t('components.review.anonymous') }}<time class=\"ml-4 font-normal text-slate-500\" :datetime=\"dayjs(review.created_at).format('YYYY-MM-DD')\">{{ dayjs(review.created_at).format('D MMM YYYY') }}</time></p>\n                                            <Rating class=\"mt-1\" :rating=\"review.rating\"></Rating>\n                                            <p class=\"sr-only\">{{ t('components.review.stars-count', { count: round(review.rating) }) }}</p>\n                                        </div>\n                                    </div>\n\n                                    <Link v-if=\"review.product\" class=\"inline-block mt-4 text-sm font-bold\" :href=\"route('product', { slug: review.product.slug })\">\n                                    {{ review.product.title }}\n                                    </Link>\n\n                                    <div :class=\"[review.product ? 'mt-2' : 'mt-4', 'space-y-6 text-base italic text-slate-600']\">\n                                        <p>{{ review.message ?? t('components.review.no-comment') }}</p>\n                                    </div>\n\n                                    <!-- {{ -- @if ($review -> answer)\n                                        <div class=\"review review-child\" >\n                                            <div class=\"review-body\" >\n                                                <div class=\"row\" >\n                                                    <div class=\"col-12 col-md-auto\" >\n                                                        <div class=\"mb-6 avatar avatar-xxl mb-md-0\" >\n                                                            <picture>\n                                                            <source srcset=\"{{ asset('/images/avatar-calypso.png') }} 1x, {{ asset('/images/avatar-calypso@2x.png') }} 2x\" type=\"image/jpeg\" />\n                                                            <img src=\"{{ asset('/images/avatar-calypso.png') }}\" alt=\"...\" class=\"avatar-img rounded-circle\">\n                                                        </picture>\n                                                    </div>\n                                                </div>\n\n                                                <div class=\"col-12 col-md\">\n                                                    <div class=\"mb-6 row\">\n                                                        <div class=\"col-12\">\n                                                            <span class=\"font-weight-bold\">{{ t('Calypso team') }}</span>\n                                                        </div>\n\n                                                        <div class=\"col-12\">\n                                                            <span class=\"font-size-xs text-muted\">\n                                                                <time datetime=\"{{ $review->answer->created_at->format('Y-m-d') }}\">{{ $review -> answer -> created_at -> formatLocalized('%e %b %Y') }}</time>\n                                                            </span>\n                                                        </div>\n                                                    </div>\n\n                                                    <p class=\"mb-0 text-slate-500\">{{ $review -> answer -> message }}</p>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                    @endif --}} -->\n                                </div>\n                            </template>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <Pagination class=\"mt-16\" :paginator=\"reviews.meta\" />\n        </div>\n    </div>\n</template>\n"],"names":["render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","t","useI18n","asset","useHelpers"],"mappings":"q6BAEe,SAASA,EAAOC,EAAMC,EAAQ,CAC3C,OAAQC,EAAU,EAAIC,EAAoB,MAAO,CAC/C,MAAO,6BACP,QAAS,YACT,KAAM,eACN,cAAe,OACf,YAAa,MACjB,EAAK,CACDC,EAAoB,OAAQ,CAAE,EAAG,yPAAyP,CAAE,EAC5RA,EAAoB,OAAQ,CAC1B,YAAa,UACb,EAAG,sbACH,YAAa,SACnB,CAAK,CACL,CAAG,CACH,CCfe,SAASL,EAAOC,EAAMC,EAAQ,CAC3C,OAAQC,EAAU,EAAIC,EAAoB,MAAO,CAC/C,MAAO,6BACP,QAAS,YACT,KAAM,eACN,cAAe,OACf,YAAa,MACjB,EAAK,CACDC,EAAoB,OAAQ,CAC1B,YAAa,UACb,EAAG,sUACH,YAAa,SACnB,CAAK,CACL,CAAG,CACH,2zECIM,KAAA,CAAE,EAAAC,GAAMC,IACR,CAAE,MAAAC,GAAUC","x_google_ignoreList":[0,1]}