web/app/components/pos/ConfirmOrder.vue

<script setup>
import CartItem from "~/components/pos/CartItem.vue";
import usePlaceOrder from "~/components/pos/composables/usePlaceOrder";

const id = "confirmOrderModal";
const emit = defineEmits(["close"]);
const { activeCart, activeCartItems, invalidCartItems, orderInfo, fullAddress, getCarts, subtotal, total } =
  inject("pos");

const { isPending, showVietQRModal, placeOrder, testReturnPage } = usePlaceOrder({
  activeCart,
  activeCartItems,
  invalidCartItems,
  orderInfo,
  fullAddress,
  subtotal,
  total,
  getCarts,
  onSuccess: () => emit("close"),
});
</script>

<template>
  <div :id="id">
    <div class="card">
      <div class="card-content has-background-primary-100">
        <p class="icon-text font-semibold mb-2">
          <span class="icon">
            <Icon
              name="material-symbols:supervisor-account-outline-rounded"
              :size="18"
            />
          </span>
          <span>Khách hàng</span>
        </p>
        <div>
          <p>{{ activeCart.customer__fullname }}</p>
          <p class="is-size-7 has-text-grey">
            {{ activeCart.customer__phone }}
            •
            {{ activeCart.customer__email }}
          </p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-content has-background-primary-100">
        <p class="icon-text font-semibold mb-2">
          <span class="icon">
            <Icon
              name="material-symbols:shopping-cart-outline-rounded"
              :size="18"
            />
          </span>
          <span>{{ activeCartItems.length }} sản phẩm</span>
        </p>
        <div class="is-flex is-flex-direction-column is-gap-1">
          <CartItem
            v-for="cartItem in activeCartItems"
            :key="cartItem.id"
            :cartItem="cartItem"
            :invalid="invalidCartItems.find((ci) => ci.id === cartItem.id)"
          />
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-content has-background-primary-100">
        <p class="icon-text font-semibold mb-4">
          <span class="icon">
            <Icon
              name="material-symbols:delivery-truck-speed-outline-rounded"
              :size="18"
            />
          </span>
          <span>Giao hàng</span>
        </p>
        <div>
          <div v-if="orderInfo.deliveryMethod.code === 'INSTORE_PICKUP'">
            <p>Nhận tại cửa hàng</p>
          </div>
          <div v-else>
            <p class="font-medium fs-16 mb-0.5">{{ fullAddress }}</p>
            <p class="has-text-grey">
              <span>{{ orderInfo.receiver_name }}</span>
              <span> • </span>
              <span>{{ orderInfo.receiver_phone }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-content has-background-primary-100">
        <p class="icon-text font-semibold mb-2">
          <span class="icon">
            <Icon
              name="material-symbols:credit-card-outline"
              :size="18"
            />
          </span>
          <span>Thanh toán</span>
        </p>
        <div>
          <div class="block is-flex is-justify-content-space-between">
            <span>Phương thức thanh toán</span>
            <span>{{ orderInfo.paymentMethod.name }}</span>
          </div>
          <table class="table is-fullwidth fs-13">
            <tbody>
              <tr>
                <td>
                  <span>Tạm tính</span>
                  <span> ({{ activeCartItems.length }} sản phẩm)</span>
                </td>
                <td class="has-text-right">{{ $formatNum(subtotal, { hasUnit: true }) }}</td>
              </tr>
              <tr>
                <td>Phí giao hàng</td>
                <td class="has-text-right">{{ $formatNum(orderInfo.shipping_fee, { hasUnit: true }) }}</td>
              </tr>
              <tr>
                <td class="font-bold fs-14">Tổng cộng</td>
                <td class="has-text-right has-text-primary font-bold fs-18">
                  {{ $formatNum(total, { hasUnit: true }) }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <Teleport
      defer
      :to="`.modal-card:has(#${id}) .modal-card-foot`"
    >
      <div class="buttons w-full is-right">
        <button
          @click="$emit('close')"
          class="button is-white"
        >
          Huỷ
        </button>
        <button
          @click="placeOrder"
          :class="['button is-success', isPending && 'is-loading']"
        >
          Đặt hàng
        </button>
        <!-- <button
          @click="testReturnPage"
          class="button is-yellow"
        >
          Test Return Page
        </button> -->
      </div>
    </Teleport>
    <Modal
      v-if="showVietQRModal"
      v-bind="showVietQRModal"
      @close="showVietQRModal = null"
    />
  </div>
</template>

<style scoped>
.table {
  background-color: transparent;

  td {
    background-color: transparent;
  }
}
</style>