Solved a small display issue
This commit is contained in:
Tiago Ribeiro
@@ -1,134 +1,101 @@
|
|||||||
import { Ticket, TicketType, TicketTypeLabel } from "@/interfaces/ticket";
|
import {Ticket, TicketType, TicketTypeLabel} from "@/interfaces/ticket";
|
||||||
import { User } from "@/interfaces/user";
|
import {User} from "@/interfaces/user";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import { useState } from "react";
|
import {useState} from "react";
|
||||||
import { toast } from "react-toastify";
|
import {toast} from "react-toastify";
|
||||||
import ShortUniqueId from "short-unique-id";
|
import ShortUniqueId from "short-unique-id";
|
||||||
import Button from "../Low/Button";
|
import Button from "../Low/Button";
|
||||||
import Input from "../Low/Input";
|
import Input from "../Low/Input";
|
||||||
import Select from "../Low/Select";
|
import Select from "../Low/Select";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
user: User;
|
user: User;
|
||||||
page: string;
|
page: string;
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function TicketSubmission({ user, page, onClose }: Props) {
|
export default function TicketSubmission({user, page, onClose}: Props) {
|
||||||
const [subject, setSubject] = useState("");
|
const [subject, setSubject] = useState("");
|
||||||
const [type, setType] = useState<TicketType>();
|
const [type, setType] = useState<TicketType>();
|
||||||
const [description, setDescription] = useState("");
|
const [description, setDescription] = useState("");
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
|
||||||
const submit = () => {
|
const submit = () => {
|
||||||
if (!type)
|
if (!type) return toast.error("Please choose a type!", {toastId: "missing-type"});
|
||||||
return toast.error("Please choose a type!", { toastId: "missing-type" });
|
if (subject.trim() === "")
|
||||||
if (subject.trim() === "")
|
return toast.error("Please input a subject!", {
|
||||||
return toast.error("Please input a subject!", {
|
toastId: "missing-subject",
|
||||||
toastId: "missing-subject",
|
});
|
||||||
});
|
if (description.trim() === "")
|
||||||
if (description.trim() === "")
|
return toast.error("Please describe your ticket!", {
|
||||||
return toast.error("Please describe your ticket!", {
|
toastId: "missing-desc",
|
||||||
toastId: "missing-desc",
|
});
|
||||||
});
|
|
||||||
|
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
|
|
||||||
const shortUID = new ShortUniqueId();
|
const shortUID = new ShortUniqueId();
|
||||||
const ticket: Ticket = {
|
const ticket: Ticket = {
|
||||||
id: shortUID.randomUUID(8),
|
id: shortUID.randomUUID(8),
|
||||||
date: new Date().toISOString(),
|
date: new Date().toISOString(),
|
||||||
reporter: {
|
reporter: {
|
||||||
id: user.id,
|
id: user.id,
|
||||||
email: user.email,
|
email: user.email,
|
||||||
name: user.name,
|
name: user.name,
|
||||||
type: user.type,
|
type: user.type,
|
||||||
},
|
},
|
||||||
status: "submitted",
|
status: "submitted",
|
||||||
subject,
|
subject,
|
||||||
type,
|
type,
|
||||||
reportedFrom: page,
|
reportedFrom: page,
|
||||||
description,
|
description,
|
||||||
};
|
};
|
||||||
|
|
||||||
axios
|
axios
|
||||||
.post(`/api/tickets`, ticket)
|
.post(`/api/tickets`, ticket)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
toast.success(
|
toast.success(`Your ticket has been submitted! You will be contacted by e-mail for further discussion.`, {toastId: "submitted"});
|
||||||
`Your ticket has been submitted! You will be contacted by e-mail for further discussion.`,
|
onClose();
|
||||||
{ toastId: "submitted" },
|
})
|
||||||
);
|
.catch((e) => {
|
||||||
onClose();
|
console.error(e);
|
||||||
})
|
toast.error("Something went wrong, please try again later!", {
|
||||||
.catch((e) => {
|
toastId: "error",
|
||||||
console.error(e);
|
});
|
||||||
toast.error("Something went wrong, please try again later!", {
|
})
|
||||||
toastId: "error",
|
.finally(() => setIsLoading(false));
|
||||||
});
|
};
|
||||||
})
|
|
||||||
.finally(() => setIsLoading(false));
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form className="flex flex-col gap-4 pt-8">
|
<form className="flex flex-col gap-4 pt-8">
|
||||||
<Input
|
<Input label="Subject" type="text" name="subject" placeholder="Subject..." onChange={(e) => setSubject(e)} />
|
||||||
label="Subject"
|
<div className="-md:flex-col flex w-full items-center gap-4">
|
||||||
type="text"
|
<div className="flex w-full flex-col gap-3">
|
||||||
name="subject"
|
<label className="text-mti-gray-dim text-base font-normal">Type</label>
|
||||||
placeholder="Subject..."
|
<Select
|
||||||
onChange={(e) => setSubject(e)}
|
options={Object.keys(TicketTypeLabel).map((x) => ({
|
||||||
/>
|
value: x,
|
||||||
<div className="-md:flex-col flex w-full items-center gap-4">
|
label: TicketTypeLabel[x as keyof typeof TicketTypeLabel],
|
||||||
<div className="flex w-full flex-col gap-3">
|
}))}
|
||||||
<label className="text-mti-gray-dim text-base font-normal">
|
onChange={(value) => setType((value?.value as TicketType) ?? undefined)}
|
||||||
Type
|
placeholder="Type..."
|
||||||
</label>
|
/>
|
||||||
<Select
|
</div>
|
||||||
options={Object.keys(TicketTypeLabel).map((x) => ({
|
<Input label="Reporter" type="text" name="reporter" onChange={() => null} value={`${user.name} - ${user.email}`} disabled />
|
||||||
value: x,
|
</div>
|
||||||
label: TicketTypeLabel[x as keyof typeof TicketTypeLabel],
|
<textarea
|
||||||
}))}
|
className="input border-mti-gray-platinum h-full min-h-[300px] w-full cursor-text rounded-3xl border bg-white px-7 py-8"
|
||||||
onChange={(value) =>
|
onChange={(e) => setDescription(e.target.value)}
|
||||||
setType((value?.value as TicketType) ?? undefined)
|
placeholder="Write your ticket's description here..."
|
||||||
}
|
spellCheck
|
||||||
placeholder="Type..."
|
/>
|
||||||
/>
|
<div className="mt-2 flex w-full items-center justify-end gap-4">
|
||||||
</div>
|
<Button type="button" color="red" className="w-full max-w-[200px]" variant="outline" onClick={onClose} isLoading={isLoading}>
|
||||||
<Input
|
Cancel
|
||||||
label="Reporter"
|
</Button>
|
||||||
type="text"
|
<Button type="button" className="w-full max-w-[200px]" isLoading={isLoading} onClick={submit}>
|
||||||
name="reporter"
|
Submit
|
||||||
onChange={() => null}
|
</Button>
|
||||||
value={`${user.name} - ${user.email}`}
|
</div>
|
||||||
disabled
|
</form>
|
||||||
/>
|
);
|
||||||
</div>
|
|
||||||
<textarea
|
|
||||||
className="input border-mti-gray-platinum h-full min-h-[300px] w-full cursor-text rounded-3xl border bg-white px-7 py-8"
|
|
||||||
onChange={(e) => setDescription(e.target.value)}
|
|
||||||
placeholder="Write your ticket's description here..."
|
|
||||||
spellCheck
|
|
||||||
/>
|
|
||||||
<div className="mt-2 flex w-full items-center justify-end gap-4">
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
color="red"
|
|
||||||
className="w-full max-w-[200px]"
|
|
||||||
variant="outline"
|
|
||||||
onClick={onClose}
|
|
||||||
isLoading={isLoading}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
className="w-full max-w-[200px]"
|
|
||||||
isLoading={isLoading}
|
|
||||||
onClick={submit}
|
|
||||||
>
|
|
||||||
Submit
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ interface Props {
|
|||||||
export default function Modal({isOpen, title, onClose, children}: Props) {
|
export default function Modal({isOpen, title, onClose, children}: Props) {
|
||||||
return (
|
return (
|
||||||
<Transition appear show={isOpen} as={Fragment}>
|
<Transition appear show={isOpen} as={Fragment}>
|
||||||
<Dialog as="div" className="relative z-10" onClose={onClose}>
|
<Dialog as="div" className="relative z-[200]" onClose={onClose}>
|
||||||
<Transition.Child
|
<Transition.Child
|
||||||
as={Fragment}
|
as={Fragment}
|
||||||
enter="ease-out duration-300"
|
enter="ease-out duration-300"
|
||||||
|
|||||||
@@ -1,161 +1,114 @@
|
|||||||
import { User } from "@/interfaces/user";
|
import {User} from "@/interfaces/user";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import FocusLayer from "@/components/FocusLayer";
|
import FocusLayer from "@/components/FocusLayer";
|
||||||
import { preventNavigation } from "@/utils/navigation.disabled";
|
import {preventNavigation} from "@/utils/navigation.disabled";
|
||||||
import { useRouter } from "next/router";
|
import {useRouter} from "next/router";
|
||||||
import { BsList, BsQuestionCircle, BsQuestionCircleFill } from "react-icons/bs";
|
import {BsList, BsQuestionCircle, BsQuestionCircleFill} from "react-icons/bs";
|
||||||
import clsx from "clsx";
|
import clsx from "clsx";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import MobileMenu from "./MobileMenu";
|
import MobileMenu from "./MobileMenu";
|
||||||
import { useEffect, useState } from "react";
|
import {useEffect, useState} from "react";
|
||||||
import { Type } from "@/interfaces/user";
|
import {Type} from "@/interfaces/user";
|
||||||
import { USER_TYPE_LABELS } from "@/resources/user";
|
import {USER_TYPE_LABELS} from "@/resources/user";
|
||||||
import useGroups from "@/hooks/useGroups";
|
import useGroups from "@/hooks/useGroups";
|
||||||
import { isUserFromCorporate } from "@/utils/groups";
|
import {isUserFromCorporate} from "@/utils/groups";
|
||||||
import Button from "./Low/Button";
|
import Button from "./Low/Button";
|
||||||
import Modal from "./Modal";
|
import Modal from "./Modal";
|
||||||
import Input from "./Low/Input";
|
import Input from "./Low/Input";
|
||||||
import TicketSubmission from "./High/TicketSubmission";
|
import TicketSubmission from "./High/TicketSubmission";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
user: User;
|
user: User;
|
||||||
navDisabled?: boolean;
|
navDisabled?: boolean;
|
||||||
focusMode?: boolean;
|
focusMode?: boolean;
|
||||||
onFocusLayerMouseEnter?: () => void;
|
onFocusLayerMouseEnter?: () => void;
|
||||||
path: string;
|
path: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* eslint-disable @next/next/no-img-element */
|
/* eslint-disable @next/next/no-img-element */
|
||||||
export default function Navbar({
|
export default function Navbar({user, path, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
|
||||||
user,
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||||
path,
|
const [disablePaymentPage, setDisablePaymentPage] = useState(true);
|
||||||
navDisabled = false,
|
const [isTicketOpen, setIsTicketOpen] = useState(false);
|
||||||
focusMode = false,
|
|
||||||
onFocusLayerMouseEnter,
|
|
||||||
}: Props) {
|
|
||||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
||||||
const [disablePaymentPage, setDisablePaymentPage] = useState(true);
|
|
||||||
const [isTicketOpen, setIsTicketOpen] = useState(false);
|
|
||||||
|
|
||||||
const disableNavigation = preventNavigation(navDisabled, focusMode);
|
const disableNavigation = preventNavigation(navDisabled, focusMode);
|
||||||
|
|
||||||
const expirationDateColor = (date: Date) => {
|
const expirationDateColor = (date: Date) => {
|
||||||
const momentDate = moment(date);
|
const momentDate = moment(date);
|
||||||
const today = moment(new Date());
|
const today = moment(new Date());
|
||||||
|
|
||||||
if (today.add(1, "days").isAfter(momentDate))
|
if (today.add(1, "days").isAfter(momentDate)) return "!bg-mti-red-ultralight border-mti-red-light";
|
||||||
return "!bg-mti-red-ultralight border-mti-red-light";
|
if (today.add(3, "days").isAfter(momentDate)) return "!bg-mti-rose-ultralight border-mti-rose-light";
|
||||||
if (today.add(3, "days").isAfter(momentDate))
|
if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
|
||||||
return "!bg-mti-rose-ultralight border-mti-rose-light";
|
};
|
||||||
if (today.add(7, "days").isAfter(momentDate))
|
|
||||||
return "!bg-mti-orange-ultralight border-mti-orange-light";
|
|
||||||
};
|
|
||||||
|
|
||||||
const showExpirationDate = () => {
|
const showExpirationDate = () => {
|
||||||
if (!user.subscriptionExpirationDate) return false;
|
if (!user.subscriptionExpirationDate) return false;
|
||||||
|
|
||||||
const momentDate = moment(user.subscriptionExpirationDate);
|
const momentDate = moment(user.subscriptionExpirationDate);
|
||||||
const today = moment(new Date());
|
const today = moment(new Date());
|
||||||
|
|
||||||
return today.add(7, "days").isAfter(momentDate);
|
return today.add(7, "days").isAfter(momentDate);
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (user.type !== "student" && user.type !== "teacher")
|
if (user.type !== "student" && user.type !== "teacher") return setDisablePaymentPage(false);
|
||||||
setDisablePaymentPage(false);
|
isUserFromCorporate(user.id).then((result) => setDisablePaymentPage(result));
|
||||||
isUserFromCorporate(user.id).then((result) =>
|
}, [user]);
|
||||||
setDisablePaymentPage(result),
|
|
||||||
);
|
|
||||||
}, [user]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Modal
|
<Modal isOpen={isTicketOpen} onClose={() => setIsTicketOpen(false)} title="Submit a ticket">
|
||||||
isOpen={isTicketOpen}
|
<TicketSubmission user={user} page={window.location.href} onClose={() => setIsTicketOpen(false)} />
|
||||||
onClose={() => setIsTicketOpen(false)}
|
</Modal>
|
||||||
title="Submit a ticket"
|
|
||||||
>
|
|
||||||
<TicketSubmission
|
|
||||||
user={user}
|
|
||||||
page={window.location.href}
|
|
||||||
onClose={() => setIsTicketOpen(false)}
|
|
||||||
/>
|
|
||||||
</Modal>
|
|
||||||
|
|
||||||
{user && (
|
{user && <MobileMenu path={path} isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)} user={user} />}
|
||||||
<MobileMenu
|
<header className="-md:justify-between -md:px-4 relative flex w-full items-center bg-transparent py-2 md:gap-12 md:py-4">
|
||||||
path={path}
|
<Link href={disableNavigation ? "" : "/"} className=" flex items-center gap-8 md:px-8">
|
||||||
isOpen={isMenuOpen}
|
<img src="/logo.png" alt="EnCoach's Logo" className="w-8 md:w-12" />
|
||||||
onClose={() => setIsMenuOpen(false)}
|
<h1 className="-md:hidden w-1/6 text-2xl font-bold">EnCoach</h1>
|
||||||
user={user}
|
</Link>
|
||||||
/>
|
<div className="flex items-center justify-end gap-4 md:mr-8 md:w-5/6">
|
||||||
)}
|
{/* OPEN TICKET SYSTEM */}
|
||||||
<header className="-md:justify-between -md:px-4 relative flex w-full items-center bg-transparent py-2 md:gap-12 md:py-4">
|
<button
|
||||||
<Link
|
className={clsx(
|
||||||
href={disableNavigation ? "" : "/"}
|
"border-mti-purple-light tooltip tooltip-bottom flex h-8 w-8 flex-col items-center justify-center rounded-full border p-1",
|
||||||
className=" flex items-center gap-8 md:px-8"
|
"hover:bg-mti-purple-light transition duration-300 ease-in-out hover:text-white",
|
||||||
>
|
)}
|
||||||
<img src="/logo.png" alt="EnCoach's Logo" className="w-8 md:w-12" />
|
data-tip="Submit a help/feedback ticket"
|
||||||
<h1 className="-md:hidden w-1/6 text-2xl font-bold">EnCoach</h1>
|
onClick={() => setIsTicketOpen(true)}>
|
||||||
</Link>
|
<BsQuestionCircleFill />
|
||||||
<div className="flex items-center justify-end gap-4 md:mr-8 md:w-5/6">
|
</button>
|
||||||
{/* OPEN TICKET SYSTEM */}
|
|
||||||
<button
|
|
||||||
className={clsx(
|
|
||||||
"border-mti-purple-light tooltip tooltip-bottom flex h-8 w-8 flex-col items-center justify-center rounded-full border p-1",
|
|
||||||
"hover:bg-mti-purple-light transition duration-300 ease-in-out hover:text-white",
|
|
||||||
)}
|
|
||||||
data-tip="Submit a help/feedback ticket"
|
|
||||||
onClick={() => setIsTicketOpen(true)}
|
|
||||||
>
|
|
||||||
<BsQuestionCircleFill />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{showExpirationDate() && (
|
{showExpirationDate() && (
|
||||||
<Link
|
<Link
|
||||||
href={disablePaymentPage ? "/payment" : ""}
|
href={disablePaymentPage ? "/payment" : ""}
|
||||||
data-tip="Expiry date"
|
data-tip="Expiry date"
|
||||||
className={clsx(
|
className={clsx(
|
||||||
"flex w-fit cursor-pointer justify-center rounded-full border px-6 py-2 text-sm font-normal focus:outline-none",
|
"flex w-fit cursor-pointer justify-center rounded-full border px-6 py-2 text-sm font-normal focus:outline-none",
|
||||||
"tooltip tooltip-bottom transition duration-300 ease-in-out",
|
"tooltip tooltip-bottom transition duration-300 ease-in-out",
|
||||||
!user.subscriptionExpirationDate
|
!user.subscriptionExpirationDate
|
||||||
? "bg-mti-green-ultralight border-mti-green-light"
|
? "bg-mti-green-ultralight border-mti-green-light"
|
||||||
: expirationDateColor(user.subscriptionExpirationDate),
|
: expirationDateColor(user.subscriptionExpirationDate),
|
||||||
"border-mti-gray-platinum bg-white",
|
"border-mti-gray-platinum bg-white",
|
||||||
)}
|
)}>
|
||||||
>
|
{!user.subscriptionExpirationDate && "Unlimited"}
|
||||||
{!user.subscriptionExpirationDate && "Unlimited"}
|
{user.subscriptionExpirationDate && moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
|
||||||
{user.subscriptionExpirationDate &&
|
</Link>
|
||||||
moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
|
)}
|
||||||
</Link>
|
<Link href={disableNavigation ? "" : "/profile"} className="-md:hidden flex items-center justify-end gap-6">
|
||||||
)}
|
<img src={user.profilePicture} alt={user.name} className="h-10 w-10 rounded-full object-cover" />
|
||||||
<Link
|
<span className="-md:hidden text-right">
|
||||||
href={disableNavigation ? "" : "/profile"}
|
{user.type === "corporate" ? `${user.corporateInformation?.companyInformation.name} |` : ""} {user.name} |{" "}
|
||||||
className="-md:hidden flex items-center justify-end gap-6"
|
{USER_TYPE_LABELS[user.type]}
|
||||||
>
|
</span>
|
||||||
<img
|
</Link>
|
||||||
src={user.profilePicture}
|
<div className="cursor-pointer md:hidden" onClick={() => setIsMenuOpen(true)}>
|
||||||
alt={user.name}
|
<BsList className="text-mti-purple-light h-8 w-8" />
|
||||||
className="h-10 w-10 rounded-full object-cover"
|
</div>
|
||||||
/>
|
</div>
|
||||||
<span className="-md:hidden text-right">
|
{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
|
||||||
{user.type === "corporate"
|
</header>
|
||||||
? `${user.corporateInformation?.companyInformation.name} |`
|
</>
|
||||||
: ""}{" "}
|
);
|
||||||
{user.name} | {USER_TYPE_LABELS[user.type]}
|
|
||||||
</span>
|
|
||||||
</Link>
|
|
||||||
<div
|
|
||||||
className="cursor-pointer md:hidden"
|
|
||||||
onClick={() => setIsMenuOpen(true)}
|
|
||||||
>
|
|
||||||
<BsList className="text-mti-purple-light h-8 w-8" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{focusMode && (
|
|
||||||
<FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />
|
|
||||||
)}
|
|
||||||
</header>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user