💄 Show shipping details in order table (#115)

likecoin · Feb 28, 2024 · e6dcfdb · e6dcfdb
1 parent 00245a3
commit e6dcfdb
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 2 deletions.
diff --git a/pages/nft-book-store/collection/status/[collectionId].vue b/pages/nft-book-store/collection/status/[collectionId].vue
@@ -476,7 +476,7 @@ import { useBookStoreApiStore } from '~/stores/book-store-api'
 import { useNftStore } from '~/stores/nft'
 import { useCollectionStore } from '~/stores/collection'
 import { useWalletStore } from '~/stores/wallet'
-import { getPortfolioURL } from '~/utils'
+import { getPortfolioURL, formatShippingAddress } from '~/utils'
 import { getNFTAuthzGrants, shortenWalletAddress } from '~/utils/cosmos'
 
 const store = useWalletStore()
@@ -597,6 +597,11 @@ const orderTableColumns = computed(() => {
     { key: 'wallet', label: 'Buyer Wallet', sortable: true },
     { key: 'message', label: 'Buyer Message', sortable: false }
   )
+  if (orderHasShipping.value) {
+    columns.push({ key: 'shippingName', label: 'Shipping Name', sortable: true })
+    columns.push({ key: 'shippingAddress', label: 'Shipping Address', sortable: true })
+    columns.push({ key: 'shippingCountry', label: 'Shipping Country', sortable: true })
+  }
 
   return columns
 })
@@ -681,6 +686,9 @@ const ordersTableRows = computed(() => purchaseList.value?.map((p: any, index: n
   statusLabelColor: getStatusLabelColor(p),
   orderDate: p.formattedDate,
   shippingStatus: p.shippingStatus,
+  shippingCountry: p.shippingDetails?.address?.country || '',
+  shippingAddress: formatShippingAddress(p.shippingDetails) || '',
+  shippingName: p.shippingDetails?.name || '',
   wallet: p.wallet || '',
   walletLink: getPortfolioURL(p.wallet),
   shortenWallet: shortenWalletAddress(p.wallet),

diff --git a/pages/nft-book-store/status/[classId].vue b/pages/nft-book-store/status/[classId].vue
@@ -595,7 +595,7 @@ import { CHAIN_EXPLORER_URL, IS_TESTNET, LIKE_CO_API, LIKER_LAND_URL } from '~/c
 import { useBookStoreApiStore } from '~/stores/book-store-api'
 import { useNftStore } from '~/stores/nft'
 import { useWalletStore } from '~/stores/wallet'
-import { getPortfolioURL } from '~/utils'
+import { getPortfolioURL, formatShippingAddress } from '~/utils'
 import { getNFTAuthzGrants, shortenWalletAddress } from '~/utils/cosmos'
 
 const store = useWalletStore()
@@ -719,6 +719,11 @@ const orderTableColumns = computed(() => {
     { key: 'wallet', label: 'Buyer Wallet', sortable: true },
     { key: 'message', label: 'Buyer Message', sortable: false }
   )
+  if (orderHasShipping.value) {
+    columns.push({ key: 'shippingName', label: 'Shipping Name', sortable: true })
+    columns.push({ key: 'shippingAddress', label: 'Shipping Address', sortable: true })
+    columns.push({ key: 'shippingCountry', label: 'Shipping Country', sortable: true })
+  }
 
   return columns
 })
@@ -819,6 +824,9 @@ const ordersTableRows = computed(() => purchaseList.value?.map((p: any, index: n
   statusLabelColor: getStatusLabelColor(p),
   orderDate: p.formattedDate,
   shippingStatus: p.shippingStatus || '',
+  shippingCountry: p.shippingDetails?.address?.country || '',
+  shippingAddress: formatShippingAddress(p.shippingDetails) || '',
+  shippingName: p.shippingDetails?.name || '',
   wallet: p.wallet || '',
   walletLink: getPortfolioURL(p.wallet),
   shortenWallet: shortenWalletAddress(p.wallet),

diff --git a/utils/index.ts b/utils/index.ts
@@ -110,3 +110,26 @@ export const deliverMethodOptions = [
     label: 'Sign memo and manually deliver each NFT'
   }
 ]
+
+export const formatShippingAddress = function (shippingDetails: any) {
+  if (!shippingDetails?.address) {
+    return ''
+  }
+  const {
+    line1 = '',
+    line2 = '',
+    city = '',
+    state = '',
+    postal_code: code = '',
+    country = ''
+  } = shippingDetails.address
+  const parts = [
+    line1,
+    line2,
+    city,
+    state,
+    code,
+    country
+  ]
+  return parts.filter(p => !!p).join(', ')
+}