Appearance

Context Switcher ​

The Context Switcher component is used exclusively for Marketplace and Payments users to switch between the apps in the main nav. The urls are determined by the component's props and cannot be overridden.

Basic Usage ​

This component was built to be used in AppSidebar's #app-context slot. Each app will have a different activeApp prop value, which will determine which app is currently active. The portalAccess prop is an object that determines whether the user has access to the other app.

marketplacepayments
template
<ContextSwitcher
  active-app="marketplace"
  limited-access-url="join-payments-today"
  :portal-access="{
      commercePortal: true,
      paymentsPortal: false,
    }"
  @switch="handleSwitch"
/>

Limited Access URL ​

When a user does not have access to the inactive app, they will be taken to the provided limitedAccessUrl prop value when attempting to use the context switcher.

template
  <ContextSwitcher
    active-app="payments"
    limited-access-url="join-today"
    :portal-access="{
      commercePortal: true,
      paymentsPortal: false,
    }"
  />

Adding URL Query Parameters ​

You can add query parameters to the context switcher's URLs by using the route-query prop. It should be an object with any number of properties that will be added to the URL as a query string.

template
  <ContextSwitcher
    active-app="payments"
    limited-access-url="join-today"
    :portal-access="{
      commercePortal: true,
      paymentsPortal: false,
    }"
    :route-query="{ company_type: 'buyer', company_id: 'AC9d262ac351e4d6e39468b2a9932cdc28' }"
  />

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.