Checkout

<snt-app #default="{ _, router, goTo }" class="lush">
  <snt-section name="เช็คเอาท์">
    <snt-checkout #default="{
      selectedPurchase, totalQuantity, totalPrice, shippingFee,
      promoCodeDiscount, netPrice, errors, valid, submitting, submit
    }">
      <div class="checkout__wrapper">
        <div class="checkout-form">
          <div class="checkout-form__wrapper">
            <div class="checkout-form__title">Delivery Address</div>
            <snt-address class="checkout-summary-address" />
            <div
              :class="{ 'checkout-form__title--disabled': true }"
              class="checkout-form__title">Delivery Method</div>
            <snt-shipping
              v-if="!_.includes(errors, 'address')"
              class="checkout-summary-shipping" />
            <div
              :class="{ 'checkout-form__title--disabled': true }"
              class="checkout-form__title">Payment Method</div>
            <template v-if="!_.includes(errors, 'shipping')">
              <snt-payment-methods class="checkout-summary-payment-methods" />
              <snt-button
                color="secondary"
                tile
                block
                x-large
                @click="submit()">
                Submit
              </snt-button>
            </template>
          </div>
        </div>
        <div class="checkout-summary">
          <div class="checkout-summary__wrapper">
            <div class="checkout-summary__title">Summary</div>
            <div>{{ totalQuantity }} ITEM</div>
            <div class="checkout-purchase-cart">
              <template v-for="item in selectedPurchase">
                <div class="checkout-purchase-cart-item">
                  <snt-image
                    :src="item.pictureUrl"
                    height="96px"
                    width="96px" />
                  <div class="checkout-purchase-cart-item__content">
                    <div class="checkout-purchase-cart-title">
                      <div class="checkout-purchase-cart-item__name">{{ item.name }}</div>
                      <div class="checkout-purchase-cart-item__quantity">QTY: {{ item.quantity | toLocaleString }}</div>
                    </div>
                    <div class="checkout-purchase-cart-item__options">
                      <div class="checkout-purchase-cart-item___price">{{ item.price | toLocaleString }} ฿</div>
                    </div>
                  </div>
                </div>
              </template>
            </div>
            <snt-promo-codes class="checkout-summary-promo-codes" />
            <div class="checkout-summary__row">
              <div>
                ยอดรวม
              </div>
              <div>
                {{ totalPrice | toLocaleString }} ฿
              </div>
            </div>
            <div class="checkout-summary__row">
              <div>
                ส่วนลด
              </div>
              <div>
                {{ promoCodeDiscount | toLocaleString }} ฿
              </div>
            </div>
            <div class="checkout-summary__row">
              <div>
                ค่าส่งสินค้า
              </div>
              <div v-if="shippingFee">
                {{ shippingFee | toLocaleString }} ฿
              </div>
              <div v-else>ฟรี</div>
            </div>
            <div class="checkout-summary__row">
              <div class="checkout-summary__subtitle">
                ยอดรวมทั้งหมด
              </div>
              <div class="checkout-summary__subtitle">
                {{ netPrice | toLocaleString }} ฿
              </div>
            </div>
          </div>
        </div>
      </div>
    </snt-checkout>
  </snt-section>
</snt-app>