Patient app components

import { AmbientBloom } from 'patient-app';

<View style={{ width: 300, height: 420, backgroundColor: '#F2F0EB', overflow: 'hidden', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
  <AmbientBloom color={colors.success} size={520} />
  <ThemedText type="subtitle">You’re all set</ThemedText>
  <ThemedText type="small">3 scripts ready at Newtown</ThemedText>
</View>

import { AppHeader } from 'patient-app';

<View style={{ backgroundColor: '#F2F0EB' }}>
  <AppHeader />
  <View style={{ padding: 24 }}>
    <ThemedText type="small" themeColor="textSecondary">Screen content sits below the header.</ThemedText>
  </View>
</View>

import { DetailScaffold } from 'patient-app';

<DetailScaffold title="Your prescription" subtitle="Metformin 500mg · 90 tablets">
  <ThemedView style={{ padding: 18, borderRadius: 18, gap: 6 }}>
    <ThemedText type="smallBold">Ready to collect</ThemedText>
    <ThemedText type="small">Newtown Pharmacy · open until 9pm</ThemedText>
  </ThemedView>
</DetailScaffold>

import { HoldToConfirm } from 'patient-app';

<View style={{ padding: 24, backgroundColor: '#F2F0EB' }}>
  <HoldToConfirm label="Hold to cancel appointment" onConfirm={() => {}} />
</View>

import { LivingAuraOrb } from 'patient-app';

<View style={{ padding: 24, alignItems: 'center', backgroundColor: '#F2F0EB' }}>
  <LivingAuraOrb size={220} />
</View>

import { OnboardingScaffold } from 'patient-app';

<OnboardingScaffold
  step={3}
  title="Verify your identity"
  subtitle="We use this to match you to your prescriptions."
  primary={{ label: 'Continue', onPress: () => {} }}
  secondary={{ label: 'Back', onPress: () => {} }}>
  <View style={{ gap: 8 }}>
    <ThemedText type="default">Enter your Medicare details to link your scripts.</ThemedText>
  </View>
</OnboardingScaffold>

import { PaymentMarks } from 'patient-app';

<View style={{ padding: 20, gap: 18, backgroundColor: '#F2F0EB' }}>
  <View style={{ gap: 8 }}>
    <ThemedText type="small" themeColor="textSecondary">All methods</ThemedText>
    <PaymentMarks />
  </View>
  <View style={{ gap: 8 }}>
    <ThemedText type="small" themeColor="textSecondary">Cards only</ThemedText>
    <PaymentMarks brands={['visa', 'mastercard']} />
  </View>
</View>

import { PharmacySheet } from 'patient-app';

<View style={{ height: 680, backgroundColor: '#F2F0EB' }}>
  <PharmacySheet
    pharmacy={{
      id: 'p1',
      name: 'Qiri Community Pharmacy',
      suburb: 'Newtown NSW',
      logoUrl: 'https://qiri.ai/images/favicon-48.png',
      phone: '(02) 9557 1234',
      address: '188 King St, Newtown NSW 2042',
      hours: 'Mon–Fri 8am–8pm · Sat 9am–5pm · Sun 10am–4pm',
    }}
    onClose={() => {}}
  />
</View>

import { QiriAuraLogo } from 'patient-app';

<View style={{ padding: 24, alignItems: 'center', backgroundColor: '#F2F0EB' }}>
  <QiriAuraLogo size={200} />
</View>

import { QiriButton } from 'patient-app';

<View style={{ padding: 20, gap: 12, backgroundColor: '#F2F0EB' }}>
  <QiriButton title="Collect my scripts" variant="primary" chevron />
  <QiriButton title="Book a pharmacist consult" variant="secondary" />
  <QiriButton title="Skip for now" variant="ghost" />
</View>

import { QiriCheckbox } from 'patient-app';

<View style={{ padding: 20, gap: 16, backgroundColor: '#F2F0EB' }}>
  <QiriCheckbox checked onToggle={() => {}}>
    <ThemedText type="default">I agree to the Qiri privacy terms</ThemedText>
  </QiriCheckbox>
  <QiriCheckbox checked={false} onToggle={() => {}}>
    <ThemedText type="default">Send me collection reminders</ThemedText>
  </QiriCheckbox>
</View>

import { QiriField } from 'patient-app';

<View style={{ padding: 20, gap: 16, backgroundColor: '#F2F0EB' }}>
  <QiriField label="Medicare number" value="2953 74125 1" placeholder="0000 00000 0" />
  <QiriField label="Mobile number" value="0412 345 678" placeholder="04__ ___ ___" />
</View>

import { QiriFooter } from 'patient-app';

<View style={{ backgroundColor: '#F2F0EB', paddingHorizontal: 24, paddingTop: 40 }}>
  <QiriFooter />
</View>

import { QiriLoading } from 'patient-app';

<View style={{ padding: 32, alignItems: 'center', backgroundColor: '#F2F0EB' }}>
  <QiriLoading message="Preparing your order…" />
</View>

import { QiriMark } from 'patient-app';

<View style={{ padding: 28, flexDirection: 'row', alignItems: 'center', gap: 20, backgroundColor: '#F2F0EB' }}>
  <QiriMark size={64} />
  <QiriMark size={44} />
  <QiriMark size={28} />
</View>

import { QiriNotice } from 'patient-app';

<View style={{ padding: 20, gap: 12, backgroundColor: '#F2F0EB' }}>
  <Row kind="danger">This script needs a pharmacist review before collection.</Row>
  <Row kind="warm">Bring your Medicare card to link your first collection.</Row>
  <Row kind="info">Your prescription is on its way to the pharmacy.</Row>
  <Row kind="success">Payment received — your order is being prepared.</Row>
</View>

import { QiriPinInput } from 'patient-app';

<View style={{ padding: 24, backgroundColor: '#F2F0EB' }}>
  <QiriPinInput label="Enter your Qiri PIN" value="1234" onChangeText={() => {}} length={6} hint="6-digit code from your welcome email" />
</View>

import { QiriSheet } from 'patient-app';

<View style={{ height: 680, backgroundColor: '#F2F0EB' }}>
  <QiriSheet visible onClose={() => {}}>
    <ThemedText type="subtitle">Ready to collect</ThemedText>
    <ThemedText type="default">
      Metformin 500mg and 2 other scripts are packed and waiting at Qiri Pharmacy, Newtown.
    </ThemedText>
    <QiriButton title="Get directions" variant="secondary" />
    <QiriButton title="I’m on my way" variant="primary" chevron />
  </QiriSheet>
</View>

import { QiriTabBar } from 'patient-app';

<View style={{ height: 150, backgroundColor: '#F2F0EB', position: 'relative' }}>
  <QiriTabBar state={{ index: 1, routes }} navigation={{ navigate: () => {} }} />
</View>

import { QiriToggle } from 'patient-app';

<View style={{ padding: 20, gap: 20, backgroundColor: '#F2F0EB' }}>
  <Row label="Refill reminders" value={true} />
  <Row label="Share summary with pharmacist" value={false} />
  <Row label="Face ID sign-in" value={true} disabled />
</View>

import { RadialGlow } from 'patient-app';

<View style={{ padding: 24, alignItems: 'center', backgroundColor: '#F2F0EB' }}>
  <View style={{ width: 200, height: 200, alignItems: 'center', justifyContent: 'center' }}>
    <RadialGlow color={colors.accent} size={200} peak={0.45} />
  </View>
</View>

import { StateBloom } from 'patient-app';

<View style={{ height: 380, backgroundColor: '#F2F0EB', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
  <StateBloom color={colors.success} size={380}>
    <ThemedText type="subtitle">You’re all set</ThemedText>
    <ThemedText type="small">3 scripts ready at Newtown</ThemedText>
  </StateBloom>
</View>

import { StepProgress } from 'patient-app';

<View style={{ padding: 24, backgroundColor: '#F2F0EB' }}>
  <StepProgress step={3} total={6} />
</View>

import { ThemedText } from 'patient-app';

<View style={{ padding: 20, gap: 8, backgroundColor: '#F2F0EB' }}>
  <ThemedText type="title">Your scripts are ready</ThemedText>
  <ThemedText type="default">Collect them anytime from the Qiri pharmacy near you.</ThemedText>
  <ThemedText type="small">Bulk-billed · no appointment needed</ThemedText>
  <ThemedText type="smallBold">3 items to collect</ThemedText>
</View>

import { ThemedView } from 'patient-app';

<View style={{ padding: 20, backgroundColor: '#ECEAE4' }}>
  <ThemedView style={{ padding: 20, borderRadius: 16 }}>
    <ThemedText type="smallBold">Next collection</ThemedText>
    <ThemedText type="default">Metformin 500mg · ready now</ThemedText>
  </ThemedView>
</View>