Mission card

In context

Purpose

MissionCard turns "learn the app" into small, doable steps. One mission = one job, like a screen: an icon, a title, a why-line, optional progress, and one action. It's how DayTwo coaches a new shop owner forward without a trainer in the room.

Anatomy

• Icon disc — a soft teal circle with the mission's glyph.
• Title + why-line — the task and the reason it matters.
• Status pill (optional) — reuses StatusLabel ("New", "Done").
• Progress (optional) — a teal track + a caption ("2 of 5 days").
• Action — one primary button; onPress can make the whole card tappable.

Variants

• Call-to-action — a "New" mission with an action button.
• In progress — a progress track + label, still actionable.
• Done — a success status + full track; the reward of finishing.

Code

import { MissionCard } from '@daytwo/components'

<MissionCard
icon={<Wallet size={22} color={colors.brand.primary} />}
title="Count cash 5 days in a row"
description="Build the habit that makes your numbers trustworthy."
progress={0.4}
progressLabel="2 of 5 days"
actionLabel="Count today"
onAction={countToday}
/>

When to use

• Onboarding / activation — the next concrete step for a new user.
• Habit building — a recurring task with visible progress.

When NOT to use

• Advice grounded in numbers (not a task) — use a CoachMessage.
• A plain list row — use a Card or list item.
• Two competing CTAs — a mission has one next step, not a fork.

Good vs bad

• Good: "Record your first sale — log one sale so DayTwo can start tracking your money. [Record now]". One job, one reason, one action.
• Bad: a mission with "Record now" and "Learn more" as equal buttons plus three sub-tasks — it stops being one clear next step and a first-time user stalls on which thing to tap.

Edge cases

Tokens used