Add frontend, backend and CLI

frontend/components/billing/Card.js

@@ -0,0 +1,72 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheck, faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
+import { faCcMastercard, faCcVisa } from "@fortawesome/free-brands-svg-icons";
+import { faCircle } from "@fortawesome/free-solid-svg-icons";
+
+export default function Card({ card, changeSelectedCard, selected }) {
+	function creditCardBrandIcon(cc) {
+		if (cc == "visa") {
+			return faCcVisa;
+		} else if ((cc = "mastercard")) {
+			return faCcMastercard;
+		} else return faQuestionCircle;
+	}
+
+	return (
+		<button onClick={() => changeSelectedCard(card.id)}>
+			<div
+				className={`flex flex-col p-3 items-start justify-between mr-2 w-52 h-28 bg-primary/5 rounded-lg duration-200 ${
+					card.id == selected
+						? "border-primary text-primary"
+						: "border-gray-500 text-gray-300"
+				} hover:border-primary border-2 hover:text-primary cursor-pointer`}
+			>
+				<div className="flex flex-row items-center justify-between w-full">
+					<FontAwesomeIcon
+						className="text-3xl mr-4"
+						icon={creditCardBrandIcon(card.card.brand)}
+					/>
+					{card.id == selected && (
+						<FontAwesomeIcon
+							className="text-xl ml-2 mr-2"
+							icon={faCheck}
+						/>
+					)}
+				</div>
+				<div className="flex flex-row items-center justify-between w-full">
+					<div className="flex flex-row items-center">
+						<p className="tracking-tighter mr-1 mt-0.5 flex">
+							{"****".split("").map(() => (
+								<FontAwesomeIcon
+									className="text-xxxs mr-0.5"
+									icon={faCircle}
+								/>
+							))}
+						</p>
+						<p className="tracking-tighter mr-1 mt-0.5 flex">
+							{"****".split("").map(() => (
+								<FontAwesomeIcon
+									className="text-xxxs mr-0.5"
+									icon={faCircle}
+								/>
+							))}
+						</p>
+						<p className="tracking-tighter mr-1 mt-0.5 flex">
+							{"****".split("").map(() => (
+								<FontAwesomeIcon
+									className="text-xxxs mr-0.5"
+									icon={faCircle}
+								/>
+							))}
+						</p>
+						<p className="text-xs">{card.card.last4}</p>
+					</div>
+					<p className="text-xs">
+						{card.card.exp_month + "/" + card.card.exp_year}
+					</p>
+				</div>
+			</div>
+		</button>
+	);
+}

frontend/components/billing/Plan.js

@@ -0,0 +1,82 @@
+import React from "react";
+import StripeRedirect from "../../pages/api/organization/StripeRedirect";
+
+export default function Plan({ plan }) {
+	return (
+		<div
+			className={`relative flex flex-col justify-between border border-2 min-w-fit w-96 rounded-lg h-68 mr-4 bg-mineshaft-800 ${
+				(plan.name != "Starter") & (plan.current == true)
+					? "border-primary"
+					: "border-chicago-700"
+			}
+			`}
+		>
+			<div className="flex flex-col">
+				<div className="flex flex-row justify-between items-center relative z-10">
+					<p
+						className={`px-6 py-4 text-3xl font-semibold text-gray-400`}
+					>
+						{plan.name}
+					</p>
+				</div>
+				<div className="flex flwx-row items-end justify-start mb-4">
+					<p className="pl-6 text-3xl font-semibold text-primary">
+						{plan.price}
+					</p>
+					<p className="pl-3 mb-1 text-lg text-gray-400">
+						{plan.priceExplanation}
+					</p>
+				</div>
+			<p className="relative z-10 max-w-fit px-6 text-base text-gray-400">
+				{plan.text}
+			</p>
+			<p className="relative z-10 max-w-fit px-6 text-base text-gray-400">
+				{plan.subtext}
+			</p>
+			</div>
+			<div className="flex flex-row items-center">
+				{plan.current == false ? (
+					<>
+						{plan.buttonTextMain == "Schedule a Demo" ? (
+							<a
+								href="/scheduledemo"
+								target='_blank rel="noopener"'
+							>
+								<div className="relative z-10 mx-5 mt-3 mb-4 py-2 px-4 border border-1 border-gray-600 hover:text-black hover:border-primary text-gray-400 font-semibold hover:bg-primary bg-bunker duration-200 cursor-pointer rounded-md flex w-max">
+									{plan.buttonTextMain}
+								</div>
+							</a>
+						) : (
+							<div
+								className={`relative z-10 mx-5 mt-3 mb-4 py-2 px-4 border border-1 border-gray-600 text-gray-400 font-semibold ${
+									plan.buttonTextMain == "Downgrade"
+										? "hover:bg-red hover:text-white hover:border-red"
+										: "hover:bg-primary hover:text-black hover:border-primary"
+								} bg-bunker duration-200 cursor-pointer rounded-md flex w-max`}
+							>
+								<button onClick={() => StripeRedirect({orgId: localStorage.getItem("orgData.id")})}>{plan.buttonTextMain}</button>
+							</div>
+						)}
+						<a href="/pricing" target='_blank rel="noopener"'>
+							<div className="relative z-10 text-gray-400 font-semibold hover:text-primary duration-200 cursor-pointer mb-0.5">
+								{plan.buttonTextSecondary}
+							</div>
+						</a>
+					</>
+				) : (
+					<div
+						className={`h-8 w-full rounded-b-md flex justify-center items-center z-10 ${
+							(plan.name != "Starter") & (plan.current == true)
+								? "bg-primary"
+								: "bg-chicago-700"
+						}`}
+					>
+						<p className="text-xs text-black font-semibold">
+							CURRENT PLAN
+						</p>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}