@authvia/merchant-customers

@authvia/merchant-customer

"A Vue 3 library for enabling merchants to interact with customer data and send configurable requests. Requests can be configured at app.authvia.net.

Vue 3 Usage

Presuming you already have a Vue3 application configured usage is pretty straight forward.

1. Install the module, npm install --save @authvia/merchant-customer (and dependencies)
2. Register plugins (order matters — Pinia must be registered before any Authvia store plugins or merchant-customers views)

  import { createPinia } from 'pinia'
  import { authviaRootStorePlugin } from '@authvia-v3/pinia-stores-root'
  import { authviaMerchantStorePlugin } from '@authvia/pinia-stores-merchant'
  import { authviaMerchantCustomersPlugin } from '@authvia/merchant-customers'

  // Make sure vuetify is set to auto import components.
  app.use(vuetify)
  app.use(createPinia())
  app.use(authviaRootStorePlugin, {
    authviaCDN: 'cdn.authvia.com',
    authviaAPI: 'api.authvia.com',
  })
  app.use(authviaMerchantStorePlugin, {
    authviaCDN: 'cdn.authvia.com',
    authviaAPI: 'api.authvia.com',
  })
  app.use(authviaMerchantCustomersPlugin)

Views vs Components

There are views and components exposed within this plugin. A view will utilize the stores to load data and a component exposes parameters to be 'fed' data appropriately.

views

All views required a token be provided, or no data can be loaded. All views accept variant.

For each view between the square brackets are additional parameters. A * denotes required.

• av-customer-view [customer, agent]
• av-customer-combobox-view
• av-blueprint-buttons-view [showCount, color, noIcon, noLabel, block]
• av-blueprint-select-view
• av-blueprint-form-view [customer*, agent, blueprint*, variant]

components

Each component has parameters appropriate to its use case. For the most part, components do their best to handle undefined gracefully so that reference management upstream wont be as burdensom.

• av-customer-combobox [customers, loading, variant]
• av-customer-summary [customer, loading]
• av-blueprint-select [blueprints, variant, noDataReason, disabled, loading]
• av-blueprint-buttons [blueprints, showCount, variant, color, noIcon, noLabel, block]
• av-schema-form [schema, variant, disabled, loading, errors]