Add payment/notification prefs, assisted pharmacist codes, Rx status journey, and mock payment intents so demo flows match the storefront brief. Co-authored-by: Cursor <cursoragent@cursor.com>
58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import { Ionicons } from "@expo/vector-icons";
|
|
import { View } from "react-native";
|
|
import { Badge } from "@/components/ui/Badge";
|
|
import { Card } from "@/components/ui/Card";
|
|
import { Text } from "@/components/ui/Text";
|
|
import type { LineStatus } from "@/lib/stores/prescriptionStore";
|
|
import { colors } from "@/lib/theme";
|
|
|
|
const lineTone = {
|
|
ready: "brand",
|
|
review: "warn",
|
|
unavailable: "danger",
|
|
} as const;
|
|
|
|
export function RxMedicineLines({
|
|
medicines,
|
|
}: {
|
|
medicines: { name: string; status: LineStatus }[];
|
|
}) {
|
|
return (
|
|
<Card elevated={false} padded={false}>
|
|
{medicines.map((m, i) => (
|
|
<View
|
|
key={`${m.name}-${i}`}
|
|
style={{
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 14,
|
|
borderBottomWidth: i === medicines.length - 1 ? 0 : 1,
|
|
borderBottomColor: colors.line,
|
|
}}
|
|
>
|
|
<View style={{ flexDirection: "row", alignItems: "center", gap: 10, flex: 1 }}>
|
|
<View
|
|
style={{
|
|
width: 36,
|
|
height: 36,
|
|
borderRadius: 12,
|
|
backgroundColor: colors.brandSoft,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<Ionicons name="medkit-outline" size={16} color={colors.brandText} />
|
|
</View>
|
|
<Text variant="h3" style={{ flex: 1 }}>
|
|
{m.name}
|
|
</Text>
|
|
</View>
|
|
<Badge label={m.status} tone={lineTone[m.status]} />
|
|
</View>
|
|
))}
|
|
</Card>
|
|
);
|
|
}
|