Merge pull request #1031 from rebecastilho/fix/sortVariations

sort variations options sku selector

Author: danzanzini

docs/SKUSelector.md

@@ -49,6 +49,7 @@ The `sku-selector` block is mainly used in Product Details Pages (PDPs) to displ
 | `disableUnavailableSelectOptions`     | `boolean`   | Whether a product variation that leads to an impossible product combination should be displayed with the disabled attribute when `displayMode` is set to `select`. By default, all select options are without the disabled attribute set based on the type of variation | `false`  |
 | `displayMode` | `enum` | Defines how the product variation names will be displayed (it doesn't apply to product variation images). Possible values are: `default` (displays all variation names), `select` (only displays the selected variation name) or `slider` (displays all variation names in a slider when the number of available options in greater than the value defined in the `sliderDisplayThreshold` prop). Notice that this prop is _responsive_, so you can declare an object as its value specifying a value for each breakpoint (`desktop` and `mobile`). | `default`  |
 | `hideImpossibleCombinations`     | `boolean`   | Defines if a product variation should be clickable (`true`) or not (`false`). If `true`, the variation won't be displayed. If `false`, the variation is displayed with less opacity. For example, there are two colors for a pair of sneakers: pink and white, and if the pink sneaker is available for only one size, the other sizes won't be displayed (`true`).| `true`  |
+| `sortVariationsByLabel`     | `boolean`   | Defines if the variations are to be sorted in alphabetical order.| `false`  |
 | `imageHeight`  | `number` | `object` | Height (in `px`) of the product thumbnail image. You can declare an object as its value in case you want to define a height for each device (`desktop` and `mobile`). | `undefined` |
 | `imageWidth` | `number` | `object` | Width (in `px`) of the product thumbnail image. You can declare an object as its value in case you want to define a width for each device (`desktop` and `mobile`).  | `undefined`  |
 | `initialSelection` | `enum`  | Controls the user initial selection for available variations when product page is fully loaded. Possible values are: `complete` (selects the first available SKU's variation values), `image` (selects the first available image variation) or `empty` (no variations will be selected when the page is loaded).  | `complete` |

package.json

@@ -39,4 +39,4 @@
   "resolutions": {
     "glob-parent": "^6.0.1"
   }
-}
+}

react/__tests__/components/SKUSelector.test.tsx

@@ -1408,4 +1408,54 @@ describe('<SKUSelector />', () => {
 
     expect(queryByText('Yellow')).toBeFalsy()
   })
+
+  it('must order sku specification to be sorted in alphabetical order', async () => {
+    const skuItems = [
+      {
+        itemId: '1',
+        name: 'Gray Shoe',
+        variations: [
+          { name: 'Size', values: ['43'] },
+          { name: 'Color', values: ['Gray'] },
+        ],
+        images: [],
+      },
+      {
+        itemId: '4',
+        name: 'Gray Shoe',
+        variations: [
+          {
+            name: 'Size',
+            values: ['42'],
+          },
+          { name: 'Color', values: ['Gray'] },
+        ],
+        images: [],
+      },
+      {
+        itemId: '4',
+        name: 'Gray Shoe',
+        variations: [
+          {
+            name: 'Size',
+            values: ['41'],
+          },
+          { name: 'Color', values: ['Gray'] },
+        ],
+        images: [],
+      },
+    ]
+
+    const { container } = renderComponent({
+      sortVariationsByLabel: true,
+      skuSelected: skuItems[0],
+      skuItems,
+    })
+
+    const options = container.querySelectorAll('.skuSelectorItemTextValue')
+
+    expect(options[0]).toHaveTextContent('41')
+    expect(options[1]).toHaveTextContent('42')
+    expect(options[2]).toHaveTextContent('43')
+  })
 })

react/components/SKUSelector/Wrapper.tsx

@@ -169,6 +169,7 @@ interface Props {
   sliderDisplayThreshold?: number
   sliderArrowSize?: number
   sliderItemsPerPage?: ResponsiveValuesTypes.ResponsiveValue<number>
+  sortVariationsByLabel?: boolean
   /** Used to override default CSS handles */
   classes?: CssHandlesTypes.CustomClasses<typeof SKU_SELECTOR_CSS_HANDLES>
 }
@@ -260,6 +261,7 @@ function SKUSelectorWrapper(props: Props) {
         sliderItemsPerPage={props.sliderItemsPerPage}
         sliderArrowSize={props.sliderArrowSize}
         sliderDisplayThreshold={props.sliderDisplayThreshold}
+        sortVariationsByLabel={props.sortVariationsByLabel}
       />
     </SKUSelectorCssHandlesProvider>
   )

react/components/SKUSelector/components/SKUSelector.tsx

@@ -67,6 +67,7 @@ interface Props {
   sliderDisplayThreshold: number
   sliderArrowSize: number
   sliderItemsPerPage: ResponsiveValuesTypes.ResponsiveValue<number>
+  sortVariationsByLabel?: boolean
 }
 
 function isSkuAvailable(item?: SelectorProductItem) {
@@ -117,6 +118,7 @@ interface AvailableVariationParams {
   skuItems: SelectorProductItem[]
   hideImpossibleCombinations: boolean
   disableUnavailableSelectOptions: boolean
+  sortVariationsByLabel: boolean
 }
 
 const parseOptionNameToDisplayOption =
@@ -212,6 +214,7 @@ const variationNameToDisplayVariation =
     variationCount,
     hideImpossibleCombinations,
     disableUnavailableSelectOptions,
+    sortVariationsByLabel,
   }: {
     variations: Variations
     selectedVariations: SelectedVariations
@@ -221,6 +224,7 @@ const variationNameToDisplayVariation =
     variationCount: number
     hideImpossibleCombinations: boolean
     disableUnavailableSelectOptions: boolean
+    sortVariationsByLabel: boolean
   }) =>
   (variationName: string): DisplayVariation => {
     const name = variationName
@@ -240,6 +244,12 @@ const variationNameToDisplayVariation =
       )
       .filter(Boolean) as DisplayOption[]
 
+    if (sortVariationsByLabel) {
+      options.sort((a, b) => {
+        return a.label < b.label ? -1 : a.label > b.label ? 1 : 0
+      })
+    }
+
     return { name, originalName, options }
   }
 
@@ -252,6 +262,7 @@ const getAvailableVariations = ({
   skuItems,
   hideImpossibleCombinations,
   disableUnavailableSelectOptions,
+  sortVariationsByLabel,
 }: AvailableVariationParams): DisplayVariation[] => {
   const variationCount = Object.keys(variations).length
 
@@ -265,6 +276,7 @@ const getAvailableVariations = ({
       variationCount,
       hideImpossibleCombinations,
       disableUnavailableSelectOptions,
+      sortVariationsByLabel,
     })
   )
 }
@@ -303,6 +315,7 @@ function SKUSelector({
   sliderDisplayThreshold,
   sliderArrowSize,
   sliderItemsPerPage,
+  sortVariationsByLabel = false,
 }: Props) {
   const { handles } = useSKUSelectorCssHandles()
   const variationsSpacing = getValidMarginBottom(marginBottomProp)
@@ -334,6 +347,7 @@ function SKUSelector({
       skuItems,
       hideImpossibleCombinations,
       disableUnavailableSelectOptions,
+      sortVariationsByLabel,
     }),
     [
       variations,
@@ -343,6 +357,7 @@ function SKUSelector({
       skuItems,
       hideImpossibleCombinations,
       disableUnavailableSelectOptions,
+      sortVariationsByLabel,
     ]
   )
 

react/components/SKUSelector/index.tsx

@@ -186,6 +186,7 @@ interface Props {
   sliderDisplayThreshold?: number
   sliderArrowSize?: number
   sliderItemsPerPage?: ResponsiveValuesTypes.ResponsiveValue<number>
+  sortVariationsByLabel?: boolean
 }
 
 const getNewSelectedVariations = (
@@ -247,6 +248,7 @@ const SKUSelectorContainer: FC<Props> = ({
   initialSelection = 'complete',
   sliderDisplayThreshold = 3,
   sliderArrowSize = 12,
+  sortVariationsByLabel = false,
   sliderItemsPerPage = {
     desktop: 3,
     tablet: 2,
@@ -422,6 +424,7 @@ const SKUSelectorContainer: FC<Props> = ({
       sliderDisplayThreshold={sliderDisplayThreshold}
       sliderArrowSize={sliderArrowSize}
       sliderItemsPerPage={sliderItemsPerPage}
+      sortVariationsByLabel={sortVariationsByLabel}
     />
   )
 }