@ozdao/prometheus-framework 0.2.323 → 0.2.325

package/dist/prometheus-framework/src/modules/products/components/pages/Product.vue.cjs

@@ -1,15 +1,61 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
+const Button = require("../../../../components/Button/Button.vue.cjs");
+const Popup = require("../../../../components/Popup/Popup.vue.cjs");
+const Tab = require("../../../../components/Tab/Tab.vue.cjs");
+const Calendar = require("../../../../components/DatePicker/Calendar.vue2.cjs");
+const IconEdit = require("../../../icons/navigation/IconEdit.vue.cjs");
+const IconShopcartAdd = require("../../../icons/actions/IconShopcartAdd.vue.cjs");
+const PlaceholderImage = require("../../../icons/placeholders/PlaceholderImage.vue.cjs");
+const Images360 = require("../blocks/Images360.vue.cjs");
+const ImagesThumbnails = require("../blocks/ImagesThumbnails.vue.cjs");
+const Price = require("../elements/Price.vue.cjs");
 const PopularProducts = require("../sections/PopularProducts.vue.cjs");
-const SectionProduct = require("../sections/SectionProduct.vue.cjs");
+;/* empty css                     */
 const vueRouter = require("vue-router");
 const vueI18n = require("vue-i18n");
-const auth = require("../../../auth/views/store/auth.cjs");
+const shopcart = require("../../../orders/store/shopcart.cjs");
+require("../../../auth/views/store/auth.cjs");
 const products = require("../../store/products.cjs");
 require("../../store/categories.cjs");
-const _hoisted_1 = { class: "h-100 w-100 bg-white" };
-const _hoisted_2 = { class: "h-max pos-relative" };
+const _hoisted_1 = { class: "h-100 w-100 mobile:pd-thin pd-big bg-white" };
+const _hoisted_2 = { class: "cols-2-1_2 w-100 gap-medium" };
+const _hoisted_3 = { class: "w-100 o-hidden bg-light radius-big flex-nowrap flex-column flex pos-relative" };
+const _hoisted_4 = { class: "pd-semi w-100 bg-light radius-semi o-hidden" };
+const _hoisted_5 = ["src"];
+const _hoisted_6 = { class: "pos-relative w-100 h-100 flex-column flex-h-center flex" };
+const _hoisted_7 = { class: "w-100 h1-product mn-b-small" };
+const _hoisted_8 = {
+  key: 1,
+  class: "h-min-5r o-hidden radius-small bg-light mn-b-medium pos-relative"
+};
+const _hoisted_9 = {
+  key: 0,
+  class: "pd-medium"
+};
+const _hoisted_10 = {
+  key: 0,
+  class: "w-100 t-transp"
+};
+const _hoisted_11 = {
+  key: 1,
+  class: "w-100 t-transp"
+};
+const _hoisted_12 = {
+  key: 1,
+  class: "cols-2 pd-medium w-100 gap-small"
+};
+const _hoisted_13 = { class: "w-100 pd-small radius-small bg-white product-information" };
+const _hoisted_14 = { class: "t-demi" };
+const _hoisted_15 = { class: "w-max-33r" };
+const _hoisted_16 = { class: "gap-thin flex flex-center flex-nowrap" };
+const _hoisted_17 = {
+  key: 1,
+  class: "flex-center flex uppercase radius-big t-black w-max pd-small t-medium bg-grey h-3r w-100 mn-r-smallbutton"
+};
+const _hoisted_18 = { class: "gap-thin flex flex-center flex-nowrap" };
+const _hoisted_19 = { class: "h-max pos-relative" };
 const _sfc_main = {
   __name: "Product",
   setup(__props) {
@@ -18,23 +64,200 @@ const _sfc_main = {
     route.meta.title.en = products.state.current.name;
     route.meta.title.ru = products.state.current.name;
     const product = vue.computed(() => products.state.current);
+    const images = vue.computed(() => products.state.current.images);
+    let rentDate = vue.ref({
+      start: null,
+      end: null
+    });
+    const tabProduct = vue.ref("description");
     const text = {
-      messages: {}
+      en: {
+        addtoorder: "Add to Cart",
+        fastorder: "Fast Order"
+      },
+      ru: {
+        addtoorder: "Добавить в корзину",
+        fastorder: "Быстрый заказ"
+      }
     };
+    const { t } = vueI18n.useI18n({ messages: text });
     vue.onMounted(async () => {
       await products.actions.read({ _id: route.params.product });
     });
-    vueI18n.useI18n(text);
+    function validateToCard(product2) {
+      if (product2.quantity > 0) {
+        return false;
+      }
+      return true;
+    }
+    const isPopupVisible = vue.ref(false);
+    const openPopup = () => {
+      isPopupVisible.value = true;
+    };
+    const closePopup = () => {
+      isPopupVisible.value = false;
+    };
+    async function addToCart(product2) {
+      try {
+        if (shopcart.state.organization !== product2.owner.target) {
+          shopcart.state.organization = product2.owner.target;
+          shopcart.state.positions = [];
+        }
+        await shopcart.actions.addProductToCart(product2, product2.owner.target, rentDate);
+        return true;
+      } catch (error) {
+        console.error("Ошибка при добавлении товара в корзину:", error);
+        throw error;
+      }
+    }
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        product.value ? (vue.openBlock(), vue.createBlock(SectionProduct.default, {
-          key: 0,
-          product: product.value,
-          user: auth.state.user,
-          class: "pos-relative"
-        }, null, 8, ["product", "user"])) : vue.createCommentVNode("", true),
         vue.createElementVNode("div", _hoisted_2, [
-          _cache[0] || (_cache[0] = vue.createElementVNode("h3", { class: "pd-medium pd-b-small" }, "Most Popular", -1)),
+          vue.createElementVNode("div", _hoisted_3, [
+            vue.createElementVNode("div", _hoisted_4, [
+              product.value && product.value.image3d ? (vue.openBlock(), vue.createBlock(Images360.default, {
+                key: 0,
+                class: "h-100 w-100",
+                imagePath: `/assets/images/products/${product.value.image3d}`,
+                imageCount: 36
+              }, null, 8, ["imagePath"])) : vue.createCommentVNode("", true),
+              images.value[0] && !product.value.image3d ? (vue.openBlock(), vue.createElementBlock("img", {
+                key: 1,
+                loading: "lazy",
+                class: "h-max h-max-15r bg-white radius-semi w-100",
+                style: { "object-fit": "contain" },
+                src: (_ctx.FILE_SERVER_URL || "") + images.value[0]
+              }, null, 8, _hoisted_5)) : vue.createCommentVNode("", true),
+              !images.value[0] && !product.value.image3d ? (vue.openBlock(), vue.createBlock(PlaceholderImage.default, {
+                key: 2,
+                class: "h-max-20r h-100 w-100",
+                style: { "object-fit": "cover" }
+              })) : vue.createCommentVNode("", true)
+            ]),
+            images.value.length > 1 ? (vue.openBlock(), vue.createBlock(ImagesThumbnails.default, {
+              key: 0,
+              images: images.value,
+              class: "pd-semi pd-t-zero"
+            }, null, 8, ["images"])) : vue.createCommentVNode("", true)
+          ]),
+          vue.createElementVNode("div", _hoisted_6, [
+            _ctx.accesses && _ctx.hasAccess(vue.unref(route).params._id, "products", "edit", _ctx.accesses) ? (vue.openBlock(), vue.createBlock(IconEdit.default, {
+              key: 0,
+              onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$router.push({
+                name: "ProductEdit",
+                params: {
+                  _id: product.value.owner.target,
+                  product: product.value._id
+                }
+              })),
+              class: "pos-absolute pos-t-regular pos-r-regular i-regular t-transp"
+            })) : vue.createCommentVNode("", true),
+            vue.createElementVNode("h2", _hoisted_7, vue.toDisplayString(product.value.name), 1),
+            vue.createVNode(Price.default, {
+              product: product.value,
+              size: "big",
+              class: "flex gap-thin flex-center pd-thin br-solid br-1px br-black-transp-10 w-max mn-b-medium"
+            }, null, 8, ["product"]),
+            product.value.description || product.value.specification ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
+              vue.createVNode(Tab.default, {
+                selected: tabProduct.value,
+                "onUpdate:selected": _cache[1] || (_cache[1] = ($event) => tabProduct.value = $event),
+                tabs: [
+                  { name: "Description", value: "description" },
+                  { name: "Specifications", value: "specifications" }
+                ],
+                tabClass: "pd-thin bg-white radius-thin p-small uppercase t-medium",
+                class: "gap-micro bg-light pos-relative z-index-2 pd-thin br-solid br-b br-black-transp-10"
+              }, null, 8, ["selected"]),
+              vue.createVNode(vue.Transition, { name: "slide-fade" }, {
+                default: vue.withCtx(() => [
+                  tabProduct.value === "description" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9, [
+                    product.value.description && !product.value.localization < 1 && !_ctx.recommendation ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_10, vue.toDisplayString(product.value.description), 1)) : vue.createCommentVNode("", true),
+                    product.value.localization && product.value.localization.length > 1 && !_ctx.recommendation ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_11, vue.toDisplayString(vue.unref(t)("description")), 1)) : vue.createCommentVNode("", true)
+                  ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_12, [
+                    product.value.information.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(product.value.information, (information) => {
+                      return vue.openBlock(), vue.createElementBlock("div", _hoisted_13, [
+                        vue.createElementVNode("p", _hoisted_14, vue.toDisplayString(information.name), 1),
+                        vue.createElementVNode("p", null, vue.toDisplayString(information.value), 1)
+                      ]);
+                    }), 256)) : vue.createCommentVNode("", true)
+                  ]))
+                ]),
+                _: 1
+              })
+            ])) : vue.createCommentVNode("", true),
+            vue.createElementVNode("div", _hoisted_15, [
+              product.value.quantity > 0 || product.value.listing === "rent" ? (vue.openBlock(), vue.createElementBlock("button", {
+                key: 0,
+                onClick: _cache[2] || (_cache[2] = ($event) => product.value.listing === "rent" ? openPopup() : addToCart(product.value)),
+                class: "cursor-pointer pd-small radius-big w-max mobile:w-100 bg-main button"
+              }, [
+                vue.createElementVNode("div", _hoisted_16, [
+                  product.value.listing === "rent" ? (vue.openBlock(), vue.createBlock(IconShopcartAdd.default, {
+                    key: 0,
+                    class: "i-semi"
+                  })) : vue.createCommentVNode("", true),
+                  vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(t)("addtoorder")), 1)
+                ])
+              ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_17, " Out of Stock "))
+            ]),
+            vue.createVNode(Popup.default, {
+              onClosePopup: closePopup,
+              isPopupOpen: isPopupVisible.value,
+              class: "radius-medium pd-medium bg-white o-hidden"
+            }, {
+              default: vue.withCtx(() => [
+                _cache[3] || (_cache[3] = vue.createElementVNode("h5", { class: "w-100 t-center mn-b-small" }, "Select Rent Period", -1)),
+                vue.createVNode(Calendar.default, {
+                  date: vue.unref(rentDate),
+                  allowRange: true,
+                  class: "bg-light radius-small"
+                }, null, 8, ["date"]),
+                _cache[4] || (_cache[4] = vue.createElementVNode("p", { class: "flex flex-nowrap pd-t-small" }, [
+                  vue.createElementVNode("span", { class: "w-100 t-transp" }, "$ 400 x 4 days"),
+                  vue.createElementVNode("span", { class: "w-100 t-right" }, "$2000")
+                ], -1)),
+                _cache[5] || (_cache[5] = vue.createElementVNode("p", { class: "flex flex-nowrap pd-t-small" }, [
+                  vue.createElementVNode("span", { class: "w-100 t-transp" }, "Insurance Fee"),
+                  vue.createElementVNode("span", { class: "w-100 t-right" }, "$200")
+                ], -1)),
+                _cache[6] || (_cache[6] = vue.createElementVNode("p", { class: "flex flex-nowrap br-black-transp-10 br-solid br-b pd-b-small pd-t-small" }, [
+                  vue.createElementVNode("span", { class: "w-100 t-transp" }, "VAT (20%)"),
+                  vue.createElementVNode("span", { class: "w-100 t-right" }, "$300")
+                ], -1)),
+                _cache[7] || (_cache[7] = vue.createElementVNode("p", { class: "p-big flex flex-nowrap pd-b-small pd-t-small" }, [
+                  vue.createElementVNode("span", { class: "w-100 t-medium" }, "In Total"),
+                  vue.createElementVNode("span", { class: "w-100 t-main t-medium t-right" }, "$2500")
+                ], -1)),
+                product.value.quantity > 0 || product.value.listing === "rent" ? (vue.openBlock(), vue.createBlock(Button.default, {
+                  key: 0,
+                  submit: () => addToCart(product.value),
+                  callback: () => closePopup(),
+                  disabled: product.value.listing !== "rent" && validateToCard(product.value),
+                  text: {
+                    success: "Added",
+                    error: "Error"
+                  },
+                  class: "h-3r w-100 bg-main button"
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createElementVNode("div", _hoisted_18, [
+                      product.value.listing === "rent" ? (vue.openBlock(), vue.createBlock(IconShopcartAdd.default, {
+                        key: 0,
+                        class: "i-semi"
+                      })) : vue.createCommentVNode("", true),
+                      vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(t)("addtoorder")), 1)
+                    ])
+                  ]),
+                  _: 1
+                }, 8, ["submit", "callback", "disabled"])) : vue.createCommentVNode("", true)
+              ]),
+              _: 1
+            }, 8, ["isPopupOpen"])
+          ])
+        ]),
+        vue.createElementVNode("div", _hoisted_19, [
+          _cache[8] || (_cache[8] = vue.createElementVNode("h3", { class: "pd-medium pd-b-small" }, "Most Popular", -1)),
           vue.createVNode(PopularProducts.default)
         ])
       ]);

package/dist/prometheus-framework/src/modules/products/components/pages/Product.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Product.vue.cjs","sources":["../../../../../../../src/modules/products/components/pages/Product.vue"],"sourcesContent":["<template>\n\t<div class=\"h-100 w-100 bg-white \">\n\t\t<!-- <Breadcrumbs class=\"bg-light radius-big pd-small\"/> -->\n\t\t<SectionProduct v-if=\"product\" :product=\"product\" :user=\"auth.state.user\" class=\"pos-relative\"/>\n\n\t\t<div class=\"h-max pos-relative\">\n\t\t  <h3 class=\"pd-medium pd-b-small\">Most Popular</h3>\n\t\t\t<PopularProducts />\n\t\t</div>\n\t</div>\n</template>\n\n<script setup=\"props\">\n\t// Import components\n\t// import Breadcrumbs from '@pf/src/components/Breadcrumbs/Breadcrumbs.vue'\n\timport PopularProducts \tfrom '@pf/src/modules/products/components/sections/PopularProducts.vue'\n\timport SectionProduct from '@pf/src/modules/products/components/sections/SectionProduct.vue'\n\t// Import libs\n\timport { computed, onMounted } from 'vue'\n\timport { useRoute,useRouter } from 'vue-router'\n\timport { useI18n }    from 'vue-i18n'\n\t\n  import * as auth from '@pf/src/modules/auth/views/store/auth';\n \timport * as products from '@pf/src/modules/products/store/products';\n  import * as categories from '@pf/src/modules/products/store/categories';\n\n\t// Accessing router and store\n\tconst route = useRoute()\n\tconst router = useRouter()\n\n\t\n\troute.meta.title.en = products.state.current.name\n\troute.meta.title.ru = products.state.current.name\n\n\t// Accessing state\n\tconst product = computed(() => products.state.current)\n\n\tconst text = {\n\t\tmessages: {\n\t\t}\n\t};\n\n\tonMounted(async ()=> {\n\t\tawait products.actions.read({_id: route.params.product});\n\n\t})\n\t\n\t// products.state.current.localization.forEach(localization => {\n  \t// if (localization) text.messages[localization.locale].description = localization.text\n\t// })\n\n  const { t } = useI18n(text)\n</script>\n\n<style lang=\"scss\">\n</style>\n"],"names":["useRoute","useRouter","products.state","computed","onMounted","products.actions","useI18n"],"mappings":";;;;;;;;;;;;;;;AA2BC,UAAM,QAAQA,UAAAA,SAAU;AACTC,wBAAW;AAG1B,UAAM,KAAK,MAAM,KAAKC,SAAc,MAAC,QAAQ;AAC7C,UAAM,KAAK,MAAM,KAAKA,SAAc,MAAC,QAAQ;AAG7C,UAAM,UAAUC,IAAAA,SAAS,MAAMD,SAAAA,MAAe,OAAO;AAErD,UAAM,OAAO;AAAA,MACZ,UAAU,CACT;AAAA,IACH;AAECE,QAAAA,UAAU,YAAW;AACpB,YAAMC,SAAAA,QAAiB,KAAK,EAAC,KAAK,MAAM,OAAO,QAAO,CAAC;AAAA,IAEzD,CAAE;AAMcC,YAAAA,QAAQ,IAAI;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Product.vue.cjs","sources":["../../../../../../../src/modules/products/components/pages/Product.vue"],"sourcesContent":["<template>\n\t<div class=\"h-100 w-100 mobile:pd-thin pd-big bg-white \">\n\t\t<!-- <Breadcrumbs class=\"bg-light radius-big pd-small\"/> -->\n\t\t<div class=\"cols-2-1_2 w-100 gap-medium\">\n\t\t\n\t\t\t<div class=\"w-100 o-hidden  bg-light radius-big flex-nowrap flex-column flex pos-relative\">\n\t\t\t\t<div class=\"pd-semi w-100 bg-light radius-semi o-hidden\">\n\t\t\t\t\t<!-- PRODUCT IMAGE -->\n\t\t\t\t\t<Images360\n\t\t\t\t\t\tv-if=\"product && product.image3d\"\n\t\t\t\t\t\tclass=\"h-100 w-100\"\n\t\t\t\t\t\t:imagePath=\"`/assets/images/products/${product.image3d}`\"\n\t\t\t\t\t\t:imageCount=\"36\"\n\t\t\t\t\t/>\n\n\t\t\t\t\t<img loading=\"lazy\" \n\t\t\t\t\t\tv-if=\"images[0] && !product.image3d\"\n\t\t\t\t\t\tclass=\"h-max h-max-15r bg-white radius-semi w-100\"\n\t\t\t\t\t\tstyle=\"object-fit: contain;\"\n\t\t\t\t\t\t:src=\"(FILE_SERVER_URL || '') + images[0]\"\n\t\t\t\t\t/>\n\n\t\t\t\t\t<PlaceholderImage\n\t\t\t\t\t\tv-if=\"!images[0] && !product.image3d\"\n\t\t\t\t\t\tclass=\"h-max-20r h-100 w-100\"\n\t\t\t\t\t\tstyle=\"object-fit: cover;\"\n\t\t\t\t\t/>\n\n\t\t\t\t</div>\n\n\t\t\t\t<ImagesThumbnails\n\t\t\t\t\tv-if=\"images.length > 1\"\n\t\t\t\t\t:images=\"images\"\n\t\t\t\t\tclass=\"pd-semi pd-t-zero\"\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t<div class=\"pos-relative w-100 h-100 flex-column flex-h-center flex\">\n\n\t\t\t\t<IconEdit\n\t\t\t\t\tv-if=\"accesses && hasAccess(route.params._id, 'products', 'edit', accesses)\"\n\t\t\t\t\t@click=\"$router.push({\n\t\t\t\t\t\tname: 'ProductEdit', \n\t\t\t\t\t\tparams: {\n\t\t\t\t\t\t\t_id: product.owner.target,\n\t\t\t\t\t\t\tproduct: product._id\n\t\t\t\t\t\t}\n\t\t\t\t\t})\" \n\t\t\t\t\tclass=\"pos-absolute pos-t-regular pos-r-regular i-regular t-transp\"\n\t\t\t\t/>\n\n\t\t\t\t<!-- Name -->\n\t\t\t\t<h2 class=\"w-100 h1-product mn-b-small\">{{ product.name }}</h2>\n\n\t\t\t\t<Price :product=\"product\" size=\"big\" class=\"flex gap-thin flex-center pd-thin br-solid br-1px br-black-transp-10 w-max mn-b-medium\" />\n\n\t\t\t\t<!-- Price -->\n\t\t\t\t<div v-if=\"product.description || product.specification\" class=\"h-min-5r o-hidden radius-small bg-light mn-b-medium pos-relative\">\n\t\t\t\t\t<Tab \n\t\t\t\t\t\tv-model:selected=\"tabProduct\"\n\t\t\t\t\t\t:tabs=\"[\n\t\t\t\t\t\t\t{name: 'Description', value: 'description'},\n\t\t\t\t\t\t\t{name: 'Specifications', value: 'specifications'}\n\t\t\t\t\t\t]\"\n\t\t\t\t\t\ttabClass=\"pd-thin bg-white radius-thin p-small uppercase t-medium\"\n\t\t\t\t\t\tclass=\"gap-micro bg-light pos-relative z-index-2 pd-thin br-solid br-b br-black-transp-10\"\n\t\t\t\t\t/>\n\t\t\t\t\t<transition name=\"slide-fade\">\n\t\t\t\t\t\t<div v-if=\"tabProduct === 'description'\"  class=\" pd-medium\">\n\t\t\t\t\t\t\t<p v-if=\"product.description && !product.localization < 1 && !recommendation\" class=\"w-100 t-transp\">\n\t\t\t\t\t\t\t\t{{ product.description }}\n\t\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t\t<p v-if=\"product.localization && product.localization.length > 1 && !recommendation\" class=\"w-100 t-transp\">\n\t\t\t\t\t\t\t\t{{ t('description') }}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div \n\t\t\t\t\t\t\tv-else\n\t\t\t\t\t\t\tclass=\"cols-2  pd-medium w-100 gap-small\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div \n\t\t\t\t\t\t\t\tv-if=\"product.information.length > 0\" \n\t\t\t\t\t\t\t\tv-for=\"information in product.information\" \n\t\t\t\t\t\t\t\tclass=\"w-100 pd-small radius-small bg-white product-information\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<p class=\"t-demi\">{{ information.name }}</p>\n\t\t\t\t\t\t\t\t<p>{{ information.value }}</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</transition>\n\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<!-- Modifications -->\n\t\t\t\t<!-- <div v-if=\"product.modifications.length > 0\" class=\"flex-nojustify  flex\">\n\t\t\t\t\t<SelectElement v-if=\"sizes2.length > 0\" :elements=\"sizes2\" :selected=\"product.selectedSize\" class=\"mn-r-medium\" />\n\t\t\t\t</div> -->\n\n\t\t\t\t<!-- Actions -->\n\t\t\t\t<div class=\"w-max-33r\">\n\t\t\t\t  <button\n\t\t\t\t    v-if=\"product.quantity > 0 || product.listing === 'rent'\"\n\t\t\t\t    @click=\"product.listing === 'rent' ? openPopup() : addToCart(product)\" \n\t\t\t\t    class=\"cursor-pointer pd-small radius-big w-max mobile:w-100 bg-main button\"\n\t\t\t\t  > \n\t\t\t\t    <div class=\"gap-thin flex flex-center flex-nowrap\">\n\t\t\t\t      <IconShopcartAdd v-if=\"product.listing === 'rent'\" class=\"i-semi\" />\n\t\t\t\t      <span>{{ t('addtoorder') }}</span>\n\t\t\t\t    </div>\n\t\t\t\t  </button>\n\n\t\t\t\t  <div \n\t\t\t\t    v-else \n\t\t\t\t    class=\"flex-center flex uppercase radius-big t-black w-max pd-small t-medium bg-grey h-3r w-100 mn-r-smallbutton\"\n\t\t\t\t  >\n\t\t\t\t    Out of Stock\n\t\t\t\t  </div>\n\t\t\t\t</div>\n\t\t\t\t<!-- Shopcart Adding Popup -->\n\t\t\t\t<Popup @close-popup=\"closePopup\" :isPopupOpen=\"isPopupVisible\" class=\"radius-medium pd-medium bg-white o-hidden\">\n\t\t      <h5 class=\"w-100 t-center mn-b-small\">Select Rent Period</h5>\n\t\t       <Calendar\n\t\t      \t:date=\"rentDate\"\n\t\t      \t:allowRange=\"true\"\n\t\t      \tclass=\"bg-light radius-small\"\n\t\t      />\n\n\t\t      <p class=\"flex flex-nowrap pd-t-small\">\n\t\t      \t<span class=\"w-100 t-transp\">$ 400 x 4 days</span>\n\t\t      \t<span class=\"w-100 t-right\">$2000</span>\n\t\t      </p>\n\t\t      <p class=\"flex flex-nowrap pd-t-small\">\n\t\t      \t<span class=\"w-100 t-transp\">Insurance Fee</span>\n\t\t      \t<span class=\"w-100 t-right\">$200</span>\n\t\t      </p>\n\t\t      <p class=\"flex flex-nowrap br-black-transp-10 br-solid br-b pd-b-small pd-t-small\">\n\t\t      \t<span class=\"w-100 t-transp\">VAT (20%)</span>\n\t\t      \t<span class=\"w-100 t-right\">$300</span>\n\t\t      </p>\n\t\t     \n\t\t     \t<p class=\"p-big flex flex-nowrap pd-b-small pd-t-small\">\n\t\t      \t<span class=\"w-100 t-medium \">In Total</span>\n\t\t      \t<span class=\"w-100 t-main t-medium t-right\">$2500</span>\n\t      \t</p>\n\n\t      \t<Button\n\t\t\t\t    v-if=\"product.quantity > 0 || product.listing === 'rent'\"\n\t\t\t\t    :submit=\"() => addToCart(product)\" \n\t\t\t\t    :callback=\"() => closePopup()\"\n\t\t\t\t    :disabled=\"product.listing !== 'rent' && validateToCard(product)\"\n\t\t\t\t    :text=\"{\n\t\t\t\t      success: 'Added',\n\t\t\t\t      error: 'Error'\n\t\t\t\t    }\"\n\t\t\t\t    class=\"h-3r w-100 bg-main button\"\n\t\t\t\t  > \n\t\t\t\t    <div class=\"gap-thin flex flex-center flex-nowrap\">\n\t\t\t\t      <IconShopcartAdd v-if=\"product.listing === 'rent'\" class=\"i-semi\" />\n\t\t\t\t      <span>{{ t('addtoorder') }}</span>\n\t\t\t\t    </div>\n\t\t\t\t  </Button>\n\t\t    </Popup>\n\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"h-max pos-relative\">\n\t\t  <h3 class=\"pd-medium pd-b-small\">Most Popular</h3>\n\t\t\t<PopularProducts />\n\t\t</div>\n\t</div>\n</template>\n\n<script setup=\"props\">\n\t// Import components\n\t// import Breadcrumbs from '@pf/src/components/Breadcrumbs/Breadcrumbs.vue'\n\timport Button from '@pf/src/components/Button/Button.vue'\n\timport Popup from '@pf/src/components/Popup/Popup.vue'\n\timport Tab from '@pf/src/components/Tab/Tab.vue'\n\timport Calendar from '@pf/src/components/DatePicker/Calendar.vue'\n\n\timport IconEdit from '@pf/src/modules/icons/navigation/IconEdit.vue'\n\timport IconShopcartAdd from '@pf/src/modules/icons/actions/IconShopcartAdd.vue'\n\n\timport PlaceholderImage from '@pf/src/modules/icons/placeholders/PlaceholderImage.vue'\n\n\timport Images360 \tfrom '@pf/src/modules/products/components/blocks/Images360.vue'\n\timport ImagesThumbnails from \"@pf/src/modules/products/components/blocks/ImagesThumbnails.vue\";\n\n\timport Price from '@pf/src/modules/products/components/elements/Price.vue'\n\n\timport PopularProducts \tfrom '@pf/src/modules/products/components/sections/PopularProducts.vue'\n\timport SectionProduct from '@pf/src/modules/products/components/sections/SectionProduct.vue'\n\t// Import libs\n\timport { computed, ref, onMounted } from 'vue'\n\timport { useRoute,useRouter } from 'vue-router'\n\timport { useI18n }    from 'vue-i18n'\n\t\n  import * as auth from '@pf/src/modules/auth/views/store/auth';\n \timport * as products from '@pf/src/modules/products/store/products';\n  import * as categories from '@pf/src/modules/products/store/categories';\n\n\timport * as shopcart from '@pf/src/modules/orders/store/shopcart';\n\n\t// Accessing router and store\n\tconst route = useRoute()\n\tconst router = useRouter()\n\t\n\troute.meta.title.en = products.state.current.name\n\troute.meta.title.ru = products.state.current.name\n\n\t// Accessing state\n\tconst product = computed(() => products.state.current)\n\tconst images = computed(() => products.state.current.images)\n\n\tlet rentDate = ref({\n\t\tstart: null,\n\t\tend: null\n\t})\n\n\n\tconst tabProduct = ref('description')\n\n\tconst text = {\n\t  en: {\n\t  \taddtoorder: 'Add to Cart',\n\t    fastorder: 'Fast Order'\n\t  },\n\t  ru: {\n\t  \taddtoorder: 'Добавить в корзину',\n\t    fastorder: 'Быстрый заказ'\n\t  }\n\t}\n\n  const { t } = useI18n({messages: text})\n\n\tonMounted(async ()=> {\n\t\tawait products.actions.read({_id: route.params.product});\n\t})\n\n\t// Methods\n\tfunction validateToCard(product) {\n\t  if (product.quantity > 0) {\n\t    return false\n\t  }\n\t  return true\n\t}\n\n\tconst isPopupVisible = ref(false);\n\n\tconst openPopup = () => {\n\t  isPopupVisible.value = true;\n\t};\n\n\tconst closePopup = () => {\n\t  isPopupVisible.value = false;\n\t};\n\n\tasync function addToCart(product) {\n    try {\n      if (shopcart.state.organization !== product.owner.target) {\n        shopcart.state.organization = product.owner.target\n        shopcart.state.positions = []\n      }\n      \n      await shopcart.actions.addProductToCart(product, product.owner.target, rentDate)\n\n      return true\n    } catch (error) {\n      console.error('Ошибка при добавлении товара в корзину:', error)\n      throw error\n    }\n\t}\n</script>\n\n<style lang=\"scss\">\n</style>\n"],"names":["useRoute","useRouter","products.state","computed","ref","useI18n","onMounted","products.actions","product","shopcart.state","shopcart.actions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8MC,UAAM,QAAQA,UAAAA,SAAU;AACTC,wBAAW;AAE1B,UAAM,KAAK,MAAM,KAAKC,SAAc,MAAC,QAAQ;AAC7C,UAAM,KAAK,MAAM,KAAKA,SAAc,MAAC,QAAQ;AAG7C,UAAM,UAAUC,IAAAA,SAAS,MAAMD,SAAAA,MAAe,OAAO;AACrD,UAAM,SAASC,IAAQ,SAAC,MAAMD,SAAAA,MAAe,QAAQ,MAAM;AAE3D,QAAI,WAAWE,IAAAA,IAAI;AAAA,MAClB,OAAO;AAAA,MACP,KAAK;AAAA,IACP,CAAE;AAGD,UAAM,aAAaA,IAAG,IAAC,aAAa;AAEpC,UAAM,OAAO;AAAA,MACX,IAAI;AAAA,QACH,YAAY;AAAA,QACX,WAAW;AAAA,MACZ;AAAA,MACD,IAAI;AAAA,QACH,YAAY;AAAA,QACX,WAAW;AAAA,MACZ;AAAA,IACF;AAEA,UAAM,EAAE,EAAC,IAAKC,QAAAA,QAAQ,EAAC,UAAU,KAAI,CAAC;AAEvCC,QAAAA,UAAU,YAAW;AACpB,YAAMC,SAAAA,QAAiB,KAAK,EAAC,KAAK,MAAM,OAAO,QAAO,CAAC;AAAA,IACzD,CAAE;AAGD,aAAS,eAAeC,UAAS;AAC/B,UAAIA,SAAQ,WAAW,GAAG;AACxB,eAAO;AAAA,MACR;AACD,aAAO;AAAA,IACR;AAED,UAAM,iBAAiBJ,QAAI,KAAK;AAEhC,UAAM,YAAY,MAAM;AACtB,qBAAe,QAAQ;AAAA,IAC1B;AAEC,UAAM,aAAa,MAAM;AACvB,qBAAe,QAAQ;AAAA,IAC1B;AAEC,mBAAe,UAAUI,UAAS;AAC/B,UAAI;AACF,YAAIC,SAAc,MAAC,iBAAiBD,SAAQ,MAAM,QAAQ;AACxDC,mBAAAA,MAAe,eAAeD,SAAQ,MAAM;AAC5CC,mBAAc,MAAC,YAAY,CAAE;AAAA,QAC9B;AAED,cAAMC,SAAAA,QAAiB,iBAAiBF,UAASA,SAAQ,MAAM,QAAQ,QAAQ;AAE/E,eAAO;AAAA,MACR,SAAQ,OAAO;AACd,gBAAQ,MAAM,2CAA2C,KAAK;AAC9D,cAAM;AAAA,MACP;AAAA,IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/prometheus-framework/src/modules/products/components/pages/Product.vue.js

@@ -1,13 +1,59 @@
-import { computed, onMounted, openBlock, createElementBlock, createBlock, createCommentVNode, createElementVNode, createVNode } from "vue";
-import _sfc_main$2 from "../sections/PopularProducts.vue.js";
-import _sfc_main$1 from "../sections/SectionProduct.vue.js";
+import { computed, ref, onMounted, openBlock, createElementBlock, createElementVNode, createBlock, createCommentVNode, unref, toDisplayString, createVNode, Transition, withCtx, Fragment, renderList } from "vue";
+import _sfc_main$7 from "../../../../components/Button/Button.vue.js";
+import _sfc_main$5 from "../../../../components/Popup/Popup.vue.js";
+import _sfc_main$3 from "../../../../components/Tab/Tab.vue.js";
+import _sfc_main$6 from "../../../../components/DatePicker/Calendar.vue2.js";
+import _sfc_main$1 from "../../../icons/navigation/IconEdit.vue.js";
+import _sfc_main$4 from "../../../icons/actions/IconShopcartAdd.vue.js";
+import PlaceholderImage from "../../../icons/placeholders/PlaceholderImage.vue.js";
+import Images360 from "../blocks/Images360.vue.js";
+import ImagesThumbnails from "../blocks/ImagesThumbnails.vue.js";
+import _sfc_main$2 from "../elements/Price.vue.js";
+import _sfc_main$8 from "../sections/PopularProducts.vue.js";
+/* empty css                   */
 import { useRoute, useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
-import { state as state$1 } from "../../../auth/views/store/auth.js";
+import { state as state$1, actions as actions$1 } from "../../../orders/store/shopcart.js";
+import "../../../auth/views/store/auth.js";
 import { state, actions } from "../../store/products.js";
 import "../../store/categories.js";
-const _hoisted_1 = { class: "h-100 w-100 bg-white" };
-const _hoisted_2 = { class: "h-max pos-relative" };
+const _hoisted_1 = { class: "h-100 w-100 mobile:pd-thin pd-big bg-white" };
+const _hoisted_2 = { class: "cols-2-1_2 w-100 gap-medium" };
+const _hoisted_3 = { class: "w-100 o-hidden bg-light radius-big flex-nowrap flex-column flex pos-relative" };
+const _hoisted_4 = { class: "pd-semi w-100 bg-light radius-semi o-hidden" };
+const _hoisted_5 = ["src"];
+const _hoisted_6 = { class: "pos-relative w-100 h-100 flex-column flex-h-center flex" };
+const _hoisted_7 = { class: "w-100 h1-product mn-b-small" };
+const _hoisted_8 = {
+  key: 1,
+  class: "h-min-5r o-hidden radius-small bg-light mn-b-medium pos-relative"
+};
+const _hoisted_9 = {
+  key: 0,
+  class: "pd-medium"
+};
+const _hoisted_10 = {
+  key: 0,
+  class: "w-100 t-transp"
+};
+const _hoisted_11 = {
+  key: 1,
+  class: "w-100 t-transp"
+};
+const _hoisted_12 = {
+  key: 1,
+  class: "cols-2 pd-medium w-100 gap-small"
+};
+const _hoisted_13 = { class: "w-100 pd-small radius-small bg-white product-information" };
+const _hoisted_14 = { class: "t-demi" };
+const _hoisted_15 = { class: "w-max-33r" };
+const _hoisted_16 = { class: "gap-thin flex flex-center flex-nowrap" };
+const _hoisted_17 = {
+  key: 1,
+  class: "flex-center flex uppercase radius-big t-black w-max pd-small t-medium bg-grey h-3r w-100 mn-r-smallbutton"
+};
+const _hoisted_18 = { class: "gap-thin flex flex-center flex-nowrap" };
+const _hoisted_19 = { class: "h-max pos-relative" };
 const _sfc_main = {
   __name: "Product",
   setup(__props) {
@@ -16,24 +62,201 @@ const _sfc_main = {
     route.meta.title.en = state.current.name;
     route.meta.title.ru = state.current.name;
     const product = computed(() => state.current);
+    const images = computed(() => state.current.images);
+    let rentDate = ref({
+      start: null,
+      end: null
+    });
+    const tabProduct = ref("description");
     const text = {
-      messages: {}
+      en: {
+        addtoorder: "Add to Cart",
+        fastorder: "Fast Order"
+      },
+      ru: {
+        addtoorder: "Добавить в корзину",
+        fastorder: "Быстрый заказ"
+      }
     };
+    const { t } = useI18n({ messages: text });
     onMounted(async () => {
       await actions.read({ _id: route.params.product });
     });
-    useI18n(text);
+    function validateToCard(product2) {
+      if (product2.quantity > 0) {
+        return false;
+      }
+      return true;
+    }
+    const isPopupVisible = ref(false);
+    const openPopup = () => {
+      isPopupVisible.value = true;
+    };
+    const closePopup = () => {
+      isPopupVisible.value = false;
+    };
+    async function addToCart(product2) {
+      try {
+        if (state$1.organization !== product2.owner.target) {
+          state$1.organization = product2.owner.target;
+          state$1.positions = [];
+        }
+        await actions$1.addProductToCart(product2, product2.owner.target, rentDate);
+        return true;
+      } catch (error) {
+        console.error("Ошибка при добавлении товара в корзину:", error);
+        throw error;
+      }
+    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        product.value ? (openBlock(), createBlock(_sfc_main$1, {
-          key: 0,
-          product: product.value,
-          user: state$1.user,
-          class: "pos-relative"
-        }, null, 8, ["product", "user"])) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_2, [
-          _cache[0] || (_cache[0] = createElementVNode("h3", { class: "pd-medium pd-b-small" }, "Most Popular", -1)),
-          createVNode(_sfc_main$2)
+          createElementVNode("div", _hoisted_3, [
+            createElementVNode("div", _hoisted_4, [
+              product.value && product.value.image3d ? (openBlock(), createBlock(Images360, {
+                key: 0,
+                class: "h-100 w-100",
+                imagePath: `/assets/images/products/${product.value.image3d}`,
+                imageCount: 36
+              }, null, 8, ["imagePath"])) : createCommentVNode("", true),
+              images.value[0] && !product.value.image3d ? (openBlock(), createElementBlock("img", {
+                key: 1,
+                loading: "lazy",
+                class: "h-max h-max-15r bg-white radius-semi w-100",
+                style: { "object-fit": "contain" },
+                src: (_ctx.FILE_SERVER_URL || "") + images.value[0]
+              }, null, 8, _hoisted_5)) : createCommentVNode("", true),
+              !images.value[0] && !product.value.image3d ? (openBlock(), createBlock(PlaceholderImage, {
+                key: 2,
+                class: "h-max-20r h-100 w-100",
+                style: { "object-fit": "cover" }
+              })) : createCommentVNode("", true)
+            ]),
+            images.value.length > 1 ? (openBlock(), createBlock(ImagesThumbnails, {
+              key: 0,
+              images: images.value,
+              class: "pd-semi pd-t-zero"
+            }, null, 8, ["images"])) : createCommentVNode("", true)
+          ]),
+          createElementVNode("div", _hoisted_6, [
+            _ctx.accesses && _ctx.hasAccess(unref(route).params._id, "products", "edit", _ctx.accesses) ? (openBlock(), createBlock(_sfc_main$1, {
+              key: 0,
+              onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$router.push({
+                name: "ProductEdit",
+                params: {
+                  _id: product.value.owner.target,
+                  product: product.value._id
+                }
+              })),
+              class: "pos-absolute pos-t-regular pos-r-regular i-regular t-transp"
+            })) : createCommentVNode("", true),
+            createElementVNode("h2", _hoisted_7, toDisplayString(product.value.name), 1),
+            createVNode(_sfc_main$2, {
+              product: product.value,
+              size: "big",
+              class: "flex gap-thin flex-center pd-thin br-solid br-1px br-black-transp-10 w-max mn-b-medium"
+            }, null, 8, ["product"]),
+            product.value.description || product.value.specification ? (openBlock(), createElementBlock("div", _hoisted_8, [
+              createVNode(_sfc_main$3, {
+                selected: tabProduct.value,
+                "onUpdate:selected": _cache[1] || (_cache[1] = ($event) => tabProduct.value = $event),
+                tabs: [
+                  { name: "Description", value: "description" },
+                  { name: "Specifications", value: "specifications" }
+                ],
+                tabClass: "pd-thin bg-white radius-thin p-small uppercase t-medium",
+                class: "gap-micro bg-light pos-relative z-index-2 pd-thin br-solid br-b br-black-transp-10"
+              }, null, 8, ["selected"]),
+              createVNode(Transition, { name: "slide-fade" }, {
+                default: withCtx(() => [
+                  tabProduct.value === "description" ? (openBlock(), createElementBlock("div", _hoisted_9, [
+                    product.value.description && !product.value.localization < 1 && !_ctx.recommendation ? (openBlock(), createElementBlock("p", _hoisted_10, toDisplayString(product.value.description), 1)) : createCommentVNode("", true),
+                    product.value.localization && product.value.localization.length > 1 && !_ctx.recommendation ? (openBlock(), createElementBlock("p", _hoisted_11, toDisplayString(unref(t)("description")), 1)) : createCommentVNode("", true)
+                  ])) : (openBlock(), createElementBlock("div", _hoisted_12, [
+                    product.value.information.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(product.value.information, (information) => {
+                      return openBlock(), createElementBlock("div", _hoisted_13, [
+                        createElementVNode("p", _hoisted_14, toDisplayString(information.name), 1),
+                        createElementVNode("p", null, toDisplayString(information.value), 1)
+                      ]);
+                    }), 256)) : createCommentVNode("", true)
+                  ]))
+                ]),
+                _: 1
+              })
+            ])) : createCommentVNode("", true),
+            createElementVNode("div", _hoisted_15, [
+              product.value.quantity > 0 || product.value.listing === "rent" ? (openBlock(), createElementBlock("button", {
+                key: 0,
+                onClick: _cache[2] || (_cache[2] = ($event) => product.value.listing === "rent" ? openPopup() : addToCart(product.value)),
+                class: "cursor-pointer pd-small radius-big w-max mobile:w-100 bg-main button"
+              }, [
+                createElementVNode("div", _hoisted_16, [
+                  product.value.listing === "rent" ? (openBlock(), createBlock(_sfc_main$4, {
+                    key: 0,
+                    class: "i-semi"
+                  })) : createCommentVNode("", true),
+                  createElementVNode("span", null, toDisplayString(unref(t)("addtoorder")), 1)
+                ])
+              ])) : (openBlock(), createElementBlock("div", _hoisted_17, " Out of Stock "))
+            ]),
+            createVNode(_sfc_main$5, {
+              onClosePopup: closePopup,
+              isPopupOpen: isPopupVisible.value,
+              class: "radius-medium pd-medium bg-white o-hidden"
+            }, {
+              default: withCtx(() => [
+                _cache[3] || (_cache[3] = createElementVNode("h5", { class: "w-100 t-center mn-b-small" }, "Select Rent Period", -1)),
+                createVNode(_sfc_main$6, {
+                  date: unref(rentDate),
+                  allowRange: true,
+                  class: "bg-light radius-small"
+                }, null, 8, ["date"]),
+                _cache[4] || (_cache[4] = createElementVNode("p", { class: "flex flex-nowrap pd-t-small" }, [
+                  createElementVNode("span", { class: "w-100 t-transp" }, "$ 400 x 4 days"),
+                  createElementVNode("span", { class: "w-100 t-right" }, "$2000")
+                ], -1)),
+                _cache[5] || (_cache[5] = createElementVNode("p", { class: "flex flex-nowrap pd-t-small" }, [
+                  createElementVNode("span", { class: "w-100 t-transp" }, "Insurance Fee"),
+                  createElementVNode("span", { class: "w-100 t-right" }, "$200")
+                ], -1)),
+                _cache[6] || (_cache[6] = createElementVNode("p", { class: "flex flex-nowrap br-black-transp-10 br-solid br-b pd-b-small pd-t-small" }, [
+                  createElementVNode("span", { class: "w-100 t-transp" }, "VAT (20%)"),
+                  createElementVNode("span", { class: "w-100 t-right" }, "$300")
+                ], -1)),
+                _cache[7] || (_cache[7] = createElementVNode("p", { class: "p-big flex flex-nowrap pd-b-small pd-t-small" }, [
+                  createElementVNode("span", { class: "w-100 t-medium" }, "In Total"),
+                  createElementVNode("span", { class: "w-100 t-main t-medium t-right" }, "$2500")
+                ], -1)),
+                product.value.quantity > 0 || product.value.listing === "rent" ? (openBlock(), createBlock(_sfc_main$7, {
+                  key: 0,
+                  submit: () => addToCart(product.value),
+                  callback: () => closePopup(),
+                  disabled: product.value.listing !== "rent" && validateToCard(product.value),
+                  text: {
+                    success: "Added",
+                    error: "Error"
+                  },
+                  class: "h-3r w-100 bg-main button"
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("div", _hoisted_18, [
+                      product.value.listing === "rent" ? (openBlock(), createBlock(_sfc_main$4, {
+                        key: 0,
+                        class: "i-semi"
+                      })) : createCommentVNode("", true),
+                      createElementVNode("span", null, toDisplayString(unref(t)("addtoorder")), 1)
+                    ])
+                  ]),
+                  _: 1
+                }, 8, ["submit", "callback", "disabled"])) : createCommentVNode("", true)
+              ]),
+              _: 1
+            }, 8, ["isPopupOpen"])
+          ])
+        ]),
+        createElementVNode("div", _hoisted_19, [
+          _cache[8] || (_cache[8] = createElementVNode("h3", { class: "pd-medium pd-b-small" }, "Most Popular", -1)),
+          createVNode(_sfc_main$8)
         ])
       ]);
     };

package/dist/prometheus-framework/src/modules/products/components/pages/Product.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Product.vue.js","sources":["../../../../../../../src/modules/products/components/pages/Product.vue"],"sourcesContent":["<template>\n\t<div class=\"h-100 w-100 bg-white \">\n\t\t<!-- <Breadcrumbs class=\"bg-light radius-big pd-small\"/> -->\n\t\t<SectionProduct v-if=\"product\" :product=\"product\" :user=\"auth.state.user\" class=\"pos-relative\"/>\n\n\t\t<div class=\"h-max pos-relative\">\n\t\t  <h3 class=\"pd-medium pd-b-small\">Most Popular</h3>\n\t\t\t<PopularProducts />\n\t\t</div>\n\t</div>\n</template>\n\n<script setup=\"props\">\n\t// Import components\n\t// import Breadcrumbs from '@pf/src/components/Breadcrumbs/Breadcrumbs.vue'\n\timport PopularProducts \tfrom '@pf/src/modules/products/components/sections/PopularProducts.vue'\n\timport SectionProduct from '@pf/src/modules/products/components/sections/SectionProduct.vue'\n\t// Import libs\n\timport { computed, onMounted } from 'vue'\n\timport { useRoute,useRouter } from 'vue-router'\n\timport { useI18n }    from 'vue-i18n'\n\t\n  import * as auth from '@pf/src/modules/auth/views/store/auth';\n \timport * as products from '@pf/src/modules/products/store/products';\n  import * as categories from '@pf/src/modules/products/store/categories';\n\n\t// Accessing router and store\n\tconst route = useRoute()\n\tconst router = useRouter()\n\n\t\n\troute.meta.title.en = products.state.current.name\n\troute.meta.title.ru = products.state.current.name\n\n\t// Accessing state\n\tconst product = computed(() => products.state.current)\n\n\tconst text = {\n\t\tmessages: {\n\t\t}\n\t};\n\n\tonMounted(async ()=> {\n\t\tawait products.actions.read({_id: route.params.product});\n\n\t})\n\t\n\t// products.state.current.localization.forEach(localization => {\n  \t// if (localization) text.messages[localization.locale].description = localization.text\n\t// })\n\n  const { t } = useI18n(text)\n</script>\n\n<style lang=\"scss\">\n</style>\n"],"names":["products.state","products.actions"],"mappings":";;;;;;;;;;;;;AA2BC,UAAM,QAAQ,SAAU;AACT,cAAW;AAG1B,UAAM,KAAK,MAAM,KAAKA,MAAe,QAAQ;AAC7C,UAAM,KAAK,MAAM,KAAKA,MAAe,QAAQ;AAG7C,UAAM,UAAU,SAAS,MAAMA,MAAe,OAAO;AAErD,UAAM,OAAO;AAAA,MACZ,UAAU,CACT;AAAA,IACH;AAEC,cAAU,YAAW;AACpB,YAAMC,QAAiB,KAAK,EAAC,KAAK,MAAM,OAAO,QAAO,CAAC;AAAA,IAEzD,CAAE;AAMc,YAAQ,IAAI;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Product.vue.js","sources":["../../../../../../../src/modules/products/components/pages/Product.vue"],"sourcesContent":["<template>\n\t<div class=\"h-100 w-100 mobile:pd-thin pd-big bg-white \">\n\t\t<!-- <Breadcrumbs class=\"bg-light radius-big pd-small\"/> -->\n\t\t<div class=\"cols-2-1_2 w-100 gap-medium\">\n\t\t\n\t\t\t<div class=\"w-100 o-hidden  bg-light radius-big flex-nowrap flex-column flex pos-relative\">\n\t\t\t\t<div class=\"pd-semi w-100 bg-light radius-semi o-hidden\">\n\t\t\t\t\t<!-- PRODUCT IMAGE -->\n\t\t\t\t\t<Images360\n\t\t\t\t\t\tv-if=\"product && product.image3d\"\n\t\t\t\t\t\tclass=\"h-100 w-100\"\n\t\t\t\t\t\t:imagePath=\"`/assets/images/products/${product.image3d}`\"\n\t\t\t\t\t\t:imageCount=\"36\"\n\t\t\t\t\t/>\n\n\t\t\t\t\t<img loading=\"lazy\" \n\t\t\t\t\t\tv-if=\"images[0] && !product.image3d\"\n\t\t\t\t\t\tclass=\"h-max h-max-15r bg-white radius-semi w-100\"\n\t\t\t\t\t\tstyle=\"object-fit: contain;\"\n\t\t\t\t\t\t:src=\"(FILE_SERVER_URL || '') + images[0]\"\n\t\t\t\t\t/>\n\n\t\t\t\t\t<PlaceholderImage\n\t\t\t\t\t\tv-if=\"!images[0] && !product.image3d\"\n\t\t\t\t\t\tclass=\"h-max-20r h-100 w-100\"\n\t\t\t\t\t\tstyle=\"object-fit: cover;\"\n\t\t\t\t\t/>\n\n\t\t\t\t</div>\n\n\t\t\t\t<ImagesThumbnails\n\t\t\t\t\tv-if=\"images.length > 1\"\n\t\t\t\t\t:images=\"images\"\n\t\t\t\t\tclass=\"pd-semi pd-t-zero\"\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t<div class=\"pos-relative w-100 h-100 flex-column flex-h-center flex\">\n\n\t\t\t\t<IconEdit\n\t\t\t\t\tv-if=\"accesses && hasAccess(route.params._id, 'products', 'edit', accesses)\"\n\t\t\t\t\t@click=\"$router.push({\n\t\t\t\t\t\tname: 'ProductEdit', \n\t\t\t\t\t\tparams: {\n\t\t\t\t\t\t\t_id: product.owner.target,\n\t\t\t\t\t\t\tproduct: product._id\n\t\t\t\t\t\t}\n\t\t\t\t\t})\" \n\t\t\t\t\tclass=\"pos-absolute pos-t-regular pos-r-regular i-regular t-transp\"\n\t\t\t\t/>\n\n\t\t\t\t<!-- Name -->\n\t\t\t\t<h2 class=\"w-100 h1-product mn-b-small\">{{ product.name }}</h2>\n\n\t\t\t\t<Price :product=\"product\" size=\"big\" class=\"flex gap-thin flex-center pd-thin br-solid br-1px br-black-transp-10 w-max mn-b-medium\" />\n\n\t\t\t\t<!-- Price -->\n\t\t\t\t<div v-if=\"product.description || product.specification\" class=\"h-min-5r o-hidden radius-small bg-light mn-b-medium pos-relative\">\n\t\t\t\t\t<Tab \n\t\t\t\t\t\tv-model:selected=\"tabProduct\"\n\t\t\t\t\t\t:tabs=\"[\n\t\t\t\t\t\t\t{name: 'Description', value: 'description'},\n\t\t\t\t\t\t\t{name: 'Specifications', value: 'specifications'}\n\t\t\t\t\t\t]\"\n\t\t\t\t\t\ttabClass=\"pd-thin bg-white radius-thin p-small uppercase t-medium\"\n\t\t\t\t\t\tclass=\"gap-micro bg-light pos-relative z-index-2 pd-thin br-solid br-b br-black-transp-10\"\n\t\t\t\t\t/>\n\t\t\t\t\t<transition name=\"slide-fade\">\n\t\t\t\t\t\t<div v-if=\"tabProduct === 'description'\"  class=\" pd-medium\">\n\t\t\t\t\t\t\t<p v-if=\"product.description && !product.localization < 1 && !recommendation\" class=\"w-100 t-transp\">\n\t\t\t\t\t\t\t\t{{ product.description }}\n\t\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t\t<p v-if=\"product.localization && product.localization.length > 1 && !recommendation\" class=\"w-100 t-transp\">\n\t\t\t\t\t\t\t\t{{ t('description') }}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div \n\t\t\t\t\t\t\tv-else\n\t\t\t\t\t\t\tclass=\"cols-2  pd-medium w-100 gap-small\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div \n\t\t\t\t\t\t\t\tv-if=\"product.information.length > 0\" \n\t\t\t\t\t\t\t\tv-for=\"information in product.information\" \n\t\t\t\t\t\t\t\tclass=\"w-100 pd-small radius-small bg-white product-information\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<p class=\"t-demi\">{{ information.name }}</p>\n\t\t\t\t\t\t\t\t<p>{{ information.value }}</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</transition>\n\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<!-- Modifications -->\n\t\t\t\t<!-- <div v-if=\"product.modifications.length > 0\" class=\"flex-nojustify  flex\">\n\t\t\t\t\t<SelectElement v-if=\"sizes2.length > 0\" :elements=\"sizes2\" :selected=\"product.selectedSize\" class=\"mn-r-medium\" />\n\t\t\t\t</div> -->\n\n\t\t\t\t<!-- Actions -->\n\t\t\t\t<div class=\"w-max-33r\">\n\t\t\t\t  <button\n\t\t\t\t    v-if=\"product.quantity > 0 || product.listing === 'rent'\"\n\t\t\t\t    @click=\"product.listing === 'rent' ? openPopup() : addToCart(product)\" \n\t\t\t\t    class=\"cursor-pointer pd-small radius-big w-max mobile:w-100 bg-main button\"\n\t\t\t\t  > \n\t\t\t\t    <div class=\"gap-thin flex flex-center flex-nowrap\">\n\t\t\t\t      <IconShopcartAdd v-if=\"product.listing === 'rent'\" class=\"i-semi\" />\n\t\t\t\t      <span>{{ t('addtoorder') }}</span>\n\t\t\t\t    </div>\n\t\t\t\t  </button>\n\n\t\t\t\t  <div \n\t\t\t\t    v-else \n\t\t\t\t    class=\"flex-center flex uppercase radius-big t-black w-max pd-small t-medium bg-grey h-3r w-100 mn-r-smallbutton\"\n\t\t\t\t  >\n\t\t\t\t    Out of Stock\n\t\t\t\t  </div>\n\t\t\t\t</div>\n\t\t\t\t<!-- Shopcart Adding Popup -->\n\t\t\t\t<Popup @close-popup=\"closePopup\" :isPopupOpen=\"isPopupVisible\" class=\"radius-medium pd-medium bg-white o-hidden\">\n\t\t      <h5 class=\"w-100 t-center mn-b-small\">Select Rent Period</h5>\n\t\t       <Calendar\n\t\t      \t:date=\"rentDate\"\n\t\t      \t:allowRange=\"true\"\n\t\t      \tclass=\"bg-light radius-small\"\n\t\t      />\n\n\t\t      <p class=\"flex flex-nowrap pd-t-small\">\n\t\t      \t<span class=\"w-100 t-transp\">$ 400 x 4 days</span>\n\t\t      \t<span class=\"w-100 t-right\">$2000</span>\n\t\t      </p>\n\t\t      <p class=\"flex flex-nowrap pd-t-small\">\n\t\t      \t<span class=\"w-100 t-transp\">Insurance Fee</span>\n\t\t      \t<span class=\"w-100 t-right\">$200</span>\n\t\t      </p>\n\t\t      <p class=\"flex flex-nowrap br-black-transp-10 br-solid br-b pd-b-small pd-t-small\">\n\t\t      \t<span class=\"w-100 t-transp\">VAT (20%)</span>\n\t\t      \t<span class=\"w-100 t-right\">$300</span>\n\t\t      </p>\n\t\t     \n\t\t     \t<p class=\"p-big flex flex-nowrap pd-b-small pd-t-small\">\n\t\t      \t<span class=\"w-100 t-medium \">In Total</span>\n\t\t      \t<span class=\"w-100 t-main t-medium t-right\">$2500</span>\n\t      \t</p>\n\n\t      \t<Button\n\t\t\t\t    v-if=\"product.quantity > 0 || product.listing === 'rent'\"\n\t\t\t\t    :submit=\"() => addToCart(product)\" \n\t\t\t\t    :callback=\"() => closePopup()\"\n\t\t\t\t    :disabled=\"product.listing !== 'rent' && validateToCard(product)\"\n\t\t\t\t    :text=\"{\n\t\t\t\t      success: 'Added',\n\t\t\t\t      error: 'Error'\n\t\t\t\t    }\"\n\t\t\t\t    class=\"h-3r w-100 bg-main button\"\n\t\t\t\t  > \n\t\t\t\t    <div class=\"gap-thin flex flex-center flex-nowrap\">\n\t\t\t\t      <IconShopcartAdd v-if=\"product.listing === 'rent'\" class=\"i-semi\" />\n\t\t\t\t      <span>{{ t('addtoorder') }}</span>\n\t\t\t\t    </div>\n\t\t\t\t  </Button>\n\t\t    </Popup>\n\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"h-max pos-relative\">\n\t\t  <h3 class=\"pd-medium pd-b-small\">Most Popular</h3>\n\t\t\t<PopularProducts />\n\t\t</div>\n\t</div>\n</template>\n\n<script setup=\"props\">\n\t// Import components\n\t// import Breadcrumbs from '@pf/src/components/Breadcrumbs/Breadcrumbs.vue'\n\timport Button from '@pf/src/components/Button/Button.vue'\n\timport Popup from '@pf/src/components/Popup/Popup.vue'\n\timport Tab from '@pf/src/components/Tab/Tab.vue'\n\timport Calendar from '@pf/src/components/DatePicker/Calendar.vue'\n\n\timport IconEdit from '@pf/src/modules/icons/navigation/IconEdit.vue'\n\timport IconShopcartAdd from '@pf/src/modules/icons/actions/IconShopcartAdd.vue'\n\n\timport PlaceholderImage from '@pf/src/modules/icons/placeholders/PlaceholderImage.vue'\n\n\timport Images360 \tfrom '@pf/src/modules/products/components/blocks/Images360.vue'\n\timport ImagesThumbnails from \"@pf/src/modules/products/components/blocks/ImagesThumbnails.vue\";\n\n\timport Price from '@pf/src/modules/products/components/elements/Price.vue'\n\n\timport PopularProducts \tfrom '@pf/src/modules/products/components/sections/PopularProducts.vue'\n\timport SectionProduct from '@pf/src/modules/products/components/sections/SectionProduct.vue'\n\t// Import libs\n\timport { computed, ref, onMounted } from 'vue'\n\timport { useRoute,useRouter } from 'vue-router'\n\timport { useI18n }    from 'vue-i18n'\n\t\n  import * as auth from '@pf/src/modules/auth/views/store/auth';\n \timport * as products from '@pf/src/modules/products/store/products';\n  import * as categories from '@pf/src/modules/products/store/categories';\n\n\timport * as shopcart from '@pf/src/modules/orders/store/shopcart';\n\n\t// Accessing router and store\n\tconst route = useRoute()\n\tconst router = useRouter()\n\t\n\troute.meta.title.en = products.state.current.name\n\troute.meta.title.ru = products.state.current.name\n\n\t// Accessing state\n\tconst product = computed(() => products.state.current)\n\tconst images = computed(() => products.state.current.images)\n\n\tlet rentDate = ref({\n\t\tstart: null,\n\t\tend: null\n\t})\n\n\n\tconst tabProduct = ref('description')\n\n\tconst text = {\n\t  en: {\n\t  \taddtoorder: 'Add to Cart',\n\t    fastorder: 'Fast Order'\n\t  },\n\t  ru: {\n\t  \taddtoorder: 'Добавить в корзину',\n\t    fastorder: 'Быстрый заказ'\n\t  }\n\t}\n\n  const { t } = useI18n({messages: text})\n\n\tonMounted(async ()=> {\n\t\tawait products.actions.read({_id: route.params.product});\n\t})\n\n\t// Methods\n\tfunction validateToCard(product) {\n\t  if (product.quantity > 0) {\n\t    return false\n\t  }\n\t  return true\n\t}\n\n\tconst isPopupVisible = ref(false);\n\n\tconst openPopup = () => {\n\t  isPopupVisible.value = true;\n\t};\n\n\tconst closePopup = () => {\n\t  isPopupVisible.value = false;\n\t};\n\n\tasync function addToCart(product) {\n    try {\n      if (shopcart.state.organization !== product.owner.target) {\n        shopcart.state.organization = product.owner.target\n        shopcart.state.positions = []\n      }\n      \n      await shopcart.actions.addProductToCart(product, product.owner.target, rentDate)\n\n      return true\n    } catch (error) {\n      console.error('Ошибка при добавлении товара в корзину:', error)\n      throw error\n    }\n\t}\n</script>\n\n<style lang=\"scss\">\n</style>\n"],"names":["products.state","products.actions","product","shopcart.state","shopcart.actions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8MC,UAAM,QAAQ,SAAU;AACT,cAAW;AAE1B,UAAM,KAAK,MAAM,KAAKA,MAAe,QAAQ;AAC7C,UAAM,KAAK,MAAM,KAAKA,MAAe,QAAQ;AAG7C,UAAM,UAAU,SAAS,MAAMA,MAAe,OAAO;AACrD,UAAM,SAAS,SAAS,MAAMA,MAAe,QAAQ,MAAM;AAE3D,QAAI,WAAW,IAAI;AAAA,MAClB,OAAO;AAAA,MACP,KAAK;AAAA,IACP,CAAE;AAGD,UAAM,aAAa,IAAI,aAAa;AAEpC,UAAM,OAAO;AAAA,MACX,IAAI;AAAA,QACH,YAAY;AAAA,QACX,WAAW;AAAA,MACZ;AAAA,MACD,IAAI;AAAA,QACH,YAAY;AAAA,QACX,WAAW;AAAA,MACZ;AAAA,IACF;AAEA,UAAM,EAAE,EAAC,IAAK,QAAQ,EAAC,UAAU,KAAI,CAAC;AAEvC,cAAU,YAAW;AACpB,YAAMC,QAAiB,KAAK,EAAC,KAAK,MAAM,OAAO,QAAO,CAAC;AAAA,IACzD,CAAE;AAGD,aAAS,eAAeC,UAAS;AAC/B,UAAIA,SAAQ,WAAW,GAAG;AACxB,eAAO;AAAA,MACR;AACD,aAAO;AAAA,IACR;AAED,UAAM,iBAAiB,IAAI,KAAK;AAEhC,UAAM,YAAY,MAAM;AACtB,qBAAe,QAAQ;AAAA,IAC1B;AAEC,UAAM,aAAa,MAAM;AACvB,qBAAe,QAAQ;AAAA,IAC1B;AAEC,mBAAe,UAAUA,UAAS;AAC/B,UAAI;AACF,YAAIC,QAAe,iBAAiBD,SAAQ,MAAM,QAAQ;AACxDC,kBAAe,eAAeD,SAAQ,MAAM;AAC5CC,kBAAe,YAAY,CAAE;AAAA,QAC9B;AAED,cAAMC,UAAiB,iBAAiBF,UAASA,SAAQ,MAAM,QAAQ,QAAQ;AAE/E,eAAO;AAAA,MACR,SAAQ,OAAO;AACd,gBAAQ,MAAM,2CAA2C,KAAK;AAC9D,cAAM;AAAA,MACP;AAAA,IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}