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

Improved the way the PayPal integration works

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-11-26 23:16:26 +00:00
parent 0fe2e0d393
commit 9de39485de
4 changed files with 46 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/PayPalPayment.tsx
View File

@@ -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<string> => {
setIsLoading(true);
@@ -58,6 +46,14 @@ export default function PayPalPayment({price, currency, duration, duration_unit,
};
return (
<PayPalScriptProvider
options={{
clientId: clientID,
currency,
intent: "capture",
commit: true,
vault: true,
}}>
<PayPalButtons
className="w-full"
style={{layout: "vertical"}}
@@ -65,5 +61,6 @@ export default function PayPalPayment({price, currency, duration, duration_unit,
onApprove={onApprove}
onCancel={onCancel}
onError={onError}></PayPalButtons>
</PayPalScriptProvider>
);
}

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

@@ -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)}
</span>
<PayPalPayment
key={clientID}
{...p}
clientID={clientID}
setIsLoading={setIsLoading}
onSuccess={(duration, duration_unit) => {
onSuccess={() => {
setTimeout(reload, 500);
}}
/>
@@ -110,12 +110,14 @@ export default function PaymentDue({user, hasExpired, reload}: {user: User; hasE
{getSymbolFromCurrency(user.corporateInformation.payment.currency)}
</span>
<PayPalPayment
key={clientID}
clientID={clientID}
setIsLoading={setIsLoading}
currency={user.corporateInformation.payment.currency}
price={user.corporateInformation.payment.value}
duration={user.corporateInformation.monthlyDuration}
duration_unit="months"
onSuccess={(duration, duration_unit) => {
onSuccess={() => {
setIsLoading(false);
setTimeout(reload, 500);
}}

17
src/pages/index.tsx
View File

@@ -102,16 +102,13 @@ export default function Home({envVariables}: {envVariables: {[key: string]: stri
</Layout>
)}
{(user.status === "paymentDue" || checkIfUserExpired()) && (
<PayPalScriptProvider
options={{
clientId: envVariables["NEXT_PUBLIC_PAYPAL_CLIENT_ID"] || "",
currency: "EUR",
intent: "capture",
commit: true,
vault: true,
}}>
<PaymentDue hasExpired user={user} reload={router.reload} />
</PayPalScriptProvider>
<PaymentDue
key={envVariables["NEXT_PUBLIC_PAYPAL_CLIENT_ID"]}
hasExpired
user={user}
reload={router.reload}
clientID={envVariables["NEXT_PUBLIC_PAYPAL_CLIENT_ID"] || ""}
/>
)}
</>
);

17
src/pages/payment.tsx
View File

@@ -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
<link rel="icon" href="/favicon.ico" />
</Head>
{user && (
<PayPalScriptProvider
options={{
clientId: envVariables["NEXT_PUBLIC_PAYPAL_CLIENT_ID"] || "",
currency: "EUR",
intent: "capture",
commit: true,
vault: true,
}}>
<PaymentDue user={user} reload={router.reload} />
</PayPalScriptProvider>
<PaymentDue
key={envVariables["NEXT_PUBLIC_PAYPAL_CLIENT_ID"]}
clientID={envVariables["NEXT_PUBLIC_PAYPAL_CLIENT_ID"] || ""}
user={user}
reload={router.reload}
/>
)}
</>
);