diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx index 3d0fb13..c7bbf51 100644 --- a/app/(tabs)/index.tsx +++ b/app/(tabs)/index.tsx @@ -39,6 +39,7 @@ import api from "@/services/axiosClient"; import { setDueAmount } from "@/store/paymentSlice"; import { EmiResponse } from "./payments"; import { Image } from "expo-image"; +import EMINotification from "@/components/Payments/EmiNotification"; export default function HomeScreen() { const { t } = useTranslation(); @@ -258,13 +259,21 @@ export default function HomeScreen() { /> {due_amount && ( - { - router.push("/payments/selectAmount"); - }} - /> + <> + { + router.push("/payments/selectAmount"); + }} + /> + + router.push("/(tabs)/payments")} + /> + )} {loading ? ( diff --git a/assets/icons/check_circle (1).svg b/assets/icons/check_circle (1).svg new file mode 100644 index 0000000..e364d98 --- /dev/null +++ b/assets/icons/check_circle (1).svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/components/Payments/EmiNotification.tsx b/components/Payments/EmiNotification.tsx new file mode 100644 index 0000000..fdd524b --- /dev/null +++ b/components/Payments/EmiNotification.tsx @@ -0,0 +1,98 @@ +import React from "react"; +import { View, Text, StyleSheet, TouchableOpacity } from "react-native"; +import CheckIcon from "@/assets/icons/check_circle.svg"; + +interface EMINotificationProps { + message: string; + actionText?: string; + onActionPress?: () => void; +} + +const EMINotification: React.FC = ({ + message, + actionText, + onActionPress, +}) => { + return ( + + + + + + + {message} + + {actionText && onActionPress && ( + + {actionText} + + )} + + + ); +}; + +const styles = StyleSheet.create({ + container: { + height: 72, + backgroundColor: "#FCFCFC", + borderRadius: 10, + padding: 16, + justifyContent: "center", + alignItems: "center", + }, + content: { + flexDirection: "row", + alignItems: "center", + height: 40, + gap: 12, + }, + checkIconContainer: { + width: 40, + height: 40, + justifyContent: "center", + alignItems: "center", + backgroundColor: "#EBFAF6", + borderRadius: "50%", + }, + checkIcon: { + width: 24, + height: 24, + backgroundColor: "#10B981", + borderRadius: 12, + justifyContent: "center", + alignItems: "center", + }, + checkMark: { + color: "white", + fontSize: 16, + fontWeight: "bold", + }, + textContainer: { + flex: 1, + height: 40, + justifyContent: "center", + paddingRight: 8, + }, + messageText: { + fontSize: 12, + fontWeight: "500", + color: "#565F70", + fontFamily: "Inter-Medium", + lineHeight: 16, + }, + actionButton: { + paddingVertical: 8, + borderRadius: 4, + }, + actionText: { + fontSize: 14, + fontWeight: "500", + color: "#006C4D", + fontFamily: "Inter-Medium", + lineHeight: 20, + textAlign: "center", + }, +}); + +export default EMINotification; diff --git a/services/i18n/locals/en.json b/services/i18n/locals/en.json index 9724401..06f6b34 100644 --- a/services/i18n/locals/en.json +++ b/services/i18n/locals/en.json @@ -59,8 +59,7 @@ "customer-support": "Customer Support", "whatsapp": "Whatsapp", "call-us": "Call Us", - "email": "Email", - "view-plan": "View Plan" + "email": "Email" }, "payment": { "last-emi-details": "Last EMI Details", @@ -106,7 +105,8 @@ "amount-to-be-paid": "Amount to be paid", "pay-using-upi": "Pay using UPI App", "confirm-payment": "Confirm once your payment is completed", - "payment-done": "Payment Done" + "payment-done": "Payment Done", + "view-plan": "View Plan" }, "service": { "schedule-maintenance": "Schedule Maintenance",