This repository has been archived on 2026-08-11. You can view files and clone it, but cannot push or open issues or pull requests.
Gishen-Mob/components/checkout/PaymentMethodList.tsx
kirukib d40cb22ff4 Finalize profile, prescription, and checkout with shared UI modules.
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>
2026-08-10 14:53:34 +03:00

67 lines
2.1 KiB
TypeScript

import type { Ionicons } from "@expo/vector-icons";
import { Card } from "@/components/ui/Card";
import { OptionRow } from "@/components/ui/Field";
import { Text } from "@/components/ui/Text";
import type { PaymentMethod } from "@/lib/stores/locationStore";
import { colors } from "@/lib/theme";
import { View } from "react-native";
const META: Record<
PaymentMethod,
{ title: string; hint: string; icon: keyof typeof Ionicons.glyphMap }
> = {
chapa: { title: "Chapa", hint: "Card / mobile money via Chapa", icon: "card-outline" },
arifpay: { title: "ArifPay", hint: "Local digital checkout", icon: "wallet-outline" },
telebirr: { title: "Telebirr", hint: "Ethio telecom Telebirr", icon: "phone-portrait-outline" },
mpesa: { title: "M-Pesa", hint: "Safaricom M-Pesa", icon: "cash-outline" },
bank: { title: "Bank transfer", hint: "Transfer + upload receipt later", icon: "business-outline" },
pay_at_branch: {
title: "Pay at branch",
hint: "Cash or POS when you collect",
icon: "storefront-outline",
},
cod: { title: "Cash on delivery", hint: "Pay the rider on arrival", icon: "bicycle-outline" },
};
export function PaymentMethodList({
methods,
selected,
onSelect,
title = "Payment",
footnote,
}: {
methods: PaymentMethod[];
selected: PaymentMethod;
onSelect: (m: PaymentMethod) => void;
title?: string;
footnote?: string;
}) {
return (
<Card elevated={false} padded={false}>
<View style={{ padding: 16, paddingBottom: 8 }}>
<Text variant="h3">{title}</Text>
{footnote ? (
<Text variant="caption" color={colors.subtle} style={{ marginTop: 4 }}>
{footnote}
</Text>
) : null}
</View>
{methods.map((m, i) => (
<OptionRow
key={m}
title={META[m].title}
subtitle={META[m].hint}
selected={selected === m}
onPress={() => onSelect(m)}
icon={META[m].icon}
last={i === methods.length - 1}
/>
))}
</Card>
);
}
export function paymentLabel(m: PaymentMethod) {
return META[m]?.title ?? m;
}