area15-ticket-component

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 @netlify/plugin-nextjs @stripe/react-stripe-js @stripe/stripe-js axios dayjs framer-motion 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:

# Ticket API Configuration (Required)
TIX_ROOT=your_ticket_api_root_url
AREA15_TIX_ROOT=your_area15_ticket_api_root_url
TIX_SELLER_ID=your_seller_id
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
STRIPE_SECRET_KEY=your_stripe_secret_key

# CMS Configuration (Required if using Strapi)
CMS_ROOT=your_cms_root_url

# 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

# HubSpot Integration (Optional - if using HubSpot features)
# Add HubSpot API keys if needed

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:

• Switch to the npm_package branch:

  git checkout npm_package
  

• Update package.json metadata:

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

• Login to npm:

  npm login
  

• Publish the package:

  npm publish
  

  For scoped packages (if your package name starts with @your-username/):

  npm publish --access public
  

• 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

Netlify Configuration

For Netlify deployments, add the environment variables in your Netlify dashboard:

• Go to Site Settings > Environment Variables
• Add AXIOM_TOKEN, AXIOM_ORG_ID, and AXIOM_DATASET

You can also configure Axiom Log Drains in Netlify to automatically forward Netlify function logs to Axiom.

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.