@ozdao/martyrs 0.2.604 → 0.2.605

package/src/modules/orders/components/pages/OrderBackoffice.vue

@@ -1,101 +1,155 @@
 <template>
-	<div v-if="order && orderOrganization" class="pd-thin bg-white"> 
-
-	  <div v-if="order" class="mn-b-thin pos-relative w-100 bg-main radius-medium pd-medium">
-	  	<div class="mn-b-small flex-nowrap flex">
-		  	<p class="fw-medium p-regular">
-		     	Order No: <span class="p-small t-transp">#{{order._id}}</span>
-		    </p>
-			</div>
-
-	  	<div class="flex-nowrap flex gap-thin pos-relative ">
-		    <div v-for="(status, index) in statuses" :key="index" class="w-20">
-		      <div
-		      	class="bg-white br-anim br-glow radius-extra h-1r w-100"
-		        :class="
-					    { 'br-glow-anim': isActiveStatus(index) },
-					    { 't-transp': !isActiveStatus(index) },
-					    { 'blink': order.status === status.value && getNextStatus(order.status) }
-					  "
-		      />
-		      <div 
-		      	:class="{ 't-transp': !isActiveStatus(index) }"
-					  class="mn-t-thin p-small fw-medium uppercase">{{ status.value }}</div>
-		    	</div>
-			  </div>
-	  </div>
-
-  	<Popup 
-      title="Payment Status" 
-      @close-popup="closePaymentPopup" 
+  <div v-if="order && orderOrganization" class="pd-thin bg-white">
+    <div
+      v-if="order"
+      class="mn-b-thin pos-relative w-100 bg-main radius-medium pd-small"
+    >
+      <div class="mn-b-small flex-nowrap flex">
+        <p class="fw-medium p-regular">
+          Order No:
+          <span class="p-small opacity-50">#{{ order._id }}</span>
+        </p>
+      </div>
+
+      <div class="flex-nowrap flex gap-thin pos-relative">
+        <div v-for="(status, index) in statuses" :key="index" class="w-20">
+          <div
+            class="bg-white br-anim br-glow radius-extra h-1r w-100"
+            :class="
+              ({ 'br-glow-anim': isActiveStatus(index) },
+              { 'opacity-50': !isActiveStatus(index) },
+              {
+                blink:
+                  order.status === status.value && getNextStatus(order.status),
+              })
+            "
+          />
+          <div
+            :class="{ 'opacity-50': !isActiveStatus(index) }"
+            class="mn-t-thin p-small fw-medium uppercase"
+          >
+            {{ status.label }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <Popup
+      title="Payment Status"
+      @close-popup="closePaymentPopup"
       :isPopupOpen="isOpenPaymentPopup"
-      class="bg-light w-min-25r w-max-25r radius-medium pd-big"
+      :align="isPhone() || isTablet() ? 'bottom center' : 'center center'"
+      class="bg-light radius-medium pd-small"
+      :class="
+        isPhone() || isTablet()
+          ? 'w-100 radius-zero radius-tr-medium radius-tl-medium'
+          : 'w-min-30r w-max-30r'
+      "
     >
-    	<Select 
+      <Select
         v-model:select="selectedPayments.type"
         :property="'value'"
         label="Type"
         :options="[
-          {name: 'Cash',  value: 'cash'}, 
-          {name: 'Card', value: 'card'}, 
-          {name: 'Bank Transfer', value: 'bank'},
+          { name: 'Cash', value: 'cash' },
+          { name: 'Card', value: 'card' },
+          { name: 'Bank Transfer', value: 'bank' },
         ]"
-        placeholder="Select type of payment" 
+        placeholder="Select type of payment"
         size="small"
         class="bg-white mn-b-thin pd-regular radius-small w-100"
       />
 
-      <Select 
+      <Select
         v-model:select="selectedPayments.status"
         :property="'value'"
         label="Status"
         :options="[
-          {name: 'Unpaid',  value: 'unpaid'}, 
-          {name: 'Paid', value: 'paid'}, 
-          {name: 'Refunded', value: 'refunded'},
+          { name: 'Unpaid', value: 'unpaid' },
+          { name: 'Paid', value: 'paid' },
+          { name: 'Refunded', value: 'refunded' },
         ]"
-        placeholder="Select status of payment" 
+        placeholder="Select status of payment"
         size="small"
         class="bg-white mn-b-small pd-regular radius-small w-100"
       />
 
+      <Button :submit="changePaymentStatus" class="t-white w-100 bg-second">
+        <span>Change Status</span>
+      </Button>
+    </Popup>
 
-      <Button :submit="changePaymentStatus"  class="t-white w-100 bg-second">
-				<span>Change Status</span>
-			</Button>
-	 	</Popup>
-
-	  <Popup 
-      title="Change order status" 
-      @close-popup="closeStatusPopup" 
+    <Popup
+      title="Change order status"
+      @close-popup="closeStatusPopup"
       :isPopupOpen="isOpeStatusPopup"
-      class="bg-light w-min-30r w-max-30r radius-medium pd-big"
+      :align="isPhone() || isTablet() ? 'bottom center' : 'center center'"
+      class="bg-light radius-medium pd-small"
+      :class="
+        isPhone() || isTablet()
+          ? 'w-100 radius-zero radius-tr-medium radius-tl-medium'
+          : 'w-min-30r w-max-30r'
+      "
     >
-
-			<!-- Добавить выбор примерного времени -->
-
-    	<ul class="flex gap-thin flex-column mn-b-thin">
-  			<CardOrderItem
-  				v-for="(product, index) in order.positions" 
-  				:key="`${product._id}_${product.variant || 'no-variant'}_${index}`"
-  				:editable="!order.status_history || order.status_history.length <= 1" 
-  				: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"
-  				:increase="() => orders.mutations.incrementItemQuantity(order, product._id, product.variant)"
-	        :decrease="() => orders.mutations.decrementItemQuantity(order, product._id, product.variant)"
-	        :remove="() => orders.mutations.removeProduct(order, product._id, product.variant)"
-	        @updateRentDates="(productId, variantId, dates) => shopcart.actions.updateRentDates({ positions: order.positions, productId, variantId, dates })"
-  				class="bg-white radius-small pd-small"
-  			/>
+      <!-- Добавить выбор примерного времени -->
+
+      <button
+        v-if="!order.status_history || order.status_history.length <= 1"
+        @click="openAddProductPopup"
+        class="w-100 mn-b-thin pd-small radius-small bg-white t-black fw-medium cursor-pointer hover:bg-main"
+      >
+        + Add Product
+      </button>
+
+      <ul class="flex gap-thin flex-column mn-b-thin">
+        <CardOrderItem
+          v-for="(product, index) in order.positions"
+          :key="`${product._id}_${product.variant || 'no-variant'}_${index}`"
+          :editable="!order.status_history || order.status_history.length <= 1"
+          :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"
+          :increase="
+            () =>
+              orders.mutations.incrementItemQuantity(
+                order,
+                product._id,
+                product.variant,
+              )
+          "
+          :decrease="
+            () =>
+              orders.mutations.decrementItemQuantity(
+                order,
+                product._id,
+                product.variant,
+              )
+          "
+          :remove="
+            () =>
+              orders.mutations.removeProduct(
+                order,
+                product._id,
+                product.variant,
+              )
+          "
+          @updateRentDates="
+            (productId, variantId, dates) => {
+              const item = order.positions.find(p => p._id === productId && p.variant === variantId);
+              if (item) item.date = dates;
+            }
+          "
+          class="bg-white radius-small pd-small"
+        />
       </ul>
-      
+
       <PriceTotal
         :totalPrice="cartTotalPrice"
         :currency="returnCurrency()"
@@ -105,125 +159,235 @@
         :vatRate="store.core.state.options?.orders?.vatRate || 0"
       />
 
-    	<Button :submit="setNextStatus"  class="t-white w-100 bg-second">
-				<span>{{'Confirm Changing to ' + (getNextStatus(order.status)).label}}</span>
-			</Button>
-	 	</Popup>
-
-
-	  
-	  <div v-if="order" class="gap-thin cols-2 mobile:cols-1">
-
-	    <div class="w-100">
-
-
-		    <CardOrganization 
-		    	v-if="orderOrganization[0]"
-		      :organization="orderOrganization[0]"
-		      :showRating="true"
-		      :showFollowers="false"
-		      :showProducts="false"
-		      class="bg-light mn-b-thin w-100 o-hidden radius-medium pd-small "
-		    />
-
+      <Button :submit="setNextStatus" class="t-white w-100 bg-second">
+        <span>
+          {{ "Confirm Changing to " + getNextStatus(order.status).label }}
+        </span>
+      </Button>
+    </Popup>
+
+    <!-- Add product popup -->
+    <Popup
+      @close-popup="closeAddProductPopup"
+      :isPopupOpen="isAddProductPopupOpen"
+      :align="isPhone() || isTablet() ? 'bottom center' : 'center center'"
+      class="bg-white flex flex-column radius-big pd-medium pos-relative"
+      :class="
+        isPhone() || isTablet()
+          ? 'w-100 radius-zero radius-tr-medium radius-tl-medium h-max-80'
+          : 'w-min-30r w-max-30r'
+      "
+    >
+      <h3 class="mn-b-small">Add to order</h3>
+      <div class="bg-light h-max-100 mn-b-thin o-scroll pd-medium radius-big">
+        <Feed
+          :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) => products.actions.read(options), state: null }"
+          :options="{ owner: order?.owner.target._id }"
+          v-slot="{ items }"
+        >
+          <CardOrderItem
+            v-for="(product, index) in items"
+            :key="`${product._id}_${index}`"
+            :editable="false"
+            :productId="product._id"
+            :images="product.images"
+            :name="product.name"
+            @click="() => selectProduct(product)"
+            class="bg-white pd-thin radius-medium w-100 mn-b-thin cursor-pointer"
+          />
+        </Feed>
+      </div>
+    </Popup>
+
+    <!-- Select variant popup -->
+    <Popup
+      title="Select variant"
+      @close-popup="closeAddVariantsPopup"
+      :isPopupOpen="isAddVariantsPopupOpen"
+      :align="isPhone() || isTablet() ? 'bottom center' : 'center center'"
+      class="bg-white w-100 radius-medium pd-medium"
+      :class="
+        isPhone() || isTablet()
+          ? 'radius-zero radius-tr-medium radius-tl-medium'
+          : 'w-max-30r'
+      "
+    >
+      <Feed
+        :store="variants"
+        :options="{ product: selectedProduct?._id }"
+        :states="{ empty: { title: 'No variants', description: 'Create your first variant' } }"
+        v-slot="{ items }"
+      >
+        <div class="gap-thin flex flex-column">
+          <div
+            v-for="(variant, index) in items"
+            :key="index"
+            @click="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"
+          >
+            <div v-if="variant.images && variant.images.length" class="aspect-1x1 h-3r radius-small o-hidden">
+              <img :src="(FILE_SERVER_URL || '') + variant.images[0]" class="w-100 h-100 object-fit-cover" />
+            </div>
+            <div>
+              <p class="fw-medium">{{ variant.name || 'Default variant' }}</p>
+              <p v-if="variant.attributes && variant.attributes.length" class="t-small opacity-50">
+                {{ variant.attributes.map(attr => `${attr.name}: ${attr.value}`).join(', ') }}
+              </p>
+            </div>
+            <p class="mn-l-auto">{{ formatPrice(variant.price || variant.cost) }}</p>
+          </div>
+        </div>
+      </Feed>
+    </Popup>
+
+    <div v-if="order" class="gap-thin cols-2 tablet:cols-1 mobile:cols-1">
+      <div class="w-100">
+        <CardOrganization
+          v-if="orderOrganization[0]"
+          :organization="orderOrganization[0]"
+          :showRating="true"
+          :showFollowers="false"
+          :showProducts="false"
+          class="bg-light mn-b-thin w-100 o-hidden radius-medium pd-small"
+        />
 
-		    <div 
-		    	class="mn-b-thin bg-light w-100 o-hidden radius-medium "
-		    >
-		    	<div class="pd-small flex-nowrap flex">
-			    	<div class="mn-r-auto">
-				    	<span class="d-block fw-medium p-regular mn-b-thin">Order is</span>
-					    <span class=" lh-[0.75] h2 d-block mn-b-small">{{order.status}}</span>
-					    <p class="pd-thin radius-extra bg-black t-white w-max">{{formatDate(order.updatedAt, {language: locale })}}</p>
-					  </div>
-					 <!--  <div class="t-right">
+        <div class="mn-b-thin bg-light w-100 o-hidden radius-medium">
+          <div class="pd-small flex-nowrap flex">
+            <div class="mn-r-auto">
+              <span class="d-block fw-medium p-regular mn-b-thin">
+                Order is
+              </span>
+              <span class="lh-[0.75] h2 d-block mn-b-small">
+                {{ statusLabel(order.status) }}
+              </span>
+              <p class="pd-thin radius-extra bg-black t-white w-max">
+                {{ formatDate(order.updatedAt, { language: locale }) }}
+              </p>
+            </div>
+            <!--  <div class="t-right">
 					  	Cancel order<br>
 					  	Exchange item
 					  	<hr class="mn-b-thin mn-t-thin">
 					  	For Delivery Queries Contact Us
 					  	
 					  </div> -->
-					</div>
-
-					<div v-if="order.customer.target?.number" class="pd-small flex flex-nowrap flex-v-center br-t-1px br-black-transp-10">
-			    	<p class="w-100 fw-medium p-regular">
-			      	Phone
-			      </p>
-
-			      <p class="w-100 t-right ">
-			      	{{order.customer.target?.number || 'Not specified'}}
-			      </p>
-			    </div>
-
-			    <div class="pd-small   flex flex-nowrap flex-v-center br-t-1px br-black-transp-10">
-			    	<p class="fw-medium p-regular">
-			      	Address
-			      </p>
-
-			      <p class="w-100 t-right">
-							{{order.delivery.address || (order.delivery.spot[0]?.profile.name + (order.delivery.spot[0]?.address ? ', ' + order.delivery.spot[0].address : '')) || 'Not specified'}}
-			      </p>
-
-
-
-			    </div>
-
-
-			    <div v-if="order.comment" class="pos-relative radius-thin mn-t-zero mn-thin bg-fifth-transp-10 pd-small">
-			      <p class="mn-b-thin t-transp uppercase p-small fw-medium">Comment</p>
-			      <p>{{order.comment}}</p>
-			    </div>
-
-			    <div class="pd-small  flex flex-nowrap flex-v-center br-t-1px br-black-transp-10">
-			    	<p class="fw-medium p-regular">
-			      	Delivery
-			      </p>
-
-			      <p class="w-100 t-right ">
-			        {{order.delivery.type ? order.delivery.type : 'Not specified'}} 
-			      </p>
-			    </div>
-
-			     <div class="pd-small  flex flex-nowrap flex-v-center br-t-1px br-black-transp-10">
-			    	<p class="mn-r-auto fw-medium p-regular">
-			      	Payment
-			      </p>
-
-
-			      <p class="w-max t-right">
-			        {{order.payment.type ? order.payment.type : 'Not specified'}} 
-			      </p>
-
-			      <p @click="route.meta.context !== 'user' && route.meta.context !== 'root' ? openPaymentPopup() : console.log('Context:', route.meta.context)" class="w-max pd-thin radius-small bg-second t-white mn-l-thin cursor-pointer hover:bg-black t-right">
-			        {{order.payment.status ? order.payment.status : 'Unpaid'}} 
-			      </p>
-			    </div>
-
-
-				</div>
-
-				<div v-if="route.meta.context !== 'user' && route.meta.context !== 'root'" class="o-y-scroll bg-light pd-thin mn-b-thin pd-thin radius-medium flex-nowrap flex">
-		  		<div 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">
-		  			<IconTime class="i-medium t-transp" fill="rgb(var(--black)" />
-		        <p class="fw-medium mn-r-auto"><span class="p-small t-transp">Estimated Reaction</span><br>{{formatDate(order.deadline, { language: locale })}}</p>
-			  	</div>
-			  	<button v-if="getNextStatus(order.status)" @click="openStatusPopup" class="flex-child-default  mn-l-auto bg-black t-white button">  
-				    Mark as {{ (getNextStatus(order.status)).label }}  
-				  </button>
-		  	</div>
-
-			<div class="bg-light radius-medium pd-medium  mn-r-bold  w-100">
-		    <h3 class="mn-b-small">Chat With Us</h3>
-
-		    <ChatPage
-		    	:username="['Order', 'UserOrder'].includes(route.name) ? (order.user?.name || 'User') : 'Support'"
-		    	:user="auth.state.user._id"
-		    	:chatID="route.params.order"
-		    	class="radius-semi bs-black bg-light o-hidden"
-		    />
-
-	    </div>
-	     	<!-- <StatusHistory 
+          </div>
+
+          <div
+            v-if="order.customer.target?.number"
+            class="pd-small flex flex-nowrap flex-v-center br-t-1px br-black-transp-10"
+          >
+            <p class="w-100 fw-medium p-regular">Phone</p>
+
+            <p class="w-100 t-right">
+              {{
+                formatPhone(order.customer.target?.number) || "Not specified"
+              }}
+            </p>
+          </div>
+
+          <div
+            class="pd-small flex flex-nowrap flex-v-center br-t-1px br-black-transp-10"
+          >
+            <p class="fw-medium p-regular">Address</p>
+
+            <p class="w-100 t-right">
+              {{
+                order.delivery.address ||
+                order.delivery.spot[0]?.profile.name +
+                  (order.delivery.spot[0]?.address
+                    ? ", " + order.delivery.spot[0].address
+                    : "") ||
+                "Not specified"
+              }}
+            </p>
+          </div>
+
+          <div
+            v-if="order.comment"
+            class="pos-relative radius-thin mn-t-zero mn-thin bg-fifth-transp-10 pd-small"
+          >
+            <p class="mn-b-thin opacity-50 uppercase p-small fw-medium">
+              Comment
+            </p>
+            <p>{{ order.comment }}</p>
+          </div>
+
+          <div
+            class="pd-small flex flex-nowrap flex-v-center br-t-1px br-black-transp-10"
+          >
+            <p class="fw-medium p-regular">Delivery</p>
+
+            <p class="w-100 t-right">
+              {{ order.delivery.type ? order.delivery.type : "Not specified" }}
+            </p>
+          </div>
+
+          <div
+            class="pd-small flex flex-nowrap flex-v-center br-t-1px br-black-transp-10"
+          >
+            <p class="mn-r-auto fw-medium p-regular">Payment</p>
+
+            <p class="w-max t-right">
+              {{ order.payment.type ? order.payment.type : "Not specified" }}
+            </p>
+
+            <p
+              @click="
+                route.meta.context !== 'user' && route.meta.context !== 'root'
+                  ? openPaymentPopup()
+                  : console.log('Context:', route.meta.context)
+              "
+              class="w-max pd-thin radius-small mn-l-thin cursor-pointer hover:bg-black t-right capitalize"
+              :class="paymentStatusClass(order.payment.status)"
+            >
+              {{ order.payment.status ? order.payment.status : "Unpaid" }}
+            </p>
+          </div>
+        </div>
+
+        <div
+          v-if="route.meta.context !== 'user' && route.meta.context !== 'root'"
+          class="o-y-scroll scroll-hide bg-light pd-thin mn-b-thin pd-thin radius-medium flex-nowrap flex"
+        >
+          <div
+            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"
+          >
+            <IconTime class="i-medium opacity-50" fill="rgb(var(--black)" />
+            <p class="fw-medium mn-r-auto">
+              <span class="p-small opacity-50">Estimated Reaction</span>
+              <br />
+              {{ formatDate(order.deadline, { language: locale }) }}
+            </p>
+          </div>
+
+          <button
+            v-if="getNextStatus(order.status)"
+            @click="openStatusPopup"
+            class="flex-child-default mn-l-auto bg-black t-white button radius-small"
+          >
+            Mark as {{ getNextStatus(order.status).label }}
+          </button>
+        </div>
+
+        <div class="bg-light radius-medium pd-small mn-r-bold w-100">
+          <h3 class="mn-b-small">Chat With Us</h3>
+
+          <ChatPage
+            :username="
+              ['Order', 'UserOrder'].includes(route.name)
+                ? order.user?.name || 'User'
+                : 'Support'
+            "
+            :user="auth.state.user._id"
+            :chatID="route.params.order"
+            class="radius-small bs-black bg-light o-hidden"
+          />
+        </div>
+        <!-- <StatusHistory 
 	     		v-if="orders.state.current.status_history"
 	     		:statuses="statuses"
 	     		:statusHistory="orders.state.current.status_history"
@@ -231,7 +395,7 @@
 	     		:edit="route.name === 'Order Edit'"
 	     	/> -->
 
-	     <!-- 	<button 
+        <!-- 	<button 
 	     	@click="requestPayment(order)"
 	     	v-if="
 	     		order.status === 'Подтвержден' 
@@ -240,272 +404,495 @@
 	     		&& payment.Status !== 'REFUNDED'
 	     	" 
 	     	class='w-100 button'>Оплатить заказ</button> -->
-	     	<span class="t-transp" v-if="payment && payment.Status === 'CONFIRMED'">Paid</span> 
-	    </div>  
-
-	    <div class="bg-light radius-medium pd-medium   w-100">
-	  		<h3 class="mn-b-small">Order Summary</h3>
-
-	  		<ul class="flex gap-thin flex-column mn-b-thin">
-	  			<CardOrderItem
-	  				v-for="(product, index) in order.positions" 
-	  				: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"
-	  			/>
-	      </ul>
-	      
-	      <PriceTotal
-          :totalPrice="cartTotalPrice"
-          :deliveryRate="deliveryCost"
-          :currency="returnCurrency()"
-          :showFees="store.core.state.options?.orders?.showFees"
-          :feesRate="store.core.state.options?.orders?.feesRate || 0"
-          :showVat="store.core.state.options?.orders?.showVat"
-          :vatRate="store.core.state.options?.orders?.vatRate || 0"
-				  :showDeliveryFee="store.core.state.options?.orders.showDeliveryFee"
-
-        />
-     	</div>
-
-	   
-	  </div>
-	</div>		
-
+        <span
+          class="opacity-50"
+          v-if="payment && payment.Status === 'CONFIRMED'"
+        >
+          Paid
+        </span>
+      </div>
+
+      <div class="w-100">
+        <!-- Customer Card -->
+        <div class="bg-light radius-medium pd-small mn-b-thin w-100">
+          <h3 class="mn-b-small">Customer</h3>
+
+          <router-link
+            v-if="
+              route.meta.context !== 'user' &&
+              route.meta.context !== 'root' &&
+              order.customer?.target
+            "
+            :to="customerLink"
+            class="d-block w-100 pd-small bg-white radius-small"
+          >
+            <CardUser
+              :user="order.customer.target"
+              :photo="order.customer.target.photo"
+              :name="order.customer.target.profile?.name || 'No name'"
+              :phone="formatPhone(order.customer.target.number || order.customer.target.phone)"
+            >
+              <template #actions>
+                <a
+                  v-if="customerContact"
+                  :href="customerContact.url"
+                  :target="customerContact.type !== 'phone' ? '_blank' : null"
+                  @click.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"
+                >
+                  <component :is="customerContact.icon" class="i-small" />
+                  {{
+                    customerContact.type === "phone"
+                      ? customerContact.value
+                      : customerContact.type
+                  }}
+                </a>
+              </template>
+            </CardUser>
+          </router-link>
+        </div>
+
+        <div class="bg-light radius-medium pd-small w-100">
+          <h3 class="mn-b-small">Order Summary</h3>
+
+          <ul class="flex gap-thin flex-column mn-b-thin">
+            <CardOrderItem
+              v-for="(product, index) in order.positions"
+              :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"
+            />
+          </ul>
+
+          <PriceTotal
+            :totalPrice="cartTotalPrice"
+            :deliveryRate="deliveryCost"
+            :currency="returnCurrency()"
+            :showFees="store.core.state.options?.orders?.showFees"
+            :feesRate="store.core.state.options?.orders?.feesRate || 0"
+            :showVat="store.core.state.options?.orders?.showVat"
+            :vatRate="store.core.state.options?.orders?.vatRate || 0"
+            :showDeliveryFee="store.core.state.options?.orders.showDeliveryFee"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-
 <script setup="props">
-	import { computed, ref, onMounted  } from 'vue'
-	import { useRouter, useRoute } from 'vue-router'
+import { computed, ref, onMounted, getCurrentInstance } from "vue";
+import { useRouter, useRoute } from "vue-router";
+
+import Button from "@martyrs/src/components/Button/Button.vue";
+import Select from "@martyrs/src/components/Select/Select.vue";
+import Popup from "@martyrs/src/components/Popup/Popup.vue";
+import Feed from "@martyrs/src/components/Feed/Feed.vue";
+
+import IconTime from "@martyrs/src/modules/icons/entities/IconTime.vue";
+import { calcRentTotalPrice } from "@martyrs/src/modules/orders/utils/rent-price.js";
+
+// Block
+import CardOrderItem from "@martyrs/src/modules/orders/components/blocks/CardOrderItem.vue";
+import CardOrganization from "@martyrs/src/modules/organizations/components/blocks/CardOrganization.vue";
+import CardUser from "@martyrs/src/modules/core/views/components/blocks/CardUser.vue";
+import PlaceholderUserpic from "@martyrs/src/modules/icons/placeholders/PlaceholderUserpic.vue";
+import IconPhone from "@martyrs/src/modules/icons/entities/IconPhone.vue";
+import IconWhatsapp from "@martyrs/src/modules/icons/socials/whatsapp.vue";
+import IconTelegram from "@martyrs/src/modules/icons/socials/telegram.vue";
+import IconLine from "@martyrs/src/modules/icons/socials/line.vue";
+import IconInstagram from "@martyrs/src/modules/icons/socials/instagram.vue";
+import IconFacebook from "@martyrs/src/modules/icons/socials/facebook.vue";
+
+import ChatPage from "@martyrs/src/modules/chats/components/pages/ChatPage.vue";
+
+import StatusHistory from "@martyrs/src/modules/orders/components/blocks/StatusHistory.vue";
+import PriceTotal from "@martyrs/src/modules/orders/components/elements/PriceTotal.vue";
+import FormPayment from "@martyrs/src/modules/orders/components/sections/FormPayment.vue";
+
+import { useStore } from "@martyrs/src/modules/core/views/store/core.store.js";
+import * as auth from "@martyrs/src/modules/auth/views/store/auth.js";
+import * as orders from "@martyrs/src/modules/orders/store/orders.js";
+import * as products from "@martyrs/src/modules/products/store/products.js";
+import * as organizations from "@martyrs/src/modules/organizations/store/organizations.js";
+import variants from "@martyrs/src/modules/products/store/variants.store.js";
+
+import { useI18n } from "vue-i18n";
+import { useGlobalMixins } from "@martyrs/src/modules/core/views/mixins/mixins.js";
+
+const store = useStore();
+const { proxy } = getCurrentInstance();
+
+const { locale } = useI18n();
+const { returnCurrency, isPhone, isTablet, formatPhone, formatDate, formatPrice } = useGlobalMixins();
+
+const router = useRouter();
+const route = useRoute();
+
+const order = ref(null);
+const productsOrganization = ref(null);
+const orderOrganization = ref(null);
+
+const statuses = store.core.state.options?.orders?.statuses || [];
+
+if (
+  route.meta.context === "user" &&
+  auth.state.user &&
+  route.params._id !== auth.state.user?._id &&
+  !auth.state.access?.roles?.includes("ROLE_MODERATOR") &&
+  !auth.state.access?.roles?.includes("ROLE_ADMIN")
+) {
+  router.push("/401");
+}
+
+const isOpeStatusPopup = ref(false);
+const selectedMember = ref(null);
 
-	import Button from '@martyrs/src/components/Button/Button.vue'
-	import Select from '@martyrs/src/components/Select/Select.vue'
-	import Popup from "@martyrs/src/components/Popup/Popup.vue";
+function openStatusPopup(member) {
+  isOpeStatusPopup.value = true;
+  if (typeof member === "number") selectedMember.value = member;
+}
 
-	import IconTime  from '@martyrs/src/modules/icons/entities/IconTime.vue'
+function closeStatusPopup() {
+  isOpeStatusPopup.value = false;
+  selectedMember.value = null;
+}
 
-	// Block
-	import CardOrderItem  from '@martyrs/src/modules/orders/components/blocks/CardOrderItem.vue'
-	import CardOrganization from '@martyrs/src/modules/organizations/components/blocks/CardOrganization.vue'
+const isOpenPaymentPopup = ref(false);
 
-	import ChatPage from '@martyrs/src/modules/chats/components/pages/ChatPage.vue';
+const selectedPayments = ref({
+  type: null,
+  status: null,
+});
 
-	import StatusHistory from '@martyrs/src/modules/orders/components/blocks/StatusHistory.vue'
-	import PriceTotal from '@martyrs/src/modules/orders/components/elements/PriceTotal.vue';
-	import FormPayment from '@martyrs/src/modules/orders/components/sections/FormPayment.vue'
+function openPaymentPopup() {
+  selectedPayments.value.type = order.value.payment.type;
+  selectedPayments.value.status = order.value.payment.status;
 
-	import { useStore } from '@martyrs/src/modules/core/views/store/core.store.js'
-	import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'
-	import * as orders 	from '@martyrs/src/modules/orders/store/orders.js'
-	import * as products 	from '@martyrs/src/modules/products/store/products.js'
-	import * as organizations 	from '@martyrs/src/modules/organizations/store/organizations.js'
+  isOpenPaymentPopup.value = true;
+}
 
-	import { useI18n } from 'vue-i18n';
-	import { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js';
+function closePaymentPopup() {
+  isOpenPaymentPopup.value = false;
+}
 
-	const store = useStore()
-	
-	const { locale } = useI18n();
-	const { returnCurrency } = useGlobalMixins();
+// Add product to order
+const isAddProductPopupOpen = ref(false);
+const isAddVariantsPopupOpen = ref(false);
+const selectedProduct = ref(null);
 
-	const router = useRouter()
-	const route = useRoute()
+function openAddProductPopup() {
+  isAddProductPopupOpen.value = true;
+}
 
-	const order = ref(null)
-	const productsOrganization = ref(null)
-	const orderOrganization = ref(null)
+function closeAddProductPopup() {
+  isAddProductPopupOpen.value = false;
+}
 
-	const statuses = store.core.state.options?.orders?.statuses || []
-	const statusLabels = ['Created', 'Confirmed', 'Preparing', 'In use', 'Finished'];
+function closeAddVariantsPopup() {
+  isAddVariantsPopupOpen.value = false;
+  selectedProduct.value = null;
+}
+
+function selectProduct(product) {
+  selectedProduct.value = product;
+  closeAddProductPopup();
 
-  if (route.meta.context === 'user' && 
-      auth.state.user && 
-      route.params._id !== auth.state.user?._id && 
-      !auth.state.access?.roles?.includes('ROLE_MODERATOR') && 
-      !auth.state.access?.roles?.includes('ROLE_ADMIN')) {
-    router.push('/401');
+  if (product.variants && product.variants.length === 1) {
+    addVariantToOrder(product.variants[0]);
+    return;
   }
 
-	const isOpeStatusPopup = ref(false);
-	const selectedMember = ref(null);
+  isAddVariantsPopupOpen.value = true;
+}
 
-	function openStatusPopup(member) {
-	  isOpeStatusPopup.value = true;
-	  if (typeof member === "number") selectedMember.value = member;
-	}
+function formatProductName(product, variant) {
+  if (!variant || product.variants?.length === 1 && !(variant.attributes?.length))
+    return product.name;
 
-	function closeStatusPopup() {
-	  isOpeStatusPopup.value = false;
-	  selectedMember.value = null;
-	}
+  const attrs = variant.attributes?.map(a => a.value).filter(Boolean);
+  return attrs?.length
+    ? `${product.name} / ${attrs.join(' / ')}`
+    : `${product.name} / ${variant.name}`;
+}
 
-	const isOpenPaymentPopup = ref(false);
+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 selectedPayments = ref({
-		type: null,
-		status: null
-	});
+    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);
+  }
+}
 
-	function openPaymentPopup() {
-	  selectedPayments.value.type = order.value.payment.type
-	  selectedPayments.value.status = order.value.payment.status
+onMounted(async () => {
+  order.value = await orders.actions.read({ _id: route.params.order });
+  order.value = order.value[0];
 
-	  isOpenPaymentPopup.value = true;
-	}
+  orderOrganization.value = await organizations.actions.read({
+    _id: order.value?.owner.target._id,
+    location: store.core.state.position?.location,
+    lookup: ["spots"],
+  });
+});
 
-	function closePaymentPopup() {
-	  isOpenPaymentPopup.value = false;
-	}
+const deliveryCost = computed(() => {
+  const type = orders.state.current.delivery.type;
+  const distance = orderOrganization.value[0]?.distance || 0;
+  const config = store.core.state.options?.orders?.delivery_formula || {};
 
-	onMounted(async()=>{
-		order.value = await orders.actions.read({_id: route.params.order})
-		order.value = order.value[0]
+  return orders.getters.getDeliveryPrice(type, distance, config);
+});
 
-	  orderOrganization.value = await organizations.actions.read({
-	    _id: order.value?.owner.target._id,
-	    location: store.core.state.position?.location,
-	    lookup: ['spots']
-	  });
+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: IconWhatsapp,
+  telegram: IconTelegram,
+  line: IconLine,
+  instagram: IconInstagram,
+  facebook: IconFacebook,
+};
+
+function getSocialUrl(key, value) {
+  return socialUrlMap[key] ? socialUrlMap[key](value) : value;
+}
 
-const deliveryCost = computed(() => {
-  const type = orders.state.current.delivery.type
-  const distance = orderOrganization.value[0]?.distance || 0
-  const config = store.core.state.options?.orders?.delivery_formula || {}
-
-  return orders.getters.getDeliveryPrice(type, distance, config)
-})
-
-	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 / (1000 * 60 * 60 * 24)) + 1);
+const customerContact = computed(() => {
+  const customer = order.value?.customer?.target;
+  if (!customer) return null;
+  const socials = customer.socials || customer.data?.socials || {};
+  // Приоритет: whatsapp > telegram > line > phone
+  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: IconPhone,
+    };
+  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) => {
+      // Если в ордере уже сохранён totalPrice позиции — используем его
+      if (product.totalPrice) {
+        return total + product.totalPrice;
+      }
+      // Fallback для старых ордеров без 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));
-  })
+    }, 0),
+  );
+});
 
-
-  let cartTotalAmount = computed(() => {
-    return Number(order.value?.positions.reduce((total, product) => {
+let cartTotalAmount = computed(() => {
+  return Number(
+    order.value?.positions.reduce((total, product) => {
       return total + product.quantity;
-    }, 0));
-  })
-
-  // Функция установки нового статуса
-	async function setStatus (newStatus) {
-	  orders.state.current.status = newStatus
+    }, 0),
+  );
+});
 
-	  await orders.actions.update(orders.state.current)
-	} 
+// Функция установки нового статуса
+async function setStatus(newStatus) {
+  orders.state.current.status = newStatus;
 
+  await orders.actions.update(orders.state.current);
+}
 
-	function getNextStatus(currentStatus) {
-	  const currentIndex = statuses.findIndex(status => status.value === currentStatus);
+function getNextStatus(currentStatus) {
+  const currentIndex = statuses.findIndex(
+    (status) => status.value === currentStatus,
+  );
 
-	  if (currentIndex !== -1 && currentIndex + 1 < statuses.length) {
-	    return statuses[currentIndex + 1];
-	  }
-	  return null; // If next status doesn't exist
-	}
+  if (currentIndex !== -1 && currentIndex + 1 < statuses.length) {
+    return statuses[currentIndex + 1];
+  }
+  return null; // If next status doesn't exist
+}
 
-	const isActiveStatus = (index) => {
-	  return statuses.slice(index).some(status => status.value === order.value?.status);
-	};
+const isActiveStatus = (index) => {
+  return statuses
+    .slice(index)
+    .some((status) => status.value === order.value?.status);
+};
 
-  async function changePaymentStatus() {
-    if (selectedPayments.value.status && selectedPayments.value.type) {
-      orders.state.current.payment = selectedPayments.value;
+async function changePaymentStatus() {
+  if (selectedPayments.value.status && selectedPayments.value.type) {
+    orders.state.current.payment = selectedPayments.value;
 
-      await orders.actions.update(orders.state.current)
-    } else {
-      console.error('Payment status is void. Must handle somehow.');
-    }
-
-		closePaymentPopup()
+    await orders.actions.update(orders.state.current);
+  } else {
+    console.error("Payment status is void. Must handle somehow.");
   }
 
-  async function setNextStatus() {
-    const nextStatus = getNextStatus(orders.state.current.status);
+  closePaymentPopup();
+}
 
-    if (nextStatus) {
-      orders.state.current.status = nextStatus.value;
-      
-      // Обновляем позиции заказа из текущего состояния
-      orders.state.current.positions = order.value.positions;
+async function setNextStatus() {
+  const nextStatus = getNextStatus(orders.state.current.status);
 
-      await orders.actions.update(orders.state.current)
-    } else {
-      console.error('Next status is void. Must handle somehow.');
-    }
-
-		closeStatusPopup()
-  }
+  if (nextStatus) {
+    orders.state.current.status = nextStatus.value;
 
-  async function cancelOrder() {
-  	alert()
+    // Обновляем позиции заказа из текущего состояния
+    orders.state.current.positions = order.value.positions;
 
-    orders.state.current.status = 'canceled';
+    await orders.actions.update(orders.state.current);
+  } else {
+    console.error("Next status is void. Must handle somehow.");
+  }
 
-    await orders.actions.update(orders.state.current)
+  closeStatusPopup();
 }
 
+async function cancelOrder() {
+  alert();
 
-  async function confirmOrder() {
-  	alert()
+  orders.state.current.status = "canceled";
 
-    orders.state.current.status = 'confirmed';
+  await orders.actions.update(orders.state.current);
+}
 
-    await orders.actions.update(orders.state.current)
-	}
+async function confirmOrder() {
+  alert();
 
-	function calculateDeliveryTime(distance, date) {
-	  if (!distance) {
-	    return null;
-	  }
+  orders.state.current.status = "confirmed";
 
-	  const basePreparationTime = 10 * 60 * 1000; // Convert to milliseconds
-	  const travelTime = Math.ceil((15 + 5 + 3 * distance) / 5) * 5 * 60 * 1000;
+  await orders.actions.update(orders.state.current);
+}
 
-	  // Преобразование даты начала в миллисекунды и добавление времени подготовки и доставки
-	  const startTime = new Date(date).getTime();
-	  const estimatedDeliveryTime = new Date(startTime + basePreparationTime + travelTime);
+function calculateDeliveryTime(distance, date) {
+  if (!distance) {
+    return null;
+  }
 
-	  return estimatedDeliveryTime;
-	}
+  const basePreparationTime = 10 * 60 * 1000; // Convert to milliseconds
+  const travelTime = Math.ceil((15 + 5 + 3 * distance) / 5) * 5 * 60 * 1000;
 
+  // Преобразование даты начала в миллисекунды и добавление времени подготовки и доставки
+  const startTime = new Date(date).getTime();
+  const estimatedDeliveryTime = new Date(
+    startTime + basePreparationTime + travelTime,
+  );
 
+  return estimatedDeliveryTime;
+}
 </script>
 
 <style lang="scss" scoped>
-	.blink {
-	  animation: blink-animation 1s ease infinite;
-	}
-
-	@keyframes blink-animation {
-	  0%, 100% {
-	    opacity: 1;
-	  }
-	  50% {
-	    opacity: 0.8;
-	  }
-	}
-</style>
+.blink {
+  animation: blink-animation 1s ease infinite;
+}
+
+@keyframes blink-animation {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+</style>