Created the validity dates for discounts
This commit is contained in:
Tiago Ribeiro
@@ -7,336 +7,301 @@ import useCodes from "@/hooks/useCodes";
|
||||
import useDiscounts from "@/hooks/useDiscounts";
|
||||
import useUser from "@/hooks/useUser";
|
||||
import useUsers from "@/hooks/useUsers";
|
||||
import { Discount } from "@/interfaces/paypal";
|
||||
import { Code, User } from "@/interfaces/user";
|
||||
import { USER_TYPE_LABELS } from "@/resources/user";
|
||||
import {
|
||||
createColumnHelper,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table";
|
||||
import {Discount} from "@/interfaces/paypal";
|
||||
import {Code, User} from "@/interfaces/user";
|
||||
import {USER_TYPE_LABELS} from "@/resources/user";
|
||||
import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
|
||||
import axios from "axios";
|
||||
import clsx from "clsx";
|
||||
import moment from "moment";
|
||||
import { useEffect, useState } from "react";
|
||||
import { BsPencil, BsTrash } from "react-icons/bs";
|
||||
import { toast } from "react-toastify";
|
||||
import {useEffect, useState} from "react";
|
||||
import ReactDatePicker from "react-datepicker";
|
||||
import {BsPencil, BsTrash} from "react-icons/bs";
|
||||
import {toast} from "react-toastify";
|
||||
|
||||
const columnHelper = createColumnHelper<Discount>();
|
||||
|
||||
const DiscountCreator = ({
|
||||
discount,
|
||||
onClose,
|
||||
}: {
|
||||
discount?: Discount;
|
||||
onClose: () => void;
|
||||
}) => {
|
||||
const [percentage, setPercentage] = useState(discount?.percentage);
|
||||
const [domain, setDomain] = useState(discount?.domain);
|
||||
const DiscountCreator = ({discount, onClose}: {discount?: Discount; onClose: () => void}) => {
|
||||
const [percentage, setPercentage] = useState(discount?.percentage);
|
||||
const [domain, setDomain] = useState(discount?.domain);
|
||||
const [validUntil, setValidUntil] = useState(discount?.validUntil);
|
||||
|
||||
const submit = async () => {
|
||||
const body = { percentage, domain };
|
||||
const submit = async () => {
|
||||
const body = {percentage, domain, validUntil: validUntil?.toISOString() || undefined};
|
||||
|
||||
if (discount) {
|
||||
return axios
|
||||
.patch(`/api/discounts/${discount.id}`, body)
|
||||
.then(() => {
|
||||
toast.success("Discount has been edited successfully!");
|
||||
onClose();
|
||||
})
|
||||
.catch(() => {
|
||||
toast.error("Something went wrong, please try again later!");
|
||||
});
|
||||
}
|
||||
if (discount) {
|
||||
return axios
|
||||
.patch(`/api/discounts/${discount.id}`, body)
|
||||
.then(() => {
|
||||
toast.success("Discount has been edited successfully!");
|
||||
onClose();
|
||||
})
|
||||
.catch(() => {
|
||||
toast.error("Something went wrong, please try again later!");
|
||||
});
|
||||
}
|
||||
|
||||
return axios
|
||||
.post(`/api/discounts`, body)
|
||||
.then(() => {
|
||||
toast.success("New discount has been created successfully!");
|
||||
onClose();
|
||||
})
|
||||
.catch(() => {
|
||||
toast.error("Something went wrong, please try again later!");
|
||||
});
|
||||
};
|
||||
return axios
|
||||
.post(`/api/discounts`, body)
|
||||
.then(() => {
|
||||
toast.success("New discount has been created successfully!");
|
||||
onClose();
|
||||
})
|
||||
.catch(() => {
|
||||
toast.error("Something went wrong, please try again later!");
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-8 py-8">
|
||||
<div className="w-full grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="flex flex-col gap-3">
|
||||
<label className="font-normal text-base text-mti-gray-dim">
|
||||
Domain *
|
||||
</label>
|
||||
<div className="flex gap-4 items-center">
|
||||
<Input
|
||||
defaultValue={domain}
|
||||
placeholder="encoach.com"
|
||||
name="domain"
|
||||
type="text"
|
||||
onChange={(e) => setDomain(e.replaceAll("@", ""))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3">
|
||||
<label className="font-normal text-base text-mti-gray-dim">
|
||||
Percentage (in %) *
|
||||
</label>
|
||||
<div className="flex gap-4 items-center">
|
||||
<Input
|
||||
defaultValue={percentage}
|
||||
placeholder="20"
|
||||
name="percentage"
|
||||
type="number"
|
||||
onChange={(e) => setPercentage(parseFloat(e))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-full justify-end items-center gap-8 mt-8">
|
||||
<Button
|
||||
variant="outline"
|
||||
color="red"
|
||||
className="w-full max-w-[200px]"
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
className="w-full max-w-[200px]"
|
||||
onClick={submit}
|
||||
disabled={!percentage || !domain}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="flex flex-col gap-8 py-8">
|
||||
<div className="w-full grid grid-cols-1 gap-8">
|
||||
<div className="flex flex-col gap-3">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Domain *</label>
|
||||
<div className="flex gap-4 items-center">
|
||||
<Input
|
||||
defaultValue={domain}
|
||||
placeholder="encoach.com"
|
||||
name="domain"
|
||||
type="text"
|
||||
onChange={(e) => setDomain(e.replaceAll("@", ""))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Percentage (in %) *</label>
|
||||
<div className="flex gap-4 items-center">
|
||||
<Input
|
||||
defaultValue={percentage}
|
||||
placeholder="20"
|
||||
name="percentage"
|
||||
type="number"
|
||||
onChange={(e) => setPercentage(parseFloat(e))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 w-full">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Valid Until</label>
|
||||
<div className="flex gap-4 items-center w-full">
|
||||
<ReactDatePicker
|
||||
wrapperClassName="w-full z-[900]"
|
||||
calendarClassName="z-[900]"
|
||||
popperClassName="z-[900]"
|
||||
isClearable
|
||||
className={clsx(
|
||||
"flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
|
||||
"hover:border-mti-purple tooltip",
|
||||
"transition duration-300 ease-in-out",
|
||||
)}
|
||||
filterDate={(date) => moment(date).isAfter(new Date())}
|
||||
dateFormat="dd/MM/yyyy"
|
||||
selected={validUntil}
|
||||
onChange={(date) => setValidUntil(date ? moment(date).endOf("day").toDate() : undefined)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-full justify-end items-center gap-8 mt-8">
|
||||
<Button variant="outline" color="red" className="w-full max-w-[200px]" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button className="w-full max-w-[200px]" onClick={submit} disabled={!percentage || !domain}>
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function DiscountList({ user }: { user: User }) {
|
||||
const [selectedDiscounts, setSelectedDiscounts] = useState<string[]>([]);
|
||||
export default function DiscountList({user}: {user: User}) {
|
||||
const [selectedDiscounts, setSelectedDiscounts] = useState<string[]>([]);
|
||||
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
const [editingDiscount, setEditingDiscount] = useState<Discount>();
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
const [editingDiscount, setEditingDiscount] = useState<Discount>();
|
||||
|
||||
const [filteredDiscounts, setFilteredDiscounts] = useState<Discount[]>([]);
|
||||
const [filteredDiscounts, setFilteredDiscounts] = useState<Discount[]>([]);
|
||||
|
||||
const { users } = useUsers();
|
||||
const { discounts, reload } = useDiscounts();
|
||||
const {users} = useUsers();
|
||||
const {discounts, reload} = useDiscounts();
|
||||
|
||||
useEffect(() => {
|
||||
setFilteredDiscounts(discounts);
|
||||
}, [discounts]);
|
||||
useEffect(() => {
|
||||
setFilteredDiscounts(discounts);
|
||||
}, [discounts]);
|
||||
|
||||
const toggleDiscount = (id: string) => {
|
||||
setSelectedDiscounts((prev) =>
|
||||
prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],
|
||||
);
|
||||
};
|
||||
const toggleDiscount = (id: string) => {
|
||||
setSelectedDiscounts((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
|
||||
};
|
||||
|
||||
const toggleAllDiscounts = (checked: boolean) => {
|
||||
if (checked)
|
||||
return setSelectedDiscounts(filteredDiscounts.map((x) => x.id));
|
||||
const toggleAllDiscounts = (checked: boolean) => {
|
||||
if (checked) return setSelectedDiscounts(filteredDiscounts.map((x) => x.id));
|
||||
|
||||
return setSelectedDiscounts([]);
|
||||
};
|
||||
return setSelectedDiscounts([]);
|
||||
};
|
||||
|
||||
const deleteDiscounts = async (discounts: string[]) => {
|
||||
if (
|
||||
!confirm(
|
||||
`Are you sure you want to delete these ${discounts.length} discount(s)?`,
|
||||
)
|
||||
)
|
||||
return;
|
||||
const deleteDiscounts = async (discounts: string[]) => {
|
||||
if (!confirm(`Are you sure you want to delete these ${discounts.length} discount(s)?`)) return;
|
||||
|
||||
const params = new URLSearchParams();
|
||||
discounts.forEach((code) => params.append("discount", code));
|
||||
const params = new URLSearchParams();
|
||||
discounts.forEach((code) => params.append("discount", code));
|
||||
|
||||
axios
|
||||
.delete(`/api/discounts?${params.toString()}`)
|
||||
.then(() => toast.success(`Deleted the discount(s)!`))
|
||||
.catch((reason) => {
|
||||
if (reason.response.status === 404) {
|
||||
toast.error("Discount not found!");
|
||||
return;
|
||||
}
|
||||
axios
|
||||
.delete(`/api/discounts?${params.toString()}`)
|
||||
.then(() => toast.success(`Deleted the discount(s)!`))
|
||||
.catch((reason) => {
|
||||
if (reason.response.status === 404) {
|
||||
toast.error("Discount not found!");
|
||||
return;
|
||||
}
|
||||
|
||||
if (reason.response.status === 403) {
|
||||
toast.error("You do not have permission to delete this discount!");
|
||||
return;
|
||||
}
|
||||
if (reason.response.status === 403) {
|
||||
toast.error("You do not have permission to delete this discount!");
|
||||
return;
|
||||
}
|
||||
|
||||
toast.error("Something went wrong, please try again later.");
|
||||
})
|
||||
.finally(reload);
|
||||
};
|
||||
toast.error("Something went wrong, please try again later.");
|
||||
})
|
||||
.finally(reload);
|
||||
};
|
||||
|
||||
const deleteDiscount = async (discount: Discount) => {
|
||||
if (
|
||||
!confirm(
|
||||
`Are you sure you want to delete this "${discount.id}" discount?`,
|
||||
)
|
||||
)
|
||||
return;
|
||||
const deleteDiscount = async (discount: Discount) => {
|
||||
if (!confirm(`Are you sure you want to delete this "${discount.id}" discount?`)) return;
|
||||
|
||||
axios
|
||||
.delete(`/api/discounts/${discount.id}`)
|
||||
.then(() => toast.success(`Deleted the "${discount.id}" discount`))
|
||||
.catch((reason) => {
|
||||
if (reason.response.status === 404) {
|
||||
toast.error("Code not found!");
|
||||
return;
|
||||
}
|
||||
axios
|
||||
.delete(`/api/discounts/${discount.id}`)
|
||||
.then(() => toast.success(`Deleted the "${discount.id}" discount`))
|
||||
.catch((reason) => {
|
||||
if (reason.response.status === 404) {
|
||||
toast.error("Code not found!");
|
||||
return;
|
||||
}
|
||||
|
||||
if (reason.response.status === 403) {
|
||||
toast.error("You do not have permission to delete this discount!");
|
||||
return;
|
||||
}
|
||||
if (reason.response.status === 403) {
|
||||
toast.error("You do not have permission to delete this discount!");
|
||||
return;
|
||||
}
|
||||
|
||||
toast.error("Something went wrong, please try again later.");
|
||||
})
|
||||
.finally(reload);
|
||||
};
|
||||
toast.error("Something went wrong, please try again later.");
|
||||
})
|
||||
.finally(reload);
|
||||
};
|
||||
|
||||
const defaultColumns = [
|
||||
columnHelper.accessor("id", {
|
||||
id: "id",
|
||||
header: () => (
|
||||
<Checkbox
|
||||
disabled={filteredDiscounts.length === 0}
|
||||
isChecked={
|
||||
selectedDiscounts.length === filteredDiscounts.length &&
|
||||
filteredDiscounts.length > 0
|
||||
}
|
||||
onChange={(checked) => toggleAllDiscounts(checked)}
|
||||
>
|
||||
{""}
|
||||
</Checkbox>
|
||||
),
|
||||
cell: (info) => (
|
||||
<Checkbox
|
||||
isChecked={selectedDiscounts.includes(info.getValue())}
|
||||
onChange={() => toggleDiscount(info.getValue())}
|
||||
>
|
||||
{""}
|
||||
</Checkbox>
|
||||
),
|
||||
}),
|
||||
columnHelper.accessor("id", {
|
||||
header: "ID",
|
||||
cell: (info) => info.getValue(),
|
||||
}),
|
||||
columnHelper.accessor("domain", {
|
||||
header: "Domain",
|
||||
cell: (info) => `@${info.getValue()}`,
|
||||
}),
|
||||
columnHelper.accessor("percentage", {
|
||||
header: "Percentage",
|
||||
cell: (info) => `${info.getValue()}%`,
|
||||
}),
|
||||
{
|
||||
header: "",
|
||||
id: "actions",
|
||||
cell: ({ row }: { row: { original: Discount } }) => {
|
||||
return (
|
||||
<div className="flex gap-4">
|
||||
<div
|
||||
data-tip="Delete"
|
||||
className="cursor-pointer tooltip"
|
||||
onClick={() => {
|
||||
setEditingDiscount(row.original);
|
||||
}}
|
||||
>
|
||||
<BsPencil className="hover:text-mti-purple-light transition ease-in-out duration-300" />
|
||||
</div>
|
||||
<div
|
||||
data-tip="Delete"
|
||||
className="cursor-pointer tooltip"
|
||||
onClick={() => deleteDiscount(row.original)}
|
||||
>
|
||||
<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
const defaultColumns = [
|
||||
columnHelper.accessor("id", {
|
||||
id: "id",
|
||||
header: () => (
|
||||
<Checkbox
|
||||
disabled={filteredDiscounts.length === 0}
|
||||
isChecked={selectedDiscounts.length === filteredDiscounts.length && filteredDiscounts.length > 0}
|
||||
onChange={(checked) => toggleAllDiscounts(checked)}>
|
||||
{""}
|
||||
</Checkbox>
|
||||
),
|
||||
cell: (info) => (
|
||||
<Checkbox isChecked={selectedDiscounts.includes(info.getValue())} onChange={() => toggleDiscount(info.getValue())}>
|
||||
{""}
|
||||
</Checkbox>
|
||||
),
|
||||
}),
|
||||
columnHelper.accessor("id", {
|
||||
header: "ID",
|
||||
cell: (info) => info.getValue(),
|
||||
}),
|
||||
columnHelper.accessor("domain", {
|
||||
header: "Domain",
|
||||
cell: (info) => `@${info.getValue()}`,
|
||||
}),
|
||||
columnHelper.accessor("percentage", {
|
||||
header: "Percentage",
|
||||
cell: (info) => `${info.getValue()}%`,
|
||||
}),
|
||||
columnHelper.accessor("validUntil", {
|
||||
header: "Valid Until",
|
||||
cell: (info) => (info.getValue() ? moment(info.getValue()).format("DD/MM/YYYY") : ""),
|
||||
}),
|
||||
{
|
||||
header: "",
|
||||
id: "actions",
|
||||
cell: ({row}: {row: {original: Discount}}) => {
|
||||
return (
|
||||
<div className="flex gap-4">
|
||||
<div
|
||||
data-tip="Delete"
|
||||
className="cursor-pointer tooltip"
|
||||
onClick={() => {
|
||||
setEditingDiscount(row.original);
|
||||
}}>
|
||||
<BsPencil className="hover:text-mti-purple-light transition ease-in-out duration-300" />
|
||||
</div>
|
||||
<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteDiscount(row.original)}>
|
||||
<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const table = useReactTable({
|
||||
data: filteredDiscounts,
|
||||
columns: defaultColumns,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
});
|
||||
const table = useReactTable({
|
||||
data: filteredDiscounts,
|
||||
columns: defaultColumns,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
});
|
||||
|
||||
const closeModal = () => {
|
||||
setIsCreating(false);
|
||||
setEditingDiscount(undefined);
|
||||
reload();
|
||||
};
|
||||
const closeModal = () => {
|
||||
setIsCreating(false);
|
||||
setEditingDiscount(undefined);
|
||||
reload();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
isOpen={isCreating || !!editingDiscount}
|
||||
onClose={closeModal}
|
||||
title={
|
||||
editingDiscount ? `Editing ${editingDiscount.id}` : "New Discount"
|
||||
}
|
||||
>
|
||||
<DiscountCreator onClose={closeModal} discount={editingDiscount} />
|
||||
</Modal>
|
||||
<div className="flex items-center justify-end pb-4 pt-1">
|
||||
<div className="flex gap-4 items-center">
|
||||
<span>{selectedDiscounts.length} code(s) selected</span>
|
||||
<Button
|
||||
disabled={selectedDiscounts.length === 0}
|
||||
variant="outline"
|
||||
color="red"
|
||||
className="!py-1 px-10"
|
||||
onClick={() => deleteDiscounts(selectedDiscounts)}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
|
||||
<thead>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<tr key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<th className="p-4 text-left" key={header.id}>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext(),
|
||||
)}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
<tbody className="px-2">
|
||||
{table.getRowModel().rows.map((row) => (
|
||||
<tr
|
||||
className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
|
||||
key={row.id}
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<td className="px-4 py-2" key={cell.id}>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<button
|
||||
onClick={() => setIsCreating(true)}
|
||||
className="w-full py-2 bg-mti-purple-light hover:bg-mti-purple transition ease-in-out duration-300 text-white"
|
||||
>
|
||||
New Discount
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
isOpen={isCreating || !!editingDiscount}
|
||||
onClose={closeModal}
|
||||
title={editingDiscount ? `Editing ${editingDiscount.id}` : "New Discount"}>
|
||||
<DiscountCreator onClose={closeModal} discount={editingDiscount} />
|
||||
</Modal>
|
||||
<div className="flex items-center justify-end pb-4 pt-1">
|
||||
<div className="flex gap-4 items-center">
|
||||
<span>{selectedDiscounts.length} code(s) selected</span>
|
||||
<Button
|
||||
disabled={selectedDiscounts.length === 0}
|
||||
variant="outline"
|
||||
color="red"
|
||||
className="!py-1 px-10"
|
||||
onClick={() => deleteDiscounts(selectedDiscounts)}>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
|
||||
<thead>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<tr key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<th className="p-4 text-left" key={header.id}>
|
||||
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
<tbody className="px-2">
|
||||
{table.getRowModel().rows.map((row) => (
|
||||
<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<td className="px-4 py-2" key={cell.id}>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<button
|
||||
onClick={() => setIsCreating(true)}
|
||||
className="w-full py-2 bg-mti-purple-light hover:bg-mti-purple transition ease-in-out duration-300 text-white">
|
||||
New Discount
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user