diff --git a/.env.example b/.env.example index b074137..d7dcbf3 100644 --- a/.env.example +++ b/.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 \ No newline at end of file +# Razorpay Public Key +REACT_APP_RAZORPAY_KEY_ID=your-razorpay-key-id \ No newline at end of file diff --git a/README.md b/README.md index 8624db3..03cea3b 100644 --- a/README.md +++ b/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 diff --git a/src/components/Chat/ChatMessage.js b/src/components/Chat/ChatMessage.js index ca70a6a..2c453a6 100644 --- a/src/components/Chat/ChatMessage.js +++ b/src/components/Chat/ChatMessage.js @@ -10,21 +10,21 @@ const ChatMessage = ({ message }) => { -
-
- - {message.username} +
+
+ + {message.username} + + {new Date(message.created_at).toLocaleTimeString()} +
- + ₹{message.amount}
-

{message.message}

- - {new Date(message.created_at).toLocaleTimeString()} - +

{message.message}

); } diff --git a/src/components/Chat/LiveChat.js b/src/components/Chat/LiveChat.js index 07b396c..9c8e8c6 100644 --- a/src/components/Chat/LiveChat.js +++ b/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 = () => {
{superChats.length > 0 && ( -
-
Top SuperChats
-
- {superChats.slice(0, 2).map((sc, idx) => ( -
- {sc.message} - ₹{sc.amount} -
- ))} +
+
+ + SuperChats +
+
+ {superChats.map((sc, idx) => ( +
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" + > +
+ ₹{sc.amount} + + {sc.user === '105864875153426983926' ? 'Anonymous' : (sc.user?.split('@')[0] || 'User')} + +
+
+ {sc.message || 'SuperChat'} +
+
+ ))}
)} @@ -208,6 +223,63 @@ const LiveChat = () => { onSuccess={handleSuperChatSuccess} /> )} + + {selectedSuperChat && ( +
setSelectedSuperChat(null)} + > +
e.stopPropagation()} + > +
+

+ + SuperChat Details +

+ +
+ +
+
+ Amount: + ₹{selectedSuperChat.amount} +
+ +
+ From: + + {selectedSuperChat.user === '105864875153426983926' + ? 'Anonymous' + : (selectedSuperChat.user?.split('@')[0] || 'User')} + +
+ +
+ Message: +
+

+ {selectedSuperChat.message || 'No message'} +

+
+
+ +
+ Time: + + {new Date(selectedSuperChat.created_at).toLocaleString()} + +
+
+
+
+ )}
); }; diff --git a/src/components/Chat/SuperChatModal.js b/src/components/Chat/SuperChatModal.js index 379cee1..ec0ef8f 100644 --- a/src/components/Chat/SuperChatModal.js +++ b/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,