diff --git a/src/components/PayPalPayment.tsx b/src/components/PayPalPayment.tsx index 32c75756..2eb80453 100644 --- a/src/components/PayPalPayment.tsx +++ b/src/components/PayPalPayment.tsx @@ -1,11 +1,12 @@ import {DurationUnit} from "@/interfaces/paypal"; import {CreateOrderActions, CreateOrderData, OnApproveActions, OnApproveData, OnCancelledActions, OrderResponseBody} from "@paypal/paypal-js"; -import {PayPalButtons, usePayPalScriptReducer} from "@paypal/react-paypal-js"; +import {PayPalButtons, PayPalScriptProvider, usePayPalScriptReducer} from "@paypal/react-paypal-js"; import axios from "axios"; import {useEffect, useState} from "react"; import {toast} from "react-toastify"; interface Props { + clientID: string; currency: string; price: number; duration: number; @@ -14,20 +15,7 @@ interface Props { onSuccess: (duration: number, duration_unit: DurationUnit) => void; } -export default function PayPalPayment({price, currency, duration, duration_unit, setIsLoading, onSuccess}: Props) { - const [{options}, dispatch] = usePayPalScriptReducer(); - - useEffect(() => { - dispatch({ - type: "resetOptions", - value: { - ...options, - currency, - }, - }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [currency]); - +export default function PayPalPayment({clientID, price, currency, duration, duration_unit, setIsLoading, onSuccess}: Props) { const createOrder = async (data: CreateOrderData, actions: CreateOrderActions): Promise => { setIsLoading(true); @@ -58,12 +46,21 @@ export default function PayPalPayment({price, currency, duration, duration_unit, }; return ( - + + + ); } diff --git a/src/pages/(status)/PaymentDue.tsx b/src/pages/(status)/PaymentDue.tsx index 7e518e10..7b5e8677 100644 --- a/src/pages/(status)/PaymentDue.tsx +++ b/src/pages/(status)/PaymentDue.tsx @@ -1,25 +1,23 @@ /* eslint-disable @next/next/no-img-element */ import Layout from "@/components/High/Layout"; import PayPalPayment from "@/components/PayPalPayment"; -import ProfileSummary from "@/components/ProfileSummary"; import useGroups from "@/hooks/useGroups"; import usePackages from "@/hooks/usePackages"; -import useStats from "@/hooks/useStats"; import useUsers from "@/hooks/useUsers"; -import {Package} from "@/interfaces/paypal"; import {User} from "@/interfaces/user"; -import {averageScore, groupBySession} from "@/utils/stats"; import clsx from "clsx"; import {capitalize} from "lodash"; -import Head from "next/head"; import {useState} from "react"; -import {BsFileEarmarkText, BsPencil, BsStar} from "react-icons/bs"; import getSymbolFromCurrency from "currency-symbol-map"; -import {Divider} from "primereact/divider"; -import Input from "@/components/Low/Input"; -import Button from "@/components/Low/Button"; -export default function PaymentDue({user, hasExpired, reload}: {user: User; hasExpired?: boolean; reload: () => void}) { +interface Props { + user: User; + hasExpired?: boolean; + clientID: string; + reload: () => void; +} + +export default function PaymentDue({user, hasExpired = false, clientID, reload}: Props) { const [isLoading, setIsLoading] = useState(false); const {packages} = usePackages(); @@ -74,9 +72,11 @@ export default function PaymentDue({user, hasExpired, reload}: {user: User; hasE {getSymbolFromCurrency(p.currency)} { + onSuccess={() => { setTimeout(reload, 500); }} /> @@ -110,12 +110,14 @@ export default function PaymentDue({user, hasExpired, reload}: {user: User; hasE {getSymbolFromCurrency(user.corporateInformation.payment.currency)} { + onSuccess={() => { setIsLoading(false); setTimeout(reload, 500); }} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 39b35039..39671a87 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -102,16 +102,13 @@ export default function Home({envVariables}: {envVariables: {[key: string]: stri )} {(user.status === "paymentDue" || checkIfUserExpired()) && ( - - - + )} ); diff --git a/src/pages/payment.tsx b/src/pages/payment.tsx index 66e9791d..c851d389 100644 --- a/src/pages/payment.tsx +++ b/src/pages/payment.tsx @@ -5,7 +5,6 @@ import {sessionOptions} from "@/lib/session"; import useUser from "@/hooks/useUser"; import PaymentDue from "./(status)/PaymentDue"; import {useRouter} from "next/router"; -import {PayPalScriptProvider} from "@paypal/react-paypal-js"; export const getServerSideProps = withIronSessionSsr(({req, res}) => { const user = req.session.user; @@ -50,16 +49,12 @@ export default function Home({envVariables}: {envVariables: {[key: string]: stri {user && ( - - - + )} );