Merge pull request #234 from flickmatch/razorpay-fix

Fix razorpay currency issues.
flickmatch · May 22, 2024 · 1ebe363 · 1ebe363
2 parents fee40d6 + 6815985
commit 1ebe363
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 5 deletions.
diff --git a/...orm/src/main/java/com/flickmatch/platform/graphql/builder/RazorPaymentRequestBuilder.java b/...orm/src/main/java/com/flickmatch/platform/graphql/builder/RazorPaymentRequestBuilder.java
@@ -29,7 +29,7 @@ public String createOrderRequest(RazorpayClient razorpayClient, RazorPayInput in
            JSONObject orderRequest = new JSONObject();
            String[] parts =input.getUniqueEventId().split("-");
            String cityId = parts[0];
-           String currency = eventBuilder.getCurrencyForCity(cityId);
+           String currency = input.getCurrency();
            orderRequest.put("amount", amount);
            orderRequest.put("currency", currency);
            Order order = razorpayClient.orders.create(orderRequest);

diff --git a/platform/src/main/java/com/flickmatch/platform/graphql/input/RazorPayInput.java b/platform/src/main/java/com/flickmatch/platform/graphql/input/RazorPayInput.java
@@ -11,4 +11,5 @@ public class RazorPayInput {
 
     String uniqueEventId;
     List<PlayerInput> playerInputList;
+    String currency;
 }
diff --git a/platform/src/main/resources/graphql/schema.graphqls b/platform/src/main/resources/graphql/schema.graphqls
@@ -68,6 +68,7 @@ input CreateUserInput {
 input RazorPayInput {
     uniqueEventId: ID!
     playerInputList: [PlayerInput!]!
+    currency: String!
 }
 
 type User {

diff --git a/react-fm/src/pages/matchQueues/data.ts b/react-fm/src/pages/matchQueues/data.ts
@@ -6,6 +6,7 @@ const dummyData = {
         cityName: 'Hyderabad',
         countryCode: 'IN',
         dummyData: false,
+        currency: 'INR',
         events: [
           {
             uniqueEventId: '07-28-1-1-6',
@@ -150,6 +151,7 @@ const dummyData = {
         cityId: '1',
         cityName: 'Gurgaon',
         countryCode: 'IN',
+        currency: 'INR',
         dummyData: false,
         events: [
           {
@@ -324,6 +326,7 @@ const dummyData = {
         cityId: '4',
         cityName: 'San Jose',
         countryCode: 'US',
+        currency: 'USD',
         dummyData: false,
         events: [
           {

diff --git a/react-fm/src/pages/matchQueues/eventsComponents/JoinNow.tsx b/react-fm/src/pages/matchQueues/eventsComponents/JoinNow.tsx
@@ -22,6 +22,7 @@ import useOrientation from '@/hooks/useOrientation';
 import useNotifications from '@/store/notifications';
 
 import { apiUrl } from '../constants';
+import mapCityData from '../map';
 import type { EventDetails } from '../types/Events.types';
 import styles from './Events.module.scss';
 import { createOrder, displayRazorpay } from './RazorPay';
@@ -36,6 +37,7 @@ export const JoinNow: FC<EventDetails> = ({
   waitListPlayersCount,
   venueName,
   uniqueEventId,
+  eventId,
 }) => {
   const [, notificationsActions] = useNotifications();
   const isPortrait = useOrientation();
@@ -84,6 +86,19 @@ export const JoinNow: FC<EventDetails> = ({
     });
   }
 
+  const getCurrency = () => {
+    let currency = 'INR';
+    mapCityData.forEach((cityData) => {
+      // console.log(cityData.currency);
+      if (cityData.city === eventId) {
+        currency = cityData.currency;
+      }
+    });
+    return currency;
+  };
+
+  const currency = getCurrency();
+
   const handleEmail = (e: { target: { value: string } }) => {
     setUserData({ ...userData, email: e.target.value });
   };
@@ -190,8 +205,8 @@ export const JoinNow: FC<EventDetails> = ({
 
         generateUrl();
       } else {
-        // createOrder('2-2024-04-20-1', objectArray, setAmount) // to be changed after local testing
-        createOrder(uniqueEventId, objectArray, setAmount) // to be changed after local testing
+        // createOrder('2-2024-04-20-1', objectArray, setAmount, currency || 'INR') // to be changed after local testing
+        createOrder(uniqueEventId, objectArray, setAmount, currency || 'INR') // to be changed after local testing
           .then((orderId) => {
             setOrderId(orderId);
             setOpen(false);
@@ -220,7 +235,15 @@ export const JoinNow: FC<EventDetails> = ({
   };
 
   if (orderId) {
-    displayRazorpay(amount, orderId, userData.email, userData.name, userData.phoneNumber);
+    displayRazorpay(
+      amount,
+      orderId,
+      userData.email,
+      userData.name,
+      userData.phoneNumber,
+      setOrderId,
+      setRazorPay,
+    );
   }
 
   return (

diff --git a/react-fm/src/pages/matchQueues/eventsComponents/RazorPay.ts b/react-fm/src/pages/matchQueues/eventsComponents/RazorPay.ts
@@ -2,6 +2,7 @@ const createOrder = (
   uniqueEventId: string,
   objectArray: { waNumber: string; name: string }[],
   setAmount: React.Dispatch<React.SetStateAction<number>>,
+  currency: string,
 ): Promise<string> =>
   // fetch('http://localhost:8080/graphql', {
   fetch('https://service.flickmatch.in/platform-0.0.1-SNAPSHOT/graphql', {
@@ -16,7 +17,8 @@ const createOrder = (
               uniqueEventId: "${uniqueEventId}"
               playerInputList: [${objectArray
                 .map((obj) => `{ waNumber: "${obj.waNumber}", name: "${obj.name}" }`)
-                .join(',')}]
+                .join(',')}],
+                currency : "${currency}"
             }
         ) {
             orderId
@@ -55,12 +57,23 @@ function loadRazorPay() {
   });
 }
 
+function removeRazorPayScript() {
+  const script = document.querySelector(
+    'script[src="https://checkout.razorpay.com/v1/checkout.js"]',
+  );
+  if (script) {
+    document.body.removeChild(script);
+  }
+}
+
 const displayRazorpay = (
   amount: number,
   orderId: string,
   email: string,
   name: string,
   phoneNumber: string,
+  setOrderId: React.Dispatch<React.SetStateAction<string>>,
+  setRazorPay: React.Dispatch<React.SetStateAction<boolean>>,
 ) => {
   async function displayRazorPay() {
     const res = await loadRazorPay();
@@ -69,6 +82,7 @@ const displayRazorpay = (
     }
 
     const options = {
+      // key: 'rzp_live_ba3UQjRIBXdeXt', // to be fixed for production
       key: 'rzp_live_ba3UQjRIBXdeXt', // to be fixed for production
       amount: amount,
       currency: 'INR',
@@ -78,6 +92,7 @@ const displayRazorpay = (
         'https://firebasestorage.googleapis.com/v0/b/flickmatch-374a2.appspot.com/o/fm_rainbow.png?alt=media&token=1b06ae27-bf10-4974-9100-6bb5f2308314',
       order_id: orderId,
       callback_url: 'https://service.flickmatch.in/platform-0.0.1-SNAPSHOT/processRazorPayment',
+      // callback_url: 'http://localhost:5173',
       redirect: true,
       prefill: {
         name,
@@ -88,6 +103,17 @@ const displayRazorpay = (
         address:
           'Tower 8 - Flat 1501, Nirvana Country Rd, The Close South, Sector 50, Gurugram, Haryana 122018',
       },
+      modal: {
+        ondismiss: function () {
+          // Handle the scenario when the user closes the payment window
+          // console.log('Payment popup closed');
+          // Additional cleanup actions can be added here
+          setRazorPay(false);
+          setOrderId('');
+          removeRazorPayScript(); // Clean up Razorpay script
+          delete _window.Razorpay; // Clean up Razorpay object
+        },
+      },
       theme: {
         color: '#4ce95a',
       },