{"version":3,"file":"LocationBanner.vue_vue_type_script_setup_true_lang-CubomTvX.js","sources":["../../src/components/utils/LocationBanner.vue"],"sourcesContent":["<template>\n  <div v-if=\"locationStore.isCountryBannerOpen\" class=\"block\">\n    <div class=\"fixed inset-x-0 top-0 z-[61] flex items-center bg-[#0b0b0b] py-4 text-xs\">\n      <button\n        class=\"absolute right-3 top-3 z-[2] cursor-pointer\"\n        @click=\"locationStore.setCountryBannerOpen(false)\"\n      >\n        <svg\n          width=\"25px\"\n          height=\"25px\"\n          viewBox=\"0 0 36 36\"\n          version=\"1.1\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          xlink=\"http://www.w3.org/1999/xlink\"\n        >\n          <title>Close</title>\n          <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n            <g id=\"Close\">\n              <path\n                id=\"Fill-4-Copy-2\"\n                d=\"M24.6946401,11.305359 C24.2874936,10.8982137 23.6274253,10.8982137 23.2202787,11.305359 L18,16.5256219 L12.7797213,11.305359 C12.3725747,10.8982137 11.7125064,10.8982137 11.3053599,11.305359 C10.8982134,11.712335 10.8982134,12.3725706 11.3053599,12.7797159 L16.5256386,17.9999788 L11.3053599,23.2202418 C10.8982134,23.6273871 10.8982134,24.2876227 11.3053599,24.6945987 C11.5088485,24.898256 11.7756522,25 12.0426252,25 C12.3094289,25 12.5760634,24.898256 12.7797213,24.6945987 L18,19.4743358 L23.2202787,24.6945987 C23.4239366,24.898256 23.6905711,25 23.9575441,25 C24.2243478,25 24.4911515,24.898256 24.6946401,24.6945987 C25.1017866,24.2876227 25.1017866,23.6273871 24.6946401,23.2202418 L19.4743614,17.9999788 L24.6946401,12.7797159 C25.1017866,12.3725706 25.1017866,11.712335 24.6946401,11.305359\"\n                fill=\"#fff\"\n              ></path>\n              <circle id=\"Oval\" stroke=\"#fff\" stroke-width=\"2\" cx=\"18\" cy=\"18\" r=\"17\"></circle>\n            </g>\n          </g>\n        </svg>\n      </button>\n      <div class=\"container mx-[19px] text-white lg:mx-auto lg:max-w-[950px]\">\n        <div class=\"block lg:flex\">\n          <div class=\"w-full lg:w-1/2\" notranslate=\"true\">\n            <h3 class=\"mb-1 text-xs font-bold\">Confirm your location</h3>\n            <p class=\"mb-4 text-xs lg:mb-0\">\n              Confirm your location or select from a list of countries to shop online. We will make sure\n              you're redirected to your selected site in the future so you'll always be in the right place.\n            </p>\n          </div>\n          <div class=\"flex w-full items-center lg:ml-5 lg:w-1/2\">\n            <div class=\"flex w-full flex-row\">\n              <div class=\"mr-3 block shrink grow basis-6/12\">\n                <Menu as=\"div\" class=\"relative box-border\">\n                  <div\n                    class=\"relative box-border flex h-10 min-h-[38px] cursor-default flex-wrap items-center justify-between rounded border border-solid border-[#ccc] bg-white transition-all delay-0 duration-100 ease-[ease]\"\n                  >\n                    <MenuButton\n                      class=\"inline-flex w-full justify-center rounded-md bg-white px-4 py-2 text-sm font-medium text-black focus:outline-none focus-visible:ring-2 focus-visible:ring-white\"\n                    >\n                      <img\n                        :src=\"\n                          selectedCountry === 'United States'\n                            ? 'https://cdn.shopify.com/s/files/1/0828/4379/5772/files/united-states.png?v=1697907635'\n                            : 'https://cdn.shopify.com/s/files/1/0828/4379/5772/files/united-kingdom.png?v=1697907634'\n                        \"\n                        class=\"mr-2 inline w-5\"\n                        alt=\"us flag\"\n                      />\n                      {{ selectedCountry }}\n                      <ChevronUpIcon class=\"-mr-1 ml-2 size-5 rotate-180 text-black\" />\n                    </MenuButton>\n                  </div>\n\n                  <transition\n                    enter-active-class=\"transition duration-100 ease-out\"\n                    enter-from-class=\"transform scale-95 opacity-0\"\n                    enter-to-class=\"transform scale-100 opacity-100\"\n                    leave-active-class=\"transition duration-75 ease-in\"\n                    leave-from-class=\"transform scale-100 opacity-100\"\n                    leave-to-class=\"transform scale-95 opacity-0\"\n                  >\n                    <MenuItems\n                      class=\"absolute left-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black focus:outline-none\"\n                    >\n                      <div class=\"p-1\">\n                        <MenuItem>\n                          <button\n                            :class=\"[\n                              selectedCountry === 'United Kingdom'\n                                ? 'bg-[#EE9B38] text-white'\n                                : 'text-gray-900',\n                              'group flex w-full items-center rounded-md p-2 text-sm',\n                            ]\"\n                            @click=\"selectedCountry = 'United Kingdom'\"\n                          >\n                            <img\n                              src=\"https://cdn.shopify.com/s/files/1/0828/4379/5772/files/united-kingdom.png?v=1697907634\"\n                              class=\"mr-2 inline w-5\"\n                              alt=\"uk flag\"\n                            />\n                            United Kingdom\n                          </button>\n                        </MenuItem>\n                        <MenuItem>\n                          <button\n                            :class=\"[\n                              selectedCountry === 'United States'\n                                ? 'bg-[#EE9B38] text-white'\n                                : 'text-gray-900',\n                              'group flex w-full items-center rounded-md p-2 text-sm hover:bg-[#EE9B38] hover:text-white',\n                            ]\"\n                            @click=\"selectedCountry = 'United States'\"\n                          >\n                            <img\n                              src=\"https://cdn.shopify.com/s/files/1/0828/4379/5772/files/united-states.png?v=1697907635\"\n                              class=\"mr-2 inline w-5\"\n                              alt=\"us flag\"\n                            />\n                            United States\n                          </button>\n                        </MenuItem>\n                      </div>\n                    </MenuItems>\n                  </transition>\n                </Menu>\n              </div>\n              <p\n                class=\"relative clear-both box-border block shrink-0 rounded-md bg-[#EE9B38] px-5 text-left text-base\"\n              >\n                <button\n                  class=\"h-10 min-w-[auto] border-[#0000] uppercase leading-10 text-white\"\n                  notranslate=\"true\"\n                  @click=\"submit\"\n                >\n                  Continue\n                </button>\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue';\n  import useLocationStore from '@/stores/locationStore';\n  import { useCookies } from '@vueuse/integrations/useCookies';\n\n  const locationStore = useLocationStore();\n  const cookies = useCookies();\n\n  const countries = [\n    { id: 1, name: 'United States' },\n    { id: 2, name: 'United Kingdom' },\n  ];\n  const selectedCountry = ref(countries[0]?.name);\n\n  const submit = () => {\n    locationStore.setCountryBannerOpen(false);\n    cookies.set('country', selectedCountry.value, {\n      path: '/',\n      domain: '.pinter.com',\n      expires: new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 365),\n    });\n    if (selectedCountry.value === 'United Kingdom')\n      window.location.href = `https://${window.location.hostname.replace(\n        '.pinter.com',\n        '.pinter.co.uk'\n      )}?country=uk`;\n  };\n\n  const params = new URLSearchParams(document.location.search);\n  const country = params.get('country');\n  if (country)\n    cookies.set('country', country === 'uk' ? 'United Kingdom' : 'United States', {\n      path: '/',\n      domain: '.pinter.com',\n      expires: new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 365),\n    });\n  if (cookies.get('country') === 'United Kingdom' && window.location.hostname.includes('.pinter.com')) {\n    window.location.href = `https://${window.location.hostname.replace(\n      '.pinter.com',\n      '.pinter.co.uk'\n    )}?country=uk`;\n  }\n</script>\n"],"names":["locationStore","useLocationStore","cookies","useCookies","selectedCountry","ref","_a","id","name","submit","setCountryBannerOpen","set","value","path","domain","expires","Date","getTime","window","location","href","concat","hostname","replace","country","URLSearchParams","document","search","get","includes"],"mappings":"s7BA0IE,MAAMA,EAAgBC,IAChBC,EAAUC,IAMVC,EAAkBC,EAAI,OAAAC,EAH1B,CAAEC,GAAI,EAAGC,KAAM,2BAGyBA,MAEpCC,EAAS,KACbT,EAAcU,sBAAqB,GAC3BR,EAAAS,IAAI,UAAWP,EAAgBQ,MAAO,CAC5CC,KAAM,IACNC,OAAQ,cACRC,QAAS,IAAIC,MAAK,IAAIA,MAAOC,UAAY,WAEb,mBAA1Bb,EAAgBQ,QAClBM,OAAOC,SAASC,KAAO,WAAWC,OAAAH,OAAOC,SAASG,SAASC,QACzD,cACA,iBACD,eAAA,EAICC,EADS,IAAIC,gBAAgBC,SAASP,SAASQ,QAC9BC,IAAI,kBACvBJ,GACFtB,EAAQS,IAAI,UAAuB,OAAZa,EAAmB,iBAAmB,gBAAiB,CAC5EX,KAAM,IACNC,OAAQ,cACRC,QAAS,IAAIC,MAAK,IAAIA,MAAOC,UAAY,WAEd,mBAA3Bf,EAAQ0B,IAAI,YAAmCV,OAAOC,SAASG,SAASO,SAAS,iBACnFX,OAAOC,SAASC,KAAO,WAAWC,OAAAH,OAAOC,SAASG,SAASC,QACzD,cACA,iBACD"}