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

Updated the payment to work with Paymob

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-05-15 22:59:51 +01:00
parent 7af96ecccc
commit 2920fa7f3a
6 changed files with 1164 additions and 1412 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,5 @@
/* eslint-disable @next/next/no-img-element */
import Layout from "@/components/High/Layout";
import PayPalPayment from "@/components/PayPalPayment";
import useGroups from "@/hooks/useGroups";
import usePackages from "@/hooks/usePackages";
import useUsers from "@/hooks/useUsers";
@@ -13,8 +12,6 @@ import useInvites from "@/hooks/useInvites";
import {BsArrowRepeat} from "react-icons/bs";
import InviteCard from "@/components/Medium/InviteCard";
import {useRouter} from "next/router";
import {PayPalScriptProvider} from "@paypal/react-paypal-js";
import {usePaypalTracking} from "@/hooks/usePaypalTracking";
import {ToastContainer} from "react-toastify";
import useDiscounts from "@/hooks/useDiscounts";
import PaymobPayment from "@/components/PaymobPayment";
@@ -37,7 +34,6 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
const {users} = useUsers();
const {groups} = useGroups();
const {invites, isLoading: isInvitesLoading, reload: reloadInvites} = useInvites({to: user?.id});
const trackingId = usePaypalTracking();
useEffect(() => {
const userDiscounts = discounts.filter((x) => user.email.endsWith(`@${x.domain}`));
@@ -65,9 +61,15 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
<ToastContainer />
{isLoading && (
<div className="absolute left-0 top-0 z-[999] h-screen w-screen overflow-hidden bg-black/60">
<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-8 text-white">
<span className={clsx("loading loading-infinity w-48")} />
<span className={clsx("text-2xl font-bold")}>Completing your payment...</span>
<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-8 text-white">
<span className={clsx("loading loading-infinity w-48 animate-pulse")} />
<span className={clsx("text-2xl font-bold animate-pulse")}>Completing your payment...</span>
<span>If you canceled your payment or it failed, please click the button below to restart</span>
<button
onClick={() => setIsLoading(false)}
className="border border-white rounded-full px-4 py-2 hover:bg-white/80 hover:text-black cursor-pointer transition ease-in-out duration-300">
Cancel Payment
</button>
</div>
</div>
)}
@@ -137,29 +139,10 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
</span>
</div>
)}
{/* <PayPalPayment
key={clientID}
clientID={clientID}
setIsLoading={setIsLoading}
onSuccess={() => {
setTimeout(reload, 500);
}}
trackingId={trackingId}
currency={p.currency}
duration={p.duration}
duration_unit={p.duration_unit}
price={
+(
p.price -
p.price * (appliedDiscount / 100)
).toFixed(2)
}
/> */}
<PaymobPayment
key={clientID}
user={user}
setIsPaymentLoading={setIsLoading}
packageID={p.id}
onSuccess={() => {
setTimeout(reload, 500);
}}
@@ -179,7 +162,6 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
</div>
</div>
))}
z
</div>
</div>
)}
@@ -198,10 +180,10 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
{user.corporateInformation.payment.value}
{getSymbolFromCurrency(user.corporateInformation.payment.currency)}
</span>
<PayPalPayment
<PaymobPayment
key={clientID}
clientID={clientID}
setIsLoading={setIsLoading}
user={user}
setIsPaymentLoading={setIsLoading}
currency={user.corporateInformation.payment.currency}
price={user.corporateInformation.payment.value}
duration={user.corporateInformation.monthlyDuration}
@@ -210,8 +192,6 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
setIsLoading(false);
setTimeout(reload, 500);
}}
loadScript
trackingId={trackingId}
/>
</div>
<div className="flex flex-col items-start gap-1">