Subscription Manager Plugin for Front

A Front sidebar plugin that allows teammates to view and manage customer subscriptions directly from conversation views.

Learn more about this project on our Developer Portal and access the AI prompt file that created it.

⚠️ Important: This plugin was created using AI (inclusive of this readme). It's express purpose is to demonstrate how plugins can be quickly scaffolded using a prompt file fed to an AI agent. However, the code has not been reviewed for production readiness, nor should it be used in a production environment without a detailed engineering review. The functionality of the plugins is enabled through local pseudocode rather than functioning public APIs. Treat the programming patterns and informational text throughout this project—including in this readme—with a grain of salt. AI can hallucinate inaccurate information or suggest insecure, incorrect, inefficient, or inelegant best practices.

Features

• 📊 View all customer subscriptions in one place
• 💳 Display subscription status, pricing, and billing dates
• 🔄 Update subscription plans with an intuitive modal interface
• ❌ Cancel subscriptions with confirmation
• ✅ Reactivate cancelled subscriptions
• 🌓 Dark/Light mode support
• 🐛 Debug panel for development (accessible with ?debug=true)

Setup Instructions

Prerequisites

• Node.js 16+ installed
• npm or yarn package manager
• Access to Front developer settings

Installation

1. Clone this repository:

git clone <repository-url>
cd subscription-manager

2. Install dependencies:

npm install

Running the Plugin

Development Mode

1. Start the development server:

npm run dev

2. Note the localhost URL where the plugin is running (typically http://localhost:3000)

3. To run in debug mode, append ?debug=true to the plugin URL

Production Build

1. Build the plugin:

npm run build

2. Preview the production build:

npm run preview

Configuring in Front

1. Create a Front Developer App:

   • Go to your Front company settings
   • Click on "Developers"
   • Click "Create app"
   • Fill in the app details:
     • Name: "Subscription Manager"
     • Description: "Manage customer subscriptions"

2. Add Plugin Feature:

   • In your app settings, click "Add feature"
   • Select "Plugin" as the feature type
   • Configure the plugin:
     • Type: Sidebar
     • Name: "Subscription Manager"
     • URL: http://localhost:3000 (for development)
     • For debug mode: http://localhost:3000?debug=true

3. Install the App:

   • Save your app configuration
   • Install the app in your Front workspace
   • The plugin will appear in the sidebar when viewing conversations

Usage

Viewing Subscriptions

1. Open a conversation in Front
2. The plugin will automatically load subscriptions for the conversation recipient
3. View subscription details including plan, status, and billing information

Managing Subscriptions

• Change Plan: Click "Change Plan" to open the plan selector modal
• Cancel Subscription: Click "Cancel Subscription" (requires confirmation)
• Reactivate: For cancelled subscriptions, click "Reactivate Subscription"

Debug Mode

Access debug mode by appending ?debug=true to the plugin URL:

• View teammate information
• Inspect conversation details
• See message attachments
• Access live context JSON
• Review technical documentation

Development

Project Structure

src/
├── components/
│   ├── SubscriptionManager.tsx  # Main subscription UI
│   ├── DebugPanel.tsx           # Debug information panel
├── providers/
│   └── FrontContext.tsx         # Front SDK context provider
├── services/
│   └── subscriptionService.ts   # Subscription data service
├── App.tsx                      # Main application component
└── main.tsx                     # Application entry point

Technologies Used

• React 18 with TypeScript
• Vite for build tooling
• Front Plugin SDK
• Lucide React for icons

Mock Data

The plugin uses simulated subscription data for demonstration. In production, replace the subscriptionService.ts with actual API calls to your subscription management system.

Troubleshooting

Plugin Not Loading

• Ensure the development server is running
• Check that the plugin URL in Front matches your localhost address
• Verify CSP headers are configured correctly in vite.config.ts

Context Not Available

• Ensure you have selected a conversation in Front
• Check the browser console for SDK loading errors
• Verify the Front Plugin SDK is installed correctly

Debug Mode Not Working

• Make sure ?debug=true is appended to the plugin URL in Front settings
• Refresh the plugin after adding the query parameter

Support

For issues or questions, please contact your Front administrator or refer to the Front Plugin SDK documentation.