From edf366d60bbf7646cd43bcf44242c0cc6d6ba702 Mon Sep 17 00:00:00 2001 From: AnthonyCvn Date: Thu, 7 Mar 2024 11:18:48 +0100 Subject: [PATCH 1/3] add stripe links to the pricing page --- .gitignore | 8 +++- docusaurus.config.js | 7 +++ src/components/PricingTable/PricingPlan.tsx | 42 ++++++++++++----- src/components/PricingTable/index.tsx | 17 +++++-- src/components/PricingTable/styles.module.css | 25 ++++++++++- src/components/RenderButtonLink/index.tsx | 45 +++++++++++++++++++ 6 files changed, 127 insertions(+), 17 deletions(-) create mode 100644 src/components/RenderButtonLink/index.tsx diff --git a/.gitignore b/.gitignore index b2d6de30..e4ece6d0 100644 --- a/.gitignore +++ b/.gitignore @@ -8,13 +8,17 @@ .docusaurus .cache-loader -# Misc -.DS_Store +# Environment +.env .env.local .env.development.local .env.test.local .env.production.local +# Debug npm-debug.log* yarn-debug.log* yarn-error.log* + +# Misc +.DS_Store \ No newline at end of file diff --git a/docusaurus.config.js b/docusaurus.config.js index 9bd375c5..e9e66875 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -84,6 +84,13 @@ const config = { exclude: [".azurestaticapps.net"], }, + // Stripe integration + paymentLinks: { + standard: "https://buy.stripe.com/4gwdTF9un87r1uo6oq", + premium: "https://buy.stripe.com/3csaHtgWP0EZ7SM003", + iot: "https://buy.stripe.com/4gw02P6ib2N71uo6os", + }, + // Declare some tags metadata: [ { diff --git a/src/components/PricingTable/PricingPlan.tsx b/src/components/PricingTable/PricingPlan.tsx index 442ab6c2..43b5622e 100644 --- a/src/components/PricingTable/PricingPlan.tsx +++ b/src/components/PricingTable/PricingPlan.tsx @@ -1,9 +1,10 @@ -import React from 'react'; +import React, { useState } from 'react'; import clsx from 'clsx'; -import { Link } from 'react-router-dom'; import { Tooltip } from 'react-tooltip'; import styles from './styles.module.css'; import { FaQuestionCircle } from "react-icons/fa"; +import RenderButtonLink from '../RenderButtonLink'; +import Link from '@docusaurus/Link'; interface Category { title: string; @@ -36,6 +37,15 @@ const PricingPlan: React.FC = ({ isHighlight, }) => { const planId = title.replace(/\s+/g, '').replace(/[^a-zA-Z0-9]/g, ''); + const [isTermsAccepted, setIsTermsAccepted] = useState(false); + const [buttonClicked, setButtonClicked] = useState(false); + const handleTermsChange = (e) => { + setIsTermsAccepted(e.target.checked); + setButtonClicked(false); + }; + const handleButtonClick = () => { + setButtonClicked(true); + }; return (
@@ -97,14 +107,26 @@ const PricingPlan: React.FC = ({ ))}
- - {buttonLabel} - + +
+ + +
Please accept the Terms and Conditions to proceed.
+
diff --git a/src/components/PricingTable/index.tsx b/src/components/PricingTable/index.tsx index cdc5c01a..6d3e4b61 100644 --- a/src/components/PricingTable/index.tsx +++ b/src/components/PricingTable/index.tsx @@ -1,10 +1,21 @@ import React from "react"; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; import clsx from "clsx"; import styles from "./styles.module.css"; import PricingPlan from "./PricingPlan"; import { FaCheckCircle } from "react-icons/fa"; +interface PaymentLinks { + standard: string; + premium: string; + iot: string; +} + export default function PricingTable() { + const { siteConfig } = useDocusaurusContext(); + const { themeConfig } = siteConfig; + const paymentLinks = themeConfig.paymentLinks as PaymentLinks; + const checkedIcon = ; return (
@@ -37,7 +48,7 @@ export default function PricingTable() { { title: "Long Term Release Support", description: "1 year" }, { title: "Architecture Review", description: "-" } ]} - buttonUrl="/contact" + buttonUrl={paymentLinks.standard} buttonLabel="Choose Standard" isHighlight={false} /> @@ -53,7 +64,7 @@ export default function PricingTable() { { title: "Long Term Release Support", description: "3 years" }, { title: "Architecture Review", description: checkedIcon } ]} - buttonUrl="/contact" + buttonUrl={paymentLinks.premium} buttonLabel="Choose Premium" isHighlight={true} /> @@ -69,7 +80,7 @@ export default function PricingTable() { { title: "Long Term Release Support", description: "1 year" }, { title: "Architecture Review", description: checkedIcon } ]} - buttonUrl="/contact" + buttonUrl={paymentLinks.iot} buttonLabel="Choose IoT" isHighlight={false} /> diff --git a/src/components/PricingTable/styles.module.css b/src/components/PricingTable/styles.module.css index ca85c28d..7d8931f3 100644 --- a/src/components/PricingTable/styles.module.css +++ b/src/components/PricingTable/styles.module.css @@ -1,6 +1,9 @@ .pricingTable { + display: flex; + flex-wrap: wrap; justify-content: center; - gap: 2em; + gap: 2em; + align-items: flex-start; } .plan { @@ -28,7 +31,6 @@ border-top: 1px solid #ccc; } - .planTitle { margin-bottom: 0.5rem; } @@ -73,3 +75,22 @@ max-width: 200px; word-wrap: break-word; } + +.termsGroup { + margin-top: 16px; +} + +.boldLink { + font-weight: bold; +} + +.errorMessage { + display: none; + color: #cc0033; + font-size: 12px; +} + +.error .errorMessage { + display: block; + margin-bottom: -2em; +} \ No newline at end of file diff --git a/src/components/RenderButtonLink/index.tsx b/src/components/RenderButtonLink/index.tsx new file mode 100644 index 00000000..067cbc66 --- /dev/null +++ b/src/components/RenderButtonLink/index.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import clsx from 'clsx'; + +const RenderButtonLink = ({ buttonUrl, buttonLabel, isHighlight, disabled, onClick }) => { + const isExternalLink = buttonUrl.startsWith('http://') || buttonUrl.startsWith('https://'); + + const buttonClass = clsx("button button--lg button--block", { + "button--primary": isHighlight, + "button--secondary": !isHighlight, + }); + + const handleClick = (event) => { + onClick(); + if (disabled) { + event.preventDefault(); + } + }; + + if (isExternalLink) { + return ( + + {buttonLabel} + + ); + } + + return ( + + {buttonLabel} + + ); +}; + +export default RenderButtonLink; From 7d9b641ded42521266f26ee36a8c4da5f946fb26 Mon Sep 17 00:00:00 2001 From: AnthonyCvn Date: Thu, 7 Mar 2024 13:22:36 +0100 Subject: [PATCH 2/3] remove terms checkbox for free plan --- src/components/PricingTable/PricingPlan.tsx | 37 +++++++++++-------- src/components/PricingTable/index.tsx | 10 ++--- src/components/PricingTable/styles.module.css | 6 +++ 3 files changed, 31 insertions(+), 22 deletions(-) diff --git a/src/components/PricingTable/PricingPlan.tsx b/src/components/PricingTable/PricingPlan.tsx index 43b5622e..7127887e 100644 --- a/src/components/PricingTable/PricingPlan.tsx +++ b/src/components/PricingTable/PricingPlan.tsx @@ -22,7 +22,8 @@ interface PricingPlanProps { categories: Category[]; buttonUrl: string; buttonLabel: string; - isHighlight: boolean; + isHighlight?: boolean; + isFree?: boolean; } const PricingPlan: React.FC = ({ @@ -34,7 +35,8 @@ const PricingPlan: React.FC = ({ categories, buttonUrl, buttonLabel, - isHighlight, + isHighlight = false, + isFree = false, }) => { const planId = title.replace(/\s+/g, '').replace(/[^a-zA-Z0-9]/g, ''); const [isTermsAccepted, setIsTermsAccepted] = useState(false); @@ -111,22 +113,25 @@ const PricingPlan: React.FC = ({ buttonUrl={buttonUrl} buttonLabel={buttonLabel} isHighlight={isHighlight} - disabled={!isTermsAccepted} + disabled={!isTermsAccepted && !isFree} onClick={handleButtonClick} /> -
- - -
Please accept the Terms and Conditions to proceed.
-
+ {!isFree && ( +
+ + +
Please accept the Terms and Conditions to proceed.
+
+ ) + } diff --git a/src/components/PricingTable/index.tsx b/src/components/PricingTable/index.tsx index 6d3e4b61..737cca3b 100644 --- a/src/components/PricingTable/index.tsx +++ b/src/components/PricingTable/index.tsx @@ -32,9 +32,9 @@ export default function PricingTable() { { title: "Long Term Release Support", description: "-" }, { title: "Architecture Review", description: "-" } ]} - buttonUrl="/docs/next/getting-started" - buttonLabel="Choose Free" - isHighlight={false} + buttonUrl="/Download" + buttonLabel="Download" + isFree />
diff --git a/src/components/PricingTable/styles.module.css b/src/components/PricingTable/styles.module.css index 7d8931f3..0aa3a3e7 100644 --- a/src/components/PricingTable/styles.module.css +++ b/src/components/PricingTable/styles.module.css @@ -93,4 +93,10 @@ .error .errorMessage { display: block; margin-bottom: -2em; +} + +.freePlanDisclaimer { + margin-top: 1em; + font-size: 0.8em; + color: var(--reduct-dimmed-color); } \ No newline at end of file From 6777ba11a66ba8c838ba295f878057a38ba8af74 Mon Sep 17 00:00:00 2001 From: AnthonyCvn Date: Thu, 7 Mar 2024 16:21:20 +0100 Subject: [PATCH 3/3] add BUSL link --- src/components/PricingTable/PricingPlan.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/PricingTable/PricingPlan.tsx b/src/components/PricingTable/PricingPlan.tsx index 7127887e..a157e475 100644 --- a/src/components/PricingTable/PricingPlan.tsx +++ b/src/components/PricingTable/PricingPlan.tsx @@ -116,7 +116,12 @@ const PricingPlan: React.FC = ({ disabled={!isTermsAccepted && !isFree} onClick={handleButtonClick} /> - {!isFree && ( + + {isFree ? ( +
+ Distributed under the terms of the BUSL license. +
+ ) : (