今天我們來看到 checkout 的最後一個部分
結帳頁

首先最上方是購物車裡面的商品
他會顯示商品的縮圖、名稱、商品類型和價格
如果是購買實體商品會有數量
如果想移除這個商品，在最右邊有移除鍵
再來是下方有一個贈品的 Block
這是近期的新功能

const CartProductGiftPlan: React.VFC<{ productId: string; isTargetLoaded: boolean }> = ({
  productId,
  isTargetLoaded,
}) => {
  const { formatMessage } = useIntl()
  const { productGiftPlan } = useProductGiftPlan(productId)
  let isAvailable =
    (productGiftPlan.startedAt && Date.now() < new Date(productGiftPlan.startedAt).getTime()) ||
    (productGiftPlan.endedAt && Date.now() > new Date(productGiftPlan.endedAt).getTime())
      ? false
      : true

  return isTargetLoaded && productGiftPlan.id && isAvailable ? (
    <GiftPlanBlock>
      <GiftDescriptionBlock>
        <GiftTag>{formatMessage(checkoutMessages.ui.gift)}</GiftTag>
        <GiftName>{productGiftPlan.giftPlan.gift.title}</GiftName>
      </GiftDescriptionBlock>
      <CustomRatioImage width="52px" ratio={1 / 1} src={productGiftPlan.giftPlan.gift.coverUrl || EmptyCover} />
    </GiftPlanBlock>
  ) : null
}

export default CartProductGiftPlan

簡單說明這邊的實作方式
他會傳入「productId」和「「isTargetLoaded」兩個 props
isTargetLoaded 是判斷產品載入完畢
productId 用來檢查產品是否有附贈品
當產品載入完畢以及產品有附贈品和贈品在有效期內，才會顯示贈品
裡面圖片也用到我們前面講的「CustomRatioImage」

接著是寄送資訊
前面我們有提到 shipping 會存放在 localstorage
當 localstorage 裡面沒有 shipping 的選項
會自動帶入資料庫上一次的寄送資訊
也不用擔心之前的寄送資訊不見

在收件人的部分我們可以看到
它有台灣縣市的選擇器
這也是和贈品一起出來的新功能
最早只有地址這個輸入框

除此之外，下方還有個「台灣離島/海外不寄送」
當勾選時，上方的「收件人地址」會全部 disable
且在建立訂單的時候，贈品不會顯示在訂單上

再來是付款方式和發票
付款方式提供了許多種金流，在後台可以根據需求去做開關
發票的部分為三個一組的 Radio Button Group
這塊是由 lodestar-app-element 進行引入
使用者可以跟需求去選擇

下方的資訊和前面我們看到的 Modal 大致差不多

終於要完賽啦，明天和大家講講這 30 天的心得