Updated part of the payment

src/pages/entities/[id]/index.tsx

@@ -2,6 +2,7 @@
 import CardList from "@/components/High/CardList";
 import Layout from "@/components/High/Layout";
 import Select from "@/components/Low/Select";
+import Input from "@/components/Low/Input";
 import Checkbox from "@/components/Low/Checkbox";
 import Tooltip from "@/components/Low/Tooltip";
 import { useEntityPermission } from "@/hooks/useEntityPermissions";
@@ -29,6 +30,7 @@ import { useRouter } from "next/router";
 import { Divider } from "primereact/divider";
 import { useEffect, useMemo, useState } from "react";
 import ReactDatePicker from "react-datepicker";
+import { CURRENCIES } from "@/resources/paypal";
 
 import {
 	BsCheck,
@@ -56,6 +58,11 @@ const expirationDateColor = (date: Date) => {
 	if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
 };
 
+const CURRENCIES_OPTIONS = CURRENCIES.map(({ label, currency }) => ({
+	value: currency,
+	label,
+}));
+
 export const getServerSideProps = withIronSessionSsr(async ({ req, params }) => {
 	const user = req.session.user as User;
 
@@ -102,6 +109,8 @@ export default function Home({ user, entity, users, linkedUsers }: Props) {
 	const [isLoading, setIsLoading] = useState(false);
 	const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
 	const [expiryDate, setExpiryDate] = useState(entity?.expiryDate)
+	const [paymentPrice, setPaymentPrice] = useState(entity?.payment?.price)
+	const [paymentCurrency, setPaymentCurrency] = useState(entity?.payment?.currency)
 
 	const router = useRouter();
 
@@ -198,6 +207,23 @@ export default function Home({ user, entity, users, linkedUsers }: Props) {
 			.finally(() => setIsLoading(false));
 	};
 
+	const updatePayment = () => {
+		if (!isAdmin(user)) return;
+
+		setIsLoading(true);
+		axios
+			.patch(`/api/entities/${entity.id}`, { payment: { price: paymentPrice, currency: paymentCurrency } })
+			.then(() => {
+				toast.success("The entity has been updated successfully!");
+				router.replace(router.asPath);
+			})
+			.catch((e) => {
+				console.error(e);
+				toast.error("Something went wrong!");
+			})
+			.finally(() => setIsLoading(false));
+	};
+
 	const editLicenses = () => {
 		if (!isAdmin(user)) return;
 
@@ -430,6 +456,36 @@ export default function Home({ user, entity, users, linkedUsers }: Props) {
 									<span className="text-xs">Apply Change</span>
 								</button>
 							</div>
+
+							<Divider />
+
+							<div className="w-full flex items-center justify-between gap-8">
+								<div className="w-full max-w-xl flex items-center gap-4">
+									<Input
+										name="paymentValue"
+										onChange={(e) => setPaymentPrice(e ? parseInt(e) : undefined)}
+										type="number"
+										defaultValue={entity.payment?.price || 0}
+										thin
+									/>
+									<Select
+										className={clsx(
+											"px-4 !py-2 !w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
+										)}
+										options={CURRENCIES_OPTIONS}
+										value={CURRENCIES_OPTIONS.find((c) => c.value === paymentCurrency)}
+										onChange={(value) => setPaymentCurrency(value?.value ?? undefined)}
+									/>
+								</div>
+
+								<button
+									onClick={updatePayment}
+									disabled={!paymentPrice || paymentPrice <= 0 || !paymentCurrency}
+									className="flex w-fit text-nowrap items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+									<BsCheck />
+									<span className="text-xs">Apply Change</span>
+								</button>
+							</div>
 						</>
 					)}