Summary

Ability to manage sales channels on the front-end side.

Motivation

Some of the commerce platforms give us the ability to manage the sales channels. This feature gives merchants a way to have multiple supply chains across the world. For instance, you can have warehouses in Europe and the US, and depending on the location/sales zone, you want to pick the right one. Those warehouses defines also a different inventory state of a given product along with price or even currency.

Guide-level explanation

This feature is consisting of two pieces: parameters for API-client, and reading the available sales channels.

The selected sales channel is usually an API-call parameter - when you setup an online show, you put the information in the config file, which sales channel you want to use. In most cases, you won't change it in the runtime as for each channel, the merchants will have a different deployment, for a different zone.

If for some reason you want to change it in the runtime, we can follow the same strategy as with locales or currencies - store it in the cookie, and implement a selector for this (selecting reloads the page). In this place, we are going towards the loading current ones from the API (second part).

For those who want for some reason load the existing sales channels, we need probably a composable.

Reference-level explanation

1. Configuration

Just like other settings, a sales channel is a part of integration:

    ['@vue-storefront/commercetools/nuxt', {
      api: { ... },
      ssalesChannel: 'some of id or name of the channel'
    }]

Also, that's the default value, and It can be changed in the runtime (if someone needs to do it)

2. Read available channels

For this feature, we need a composable along with factory, I think the following interfaces will cover it:

interface UseSalesChannel<CHANNELS> {
  load: () => Promise<CHANNELS>;
  channels: CHANNELS;
}

interface AgnoisticCordinates {
  lat: number;
  lng: number;
}

interface UseSalesChannelGetters<CHANNELS, CHANNELS_ITEM> {
  getItems: (channel: CHANNELS) => CHANNELS_ITEM[];
  getLocationCoordinates: (channel: CHANNELS_ITEM) => AgnoisticCordinates;
  getName: (channel: CHANNELS_ITEM) => string;
  getId: (channel: CHANNELS_ITEM) => string;

  // To reveal
  getAddress: (channel: CHANNELS_ITEM) => string;
}

Drawbacks

This is an important feature, however, it is really specific sometimes for the given integration. That's totally not the feature that every commerce has and implements this in a similar way which takes us towards the following thoughts:

W can implement only the configuration based on a config file and a way to change it (just like langs - calling configure)
The reading information about the channels, is only related to the API client - we implement a set of API-client functions that allow to read them from API
no additional composable, integration specific feature
simpler API, easier to integrate as we don't force anyone to stick to the interfaces that really can be totally different depending on the platform

Unresolved questions

Do we need agnostic types here? (factories, interfaces etc.)
What's MVP here? maybe worth to start with simpler one (just configuration + re-configure call + only API client) then based on the market needs create an agnostic way of loading

vuestorefront / vue-storefront

Sales channels #5477