Updated part of the payment

src/components/High/Layout.tsx

@@ -1,8 +1,8 @@
 import useEntities from "@/hooks/useEntities";
 import { EntityWithRoles } from "@/interfaces/entity";
-import {User} from "@/interfaces/user";
+import { User } from "@/interfaces/user";
 import clsx from "clsx";
-import {useRouter} from "next/router";
+import { useRouter } from "next/router";
 import { ToastContainer } from "react-toastify";
 import Navbar from "../Navbar";
 import Sidebar from "../Sidebar";
@@ -23,19 +23,19 @@ export default function Layout({
 	user,
 	children,
 	className,
-	bgColor="bg-white",
+	bgColor = "bg-white",
 	hideSidebar,
 	navDisabled = false,
 	focusMode = false,
 	onFocusLayerMouseEnter
 }: Props) {
 	const router = useRouter();
-	const {entities} = useEntities()
+	const { entities } = useEntities()
 
 	return (
 		<main className={clsx("w-full min-h-full h-screen flex flex-col bg-mti-gray-smoke relative")}>
 			<ToastContainer />
-			{!hideSidebar && (
+			{!hideSidebar && user && (
 				<Navbar
 					path={router.pathname}
 					user={user}
@@ -45,7 +45,7 @@ export default function Layout({
 				/>
 			)}
 			<div className={clsx("h-full w-full flex gap-2")}>
-				{!hideSidebar && (
+				{!hideSidebar && user && (
 					<Sidebar
 						path={router.pathname}
 						navDisabled={navDisabled}

src/components/Low/Input.tsx

@@ -13,6 +13,7 @@ interface Props {
 	disabled?: boolean;
 	max?: number;
 	min?: number;
+	thin?: boolean
 	name: string;
 	onChange: (value: string) => void;
 }
@@ -29,6 +30,7 @@ export default function Input({
 	className,
 	roundness = "full",
 	disabled = false,
+	thin = false,
 	min,
 	onChange,
 }: Props) {
@@ -95,9 +97,10 @@ export default function Input({
 				min={type === "number" ? (min ?? 0) : undefined}
 				placeholder={placeholder}
 				className={clsx(
-					"px-8 py-6 text-sm font-normal bg-white border border-mti-gray-platinum focus:outline-none",
+					"px-8 text-sm font-normal bg-white border border-mti-gray-platinum focus:outline-none",
 					"placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed",
 					roundness === "full" ? "rounded-full" : "rounded-xl",
+					thin ? 'py-4' : 'py-6'
 				)}
 				required={required}
 				defaultValue={defaultValue}

src/components/Navbar.tsx

@@ -65,28 +65,28 @@ export default function Navbar({ user, path, navDisabled = false, focusMode = fa
 		{
 			module: "reading",
 			icon: () => <BsBook className="h-4 w-4 text-white" />,
-			achieved: user.levels?.reading || 0 >= user.desiredLevels?.reading || 9,
+			achieved: user?.levels?.reading || 0 >= user?.desiredLevels?.reading || 9,
 		},
 
 		{
 			module: "listening",
 			icon: () => <BsHeadphones className="h-4 w-4 text-white" />,
-			achieved: user.levels?.listening || 0 >= user.desiredLevels?.listening || 9,
+			achieved: user?.levels?.listening || 0 >= user?.desiredLevels?.listening || 9,
 		},
 		{
 			module: "writing",
 			icon: () => <BsPen className="h-4 w-4 text-white" />,
-			achieved: user.levels?.writing || 0 >= user.desiredLevels?.writing || 9,
+			achieved: user?.levels?.writing || 0 >= user?.desiredLevels?.writing || 9,
 		},
 		{
 			module: "speaking",
 			icon: () => <BsMegaphone className="h-4 w-4 text-white" />,
-			achieved: user.levels?.speaking || 0 >= user.desiredLevels?.speaking || 9,
+			achieved: user?.levels?.speaking || 0 >= user?.desiredLevels?.speaking || 9,
 		},
 		{
 			module: "level",
 			icon: () => <BsClipboard className="h-4 w-4 text-white" />,
-			achieved: user.levels?.level || 0 >= user.desiredLevels?.level || 9,
+			achieved: user?.levels?.level || 0 >= user?.desiredLevels?.level || 9,
 		},
 	];
 

src/components/PaymobPayment.tsx

@@ -1,15 +1,17 @@
-import {PaymentIntention} from "@/interfaces/paymob";
-import {DurationUnit} from "@/interfaces/paypal";
-import {User} from "@/interfaces/user";
+import { Entity } from "@/interfaces/entity";
+import { PaymentIntention } from "@/interfaces/paymob";
+import { DurationUnit } from "@/interfaces/paypal";
+import { User } from "@/interfaces/user";
 import axios from "axios";
-import {useRouter} from "next/router";
-import {useState} from "react";
+import { useRouter } from "next/router";
+import { useState } from "react";
 import Button from "./Low/Button";
 import Input from "./Low/Input";
 import Modal from "./Modal";
 
 interface Props {
 	user: User;
+	entity?: Entity
 	currency: string;
 	price: number;
 	setIsPaymentLoading: (v: boolean) => void;
@@ -18,7 +20,7 @@ interface Props {
 	onSuccess: (duration: number, duration_unit: DurationUnit) => void;
 }
 
-export default function PaymobPayment({user, price, setIsPaymentLoading, currency, duration, duration_unit, onSuccess}: Props) {
+export default function PaymobPayment({ user, entity, price, setIsPaymentLoading, currency, duration, duration_unit, onSuccess }: Props) {
 	const [isLoading, setIsLoading] = useState(false);
 
 	const router = useRouter();
@@ -56,10 +58,11 @@ export default function PaymobPayment({user, price, setIsPaymentLoading, currenc
 					userID: user.id,
 					duration,
 					duration_unit,
+					entity: entity?.id
 				},
 			};
 
-			const response = await axios.post<{iframeURL: string}>(`/api/paymob`, paymentIntention);
+			const response = await axios.post<{ iframeURL: string }>(`/api/paymob`, paymentIntention);
 
 			router.push(response.data.iframeURL);
 		} catch (error) {