itm-holding-package
Version:
ITM HOLDING PACKAGES
100 lines (99 loc) • 8.52 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { FiAlertCircle, FiCamera, FiUpload } from 'react-icons/fi';
import { ToastContainer } from "react-toastify";
import useLang from '../hooks/lang';
import "react-toastify/dist/ReactToastify.css";
import '../index.css';
import useToast from '../hooks/toast';
const API = "https://api.bug.itmafrica.com";
const apiKey = "20d5569c4a112ce362057d2020ae4d71a63f0c6976d4c791edcf4bd4376227c8a822bf954e0397052ea6fb34500f36c336fc14e98a56c327ba4aadf9381a1494e296301d4818db6d758e7dd4188dfe59d32b556a4c759d498a8428fc708e4484c91cc58a7ce642e6dab0a1147b3c1e1191126831c92a486037644ac73dfe33ad";
const BugReporter = ({ lang = "en" }) => {
const [title, setTitle] = useState('');
const [description, setDescription] = useState('');
const [screenshot, setScreenshot] = useState(null);
const [isSubmitting, setIsSubmitting] = useState(false);
const [show, setshow] = useState(false);
const [active, setActive] = useState(true);
const [messageError] = useState({ fr: "Une erreur est survenue lors de la soumission du rapport !", en: "An error occurred while submitting the report !" });
const [message] = useState({ fr: "Rapport de bug soumis avec succès !", en: "Bug report submitted successfully!" });
const { dico } = useLang({ lang });
const { success, error } = useToast();
const handleScreenshotChange = (e) => {
if (e.target.files && e.target.files[0]) {
setScreenshot(e.target.files[0]);
}
};
async function register() {
setIsSubmitting(true);
return fetch(`${API}/api/bug-reports`, {
headers: {
"Content-Type": "application/json",
authorization: `Bearer ${apiKey}`
},
method: "post",
body: JSON.stringify({
data: {
title,
description,
picture: screenshot ? URL.createObjectURL(screenshot) : "",
origin: window.location.origin
}
})
})
.then(function (res) {
return res.json();
})
.then(function (res) {
success(message[lang]);
setIsSubmitting(false);
return res;
})
.catch(function () {
setIsSubmitting(false);
error(messageError[lang]);
});
}
const handleSubmit = async (e) => {
e.preventDefault();
e.stopPropagation();
try {
await register();
// Réinitialiser le formulaire après soumission réussie
setTitle('');
setDescription('');
setScreenshot(null);
setshow(false);
}
catch (err) {
console.log(err);
}
finally {
setIsSubmitting(false);
}
};
useEffect(function () {
document.addEventListener("scroll", function () {
if (show == false) {
setActive(false);
}
});
document.addEventListener("scrollend", function () {
setActive(true);
});
}, [show]);
return (_jsxs(_Fragment, { children: [active && _jsx("div", { onClick: function (e) {
e.preventDefault();
e.stopPropagation();
setshow(function (state) {
return !state;
});
}, className: "space-y-1 p-3 transition-all duration-300 hover:shadow-3xl rounded-full shadow-2xl fixed z-50 cursor-pointer bg-white bottom-5 right-5 rounded-full", children: _jsx("h2", { title: dico("bug.reporter.title"), className: "text-md text-center font-bold text-gray-900 flex items-center justify-center", children: _jsx(FiAlertCircle, { className: "text-xl text-yellow-500 animate-pulse" }) }) }), show &&
_jsx("div", { onClick: function (e) {
e.stopPropagation();
setshow(false);
}, className: "w-full z-50 fixed bottom-24 right-5 flex items-center justify-end ", children: _jsxs("form", { onClick: function (e) {
e.stopPropagation();
}, onSubmit: handleSubmit, className: "max-w-2xl bg-white p-8 bg-white rounded-xl shadow-2xl transform transition-all duration-300 hover:shadow-3xl", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs("h2", { className: "text-3xl font-bold text-gray-900 flex items-center", children: [_jsx(FiAlertCircle, { className: "mr-3 text-yellow-500 animate-pulse" }), dico("bug.reporter.title")] }), _jsx("p", { className: "text-sm text-gray-500", children: dico("bug.reporter.description") })] }), _jsxs("div", { className: "space-y-2 mt-8", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { htmlFor: "title", className: "block text-sm font-medium text-gray-700", children: dico("bug.reporter.titleBug") }), _jsxs("span", { className: "text-sm text-gray-500", children: [title.length, "/100"] })] }), _jsx("input", { type: "text", id: "title", value: title, onChange: (e) => setTitle(e.target.value.slice(0, 100)), required: true, className: "block w-full px-4 py-3 rounded-lg border-2 border-gray-200 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all", placeholder: dico("bug.reporter.placeholderTitleBug") })] }), _jsxs("div", { className: "space-y-2 pt-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { htmlFor: "description", className: "block text-sm font-medium text-gray-700", children: dico("bug.reporter.descriptionBug") }), _jsxs("span", { className: "text-sm text-gray-500", children: [description.length, "/500"] })] }), _jsx("textarea", { id: "description", value: description, onChange: (e) => setDescription(e.target.value.slice(0, 500)), required: true, rows: 5, className: "block w-full px-4 py-3 rounded-lg border-2 border-gray-200 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all", placeholder: dico("bug.reporter.placeholderDescription") })] }), _jsxs("div", { className: "space-y-2 pt-2", children: [_jsx("label", { className: "block text-sm font-medium text-gray-700", children: dico("bug.reporter.captureBug") }), _jsxs("div", { className: "relative group", children: [_jsxs("label", { className: "flex flex-col items-center justify-center p-8 border-2 border-dashed border-gray-200 rounded-lg hover:border-indigo-500 transition-all cursor-pointer", children: [screenshot ? (_jsxs(_Fragment, { children: [_jsx("img", { src: URL.createObjectURL(screenshot), alt: "Preview", className: "w-32 h-32 object-cover rounded-md mb-4" }), _jsx("span", { className: "text-indigo-600 font-medium", children: screenshot.name })] })) : (_jsxs(_Fragment, { children: [_jsx(FiCamera, { className: "w-8 h-8 text-gray-400 group-hover:text-indigo-500 transition-all" }), _jsx("span", { className: "mt-2 text-sm text-gray-500 group-hover:text-indigo-600 transition-all", children: dico("bug.reporter.placeholderCaptureBug") })] })), _jsx("input", { type: "file", accept: "image/*", onChange: handleScreenshotChange, className: "hidden" })] }), screenshot && (_jsx("button", { type: "button", onClick: () => setScreenshot(null), className: "absolute -top-2 -right-2 p-2 bg-red-500 rounded-full text-white hover:bg-red-600 transition-all", children: _jsx(FiAlertCircle, { className: "w-4 h-4" }) }))] })] }), _jsx("div", { className: "pt-6", children: _jsx("button", { type: "submit", disabled: isSubmitting, className: "w-full flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 transition-all transform hover:scale-105", children: isSubmitting ? (_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-3" }), dico("bug.reporter.soumettreLoading")] })) : (_jsxs(_Fragment, { children: [_jsx(FiUpload, { className: "mr-2" }), dico("bug.reporter.soumettre")] })) }) })] }) }), _jsx(ToastContainer, {})] }));
};
export default BugReporter;