Payments app design fixes

apps/backend/prisma/seed.ts

@@ -329,7 +329,10 @@ export async function seed() {
       },
     });
     if (!existingGrowthSub) {
-      const firstPriceId = Object.keys(growthProduct.prices)[0] ?? null;
+      const firstPriceId = Object.keys(growthProduct.prices)[0];
+      if (!firstPriceId) {
+        throw new Error("Internal seed invariant violated: the Growth product must have at least one price configured before seeding the internal team subscription.");
+      }
       const now = new Date();
       // Clone to ensure the stored JSON snapshot is independent of the config object
       // (mirrors the pattern used in seed-dummy-data.ts).

apps/backend/src/app/api/latest/payments/products/[customer_type]/[customer_id]/switch/route.ts

@@ -1,4 +1,3 @@
-import { SubscriptionStatus } from "@/generated/prisma/client";
 import { ensureClientCanAccessCustomer, ensureCustomerExists, getDefaultCardPaymentMethodSummary, getStripeCustomerForCustomerOrNull, isActiveSubscription, isAddOnProduct } from "@/lib/payments";
 import { bulldozerWriteSubscription } from "@/lib/payments/bulldozer-dual-write";
 import { getOwnedProductsForCustomer, getSubscriptionMapForCustomer } from "@/lib/payments/customer-data";

apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/playground/page-client.tsx

@@ -52,7 +52,7 @@ import {
   type DesignDialogVariant,
   DesignInput,
   DesignPillToggle,
-} from "@stackframe/dashboard-ui-components";
+} from "@/components/design-components";
 import { useMemo, useRef, useState } from "react";
 
 // ─── Types ───────────────────────────────────────────────────────────────────
@@ -463,6 +463,9 @@ export default function PageClient() {
   const [dialogShowFooter, setDialogShowFooter] = useState(true);
   const [dialogShowIcon, setDialogShowIcon] = useState(true);
   const [dialogHideTopClose, setDialogHideTopClose] = useState(false);
+  const [dialogUseCustomHeader, setDialogUseCustomHeader] = useState(false);
+  const [dialogNoBodyPadding, setDialogNoBodyPadding] = useState(false);
+  const [dialogAccentClassNames, setDialogAccentClassNames] = useState(false);
 
   // Editable Grid
   const [gridCols, setGridCols] = useState<1 | 2>(2);
@@ -1016,6 +1019,15 @@ export default function PageClient() {
         )
       ) : undefined;
 
+      const customHeader = dialogUseCustomHeader ? (
+        <div className="flex items-center gap-3 px-6 py-4 bg-gradient-to-r from-indigo-500/15 via-fuchsia-500/10 to-transparent border-b border-foreground/[0.06]">
+          <div className="h-8 w-8 rounded-full bg-foreground/10 grid place-items-center text-xs font-semibold">JD</div>
+          <div className="min-w-0">
+            <div className="text-sm font-semibold truncate">Custom header block</div>
+            <div className="text-xs text-muted-foreground truncate">Renders instead of the default title/description region.</div>
+          </div>
+        </div>
+      ) : undefined;
       return (
         <DesignDialog
           size={dialogSize}
@@ -1024,8 +1036,15 @@ export default function PageClient() {
           title={dialogTitle || "Dialog"}
           description={dialogDescription || undefined}
           headerContent={headerContent}
+          customHeader={customHeader}
           footer={footer}
           hideTopCloseButton={dialogHideTopClose}
+          noBodyPadding={dialogNoBodyPadding}
+          className={dialogAccentClassNames ? "ring-2 ring-indigo-500/40" : undefined}
+          overlayClassName={dialogAccentClassNames ? "bg-indigo-950/40" : undefined}
+          headerClassName={dialogAccentClassNames ? "bg-indigo-500/5" : undefined}
+          bodyClassName={dialogAccentClassNames ? "bg-foreground/[0.02]" : undefined}
+          footerClassName={dialogAccentClassNames ? "bg-foreground/[0.02]" : undefined}
           trigger={<DesignButton size="sm">{dialogTriggerLabel}</DesignButton>}
         >
           {body}
@@ -1822,6 +1841,15 @@ export default function PageClient() {
           <PropField label="Top-right Close">
             <BoolToggle value={!dialogHideTopClose} onChange={(v) => setDialogHideTopClose(!v)} on="Show" off="Hide" />
           </PropField>
+          <PropField label="Custom Header">
+            <BoolToggle value={dialogUseCustomHeader} onChange={setDialogUseCustomHeader} on="On" off="Off" />
+          </PropField>
+          <PropField label="No Body Padding">
+            <BoolToggle value={dialogNoBodyPadding} onChange={setDialogNoBodyPadding} on="On" off="Off" />
+          </PropField>
+          <PropField label="Accent classNames">
+            <BoolToggle value={dialogAccentClassNames} onChange={setDialogAccentClassNames} on="On" off="Off" />
+          </PropField>
         </div>
       );
     }
@@ -2309,9 +2337,16 @@ export default function PageClient() {
         : dialogShape === "wide"
           ? `\n  <DesignAlert variant=\"info\" description=\"Wide-form body content\" />\n  {/* tester form */}`
           : `\n  <p className=\"text-sm\">Body content lives here.</p>`;
+      const customHeaderProp = dialogUseCustomHeader
+        ? `\n  customHeader={\n    <div className=\"flex items-center gap-3 px-6 py-4 ...\">\n      {/* custom header content; replaces title/description region */}\n    </div>\n  }`
+        : "";
+      const noBodyPaddingProp = dialogNoBodyPadding ? `\n  noBodyPadding` : "";
+      const classNameProps = dialogAccentClassNames
+        ? `\n  className=\"ring-2 ring-indigo-500/40\"\n  overlayClassName=\"bg-indigo-950/40\"\n  headerClassName=\"bg-indigo-500/5\"\n  bodyClassName=\"bg-foreground/[0.02]\"\n  footerClassName=\"bg-foreground/[0.02]\"`
+        : "";
       return `<DesignDialog
   size="${dialogSize}"${variantProp}${iconProp}
-  title="${escapeAttr(dialogTitle || "Dialog")}"${descProp}${headerContentProp}${footerProp}${hideCloseProp}
+  title="${escapeAttr(dialogTitle || "Dialog")}"${descProp}${headerContentProp}${customHeaderProp}${footerProp}${hideCloseProp}${noBodyPaddingProp}${classNameProps}
   trigger={<DesignButton size="sm">${escapeAttr(dialogTriggerLabel)}</DesignButton>}
 >${bodySnippet}
 </DesignDialog>`;

apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/projects/page-client.tsx

@@ -431,6 +431,7 @@ function ProjectsListPage() {
 
           {!isRemoteDevelopmentEnvironment && (
             <Button
+              className="rounded-xl"
               onClick={async () => {
                 if (isLocalEmulator) {
                   setOpenConfigFileDialog(true);

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/page-client.tsx

@@ -302,23 +302,19 @@ function MethodToggleRow({
   const iconSize = density === "card" ? 20 : 18;
 
   return (
-    <div
-      role="group"
+    <Label
+      htmlFor={id}
       className={`flex items-center gap-3 cursor-pointer ${innerRing} ${padding}`}
-      onClick={(e) => {
-        if (e.target instanceof HTMLElement && e.target.closest('[role="switch"]')) return;
-        onCheckedChange(!checked);
-      }}
     >
       <div className="p-2 rounded-lg bg-foreground/[0.06] dark:bg-foreground/[0.04] shrink-0">
         <Icon size={iconSize} className="text-foreground/70 dark:text-muted-foreground" aria-hidden="true" />
       </div>
       <div className="flex-1 min-w-0">
-        <Label htmlFor={id} className="text-sm font-medium text-foreground truncate cursor-pointer">{label}</Label>
+        <div className="text-sm font-medium text-foreground truncate">{label}</div>
         {hint && <div className="text-xs text-muted-foreground mt-0.5">{hint}</div>}
       </div>
       <Switch id={id} checked={checked} onCheckedChange={onCheckedChange} aria-label={label} />
-    </div>
+    </Label>
   );
 }
 
@@ -456,8 +452,7 @@ function useEmailVerificationToggle() {
       okButton={{
         label: "Apply Change",
         onClick: async () => {
-          if (pendingChange == null) return;
-          await pendingChange.onConfirm();
+          await pendingChange?.onConfirm();
         },
       }}
       cancelButton={{ label: "Cancel" }}

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/page-client.tsx

@@ -16,7 +16,7 @@ import {
   DesignDialogClose,
   DesignInput,
   DesignPillToggle,
-} from "@stackframe/dashboard-ui-components";
+} from "@/components/design-components";
 import {
   DesignEditableGrid,
   type DesignEditableGridItem,

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/layout.tsx

@@ -63,8 +63,8 @@ function PaymentsLayoutInner({ children }: { children: React.ReactNode }) {
 
   if (!stripeAccountInfo && !project.isDevelopmentEnvironment) {
     return (
-      <div className="mx-auto flex w-full max-w-sm min-h-[calc(100vh-4.5rem)] items-center justify-center px-3 py-8">
-        <Card className="w-full">
+      <div className="flex flex-1 w-full items-center justify-center self-stretch px-3 py-8">
+        <Card className="w-full max-w-sm">
           <CardContent className="p-8 text-center">
             <div className="mx-auto mb-4 grid h-12 w-12 place-items-center rounded-full bg-primary/10 text-primary">
               <WalletIcon className="h-6 w-6" />

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/product-lines/page-client.tsx

@@ -723,7 +723,7 @@ function OnboardingSlideshow() {
 
   return (
     <PageLayout>
-      <div className="flex flex-col items-center h-full">
+      <div className="flex flex-1 min-h-0 flex-col items-center justify-center">
         {/* Slide content container - fills available space */}
         <div className="relative w-full flex-1 min-h-0">
           {slides.map((s, index) => (

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/[productId]/edit/page-client.tsx

@@ -381,6 +381,13 @@ function EditProductForm({ productId, existingProduct }: { productId: string, ex
                 variant="form"
                 onMakeFree={() => {
                   setPrices(createFreePrice());
+                  if (errors.prices) {
+                    setErrors(prev => {
+                      const newErrors = { ...prev };
+                      delete newErrors.prices;
+                      return newErrors;
+                    });
+                  }
                 }}
               />
             </section>

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/create-product-line-dialog.tsx

@@ -1,8 +1,15 @@
 "use client";
 
-import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Label, SimpleTooltip, Typography } from "@/components/ui";
+import {
+  DesignButton,
+  DesignDialog,
+  DesignDialogClose,
+  DesignInput,
+} from "@/components/design-components";
+import { Label, SimpleTooltip, Typography } from "@/components/ui";
+import { FolderOpenIcon } from "@phosphor-icons/react";
 import { getUserSpecifiedIdErrorMessage, isValidUserSpecifiedId, sanitizeUserSpecifiedId } from "@stackframe/stack-shared/dist/schema-fields";
-import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
 import { useState } from "react";
 
 // Helper to convert display name to ID format
@@ -25,7 +32,7 @@ export function CreateProductLineDialog({ open, onOpenChange, onCreate }: Create
   const [hasManuallyEditedId, setHasManuallyEditedId] = useState(false);
   const [errors, setErrors] = useState<{ id?: string, displayName?: string }>({});
 
-  const validateAndCreate = () => {
+  const validateAndCreate = async () => {
     const newErrors: { id?: string, displayName?: string } = {};
 
     // Validate display name
@@ -45,9 +52,10 @@ export function CreateProductLineDialog({ open, onOpenChange, onCreate }: Create
       return;
     }
 
-    runAsynchronously(onCreate({ id: productLineId.trim(), displayName: displayName.trim() }));
+    // Await onCreate before resetting/closing so the dialog stays open with
+    // the user's input intact if creation fails.
+    await onCreate({ id: productLineId.trim(), displayName: displayName.trim() });
 
-    // Reset form
     setDisplayName("");
     setProductLineId("");
     setHasManuallyEditedId(false);
@@ -64,80 +72,82 @@ export function CreateProductLineDialog({ open, onOpenChange, onCreate }: Create
   };
 
   return (
-    <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>Create Product Line</DialogTitle>
-          <DialogDescription>
-            Product lines allow you to organize related products. Customers can only have one active product from each product line at a time (except for add-ons).
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="grid gap-4 py-4">
-          <div className="grid gap-2">
-            <Label htmlFor="display-name">
-              <SimpleTooltip tooltip="This is how the product line will be displayed to users">
-                Display Name
-              </SimpleTooltip>
-            </Label>
-            <Input
-              id="display-name"
-              value={displayName}
-              onChange={(e) => {
-                const value = e.target.value;
-                setDisplayName(value);
-                setErrors(prev => ({ ...prev, displayName: undefined }));
-                // Auto-generate ID from display name if not manually edited
-                if (!hasManuallyEditedId) {
-                  setProductLineId(toIdFormat(value));
-                  setErrors(prev => ({ ...prev, id: undefined }));
-                }
-              }}
-              placeholder="e.g., Pricing Tiers"
-              className={errors.displayName ? "border-destructive" : ""}
-            />
-            {errors.displayName && (
-              <Typography type="label" className="text-destructive">
-                {errors.displayName}
-              </Typography>
-            )}
-          </div>
-
-          <div className="grid gap-2">
-            <Label htmlFor="product-line-id">
-              <SimpleTooltip tooltip="This is the unique identifier for your product line, used in code">
-                Product Line ID
-              </SimpleTooltip>
-            </Label>
-            <Input
-              id="product-line-id"
-              value={productLineId}
-              onChange={(e) => {
-                const value = sanitizeUserSpecifiedId(e.target.value);
-                setProductLineId(value);
-                setHasManuallyEditedId(true);
+    <DesignDialog
+      open={open}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) handleClose();
+      }}
+      size="md"
+      icon={FolderOpenIcon}
+      title="Create Product Line"
+      description="Product lines allow you to organize related products. Customers can only have one active product from each product line at a time (except for add-ons)."
+      footer={(
+        <>
+          <DesignDialogClose asChild>
+            <DesignButton variant="secondary" size="sm" type="button">Cancel</DesignButton>
+          </DesignDialogClose>
+          <DesignButton size="sm" type="button" onClick={() => runAsynchronouslyWithAlert(validateAndCreate())}>
+            Create Product Line
+          </DesignButton>
+        </>
+      )}
+    >
+      <div className="grid gap-4">
+        <div className="grid gap-2">
+          <Label htmlFor="display-name">
+            <SimpleTooltip tooltip="This is how the product line will be displayed to users">
+              Display Name
+            </SimpleTooltip>
+          </Label>
+          <DesignInput
+            id="display-name"
+            value={displayName}
+            onChange={(e) => {
+              const value = e.target.value;
+              setDisplayName(value);
+              setErrors(prev => ({ ...prev, displayName: undefined }));
+              if (!hasManuallyEditedId) {
+                setProductLineId(toIdFormat(value));
                 setErrors(prev => ({ ...prev, id: undefined }));
-              }}
-              placeholder="e.g., pricing-tiers"
-              className={`font-mono text-sm ${errors.id ? "border-destructive" : ""}`}
-            />
-            {errors.id && (
-              <Typography type="label" className="text-destructive">
-                {errors.id}
-              </Typography>
-            )}
-          </div>
+              }
+            }}
+            placeholder="e.g., Pricing Tiers"
+            size="md"
+            className={errors.displayName ? "border-destructive focus-visible:ring-destructive/30" : ""}
+          />
+          {errors.displayName && (
+            <Typography type="label" className="text-destructive text-xs">
+              {errors.displayName}
+            </Typography>
+          )}
         </div>
 
-        <DialogFooter>
-          <Button variant="outline" onClick={handleClose}>
-            Cancel
-          </Button>
-          <Button onClick={validateAndCreate}>
-            Create Product Line
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        <div className="grid gap-2">
+          <Label htmlFor="product-line-id">
+            <SimpleTooltip tooltip="This is the unique identifier for your product line, used in code">
+              Product Line ID
+            </SimpleTooltip>
+          </Label>
+          <DesignInput
+            id="product-line-id"
+            value={productLineId}
+            onChange={(e) => {
+              const value = sanitizeUserSpecifiedId(e.target.value);
+              setProductLineId(value);
+              setHasManuallyEditedId(true);
+              setErrors(prev => ({ ...prev, id: undefined }));
+            }}
+            placeholder="e.g., pricing-tiers"
+            size="md"
+            className={`font-mono text-sm ${errors.id ? "border-destructive focus-visible:ring-destructive/30" : ""}`}
+          />
+          {errors.id && (
+            <Typography type="label" className="text-destructive text-xs">
+              {errors.id}
+            </Typography>
+          )}
+        </div>
+      </div>
+    </DesignDialog>
   );
 }