Merge pull request #60 from Naveen-g09/payment

Payment

.env

@@ -1,2 +1,4 @@
 EXPO_PUBLIC_SUPABASE_URL="https://hnmqvjnnscdkcbxcbvyu.supabase.co"
-EXPO_PUBLIC_SUPABASE_ANON_KEY= "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImhubXF2am5uc2Nka2NieGNidnl1Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTEyOTgxMjMsImV4cCI6MjAyNjg3NDEyM30.xjzSaG22KLkzskY4U3NaohE_RLTLTkeTW_2qD5RFPUc"
+EXPO_PUBLIC_SUPABASE_ANON_KEY= "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImhubXF2am5uc2Nka2NieGNidnl1Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTEyOTgxMjMsImV4cCI6MjAyNjg3NDEyM30.xjzSaG22KLkzskY4U3NaohE_RLTLTkeTW_2qD5RFPUc"
+RAZORPAY_KEY_ID="rzp_test_6zPqicA8GMDU00"
+RAZORPAY_KEY_SECRET="IMqvoUdH0rlTUKYuCAHYI4kb"

app.json

@@ -3,6 +3,7 @@
     "name": "Residentron",
     "slug": "residentron",
     "version": "1.0.0",
+    "runtimeVersion": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
     "scheme": "myapp",
@@ -41,9 +42,6 @@
         "projectId": "c60ed383-fb7e-4a56-a589-acae0e73b49f"
       }
     },
-    "runtimeVersion": {
-      "policy": "appVersion"
-    },
     "updates": {
       "url": "https://u.expo.dev/c60ed383-fb7e-4a56-a589-acae0e73b49f"
     },

app/payment.tsx

@@ -1,42 +1,162 @@
+import { Asset } from "expo-asset";
 import React from "react";
-import { View, Text, StyleSheet } from "react-native";
+import {
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  Text,
+  Alert,
+  ImageBackground,
+} from "react-native";
+import RazorpayCheckout from "react-native-razorpay";
+
+const Payment: React.FC = () => {
+  const logo = Asset.fromModule(require("../assets/images/icon.jpg")).uri;
+  const handlePayment = (amount: any, description: string) => {
+    const options = {
+      description,
+      image: logo,
+      currency: "INR",
+      key: "rzp_test_6zPqicA8GMDU00", // Replace with your Razorpay key
+      amount, // Amount in paise (e.g. 5000 = ₹50),
+      order_id: "order_EMBFqjDHEEn80l", // Replace with your order ID
+      name: "Residentron Society Maintenance",
+      prefill: {
+        email: "[email protected]",
+        contact: "9999999999",
+        name: "Test User",
+      },
+      theme: { color: "#F37254" },
+    };
+
+    RazorpayCheckout.open(options)
+      .then((data) => {
+        // Success callback
+        Alert.alert(
+          "✅ Payment Success!",
+          `Thank you for your payment! Your payment ID is: ${data.razorpay_payment_id}`,
+          [{ text: "OK", style: "default" }],
+        );
+      })
+      .catch((error) => {
+        // Failure callback
+        Alert.alert(
+          "❌ Oops! Payment Failed",
+          `There was an error processing your payment:\n${error.description}`,
+          [{ text: "Try Again", style: "cancel" }],
+        );
+      });
+  };
+
+  const currentDate = new Date();
+  const currentMonth = currentDate.toLocaleString("default", { month: "long" });
+
+  // Get the date 1 year ahead
+  const nextYearDate = new Date();
+  nextYearDate.setFullYear(currentDate.getFullYear() + 1);
+  const nextYearMonth = nextYearDate.toLocaleString("default", {
+    month: "long",
+  });
+  const nextYear = nextYearDate.getFullYear();
+
+  const image = require("../assets/images/rupee.png");
 
-const Payment = () => {
   return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Payment Status</Text>
-      <Text style={styles.message}>
-        There are no payment dues for your apartment
-      </Text>
-      <Text style={styles.thankYou}>Thank you for your prompt payment!</Text>
-    </View>
+    <ImageBackground
+      source={image} // Replace with the rupee image you prefer
+      style={styles.background}
+    >
+      <View style={styles.container}>
+        <Text style={styles.header}>Residentron Society Maintenance</Text>
+
+        {/* Monthly Payment */}
+        <View style={styles.paymentOption}>
+          <Text style={styles.title}>
+            Monthly Society Maintenance for {currentMonth}
+          </Text>
+          <TouchableOpacity
+            style={styles.payButton}
+            onPress={() => handlePayment("5000", "Monthly Society Maintenance")}
+          >
+            <Text style={styles.payButtonText}>Pay ₹500</Text>
+          </TouchableOpacity>
+        </View>
+
+        {/* Annual Payment */}
+        <View style={[styles.paymentOption, styles.paymentOptionMargin]}>
+          <Text style={styles.title}>Annual Society Maintenance</Text>
+          <Text style={styles.subtitle}>
+            From {currentMonth} {currentDate.getFullYear()} till {nextYearMonth}{" "}
+            {nextYear}
+          </Text>
+          <TouchableOpacity
+            style={styles.payButton}
+            onPress={() => handlePayment("60000", "Annual Society Maintenance")}
+          >
+            <Text style={styles.payButtonText}>Pay ₹6000</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </ImageBackground>
   );
 };
 
 const styles = StyleSheet.create({
+  background: {
+    flex: 1,
+    resizeMode: "cover",
+    justifyContent: "center",
+  },
   container: {
-    flex: 1, // Take full height of the device
-    justifyContent: "center", // Center vertically
-    alignItems: "center", // Center horizontally
-    backgroundColor: "#f5f5f5", // Light background color
-    padding: 20, // Padding around the content
+    flex: 1,
+    backgroundColor: "rgba(255,255,255,0.8)", // Semi-transparent background
+    padding: 20,
+    justifyContent: "center",
   },
-  title: {
-    fontSize: 28, // Large font size for the title
+  header: {
+    fontSize: 28,
     fontWeight: "bold",
-    marginBottom: 20, // Space below the title
-    color: "#4CAF50", // Green color for the title
+    textAlign: "center",
+    marginBottom: 40,
+    color: "#333",
+  },
+  paymentOption: {
+    marginBottom: 30,
+    padding: 20,
+    backgroundColor: "#fff",
+    borderRadius: 10,
+    shadowColor: "#000",
+    shadowOpacity: 0.1,
+    shadowRadius: 10,
+    shadowOffset: { width: 0, height: 5 },
+    elevation: 5,
+  },
+  paymentOptionMargin: {
+    marginTop: 20, // Gap between the buttons
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "500",
+    color: "#333",
+    marginBottom: 10,
+    textAlign: "center",
+  },
+  subtitle: {
+    fontSize: 16,
+    color: "#666",
+    marginBottom: 20,
+    textAlign: "center",
   },
-  message: {
-    fontSize: 20, // Medium font size for the message
-    textAlign: "center", // Center align the text
-    color: "#333", // Darker color for the message
-    marginBottom: 10, // Space below the message
+  payButton: {
+    backgroundColor: "blue",
+    paddingVertical: 15,
+    borderRadius: 5,
   },
-  thankYou: {
-    fontSize: 20, // Same size as the message for consistency
+  payButtonText: {
+    color: "#fff",
+    fontSize: 18,
     textAlign: "center",
-    color: "#333", // Darker color for the thank you message
+    fontWeight: "600",
   },
 });
 

package.json

@@ -27,9 +27,11 @@
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/datetimepicker": "8.0.1",
     "@react-navigation/native": "^6.0.2",
+    "@types/react-native-razorpay": "^2.2.6",
     "axios": "^1.7.7",
     "class-variance-authority": "^0.7.0",
-    "expo": "~51.0.37",
+    "expo": "~51.0.38",
+    "expo-asset": "^10.0.10",
     "expo-dev-client": "~4.0.28",
     "expo-font": "~12.0.10",
     "expo-image": "~1.13.0",
@@ -51,6 +53,7 @@
     "react-native-gesture-handler": "~2.16.1",
     "react-native-mmkv": "^2.12.2",
     "react-native-paper": "^5.12.5",
+    "react-native-razorpay": "^2.3.0",
     "react-native-reanimated": "~3.10.1",
     "react-native-safe-area-context": "4.10.5",
     "react-native-screens": "3.31.1",

yarn.lock

@@ -2924,6 +2924,13 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb"
   integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
 
+"@types/react-native-razorpay@^2.2.6":
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/@types/react-native-razorpay/-/react-native-razorpay-2.2.6.tgz#811f2755c75597f516ee472fd6f6c2eda6dd5c53"
+  integrity sha512-8CqZvL53bqs51aLaNXssEaBFN5a09WB5nWEOa1RtNXTnuh9zDyMZ9yKqjN+buVFFOAH4mE9IpB7J1V1I3REnMQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-native-vector-icons@^6.4.18", "@types/react-native-vector-icons@^6.4.6":
   version "6.4.18"
   resolved "https://registry.yarnpkg.com/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.18.tgz#18671c617b9d0958747bc959903470dde91a8c79"
@@ -6068,7 +6075,7 @@ expect@^29.7.0:
     jest-message-util "^29.7.0"
     jest-util "^29.7.0"
 
-expo-asset@~10.0.10:
+expo-asset@^10.0.10, expo-asset@~10.0.10:
   version "10.0.10"
   resolved "https://registry.yarnpkg.com/expo-asset/-/expo-asset-10.0.10.tgz#9e6e02c1a6ec3d19b50d5e615e4dd8e5cc30e857"
   integrity sha512-0qoTIihB79k+wGus9wy0JMKq7DdenziVx3iUkGvMAy2azscSgWH6bd2gJ9CGnhC6JRd3qTMFBL0ou/fx7WZl7A==
@@ -6181,10 +6188,10 @@ [email protected]:
     require-from-string "^2.0.2"
     resolve-from "^5.0.0"
 
-[email protected].25:
-  version "1.12.25"
-  resolved "https://registry.yarnpkg.com/expo-modules-core/-/expo-modules-core-1.12.25.tgz#9ec8d8762da92d961ab1044817da033ae617c9f4"
-  integrity sha512-HB2LS2LEM41Xq1bG+Jtzqm6XgPaa+mM9BAvCdX1lDGMQ9Ay9vMTL/GVEs2gpsINPofICopjBRwD+wftyCbVrzg==
+[email protected].26:
+  version "1.12.26"
+  resolved "https://registry.yarnpkg.com/expo-modules-core/-/expo-modules-core-1.12.26.tgz#86c4087dc6246abfc4d7f5e61097dc8cc4b22262"
+  integrity sha512-y8yDWjOi+rQRdO+HY+LnUlz8qzHerUaw/LUjKPU/mX8PRXP4UUPEEp5fjAwBU44xjNmYSHWZDwet4IBBE+yQUA==
   dependencies:
     invariant "^2.2.4"
 
@@ -6268,10 +6275,10 @@ expo-web-browser@~13.0.3:
   resolved "https://registry.yarnpkg.com/expo-web-browser/-/expo-web-browser-13.0.3.tgz#dceb05dbc187b498ca937b02adf385b0232a4e92"
   integrity sha512-HXb7y82ApVJtqk8tManyudtTrCtx8xcUnVzmJECeHCB0SsWSQ+penVLZxJkcyATWoJOsFMnfVSVdrTcpKKGszQ==
 
-expo@~51.0.37:
-  version "51.0.37"
-  resolved "https://registry.yarnpkg.com/expo/-/expo-51.0.37.tgz#a19b05b722d7ad445757b82a63185295508d2d4d"
-  integrity sha512-zMdfTiGNgNWG0HOOFA3zRreS94iQ7fDxxgEIR6wdQCbncTpbeYj+5mscTAlHE9JJ+oBkcNyJXrLSjE/YVbFERg==
+expo@~51.0.38:
+  version "51.0.38"
+  resolved "https://registry.yarnpkg.com/expo/-/expo-51.0.38.tgz#e4127b230454a34a507cfb9f1a2e4b3855cb0579"
+  integrity sha512-/B9npFkOPmv6WMIhdjQXEY0Z9k/67UZIVkodW8JxGIXwKUZAGHL+z1R5hTtWimpIrvVhyHUFU3f8uhfEKYhHNQ==
   dependencies:
     "@babel/runtime" "^7.20.0"
     "@expo/cli" "0.18.30"
@@ -6285,7 +6292,7 @@ expo@~51.0.37:
     expo-font "~12.0.10"
     expo-keep-awake "~13.0.2"
     expo-modules-autolinking "1.11.3"
-    expo-modules-core "1.12.25"
+    expo-modules-core "1.12.26"
     fbemitter "^3.0.0"
     whatwg-url-without-unicode "8.0.0-3"
 
@@ -10755,6 +10762,11 @@ [email protected]:
   dependencies:
     lodash "^4.17.15"
 
+react-native-razorpay@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/react-native-razorpay/-/react-native-razorpay-2.3.0.tgz#e89f3c635e439bc85e4c7972eb2d67e2c0e0abc3"
+  integrity sha512-xxiZCPuZmiRq5UHDr+D4OoyxEjMu0ujC+RaE+rYo938EK0Vc21dZRUVxMVP1L2WgzA8PYwmD5FWvdHNtWLQC4Q==
+
 react-native-reanimated@~3.10.1:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.10.1.tgz#3c37d1100bbba0065df39c96aab0c1ff1b50c0fa"