itm-holding-package
Version:
ITM HOLDING PACKAGES
126 lines (125 loc) • 9.33 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://bug-report-api.onrender.com";
const apiKey = "4654f786058b1481334d8e901818c996ffc48c41626e6a29e71858284ed29cda8a6a5ed547a8baca2648c895d2e5f39f93ebcc39c725f5177f7531698ca47e7ce1c758d1d2f10b68f0df149c81464d73c8b160d16081d5a9cab57bcb6d23f92b9f9ffa9354b5e072ef10710a27d8ecb7cdc6813995c8c7d3f287acb915c799db";
export const API_UPLOAD_IMAGE_URL = "https://file.itmafrica.com/api/uploadimage/test";
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]);
}
};
const uploadImage = async (content) => {
try {
const response = await fetch(API_UPLOAD_IMAGE_URL, {
method: "POST",
body: content,
});
const data = await response.json();
return data.uri;
}
catch (error) {
console.log(error);
return "https://www.itmafrica.com/_next/image?url=https%3A%2F%2Fitmafrica.blob.core.windows.net%2Ftest%2FLogo_RDC.png&w=128&q=75";
}
};
async function register() {
setIsSubmitting(true);
const body = new FormData();
body.append("file", screenshot);
const picture = await uploadImage(body);
return fetch(`${API}/api/bug-reports`, {
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${apiKey}`
},
method: "POST",
body: JSON.stringify({
data: {
title,
description,
picture,
type: "bug",
step: "new",
originUrl: 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-[10px] right-[10px] 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 z-50 bottom-[15px] right-[15px] flex items-center justify-end", children: _jsxs("form", { onClick: function (e) {
e.stopPropagation();
}, onSubmit: handleSubmit, className: "max-w-3xs lg:max-w-2xs bg-white p-5 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-1 mt-5", 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-1 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-1 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-5 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;