Cannot add items with Cart Item Modifiers to cart

[maennis-ep]

Step 3: Describe the problem:

In the current implementation of productdisplayitem.main.tsx, if a user has more than just the default cart, adding an item with Cart Item Modifiers to your cart will fail. This is caused by using the selected carts additemstocart resource which does not support Cart Item Modifiers, as opposed to the items addtocartforms resource which does.

Steps to reproduce:

1. Log in as an Authenticated User
2. Create a second cart
3. Try to add a product with Cart Item Modifiers to the cart

Observed Results:

We get the message Item '' is a configurable product. Please add it individually using 'additemtocart' form.

Expected Results:

That it gets added to the cart with the appropriate Cart Item Modifier values

Relevant Code:

The function that calls the additemstocart resource.

  addToSelectedCart(cart, onCountChange) {
    const cartUrl = cart._additemstocartform[0].self.uri;
    const { itemQuantity, productData } = this.state;
    this.setState({ addToCartLoading: true });
    login().then(() => {
      const body: { [key: string]: any } = {};
      body.items = { code: productData._code[0].code, quantity: itemQuantity };
      cortexFetch(cartUrl,
        {
          method: 'post',
          headers: {
            'Content-Type': 'application/json',
            Authorization: localStorage.getItem(`${Config.cortexApi.scope}_oAuthToken`),
          },
          body: JSON.stringify(body),
        })
        .then((res) => {
          if (res.status === 200 || res.status === 201) {
            this.setState({ addToCartLoading: false });
            const cartName = cart._descriptor[0].name ? cart._descriptor[0].name : intl.get('default');
            onCountChange(cartName, itemQuantity);
          }
        })
        .catch((error) => {
          // eslint-disable-next-line no-console
          console.error(error.message);
          this.setState({ addToCartLoading: false });
        });
    });
  }

[plundaahl-ep]

For reproduction steps, you can actually skip step 2. This occurs any time the API contains a carts resource.

[maennis-ep]

Fixed in https://github.com/elasticpath/react-pwa-reference-storefront/pull/575