React UI

npm install @paritydeals/react-ui
# or
yarn add @paritydeals/react-ui

import { ParityDealsProvider, PDPricingTable } from '@paritydeals/react-ui';
import '@paritydeals/react-ui/dist/pd-react-ui.css';

function App() {
  return (
    <ParityDealsProvider
      accessToken="YOUR_ACCESS_TOKEN"
      offeringId="YOUR_OFFERING_ID"
      customerId="OPTIONAL_CUSTOMER_ID"
    >
      <PDPricingTable />
    </ParityDealsProvider>
  );
}

import { ParityDealsProvider, PDPricingTable } from '@paritydeals/react-ui';
import '@paritydeals/react-ui/dist/pd-react-ui.css';

function App() {
  const handleCustomPriceClick = (details) => {
    console.log('Custom price plan clicked:', details);
    // Handle custom pricing logic
  };

  return (
    <ParityDealsProvider
      accessToken="YOUR_ACCESS_TOKEN"
      offeringId="YOUR_OFFERING_ID"
      customerId="OPTIONAL_CUSTOMER_ID"
    >
      <PDPricingTable
        onCustomPriceClick={handleCustomPriceClick}
        customStyles={{
          style: {
            cardBackgroundColor: '#ffffff',
            buttonBackgroundColor: '#007bff',
            titleColor: '#333333'
          }
        }}
      />
    </ParityDealsProvider>
  );
}

interface ParityDealsAPIConfig {
  onError?: (error: Error) => void;
  maxRetries?: number; // Default: 3
  timeout?: number; // Default: 5000ms
  backoffBaseDelay?: number;
  offeringApiUrl?: string;
  subscriptionApiUrl?: string;
  checkoutApiUrl?: string;
}

<PDPricingTable
  onCustomPriceClick={(details) => {
    console.log('Custom plan selected:', details.plan.displayName);
    // Handle custom pricing logic
  }}
  customStyles={{
    style: {
      cardBackgroundColor: '#f8f9fa',
      buttonBackgroundColor: '#28a745',
      buttonColor: '#ffffff',
      titleColor: '#212529'
    },
    typography: {
      titleFontSize: 24,
      titleFontWeight: '600'
    },
    layout: {
      gap: 20,
      minWidth: 280,
      maxWidth: 400
    }
  }}
  insertElements={{
    afterPrice: (plan) => {
        if(plan.shouldHighlight) {
            return <div>Most popular plan</div>;
        }
        return null;
    }
  }}
/>

// Billing periods
enum ChargePeriodEnum {
  ONE_TIME = 'ONE_TIME',
  MONTHLY = 'MONTHLY',
  YEARLY = 'YEARLY',
  WEEKLY = 'WEEKLY',
  DAILY = 'DAILY',
  THREE_MONTHS = 'THREE_MONTHS',
  SIX_MONTHS = 'SIX_MONTHS'
}

// Price types
enum PriceTypeEnum {
  FREE = 'FREE',
  PAID = 'PAID',
  CUSTOM = 'CUSTOM'
}

// Price models
enum PriceModelEnum {
  FLAT = 'FLAT',
  PACKAGE = 'PACKAGE',
  TIERED = 'TIERED',
  VOLUME = 'VOLUME'
}

// Plan structure
interface OfferingPlan {
  id: string;
  name: string;
  displayName: string;
  displayDescription: string;
  identifier: string;
  isArchived: boolean;
  features: OfferingFeature[];
  price: OfferingPlanPrice;
  shouldHighlight: boolean;
  enabled: boolean;
}

// Plan click details
interface PlanClickDetails {
  plan: OfferingPlan;
  chargePeriod: ChargePeriodEnum;
  usageMap: Record<string, number>;
}

// Pricing table style
interface PricingTableStyle {
  style: PricingTableColorConfig;
  typography: PricingTableTypographyConfig;
  layout: PricingTableLayoutConfig;
}

interface PricingTableColorConfig {
  primaryColor: string;
  primaryHoverColor: string;
  onPrimaryColor: string;
  secondaryColor: string;
  cardBackgroundColor: string;
  billingSwitchBackgroundColor: string;
  billingSwitchColor: string;
  billingSwitchSelectedColor: string;
  titleColor: string;
  descriptionColor: string;
  priceColor: string;
  priceUnitColor: string;
  pricePeriodColor: string;
  featureColor: string;
  dividerColor: string;
  buttonBackgroundColor: string;
  buttonColor: string;
  buttonHoverBackgroundColor: string;
  advancedMode: boolean;
}

interface PricingTableTypographyConfig {
  titleFontSize: number;
  titleFontWeight: string;
  descriptionFontSize: number;
  descriptionFontWeight: string;
  priceFontSize: number;
  priceFontWeight: string;
  priceUnitFontSize: number;
  priceUnitFontWeight: string;
  featureFontSize: number;
  featureFontWeight: string;
  pricePeriodFontSize: number;
  pricePeriodFontWeight: string;
}

interface PricingTableLayoutConfig {
  minWidth: number;
  maxWidth: number;
  gap: number;
  align: 'start' | 'center' | 'end';
}

:root {
  /* Card & Background */
  --pd-card-bg: #ffffff;
  --pd-card-border-width: 1px solid;
  --pd-card-border-color: 1px solid;

  /* Text Colors */
  --pd-title-color: #171923;
  --pd-description-color: #718096;
  --pd-feature-color: #171923;

  /* Price Colors */
  --pd-price-color: #171923;
  --pd-price-unit-color: #171923;
  --pd-price-period-color: #718096;

  /* Button Colors */
  --pd-button-bg: #1A202C;
  --pd-button-hover-bg: #1A202C;
  --pd-button-color: #F7FAFC;

  /* Billing Switch Colors */
  --pd-billing-switch-bg: #1A202C;
  --pd-billing-switch-color: #F7FAFC;
  --pd-billing-switch-selected-color: #F7FAFC;

  /* UI Elements */
  --pd-divider-color: #E2E8F0;
  --pd-tooltip-bg: #2D3748;
  --pd-tooltip-color: #ffffff;

  /* Typography - Title */
  --pd-title-size: 24px;
  --pd-title-weight: 600;

  /* Typography - Description */
  --pd-description-size: 16px;
  --pd-description-weight: 400;

  /* Typography - Price */
  --pd-price-size: 28px;
  --pd-price-weight: 700;
  --pd-price-unit-size: 32px;
  --pd-price-unit-weight: 700;
  --pd-price-period-size: 16px;
  --pd-price-period-weight: 400;

  /* Typography - Feature */
  --pd-feature-size: 14px;
  --pd-feature-weight: 400;

  /* Layout */
  --pd-min-width: 360px;
  --pd-max-width: 400px;
  --pd-gap: 24px;
  --pd-align: center;
}

const customStyles: PricingTableStyle = {
  style: {
    cardBackgroundColor: '#ffffff',
    buttonBackgroundColor: '#28a745',
    buttonColor: '#ffffff',
    titleColor: '#212529',
    descriptionColor: '#6c757d',
    priceColor: '#000000',
    featureColor: '#495057'
  },
  typography: {
    titleFontSize: 24,
    titleFontWeight: '600',
    descriptionFontSize: 14,
    descriptionFontWeight: '400',
    priceFontSize: 32,
    priceFontWeight: '700'
  },
  layout: {
    gap: 24,
    minWidth: 300,
    maxWidth: 450,
    align: 'center'
  }
};

const CustomButton: CustomActionButton = ({ onClick, children, plan, disabled }) => (
  <button
    onClick={onClick}
    disabled={disabled}
    className="my-custom-button"
    style={{
      backgroundColor: plan.shouldHighlight ? '#ff6b35' : '#007bff',
      color: '#ffffff',
      padding: '12px 24px',
      border: 'none',
      borderRadius: '6px',
      cursor: disabled ? 'not-allowed' : 'pointer'
    }}
  >
    {children}
  </button>
);

<PDPricingTable customActionButton={CustomButton} />

<PDPricingTable noStyles={true} />

// Features with usage tracking
const features = [
  {
    identifier: 'api_calls',
    displayName: 'API Calls',
    priceModel: PriceModelEnum.VOLUME,
    charges: [
      {
        chargePeriod: ChargePeriodEnum.MONTHLY,
        tiers: [
          { flatAmount: 0, unitAmount: 0.01, upTo: 1000 },
          { flatAmount: 10, unitAmount: 0.008, upTo: 10000 },
          { flatAmount: 82, unitAmount: 0.005, upTo: null }
        ]
      }
    ]
  }
];

<PDPricingTable
  onCustomPriceClick={(details) => {
    // Open contact form or custom pricing modal
    openCustomPricingModal(details.plan);
  }}
/>

<ParityDealsProvider
  accessToken="YOUR_TOKEN"
  offeringId="YOUR_OFFERING"
  apiConfig={{
    onError: (error) => {
      console.error('ParityDeals Error:', error);
      // Show user-friendly error message
      showErrorMessage('Unable to load pricing. Please try again later.');
    },
    maxRetries: 3,
    timeout: 10000
  }}
>
  <PDPricingTable />
</ParityDealsProvider>

import React from 'react';
import {
  ParityDealsProvider,
  PDPricingTable,
  PricingTableStyle
} from '@paritydeals/react-ui';

const App: React.FC = () => {
  const customStyles: PricingTableStyle = {
    style: {
      cardBackgroundColor: '#ffffff',
      buttonBackgroundColor: '#007bff',
      buttonColor: '#ffffff',
      buttonHoverBackgroundColor: '#0056b3',
      titleColor: '#212529',
      descriptionColor: '#6c757d',
      priceColor: '#000000',
      featureColor: '#495057',
      dividerColor: '#dee2e6',
      billingSwitchBackgroundColor: '#f8f9fa',
      billingSwitchColor: '#6c757d',
      billingSwitchSelectedColor: '#007bff'
    },
    typography: {
      titleFontSize: 24,
      titleFontWeight: '600',
      descriptionFontSize: 14,
      descriptionFontWeight: '400',
      priceFontSize: 32,
      priceFontWeight: '700',
      priceUnitFontSize: 16,
      priceUnitFontWeight: '400',
      featureFontSize: 14,
      featureFontWeight: '400',
      pricePeriodFontSize: 14,
      pricePeriodFontWeight: '400'
    },
    layout: {
      gap: 24,
      minWidth: 300,
      maxWidth: 450,
      align: 'center'
    }
  };

  const handleCustomPriceClick = (details) => {
    console.log('Custom plan selected:', details.plan.displayName);
    // Open contact form or pricing calculator
    window.open('/contact', '_blank');
  };

  return (
    <div className="app">
      <header>
        <h1>Choose Your Plan</h1>
        <p>Select the perfect plan for your needs</p>
      </header>
      
      <ParityDealsProvider
        accessToken="your-access-token"
        offeringId="your-offering-id"
        customerId="optional-customer-id"
        checkoutSuccessUrl="https://yourapp.com/success"
        apiConfig={{
          onError: (error) => {
            console.error('Pricing Error:', error);
          },
          timeout: 10000
        }}
      >
        <PDPricingTable
          customStyles={customStyles}
          onCustomPriceClick={handleCustomPriceClick}
        />
      </ParityDealsProvider>
    </div>
  );
};

export default App;

<ParityDealsProvider
  apiConfig={{
    offeringApiUrl: 'https://your-api.com/offerings',
    checkoutApiUrl: 'https://your-api.com/checkout',
    subscriptionApiUrl: 'https://your-api.com/subscriptions'
  }}
>

<ParityDealsProvider
  apiConfig={{
    onError: (error) => {
      console.log('ParityDeals Debug:', {
        error: error.message,
        offeringId: 'your-offering-id',
        timestamp: new Date().toISOString()
      });
    }
  }}
>