{"version":3,"sources":["webpack:///./src/pages/Products.vue?1e66","webpack:///./src/pages/Products.vue","webpack:///./src/pages/Products.vue?6066"],"names":["class","style","_createVNode","_createBlock","_hoisted_1","_component_DataView","value","$options","products","layout","paginator","rows","sortOrder","$data","sortField","header","_withId","_hoisted_2","_hoisted_3","_component_Dropdown","sortKey","$event","options","sortOptions","optionLabel","placeholder","_ctx","$t","onChange","_cache","onSortChange","_hoisted_4","grid","slotProps","_hoisted_5","_hoisted_6","_hoisted_7","src","data","thumbnail","alt","title","_hoisted_8","_hoisted_9","_toDisplayString","_hoisted_10","description","_hoisted_11","_hoisted_12","variants","prices","amount","_component_Button","onClick","purchase","icon","_component_Dialog","purchaseHeader","modal","visible","purchaseDialog","onHide","hideModal","dialogItem","frameborder","width","height","handle","locale","email","label","this","computed","$store","getters","map","product","price","created","dispatch","methods","event","sortValue","indexOf","substring","length","__exports__","render"],"mappings":"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","file":"js/chunk-684ab3fc.a0e7608f.js","sourcesContent":["export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./Products.vue?vue&type=style&index=0&id=7f1ed282&lang=scss&scoped=true\"","<template>\r\n  <div class=\"card\">\r\n    <DataView\r\n      :value=\"products\"\r\n      layout=\"grid\"\r\n      :paginator=\"true\"\r\n      :rows=\"9\"\r\n      :sortOrder=\"sortOrder\"\r\n      :sortField=\"sortField\"\r\n    >\r\n      <template #header>\r\n        <div class=\"grid grid-nogutter\">\r\n          <div class=\"col-6\" style=\"text-align: left\">\r\n            <Dropdown\r\n              v-model=\"sortKey\"\r\n              :options=\"sortOptions\"\r\n              optionLabel=\"label\"\r\n              :placeholder=\"$t('ecom.sort_by_price')\"\r\n              @change=\"onSortChange($event)\"\r\n            />\r\n          </div>\r\n          <div class=\"col-6\" style=\"text-align: right\">\r\n            <!-- <DataViewLayoutOptions v-model=\"layout\" /> -->\r\n          </div>\r\n        </div>\r\n      </template>\r\n\r\n      <template #grid=\"slotProps\">\r\n        <div class=\"col-12 md:col-4\">\r\n          <!-- <pre>{{ slotProps }}</pre>-->\r\n\r\n          <div class=\"product-grid-item card\">\r\n            <!--\r\n            <div class=\"product-grid-item-top\">\r\n    \r\n                <div>\r\n                    <i class=\"pi pi-tag product-category-icon\"></i>\r\n                    <span class=\"product-category\"></span>\r\n                </div>\r\n    \r\n                <span>2</span>\r\n    \r\n            </div>\r\n            -->\r\n            <div class=\"product-grid-item-content\">\r\n              <img\r\n                class=\"thumbnail\"\r\n                :src=\"!!slotProps.data.thumbnail?slotProps.data.thumbnail:'/assets/img/no-image.jpg'\"\r\n                :alt=\"$t(slotProps.data.title)\"\r\n              />\r\n              <div class=\"product-name-container\">\r\n                <div class=\"product-name\">\r\n                  {{ $t(slotProps.data.title) }}\r\n                </div>\r\n              </div>\r\n              <div class=\"product-description\">\r\n                {{ $t(slotProps.data.description) }}\r\n              </div>\r\n            </div>\r\n            <div class=\"product-grid-item-bottom\">\r\n              <span class=\"product-price\"\r\n                >€ {{ slotProps.data.variants[0].prices[0].amount / 100 }}</span\r\n              >\r\n              <Button\r\n                @click=\"purchase(slotProps.data)\"\r\n                icon=\"pi pi-shopping-cart\"\r\n              ></Button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </template>\r\n    </DataView>\r\n    <Dialog\r\n      :header=\"purchaseHeader\"\r\n      :modal=\"true\"\r\n      v-model:visible=\"purchaseDialog\"\r\n      @hide=\"hideModal\"\r\n    >\r\n      <iframe\r\n        frameborder=\"0\"\r\n        width=\"600\"\r\n        height=\"900\"\r\n        :src=\"\r\n          'https://red-island-0c554ae03.2.azurestaticapps.net/' +\r\n            dialogItem.handle +\r\n            '?language=' +\r\n            locale +\r\n            '&email=' +\r\n            email\r\n        \"\r\n        v-if=\"dialogItem != null\"\r\n      ></iframe>\r\n    </Dialog>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  data() {\r\n    return {\r\n      purchaseDialog: false,\r\n      purchaseHeader: \"\",\r\n      layout: \"list\",\r\n      sortKey: null,\r\n      sortOrder: null,\r\n      sortField: null,\r\n      sortOptions: [\r\n        { label: this.$t(\"ecom.lowest_price\"), value: \"price\" },\r\n        { label: this.$t(\"ecom.higest_price\"), value: \"!price\" },\r\n      ],\r\n      dialogItem: null,\r\n    };\r\n  },\r\n  computed: {\r\n    products() {\r\n      return this.$store.getters[\"products/products\"].map((product) => {\r\n        return {\r\n          ...product,\r\n          price: product.variants[0].prices[0].amount / 100,\r\n        };\r\n      });\r\n    },\r\n    locale: function() {\r\n      return this.$store.getters[\"preferences/locale\"];\r\n    },\r\n    email: function() {\r\n      return this.$store.getters[\"profile/email\"];\r\n    },\r\n  },\r\n  created() {\r\n    this.$store.dispatch(\"products/getProducts\");\r\n  },\r\n  methods: {\r\n    hideModal() {\r\n      this.dialogItem = null;\r\n    },\r\n    purchase(product) {\r\n      this.dialogItem = product;\r\n      this.purchaseDialog = true;\r\n      this.purchaseHeader =\r\n        this.$t(\"ecom.purchase\") + \" \" + this.$t(product.title);\r\n    },\r\n    onSortChange(event) {\r\n      const value = event.value.value;\r\n      const sortValue = event.value;\r\n\r\n      if (value.indexOf(\"!\") === 0) {\r\n        this.sortOrder = -1;\r\n        this.sortField = value.substring(1, value.length);\r\n        this.sortKey = sortValue;\r\n      } else {\r\n        this.sortOrder = 1;\r\n        this.sortField = value;\r\n        this.sortKey = sortValue;\r\n      }\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.thumbnail {\r\n  max-width: 200px;\r\n  max-height: 200px;\r\n}\r\n\r\n.card {\r\n  background: #ffffff;\r\n  padding: 2rem;\r\n  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),\r\n    0 1px 3px 0 rgba(0, 0, 0, 0.12);\r\n  border-radius: 4px;\r\n  margin-bottom: 2rem;\r\n}\r\n\r\n.p-dropdown {\r\n  width: 14rem;\r\n  font-weight: normal;\r\n}\r\n\r\n.product-name-container {\r\n  height: 50px;\r\n}\r\n.product-name {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  -webkit-box-orient: vertical;\r\n\r\n  font-size: 1.5rem;\r\n  font-weight: 700;\r\n}\r\n\r\n.product-description {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 3;\r\n  -webkit-box-orient: vertical;\r\n  margin: 0 0 1rem 0;\r\n}\r\n\r\n.product-category-icon {\r\n  vertical-align: middle;\r\n  margin-right: 0.5rem;\r\n}\r\n\r\n.product-category {\r\n  font-weight: 600;\r\n  vertical-align: middle;\r\n}\r\n\r\n::v-deep(.product-list-item) {\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 1rem;\r\n  width: 100%;\r\n  img {\r\n    width: 50px;\r\n    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\r\n    margin-right: 2rem;\r\n  }\r\n  .product-list-detail {\r\n    flex: 1 1 0;\r\n  }\r\n  .p-rating {\r\n    margin: 0 0 0.5rem 0;\r\n  }\r\n  .product-price {\r\n    font-size: 1.5rem;\r\n    font-weight: 600;\r\n    margin-bottom: 0.5rem;\r\n    align-self: flex-end;\r\n  }\r\n  .product-list-action {\r\n    display: flex;\r\n    align-items: center;\r\n    padding: 1rem;\r\n    width: 100%;\r\n    img {\r\n      width: 50px;\r\n\r\n      margin-right: 2rem;\r\n    }\r\n    .product-list-detail {\r\n      flex: 1 1 0;\r\n    }\r\n    .p-rating {\r\n      margin: 0 0 0.5rem 0;\r\n    }\r\n    .product-price {\r\n      font-size: 1.5rem;\r\n      font-weight: 600;\r\n      margin-bottom: 0.5rem;\r\n      align-self: flex-end;\r\n    }\r\n    .product-list-action {\r\n      display: flex;\r\n      flex-direction: column;\r\n    }\r\n    .p-button {\r\n      margin-bottom: 0.5rem;\r\n    }\r\n  }\r\n}\r\n\r\n.product-grid-item {\r\n  margin: 0.5rem;\r\n  border: 1px solid var(--surface-border);\r\n  .product-grid-item-top,\r\n  .product-grid-item-bottom {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n  }\r\n  img {\r\n    margin: 2rem 0;\r\n  }\r\n  .product-grid-item-content {\r\n    text-align: center;\r\n  }\r\n  .product-price {\r\n    font-size: 1.5rem;\r\n    font-weight: 600;\r\n  }\r\n}\r\n\r\n@media screen and (max-width: 576px) {\r\n  .product-list-item {\r\n    flex-direction: column;\r\n    align-items: center;\r\n    img {\r\n      margin: 2rem 0;\r\n    }\r\n    .product-list-detail {\r\n      text-align: center;\r\n    }\r\n    .product-price {\r\n      align-self: center;\r\n    }\r\n    .product-list-action {\r\n      display: flex;\r\n      flex-direction: column;\r\n    }\r\n    .product-list-action {\r\n      margin-top: 2rem;\r\n      flex-direction: row;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      width: 100%;\r\n    }\r\n  }\r\n}\r\n</style>\r\n","import { render } from \"./Products.vue?vue&type=template&id=7f1ed282&scoped=true\"\nimport script from \"./Products.vue?vue&type=script&lang=js\"\nexport * from \"./Products.vue?vue&type=script&lang=js\"\n\nimport \"./Products.vue?vue&type=style&index=0&id=7f1ed282&lang=scss&scoped=true\"\n\nimport exportComponent from \"D:\\\\a\\\\1\\\\s\\\\node_modules\\\\vue-loader-v16\\\\dist\\\\exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-7f1ed282\"]])\n\nexport default __exports__"],"sourceRoot":""}