Stripe Integration

.env.example

@@ -74,6 +74,7 @@ FEATURE_TEAM_AUDIT_LOG=true
 FEATURE_TEAM_WEBHOOK=true
 FEATURE_TEAM_API_KEY=true
 FEATURE_TEAM_DELETION=true
+FEATURE_TEAM_PAYMENTS=true
 
 # Google reCAPTCHA
 RECAPTCHA_SITE_KEY=
@@ -99,3 +100,10 @@ MAX_LOGIN_ATTEMPTS=5
 
 # Set this to receive Slack notifications, https://hooks.slack.com/services/xxx/xxx/xxx
 SLACK_WEBHOOK_URL=
+
+# Stripe
+STRIPE_SECRET_KEY=
+STRIPE_WEBHOOK_SECRET=
+
+# Support URL
+NEXT_PUBLIC_SUPPORT_URL=

.eslintrc.js

@@ -31,6 +31,9 @@ module.exports = {
   overrides: [
     {
       files: ['*.js'],
+      rules: {
+        '@typescript-eslint/no-var-requires': 'off', // Disable the rule for JavaScript files
+      },
     },
     {
       files: [

components/billing/Help.tsx

@@ -0,0 +1,33 @@
+import Link from 'next/link';
+import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline';
+import { useTranslation } from 'next-i18next';
+
+import { Card } from '@/components/shared';
+
+const Help = () => {
+  const { t } = useTranslation('common');
+
+  return (
+    <Card>
+      <Card.Body>
+        <Card.Header>
+          <Card.Title>{t('need-anything-else')}</Card.Title>
+          <Card.Description>{t('billing-assistance-message')}</Card.Description>
+        </Card.Header>
+        <div>
+          <Link
+            href={process.env.NEXT_PUBLIC_SUPPORT_URL || ''}
+            className="btn btn-primary btn-outline btn-sm"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {t('contact-support')}
+            <ArrowTopRightOnSquareIcon className="w-5 h-5 ml-2" />
+          </Link>
+        </div>
+      </Card.Body>
+    </Card>
+  );
+};
+
+export default Help;

components/billing/LinkToPortal.tsx

@@ -0,0 +1,68 @@
+import toast from 'react-hot-toast';
+import { Button } from 'react-daisyui';
+import { useState } from 'react';
+import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline';
+import { useTranslation } from 'next-i18next';
+
+import { Card } from '@/components/shared';
+import { Team } from '@prisma/client';
+import { defaultHeaders } from '@/lib/common';
+import type { ApiResponse } from 'types';
+
+interface LinkToPortalProps {
+  team: Team;
+}
+
+const LinkToPortal = ({ team }: LinkToPortalProps) => {
+  const [loading, setLoading] = useState(false);
+  const { t } = useTranslation('common');
+
+  const openStripePortal = async () => {
+    setLoading(true);
+
+    const response = await fetch(
+      `/api/teams/${team.slug}/payments/create-portal-link`,
+      {
+        method: 'POST',
+        headers: defaultHeaders,
+        credentials: 'same-origin',
+      }
+    );
+
+    const result = (await response.json()) as ApiResponse<{ url: string }>;
+
+    if (!response.ok) {
+      toast.error(result.error.message);
+      return;
+    }
+
+    setLoading(false);
+    window.open(result.data.url, '_blank', 'noopener,noreferrer');
+  };
+
+  return (
+    <Card>
+      <Card.Body>
+        <Card.Header>
+          <Card.Title>{t('manage-subscription')}</Card.Title>
+          <Card.Description>{t('manage-billing-information')}</Card.Description>
+        </Card.Header>
+        <div>
+          <Button
+            type="button"
+            color="primary"
+            size="sm"
+            variant="outline"
+            loading={loading}
+            onClick={() => openStripePortal()}
+          >
+            {t('billing-portal')}
+            <ArrowTopRightOnSquareIcon className="w-5 h-5 ml-2" />
+          </Button>
+        </div>
+      </Card.Body>
+    </Card>
+  );
+};
+
+export default LinkToPortal;

components/billing/PaymentButton.tsx

@@ -0,0 +1,55 @@
+import { Button } from 'react-daisyui';
+import getSymbolFromCurrency from 'currency-symbol-map';
+
+import { Price, Prisma, Service } from '@prisma/client';
+
+interface PaymentButtonProps {
+  plan: Service;
+  price: Price;
+  initiateCheckout: (priceId: string, quantity?: number) => void;
+}
+
+const PaymentButton = ({
+  plan,
+  price,
+  initiateCheckout,
+}: PaymentButtonProps) => {
+  const metadata = price.metadata as Prisma.JsonObject;
+  const currencySymbol = getSymbolFromCurrency(price.currency || 'USD');
+  let buttonText = 'Get Started';
+
+  if (metadata?.interval === 'month') {
+    buttonText = price.amount
+      ? `${currencySymbol}${price.amount} / month`
+      : `Monthly`;
+  } else if (metadata?.interval === 'year') {
+    buttonText = price.amount
+      ? `${currencySymbol}${price.amount} / year`
+      : `Yearly`;
+  }
+
+  return (
+    <Button
+      key={`${plan.id}-${price.id}`}
+      color="primary"
+      variant="outline"
+      size="md"
+      fullWidth
+      onClick={() => {
+        initiateCheckout(
+          price.id,
+          (price.billingScheme == 'per_unit' ||
+            price.billingScheme == 'tiered') &&
+            metadata.usage_type !== 'metered'
+            ? 1
+            : undefined
+        );
+      }}
+      className="rounded-full"
+    >
+      {buttonText}
+    </Button>
+  );
+};
+
+export default PaymentButton;

components/billing/ProductPricing.tsx

@@ -0,0 +1,120 @@
+import router from 'next/router';
+import toast from 'react-hot-toast';
+import { Button } from 'react-daisyui';
+import { useTranslation } from 'next-i18next';
+
+import useTeam from 'hooks/useTeam';
+import { Price } from '@prisma/client';
+import PaymentButton from './PaymentButton';
+import { Service, Subscription } from '@prisma/client';
+
+interface ProductPricingProps {
+  plans: any[];
+  subscriptions: (Subscription & { product: Service })[];
+}
+
+const ProductPricing = ({ plans, subscriptions }: ProductPricingProps) => {
+  const { team } = useTeam();
+  const { t } = useTranslation('common');
+
+  const initiateCheckout = async (priceId: string, quantity?: number) => {
+    const res = await fetch(
+      `/api/teams/${team?.slug}/payments/create-checkout-session`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ priceId, quantity }),
+      }
+    );
+
+    const data = await res.json();
+
+    if (data?.data?.url) {
+      router.push(data.data.url);
+    } else {
+      toast.error(
+        data?.error?.message ||
+          data?.error?.raw?.message ||
+          t('stripe-checkout-fallback-error')
+      );
+    }
+  };
+
+  const hasActiveSubscription = (price: Price) =>
+    subscriptions.some((s) => s.priceId === price.id);
+
+  return (
+    <section className="py-3">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+        {plans.map((plan) => {
+          return (
+            <div
+              className="relative rounded-md bg-white border border-gray-200"
+              key={plan.id}
+            >
+              <div className="p-8">
+                <div className="flex items-center space-x-2">
+                  <h3 className="font-display text-2xl font-bold text-black">
+                    {plan.name}
+                  </h3>
+                </div>
+                <p className="mt-2 text-gray-500 h-10">{plan.description}</p>
+              </div>
+              <div className="flex justify-center flex-col gap-2 border-b border-t border-gray-200 bg-gray-50 px-8 py-5 h-32">
+                {plan.prices.map((price: Price) =>
+                  hasActiveSubscription(price) ? (
+                    <Button
+                      key={price.id}
+                      variant="outline"
+                      size="md"
+                      fullWidth
+                      disabled
+                      className="rounded-full"
+                    >
+                      {t('current')}
+                    </Button>
+                  ) : (
+                    <PaymentButton
+                      key={price.id}
+                      plan={plan}
+                      price={price}
+                      initiateCheckout={initiateCheckout}
+                    />
+                  )
+                )}
+              </div>
+              <ul className="mb-10 mt-5 space-y-4 px-8">
+                {plan.features.map((feature: string) => (
+                  <li className="flex space-x-4" key={`${plan.id}-${feature}`}>
+                    <svg
+                      className="h-6 w-6 flex-none text-black"
+                      viewBox="0 0 24 24"
+                      width={24}
+                      height={24}
+                      fill="none"
+                      shapeRendering="geometricPrecision"
+                    >
+                      <path
+                        d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
+                        fill="currentColor"
+                      />
+                      <path
+                        d="M8 11.8571L10.5 14.3572L15.8572 9"
+                        stroke="white"
+                      />
+                    </svg>
+                    <p className="text-gray-600">{feature}</p>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+};
+
+export default ProductPricing;

components/billing/Subscriptions.tsx

@@ -0,0 +1,45 @@
+import { useTranslation } from 'next-i18next';
+
+import { Service, Subscription } from '@prisma/client';
+
+interface SubscriptionsProps {
+  subscriptions: (Subscription & { product: Service })[];
+}
+
+const Subscriptions = ({ subscriptions }: SubscriptionsProps) => {
+  const { t } = useTranslation('common');
+
+  if (subscriptions.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-3">
+      <h2 className="card-title text-xl font-medium leading-none tracking-tight">
+        {t('subscriptions')}
+      </h2>
+      <table className="table w-full text-sm border">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>{t('plan')}</th>
+            <th>{t('start-date')}</th>
+            <th>{t('end-date')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {subscriptions.map((subscription) => (
+            <tr key={subscription.id}>
+              <td>{subscription.id}</td>
+              <td>{subscription.product.name}</td>
+              <td>{new Date(subscription.startDate).toLocaleDateString()}</td>
+              <td>{new Date(subscription.endDate).toLocaleDateString()}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default Subscriptions;

components/team/TeamTab.tsx

@@ -5,6 +5,7 @@ import {
   PaperAirplaneIcon,
   ShieldExclamationIcon,
   UserPlusIcon,
+  BanknotesIcon,
 } from '@heroicons/react/24/outline';
 import type { Team } from '@prisma/client';
 import classNames from 'classnames';
@@ -76,6 +77,18 @@ const TeamTab = ({ activeTab, team, heading, teamFeatures }: TeamTabProps) => {
     });
   }
 
+  if (
+    teamFeatures.payments &&
+    canAccess('team_payments', ['create', 'update', 'read', 'delete'])
+  ) {
+    navigations.push({
+      name: 'Billing',
+      href: `/teams/${team.slug}/billing`,
+      active: activeTab === 'payments',
+      icon: BanknotesIcon,
+    });
+  }
+
   if (
     teamFeatures.webhook &&
     canAccess('team_webhook', ['create', 'update', 'read', 'delete'])