[commercetools] Product preview is limited to 20 products

[img-alc]

Issue description
Adding more than 20 products to a field leads to "Product missing" message in products preview

Steps to reproduce

1. Create a new entry (content type must have a field with commerce tools app installed for products widget)
2. Add more than 20 products to the field connected to commerce tools
3. Save
4. Only 20 products are properly shown, while exceeding products show the message mentioned before

Screenshot

Expected behavior
I expected all selected products to show correctly in the preview, the error message is misleading. The products do exist and should render (name & image).

Root cause
Commerce tools api response is limited to 20 entries. You have to provide the offset in order to fetch remaining results. Example of a response:

The logic to fetch the products preview is not considering the number of results, always returning at most 20 entries (link).

export async function fetchProductPreviews(
  skus: string[],
  config: ConfigurationParameters
): Promise<Product[]> {
  if (skus.length === 0) {
    return [];
  }

  const client = createClient(config);
  const response = await client
    .productProjections()
    .search()
    .get({
      queryArgs: {
        'filter.query': [`variants.sku:${skus.map((sku) => `"${sku}"`).join(',')}`],
      },
    })
    .execute();

  if (response.statusCode === 200) {
    const products = response.body.results.map(productTransformer(config));
    const foundSKUs = products.map((product: Product) => product.sku);
    const missingProducts = skus
      .filter((sku) => !foundSKUs.includes(sku))
      .map((sku) => ({
        sku,
        image: '',
        id: '',
        name: '',
        isMissing: true,
      }));
    return [...products, ...missingProducts];
  }
  throw new Error(`Request failed with status ${response.statusCode}`);
}

[colomolo]

@img-alc Thanks for opening the issue. We now fetching max possible amount of products. Should be enough for most cases.