RS-189: Add stripe links to the pricing page

.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

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 <meta> tags
       metadata: [
         {

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;
@@ -21,7 +22,8 @@ interface PricingPlanProps {
   categories: Category[];
   buttonUrl: string;
   buttonLabel: string;
-  isHighlight: boolean;
+  isHighlight?: boolean;
+  isFree?: boolean;
 }
 
 const PricingPlan: React.FC<PricingPlanProps> = ({
@@ -33,9 +35,19 @@ const PricingPlan: React.FC<PricingPlanProps> = ({
   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);
+  const [buttonClicked, setButtonClicked] = useState(false);
+  const handleTermsChange = (e) => {
+    setIsTermsAccepted(e.target.checked);
+    setButtonClicked(false);
+  };
+  const handleButtonClick = () => {
+    setButtonClicked(true);
+  };
   return (
     <div className={clsx(styles.plan, { [styles.highlight]: isHighlight })}>
       <div className={styles.planCard}>
@@ -97,14 +109,34 @@ const PricingPlan: React.FC<PricingPlanProps> = ({
           ))}
         </div>
         <div className="card__footer">
-          <Link to={buttonUrl} className={clsx("button button--lg button--block",
-            {
-              "button--primary": isHighlight,
-              "button--secondary": !isHighlight,
-            }
-          )}>
-            {buttonLabel}
-          </Link>
+          <RenderButtonLink
+            buttonUrl={buttonUrl}
+            buttonLabel={buttonLabel}
+            isHighlight={isHighlight}
+            disabled={!isTermsAccepted && !isFree}
+            onClick={handleButtonClick}
+          />
+
+          {isFree ? (
+            <div className={styles.termsGroup} >
+              Distributed under the terms of the <Link to="https://github.com/reductstore/reductstore/blob/main/LICENSE" className={styles.boldLink}>BUSL</Link> license.
+            </div>
+          ) : (
+            <div className={clsx(styles.termsGroup, { [styles.error]: buttonClicked && !isTermsAccepted })}>
+              <input
+                type="checkbox"
+                id={`${planId}-checkbox`}
+                name="termsAndConditions"
+                checked={isTermsAccepted}
+                onChange={handleTermsChange}
+              />
+              <label htmlFor={`${planId}-checkbox`}>
+                I agree to the <Link to="/terms" className={styles.boldLink}>Terms and Conditions</Link>
+              </label>
+              <div className={styles.errorMessage}>Please accept the Terms and Conditions to proceed.</div>
+            </div>
+          )
+          }
         </div>
       </div>
     </div>

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 = <FaCheckCircle color="green" size="1.2em" />;
   return (
     <section>
@@ -21,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
         />
         <PricingPlan
           title="Standard"
@@ -37,9 +48,8 @@ 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}
         />
         <PricingPlan
           title="Premium"
@@ -53,9 +63,9 @@ 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}
+          isHighlight
         />
         <PricingPlan
           title="IoT"
@@ -69,9 +79,8 @@ 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}
         />
       </div>
     </section>

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,28 @@
   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;
+}
+
+.freePlanDisclaimer {
+  margin-top: 1em;
+  font-size: 0.8em;
+  color: var(--reduct-dimmed-color);
+}

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 (
+      <a
+        href={buttonUrl}
+        onClick={handleClick}
+        className={buttonClass}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {buttonLabel}
+      </a>
+    );
+  }
+
+  return (
+    <Link
+      to={buttonUrl}
+      onClick={handleClick}
+      className={buttonClass}
+    >
+      {buttonLabel}
+    </Link>
+  );
+};
+
+export default RenderButtonLink;