Ticket Component

A Next.js ticket purchasing component with Stripe integration, calendar selection, and Axiom logging. This package provides a complete ticket purchasing system that can be integrated into your Next.js application.

Installation

Install the package via npm (from the npm_package branch):

npm install git+https://github.com/area15/ticket-component.git#npm_package
# or
yarn add git+https://github.com/area15/ticket-component.git#npm_package
# or
pnpm add git+https://github.com/area15/ticket-component.git#npm_package

Or if published to npm registry:

npm install @area15/ticket-component
# or
yarn add @area15/ticket-component
# or
pnpm add @area15/ticket-component

Getting Started

1. Create a Next.js Project (if you don't have one)

npx create-next-app@latest my-ticket-app
cd my-ticket-app

2. Install the Package

npm install @area15/ticket-component

3. Copy Required Files

After installation, you'll need to copy the necessary files from the package:

# Copy pages directory
cp -r node_modules/@area15/ticket-component/pages ./pages

# Copy lib directory
cp -r node_modules/@area15/ticket-component/lib ./lib

# Copy public assets
cp -r node_modules/@area15/ticket-component/public ./public

# Copy configuration files
cp node_modules/@area15/ticket-component/next.config.js ./next.config.js
cp node_modules/@area15/ticket-component/tailwind.config.ts ./tailwind.config.ts
cp node_modules/@area15/ticket-component/postcss.config.js ./postcss.config.js
cp node_modules/@area15/ticket-component/tsconfig.json ./tsconfig.json

Note: For Windows PowerShell users, use appropriate commands or manually copy the directories.

4. Install Required Dependencies

Make sure you have all required dependencies installed:

npm install @axiomhq/js @stripe/react-stripe-js @stripe/stripe-js axios dayjs lucide-react react-calendar react-qr-code next react react-dom

npm install -D @types/node @types/react @types/react-dom autoprefixer postcss tailwindcss typescript

5. Set Up Environment Variables

Create a .env.local file in your project root with the following variables:

# Component Configuration (Required)
NEXT_PUBLIC_EVENT_ID=your_event_id
NEXT_PUBLIC_SELLER_ID=your_seller_id

# Component Options (Optional - defaults provided)
NEXT_PUBLIC_DARK_THEME=false
NEXT_PUBLIC_ALT_FLOW=false
NEXT_PUBLIC_SHOW_IMAGE=true
NEXT_PUBLIC_HIDE_DETAILS=false
NEXT_PUBLIC_PRE_PURCHASE_CONTENT_HTML=
NEXT_PUBLIC_INCLUDED_GROUPS=
NEXT_PUBLIC_SERVICE_FEE_TEXT_OVERRIDE=

# Ticket API Configuration (Required)
TIX_ROOT=your_ticket_api_root_url
AREA15_TIX_ROOT=your_area15_ticket_api_root_url
TIX_IDENTITY_ID=your_identity_id
TIX_USER_ELEVATED=your_elevated_username
TIX_PASS_ELEVATED=your_elevated_password
TIX_TOKEN=your_basic_auth_token

# Stripe Configuration (Required for payments)
NEXT_PUBLIC_STRIPE_PUBLISH_KEY=your_stripe_publishable_key
NEXT_PUBLIC_STRIPE_ACCOUNT=your_stripe_account_id
STRIPE_SECRET_KEY=your_stripe_secret_key

# Axiom Logging (Optional but recommended)
AXIOM_TOKEN=your_axiom_token
AXIOM_ORG_ID=your_axiom_org_id
AXIOM_DATASET=ticket-component

# RioStack Integration (Optional)
RIOSTACK_URL=your_riostack_url
NEXT_PUBLIC_RIOSTACK_WEBHOOK=false
NEXT_PUBLIC_RIOSTACK_SOURCE=

# HubSpot Integration (Optional)
NEXT_PUBLIC_HUBSPOT_URL=your_hubspot_api_url
NEXT_PUBLIC_HUBSPOT_KEY=your_hubspot_api_key
NEXT_PUBLIC_HUBSPOT_ID=your_hubspot_id

6. Run the Development Server

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

Project Structure

ticket-component/
├── pages/
│   ├── index.tsx          # Main ticket component page
│   ├── layout.tsx         # Layout wrapper
│   ├── _app.tsx           # Next.js app configuration
│   ├── components/        # React components
│   └── api/              # API routes
├── lib/                  # Utility functions
│   ├── auth.js          # Authentication helper
│   ├── logger.ts        # Axiom logging utility
│   └── dt_format.jsx    # Date formatting
└── public/              # Static assets
    ├── assets/          # Images and icons
    ├── css/             # Global styles
    └── fonts/           # Custom fonts

Publishing to npm

To publish this package to npm from the npm_package branch:

1. Switch to the npm_package branch:

   git checkout npm_package

2. Update package.json metadata:

   • Update the version field
   • Verify repository URL and branch
   • Verify author information
   • Update description if needed

3. Login to npm:

   npm login

4. Publish the package:

   npm publish

   For scoped packages (required for @area15/ticket-component):

   npm publish --access public

5. Verify it's published: Visit https://www.npmjs.com/package/@area15/ticket-component

Note: Always publish from the npm_package branch to ensure the correct version is published to npm.

Axiom Logging

This application uses Axiom for centralized logging across both frontend and backend. All logs automatically include sellerId and eventId for tracking purposes.

Environment Variables

To enable Axiom logging, you need to set the following environment variables:

Server-side (required for API routes):

• AXIOM_TOKEN - Your Axiom API token
• AXIOM_ORG_ID - Your Axiom organization ID
• AXIOM_DATASET - The dataset name to send logs to (defaults to ticket-component)

Client-side (optional, for direct client logging):

• NEXT_PUBLIC_AXIOM_TOKEN - Your Axiom API token (if you want direct client-side logging)
• NEXT_PUBLIC_AXIOM_ORG_ID - Your Axiom organization ID
• NEXT_PUBLIC_AXIOM_DATASET - The dataset name

Usage

The logger is available throughout the application:

import { createLogger } from '../lib/logger';

// Create a logger with sellerId and eventId context
const logger = createLogger(sellerId, eventId);

// Log at different levels
logger.info('User action', { additionalData: 'value' });
logger.warn('Warning message', { context: 'data' });
logger.error('Error occurred', error, { context: 'data' });
logger.debug('Debug information', { debugData: 'value' });

All logs automatically include:

• sellerId - The seller ID for tracking
• eventId - The event ID for tracking
• timestamp - ISO timestamp
• level - Log level (info, warn, error, debug)
• message - Log message
• Any additional data you provide

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.