From 0bef859f7c5af7f8393c5cc1147149f6eb4a3601 Mon Sep 17 00:00:00 2001 From: "DESKTOP-14E8GN0\\JAMICO" Date: Mon, 29 Jul 2024 11:18:18 +0100 Subject: [PATCH 1/5] Feat:created the implemented the payment page Team-starlight --- .../(landing-routes)/(home)/payment/page.tsx | 182 ++++++++++++++++++ .../(landing-routes)/(home)/pricing/page.tsx | 11 ++ 2 files changed, 193 insertions(+) create mode 100644 src/app/(landing-routes)/(home)/payment/page.tsx diff --git a/src/app/(landing-routes)/(home)/payment/page.tsx b/src/app/(landing-routes)/(home)/payment/page.tsx new file mode 100644 index 000000000..b5a008bbb --- /dev/null +++ b/src/app/(landing-routes)/(home)/payment/page.tsx @@ -0,0 +1,182 @@ +import React from "react"; + + + +const Payment = () => { + return ( +
+
+
+ {/* Summary Section */} +
+

Subscribe to Boilerplates

+

+ $3000.00 per month +

+ +
+
+
+
+ + Boilerplates Premium + +

+ The essentials to provide your best work for clients. Billed monthly +

+
+ + $3000.00 + +
+
+
+
+ + Subtotal + +

+ Add promotional code +

+
+ + $3000.00 + +
+
+ +
+ +
+ Total due today + $3000.00 +
+
+
+ + {/* Form Section */} +
+
+
+
+ + +
+
+
+ + +
+
+ +
+ + + + +
+ + +
+ + + + + +
+ +
+ +
+ + Your subscription will renew automatically every month as one payment of $800. Cancel it anytime from your subscription settings. By clicking "Confirm and pay" you agree to the{" "} + Terms and Conditions. + +
+
+ + +
+
+
+
+
+ ); +}; + +export default Payment; diff --git a/src/app/(landing-routes)/(home)/pricing/page.tsx b/src/app/(landing-routes)/(home)/pricing/page.tsx index ddc871d6a..5e112e88c 100644 --- a/src/app/(landing-routes)/(home)/pricing/page.tsx +++ b/src/app/(landing-routes)/(home)/pricing/page.tsx @@ -6,6 +6,7 @@ import { useState } from "react"; import FaqAccordion from "~/components/layouts/accordion/FaqsAccordion"; import { Button } from "~/components/ui/button"; import { faqData } from "~/constants/faqsdata"; +import { useRouter } from 'next/navigation'; // @@ -15,7 +16,16 @@ const handleButtonClickTest = () => { // + + export default function Pricing() { + + + const router = useRouter(); + + const handleClick = () => { + router.push('/payment'); + }; const [toggle, setToggle] = useState(1); return ( @@ -275,6 +285,7 @@ export default function Pricing() { Custom integration - - - - - +const page = () => { + return ( + <> + + ); }; -export default Payment; +export default page; diff --git a/src/app/(landing-routes)/(home)/pricing/page.tsx b/src/app/(landing-routes)/(home)/pricing/page.tsx index faffa5bd0..2ae564494 100644 --- a/src/app/(landing-routes)/(home)/pricing/page.tsx +++ b/src/app/(landing-routes)/(home)/pricing/page.tsx @@ -1,545 +1,11 @@ -"use client"; - -import Image from "next/image"; -import { useRouter } from "next/navigation"; -import { useState } from "react"; - -import FaqAccordion from "~/components/layouts/accordion/FaqsAccordion"; -import { Button } from "~/components/ui/button"; -import { faqData } from "~/constants/faqsdata"; - -// - -const handleButtonClickTest = () => { - alert("Contact Button Click Test"); -}; - -// - -export default function Pricing() { - const router = useRouter(); - - const handleClick = () => { - router.push("/payment"); - }; - const [toggle, setToggle] = useState(1); +import Pricing from "~/components/pricing"; +const page = () => { return ( <> -
-
-

- Pricing -

- -

- Simple and Affordable{" "} - Pricing Plan -

-

- Our flexible plans are designed to scale with your business. We have - a plan for you. -

-
- -
-
setToggle(1)} - className={`flex h-[50px] w-[190px] cursor-pointer items-center justify-center rounded-md ${toggle === 1 ? "bg-white font-medium" : ""}`} - data-testid="monthly-toggle" - > - Monthly -
-
setToggle(2)} - className={`flex h-[50px] w-[190px] cursor-pointer items-center justify-center rounded-md ${toggle === 2 ? "bg-white font-medium" : ""}`} - data-testid="annual-toggle" - > - Annual(save 20%) -
-
- -
- {toggle === 1 ? ( - <> -
-

- Basic -

-

- $800 /month -

-

- The essensitals to provide your best work for clients. -

-
- - 2 Projects -
-
- - Up to 100 subscribers -
-
- - Basic analytics -
-
- - 24-hour support response time -
-
- - Marketing advisor -
-
- - Custom integration -
- -
- -
-

- Premium -

-

- $3,000 /month -

-

- The essensitals to provide your best work for clients. -

-
- - 2 Projects -
-
- - Up to 100 subscribers -
-
- - Basic analytics -
-
- - 24-hour support response time -
-
- - Marketing advisor -
-
- - Custom integration -
- -
- - ) : ( - <> -
-

- Basic -

-

- $500 /month -

-

- The essensitals to provide your best work for clients. -

-
- - 2 Projects -
-
- - Up to 100 subscribers -
-
- - Basic analytics -
-
- - 24-hour support response time -
-
- - Marketing advisor -
-
- - Custom integration -
- -
- -
-

- Premium -

-

- $2,000 /month -

-

- The essensitals to provide your best work for clients. -

-
- - 2 Projects -
-
- - Up to 100 subscribers -
-
- - Basic analytics -
-
- - 24-hour support response time -
-
- - Marketing advisor -
-
- - Custom integration -
- -
- - )} -
-
- -
-
-
-
-

- Frequently Asked Questions -

- -

- We couldn’t answer your question? -

- - -
- - -
-
-
+ ); -} +}; + +export default page; diff --git a/src/components/payment/index.tsx b/src/components/payment/index.tsx new file mode 100644 index 000000000..9a808c937 --- /dev/null +++ b/src/components/payment/index.tsx @@ -0,0 +1,187 @@ +const Payment = () => { + return ( +
+
+
+ {/* Summary Section */} +
+

+ Subscribe to Boilerplates +

+

+ $3000.00 per month +

+ +
+
+
+
+ + Boilerplates Premium + +

+ The essentials to provide your best work for clients. + Billed monthly +

+
+ + $3000.00 + +
+
+
+
+ + Subtotal + +

+ Add promotional code +

+
+ + $3000.00 + +
+
+
+ +
+ + Total due today + + + $3000.00 + +
+
+
+ + {/* Form Section */} +
+
+
+
+ +
+
+
+ +
+
+ +
+ + + + +
+ + +
+ + + + + +
+ +
+ +
+ + Your subscription will renew automatically every month as + one payment of $800. Cancel it anytime from your + subscription settings. By clicking "Confirm and + pay" you agree to the{" "} + + Terms and Conditions. + + +
+
+ + +
+
+
+
+
+ ); +}; + +export default Payment; diff --git a/src/components/pricing/index.tsx b/src/components/pricing/index.tsx new file mode 100644 index 000000000..faffa5bd0 --- /dev/null +++ b/src/components/pricing/index.tsx @@ -0,0 +1,545 @@ +"use client"; + +import Image from "next/image"; +import { useRouter } from "next/navigation"; +import { useState } from "react"; + +import FaqAccordion from "~/components/layouts/accordion/FaqsAccordion"; +import { Button } from "~/components/ui/button"; +import { faqData } from "~/constants/faqsdata"; + +// + +const handleButtonClickTest = () => { + alert("Contact Button Click Test"); +}; + +// + +export default function Pricing() { + const router = useRouter(); + + const handleClick = () => { + router.push("/payment"); + }; + const [toggle, setToggle] = useState(1); + + return ( + <> +
+
+

+ Pricing +

+ +

+ Simple and Affordable{" "} + Pricing Plan +

+

+ Our flexible plans are designed to scale with your business. We have + a plan for you. +

+
+ +
+
setToggle(1)} + className={`flex h-[50px] w-[190px] cursor-pointer items-center justify-center rounded-md ${toggle === 1 ? "bg-white font-medium" : ""}`} + data-testid="monthly-toggle" + > + Monthly +
+
setToggle(2)} + className={`flex h-[50px] w-[190px] cursor-pointer items-center justify-center rounded-md ${toggle === 2 ? "bg-white font-medium" : ""}`} + data-testid="annual-toggle" + > + Annual(save 20%) +
+
+ +
+ {toggle === 1 ? ( + <> +
+

+ Basic +

+

+ $800 /month +

+

+ The essensitals to provide your best work for clients. +

+
+ + 2 Projects +
+
+ + Up to 100 subscribers +
+
+ + Basic analytics +
+
+ + 24-hour support response time +
+
+ + Marketing advisor +
+
+ + Custom integration +
+ +
+ +
+

+ Premium +

+

+ $3,000 /month +

+

+ The essensitals to provide your best work for clients. +

+
+ + 2 Projects +
+
+ + Up to 100 subscribers +
+
+ + Basic analytics +
+
+ + 24-hour support response time +
+
+ + Marketing advisor +
+
+ + Custom integration +
+ +
+ + ) : ( + <> +
+

+ Basic +

+

+ $500 /month +

+

+ The essensitals to provide your best work for clients. +

+
+ + 2 Projects +
+
+ + Up to 100 subscribers +
+
+ + Basic analytics +
+
+ + 24-hour support response time +
+
+ + Marketing advisor +
+
+ + Custom integration +
+ +
+ +
+

+ Premium +

+

+ $2,000 /month +

+

+ The essensitals to provide your best work for clients. +

+
+ + 2 Projects +
+
+ + Up to 100 subscribers +
+
+ + Basic analytics +
+
+ + 24-hour support response time +
+
+ + Marketing advisor +
+
+ + Custom integration +
+ +
+ + )} +
+
+ +
+
+
+
+

+ Frequently Asked Questions +

+ +

+ We couldn’t answer your question? +

+ + +
+ + +
+
+
+ + ); +} From 03bedc05c401660fb95a14a26c2a4abeb01e593e Mon Sep 17 00:00:00 2001 From: "DESKTOP-14E8GN0\\JAMICO" Date: Tue, 30 Jul 2024 13:58:58 +0100 Subject: [PATCH 4/5] Fix: payment and pricing page --- .../(landing-routes)/(home)/payment/page.tsx | 190 +++++- .../(landing-routes)/(home)/pricing/page.tsx | 546 +++++++++++++++++- src/components/payment/index.tsx | 187 ------ src/components/pricing/index.tsx | 545 ----------------- 4 files changed, 723 insertions(+), 745 deletions(-) delete mode 100644 src/components/payment/index.tsx delete mode 100644 src/components/pricing/index.tsx diff --git a/src/app/(landing-routes)/(home)/payment/page.tsx b/src/app/(landing-routes)/(home)/payment/page.tsx index 8a19cb2be..9a808c937 100644 --- a/src/app/(landing-routes)/(home)/payment/page.tsx +++ b/src/app/(landing-routes)/(home)/payment/page.tsx @@ -1,11 +1,187 @@ -import Payment from "~/components/payment"; - -const page = () => { +const Payment = () => { return ( - <> - - +
+
+
+ {/* Summary Section */} +
+

+ Subscribe to Boilerplates +

+

+ $3000.00 per month +

+ +
+
+
+
+ + Boilerplates Premium + +

+ The essentials to provide your best work for clients. + Billed monthly +

+
+ + $3000.00 + +
+
+
+
+ + Subtotal + +

+ Add promotional code +

+
+ + $3000.00 + +
+
+
+ +
+ + Total due today + + + $3000.00 + +
+
+
+ + {/* Form Section */} +
+
+
+
+ +
+
+
+ +
+
+ +
+ + + + +
+ + +
+ + + + + +
+ +
+ +
+ + Your subscription will renew automatically every month as + one payment of $800. Cancel it anytime from your + subscription settings. By clicking "Confirm and + pay" you agree to the{" "} + + Terms and Conditions. + + +
+
+ + +
+
+
+
+
); }; -export default page; +export default Payment; diff --git a/src/app/(landing-routes)/(home)/pricing/page.tsx b/src/app/(landing-routes)/(home)/pricing/page.tsx index 2ae564494..faffa5bd0 100644 --- a/src/app/(landing-routes)/(home)/pricing/page.tsx +++ b/src/app/(landing-routes)/(home)/pricing/page.tsx @@ -1,11 +1,545 @@ -import Pricing from "~/components/pricing"; +"use client"; + +import Image from "next/image"; +import { useRouter } from "next/navigation"; +import { useState } from "react"; + +import FaqAccordion from "~/components/layouts/accordion/FaqsAccordion"; +import { Button } from "~/components/ui/button"; +import { faqData } from "~/constants/faqsdata"; + +// + +const handleButtonClickTest = () => { + alert("Contact Button Click Test"); +}; + +// + +export default function Pricing() { + const router = useRouter(); + + const handleClick = () => { + router.push("/payment"); + }; + const [toggle, setToggle] = useState(1); -const page = () => { return ( <> - +
+
+

+ Pricing +

+ +

+ Simple and Affordable{" "} + Pricing Plan +

+

+ Our flexible plans are designed to scale with your business. We have + a plan for you. +

+
+ +
+
setToggle(1)} + className={`flex h-[50px] w-[190px] cursor-pointer items-center justify-center rounded-md ${toggle === 1 ? "bg-white font-medium" : ""}`} + data-testid="monthly-toggle" + > + Monthly +
+
setToggle(2)} + className={`flex h-[50px] w-[190px] cursor-pointer items-center justify-center rounded-md ${toggle === 2 ? "bg-white font-medium" : ""}`} + data-testid="annual-toggle" + > + Annual(save 20%) +
+
+ +
+ {toggle === 1 ? ( + <> +
+

+ Basic +

+

+ $800 /month +

+

+ The essensitals to provide your best work for clients. +

+
+ + 2 Projects +
+
+ + Up to 100 subscribers +
+
+ + Basic analytics +
+
+ + 24-hour support response time +
+
+ + Marketing advisor +
+
+ + Custom integration +
+ +
+ +
+

+ Premium +

+

+ $3,000 /month +

+

+ The essensitals to provide your best work for clients. +

+
+ + 2 Projects +
+
+ + Up to 100 subscribers +
+
+ + Basic analytics +
+
+ + 24-hour support response time +
+
+ + Marketing advisor +
+
+ + Custom integration +
+ +
+ + ) : ( + <> +
+

+ Basic +

+

+ $500 /month +

+

+ The essensitals to provide your best work for clients. +

+
+ + 2 Projects +
+
+ + Up to 100 subscribers +
+
+ + Basic analytics +
+
+ + 24-hour support response time +
+
+ + Marketing advisor +
+
+ + Custom integration +
+ +
+ +
+

+ Premium +

+

+ $2,000 /month +

+

+ The essensitals to provide your best work for clients. +

+
+ + 2 Projects +
+
+ + Up to 100 subscribers +
+
+ + Basic analytics +
+
+ + 24-hour support response time +
+
+ + Marketing advisor +
+
+ + Custom integration +
+ +
+ + )} +
+
+ +
+
+
+
+

+ Frequently Asked Questions +

+ +

+ We couldn’t answer your question? +

+ + +
+ + +
+
+
); -}; - -export default page; +} diff --git a/src/components/payment/index.tsx b/src/components/payment/index.tsx deleted file mode 100644 index 9a808c937..000000000 --- a/src/components/payment/index.tsx +++ /dev/null @@ -1,187 +0,0 @@ -const Payment = () => { - return ( -
-
-
- {/* Summary Section */} -
-

- Subscribe to Boilerplates -

-

- $3000.00 per month -

- -
-
-
-
- - Boilerplates Premium - -

- The essentials to provide your best work for clients. - Billed monthly -

-
- - $3000.00 - -
-
-
-
- - Subtotal - -

- Add promotional code -

-
- - $3000.00 - -
-
-
- -
- - Total due today - - - $3000.00 - -
-
-
- - {/* Form Section */} -
-
-
-
- -
-
-
- -
-
- -
- - - - -
- - -
- - - - - -
- -
- -
- - Your subscription will renew automatically every month as - one payment of $800. Cancel it anytime from your - subscription settings. By clicking "Confirm and - pay" you agree to the{" "} - - Terms and Conditions. - - -
-
- - -
-
-
-
-
- ); -}; - -export default Payment; diff --git a/src/components/pricing/index.tsx b/src/components/pricing/index.tsx deleted file mode 100644 index faffa5bd0..000000000 --- a/src/components/pricing/index.tsx +++ /dev/null @@ -1,545 +0,0 @@ -"use client"; - -import Image from "next/image"; -import { useRouter } from "next/navigation"; -import { useState } from "react"; - -import FaqAccordion from "~/components/layouts/accordion/FaqsAccordion"; -import { Button } from "~/components/ui/button"; -import { faqData } from "~/constants/faqsdata"; - -// - -const handleButtonClickTest = () => { - alert("Contact Button Click Test"); -}; - -// - -export default function Pricing() { - const router = useRouter(); - - const handleClick = () => { - router.push("/payment"); - }; - const [toggle, setToggle] = useState(1); - - return ( - <> -
-
-

- Pricing -

- -

- Simple and Affordable{" "} - Pricing Plan -

-

- Our flexible plans are designed to scale with your business. We have - a plan for you. -

-
- -
-
setToggle(1)} - className={`flex h-[50px] w-[190px] cursor-pointer items-center justify-center rounded-md ${toggle === 1 ? "bg-white font-medium" : ""}`} - data-testid="monthly-toggle" - > - Monthly -
-
setToggle(2)} - className={`flex h-[50px] w-[190px] cursor-pointer items-center justify-center rounded-md ${toggle === 2 ? "bg-white font-medium" : ""}`} - data-testid="annual-toggle" - > - Annual(save 20%) -
-
- -
- {toggle === 1 ? ( - <> -
-

- Basic -

-

- $800 /month -

-

- The essensitals to provide your best work for clients. -

-
- - 2 Projects -
-
- - Up to 100 subscribers -
-
- - Basic analytics -
-
- - 24-hour support response time -
-
- - Marketing advisor -
-
- - Custom integration -
- -
- -
-

- Premium -

-

- $3,000 /month -

-

- The essensitals to provide your best work for clients. -

-
- - 2 Projects -
-
- - Up to 100 subscribers -
-
- - Basic analytics -
-
- - 24-hour support response time -
-
- - Marketing advisor -
-
- - Custom integration -
- -
- - ) : ( - <> -
-

- Basic -

-

- $500 /month -

-

- The essensitals to provide your best work for clients. -

-
- - 2 Projects -
-
- - Up to 100 subscribers -
-
- - Basic analytics -
-
- - 24-hour support response time -
-
- - Marketing advisor -
-
- - Custom integration -
- -
- -
-

- Premium -

-

- $2,000 /month -

-

- The essensitals to provide your best work for clients. -

-
- - 2 Projects -
-
- - Up to 100 subscribers -
-
- - Basic analytics -
-
- - 24-hour support response time -
-
- - Marketing advisor -
-
- - Custom integration -
- -
- - )} -
-
- -
-
-
-
-

- Frequently Asked Questions -

- -

- We couldn’t answer your question? -

- - -
- - -
-
-
- - ); -} From 588886fba6172a20a5f737cf96c9d4e99d4e92eb Mon Sep 17 00:00:00 2001 From: "DESKTOP-14E8GN0\\JAMICO" Date: Tue, 30 Jul 2024 14:56:06 +0100 Subject: [PATCH 5/5] Fix: payment and pricing page --- src/app/(landing-routes)/(home)/pricing/page.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/app/(landing-routes)/(home)/pricing/page.tsx b/src/app/(landing-routes)/(home)/pricing/page.tsx index faffa5bd0..ec5f07e5f 100644 --- a/src/app/(landing-routes)/(home)/pricing/page.tsx +++ b/src/app/(landing-routes)/(home)/pricing/page.tsx @@ -1,7 +1,6 @@ "use client"; import Image from "next/image"; -import { useRouter } from "next/navigation"; import { useState } from "react"; import FaqAccordion from "~/components/layouts/accordion/FaqsAccordion"; @@ -17,11 +16,6 @@ const handleButtonClickTest = () => { // export default function Pricing() { - const router = useRouter(); - - const handleClick = () => { - router.push("/payment"); - }; const [toggle, setToggle] = useState(1); return ( @@ -281,7 +275,6 @@ export default function Pricing() { Custom integration