Salesforce Modern POS System

A Point of Sale (POS) system built for Salesforce Commerce, designed for tablets and totems. This application provides a complete activation, login, and POS workflow with a modern, streaming-service-inspired user interface.

Features

Activation Flow

• QR Code Scanning: Initial setup with QR code activation for staging ID configuration
• Token Entry: Manual token entry option with default config fallback

Authentication Flow

• Launch Page: Beautiful landing page with gradient background
• Login/Registration: Secure merchant login and registration system
• User Selection: Netflix-style user selection screen with face ID/digital validation support
• Password Reset: Password recovery functionality

POS Main Screen

• Left Navigation: Collapsible sidebar with navigation menu
• Cart Management: Shopping cart with item management
• Payment Methods: Multiple payment options (Card, Cash, Gift Card, Multi)
• Order Totals: Real-time calculation of subtotal, tax, and total

Technology Stack

• React 18 with TypeScript
• Vite for fast development and building
• React Router for navigation
• Salesforce NEXT Design System tokens for consistent theming

Design System

The application uses Salesforce NEXT Design System tokens, allowing for easy customization and theming. All colors, typography, spacing, and other design tokens are centralized in src/design-tokens/tokens.ts.

Key Design Principles

• Tablet/Totem Optimized: Touch-friendly targets (minimum 44px)
• Accessibility: Focus states, keyboard navigation support
• Responsive: Adapts to different screen sizes
• Modern UI: Inspired by video streaming services (Netflix, Max, Paramount+)

Getting Started

Prerequisites

• Node.js 18+ and npm

Installation

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Start production server (for Heroku)
npm start

Heroku Deployment

The project is configured for Heroku deployment:

1. Install Heroku CLI (if not already installed)

   # macOS
   brew tap heroku/brew && brew install heroku

2. Login to Heroku

   heroku login

3. Create a Heroku app

   heroku create your-app-name

4. Deploy to Heroku

   git add .
   git commit -m "Prepare for Heroku deployment"
   git push heroku main

5. Open your app

   heroku open

The app will automatically:

• Build using npm run build (runs tsc && vite build)
• Start the Express server on the port provided by Heroku
• Serve the React app with proper routing support for all routes

Development

The app will be available at http://localhost:3000

Project Structure

src/
├── components/          # Reusable UI components
│   ├── Button/
│   ├── Input/
│   └── Modal/
├── design-tokens/       # Design system tokens
├── hooks/              # Custom React hooks
├── screens/             # Screen components
│   ├── ActivationScreen
│   ├── LaunchPage
│   ├── LoginScreen
│   ├── UserSelectionScreen
│   └── POSMainScreen
├── styles/             # Global styles
└── App.tsx            # Main app component with routing

Routing Flow

1. /activation - Initial QR code scanning and token setup
2. /launch - Landing page after activation
3. /login - Merchant login screen
4. /users - User selection screen (Netflix-style)
5. /pos - Main POS interface

State Management

The app uses React hooks with localStorage persistence for:

• Activation status
• Staging token
• Login state
• Current user
• Registered users (last 5)

Customization

Changing Colors/Theming

Edit src/design-tokens/tokens.ts to modify the design system. All components use these tokens, so changes will propagate throughout the application.

Adding New Screens

1. Create a new component in src/screens/
2. Add route in src/App.tsx
3. Update navigation as needed

Browser Support

• Chrome/Edge (latest)
• Safari (latest)
• Firefox (latest)
• Optimized for tablet/totem devices

License

Private - Salesforce Commerce POS System

pos