@faststore/core 3.47.0 → 3.48.0

package/.turbo/turbo-build.log

@@ -1,23 +1,23 @@
 
-> @faststore/core@3.46.0 prebuild /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.47.1 prebuild /home/runner/work/faststore/faststore/packages/core
 > na run partytown && na run generate
 
 
-> @faststore/core@3.46.0 partytown /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.47.1 partytown /home/runner/work/faststore/faststore/packages/core
 > partytown copylib ./public/~partytown
 
 Partytown lib copied to: /home/runner/work/faststore/faststore/packages/core/public/~partytown
 
-> @faststore/core@3.46.0 generate /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.47.1 generate /home/runner/work/faststore/faststore/packages/core
 > na run generate:schema && na run generate:codegen && na run format:generated
 
 
-> @faststore/core@3.46.0 generate:schema /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.47.1 generate:schema /home/runner/work/faststore/faststore/packages/core
 > tsx src/server/generator/generateGraphQLSchemaFile.ts
 
 Schema GraphQL file generated successfully
 
-> @faststore/core@3.46.0 generate:codegen /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.47.1 generate:codegen /home/runner/work/faststore/faststore/packages/core
 > graphql-codegen
 
 [STARTED] Parse Configuration
@@ -37,11 +37,11 @@ Running lifecycle hook "afterStart" scripts...
 [CLI] Loading Documents
 [CLI] Generating output
 
-> @faststore/core@3.46.0 format:generated /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.47.1 format:generated /home/runner/work/faststore/faststore/packages/core
 > prettier --write "@generated/**/*.{ts,js,tsx,jsx,json}" --loglevel error
 
 
-> @faststore/core@3.46.0 build /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.47.1 build /home/runner/work/faststore/faststore/packages/core
 > next build
 
 ⚠ No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
@@ -83,8 +83,8 @@ Route (pages)                              Size     First Load JS
 ├   └ css/b7bba8fce075688b.css             4.2 kB
 ├ ● /account/404                           2.02 kB         130 kB
 ├   └ css/5347dbc8b71de47d.css             4.25 kB
-├ λ /account/orders                        8.41 kB         136 kB
-├   └ css/9d1abf05f9ffaf8f.css             11.7 kB
+├ λ /account/orders                        8.64 kB         137 kB
+├   └ css/3aa693541804727c.css             11.8 kB
 ├ λ /account/orders/[id]                   10.1 kB         138 kB
 ├   └ css/2557aa3eaecf6ef0.css             11.4 kB
 ├ λ /account/profile                       1.26 kB         129 kB
@@ -101,7 +101,7 @@ Route (pages)                              Size     First Load JS
   ├ chunks/framework-807b0f81cbc129f0.js   45.4 kB
   ├ chunks/main-5569625b3fdd6741.js        33.1 kB
   ├ chunks/pages/_app-e5a4d3ef47f1b5c3.js  16.3 kB
-  ├ chunks/webpack-5eeb0e7a0a92b041.js     3.7 kB
+  ├ chunks/webpack-323ef2a537a2c00d.js     3.7 kB
   └ css/0a57ee6c7a57788c.css               3.49 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/.turbo/turbo-test.log

@@ -1,14 +1,14 @@
 
-> @faststore/core@3.46.0 test /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.47.1 test /home/runner/work/faststore/faststore/packages/core
 > jest
 
-PASS test/server/cms/global.test.ts (24.178 s)
-PASS test/utils/multipleTemplates.test.ts (24.342 s)
+PASS test/server/cms/global.test.ts (24.997 s)
+PASS test/utils/multipleTemplates.test.ts (25.16 s)
 PASS test/server/cms/index.test.ts
-PASS test/server/index.test.ts (29.637 s)
+PASS test/server/index.test.ts (29.662 s)
 
 Test Suites: 4 passed, 4 total
 Tests:       22 passed, 22 total
 Snapshots:   0 total
-Time:        30.814 s
+Time:        30.995 s
 Ran all test suites.

package/@generated/gql.ts

@@ -44,7 +44,7 @@ const documents = {
     types.UserOrderItemsFragmentFragmentDoc,
   '\n  query ServerOrderDetailsQuery($orderId: String!) {\n    userOrder(orderId: $orderId) {\n      orderId\n      status\n      statusDescription\n      allowCancellation\n      storePreferencesData {\n        currencyCode\n      }\n      clientProfileData {\n        firstName\n        lastName\n        email\n        phone\n        corporateName\n        isCorporate\n      }\n      customFields {\n        type\n        id\n        fields {\n          name\n          value\n          refId\n        }\n      }\n      deliveryOptionsData {\n        deliveryOptions {\n          selectedSla\n          deliveryChannel\n          deliveryCompany\n          deliveryWindow {\n            startDateUtc\n            endDateUtc\n            price\n          }\n          shippingEstimate\n          shippingEstimateDate\n          friendlyShippingEstimate\n          friendlyDeliveryOptionName\n          seller\n          address {\n            addressType\n            receiverName\n            addressId\n            versionId\n            entityId\n            postalCode\n            city\n            state\n            country\n            street\n            number\n            neighborhood\n            complement\n            reference\n            geoCoordinates\n          }\n          pickupStoreInfo {\n            additionalInfo\n            address {\n              addressType\n              receiverName\n              addressId\n              versionId\n              entityId\n              postalCode\n              city\n              state\n              country\n              street\n              number\n              neighborhood\n              complement\n              reference\n              geoCoordinates\n            }\n            dockId\n            friendlyName\n            isPickupStore\n          }\n          quantityOfDifferentItems\n          total\n          items {\n            id\n            name\n            quantity\n            price\n            imageUrl\n            tax\n            total\n          }\n        }\n        contact {\n          email\n          phone\n          name\n        }\n      }\n      paymentData {\n        transactions {\n          isActive\n          payments {\n            id\n            paymentSystemName\n            value\n            installments\n            referenceValue\n            lastDigits\n            url\n            group\n            tid\n            connectorResponses {\n              authId\n            }\n            bankIssuedInvoiceIdentificationNumber\n            redemptionCode\n            paymentOrigin\n          }\n        }\n      }\n      totals {\n        id\n        name\n        value\n      }\n    }\n  }\n':
     types.ServerOrderDetailsQueryDocument,
-  '\n  query ServerListOrdersQuery ($page: Int,$perPage: Int, $status: [String], $dateInitial: String, $dateFinal: String, $text: String, $clientEmail: String) {\n    listUserOrders (page: $page, perPage: $perPage, status: $status, dateInitial: $dateInitial, dateFinal: $dateFinal, text: $text, clientEmail: $clientEmail) {\n      list {\n        orderId\n        creationDate\n        clientName\n        items {\n          seller\n          quantity\n          description\n          ean\n          refId\n          id\n          productId\n          sellingPrice\n          price\n        }\n        totalValue\n        status\n        statusDescription\n        ShippingEstimatedDate\n        currencyCode\n      }\n      paging {\n        total\n        pages\n        currentPage\n        perPage\n      }\n    }\n  }\n':
+  '\n  query ServerListOrdersQuery ($page: Int,$perPage: Int, $status: [String], $dateInitial: String, $dateFinal: String, $text: String, $clientEmail: String) {\n    listUserOrders (page: $page, perPage: $perPage, status: $status, dateInitial: $dateInitial, dateFinal: $dateFinal, text: $text, clientEmail: $clientEmail) {\n      list {\n        orderId\n        creationDate\n        clientName\n        items {\n          seller\n          quantity\n          description\n          ean\n          refId\n          id\n          productId\n          sellingPrice\n          price\n        }\n        totalValue\n        status\n        statusDescription\n        ShippingEstimatedDate\n        currencyCode\n        customFields {\n          costCenter\n          poNumber\n          release\n          desktop\n        }\n      }\n      paging {\n        total\n        pages\n        currentPage\n        perPage\n      }\n    }\n  }\n':
     types.ServerListOrdersQueryDocument,
   '\n  mutation CancelOrderMutation($data: IUserOrderCancel!) {\n    cancelOrder(data: $data) {\n      data\n    }\n  }\n':
     types.CancelOrderMutationDocument,
@@ -176,7 +176,7 @@ export function gql(
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function gql(
-  source: '\n  query ServerListOrdersQuery ($page: Int,$perPage: Int, $status: [String], $dateInitial: String, $dateFinal: String, $text: String, $clientEmail: String) {\n    listUserOrders (page: $page, perPage: $perPage, status: $status, dateInitial: $dateInitial, dateFinal: $dateFinal, text: $text, clientEmail: $clientEmail) {\n      list {\n        orderId\n        creationDate\n        clientName\n        items {\n          seller\n          quantity\n          description\n          ean\n          refId\n          id\n          productId\n          sellingPrice\n          price\n        }\n        totalValue\n        status\n        statusDescription\n        ShippingEstimatedDate\n        currencyCode\n      }\n      paging {\n        total\n        pages\n        currentPage\n        perPage\n      }\n    }\n  }\n'
+  source: '\n  query ServerListOrdersQuery ($page: Int,$perPage: Int, $status: [String], $dateInitial: String, $dateFinal: String, $text: String, $clientEmail: String) {\n    listUserOrders (page: $page, perPage: $perPage, status: $status, dateInitial: $dateInitial, dateFinal: $dateFinal, text: $text, clientEmail: $clientEmail) {\n      list {\n        orderId\n        creationDate\n        clientName\n        items {\n          seller\n          quantity\n          description\n          ean\n          refId\n          id\n          productId\n          sellingPrice\n          price\n        }\n        totalValue\n        status\n        statusDescription\n        ShippingEstimatedDate\n        currencyCode\n        customFields {\n          costCenter\n          poNumber\n          release\n          desktop\n        }\n      }\n      paging {\n        total\n        pages\n        currentPage\n        perPage\n      }\n    }\n  }\n'
 ): typeof import('./graphql').ServerListOrdersQueryDocument
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.

package/@generated/graphql.ts

@@ -1559,6 +1559,7 @@ export type UserOrderFromList = {
   clientName: Maybe<Scalars['String']['output']>
   creationDate: Maybe<Scalars['String']['output']>
   currencyCode: Maybe<Scalars['String']['output']>
+  customFields: Maybe<UserOrderFromListCustomFields>
   deliveryDates: Maybe<Array<Maybe<Scalars['String']['output']>>>
   giftCardProviders: Maybe<Array<Maybe<Scalars['String']['output']>>>
   hostname: Maybe<Scalars['String']['output']>
@@ -2418,6 +2419,12 @@ export type ServerListOrdersQueryQuery = {
         sellingPrice: number | null
         price: number | null
       } | null> | null
+      customFields: {
+        costCenter: Array<string | null> | null
+        poNumber: Array<string | null> | null
+        release: Array<string | null> | null
+        desktop: Array<string | null> | null
+      } | null
     } | null> | null
     paging: {
       total: number | null
@@ -3474,7 +3481,7 @@ export const ServerOrderDetailsQueryDocument = {
 export const ServerListOrdersQueryDocument = {
   __meta__: {
     operationName: 'ServerListOrdersQuery',
-    operationHash: '9f48d9d4c1b6e6b32ac1f1c1b7b3819ac826dfe7',
+    operationHash: '7fba0a7d767fceed07b268597d68e5577d952b43',
   },
 } as unknown as TypedDocumentString<
   ServerListOrdersQueryQuery,

package/@generated/persisted-documents.json

@@ -2,7 +2,7 @@
   "4b33c5c07f440dc7489e55619dc2211a13786e72": "fragment ServerCollectionPage on Query { collection(slug: $slug) { id } } query ServerCollectionPageQuery($slug: String!) { collection(slug: $slug) { breadcrumbList { itemListElement { item name position } } meta { selectedFacets { key value } } seo { description title } } ...ServerCollectionPage }",
   "46103bee661405bde706d72126fdbf9b0a0c9e6e": "fragment CartProductItem on StoreProduct { additionalProperty { name propertyID value valueReference } brand { name } gtin image { alternateName url } isVariantOf { name productGroupID skuVariants { activeVariations availableVariations slugsMap } } name sku unitMultiplier } fragment ProductDetailsFragment_product on StoreProduct { additionalProperty { name propertyID value valueReference } brand { name } description gtin image { alternateName url } isVariantOf { name productGroupID skuVariants { activeVariations availableVariations slugsMap } } name offers { lowPrice lowPriceWithTaxes offers { availability listPrice listPriceWithTaxes price priceWithTaxes seller { identifier } } } id: productID sku unitMultiplier ...CartProductItem } fragment ServerProduct on Query { product(locator: $locator) { id: productID } } query ServerProductQuery($locator: [IStoreSelectedFacet!]!) { product(locator: $locator) { brand { name } breadcrumbList { itemListElement { item name position } } description gtin image { alternateName url } isVariantOf { productGroupID } name offers { highPrice lowPrice lowPriceWithTaxes offers { availability itemCondition price priceCurrency priceValidUntil seller { identifier } } priceCurrency } id: productID releaseDate seo { canonical description title } sku ...ProductDetailsFragment_product } ...ServerProduct }",
   "8b9b9c7703b0b9af12f47cb86dd3d2e8eb40c8fd": "query ServerOrderDetailsQuery($orderId: String!) { userOrder(orderId: $orderId) { allowCancellation clientProfileData { corporateName email firstName isCorporate lastName phone } customFields { fields { name refId value } id type } deliveryOptionsData { contact { email name phone } deliveryOptions { address { addressId addressType city complement country entityId geoCoordinates neighborhood number postalCode receiverName reference state street versionId } deliveryChannel deliveryCompany deliveryWindow { endDateUtc price startDateUtc } friendlyDeliveryOptionName friendlyShippingEstimate items { id imageUrl name price quantity tax total } pickupStoreInfo { additionalInfo address { addressId addressType city complement country entityId geoCoordinates neighborhood number postalCode receiverName reference state street versionId } dockId friendlyName isPickupStore } quantityOfDifferentItems selectedSla seller shippingEstimate shippingEstimateDate total } } orderId paymentData { transactions { isActive payments { bankIssuedInvoiceIdentificationNumber connectorResponses { authId } group id installments lastDigits paymentOrigin paymentSystemName redemptionCode referenceValue tid url value } } } status statusDescription storePreferencesData { currencyCode } totals { id name value } } }",
-  "9f48d9d4c1b6e6b32ac1f1c1b7b3819ac826dfe7": "query ServerListOrdersQuery($clientEmail: String, $dateFinal: String, $dateInitial: String, $page: Int, $perPage: Int, $status: [String], $text: String) { listUserOrders( page: $page perPage: $perPage status: $status dateInitial: $dateInitial dateFinal: $dateFinal text: $text clientEmail: $clientEmail ) { list { ShippingEstimatedDate clientName creationDate currencyCode items { description ean id price productId quantity refId seller sellingPrice } orderId status statusDescription totalValue } paging { currentPage pages perPage total } } }",
+  "7fba0a7d767fceed07b268597d68e5577d952b43": "query ServerListOrdersQuery($clientEmail: String, $dateFinal: String, $dateInitial: String, $page: Int, $perPage: Int, $status: [String], $text: String) { listUserOrders( page: $page perPage: $perPage status: $status dateInitial: $dateInitial dateFinal: $dateFinal text: $text clientEmail: $clientEmail ) { list { ShippingEstimatedDate clientName creationDate currencyCode customFields { costCenter desktop poNumber release } items { description ean id price productId quantity refId seller sellingPrice } orderId status statusDescription totalValue } paging { currentPage pages perPage total } } }",
   "e2b06da6840614d3c72768e56579b9d3b8e80802": "mutation CancelOrderMutation($data: IUserOrderCancel!) { cancelOrder(data: $data) { data } }",
   "c2b3f8bff73ebf6ac79d758c66cabbc21ba9fcc0": "fragment CartItem on StoreOffer { itemOffered { ...CartProductItem } listPrice listPriceWithTaxes price priceWithTaxes quantity seller { identifier } } fragment CartMessage on StoreCartMessage { status text } fragment CartProductItem on StoreProduct { additionalProperty { name propertyID value valueReference } brand { name } gtin image { alternateName url } isVariantOf { name productGroupID skuVariants { activeVariations availableVariations slugsMap } } name sku unitMultiplier } mutation ValidateCartMutation($cart: IStoreCart!, $session: IStoreSession!) { validateCart(cart: $cart, session: $session) { messages { ...CartMessage } order { acceptedOffer { ...CartItem } orderNumber shouldSplitItem } } }",
   "feb7005103a859e2bc8cf2360d568806fd88deba": "mutation SubscribeToNewsletter($data: IPersonNewsletter!) { subscribeToNewsletter(data: $data) { id } }",

package/@generated/schema.graphql

@@ -1365,6 +1365,7 @@ type UserOrderFromList {
   paymentApprovedDate: String
   readyForHandlingDate: String
   deliveryDates: [String]
+  customFields: UserOrderFromListCustomFields
 }
 
 type UserOrderCustomData {

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.48.0](https://github.com/vtex/faststore/compare/v3.47.2...v3.48.0) (2025-05-26)
+
+### Features
+
+- list orders custom fields + design improvements SFS-2513 SFS-2515 ([#2854](https://github.com/vtex/faststore/issues/2854)) ([20d5471](https://github.com/vtex/faststore/commit/20d547178f2e2a6ae1a7dde4d4e1b5dcbae5e4d6))
+
+## [3.47.1](https://github.com/vtex/faststore/compare/v3.47.0...v3.47.1) (2025-05-22)
+
+**Note:** Version bump only for package @faststore/core
+
 # [3.47.0](https://github.com/vtex/faststore/compare/v3.46.0...v3.47.0) (2025-05-22)
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.47.0",
+  "version": "3.48.0",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -44,11 +44,11 @@
     "@envelop/graphql-jit": "^8.0.3",
     "@envelop/parser-cache": "^6.0.2",
     "@envelop/validation-cache": "^6.0.2",
-    "@faststore/api": "^3.47.0",
+    "@faststore/api": "^3.48.0",
     "@faststore/graphql-utils": "^3.45.0",
     "@faststore/lighthouse": "^3.45.0",
     "@faststore/sdk": "^3.46.0",
-    "@faststore/ui": "^3.45.0",
+    "@faststore/ui": "^3.47.1",
     "@graphql-codegen/cli": "5.0.2",
     "@graphql-codegen/client-preset": "4.2.6",
     "@graphql-codegen/typescript": "4.0.7",
@@ -105,5 +105,5 @@
     "ts-jest": "29.1.1",
     "typescript": "5.3.2"
   },
-  "gitHead": "5026c7c2ab6a0d45ea0f8fdfec0a2f740a33c69b"
+  "gitHead": "1e0cd51a61f29ceeaff71af91939bbfbc714347a"
 }

package/src/components/account/orders/MyAccountListOrders/MyAccountListOrdersTable/MyAccountListOrdersTable.tsx

@@ -1,12 +1,15 @@
 import { Button, Icon } from '@faststore/ui'
 import type { ServerListOrdersQueryQuery } from '@generated/graphql'
 import { useRouter } from 'next/router'
+import { useState } from 'react'
 
 import MyAccountStatusBadge from 'src/components/account/components/MyAccountStatusBadge'
 import { useFormatPrice } from 'src/components/account/utils/useFormatPrice'
 import { useSession } from 'src/sdk/session'
 import useScreenResize from 'src/sdk/ui/useScreenResize'
 
+const MAX_COST_CENTERS = 5
+
 function formatShippingDate(date: string, locale: string) {
   return new Date(date).toLocaleDateString(locale, {
     year: 'numeric',
@@ -105,6 +108,7 @@ export default function MyAccountListOrdersTable({
   const { isDesktop } = useScreenResize()
   const { locale } = useSession()
   const formatPrice = useFormatPrice()
+  const [expandedRows, setExpandedRows] = useState<Record<string, boolean>>({})
 
   const handleOrderDetail = ({ orderId }: { orderId: string }) => {
     router.push({
@@ -112,6 +116,13 @@ export default function MyAccountListOrdersTable({
     })
   }
 
+  const handleToggleExpand = (orderId: string) => {
+    setExpandedRows((prev) => ({
+      ...prev,
+      [orderId]: !prev[orderId],
+    }))
+  }
+
   return (
     <>
       <table data-fs-list-orders-table>
@@ -120,14 +131,13 @@ export default function MyAccountListOrdersTable({
             data-fs-list-orders-table-header-row
             data-fs-list-orders-table-row
           >
-            <th data-fs-list-orders-table-header-cell>Order</th>
             {isDesktop && (
               <>
+                <th data-fs-list-orders-table-header-cell>Order</th>
                 <th data-fs-list-orders-table-header-cell>Ordered by</th>
-                <th data-fs-list-orders-table-header-cell>Cost Center</th>
                 <th data-fs-list-orders-table-header-cell>Release</th>
                 <th data-fs-list-orders-table-header-cell>PO number</th>
-                <th data-fs-list-orders-table-header-cell>Delivery by</th>
+                <th data-fs-list-orders-table-header-cell>Cost Center</th>
               </>
             )}
             <th data-fs-list-orders-table-header-cell>
@@ -136,70 +146,123 @@ export default function MyAccountListOrdersTable({
           </tr>
         </thead>
         <tbody data-fs-list-orders-table-body>
-          {listOrders.list.map((item) => (
-            // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
-            <tr
-              data-fs-list-orders-table-body-row
-              data-fs-list-orders-table-row
-              key={item.orderId}
-              onClick={() => handleOrderDetail({ orderId: item.orderId })}
-              role="button"
-            >
-              <td data-fs-list-orders-table-cell>
-                <div data-fs-list-orders-table-product-info>
-                  <p data-fs-list-orders-table-product-info-order-id>
-                    {item.orderId || '-'}
-                  </p>
-                  <p data-fs-list-orders-table-product-info-order-date>
-                    Placed on{' '}
-                    {item.creationDate
-                      ? formatShippingDate(item.creationDate, locale)
-                      : '-'}
-                  </p>
-                  <p data-fs-list-orders-table-product-info-order-total>
-                    Total: {formatPrice(item.totalValue, item.currencyCode)}
-                  </p>
-                </div>
-              </td>
+          {listOrders.list.map((item) => {
+            const costCenters = item?.customFields?.costCenter || []
+            const isExpanded = expandedRows[item.orderId]
+            const shouldShowButton = costCenters.length > MAX_COST_CENTERS
+            const displayedCostCenters = isExpanded
+              ? costCenters
+              : costCenters.slice(0, 5)
+            return (
+              // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
+              <tr
+                data-fs-list-orders-table-body-row
+                data-fs-list-orders-table-row
+                key={item.orderId}
+                onClick={() => handleOrderDetail({ orderId: item.orderId })}
+                role="button"
+              >
+                <td data-fs-list-orders-table-cell>
+                  <div data-fs-list-orders-table-product-info>
+                    <p data-fs-list-orders-table-product-info-order-id>
+                      {item.orderId || '-'}
+                    </p>
+                    <p data-fs-list-orders-table-product-info-order-date>
+                      Placed on{' '}
+                      {item.creationDate
+                        ? formatShippingDate(item.creationDate, locale)
+                        : '-'}
+                    </p>
+                    {isDesktop && (
+                      <p data-fs-list-orders-table-product-info-order-delivery>
+                        Delivery by{' '}
+                        {item.ShippingEstimatedDate
+                          ? formatShippingDate(
+                              item.ShippingEstimatedDate,
+                              locale
+                            )
+                          : '-'}
+                      </p>
+                    )}
 
-              {isDesktop && (
-                <>
-                  <td data-fs-list-orders-table-cell>{item?.clientName}</td>
-                  <td data-fs-list-orders-table-cell>
-                    <p>(Cost Center)</p>
-                  </td>
-                  <td data-fs-list-orders-table-cell>
-                    <p>(Release)</p>
-                  </td>
-                  <td data-fs-list-orders-table-cell>
-                    <p>(PO Number)</p>
-                  </td>
-                  <td data-fs-list-orders-table-cell>
-                    {item.ShippingEstimatedDate
-                      ? formatShippingDate(item.ShippingEstimatedDate, locale)
-                      : '-'}
-                  </td>
-                </>
-              )}
+                    <p data-fs-list-orders-table-product-info-order-total>
+                      Total: {formatPrice(item.totalValue, item.currencyCode)}
+                    </p>
+                  </div>
+                </td>
 
-              <td data-fs-list-orders-table-cell>
-                <MyAccountStatusBadge
-                  status={item.status}
-                  statusFallback={item.statusDescription}
-                />
-                {!isDesktop && (
-                  <p>
-                    {item.ShippingEstimatedDate
-                      ? `Delivery by ${formatShippingDate(
-                          item.ShippingEstimatedDate,
-                          locale
-                        )}`
-                      : ''}
-                  </p>
+                {isDesktop && (
+                  <>
+                    <td data-fs-list-orders-table-cell>{item?.clientName}</td>
+                    <td data-fs-list-orders-table-cell>
+                      {item?.customFields?.release?.map((field) => (
+                        <p key={field}>{field}</p>
+                      ))}
+                    </td>
+                    <td data-fs-list-orders-table-cell>
+                      {item?.customFields?.poNumber?.map((field) => (
+                        <p key={field}>{field}</p>
+                      ))}
+                    </td>
+                    <td data-fs-list-orders-table-cell>
+                      {displayedCostCenters.map((field) => (
+                        <p key={field}>{field}</p>
+                      ))}
+                      {shouldShowButton && (
+                        <Button
+                          data-fs-list-orders-table-expand-button
+                          size="small"
+                          variant="primary"
+                          inverse
+                          iconPosition="right"
+                          icon={
+                            isExpanded ? (
+                              <Icon
+                                width={16}
+                                height={16}
+                                name="CaretUp"
+                                aria-label="Collapse"
+                              />
+                            ) : (
+                              <Icon
+                                width={16}
+                                height={16}
+                                name="CaretDown"
+                                aria-label="Expand"
+                              />
+                            )
+                          }
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            handleToggleExpand(item.orderId)
+                          }}
+                        >
+                          {isExpanded ? 'View less' : 'View all'}
+                        </Button>
+                      )}
+                    </td>
+                  </>
                 )}
-              </td>
-            </tr>
-          ))}
+
+                <td data-fs-list-orders-table-cell>
+                  <MyAccountStatusBadge
+                    status={item.status}
+                    statusFallback={item.statusDescription}
+                  />
+                  {!isDesktop && (
+                    <p>
+                      {item.ShippingEstimatedDate
+                        ? `Delivery by ${formatShippingDate(
+                            item.ShippingEstimatedDate,
+                            locale
+                          )}`
+                        : ''}
+                    </p>
+                  )}
+                </td>
+              </tr>
+            )
+          })}
         </tbody>
       </table>
       {isDesktop && (

package/src/components/account/orders/MyAccountListOrders/MyAccountListOrdersTable/styles.scss

@@ -16,7 +16,7 @@
   --fs-list-orders-table-product-info-font-weight  : var(--fs-text-weight-semibold);
   --fs-list-orders-table-product-info-margin-top   : var(--fs-spacing-1);
   --fs-list-orders-table-product-info-line-height  : var(--fs-text-size-1);
-  --fs-list-orders-table-cell-padding              : var(--fs-spacing-4) var(--fs-spacing-2);
+  --fs-list-orders-table-cell-padding              : var(--fs-spacing-4) var(--fs-spacing-2) var(--fs-spacing-3);
   --fs-list-orders-table-cell-padding-mobile       : var(--fs-spacing-3) var(--fs-spacing-1);
   --fs-list-orders-table-cell-color                : var(--fs-color-neutral-6);
   --fs-list-orders-table-row-border-bottom         : var(--fs-border-width) solid var(--fs-color-neutral-3);
@@ -57,6 +57,7 @@
 
   [data-fs-list-orders-table-header-cell]:last-child,[data-fs-list-orders-table-cell]:last-child {
     width: var(--fs-list-orders-table-last-child-width);
+    text-align: end;
 
     @include media("<notebook") {
       display: flex;
@@ -68,7 +69,7 @@
     }
   }
 
-  [data-fs-list-orders-table-product-info-order-id], [data-fs-list-orders-table-product-info-order-date], [data-fs-list-orders-table-product-info-order-total] {
+  [data-fs-list-orders-table-product-info-order-id], [data-fs-list-orders-table-product-info-order-date], [data-fs-list-orders-table-product-info-order-delivery], [data-fs-list-orders-table-product-info-order-total] {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -80,7 +81,7 @@
     vertical-align: middle;
   }
 
-  [data-fs-list-orders-table-product-info-order-date] {
+  [data-fs-list-orders-table-product-info-order-date], [data-fs-list-orders-table-product-info-order-total] {
     margin-top: var(--fs-list-orders-table-product-info-margin-top);
     line-height: var(--fs-list-orders-table-product-info-line-height);
   }
@@ -88,6 +89,7 @@
   [data-fs-list-orders-table-header-cell], [data-fs-list-orders-table-cell] {
     padding: var(--fs-list-orders-table-cell-padding);
     text-align: left;
+    vertical-align: top;
     border: none;
 
     @include media("<notebook") {
@@ -96,6 +98,7 @@
   }
 
   [data-fs-list-orders-table-cell]:not(:first-child):not(:last-child) {
+    padding-top: calc(var(--fs-spacing-4) + var(--fs-spacing-0));
     color: var(--fs-list-orders-table-cell-color);
   }
 
@@ -117,6 +120,27 @@
   [data-fs-list-orders-table-body-row]:hover, [data-fs-list-orders-table-body-row]:focus {
     background-color: var(--fs-list-orders-table-row-hover-bg);
   }
+
+  [data-fs-list-orders-table-expand-button] {
+    --fs-list-orders-table-expand-width: 6.25rem; // 100px
+    --fs-list-orders-table-expand-margin-top: -0.75rem;
+    --fs-list-orders-table-expand-margin-left: -1.0625rem; // 17px to rem;
+
+    width: var(--fs-list-orders-table-expand-width);
+    margin-top: var(--fs-list-orders-table-expand-margin-top);
+
+    [data-fs-button-wrapper] {
+      width: max-content;
+      margin-left: var(--fs-list-orders-table-expand-margin-left);
+      font-size: var(--fs-text-size-tiny);
+      background-color: transparent;
+      transition: unset;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+  }
 }
 
 [data-fs-list-orders-table-pagination] {

package/src/components/account/orders/MyAccountListOrders/MyAccountSelectedTags/MyAccountSelectedTags.tsx

@@ -97,19 +97,15 @@ function MyAccountSelectedTags({
     <>
       {hasFilters && (
         <div data-fs-list-orders-selected-tags>
-          <div data-fs-list-orders-selected-tags-pills>
-            <Tags filters={filters} onRemoveFilter={onRemoveFilter} />
-          </div>
-          <div data-fs-list-orders-selected-tags-clear-all>
-            <Button
-              variant="tertiary"
-              size="small"
-              data-fs-list-orders-selected-tags-clear-all-button
-              onClick={onClearAll}
-            >
-              Clear All
-            </Button>
-          </div>
+          <Tags filters={filters} onRemoveFilter={onRemoveFilter} />
+          <Button
+            variant="tertiary"
+            size="small"
+            data-fs-list-orders-selected-tags-clear-all-button
+            onClick={onClearAll}
+          >
+            Clear All
+          </Button>
         </div>
       )}
     </>

package/src/components/account/orders/MyAccountListOrders/MyAccountSelectedTags/styles.scss

@@ -20,22 +20,12 @@
 
   --fs-list-orders-selected-tags-clear-all-min-width : 102px;
 
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
   display: flex;
+  flex-wrap: wrap;
   gap: var(--fs-list-orders-selected-tags-gap);
-  align-items: baseline;
-  min-height: var(--fs-list-orders-selected-tags-min-height);
+  margin-top: var(--fs-list-orders-selected-tags-gap);
   font-size: var(--fs-list-orders-selected-tags-text-size);
 
-  [data-fs-list-orders-selected-tags-pills] {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--fs-list-orders-selected-tags-gap);
-  }
-
   [data-fs-list-orders-selected-tag] {
     display: flex;
     align-items: center;
@@ -59,11 +49,20 @@
     cursor: pointer;
   }
 
-  [data-fs-list-orders-selected-tags-clear-all] {
-    min-width: var(--fs-list-orders-selected-tags-clear-all-min-width);
-  }
-
   [data-fs-list-orders-selected-tags-clear-all-button] {
     --fs-button-height: 1.5rem;
+
+    --fs-list-orders-selected-tags-clear-all-button-margin-left: -0.5rem;
+
+    [data-fs-button-wrapper] {
+      width: max-content;
+      margin-top: var(--fs-list-orders-selected-tags-clear-all-button-margin-left);
+      background-color: transparent;
+      transition: unset;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
   }
 }

package/src/components/account/orders/MyAccountOrderDetails/MyAccountDeliveryOptionAccordion/MyAccountDeliveryOptionAccordion.tsx

@@ -75,9 +75,9 @@ function MyAccountDeliveryOptionAccordion({
                 image={item.imageUrl || ''}
                 quantity={item.quantity}
                 name={item.name}
-                field={customFields
-                  ?.find((cf) => cf.id === item.id)
-                  ?.fields?.find((f) => f.name === 'costCenter')}
+                field={
+                  customFields?.find((cf) => cf.id === item.id)?.fields?.[0]
+                }
                 price={formatPrice(item.price ?? 0, currencyCode)}
                 tax={formatPrice(item.tax ?? 0, currencyCode)}
                 total={formatPrice(item.total ?? 0, currencyCode)}

package/src/pages/account/orders/index.tsx

@@ -95,6 +95,12 @@ const query = gql(`
         statusDescription
         ShippingEstimatedDate
         currencyCode
+        customFields {
+          costCenter
+          poNumber
+          release
+          desktop
+        }
       }
       paging {
         total