devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Created the validity dates for discounts

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-05-23 19:21:52 +01:00
parent d50904611c
commit 906646ebce
3 changed files with 305 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/interfaces/paypal.ts
View File

@@ -1,55 +1,56 @@
export interface TokenSuccess { export interface TokenSuccess {
scope: string; scope: string;
access_token: string; access_token: string;
token_type: string; token_type: string;
app_id: string; app_id: string;
expires_in: number; expires_in: number;
nonce: string; nonce: string;
} }
export interface TokenError { export interface TokenError {
error: string; error: string;
error_description: string; error_description: string;
} }
export interface Package { export interface Package {
id: string; id: string;
currency: string; currency: string;
duration: number; duration: number;
duration_unit: DurationUnit; duration_unit: DurationUnit;
price: number; price: number;
} }
export interface Discount { export interface Discount {
id: string; id: string;
percentage: number; percentage: number;
domain: string; domain: string;
validUntil?: Date;
} }
export type DurationUnit = "weeks" | "days" | "months" | "years"; export type DurationUnit = "weeks" | "days" | "months" | "years";
export interface Payment { export interface Payment {
id: string; id: string;
corporate: string; corporate: string;
agent?: string; agent?: string;
agentCommission: number; agentCommission: number;
agentValue: number; agentValue: number;
currency: string; currency: string;
value: number; value: number;
isPaid: boolean; isPaid: boolean;
date: Date | string; date: Date | string;
corporateTransfer?: string; corporateTransfer?: string;
commissionTransfer?: string; commissionTransfer?: string;
} }
export interface PaypalPayment { export interface PaypalPayment {
orderId: string; orderId: string;
userId: string; userId: string;
status: string; status: string;
createdAt: Date; createdAt: Date;
value: number; value: number;
currency: string; currency: string;
subscriptionDuration: number; subscriptionDuration: number;
subscriptionDurationUnit: DurationUnit; subscriptionDurationUnit: DurationUnit;
subscriptionExpirationDate: Date; subscriptionExpirationDate: Date;
} }

567
src/pages/(admin)/Lists/DiscountList.tsx
View File

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

3
src/pages/(status)/PaymentDue.tsx
View File

@@ -14,6 +14,7 @@ import {useRouter} from "next/router";
import {ToastContainer} from "react-toastify"; import {ToastContainer} from "react-toastify";
import useDiscounts from "@/hooks/useDiscounts"; import useDiscounts from "@/hooks/useDiscounts";
import PaymobPayment from "@/components/PaymobPayment"; import PaymobPayment from "@/components/PaymobPayment";
import moment from "moment";
interface Props { interface Props {
user: User; user: User;
@@ -39,7 +40,7 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
if (userDiscounts.length === 0) return; if (userDiscounts.length === 0) return;
const biggestDiscount = [...userDiscounts].sort((a, b) => b.percentage - a.percentage).shift(); const biggestDiscount = [...userDiscounts].sort((a, b) => b.percentage - a.percentage).shift();
if (!biggestDiscount) return; if (!biggestDiscount || (biggestDiscount.validUntil && moment(biggestDiscount.validUntil).isBefore(moment()))) return;
setAppliedDiscount(biggestDiscount.percentage); setAppliedDiscount(biggestDiscount.percentage);
}, [discounts, user]); }, [discounts, user]);