expedite-components

Expedite Components

A Vue 3 component library for Expedite Commerce, providing reusable components including Configurator and GPT chat functionality.

Installation

npm install expedite-components

Peer Dependencies

This library requires the following peer dependencies:

npm install vue@^3.4.21 pinia@^2.1.7 axios@^1.13.2 dompurify@^3.2.6 lodash.clonedeep@^4.5.0 v-click-outside@^3.2.0 vue-router-lwc@^1.0.4 vuedraggable@^4.1.0

Usage

Vue 3 Application

Option 1: Install as a Plugin (Global Registration)

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ExpediteComponents from 'expedite-components'
import 'expedite-components/style'

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.use(ExpediteComponents)

app.mount('#app')

Then use components in your templates:

<template>
    <div>
        <!-- Expedite Configurator -->
        <ExpediteConfigurator 
            :setup-data="setupData"
            item-id="your-item-id"
            qli-id="optional-qli-id"
            quote-id="optional-quote-id"
            api-key="API_KEY"
        />

        <!-- Expedite GPT Chat -->
        <ExpediteGPT 
            secret-key="API_KEY"
            model="gpt-3.5-turbo"
            :max-tokens="300"
            placeholder="Enter your message..."
        />
    </div>
</template>

<script setup>
const setupData = {
    orgType: "Production",
    orgId: "00DA0000000cDUJMA2",
    userId: "0052G00000AtQQ9QAN",
    accountId: "0012G000000cDUJMA2",
    opportunityId: "0062G000000cDUJMA2",
    userLocale: "en_US",
    pricingSchema: "Single"
}
</script>

Option 2: Import Individual Components

<template>
    <div>
        <ExpediteConfigurator 
            :setup-data="setupData"
            item-id="your-item-id"
            qli-id="optional-qli-id"
            quote-id="optional-quote-id"
            api-key="API_KEY"
        />
        <ExpediteGPT 
            secret-key="API_KEY"
        />
    </div>
</template>

<script setup>
import { ExpediteConfigurator, ExpediteGPT } from 'expedite-components'
import 'expedite-components/style'

const setupData = {
    orgType: "Production",
    orgId: "00DA0000000cDUJMA2",
    userId: "0052G00000AtQQ9QAN",
    accountId: "0012G000000cDUJMA2",
    opportunityId: "0062G000000cDUJMA2",
    userLocale: "en_US",
    pricingSchema: "Single"
}
</script>

Option 3: Using with Composition API

<template>
    <div>
        <ExpediteConfigurator 
            :setup-data="setupData"
            :item-id="itemId"
            :qli-id="qliId"
            :quote-id="quoteId"
            api-key="API_KEY"
        />
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { ExpediteConfigurator } from 'expedite-components'
import 'expedite-components/style'

const setupData = {
    orgType: "Production",
    orgId: "00DA0000000cDUJMA2",
    userId: "0052G00000AtQQ9QAN",
    accountId: "0012G000000cDUJMA2",
    opportunityId: "0062G000000cDUJMA2",
    userLocale: "en_US",
    pricingSchema: "Single"
}

const itemId = ref('a01Kb00000aQb5VIAS')
const qliId = ref('a0pKb00000jxSYUIA2')
const quoteId = ref('a0jKb000004V2dsIAC')
</script>

Component Props

ExpediteConfigurator

ExpediteGPT

Tailwind CSS Configuration

This library uses Tailwind CSS with the ect- prefix for all utility classes. The built CSS file (expedite-components.css) includes all necessary classes, including arbitrary values (e.g., ect-w-[104px], ect-h-[104px]).

Important for consuming projects:

• The library's CSS is pre-built and includes all classes. You don't need to configure Tailwind to scan the library's source files.
• Simply import the library's CSS: import 'expedite-components/style'
• If your project also uses Tailwind, make sure your Tailwind config doesn't try to process the library's ect- prefixed classes. The library's classes are already compiled and included in the distributed CSS file.
• All arbitrary value classes (like ect-w-[104px]) are included in the built CSS, so they will work out of the box.

HTML/Web Components (Framework Agnostic)

You can use the components in any HTML page without a Vue application:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Expedite Components</title>
    
    <script type="module">
      import { registerWebComponents } from 'https://unpkg.com/expedite-components@latest/dist/vue-expedite-components.js';
      registerWebComponents();
    </script>
  </head>
  <body>
    <vue-expedite-configurator 
      setup-data='{"orgType":"Production","orgId":"00DA0000000cDUJMA2","userId":"0052G00000AtQQ9QAN","accountId":"0012G000000cDUJMA2","opportunityId":"0062G000000cDUJMA2","userLocale":"en_US","pricingSchema":"Single"}'
      item-id="a01Kb00000aQb5VIAS"
      qli-id="a0pKb00000jxSYUIA2" // not required
      quote-id="a0jKb000004V2dsIAC"
      api-key="API_KEY"
    ></vue-expedite-configurator>
  </body>
</html>

Alternative: Using UMD Bundle (for non-module environments)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Expedite Components</title>
    
    <!-- Import the UMD bundle -->
    <link rel="stylesheet" href="./node_modules/expedite-components/dist/style.css">
    <script src="./node_modules/expedite-components/dist/vue-expedite-components.umd.cjs"></script>
</head>
<body>
    <vue-expedite-configurator 
        setup-data='{"orgType":"Production","orgId":"00DA0000000cDUJMA2","userId":"0052G00000AtQQ9QAN","accountId":"0012G000000cDUJMA2","opportunityId":"0062G000000cDUJMA2","userLocale":"en_US","pricingSchema":"Single"}'
        item-id="a01Kb00000aQb5VIAS"
        qli-id="a0pKb00000jxSYUIA2"
        quote-id="a0jKb000004V2dsIAC"
        api-key="API_KEY"
    ></vue-expedite-configurator>

    <vue-expedite-gpt 
        secret-key="API_KEY"
        model="gpt-3.5-turbo"
        max-tokens="300"
        placeholder="Enter your message..."
    ></vue-expedite-gpt>
</body>
</html>

Development

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Build for Production

Build both regular library and web components:

npm run build:all

Build only the regular library:

npm run build

Build only web components:

npm run build:web-components

Run Unit Tests with Vitest

npm run test:unit

Lint with ESLint

npm run lint

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Customize configuration

See Vite Configuration Reference.

License

MIT