-
Notifications
You must be signed in to change notification settings - Fork 174
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b7e67b1
commit 5bf23e9
Showing
5 changed files
with
128 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -30,7 +30,7 @@ | |
| font-family: Open Sans; | ||
| font-size: 16px; | ||
| font-weight: 400; | ||
| padding-top: 13px; | ||
| margin-top: 13px; | ||
|
|
||
|
|
||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
123 changes: 91 additions & 32 deletions
123
frontend/src/components/report-modal/ReportBugModal.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,49 +1,108 @@ | ||
| import React from "react" | ||
| import "./ReportBugModal.css" | ||
| import telegramIcon from "../../assets/icons/telegram.svg" | ||
| import bg from "../../assets/images/background-form.png" | ||
| import { Button } from "components/ui/custom-button/Button" | ||
|
|
||
| import React, { useState } from "react"; | ||
| import "./ReportBugModal.css"; | ||
| import telegramIcon from "../../assets/icons/telegram.svg"; | ||
| import bg from "../../assets/images/background-form.png"; | ||
| import { Button } from "components/ui/custom-button/Button"; | ||
| import { useWalletStore } from "../../stores/useWalletStore"; | ||
| import { useMutation } from "@tanstack/react-query"; | ||
| import { generateTelegramLink } from "services/telegram"; | ||
| import { axiosInstance } from "utils/axios"; | ||
| import { notify } from "components/layout/notifier/Notifier"; | ||
|
|
||
| export function ReportBugModal({ onClose }) { | ||
| const { walletId } = useWalletStore(); | ||
| const [bugDescription, setBugDescription] = useState(""); | ||
|
|
||
| const mutation = useMutation({ | ||
| mutationFn: async () => { | ||
| if (!window?.Telegram?.WebApp?.initData?.user?.id) { | ||
| const { subscription_link } = await generateTelegramLink(walletId); | ||
| window.open(subscription_link, "_blank"); | ||
| return; | ||
| } | ||
| // Send bug report | ||
| return await axiosInstance.post(`/api/save-bug-report`, { | ||
| telegram_id: window?.Telegram?.WebApp?.initData?.user?.id, | ||
| wallet_id: walletId, | ||
| bug_description: bugDescription, | ||
| }); | ||
| }, | ||
| onSuccess: () => { | ||
| notify("Report sent successfully!"); | ||
| }, | ||
| onError: (error) => { | ||
| notify(error.response?.data?.message || "Report failed!", "error"); | ||
| }, | ||
| }); | ||
|
|
||
| const handleSubmit = (e) => { | ||
| e.preventDefault() | ||
| onClose() | ||
| } | ||
| e.preventDefault(); | ||
| if (!bugDescription.trim()) { | ||
| notify("Bug description cannot be empty!", "error"); | ||
| return; | ||
| } | ||
| mutation.mutate(); | ||
| onClose(); | ||
| }; | ||
|
|
||
| return ( | ||
| <div onClick={onClose} style={{ backgroundImage: `url(${bg})`, backgroundSize: 'contain' }} className="modal-overlay"> | ||
| <form className="report-bug-form" onClick={(e) => { | ||
| e.stopPropagation(); | ||
| }} onSubmit={handleSubmit} > | ||
| <div | ||
| onClick={onClose} | ||
| style={{ backgroundImage: `url(${bg})`, backgroundSize: "contain" }} | ||
| className="modal-overlay" | ||
| > | ||
| <form | ||
| className="report-bug-form" | ||
| onClick={(e) => e.stopPropagation()} | ||
| onSubmit={handleSubmit} | ||
| > | ||
| <div className="modal-content"> | ||
| <h2 >Report Bug</h2> | ||
|
|
||
|
|
||
| <p>Please describe the bug you've encountered</p> | ||
| <textarea placeholder="The bug I'm experiencing..." className="bug-textarea" /> | ||
|
|
||
| <a className="dev-group-link" href="https://t.me/spotnet_dev"> | ||
|
|
||
| <img src={telegramIcon} alt="telegram-icon" className="telegram-icon" /> | ||
| <h3>Report Bug</h3> | ||
| <p className="modal-paragraph-text"> | ||
| Please describe the bug you've encountered | ||
| </p> | ||
| <textarea | ||
| value={bugDescription} | ||
| onChange={(e) => setBugDescription(e.target.value)} | ||
| placeholder="The bug I'm experiencing..." | ||
| className="bug-textarea" | ||
| required | ||
| /> | ||
| <a | ||
| className="dev-group-link" | ||
| href="https://t.me/spotnet_dev" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <img | ||
| src={telegramIcon} | ||
| alt="telegram-icon" | ||
| className="telegram-icon" | ||
| /> | ||
| Ask in our Dev group | ||
| </a> | ||
| </div> | ||
| <div className="button-group"> | ||
| <Button variant="secondary" type="button" className="cancel-button" onClick={(e) => { | ||
| e.stopPropagation(); | ||
| onClose(); | ||
| }}> | ||
| <Button | ||
| variant="secondary" | ||
| type="button" | ||
| className="cancel-button" | ||
| onClick={(e) => { | ||
| e.stopPropagation(); | ||
| onClose(); | ||
| }} | ||
| > | ||
| Cancel | ||
| </Button> | ||
| <Button variant="primary" type="submit" className="submit-button"> | ||
| Send Report | ||
| <Button | ||
| variant="primary" | ||
| type="submit" | ||
| className="submit-button" | ||
| > | ||
| {mutation.isLoading ? "Sending..." : "Send Report"} | ||
| </Button> | ||
| </div> | ||
|
|
||
|
|
||
| </form> | ||
| </div> | ||
|
|
||
| ) | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters