[BUG] Color Refinements not bucketed or with bucket type none throw error

[clavery]

Summary

If a color refinement (i.e. c_refinementColor which uses the ColorRefinements component) is configured to use bucket type: None or has unbucketed values that are shown (both these situations are common, especially the latter) the ColorRefinements component will throw an error:

TypeError: Cannot read property 'toLowerCase' of undefined
    at eval (webpack-internal:///./app/pages/product-list/partials/color-refinements.jsx:63:100)
    at Array.map (<anonymous>)
    at ColorRefinements (webpack-internal:///./app/pages/product-list/partials/color-refinements.jsx:39:76)

This is because the response will NOT include a presentationId for any unbucketed values (or at all if the refinement is configured to not bucket).

Recommend falling back to the value of the refinement if presentationId is not available.

The latter case (unbucketed values) is common with merchants as often new values can arrive in the incoming catalog feeds before they are bucketed by the merchant (in fact there's a system job that alerts merchants of this but they may not get to it before it lands on production)

Steps To Reproduce

• Configure refinementColor in BM: either a) delete one of the existing buckets (i.e. blue) or b) change the entire refinement bucket type to None (NOTE: this will remove all buckets making it harder to get them back to the original configuration; recommend exporting catalog first) or c) (not tested yet) remove the presentationId from a bucket

Expected result

The page does not error

Actual result

Exception (internal server error)

System Information (as applicable)

Browser:
Node version:
pwa-kit version: 2.5.0
Desktop OS:
Mobile Device Info:

Additional information

[git2gus]

This issue has been linked to a new work item: W-12538145

[vmarta]

Thanks @clavery for reporting this bug.