fix: STRF-11856 - Filter list of channels from getStoreChannels() to storefront channels

[bc-jz]

What?

Filter the response from getStoreChannels() in theme-api-client.js by channel type. Only include storefront channels.

This change was requested by users of stencil-cli who were finding that the list of URLs given when running stencil start or stencil push included choices that are not valid. Specifically any channel that is not a "storefront" channel is not a valid choice as there is no template to display, for example on a marketplace channel that connects to facebook there is no storefront to display.

We are going to filter the list of choices we present to be specifically storefront channels. The changes in this PR are utilized by:
stencil-start.js
stencil-push.js
stencil-pull.js
stencil-download.js

Implementation details
In order to support filtering the channels we needed to add an additional v3 api call (/v3/channels).

Previously the getStoreChannels() in theme-api-client.js was making a call to GET /v3/sites and returning this entire list as possible channels. This output looks like:

{
            "id": 1000,
            "url": "https://jznewuitest.mybigcommerce.com",
            "channel_id": 1,
            ...
        },
       {
            "id": 1003,
            "url": "https://store-z4zn3wo-1565458.mybigcommerce.com",
            "channel_id": 1565458,
            ...
        }

The url seen above is what we list when asking for a channel selection but not all of the "sites" seen above are storefront channels. In order to get that information we needed to add a GET to /v3/channels which will give back results like:

{
            "id": 1,
            "name": "TESttt",
            "platform": "bigcommerce",
            "type": "storefront",
            ...
            "is_listable_from_ui": true,
            "is_enabled": true,
            "is_visible": true,
            "status": "active"
        },
      {
            "id": 1565458,
            "name": "facebookAnalytics-0",
            "platform": "facebook",
            "type": "marketing",
            ...
            "is_listable_from_ui": false,
            "is_enabled": true,
            "is_visible": false,
            "status": "connected"
        }

I am filtering the list of sites we receive by the channel ids that have a type of storefront. It looks like maybe I could also filter by channels that have "is_listable_from_ui": true.

Tickets / Documentation

• JIRA ticket

Screenshots (if appropriate)

I added a couple marketplace channels to my test store. Here is an example of how stencil start looks when using current master:

The last two choices seen above are my marketplace channels. With the channels in this PR we will start filtering to only return channels with a type of storefront. These are the results with my changes:

All three of the above output URLs are storefront channels.

Here is an example of positive results with the stencil push command as well:

stencil pull

stencil download

cc @bigcommerce/storefront-team

[github-actions]

🎉 This PR is included in version 7.4.2 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)
• 7.4.2

Your semantic-release bot 📦🚀