Managment Dashboard extension

Installation

npm i md-ext

yarn add md-ext

Init client

Initialise client for Managment Portal Context changes

import {
  registerClient,
} from 'md-ext/lib'

registerClient();

Context

App Context passed to callback from Managment Dashboard

| Name | Type | Nullable | | --------------- | --------------- | -------- | | accessToken | string | yes | | tenant | string | yes | | configuration | Configuration | yes | | site | Site[] | yes | | currentSite | Site | yes | | currency | Currency | yes | | language | Language | yes | | clients | Client[] | yes |

Configuration

| Name | Type | Nullable | | ------------ | ------------ | -------- | | currencies | Currency[] | no | | languages | Language[] | no | | theme | Theme | no |

Client

| Name | Type | Nullable | | ---------- | ---------- | -------- | | tenant | string | no | | clientId | string[] | no |

Currency, Language,

| Name | Type | Nullable | | ---------- | --------- | -------- | | id | string | no | | label | string | no | | default | boolean | no | | required | boolean | no |

Site

| Name | Type | Nullable | | ----------------- | ---------- | -------- | | active | boolean | no | | code | string | no | | currency | string | no | | default | boolean | no | | defaultLanguage | string | no | | languages | string[] | no | | name | string | no |

Theme

  colors: {
    default: string
    primary: string
    secondary: string
  }
  logos: {
    dark: string
    light: string
  }

Add state changes callback

Registers a callback fired everytime Context changes. First argument is a key handler (string) and the second is callback function

import {
  registerCallback,
} from 'md-ext/lib'


registerCallback('callbackId', (ctx) => {
  console.log('context update', ctx)
})

Remove statechange callback

In order to unregister from Context changes unregisterCallback must be called with callbackId.

yarn build
import {
  unregisterCallback,
} from ''md-ext/lib''
unregisterCallback('callbackId')

Deeplinking

To ensure Managment Dashboard url refleks the extansion url a thus having ability to have deeplinking enabled in client module you need to sync your current path with Managment dashboard.

import { syncUrl } from 'md-ext/lib'


syncUrl(<current path>)

Example Vue implementation:

  setup() {
    const route = useRoute()
    watch(route, () => {
      syncUrl(route.fullPath)
    })
  },

Example React implementation:

  useEffect(() => {
    syncUrl('/' + location.pathname);
  }, [location]);