From 5dcab23fdb1c006eb7468cae75bdad2da6cae019 Mon Sep 17 00:00:00 2001 From: Tiago Ribeiro Date: Sat, 3 Feb 2024 23:40:31 +0000 Subject: [PATCH] Extracted the PayPalScriptProvider --- src/components/PayPalPayment.tsx | 17 +- src/pages/(status)/PaymentDue.tsx | 445 +++++++++++++----------------- 2 files changed, 206 insertions(+), 256 deletions(-) diff --git a/src/components/PayPalPayment.tsx b/src/components/PayPalPayment.tsx index 2eb80453..5a19f2dc 100644 --- a/src/components/PayPalPayment.tsx +++ b/src/components/PayPalPayment.tsx @@ -11,11 +11,12 @@ interface Props { price: number; duration: number; duration_unit: DurationUnit; + loadScript?: boolean; setIsLoading: (isLoading: boolean) => void; onSuccess: (duration: number, duration_unit: DurationUnit) => void; } -export default function PayPalPayment({clientID, price, currency, duration, duration_unit, setIsLoading, onSuccess}: Props) { +export default function PayPalPayment({clientID, price, currency, duration, duration_unit, loadScript, setIsLoading, onSuccess}: Props) { const createOrder = async (data: CreateOrderData, actions: CreateOrderActions): Promise => { setIsLoading(true); @@ -45,7 +46,7 @@ export default function PayPalPayment({clientID, price, currency, duration, dura setIsLoading(false); }; - return ( + return loadScript ? ( + onError={onError} + /> + ) : ( + ); } diff --git a/src/pages/(status)/PaymentDue.tsx b/src/pages/(status)/PaymentDue.tsx index c44dbaa2..b358c860 100644 --- a/src/pages/(status)/PaymentDue.tsx +++ b/src/pages/(status)/PaymentDue.tsx @@ -4,272 +4,211 @@ import PayPalPayment from "@/components/PayPalPayment"; import useGroups from "@/hooks/useGroups"; import usePackages from "@/hooks/usePackages"; import useUsers from "@/hooks/useUsers"; -import { User } from "@/interfaces/user"; +import {User} from "@/interfaces/user"; import clsx from "clsx"; -import { capitalize } from "lodash"; -import { useState } from "react"; +import {capitalize} from "lodash"; +import {useState} from "react"; import getSymbolFromCurrency from "currency-symbol-map"; import useInvites from "@/hooks/useInvites"; -import { BsArrowRepeat } from "react-icons/bs"; +import {BsArrowRepeat} from "react-icons/bs"; import InviteCard from "@/components/Medium/InviteCard"; -import { useRouter } from "next/router"; +import {useRouter} from "next/router"; +import {PayPalScriptProvider} from "@paypal/react-paypal-js"; interface Props { - user: User; - hasExpired?: boolean; - clientID: string; - reload: () => void; + user: User; + hasExpired?: boolean; + clientID: string; + reload: () => void; } -export default function PaymentDue({ - user, - hasExpired = false, - clientID, - reload, -}: Props) { - const [isLoading, setIsLoading] = useState(false); +export default function PaymentDue({user, hasExpired = false, clientID, reload}: Props) { + const [isLoading, setIsLoading] = useState(false); - const router = useRouter(); + const router = useRouter(); - const { packages } = usePackages(); - const { users } = useUsers(); - const { groups } = useGroups(); - const { - invites, - isLoading: isInvitesLoading, - reload: reloadInvites, - } = useInvites({ to: user?.id }); + const {packages} = usePackages(); + const {users} = useUsers(); + const {groups} = useGroups(); + const {invites, isLoading: isInvitesLoading, reload: reloadInvites} = useInvites({to: user?.id}); - const isIndividual = () => { - if (user?.type === "developer") return true; - if (user?.type !== "student") return false; - const userGroups = groups.filter((g) => g.participants.includes(user?.id)); + const isIndividual = () => { + if (user?.type === "developer") return true; + if (user?.type !== "student") return false; + const userGroups = groups.filter((g) => g.participants.includes(user?.id)); - if (userGroups.length === 0) return true; + if (userGroups.length === 0) return true; - const userGroupsAdminTypes = userGroups - .map((g) => users?.find((u) => u.id === g.admin)?.type) - .filter((t) => !!t); - return userGroupsAdminTypes.every((t) => t !== "corporate"); - }; + const userGroupsAdminTypes = userGroups.map((g) => users?.find((u) => u.id === g.admin)?.type).filter((t) => !!t); + return userGroupsAdminTypes.every((t) => t !== "corporate"); + }; - return ( - <> - {isLoading && ( -
-
- - - Completing your payment... - -
-
- )} - {user ? ( - - {invites.length > 0 && ( -
-
-
- - Invites - - -
-
- - {invites.map((invite) => ( - { - reloadInvites(); - router.reload(); - }} - /> - ))} - -
- )} + return ( + <> + {isLoading && ( +
+
+ + Completing your payment... +
+
+ )} + {user ? ( + + {invites.length > 0 && ( +
+
+
+ Invites + +
+
+ + {invites.map((invite) => ( + { + reloadInvites(); + router.reload(); + }} + /> + ))} + +
+ )} -
- {hasExpired && ( - - You do not have time credits for your account type! - - )} - {isIndividual() && ( -
- - To add to your use of EnCoach, please purchase one of the time - packages available below: - -
- {packages.map((p) => ( -
-
- EnCoach's Logo - - EnCoach - {p.duration}{" "} - {capitalize( - p.duration === 1 - ? p.duration_unit.slice( - 0, - p.duration_unit.length - 1, - ) - : p.duration_unit, - )} - -
-
- - {p.price} - {getSymbolFromCurrency(p.currency)} - - { - setTimeout(reload, 500); - }} - /> -
-
- This includes: -
    -
  • - Train your abilities for the IELTS exam
    • -
  • - - Gain insights into your weaknesses and strengths -
    • -
  • - - Allow yourself to correctly prepare for the exam -
    • -
-
-
- ))} -
-
- )} - {!isIndividual() && - user.type === "corporate" && - user?.corporateInformation.payment && ( -
- - To add to your use of EnCoach and that of your students and - teachers, please pay your designated package below: - -
-
- EnCoach's Logo - - EnCoach - {user.corporateInformation?.monthlyDuration}{" "} - Months - -
-
- - {user.corporateInformation.payment.value} - {getSymbolFromCurrency( - user.corporateInformation.payment.currency, - )} - - { - setIsLoading(false); - setTimeout(reload, 500); - }} - /> -
-
- This includes: -
    -
  • - - Allow a total of{" "} - { - user.corporateInformation.companyInformation - .userAmount - }{" "} - students and teachers to use EnCoach -
    • -
  • - Train their abilities for the IELTS exam
    • -
  • - - Gain insights into your students' weaknesses - and strengths -
    • -
  • - Allow them to correctly prepare for the exam
    • -
-
-
-
- )} - {!isIndividual() && user.type !== "corporate" && ( -
- - You are not the person in charge of your time credits, please - contact your administrator about this situation. - - - If you believe this to be a mistake, please contact the - platform's administration, thank you for your patience. - -
- )} - {!isIndividual() && - user.type === "corporate" && - !user.corporateInformation.payment && ( -
- - An admin nor your agent have yet set the price intended to - your requirements in terms of the amount of users you desire - and your expected monthly duration. - - - Please try again later or contact your agent or an admin, - thank you for your patience. - -
- )} -
- - ) : ( -
- )} - - ); +
+ {hasExpired && You do not have time credits for your account type!} + {isIndividual() && ( +
+ + To add to your use of EnCoach, please purchase one of the time packages available below: + +
+ + {packages.map((p) => ( +
+
+ EnCoach's Logo + + EnCoach - {p.duration}{" "} + {capitalize( + p.duration === 1 ? p.duration_unit.slice(0, p.duration_unit.length - 1) : p.duration_unit, + )} + +
+
+ + {p.price} + {getSymbolFromCurrency(p.currency)} + + { + setTimeout(reload, 500); + }} + /> +
+
+ This includes: +
    +
  • - Train your abilities for the IELTS exam
    • +
  • - Gain insights into your weaknesses and strengths
    • +
  • - Allow yourself to correctly prepare for the exam
    • +
+
+
+ ))} + +
+
+ )} + {!isIndividual() && user.type === "corporate" && user?.corporateInformation.payment && ( +
+ + To add to your use of EnCoach and that of your students and teachers, please pay your designated package below: + +
+
+ EnCoach's Logo + EnCoach - {user.corporateInformation?.monthlyDuration} Months +
+
+ + {user.corporateInformation.payment.value} + {getSymbolFromCurrency(user.corporateInformation.payment.currency)} + + { + setIsLoading(false); + setTimeout(reload, 500); + }} + loadScript + /> +
+
+ This includes: +
    +
  • + - Allow a total of {user.corporateInformation.companyInformation.userAmount} students and teachers to + use EnCoach +
    • +
  • - Train their abilities for the IELTS exam
    • +
  • - Gain insights into your students' weaknesses and strengths
    • +
  • - Allow them to correctly prepare for the exam
    • +
+
+
+
+ )} + {!isIndividual() && user.type !== "corporate" && ( +
+ + You are not the person in charge of your time credits, please contact your administrator about this situation. + + + If you believe this to be a mistake, please contact the platform's administration, thank you for your + patience. + +
+ )} + {!isIndividual() && user.type === "corporate" && !user.corporateInformation.payment && ( +
+ + An admin nor your agent have yet set the price intended to your requirements in terms of the amount of users you + desire and your expected monthly duration. + + + Please try again later or contact your agent or an admin, thank you for your patience. + +
+ )} +
+ + ) : ( +
+ )} + + ); }