Remove featured product list section from product list page - frontend changes

[federicobadini]

closes #1483

This PR removes the featured-product-list section since the new mockups do not include that component anymore.

Since the featured-product-list section was relying on Algolia, this forced us to put in place a "multi-index" Algolia configuration for the page, and this seems to bring some unwanted side effects. So this is also an opportunity to get rid of that.

In this PR we remove all the frontend code linked to the featured-product-list component.
Another PR will follow for the Strapi cleanup.

Detailed explanation

Having multiple indexes on the page means that the internal Algolia state needs to take into account both a facet-filtered search (the one associated to the main content) and a search without any facet (the one associated to a featured-product-list section).
So we effectively perform two queries towards Algolia.

By inspecting how the Algolia state updates, there is a short time window in which the internal Algolia state clears the list of facets. This is what causes the flicker described in #1483.
This was present also before we chose to hide the facets panel if empty: it was only less visible because the panel remained in place but the facets were briefly removed and then re-added.
Please note that this is not a transition from the previous facets to the new facets since the new facets were already visible before the facets were temporarily emptied.

You can see the two queries, the old behaviour of facets and all the details described above in the following video:

Screen.Recording.2023-03-21.at.12.31.31.mov

QA

1. Visit Vercel preview
2. Verify that product list pages are still displaying correctly
3. Verify that the issue described in Facets disappear briefly on page load #1483 is not present anymore
4. Verify that we are now performing a single query towards Algolia (while performing client side navigation)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
react-commerce	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 21, 2023 at 4:25PM (UTC)
react-commerce-prod	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 21, 2023 at 4:25PM (UTC)

[github-actions]

📦 Next.js Bundle Analysis

This analysis was generated by the next.js bundle analysis action 🤖

🎉 Global Bundle Size Decreased

Page	Size (compressed)
global	353.58 KB (🟢 -655 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

Seven Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load
/Parts	49.95 KB (🟢 -799 B)	403.53 KB
/Parts/[...deviceHandleItemType]	49.97 KB (🟢 -799 B)	403.55 KB
/Shop/[handle]	49.96 KB (🟢 -798 B)	403.53 KB
/Tools	49.95 KB (🟢 -798 B)	403.53 KB
/Tools/[handle]	49.96 KB (🟢 -799 B)	403.53 KB
/products/[handle]	82.84 KB (🟡 +2 B)	436.42 KB
/store	42.33 KB (🟡 +2 B)	395.91 KB

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this.

[masonmcelvain]

CR ✌🏻 with some non-blocking comments. Nice job!

[masonmcelvain]

CR ✌🏻 Thanks!

[deltuh-vee]

QA 🎬

• Product list pages are still displaying correctly
• Facets disappear briefly on page load #1483 is no longer occurring
• Only a single call is made towards the Algolia API when performing client side navigation