import { GestureResponderEvent, StyleSheet, View } from "react-native"; import { useIOTheme } from "../../context"; import { IOListItemVisualParams, IOSpacer } from "../../core"; import { WithTestID } from "../../utils/types"; import { Badge } from "../badge"; import { Icon } from "../icons"; import { HStack, VStack } from "../layout"; import { IOSkeleton } from "../skeleton"; import { Body, BodySmall, H6 } from "../typography"; import { ModuleStatic } from "./ModuleStatic"; import { PressableModuleBase } from "./PressableModuleBase"; export type PaymentNoticeStatus = | "default" | "paid" | "error" | "expired" | "revoked" | "canceled" | "in-progress"; export type ModulePaymentNoticeProps = WithTestID< { isLoading?: boolean; accessibilityLabel?: string; loadingAccessibilityLabel?: string; title?: string; subtitle: string; onPress: (event: GestureResponderEvent) => void; } & ( | { paymentNotice: { status: Extract; amount: string; amountAccessibilityLabel: string; }; badgeText?: never; } | { paymentNotice: { status: Exclude; amount?: string; amountAccessibilityLabel?: string; }; badgeText: string; } ) >; const styles = StyleSheet.create({ endBlock: { flexDirection: "row", alignItems: "center", justifyContent: "flex-end" } }); const AmountOrBadgeComponent = ({ status, amount, amountAccessibilityLabel, badgeText }: { status: PaymentNoticeStatus; amount: string | undefined; amountAccessibilityLabel: string | undefined; badgeText: string; }) => { const theme = useIOTheme(); switch (status) { case "default": return (

{amount}

); case "paid": return ; case "error": return ; case "expired": case "revoked": case "canceled": case "in-progress": return ; } }; const ModulePaymentNoticeContent = ({ title, subtitle, paymentNotice: { status, amount, amountAccessibilityLabel }, badgeText = "" }: Omit) => { const theme = useIOTheme(); return ( {title && ( {title} )} {subtitle && ( {subtitle} )} ); }; /** * The `ModulePaymentNotice` component is a custom button component with an extended outline style. * It provides an animated scaling effect when pressed. * * @param {boolean} isLoading - If true, displays a skeleton loading component. * @param {function} onPress - The function to be executed when the item is pressed. * @param {string} title - The title text to display. * @param {string} subtitle - The subtitle text to display. * @param {string} testID - The test ID for testing purposes. * @param {string} paymentNoticeAmount - The payment notice amount to display. * @param {string} paymentNoticeStatus - The status of the payment notice. */ export const ModulePaymentNotice = ({ isLoading = false, testID, accessibilityLabel, onPress, loadingAccessibilityLabel, ...rest }: ModulePaymentNoticeProps) => { if (isLoading) { return ( ); } return ( ); }; const ModulePaymentNoticeSkeleton = ({ loadingAccessibilityLabel }: Pick) => ( } endBlock={ } /> );