@ozdao/martyrs 0.2.604 → 0.2.605

package/dist/martyrs/src/modules/orders/components/pages/OrderBackoffice.vue.js

@@ -1,79 +1,108 @@
-import { ref, onMounted, computed, createElementBlock, createCommentVNode, openBlock, createVNode, createElementVNode, createTextVNode, toDisplayString, Fragment, renderList, unref, normalizeClass, withCtx, createBlock } from "vue";
+import { getCurrentInstance, ref, onMounted, computed, resolveComponent, createElementBlock, createCommentVNode, openBlock, createVNode, createElementVNode, createTextVNode, toDisplayString, Fragment, renderList, unref, normalizeClass, withCtx, createBlock, withModifiers, resolveDynamicComponent } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import Button from "../../../../components/Button/Button.vue2.js";
 import Select from "../../../../components/Select/Select.vue.js";
-import _sfc_main$1 from "../../../../components/Popup/Popup.vue.js";
+import _sfc_main$7 from "../../../../components/Popup/Popup.vue.js";
+import _sfc_main$a from "../../../../components/Feed/Feed.vue.js";
 import IconTime from "../../../icons/entities/IconTime.vue.js";
-import _sfc_main$2 from "../blocks/CardOrderItem.vue.js";
-import _sfc_main$4 from "../../../organizations/components/blocks/CardOrganization.vue.js";
-import _sfc_main$5 from "../../../chats/components/pages/ChatPage.vue.js";
-import _sfc_main$3 from "../elements/PriceTotal.vue.js";
-/* empty css                                         */
+import { calcRentTotalPrice } from "../../utils/rent-price.js";
+import _sfc_main$8 from "../blocks/CardOrderItem.vue.js";
+import _sfc_main$b from "../../../organizations/components/blocks/CardOrganization.vue.js";
+import _sfc_main$d from "../../../core/views/components/blocks/CardUser.vue.js";
+import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
+import _sfc_main$6 from "../../../icons/entities/IconPhone.vue.js";
+import _sfc_main$5 from "../../../icons/socials/whatsapp.vue.js";
+import _sfc_main$4 from "../../../icons/socials/telegram.vue.js";
+import _sfc_main$3 from "../../../icons/socials/line.vue.js";
+import _sfc_main$2 from "../../../icons/socials/instagram.vue.js";
+import _sfc_main$1 from "../../../icons/socials/facebook.vue.js";
+import _sfc_main$c from "../../../chats/components/pages/ChatPage.vue.js";
+import _sfc_main$9 from "../elements/PriceTotal.vue.js";
+/* empty css                                          */
 import { useStore } from "../../../core/views/store/core.store.js";
 import { state } from "../../../auth/views/store/auth.js";
 import { actions, state as state$1, getters, mutations } from "../../store/orders.js";
+import { actions as actions$2 } from "../../../products/store/products.js";
 import { actions as actions$1 } from "../../../organizations/store/organizations.js";
+import variantsStore from "../../../products/store/variants.store.js";
 import { useI18n } from "vue-i18n";
 import { useGlobalMixins } from "../../../core/views/mixins/mixins.js";
 /* empty css                     */
-import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
 const _hoisted_1 = {
   key: 0,
   class: "pd-thin bg-white"
 };
 const _hoisted_2 = {
   key: 0,
-  class: "mn-b-thin pos-relative w-100 bg-main radius-medium pd-medium"
+  class: "mn-b-thin pos-relative w-100 bg-main radius-medium pd-small"
 };
 const _hoisted_3 = { class: "mn-b-small flex-nowrap flex" };
 const _hoisted_4 = { class: "fw-medium p-regular" };
-const _hoisted_5 = { class: "p-small t-transp" };
+const _hoisted_5 = { class: "p-small opacity-50" };
 const _hoisted_6 = { class: "flex-nowrap flex gap-thin pos-relative" };
 const _hoisted_7 = { class: "flex gap-thin flex-column mn-b-thin" };
-const _hoisted_8 = {
+const _hoisted_8 = { class: "bg-light h-max-100 mn-b-thin o-scroll pd-medium radius-big" };
+const _hoisted_9 = { class: "gap-thin flex flex-column" };
+const _hoisted_10 = ["onClick"];
+const _hoisted_11 = {
+  key: 0,
+  class: "aspect-1x1 h-3r radius-small o-hidden"
+};
+const _hoisted_12 = ["src"];
+const _hoisted_13 = { class: "fw-medium" };
+const _hoisted_14 = {
+  key: 0,
+  class: "t-small opacity-50"
+};
+const _hoisted_15 = { class: "mn-l-auto" };
+const _hoisted_16 = {
   key: 1,
-  class: "gap-thin cols-2 mobile:cols-1"
+  class: "gap-thin cols-2 tablet:cols-1 mobile:cols-1"
 };
-const _hoisted_9 = { class: "w-100" };
-const _hoisted_10 = { class: "mn-b-thin bg-light w-100 o-hidden radius-medium" };
-const _hoisted_11 = { class: "pd-small flex-nowrap flex" };
-const _hoisted_12 = { class: "mn-r-auto" };
-const _hoisted_13 = { class: "lh-[0.75] h2 d-block mn-b-small" };
-const _hoisted_14 = { class: "pd-thin radius-extra bg-black t-white w-max" };
-const _hoisted_15 = {
+const _hoisted_17 = { class: "w-100" };
+const _hoisted_18 = { class: "mn-b-thin bg-light w-100 o-hidden radius-medium" };
+const _hoisted_19 = { class: "pd-small flex-nowrap flex" };
+const _hoisted_20 = { class: "mn-r-auto" };
+const _hoisted_21 = { class: "lh-[0.75] h2 d-block mn-b-small" };
+const _hoisted_22 = { class: "pd-thin radius-extra bg-black t-white w-max" };
+const _hoisted_23 = {
   key: 0,
   class: "pd-small flex flex-nowrap flex-v-center br-t-1px br-black-transp-10"
 };
-const _hoisted_16 = { class: "w-100 t-right" };
-const _hoisted_17 = { class: "pd-small flex flex-nowrap flex-v-center br-t-1px br-black-transp-10" };
-const _hoisted_18 = { class: "w-100 t-right" };
-const _hoisted_19 = {
+const _hoisted_24 = { class: "w-100 t-right" };
+const _hoisted_25 = { class: "pd-small flex flex-nowrap flex-v-center br-t-1px br-black-transp-10" };
+const _hoisted_26 = { class: "w-100 t-right" };
+const _hoisted_27 = {
   key: 1,
   class: "pos-relative radius-thin mn-t-zero mn-thin bg-fifth-transp-10 pd-small"
 };
-const _hoisted_20 = { class: "pd-small flex flex-nowrap flex-v-center br-t-1px br-black-transp-10" };
-const _hoisted_21 = { class: "w-100 t-right" };
-const _hoisted_22 = { class: "pd-small flex flex-nowrap flex-v-center br-t-1px br-black-transp-10" };
-const _hoisted_23 = { class: "w-max t-right" };
-const _hoisted_24 = {
+const _hoisted_28 = { class: "pd-small flex flex-nowrap flex-v-center br-t-1px br-black-transp-10" };
+const _hoisted_29 = { class: "w-100 t-right" };
+const _hoisted_30 = { class: "pd-small flex flex-nowrap flex-v-center br-t-1px br-black-transp-10" };
+const _hoisted_31 = { class: "w-max t-right" };
+const _hoisted_32 = {
   key: 1,
-  class: "o-y-scroll bg-light pd-thin mn-b-thin pd-thin radius-medium flex-nowrap flex"
+  class: "o-y-scroll scroll-hide bg-light pd-thin mn-b-thin pd-thin radius-medium flex-nowrap flex"
 };
-const _hoisted_25 = { class: "flex-child-default mn-r-small w-max flex-v-center gap-thin flex-nowrap flex pd-thin radius-small bg-light-transp-20" };
-const _hoisted_26 = { class: "fw-medium mn-r-auto" };
-const _hoisted_27 = { class: "bg-light radius-medium pd-medium mn-r-bold w-100" };
-const _hoisted_28 = {
+const _hoisted_33 = { class: "flex-child-default mn-r-small w-max flex-v-center gap-thin flex-nowrap flex pd-thin radius-small bg-light-transp-20" };
+const _hoisted_34 = { class: "fw-medium mn-r-auto" };
+const _hoisted_35 = { class: "bg-light radius-medium pd-small mn-r-bold w-100" };
+const _hoisted_36 = {
   key: 2,
-  class: "t-transp"
+  class: "opacity-50"
 };
-const _hoisted_29 = { class: "bg-light radius-medium pd-medium w-100" };
-const _hoisted_30 = { class: "flex gap-thin flex-column mn-b-thin" };
+const _hoisted_37 = { class: "w-100" };
+const _hoisted_38 = { class: "bg-light radius-medium pd-small mn-b-thin w-100" };
+const _hoisted_39 = ["href", "target"];
+const _hoisted_40 = { class: "bg-light radius-medium pd-small w-100" };
+const _hoisted_41 = { class: "flex gap-thin flex-column mn-b-thin" };
 const _sfc_main = {
   __name: "OrderBackoffice",
   setup(__props) {
     const store = useStore();
+    const { proxy } = getCurrentInstance();
     const { locale } = useI18n();
-    const { returnCurrency } = useGlobalMixins();
+    const { returnCurrency, isPhone, isTablet, formatPhone, formatDate, formatPrice } = useGlobalMixins();
     const router = useRouter();
     const route = useRoute();
     const order = ref(null);
@@ -106,6 +135,68 @@ const _sfc_main = {
     function closePaymentPopup() {
       isOpenPaymentPopup.value = false;
     }
+    const isAddProductPopupOpen = ref(false);
+    const isAddVariantsPopupOpen = ref(false);
+    const selectedProduct = ref(null);
+    function openAddProductPopup() {
+      isAddProductPopupOpen.value = true;
+    }
+    function closeAddProductPopup() {
+      isAddProductPopupOpen.value = false;
+    }
+    function closeAddVariantsPopup() {
+      isAddVariantsPopupOpen.value = false;
+      selectedProduct.value = null;
+    }
+    function selectProduct(product) {
+      selectedProduct.value = product;
+      closeAddProductPopup();
+      if (product.variants && product.variants.length === 1) {
+        addVariantToOrder(product.variants[0]);
+        return;
+      }
+      isAddVariantsPopupOpen.value = true;
+    }
+    function formatProductName(product, variant) {
+      if (!variant || product.variants?.length === 1 && !variant.attributes?.length)
+        return product.name;
+      const attrs = variant.attributes?.map((a) => a.value).filter(Boolean);
+      return attrs?.length ? `${product.name} / ${attrs.join(" / ")}` : `${product.name} / ${variant.name}`;
+    }
+    async function addVariantToOrder(variant) {
+      try {
+        let selectedDates = null;
+        if (selectedProduct.value.listing === "rent") {
+          const rentPeriod = selectedProduct.value.rentPeriod || "day";
+          const enableTime = ["hour", "4hours", "flat"].includes(rentPeriod);
+          selectedDates = await proxy.$dateSelector(
+            selectedProduct.value._id,
+            variant._id,
+            1,
+            variant.price || selectedProduct.value.price,
+            { enableTime, periodType: rentPeriod }
+          );
+          if (!selectedDates) return;
+        }
+        const position = {
+          _id: selectedProduct.value._id,
+          images: variant.images?.length > 0 ? variant.images : selectedProduct.value.images,
+          name: formatProductName(selectedProduct.value, variant),
+          listing: selectedProduct.value.listing,
+          price: variant.price || selectedProduct.value.price,
+          quantity: 1,
+          unit: variant.unit || selectedProduct.value.unit,
+          date: selectedDates,
+          rentPeriod: selectedProduct.value.rentPeriod || "day",
+          variant: variant._id,
+          org_id: order.value.owner.target._id
+        };
+        order.value.positions.push(position);
+        closeAddVariantsPopup();
+      } catch (error) {
+        console.error("Error adding variant to order:", error);
+      }
+    }
     onMounted(async () => {
       order.value = await actions.read({ _id: route.params.order });
       order.value = order.value[0];
@@ -121,25 +212,101 @@ const _sfc_main = {
       const config = store.core.state.options?.orders?.delivery_formula || {};
       return getters.getDeliveryPrice(type, distance, config);
     });
+    function statusLabel(value) {
+      const found = statuses.find((s) => s.value === value);
+      return found ? found.label : value;
+    }
+    function paymentStatusClass(status) {
+      switch (status) {
+        case "paid":
+          return "bg-green t-white";
+        case "refunded":
+          return "bg-second t-white";
+        default:
+          return "bg-red t-white";
+      }
+    }
+    const socialUrlMap = {
+      whatsapp: (v) => `https://wa.me/${v.replace(/[^0-9]/g, "")}`,
+      telegram: (v) => `https://t.me/${v.replace("@", "")}`,
+      line: (v) => `https://line.me/ti/p/${v}`,
+      instagram: (v) => `https://instagram.com/${v.replace("@", "")}`,
+      facebook: (v) => `https://facebook.com/${v}`
+    };
+    const socialIcons = {
+      whatsapp: _sfc_main$5,
+      telegram: _sfc_main$4,
+      line: _sfc_main$3,
+      instagram: _sfc_main$2,
+      facebook: _sfc_main$1
+    };
+    function getSocialUrl(key, value) {
+      return socialUrlMap[key] ? socialUrlMap[key](value) : value;
+    }
+    const customerContact = computed(() => {
+      const customer = order.value?.customer?.target;
+      if (!customer) return null;
+      const socials = customer.socials || customer.data?.socials || {};
+      for (const key of ["whatsapp", "telegram", "line"]) {
+        if (socials[key])
+          return {
+            type: key,
+            value: socials[key],
+            url: getSocialUrl(key, socials[key]),
+            icon: socialIcons[key]
+          };
+      }
+      const phone = customer.phone || customer.data?.phone;
+      if (phone)
+        return {
+          type: "phone",
+          value: formatPhone(phone),
+          url: `tel:${phone}`,
+          icon: _sfc_main$6
+        };
+      return null;
+    });
+    const customerLink = computed(() => {
+      if (!order.value?.customer?.target?._id) return "";
+      const ctx = route.meta.context;
+      const customerId = order.value.customer.target._id;
+      if (ctx === "backoffice")
+        return `/backoffice/customers?customerId=${customerId}`;
+      if (ctx === "organization")
+        return `/organizations/${route.params._id}/customers?customerId=${customerId}`;
+      return `/customers?customerId=${customerId}`;
+    });
     let cartTotalPrice = computed(() => {
-      return Number(order.value?.positions.reduce((total, product) => {
-        if (product.listing === "rent") {
-          const start = new Date(product.date.start);
-          const end = new Date(product.date.end);
-          const diffTime = Math.abs(end - start);
-          return total + product.price * (Math.ceil(diffTime / (1e3 * 60 * 60 * 24)) + 1);
-        } else {
-          return total + product.price * (product.quantity || 1);
-        }
-      }, 0));
+      return Number(
+        order.value?.positions.reduce((total, product) => {
+          if (product.totalPrice) {
+            return total + product.totalPrice;
+          }
+          if (product.listing === "rent" && product.date?.start && product.date?.end) {
+            return total + calcRentTotalPrice(
+              product.price,
+              product.quantity,
+              product.date.start,
+              product.date.end,
+              product.rentPeriod || "day"
+            );
+          } else {
+            return total + product.price * (product.quantity || 1);
+          }
+        }, 0)
+      );
     });
     computed(() => {
-      return Number(order.value?.positions.reduce((total, product) => {
-        return total + product.quantity;
-      }, 0));
+      return Number(
+        order.value?.positions.reduce((total, product) => {
+          return total + product.quantity;
+        }, 0)
+      );
     });
     function getNextStatus(currentStatus) {
-      const currentIndex = statuses.findIndex((status) => status.value === currentStatus);
+      const currentIndex = statuses.findIndex(
+        (status) => status.value === currentStatus
+      );
       if (currentIndex !== -1 && currentIndex + 1 < statuses.length) {
         return statuses[currentIndex + 1];
       }
@@ -169,11 +336,12 @@ const _sfc_main = {
       closeStatusPopup();
     }
     return (_ctx, _cache) => {
+      const _component_router_link = resolveComponent("router-link");
       return order.value && orderOrganization.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
         order.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
           createElementVNode("div", _hoisted_3, [
             createElementVNode("p", _hoisted_4, [
-              _cache[4] || (_cache[4] = createTextVNode(" Order No: ")),
+              _cache[5] || (_cache[5] = createTextVNode(" Order No: ")),
               createElementVNode("span", _hoisted_5, "#" + toDisplayString(order.value._id), 1)
             ])
           ]),
@@ -186,23 +354,27 @@ const _sfc_main = {
                 createElementVNode("div", {
                   class: normalizeClass([
                     "bg-white br-anim br-glow radius-extra h-1r w-100",
-                    { "br-glow-anim": isActiveStatus(index) },
-                    { "t-transp": !isActiveStatus(index) },
-                    { "blink": order.value.status === status.value && getNextStatus(order.value.status) }
+                    ({ "br-glow-anim": isActiveStatus(index) }, { "opacity-50": !isActiveStatus(index) }, {
+                      blink: order.value.status === status.value && getNextStatus(order.value.status)
+                    })
                   ])
                 }, null, 2),
                 createElementVNode("div", {
-                  class: normalizeClass([{ "t-transp": !isActiveStatus(index) }, "mn-t-thin p-small fw-medium uppercase"])
-                }, toDisplayString(status.value), 3)
+                  class: normalizeClass([{ "opacity-50": !isActiveStatus(index) }, "mn-t-thin p-small fw-medium uppercase"])
+                }, toDisplayString(status.label), 3)
               ]);
             }), 128))
           ])
         ])) : createCommentVNode("", true),
-        createVNode(_sfc_main$1, {
+        createVNode(_sfc_main$7, {
           title: "Payment Status",
           onClosePopup: closePaymentPopup,
           isPopupOpen: isOpenPaymentPopup.value,
-          class: "bg-light w-min-25r w-max-25r radius-medium pd-big"
+          align: unref(isPhone)() || unref(isTablet)() ? "bottom center" : "center center",
+          class: normalizeClass([
+            "bg-light radius-medium pd-small",
+            unref(isPhone)() || unref(isTablet)() ? "w-100 radius-zero radius-tr-medium radius-tl-medium" : "w-min-30r w-max-30r"
+          ])
         }, {
           default: withCtx(() => [
             createVNode(Select, {
@@ -237,24 +409,33 @@ const _sfc_main = {
               submit: changePaymentStatus,
               class: "t-white w-100 bg-second"
             }, {
-              default: withCtx(() => _cache[5] || (_cache[5] = [
+              default: withCtx(() => _cache[6] || (_cache[6] = [
                 createElementVNode("span", null, "Change Status", -1)
               ])),
               _: 1
             })
           ]),
           _: 1
-        }, 8, ["isPopupOpen"]),
-        createVNode(_sfc_main$1, {
+        }, 8, ["isPopupOpen", "align", "class"]),
+        createVNode(_sfc_main$7, {
           title: "Change order status",
           onClosePopup: closeStatusPopup,
           isPopupOpen: isOpeStatusPopup.value,
-          class: "bg-light w-min-30r w-max-30r radius-medium pd-big"
+          align: unref(isPhone)() || unref(isTablet)() ? "bottom center" : "center center",
+          class: normalizeClass([
+            "bg-light radius-medium pd-small",
+            unref(isPhone)() || unref(isTablet)() ? "w-100 radius-zero radius-tr-medium radius-tl-medium" : "w-min-30r w-max-30r"
+          ])
         }, {
           default: withCtx(() => [
+            !order.value.status_history || order.value.status_history.length <= 1 ? (openBlock(), createElementBlock("button", {
+              key: 0,
+              onClick: openAddProductPopup,
+              class: "w-100 mn-b-thin pd-small radius-small bg-white t-black fw-medium cursor-pointer hover:bg-main"
+            }, " + Add Product ")) : createCommentVNode("", true),
             createElementVNode("ul", _hoisted_7, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(order.value.positions, (product, index) => {
-                return openBlock(), createBlock(_sfc_main$2, {
+                return openBlock(), createBlock(_sfc_main$8, {
                   key: `${product._id}_${product.variant || "no-variant"}_${index}`,
                   editable: !order.value.status_history || order.value.status_history.length <= 1,
                   productId: product._id,
@@ -265,16 +446,32 @@ const _sfc_main = {
                   unit: product.unit,
                   dates: product.date,
                   listing: product.listing,
+                  rentPeriod: product.rentPeriod || "day",
                   price: product.price,
-                  increase: () => mutations.incrementItemQuantity(order.value, product._id, product.variant),
-                  decrease: () => mutations.decrementItemQuantity(order.value, product._id, product.variant),
-                  remove: () => mutations.removeProduct(order.value, product._id, product.variant),
-                  onUpdateRentDates: _cache[2] || (_cache[2] = (productId, variantId, dates) => _ctx.shopcart.actions.updateRentDates({ positions: order.value.positions, productId, variantId, dates })),
+                  increase: () => mutations.incrementItemQuantity(
+                    order.value,
+                    product._id,
+                    product.variant
+                  ),
+                  decrease: () => mutations.decrementItemQuantity(
+                    order.value,
+                    product._id,
+                    product.variant
+                  ),
+                  remove: () => mutations.removeProduct(
+                    order.value,
+                    product._id,
+                    product.variant
+                  ),
+                  onUpdateRentDates: _cache[2] || (_cache[2] = (productId, variantId, dates) => {
+                    const item = order.value.positions.find((p) => p._id === productId && p.variant === variantId);
+                    if (item) item.date = dates;
+                  }),
                   class: "bg-white radius-small pd-small"
-                }, null, 8, ["editable", "productId", "variantId", "images", "name", "quantity", "unit", "dates", "listing", "price", "increase", "decrease", "remove"]);
+                }, null, 8, ["editable", "productId", "variantId", "images", "name", "quantity", "unit", "dates", "listing", "rentPeriod", "price", "increase", "decrease", "remove"]);
               }), 128))
             ]),
-            createVNode(_sfc_main$3, {
+            createVNode(_sfc_main$9, {
               totalPrice: unref(cartTotalPrice),
               currency: unref(returnCurrency)(),
               showFees: unref(store).core.state.options?.orders?.showFees,
@@ -293,10 +490,92 @@ const _sfc_main = {
             })
           ]),
           _: 1
-        }, 8, ["isPopupOpen"]),
-        order.value ? (openBlock(), createElementBlock("div", _hoisted_8, [
-          createElementVNode("div", _hoisted_9, [
-            orderOrganization.value[0] ? (openBlock(), createBlock(_sfc_main$4, {
+        }, 8, ["isPopupOpen", "align", "class"]),
+        createVNode(_sfc_main$7, {
+          onClosePopup: closeAddProductPopup,
+          isPopupOpen: isAddProductPopupOpen.value,
+          align: unref(isPhone)() || unref(isTablet)() ? "bottom center" : "center center",
+          class: normalizeClass([
+            "bg-white flex flex-column radius-big pd-medium pos-relative",
+            unref(isPhone)() || unref(isTablet)() ? "w-100 radius-zero radius-tr-medium radius-tl-medium h-max-80" : "w-min-30r w-max-30r"
+          ])
+        }, {
+          default: withCtx(() => [
+            _cache[7] || (_cache[7] = createElementVNode("h3", { class: "mn-b-small" }, "Add to order", -1)),
+            createElementVNode("div", _hoisted_8, [
+              createVNode(_sfc_main$a, {
+                showLoadMore: false,
+                search: { placeholder: "Search products...", class: "bg-white mn-b-thin" },
+                states: { empty: { title: "No Products Found", description: "Currently, there are no such products available." }, skeleton: { hide: true } },
+                store: { read: (options) => actions$2.read(options), state: null },
+                options: { owner: order.value?.owner.target._id }
+              }, {
+                default: withCtx(({ items }) => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(items, (product, index) => {
+                    return openBlock(), createBlock(_sfc_main$8, {
+                      key: `${product._id}_${index}`,
+                      editable: false,
+                      productId: product._id,
+                      images: product.images,
+                      name: product.name,
+                      onClick: () => selectProduct(product),
+                      class: "bg-white pd-thin radius-medium w-100 mn-b-thin cursor-pointer"
+                    }, null, 8, ["productId", "images", "name", "onClick"]);
+                  }), 128))
+                ]),
+                _: 1
+              }, 8, ["store", "options"])
+            ])
+          ]),
+          _: 1
+        }, 8, ["isPopupOpen", "align", "class"]),
+        createVNode(_sfc_main$7, {
+          title: "Select variant",
+          onClosePopup: closeAddVariantsPopup,
+          isPopupOpen: isAddVariantsPopupOpen.value,
+          align: unref(isPhone)() || unref(isTablet)() ? "bottom center" : "center center",
+          class: normalizeClass([
+            "bg-white w-100 radius-medium pd-medium",
+            unref(isPhone)() || unref(isTablet)() ? "radius-zero radius-tr-medium radius-tl-medium" : "w-max-30r"
+          ])
+        }, {
+          default: withCtx(() => [
+            createVNode(_sfc_main$a, {
+              store: unref(variantsStore),
+              options: { product: selectedProduct.value?._id },
+              states: { empty: { title: "No variants", description: "Create your first variant" } }
+            }, {
+              default: withCtx(({ items }) => [
+                createElementVNode("div", _hoisted_9, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(items, (variant, index) => {
+                    return openBlock(), createElementBlock("div", {
+                      key: index,
+                      onClick: ($event) => addVariantToOrder(variant),
+                      class: "w-100 cursor-pointer hover:scale-[1.05] bg-light pd-small radius-small flex-v-center flex-nowrap flex gap-thin"
+                    }, [
+                      variant.images && variant.images.length ? (openBlock(), createElementBlock("div", _hoisted_11, [
+                        createElementVNode("img", {
+                          src: (_ctx.FILE_SERVER_URL || "") + variant.images[0],
+                          class: "w-100 h-100 object-fit-cover"
+                        }, null, 8, _hoisted_12)
+                      ])) : createCommentVNode("", true),
+                      createElementVNode("div", null, [
+                        createElementVNode("p", _hoisted_13, toDisplayString(variant.name || "Default variant"), 1),
+                        variant.attributes && variant.attributes.length ? (openBlock(), createElementBlock("p", _hoisted_14, toDisplayString(variant.attributes.map((attr) => `${attr.name}: ${attr.value}`).join(", ")), 1)) : createCommentVNode("", true)
+                      ]),
+                      createElementVNode("p", _hoisted_15, toDisplayString(unref(formatPrice)(variant.price || variant.cost)), 1)
+                    ], 8, _hoisted_10);
+                  }), 128))
+                ])
+              ]),
+              _: 1
+            }, 8, ["store", "options"])
+          ]),
+          _: 1
+        }, 8, ["isPopupOpen", "align", "class"]),
+        order.value ? (openBlock(), createElementBlock("div", _hoisted_16, [
+          createElementVNode("div", _hoisted_17, [
+            orderOrganization.value[0] ? (openBlock(), createBlock(_sfc_main$b, {
               key: 0,
               organization: orderOrganization.value[0],
               showRating: true,
@@ -304,105 +583,141 @@ const _sfc_main = {
               showProducts: false,
               class: "bg-light mn-b-thin w-100 o-hidden radius-medium pd-small"
             }, null, 8, ["organization"])) : createCommentVNode("", true),
-            createElementVNode("div", _hoisted_10, [
-              createElementVNode("div", _hoisted_11, [
-                createElementVNode("div", _hoisted_12, [
-                  _cache[6] || (_cache[6] = createElementVNode("span", { class: "d-block fw-medium p-regular mn-b-thin" }, "Order is", -1)),
-                  createElementVNode("span", _hoisted_13, toDisplayString(order.value.status), 1),
-                  createElementVNode("p", _hoisted_14, toDisplayString(_ctx.formatDate(order.value.updatedAt, { language: unref(locale) })), 1)
+            createElementVNode("div", _hoisted_18, [
+              createElementVNode("div", _hoisted_19, [
+                createElementVNode("div", _hoisted_20, [
+                  _cache[8] || (_cache[8] = createElementVNode("span", { class: "d-block fw-medium p-regular mn-b-thin" }, " Order is ", -1)),
+                  createElementVNode("span", _hoisted_21, toDisplayString(statusLabel(order.value.status)), 1),
+                  createElementVNode("p", _hoisted_22, toDisplayString(unref(formatDate)(order.value.updatedAt, { language: unref(locale) })), 1)
                 ])
               ]),
-              order.value.customer.target?.number ? (openBlock(), createElementBlock("div", _hoisted_15, [
-                _cache[7] || (_cache[7] = createElementVNode("p", { class: "w-100 fw-medium p-regular" }, " Phone ", -1)),
-                createElementVNode("p", _hoisted_16, toDisplayString(order.value.customer.target?.number || "Not specified"), 1)
+              order.value.customer.target?.number ? (openBlock(), createElementBlock("div", _hoisted_23, [
+                _cache[9] || (_cache[9] = createElementVNode("p", { class: "w-100 fw-medium p-regular" }, "Phone", -1)),
+                createElementVNode("p", _hoisted_24, toDisplayString(unref(formatPhone)(order.value.customer.target?.number) || "Not specified"), 1)
               ])) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_17, [
-                _cache[8] || (_cache[8] = createElementVNode("p", { class: "fw-medium p-regular" }, " Address ", -1)),
-                createElementVNode("p", _hoisted_18, toDisplayString(order.value.delivery.address || order.value.delivery.spot[0]?.profile.name + (order.value.delivery.spot[0]?.address ? ", " + order.value.delivery.spot[0].address : "") || "Not specified"), 1)
+              createElementVNode("div", _hoisted_25, [
+                _cache[10] || (_cache[10] = createElementVNode("p", { class: "fw-medium p-regular" }, "Address", -1)),
+                createElementVNode("p", _hoisted_26, toDisplayString(order.value.delivery.address || order.value.delivery.spot[0]?.profile.name + (order.value.delivery.spot[0]?.address ? ", " + order.value.delivery.spot[0].address : "") || "Not specified"), 1)
               ]),
-              order.value.comment ? (openBlock(), createElementBlock("div", _hoisted_19, [
-                _cache[9] || (_cache[9] = createElementVNode("p", { class: "mn-b-thin t-transp uppercase p-small fw-medium" }, "Comment", -1)),
+              order.value.comment ? (openBlock(), createElementBlock("div", _hoisted_27, [
+                _cache[11] || (_cache[11] = createElementVNode("p", { class: "mn-b-thin opacity-50 uppercase p-small fw-medium" }, " Comment ", -1)),
                 createElementVNode("p", null, toDisplayString(order.value.comment), 1)
               ])) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_20, [
-                _cache[10] || (_cache[10] = createElementVNode("p", { class: "fw-medium p-regular" }, " Delivery ", -1)),
-                createElementVNode("p", _hoisted_21, toDisplayString(order.value.delivery.type ? order.value.delivery.type : "Not specified"), 1)
+              createElementVNode("div", _hoisted_28, [
+                _cache[12] || (_cache[12] = createElementVNode("p", { class: "fw-medium p-regular" }, "Delivery", -1)),
+                createElementVNode("p", _hoisted_29, toDisplayString(order.value.delivery.type ? order.value.delivery.type : "Not specified"), 1)
               ]),
-              createElementVNode("div", _hoisted_22, [
-                _cache[11] || (_cache[11] = createElementVNode("p", { class: "mn-r-auto fw-medium p-regular" }, " Payment ", -1)),
-                createElementVNode("p", _hoisted_23, toDisplayString(order.value.payment.type ? order.value.payment.type : "Not specified"), 1),
+              createElementVNode("div", _hoisted_30, [
+                _cache[13] || (_cache[13] = createElementVNode("p", { class: "mn-r-auto fw-medium p-regular" }, "Payment", -1)),
+                createElementVNode("p", _hoisted_31, toDisplayString(order.value.payment.type ? order.value.payment.type : "Not specified"), 1),
                 createElementVNode("p", {
                   onClick: _cache[3] || (_cache[3] = ($event) => unref(route).meta.context !== "user" && unref(route).meta.context !== "root" ? openPaymentPopup() : console.log("Context:", unref(route).meta.context)),
-                  class: "w-max pd-thin radius-small bg-second t-white mn-l-thin cursor-pointer hover:bg-black t-right"
-                }, toDisplayString(order.value.payment.status ? order.value.payment.status : "Unpaid"), 1)
+                  class: normalizeClass(["w-max pd-thin radius-small mn-l-thin cursor-pointer hover:bg-black t-right capitalize", paymentStatusClass(order.value.payment.status)])
+                }, toDisplayString(order.value.payment.status ? order.value.payment.status : "Unpaid"), 3)
               ])
             ]),
-            unref(route).meta.context !== "user" && unref(route).meta.context !== "root" ? (openBlock(), createElementBlock("div", _hoisted_24, [
-              createElementVNode("div", _hoisted_25, [
+            unref(route).meta.context !== "user" && unref(route).meta.context !== "root" ? (openBlock(), createElementBlock("div", _hoisted_32, [
+              createElementVNode("div", _hoisted_33, [
                 createVNode(IconTime, {
-                  class: "i-medium t-transp",
+                  class: "i-medium opacity-50",
                   fill: "rgb(var(--black)"
                 }),
-                createElementVNode("p", _hoisted_26, [
-                  _cache[12] || (_cache[12] = createElementVNode("span", { class: "p-small t-transp" }, "Estimated Reaction", -1)),
-                  _cache[13] || (_cache[13] = createElementVNode("br", null, null, -1)),
-                  createTextVNode(toDisplayString(_ctx.formatDate(order.value.deadline, { language: unref(locale) })), 1)
+                createElementVNode("p", _hoisted_34, [
+                  _cache[14] || (_cache[14] = createElementVNode("span", { class: "p-small opacity-50" }, "Estimated Reaction", -1)),
+                  _cache[15] || (_cache[15] = createElementVNode("br", null, null, -1)),
+                  createTextVNode(" " + toDisplayString(unref(formatDate)(order.value.deadline, { language: unref(locale) })), 1)
                 ])
               ]),
               getNextStatus(order.value.status) ? (openBlock(), createElementBlock("button", {
                 key: 0,
                 onClick: openStatusPopup,
-                class: "flex-child-default mn-l-auto bg-black t-white button"
+                class: "flex-child-default mn-l-auto bg-black t-white button radius-small"
               }, " Mark as " + toDisplayString(getNextStatus(order.value.status).label), 1)) : createCommentVNode("", true)
             ])) : createCommentVNode("", true),
-            createElementVNode("div", _hoisted_27, [
-              _cache[14] || (_cache[14] = createElementVNode("h3", { class: "mn-b-small" }, "Chat With Us", -1)),
-              createVNode(_sfc_main$5, {
+            createElementVNode("div", _hoisted_35, [
+              _cache[16] || (_cache[16] = createElementVNode("h3", { class: "mn-b-small" }, "Chat With Us", -1)),
+              createVNode(_sfc_main$c, {
                 username: ["Order", "UserOrder"].includes(unref(route).name) ? order.value.user?.name || "User" : "Support",
                 user: state.user._id,
                 chatID: unref(route).params.order,
-                class: "radius-semi bs-black bg-light o-hidden"
+                class: "radius-small bs-black bg-light o-hidden"
               }, null, 8, ["username", "user", "chatID"])
             ]),
-            _ctx.payment && _ctx.payment.Status === "CONFIRMED" ? (openBlock(), createElementBlock("span", _hoisted_28, "Paid")) : createCommentVNode("", true)
+            _ctx.payment && _ctx.payment.Status === "CONFIRMED" ? (openBlock(), createElementBlock("span", _hoisted_36, " Paid ")) : createCommentVNode("", true)
           ]),
-          createElementVNode("div", _hoisted_29, [
-            _cache[15] || (_cache[15] = createElementVNode("h3", { class: "mn-b-small" }, "Order Summary", -1)),
-            createElementVNode("ul", _hoisted_30, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(order.value.positions, (product, index) => {
-                return openBlock(), createBlock(_sfc_main$2, {
-                  key: `${product._id}_${product.variant || "no-variant"}_${index}`,
-                  editable: false,
-                  productId: product._id,
-                  variantId: product.variant,
-                  images: product.images,
-                  name: product.name,
-                  quantity: product.quantity,
-                  unit: product.unit,
-                  dates: product.date,
-                  listing: product.listing,
-                  price: product.price,
-                  class: "bg-white radius-small pd-small"
-                }, null, 8, ["productId", "variantId", "images", "name", "quantity", "unit", "dates", "listing", "price"]);
-              }), 128))
+          createElementVNode("div", _hoisted_37, [
+            createElementVNode("div", _hoisted_38, [
+              _cache[17] || (_cache[17] = createElementVNode("h3", { class: "mn-b-small" }, "Customer", -1)),
+              unref(route).meta.context !== "user" && unref(route).meta.context !== "root" && order.value.customer?.target ? (openBlock(), createBlock(_component_router_link, {
+                key: 0,
+                to: customerLink.value,
+                class: "d-block w-100 pd-small bg-white radius-small"
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$d, {
+                    user: order.value.customer.target,
+                    photo: order.value.customer.target.photo,
+                    name: order.value.customer.target.profile?.name || "No name",
+                    phone: unref(formatPhone)(order.value.customer.target.number || order.value.customer.target.phone)
+                  }, {
+                    actions: withCtx(() => [
+                      customerContact.value ? (openBlock(), createElementBlock("a", {
+                        key: 0,
+                        href: customerContact.value.url,
+                        target: customerContact.value.type !== "phone" ? "_blank" : null,
+                        onClick: _cache[4] || (_cache[4] = withModifiers(() => {
+                        }, ["stop"])),
+                        class: "d-inline-flex flex-shrink-0 pd-micro pd-l-thin pd-r-thin radius-extra bg-second p-small fw-medium t-white flex-v-center gap-micro"
+                      }, [
+                        (openBlock(), createBlock(resolveDynamicComponent(customerContact.value.icon), { class: "i-small" })),
+                        createTextVNode(" " + toDisplayString(customerContact.value.type === "phone" ? customerContact.value.value : customerContact.value.type), 1)
+                      ], 8, _hoisted_39)) : createCommentVNode("", true)
+                    ]),
+                    _: 1
+                  }, 8, ["user", "photo", "name", "phone"])
+                ]),
+                _: 1
+              }, 8, ["to"])) : createCommentVNode("", true)
             ]),
-            createVNode(_sfc_main$3, {
-              totalPrice: unref(cartTotalPrice),
-              deliveryRate: deliveryCost.value,
-              currency: unref(returnCurrency)(),
-              showFees: unref(store).core.state.options?.orders?.showFees,
-              feesRate: unref(store).core.state.options?.orders?.feesRate || 0,
-              showVat: unref(store).core.state.options?.orders?.showVat,
-              vatRate: unref(store).core.state.options?.orders?.vatRate || 0,
-              showDeliveryFee: unref(store).core.state.options?.orders.showDeliveryFee
-            }, null, 8, ["totalPrice", "deliveryRate", "currency", "showFees", "feesRate", "showVat", "vatRate", "showDeliveryFee"])
+            createElementVNode("div", _hoisted_40, [
+              _cache[18] || (_cache[18] = createElementVNode("h3", { class: "mn-b-small" }, "Order Summary", -1)),
+              createElementVNode("ul", _hoisted_41, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(order.value.positions, (product, index) => {
+                  return openBlock(), createBlock(_sfc_main$8, {
+                    key: `${product._id}_${product.variant || "no-variant"}_${index}`,
+                    editable: false,
+                    productId: product._id,
+                    variantId: product.variant,
+                    images: product.images,
+                    name: product.name,
+                    quantity: product.quantity,
+                    unit: product.unit,
+                    dates: product.date,
+                    listing: product.listing,
+                    rentPeriod: product.rentPeriod || "day",
+                    price: product.price,
+                    class: "bg-white radius-small pd-small"
+                  }, null, 8, ["productId", "variantId", "images", "name", "quantity", "unit", "dates", "listing", "rentPeriod", "price"]);
+                }), 128))
+              ]),
+              createVNode(_sfc_main$9, {
+                totalPrice: unref(cartTotalPrice),
+                deliveryRate: deliveryCost.value,
+                currency: unref(returnCurrency)(),
+                showFees: unref(store).core.state.options?.orders?.showFees,
+                feesRate: unref(store).core.state.options?.orders?.feesRate || 0,
+                showVat: unref(store).core.state.options?.orders?.showVat,
+                vatRate: unref(store).core.state.options?.orders?.vatRate || 0,
+                showDeliveryFee: unref(store).core.state.options?.orders.showDeliveryFee
+              }, null, 8, ["totalPrice", "deliveryRate", "currency", "showFees", "feesRate", "showVat", "vatRate", "showDeliveryFee"])
+            ])
           ])
         ])) : createCommentVNode("", true)
       ])) : createCommentVNode("", true);
     };
   }
 };
-const OrderBackoffice = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f82cb957"]]);
+const OrderBackoffice = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a2518a28"]]);
 export {
   OrderBackoffice as default
 };