RazorPay implementation for superchat

.env.example

@@ -1,11 +1,11 @@
+# Google OAuth Client ID
+REACT_APP_GOOGLE_CLIENT_ID=your-google-client-id-here
+
 # Backend API URL
-REACT_APP_API_URL=http://localhost:6969/api
+REACT_APP_API_URL=http://localhost:8000/api
 
 # WebSocket URL
-REACT_APP_WS_URL=ws://localhost:1401
-
-# Google OAuth Client ID (if using Google authentication)
-# REACT_APP_GOOGLE_CLIENT_ID=your-google-client-id-here
+REACT_APP_WEBSOCKET_URL=ws://localhost:1401/ws/chat/live
 
-# Razorpay Public Key (if payment integration is needed on frontend)
-# REACT_APP_RAZORPAY_KEY_ID=your-razorpay-key-id
+# Razorpay Public Key
+REACT_APP_RAZORPAY_KEY_ID=your-razorpay-key-id

README.md

@@ -24,6 +24,28 @@ cp .env.example .env
 # Edit .env with your API endpoints
 ```
 
+### Razorpay Integration (For SuperChat payments)
+
+1. **Get Razorpay Public Key:**
+   - Visit [Razorpay Dashboard](https://dashboard.razorpay.com/)
+   - Go to **Account & Settings** → **API Keys**
+   - Copy the **Key ID** (public key - safe to use in frontend)
+   - **Note:** Never put the Key Secret in frontend code!
+
+2. **Configure Frontend Environment:**
+```bash
+# Add to your .env file
+REACT_APP_RAZORPAY_KEY_ID=rzp_test_your_key_id_here
+```
+
+3. **Testing Payments Locally:**
+   - Ensure your backend is running with proper Razorpay configuration
+   - Use ngrok to expose your backend (see backend README)
+   - Use Razorpay test cards for testing:
+     - **Success:** `4111 1111 1111 1111`
+     - **Failure:** `4000 0000 0000 0002`
+   - Test SuperChat feature in the live chat section
+
 4. **Run development server**
 ```bash
 npm start
@@ -37,8 +59,10 @@ Application will open at `http://localhost:3000`
 - `npm test` - Run tests
 
 ## Environment Variables
-- `REACT_APP_API_URL` - Backend API URL (default: http://localhost:6969/api)
-- `REACT_APP_WS_URL` - WebSocket URL (default: ws://localhost:1401)
+- `REACT_APP_API_URL` - Backend API URL (default: http://localhost:8000/api)
+- `REACT_APP_WEBSOCKET_URL` - WebSocket URL (default: ws://localhost:1401/ws/chat/live)
+- `REACT_APP_GOOGLE_CLIENT_ID` - Google OAuth Client ID
+- `REACT_APP_RAZORPAY_KEY_ID` - Razorpay public key for payments
 
 ## Project Structure
 
@@ -102,8 +126,9 @@ Create a `.env` file:
 
 ```env
 REACT_APP_GOOGLE_CLIENT_ID=your-google-client-id
-REACT_APP_API_BASE_URL=http://localhost:8000/api
+REACT_APP_API_URL=http://localhost:8000/api
 REACT_APP_WEBSOCKET_URL=ws://localhost:1401/ws/chat/live
+REACT_APP_RAZORPAY_KEY_ID=rzp_test_your_key_id_here
 ```
 
 ## Styling Features

src/components/Chat/ChatMessage.js

@@ -10,21 +10,21 @@ const ChatMessage = ({ message }) => {
       <motion.div
         initial={{ scale: 0.9, opacity: 0 }}
         animate={{ scale: 1, opacity: 1 }}
-        className="bg-gradient-to-r from-yellow-400 to-orange-400 text-white rounded-lg p-3 shadow-lg"
+        className="bg-gradient-to-r from-yellow-400 to-orange-400 text-white rounded-lg p-2 shadow-md border-l-4 border-yellow-500"
       >
-        <div className="flex items-start justify-between mb-1">
-          <div className="flex items-center">
-            <FiDollarSign className="mr-1" />
-            <span className="font-bold">{message.username}</span>
+        <div className="flex items-center justify-between mb-1">
+          <div className="flex items-center space-x-1">
+            <FiDollarSign className="text-sm" />
+            <span className="font-bold text-sm">{message.username}</span>
+            <span className="text-xs text-yellow-100">
+              {new Date(message.created_at).toLocaleTimeString()}
+            </span>
           </div>
-          <span className="bg-white text-orange-600 px-2 py-1 rounded text-sm font-bold">
+          <span className="bg-white text-orange-600 px-2 py-0.5 rounded text-xs font-bold">
             ₹{message.amount}
           </span>
         </div>
-        <p className="text-white font-medium">{message.message}</p>
-        <span className="text-xs text-yellow-100">
-          {new Date(message.created_at).toLocaleTimeString()}
-        </span>
+        <p className="text-white text-sm font-medium">{message.message}</p>
       </motion.div>
     );
   }

src/components/Chat/LiveChat.js

@@ -13,6 +13,7 @@ const LiveChat = () => {
   const [inputMessage, setInputMessage] = useState('');
   const [showSuperChatModal, setShowSuperChatModal] = useState(false);
   const [superChats, setSuperChats] = useState([]);
+  const [selectedSuperChat, setSelectedSuperChat] = useState(null);
   const messagesEndRef = useRef(null);
 
   const { sendMessage, isConnected, connectionStatus, manualReconnect } = useWebSocket({
@@ -134,15 +135,29 @@ const LiveChat = () => {
       </div>
 
       {superChats.length > 0 && (
-        <div className="bg-gradient-to-r from-yellow-100 to-orange-100 p-2 border-b flex-shrink-0">
-          <div className="text-xs font-semibold text-gray-700 mb-1">Top SuperChats</div>
-          <div className="space-y-1 max-h-20 overflow-y-auto">
-            {superChats.slice(0, 2).map((sc, idx) => (
-              <div key={idx} className="flex items-center justify-between bg-white bg-opacity-70 rounded p-1">
-                <span className="text-xs font-medium truncate">{sc.message}</span>
-                <span className="text-xs font-bold text-orange-600">₹{sc.amount}</span>
-              </div>
-            ))}
+        <div className="bg-gradient-to-r from-yellow-400 to-orange-400 text-white p-2 border-b flex-shrink-0 sticky top-0 z-10">
+          <div className="flex items-center mb-2">
+            <FiDollarSign className="text-white mr-1" />
+            <span className="text-xs font-bold">SuperChats</span>
+          </div>
+          <div className="flex gap-2 overflow-x-auto scrollbar-hide">
+            {superChats.map((sc, idx) => (
+                <div
+                  key={idx}
+                  onClick={() => setSelectedSuperChat(sc)}
+                  className="bg-white bg-opacity-90 text-gray-800 rounded-lg p-2 min-w-[120px] max-w-[160px] flex-shrink-0 cursor-pointer hover:bg-opacity-100 transition-all duration-200 hover:scale-105"
+                >
+                  <div className="flex items-center justify-between mb-1">
+                    <span className="text-xs font-bold text-orange-600">₹{sc.amount}</span>
+                    <span className="text-xs text-gray-600 truncate max-w-[60px]">
+                      {sc.user === '105864875153426983926' ? 'Anonymous' : (sc.user?.split('@')[0] || 'User')}
+                    </span>
+                  </div>
+                  <div className="text-xs font-medium text-gray-700 truncate">
+                    {sc.message || 'SuperChat'}
+                  </div>
+                </div>
+              ))}
           </div>
         </div>
       )}
@@ -208,6 +223,63 @@ const LiveChat = () => {
           onSuccess={handleSuperChatSuccess}
         />
       )}
+
+      {selectedSuperChat && (
+        <div 
+          className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
+          onClick={() => setSelectedSuperChat(null)}
+        >
+          <div 
+            className="bg-white rounded-lg shadow-xl max-w-md w-full p-6"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex justify-between items-center mb-4">
+              <h3 className="text-lg font-bold text-gray-800 flex items-center">
+                <FiDollarSign className="mr-2 text-orange-500" />
+                SuperChat Details
+              </h3>
+              <button
+                onClick={() => setSelectedSuperChat(null)}
+                className="text-gray-500 hover:text-gray-700"
+              >
+                ×
+              </button>
+            </div>
+
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-gray-600">Amount:</span>
+                <span className="text-lg font-bold text-orange-600">₹{selectedSuperChat.amount}</span>
+              </div>
+
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-gray-600">From:</span>
+                <span className="text-sm font-medium text-gray-800">
+                  {selectedSuperChat.user === '105864875153426983926' 
+                    ? 'Anonymous' 
+                    : (selectedSuperChat.user?.split('@')[0] || 'User')}
+                </span>
+              </div>
+
+              <div>
+                <span className="text-sm text-gray-600">Message:</span>
+                <div className="mt-2 p-3 bg-gray-50 rounded-lg">
+                  <p className="text-sm text-gray-800 whitespace-pre-wrap">
+                    {selectedSuperChat.message || 'No message'}
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-gray-600">Time:</span>
+                <span className="text-sm text-gray-800">
+                  {new Date(selectedSuperChat.created_at).toLocaleString()}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

src/components/Chat/SuperChatModal.js

@@ -43,7 +43,7 @@ const SuperChatModal = ({ onClose, onSuccess }) => {
       });
 
       const options = {
-        key: process.env.REACT_APP_RAZORPAY_KEY_ID || 'rzp_test_lOF9X8ifjv64t2',
+        key: process.env.REACT_APP_RAZORPAY_KEY_ID,
         amount: orderResponse.data.amount,
         currency: orderResponse.data.currency,
         order_id: orderResponse.data.order_id,