Makes Stripe integration optional

.env.example

@@ -26,7 +26,9 @@ DATABASE_NAME=YOUR_DB_NAME
 RESEND_API_KEY=re_
 TEST_EMAIL_ADDRESS='delivered@resend.dev' 
 
-# Stripe
+# -----------------------------------------------------------------------------
+# OPTIONAL: Stripe (Payments)
+# -----------------------------------------------------------------------------
 STRIPE_API_KEY="sk_test_"
 STRIPE_WEBHOOK_SECRET="whsec_"
 NEXT_PUBLIC_STRIPE_STD_PRODUCT_ID="prod_"
@@ -51,4 +53,4 @@ PLAID_CLIENT_SECRET=csec_
 # Get your Vercel KV credentials here: https://vercel.com/docs/storage/vercel-kv/quickstart#quickstart
 # -----------------------------------------------------------------------------
 KV_REST_API_URL=
-KV_REST_API_TOKEN=
+KV_REST_API_TOKEN=

README.md

@@ -77,8 +77,8 @@ cp .env.example .env.local
    1. Create [Clerk](https://clerk.com) Account
    2. Create [Planet Scale](https://planetscale.com/) Account
    3. Create [Resend](https://resend.com) Account
-   4. Create [Stripe](https://stripe.com) Account and download [Stripe CLI](https://docs.stripe.com/stripe-cli)
-   5. Create [Edge Store](https://edgestore.dev) Account
+   4. Create [Edge Store](https://edgestore.dev) Account
+   5. OPTIONAL: Create [Stripe](https://stripe.com) Account and download [Stripe CLI](https://docs.stripe.com/stripe-cli)
 
 5. Start the development server from either yarn or turbo:
 
@@ -91,21 +91,6 @@ cd apps/www
 pnpm dev
 ```
 
-## Stripe
-
-To set up Stripe locally with environment variables:
-
-1. Create a [Stripe](https://stripe.com/in) account.
-2. After signing in, go to the dashboard and switch to Test mode.
-3. In the dashboard, switch to the API keys section.
-4. Reveal your secret key and paste it into your `.env.local` file.
-5. For the webhook key, switch to the Webhooks tab, add an endpoint to reveal the secret key.
-6. To get the `PRODUCT_ID` and `PRICE_ID`, head over to [Stripe's API Docs](https://docs.stripe.com/api/prices/object).
-7. From the docs, use the API with your `STRIPE_API_KEY` to create a product & price object.
-8. The response object from the API contains two keys: `id` and `product`.
-9. Use the `id` as your `PRICE_ID` and `product` as your `PRODUCT_ID`.
-10. You can use the same keys for the STD and PRO variables.
-
 ## Database
 
 This project uses MySQL database on PlanetScale. To setup a DB for your local dev:
@@ -130,6 +115,22 @@ Please be aware that the Resend is designed to send test emails exclusively to t
 
 The default setting for `TEST_EMAIL_ADDRESS` is `delivered@resend.dev` but you have the option to change it to the email address that is associated with your Resend account.
 
+## Stripe
+
+To set up Stripe locally with environment variables:
+
+1. Create a [Stripe](https://stripe.com/in) account.
+2. After signing in, go to the dashboard and switch to Test mode.
+3. In the dashboard, switch to the API keys section.
+4. Reveal your secret key and paste it into your `.env.local` file.
+5. For the webhook key, switch to the Webhooks tab, add an endpoint to reveal the secret key.
+6. To get the `PRODUCT_ID` and `PRICE_ID`, head over to [Stripe's API Docs](https://docs.stripe.com/api/prices/object).
+7. From the docs, use the API with your `STRIPE_API_KEY` to create a product & price object.
+8. The response object from the API contains two keys: `id` and `product`.
+9. Use the `id` as your `PRICE_ID` and `product` as your `PRODUCT_ID`.
+10. You can use the same keys for the STD and PRO variables.
+
+
 ## Roadmap
 
 - [x] ~Initial setup~

apps/www/app/(dashboard)/dashboard/_components/workspace-switcher.tsx

@@ -5,13 +5,12 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { api } from "@/trpc/client";
 import { useOrganization, useOrganizationList, useUser } from "@clerk/nextjs";
-import { toDecimal } from "dinero.js";
 import { Check, ChevronDown, ChevronsUpDown, PlusCircle } from "lucide-react";
 
 import type { PurchaseOrg } from "@projectx/validators";
 import { purchaseOrgSchema } from "@projectx/validators";
 
-import { currencySymbol } from "@/lib/currency";
+
 import { cn } from "@/lib/utils";
 import { useZodForm } from "@/lib/zod-form";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
@@ -49,8 +48,6 @@ import {
 } from "@/components/ui/popover";
 import {
   Select,
-  SelectContent,
-  SelectItem,
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
@@ -244,7 +241,8 @@ export function WorkspaceSwitcher({ isCollapsed }: WorkspaceSwitcherProps) {
 }
 
 function NewOrganizationDialog(props: { closeDialog: () => void }) {
-  const plans = React.use(api.stripe.plans.query());
+  // Removes need for Stripe integration while in development
+  // const plans = React.use(api.stripe.plans.query());
 
   const form = useZodForm({ schema: purchaseOrgSchema });
 
@@ -316,6 +314,9 @@ function NewOrganizationDialog(props: { closeDialog: () => void }) {
                       <SelectValue placeholder="Select a plan" />
                     </SelectTrigger>
                   </FormControl>
+
+                  {/* Removes need for Stripe integration while in development
+
                   <SelectContent>
                     {plans.map((plan) => (
                       <SelectItem key={plan.priceId} value={plan.priceId}>
@@ -330,7 +331,7 @@ function NewOrganizationDialog(props: { closeDialog: () => void }) {
                         </span>
                       </SelectItem>
                     ))}
-                  </SelectContent>
+                  </SelectContent> */}
                 </Select>
                 <FormMessage />
               </FormItem>