Problem Worksheet Notification Setup

This guide explains the notification system for the ProblemWorksheet.tsx form submissions.

Current Implementation (Stable)

The system uses:

Loops → User email confirmations (professional, branded emails)

Slack Webhooks → Admin notifications (simple, reliable, proven)

Future Enhancement (Optional)

When ready for production:

Vercel Workflow SDK → Durable admin notifications with automatic retries

Benefits

✅ User Experience: Users receive email confirmations after form submission ✅ Stability: Uses proven, stable technologies (no experimental Node.js features) ✅ Simple: Direct API calls, easy to debug ✅ Professional Emails: Branded user confirmation emails via Loops ✅ Reliable Admin Alerts: Instant Slack notifications with formatted messages

Setup Instructions

Step 1: Configure Loops (User Email Confirmations)

1. Create Loops Account

Go to loops.so

2. Get API Key

Navigate to Settings → API

Copy your API key

3. Create Email Templates

Create two transactional email templates:

Template ID: idea-submitted (for new submissions)

Template ID: idea-updated (for updates)

Use these data variables in your templates:

{{name}} - User's name

{{ideaName}} - Idea name

{{deadline}} - Target completion date

{{problem}} - Problem statement

{{isUpdate}} - Boolean indicating if this is an update

4. Add Environment Variable

bash

LOOPS_API_KEY="loops_your_api_key_here"

Step 2: Configure Slack Webhook (Admin Notifications)

1. Create a Slack Incoming Webhook

Go to api.slack.com/apps

Select your app (or create a new one)

Go to "Incoming Webhooks" → Activate Incoming Webhooks

Click "Add New Webhook to Workspace"

Choose the channel where you want notifications

Copy the webhook URL

2. Add Environment Variable

bash

SLACK_WEBHOOK_URL="https://hooks.slack.com/services/YOUR/WEBHOOK/URL"

3. How It Works

Simple POST request to Slack webhook

Formatted message with submission details

Differentiates between new submissions and updates

No SDK dependencies, no experimental features

Instant notifications in your chosen Slack channel

4. Message Format Slack messages include:

📝 Header (New vs Update)

User name and email

Idea name and deadline

Full problem statement

Timestamp and submission type

Step 3: Deploy Changes

1. Update Environment Variables Add these to your .env.local (dev) and Vercel project settings (production):

LOOPS_API_KEY - For user email confirmations

SLACK_WEBHOOK_URL - For admin notifications

2. Deploy

Push your changes to trigger deployment

No special configuration needed

Works immediately with standard Next.js deployment

3. Test

Use the automated test utility: npm run test:workflow (dev) or npm run test:workflow:prod (production)

Or manually: Submit a test form through the UI

Check that user receives confirmation email (Loops)

Check your Slack channel for admin notification

Migration Timeline

Phase 1: Add new integrations alongside Slack (gradual migration)

Phase 2: Monitor and validate new system works

Phase 3: Remove Slack integration once confident

Troubleshooting

User Emails Not Sending

Check LOOPS_API_KEY is correct in your .env.local

Verify template IDs match in Loops dashboard (idea-submitted, idea-updated)

Check Loops dashboard for failed sends

Review server logs for error messages

Test Loops API directly: curl -X POST https://app.loops.so/api/v1/transactional -H "Authorization: Bearer YOUR_KEY"

Slack Notifications Not Working

Verify SLACK_WEBHOOK_URL is correct in your .env.local

Test webhook directly: curl -X POST -H 'Content-Type: application/json' -d '{"text":"Test"}' YOUR_WEBHOOK_URL

Check that webhook is active in Slack app settings

Verify the Slack channel exists and webhook has permissions

Review server logs for Slack-specific errors

Gradual Migration

To run both systems in parallel during migration: 1. Keep existing Slack code 2. Add new Loops/Workflow code 3. Test both systems work 4. Remove Slack code when ready

Code Changes Made

`src/app/api/problem/send/route.ts`

Added Loops user confirmation email (direct API call)

Added Slack admin notification (webhook)

Non-fatal error handling (notifications don't block form submission)

Includes formatted Slack messages with blocks for better readability

Workflow SDK code present but commented out for future use

`src/workflows/problem-notification.ts` (optional, for future use)

Durable workflow function ready for when you want to enable it

Uses "use workflow" and "use step" directives

Currently not in use, but available for production when ready

`.env.example`

Added LOOPS_API_KEY configuration (required)

Added SLACK_WEBHOOK_URL configuration (recommended)

Documented Workflow SDK as optional future enhancement

`package.json`

Added workflow dependency (v4.2.4) for future use

Not currently active in the application

Support

Loops Documentation: https://loops.so/docs

Vercel Workflow SDK: https://workflow-sdk.dev

Workflow GitHub: https://github.com/vercel/workflow

Vercel Workflow Docs: https://vercel.com/docs/workflows

Email Template Examples: Check Loops template gallery

Enabling Vercel Workflow (Future Enhancement)

When you're ready to enable durable workflows with automatic retries:

1. Update next.config.ts:

typescript

import { withWorkflow } from 'workflow/next';

   export default withWorkflow(withMDX(nextConfig));

2. Uncomment Workflow code in src/app/api/problem/send/route.ts:

Remove the Slack notification code (or keep both)

Uncomment the Workflow SDK section at the bottom

Restart your dev server

3. Benefits you'll get:

Automatic retries on failure

Durable execution (survives deployments)

Built-in observability in Vercel dashboard

No need to manage retry logic

Note: Workflow SDK currently uses experimental Node.js features (JSON module imports). Wait until this stabilizes before enabling in production.

Cost Comparison

Service	Free Tier	Paid Plans	Status
Loops	1,000 emails/month	$20/month for 10K emails	Active ✅
Slack	Free	$8/user/month for Pro	Active ✅
Vercel Workflow	Included with Vercel Pro	Included in Vercel plans	Ready for future 🔜

Current setup uses proven, stable technologies at minimal cost. Workflow SDK is available when you're ready to enable advanced durability features.

Test Utility

A CLI test utility is available to verify the integration status and test notifications:

Quick Start

bash

# Test against development server (must be running)
npm run test:workflow

# Test against production
npm run test:workflow:prod

Features

The test utility checks:

✅ Environment variable configuration (LOOPS_API_KEY, SLACK_WEBHOOK_URL)

✅ Server connectivity (dev or production)

✅ API endpoint functionality

✅ Request/response validation

✅ Provides manual verification checklist

What It Does

1. Configuration Check: Verifies all required environment variables are set 2. Connectivity Test: Confirms the target server is accessible 3. API Test: Sends a test submission to the /api/problem/send endpoint 4. Results Report: Shows detailed status with color-coded output 5. Verification Guide: Provides checklist for manual verification steps

Example Output

code

UNPARTY
Workflow + Loops Integration Test
Development Environment

=== Configuration Status ===
✓ Loops API Key: 056d6860...afb0
✓ Slack Webhook URL: https://hooks...
✓ Database URL: postgres...

=== Connectivity Check ===
✓ Development server is running at http://localhost:3000

=== API Integration Test ===
Email: test-workflow-123@unparty.app
Name: Test User
Idea: Workflow Integration Test

=== Manual Verification Checklist ===
□ Check your test email inbox for confirmation
□ Check Loops dashboard for email send status
□ Check your Slack channel for admin notification
□ Verify message formatting in Slack

Notes

Uses consistent UNPARTY CLI branding from theunpartyrunway

Masks sensitive values in output for security

Non-destructive testing (creates test data only)

Helpful error messages with troubleshooting guidance

Works with both local development and production environments

Problem Worksheet Notification Setup

Current Implementation (Stable)

Future Enhancement (Optional)

Benefits

Setup Instructions

Step 1: Configure Loops (User Email Confirmations)

Step 2: Configure Slack Webhook (Admin Notifications)

Step 3: Deploy Changes

Migration Timeline

Troubleshooting

User Emails Not Sending

Slack Notifications Not Working

Gradual Migration

Code Changes Made

src/app/api/problem/send/route.ts

src/workflows/problem-notification.ts (optional, for future use)

.env.example

package.json

Support

Enabling Vercel Workflow (Future Enhancement)

Cost Comparison

Test Utility

Quick Start

Features

What It Does

Example Output

Notes

`src/app/api/problem/send/route.ts`

`src/workflows/problem-notification.ts` (optional, for future use)

`.env.example`

`package.json`