Components and embeds

pnpm add @pricing/widget

import '@pricing/widget/styles.css';

import {
  QuoteProvider,
  OfferingSelector,
  FactorInput,
  QuoteSummary,
  RequiresInput,
  QuoteReceipt,
} from '@pricing/widget';

const config = {
  businessName: 'Shine Studio',
  currency: 'CAD',
  offerings: [{ id: 'ceramic-pro', name: 'Ceramic Pro' }],
  factors: [
    {
      id: 'vehicle_size',
      label: 'Vehicle size',
      required: true,
      values: [
        { id: 'small', label: 'Small' },
        { id: 'medium', label: 'Medium' },
        { id: 'large', label: 'Large' },
      ],
    },
  ],
};

const transport = {
  async createQuote(input) {
    const res = await fetch('https://your-kordless-instance.com/v1/public_quotes', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ businessId: '9d2c7f1e-…', ...input }),
    });
    const { data } = await res.json();
    return data; // { quoteIntent, quoteReceipt }
  },
};

export function QuoteSection() {
  return (
    <QuoteProvider
      config={config}
      transport={transport}
      brand={{ productName: 'Shine Studio', accentColor: '#0af' }}
    >
      <OfferingSelector />
      {config.factors.map((factor) => (
        <FactorInput key={factor.id} factor={factor} />
      ))}
      <QuoteSummary />
      <RequiresInput />
      <QuoteReceipt />
    </QuoteProvider>
  );
}

editing → submitting → succeeded | requires_input | failed