Remove incompatible components during garment/product switching event in the customizer.

[ghost]

Create a function that's called after a customizer product switch event, but before rendering the new product in the customizer view. In each of the products there is a field called "compatible components," this field is used to populate the customizer.

1. Check this.state.assembly either in product list view or product canvas view
2. Iterate and remove SKU that isn't in supported compatible products list
3. Have something that generates full map of compatible components for searching
4. Maybe have another alternative map based on compatible component options
5. Pass in full list of hydrated components

Notes Compatible products doesn't list SKU's prefers to overarching product families, each with their own options component_picker div contains handleOptionChange called, then populateComponents called

Priority

1. Remove not supported
2. Remove anything outside the bounds item

[ghost]

Notes on ProductComponentPicker.jsx

1. compatible_components
   • this.props.product.compatible_components
   • An array of strings representing all of the valid SKU's for a product
   • Example: ["letter_sequin_gold2", "letter_sequin_white2", ...]
2. compatible_component_map
   • this.props.compatible_component_map
   • An object containing keys-value pairs of SKU's and Components
   • Component example: {sku: "letter_embroidery_black_2", props: {…}, assembly: Array(0), options: {…}, quantity: 0}
3. selected_product
   • Array: ["os_hoodie", "Black", "S"]

[graphicsforge]

Step 2 in the description Remove anything outside the bounds item could probably get removed from this issue, and split off into it's own issue? This is already a large amount of work!