Quest Components

Overview

Quest components are located in src/components/quest/ and handle all quest-related UI functionality including quest details, tasks, rewards, reminders, and participant management.

Component Structure

QuestDetailContent (QuestDetailContent.tsx)

Main container component for quest detail view.

Features:

• Displays quest information
• Manages quest editing state
• Handles quest updates
• Coordinates child components

QuestDetailRow (QuestDetailRow.tsx)

Reusable row component for displaying quest detail fields.

Props:

• label: Field label
• value: Field value
• editable: Whether field is editable
• onChange: Change handler
• type: Input type (text, textarea, date, etc.)

QuestDescription (QuestDescription.tsx)

Component for displaying and editing quest description.

Features:

• View mode and edit mode
• Rich text editing support
• Auto-save functionality

QuestTasks (QuestTasks.tsx)

Component for managing quest tasks.

Features:

• List all quest tasks
• Create new tasks
• Edit existing tasks
• Delete tasks
• Reorder tasks (drag and drop)
• Task type selection
• Task configuration

Task Types:

• Social media tasks (Twitter, LinkedIn, etc.)
• Form submissions
• Link clicks
• Custom actions

QuestReward (QuestReward.tsx)

Component for managing quest rewards.

Features:

• Display reward information
• Edit reward details
• Upload reward images
• Configure reward codes
• Set reward type and description

QuestSponsor (QuestSponsor.tsx)

Component for managing quest sponsors.

Features:

• Display sponsor information
• Edit sponsor details
• Upload sponsor logos
• Set sponsor website links

QuestTimeline (QuestTimeline.tsx)

Component for displaying quest timeline.

Features:

• Show quest start/end dates
• Display deadline
• Show raffle draw date (if applicable)
• Visual timeline representation

QuestReminders (QuestReminders.tsx)

Component for managing quest reminder templates.

Features:

• List reminder templates
• Create new templates
• Edit templates
• Set default template
• Delete templates
• Send reminders

ReminderTemplateList (ReminderTemplateList.tsx)

Component for listing quest reminder templates.

Features:

• Display all templates
• Show default template indicator
• Template actions (edit, delete, set default)

ReminderTemplateEditor (ReminderTemplateEditor.tsx)

Component for editing reminder templates.

Features:

• Edit template name
• Configure notification payloads for different stages:
  • Not started
  • In progress (early, mid, late)
  • Completed
• Preview notifications
• Save template

SendReminderDialog (SendReminderDialog.tsx)

Dialog component for sending quest reminders.

Features:

• Select template
• Choose reminder stages
• Exclude completed quests option
• Schedule reminders
• Preview user count
• Send reminders

RewardCodesDialog (RewardCodesDialog.tsx)

Dialog component for managing reward codes.

Features:

• View assigned reward codes
• Add new reward codes
• Remove reward codes
• Bulk import codes

useQuestEdit (useQuestEdit.tsx)

Custom hook for quest editing functionality.

Features:

• Manages quest edit state
• Handles quest updates
• Manages task updates
• Coordinates save operations
• Error handling

Returns:

• quest: Current quest data
• tasks: Current tasks
• isEditing: Edit mode state
• isSaving: Saving state
• startEdit: Function to start editing
• cancelEdit: Function to cancel editing
• saveQuest: Function to save quest
• updateQuestField: Function to update quest field
• updateTask: Function to update task
• addTask: Function to add new task
• removeTask: Function to remove task

Quest Index (index.ts)

Barrel export file for all quest components.

Exports:

• QuestDetailContent
• QuestDetailRow
• QuestDescription
• QuestTasks
• QuestReward
• QuestSponsor
• QuestTimeline
• QuestReminders
• ReminderTemplateList
• ReminderTemplateEditor
• SendReminderDialog
• RewardCodesDialog
• useQuestEdit

Usage Example

import {
  QuestDetailContent,
  QuestTasks,
  QuestReward,
  useQuestEdit
} from "@/components/quest";
 
function QuestPage() {
  const { quest, tasks, isEditing, saveQuest } = useQuestEdit(questId);
  
  return (
    <QuestDetailContent>
      <QuestDescription quest={quest} />
      <QuestTasks tasks={tasks} />
      <QuestReward quest={quest} />
    </QuestDetailContent>
  );
}

Quest Data Structure

Quest Object

interface Quest {
  id: string;
  title: string;
  subtitle?: string;
  description?: string;
  tag?: string;
  category?: string;
  reward?: string;
  reward_description?: string;
  reward_image?: string;
  reward_type?: string;
  points: number;
  deadline: string;
  sponsor?: string;
  sponsor_logo?: string;
  sponsor_website?: string;
  featured: boolean;
  background_color?: string;
  border_color?: string;
  difficulty?: string;
  estimated_completion_time?: string;
  quest_type?: string;
  raffle_draw_date?: string;
  is_active: boolean;
  created_at: string;
  updated_at: string;
}

Quest Task Object

interface QuestTask {
  id: string;
  quest_id: string;
  type: string;
  description: string;
  detail_description?: string;
  points: number;
  action_type?: string;
  action_url?: string;
  verification_type?: string;
  icon?: string;
  repeatable: boolean;
  repeat_frequency?: string;
  start_date?: string;
  end_date?: string;
  is_mandatory: boolean;
  time_estimate?: string;
  platform?: string;
  required_hashtags?: string[];
  suggested_text?: string;
  tips?: string;
  example?: string;
  unlock_condition?: any;
  metadata?: any;
  proof_required: boolean;
  created_at: string;
  updated_at: string;
}