add emi notification

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,6 +259,7 @@ export default function HomeScreen() {
           />
         </View>
         {due_amount && (
+          <>
             <PaymentDueCard
               label={t("home.payment-due")}
               amount={due_amount}
@@ -265,6 +267,13 @@ export default function HomeScreen() {
                 router.push("/payments/selectAmount");
               }}
             />
+
+            <EMINotification
+              message="Payment Complete"
+              actionText="View Details"
+              onActionPress={() => router.push("/(tabs)/payments")}
+            />
+          </>
         )}
         <View style={styles.map}>
           {loading ? (

assets/icons/check_circle (1).svg

@@ -0,0 +1,8 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_14_4184" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="21">
+<rect y="0.5" width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_14_4184)">
+<path d="M8.83366 12L7.04199 10.2083C6.88921 10.0556 6.69477 9.97917 6.45866 9.97917C6.22255 9.97917 6.0281 10.0556 5.87533 10.2083C5.72255 10.3611 5.64616 10.5556 5.64616 10.7917C5.64616 11.0278 5.72255 11.2222 5.87533 11.375L8.25033 13.75C8.41699 13.9167 8.61144 14 8.83366 14C9.05588 14 9.25033 13.9167 9.41699 13.75L14.1253 9.04167C14.2781 8.88889 14.3545 8.69445 14.3545 8.45834C14.3545 8.22223 14.2781 8.02778 14.1253 7.87501C13.9725 7.72223 13.7781 7.64584 13.542 7.64584C13.3059 7.64584 13.1114 7.72223 12.9587 7.87501L8.83366 12ZM10.0003 18.8333C8.84755 18.8333 7.76421 18.6146 6.75033 18.1771C5.73644 17.7396 4.85449 17.1458 4.10449 16.3958C3.35449 15.6458 2.76074 14.7639 2.32324 13.75C1.88574 12.7361 1.66699 11.6528 1.66699 10.5C1.66699 9.34723 1.88574 8.26389 2.32324 7.25001C2.76074 6.23612 3.35449 5.35417 4.10449 4.60417C4.85449 3.85417 5.73644 3.26042 6.75033 2.82292C7.76421 2.38542 8.84755 2.16667 10.0003 2.16667C11.1531 2.16667 12.2364 2.38542 13.2503 2.82292C14.2642 3.26042 15.1462 3.85417 15.8962 4.60417C16.6462 5.35417 17.2399 6.23612 17.6774 7.25001C18.1149 8.26389 18.3337 9.34723 18.3337 10.5C18.3337 11.6528 18.1149 12.7361 17.6774 13.75C17.2399 14.7639 16.6462 15.6458 15.8962 16.3958C15.1462 17.1458 14.2642 17.7396 13.2503 18.1771C12.2364 18.6146 11.1531 18.8333 10.0003 18.8333ZM10.0003 17.1667C11.8614 17.1667 13.4378 16.5208 14.7295 15.2292C16.0212 13.9375 16.667 12.3611 16.667 10.5C16.667 8.63889 16.0212 7.06251 14.7295 5.77084C13.4378 4.47917 11.8614 3.83334 10.0003 3.83334C8.13921 3.83334 6.56283 4.47917 5.27116 5.77084C3.97949 7.06251 3.33366 8.63889 3.33366 10.5C3.33366 12.3611 3.97949 13.9375 5.27116 15.2292C6.56283 16.5208 8.13921 17.1667 10.0003 17.1667Z" fill="#008761"/>
+</g>
+</svg>

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<EMINotificationProps> = ({
+  message,
+  actionText,
+  onActionPress,
+}) => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.content}>
+        <View style={styles.checkIconContainer}>
+          <CheckIcon width={20} height={20} />
+        </View>
+        <View style={styles.textContainer}>
+          <Text style={styles.messageText}>{message}</Text>
+        </View>
+        {actionText && onActionPress && (
+          <TouchableOpacity style={styles.actionButton} onPress={onActionPress}>
+            <Text style={styles.actionText}>{actionText}</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+    </View>
+  );
+};
+
+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;

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",