[NX-24] Display PDP option types sorted by position from Spree

framework/spree/types/index.ts

@@ -6,6 +6,7 @@ import type {
 } from '@spree/storefront-api-v2-sdk/types/interfaces/JsonApi'
 import type { ResultResponse } from '@spree/storefront-api-v2-sdk/types/interfaces/ResultResponse'
 import type { Response } from '@vercel/fetch'
+import type { ProductOption } from '@commerce/types/product'
 
 export type UnknownObjectValues = Record<string, unknown>
 
@@ -109,3 +110,5 @@ export interface ProductSlugAttr extends JsonApiDocument {
 export interface IProductsSlugs extends JsonApiListResponse {
   data: ProductSlugAttr[]
 }
+
+export type ExpandedProductOption = ProductOption & { position: number }

framework/spree/utils/expand-options.ts

@@ -1,6 +1,5 @@
 import type {
-  ProductOption,
+  ProductOptionValues
-  ProductOptionValues,
 } from '@commerce/types/product'
 import type {
   JsonApiDocument,
@@ -9,17 +8,18 @@ import type {
 import { jsonApi } from '@spree/storefront-api-v2-sdk'
 import type { RelationType } from '@spree/storefront-api-v2-sdk/types/interfaces/Relationships'
 import SpreeResponseContentError from '../errors/SpreeResponseContentError'
-import type { OptionTypeAttr } from '@framework/types'
+import type { OptionTypeAttr, ExpandedProductOption } from '@framework/types'
+import sortOptionsByPosition from '@framework/utils/sort-option-types'
 
-const isColorProductOption = (productOption: ProductOption) => {
+const isColorProductOption = (productOption: ExpandedProductOption) => {
   return productOption.displayName === 'Color'
 }
 
 const expandOptions = (
   spreeSuccessResponse: JsonApiResponse,
   spreeOptionValue: JsonApiDocument,
-  accumulatedOptions: ProductOption[]
+  accumulatedOptions: ExpandedProductOption[]
-): ProductOption[] => {
+): ExpandedProductOption[] => {
   const spreeOptionTypeIdentifier = spreeOptionValue.relationships.option_type
     .data as RelationType
 
@@ -27,7 +27,7 @@ const expandOptions = (
     (option) => option.id == spreeOptionTypeIdentifier.id
   )
 
-  let option: ProductOption
+  let option: ExpandedProductOption
 
   if (existingOptionIndex === -1) {
     const spreeOptionType = jsonApi.findDocument<OptionTypeAttr>(
@@ -45,6 +45,7 @@ const expandOptions = (
       __typename: 'MultipleChoiceOption',
       id: spreeOptionType.id,
       displayName: spreeOptionType.attributes.presentation,
+      position: spreeOptionType.attributes.position,
       values: [],
     }
   } else {
@@ -93,7 +94,9 @@ const expandOptions = (
       values: expandedOptionValues,
     }
 
-    return expandedOptions
+    const sortedOptions = sortOptionsByPosition(expandedOptions)
+
+    return sortedOptions
   }
 
   return accumulatedOptions

framework/spree/utils/normalize-product.ts

@@ -1,7 +1,6 @@
 import type {
   Product,
   ProductImage,
-  ProductOption,
   ProductPrice,
   ProductVariant,
 } from '@commerce/types/product'
@@ -18,6 +17,7 @@ import MissingOptionValueError from '../errors/MissingOptionValueError'
 import type { SpreeSdkResponse, VariantAttr } from '@framework/types'
 import { jsonApi } from '@spree/storefront-api-v2-sdk'
 import { JsonApiDocument } from '@spree/storefront-api-v2-sdk/types/interfaces/JsonApi'
+import type { ExpandedProductOption } from '@framework/types'
 
 const placeholderImage = requireConfigValue('productPlaceholderImageUrl') as
   | string
@@ -58,7 +58,7 @@ const normalizeProduct = (
     hasNonMasterVariants
 
   let variants: ProductVariant[]
-  let options: ProductOption[] = []
+  let options: ExpandedProductOption[] = []
 
   const spreeVariantRecords = jsonApi.findRelationshipDocuments(
     spreeSuccessResponse,
@@ -67,7 +67,7 @@ const normalizeProduct = (
   )
 
   variants = spreeVariantRecords.map((spreeVariantRecord) => {
-    let variantOptions: ProductOption[] = []
+    let variantOptions: ExpandedProductOption[] = []
 
     if (showOptions) {
       const spreeOptionValues = jsonApi.findRelationshipDocuments(

framework/spree/utils/sort-option-types.ts

@@ -0,0 +1,9 @@
+import type { ExpandedProductOption } from '@framework/types'
+
+const sortOptionsByPosition = (options: ExpandedProductOption[]): ExpandedProductOption[] => {
+  return options.sort((firstOption, secondOption) => {
+    return firstOption.position - secondOption.position
+  })
+}
+
+export default sortOptionsByPosition