From 7f3f45ce7915522fd448df6d573af87b4513aa0b Mon Sep 17 00:00:00 2001 From: Stephen Adeniji Date: Tue, 30 Jul 2024 00:53:58 +0100 Subject: [PATCH 01/26] chore: assets (payment logos) --- public/user-dashboard/svg/credit-card.svg | 17 +++++++++++++++++ public/user-dashboard/svg/paypal-logo.svg | 9 +++++++++ public/user-dashboard/svg/stripe-logo.svg | 13 +++++++++++++ 3 files changed, 39 insertions(+) create mode 100644 public/user-dashboard/svg/credit-card.svg create mode 100644 public/user-dashboard/svg/paypal-logo.svg create mode 100644 public/user-dashboard/svg/stripe-logo.svg 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 @@ + + + + + + + + + + + + + From a9d0b4e7f2021433f338d5dcdac97a04a611ab5c Mon Sep 17 00:00:00 2001 From: Stephen Adeniji Date: Tue, 30 Jul 2024 00:54:30 +0100 Subject: [PATCH 02/26] feat: upgrade plan page --- .../upgrade/_components/upgrade.tsx | 235 ++++++++++++++++++ .../payment-information/upgrade/page.tsx | 10 + .../modals/plan-upgrade-failed/index.tsx | 50 ++++ .../modals/plan-upgrade-successful/index.tsx | 49 ++++ 4 files changed, 344 insertions(+) create mode 100644 src/app/dashboard/(user-dashboard)/settings/payment-information/upgrade/_components/upgrade.tsx create mode 100644 src/app/dashboard/(user-dashboard)/settings/payment-information/upgrade/page.tsx create mode 100644 src/components/common/modals/plan-upgrade-failed/index.tsx create mode 100644 src/components/common/modals/plan-upgrade-successful/index.tsx 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..778a2c21f --- /dev/null +++ b/src/app/dashboard/(user-dashboard)/settings/payment-information/upgrade/_components/upgrade.tsx @@ -0,0 +1,235 @@ +"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, idx) => ( +
  • + +
    • + ))} +
+ +
+ +

$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, idx) => ( +
  • + +
    • + ))} +
+
+ +
+ +
+ + 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..0773a0986 --- /dev/null +++ b/src/app/dashboard/(user-dashboard)/settings/payment-information/upgrade/page.tsx @@ -0,0 +1,10 @@ +import React from 'react' +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..51c9de7db --- /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..0b8310b54 --- /dev/null +++ b/src/components/common/modals/plan-upgrade-successful/index.tsx @@ -0,0 +1,49 @@ +"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; From 95cb3d10465e29b886f6ccd4ed89b5d51f532392 Mon Sep 17 00:00:00 2001 From: Stephen Adeniji Date: Tue, 30 Jul 2024 01:27:20 +0100 Subject: [PATCH 03/26] fix: lint --- .../upgrade/_components/upgrade.tsx | 13 ++++++------- .../settings/payment-information/upgrade/page.tsx | 11 ++++------- .../common/modals/plan-upgrade-failed/index.tsx | 2 +- .../common/modals/plan-upgrade-successful/index.tsx | 6 ++++-- 4 files changed, 15 insertions(+), 17 deletions(-) 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 index 778a2c21f..4b88a941b 100644 --- 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 @@ -88,13 +88,13 @@ const Upgrade = () => {
    - {billingOption.map((item, idx) => ( -
  • + {billingOption.map((item, index) => ( +