diff --git a/public/user-dashboard/svg/credit-card.svg b/public/user-dashboard/svg/credit-card.svg new file mode 100644 index 000000000..c2d867778 --- /dev/null +++ b/public/user-dashboard/svg/credit-card.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/public/user-dashboard/svg/paypal-logo.svg b/public/user-dashboard/svg/paypal-logo.svg new file mode 100644 index 000000000..90822257e --- /dev/null +++ b/public/user-dashboard/svg/paypal-logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/user-dashboard/svg/stripe-logo.svg b/public/user-dashboard/svg/stripe-logo.svg new file mode 100644 index 000000000..fddde7b63 --- /dev/null +++ b/public/user-dashboard/svg/stripe-logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/app/dashboard/(user-dashboard)/settings/payment-information/upgrade/_components/upgrade.tsx b/src/app/dashboard/(user-dashboard)/settings/payment-information/upgrade/_components/upgrade.tsx new file mode 100644 index 000000000..4b88a941b --- /dev/null +++ b/src/app/dashboard/(user-dashboard)/settings/payment-information/upgrade/_components/upgrade.tsx @@ -0,0 +1,234 @@ +"use client"; + +import { ArrowLeft, ChevronDown, ChevronUp } from "lucide-react"; +import Image from "next/image"; +import Link from "next/link"; +import { useRouter } from "next/navigation"; +import { useState } from "react"; + +import CustomButton from "~/components/common/common-button/common-button"; +import CustomInput from "~/components/common/input/input"; +// import PlanUpgradeFailedModal from "~/components/common/modals/plan-upgrade-failed"; +import PlanUpgradeSuccessfulModal from "~/components/common/modals/plan-upgrade-successful"; + +const billingOption = [ + { + name: "Pay monthly", + description: "$20/ month/member ", + }, + { + name: "Pay yearly", + description: "$200/ year/member ", + }, +]; + +const paymentMethod = [ + { + name: "Credit Card", + icon: "/user-dashboard/svg/credit-card.svg", + width: 64, + }, + { + name: "Stripe Payment", + icon: "/user-dashboard/svg/stripe-logo.svg", + width: 84, + }, + { + name: "Paypal Payment", + icon: "/user-dashboard/svg/paypal-logo.svg", + width: 153, + }, +]; + +const Upgrade = () => { + const [open, setOpen] = useState(false); + const router = useRouter(); + + const [isDetailsVisible, setIsDetailsVisible] = useState(false); + + const toggleDetails = () => { + setIsDetailsVisible(!isDetailsVisible); + }; + + return ( +
+
+ + + +

+ Upgrade to Basic +

+ +

+ Do more with unlimited users and Integration when you upgrade +

+ + +
+ + +
+ +
+ + +
    + {billingOption.map((item, index) => ( +
  • + +
    • + ))} +
+ +
+ +

$20 /month

+ : } + isRightIconVisible={true} + size="sm" + onClick={toggleDetails} + > + Details + + + + {isDetailsVisible && ( +
+ +

Members in your workspace

+

1

+ + +

x$20/month/member

+

$20

+ +
+ +

Subtotal

+

$20

+ + +

Tax if applicable

+

$20

+ +
+ )} +
+
+ +
+ + +
    + {paymentMethod.map((item, index) => ( +
  • + +
    • + ))} +
+
+ +
+ +
+ + setOpen(true)} + > + Proceed to Payment + +
+ + setOpen(!open)} show={open} /> + {/* setOpen(!open)} show={open} /> */} +
+ ); +}; + +export default Upgrade; diff --git a/src/app/dashboard/(user-dashboard)/settings/payment-information/upgrade/page.tsx b/src/app/dashboard/(user-dashboard)/settings/payment-information/upgrade/page.tsx new file mode 100644 index 000000000..936f4f49c --- /dev/null +++ b/src/app/dashboard/(user-dashboard)/settings/payment-information/upgrade/page.tsx @@ -0,0 +1,7 @@ +import Upgrade from "./_components/upgrade"; + +const page = () => { + return ; +}; + +export default page; diff --git a/src/components/common/modals/plan-upgrade-failed/index.tsx b/src/components/common/modals/plan-upgrade-failed/index.tsx new file mode 100644 index 000000000..6a0f15515 --- /dev/null +++ b/src/components/common/modals/plan-upgrade-failed/index.tsx @@ -0,0 +1,50 @@ +"use client"; + +import React from "react"; + +import CustomButton from "~/components/common/common-button/common-button"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogOverlay, + DialogTitle, +} from "~/components/ui/dialog"; + +interface ModalProperties { + show: boolean; + onClose: () => void; +} + +const PlanUpgradeFailedModal: React.FC = ({ + show, + onClose, +}) => { + return ( + + + event.stopPropagation()} + > + + Error: Unable to Process Payment! + + + We apologize, but there seems to be an issue processing your upgrade + to the Basic plan. Don't worry, your current plan remains active. + +
+
+ Try Again +
+
+ + + ); +}; + +export default PlanUpgradeFailedModal; diff --git a/src/components/common/modals/plan-upgrade-successful/index.tsx b/src/components/common/modals/plan-upgrade-successful/index.tsx new file mode 100644 index 000000000..80e0b3c39 --- /dev/null +++ b/src/components/common/modals/plan-upgrade-successful/index.tsx @@ -0,0 +1,51 @@ +"use client"; + +import React from "react"; + +import CustomButton from "~/components/common/common-button/common-button"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogOverlay, + DialogTitle, +} from "~/components/ui/dialog"; + +interface ModalProperties { + show: boolean; + onClose: () => void; +} + +const PlanUpgradeSuccessfulModal: React.FC = ({ + show, + onClose, +}) => { + return ( + + + event.stopPropagation()} + > + + Success! You've Upgraded Your Plan! + + + Congratulations! You've successfully upgraded to Basic, This + means you now have access to all the powerful features that will help + you manage your team effectively + +
+
+ Done +
+
+ + + ); +}; + +export default PlanUpgradeSuccessfulModal;