improvement: new custom domain flow

apps/web/actions/organization/update-domain.ts

@@ -14,6 +14,13 @@ export async function updateDomain(domain: string, organizationId: string) {
     throw new Error("Unauthorized");
   }
 
+  //check user subscription to prevent abuse
+  const isSubscribed = user.stripeSubscriptionStatus === "active";
+
+  if (!isSubscribed) {
+    throw new Error("User is not subscribed");
+  }
+
   const [organization] = await db()
     .select()
     .from(organizations)
@@ -67,6 +74,5 @@ export async function updateDomain(domain: string, organizationId: string) {
     if (error instanceof Error) {
       throw new Error(error.message);
     }
-    throw new Error("Failed to update domain");
   }
 }

apps/web/app/(org)/dashboard/_components/Confetti.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import type {
+  GlobalOptions as ConfettiGlobalOptions,
+  CreateTypes as ConfettiInstance,
+  Options as ConfettiOptions,
+} from "canvas-confetti";
+import confetti from "canvas-confetti";
+import type { ReactNode } from "react";
+import React, {
+  createContext,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from "react";
+
+type Api = {
+  fire: (options?: ConfettiOptions) => void;
+};
+
+type Props = React.ComponentPropsWithRef<"canvas"> & {
+  options?: ConfettiOptions;
+  globalOptions?: ConfettiGlobalOptions;
+  manualstart?: boolean;
+  children?: ReactNode;
+};
+
+export type ConfettiRef = Api | null;
+
+const ConfettiContext = createContext<Api>({} as Api);
+
+// Define component first
+const ConfettiComponent = forwardRef<ConfettiRef, Props>((props, ref) => {
+  const {
+    options,
+    globalOptions = { resize: true, useWorker: true },
+    manualstart = false,
+    children,
+    ...rest
+  } = props;
+  const instanceRef = useRef<ConfettiInstance | null>(null);
+
+  const canvasRef = useCallback(
+    (node: HTMLCanvasElement) => {
+      if (node !== null) {
+        if (instanceRef.current) return;
+        instanceRef.current = confetti.create(node, {
+          ...globalOptions,
+          resize: true,
+        });
+      } else {
+        if (instanceRef.current) {
+          instanceRef.current.reset();
+          instanceRef.current = null;
+        }
+      }
+    },
+    [globalOptions],
+  );
+
+  const fire = useCallback(
+    async (opts = {}) => {
+      try {
+        await instanceRef.current?.({ ...options, ...opts });
+      } catch (error) {
+        console.error("Confetti error:", error);
+      }
+    },
+    [options],
+  );
+
+  const api = useMemo(
+    () => ({
+      fire,
+    }),
+    [fire],
+  );
+
+  useImperativeHandle(ref, () => api, [api]);
+
+  useEffect(() => {
+    if (!manualstart) {
+      (async () => {
+        try {
+          await fire();
+        } catch (error) {
+          console.error("Confetti effect error:", error);
+        }
+      })();
+    }
+  }, [manualstart, fire]);
+
+  return (
+    <ConfettiContext.Provider value={api}>
+      <canvas ref={canvasRef} {...rest} />
+      {children}
+    </ConfettiContext.Provider>
+  );
+});
+
+ConfettiComponent.displayName = "Confetti";
+
+export const Confetti = ConfettiComponent;
+

apps/web/app/(org)/dashboard/_components/Notifications/Skeleton.tsx

@@ -60,7 +60,7 @@ export const NotificationsSkeleton = ({ count = 5 }: { count?: number }) => {
       {Array.from({ length: count }).map((_, i) => (
         <NotificationItemSkeleton
           key={i}
-          className={clsx(i !== count - 1 && "border-b")}
+          className={clsx(i !== count - 1 && "border-b border-gray-3")}
         />
       ))}
     </div>

apps/web/app/(org)/dashboard/settings/organization/components/CapSettingsCard.tsx

@@ -48,7 +48,7 @@ const NotificationTabSettings = [
   {
     label: "Setting 6",
     description: "Set the default random settings",
-  }
+  },
 ]