update UI

dubinc · Nov 22, 2024 · 0d478fb · 0d478fb
1 parent 394f64e
commit 0d478fb
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 20 deletions.
diff --git a/apps/web/app/api/domains/[domain]/route.ts b/apps/web/app/api/domains/[domain]/route.ts
@@ -92,9 +92,10 @@ export const PATCH = withWorkspace(
       }
     }
 
-    const logoUploaded = logo
-      ? await storage.upload(`logos/${domainId}_${nanoid(7)}`, logo)
-      : null;
+    const logoUploaded =
+      logo && workspace.plan !== "free"
+        ? await storage.upload(`logos/${domainId}_${nanoid(7)}`, logo)
+        : null;
 
     const domainRecord = await prisma.domain.update({
       where: {
@@ -107,8 +108,8 @@ export const PATCH = withWorkspace(
         ...(workspace.plan != "free" && {
           expiredUrl,
           notFoundUrl,
+          ...(logoUploaded && { logo: logoUploaded.url }),
         }),
-        ...(logoUploaded && { logo: logoUploaded.url }),
       },
       include: {
         registeredDomain: true,

diff --git a/apps/web/app/api/domains/route.ts b/apps/web/app/api/domains/route.ts
@@ -126,9 +126,10 @@ export const POST = withWorkspace(
 
     const domainId = createId({ prefix: "dom_" });
 
-    const logoUploaded = logo
-      ? await storage.upload(`logos/${domainId}_${nanoid(7)}`, logo)
-      : null;
+    const logoUploaded =
+      logo && workspace.plan !== "free"
+        ? await storage.upload(`logos/${domainId}_${nanoid(7)}`, logo)
+        : null;
 
     const [domainRecord, _] = await Promise.all([
       prisma.domain.create({
@@ -141,8 +142,8 @@ export const POST = withWorkspace(
           ...(workspace.plan !== "free" && {
             expiredUrl,
             notFoundUrl,
+            ...(logoUploaded && { logo: logoUploaded.url }),
           }),
-          ...(logoUploaded && { logo: logoUploaded.url }),
         },
       }),
 

diff --git a/apps/web/lib/swr/use-domain.ts b/apps/web/lib/swr/use-domain.ts
@@ -0,0 +1,18 @@
+import { fetcher } from "@dub/utils";
+import useSWR from "swr";
+import { DomainProps } from "../types";
+import useWorkspace from "./use-workspace";
+
+export default function useDomain(slug: string) {
+  const { id: workspaceId } = useWorkspace();
+
+  const { data: domain, error } = useSWR<DomainProps>(
+    workspaceId && slug && `/api/domains/${slug}?workspaceId=${workspaceId}`,
+    fetcher,
+  );
+
+  return {
+    ...domain,
+    loading: !domain && !error,
+  };
+}
diff --git a/apps/web/ui/domains/add-edit-domain-form.tsx b/apps/web/ui/domains/add-edit-domain-form.tsx
@@ -30,7 +30,7 @@ export function AddEditDomainForm({
   showAdvancedOptions?: boolean;
   className?: string;
 }) {
-  const { id: workspaceId } = useWorkspace();
+  const { id: workspaceId, plan } = useWorkspace();
 
   const isDubProvisioned = !!props?.registeredDomain;
 
@@ -155,7 +155,7 @@ export function AddEditDomainForm({
       className={cn("flex flex-col gap-y-6 text-left", className)}
     >
       <div>
-        <div className="mb-4 flex items-center justify-center">
+        <div className="mb-4 flex flex-col items-center justify-center gap-2">
           <FileUpload
             accept="images"
             className="h-20 w-20 rounded-full border border-gray-300"
@@ -169,7 +169,11 @@ export function AddEditDomainForm({
             content={null}
             maxFileSizeMB={2}
             targetResolution={{ width: 240, height: 240 }}
+            disabled={plan === "free"}
           />
+          <div>
+            <ProBadgeTooltip content="Upload a custom logo to use on QR codes for links under this domain." />
+          </div>
         </div>
 
         <div className="flex items-center justify-between">

diff --git a/apps/web/ui/modals/link-builder/qr-code-preview.tsx b/apps/web/ui/modals/link-builder/qr-code-preview.tsx
@@ -1,3 +1,4 @@
+import useDomain from "@/lib/swr/use-domain";
 import { QRCode } from "@/ui/shared/qr-code";
 import {
   Button,
@@ -7,8 +8,7 @@ import {
   useMediaQuery,
 } from "@dub/ui";
 import { Pen2, QRCode as QRCodeIcon } from "@dub/ui/src/icons";
-import { linkConstructor } from "@dub/utils";
-import { DUB_QR_LOGO } from "@dub/utils/src/constants";
+import { DUB_QR_LOGO, linkConstructor } from "@dub/utils";
 import { AnimatePresence, motion } from "framer-motion";
 import { useContext, useMemo } from "react";
 import { useFormContext } from "react-hook-form";
@@ -18,14 +18,15 @@ import { QRCodeDesign, useLinkQRModal } from "../link-qr-modal";
 
 export function QRCodePreview() {
   const { isMobile } = useMediaQuery();
-  const { workspaceLogo, workspacePlan, workspaceId } =
-    useContext(LinkModalContext);
+  const { workspacePlan, workspaceId } = useContext(LinkModalContext);
 
   const { watch } = useFormContext<LinkFormData>();
   const { key: rawKey, domain: rawDomain } = watch();
   const [key] = useDebounce(rawKey, 500);
   const [domain] = useDebounce(rawDomain, 500);
 
+  const { logo: domainLogo } = useDomain(rawDomain);
+
   const [data, setData] = useLocalStorage<QRCodeDesign>(
     `qr-code-design-${workspaceId}`,
     {
@@ -39,9 +40,7 @@ export function QRCodePreview() {
   }, [key, domain]);
 
   const hideLogo = data.hideLogo && workspacePlan !== "free";
-
-  const logo =
-    workspaceLogo && workspacePlan !== "free" ? workspaceLogo : DUB_QR_LOGO;
+  const logo = domainLogo || DUB_QR_LOGO;
 
   const { LinkQRModal, setShowLinkQRModal } = useLinkQRModal({
     props: {

diff --git a/apps/web/ui/modals/link-qr-modal.tsx b/apps/web/ui/modals/link-qr-modal.tsx
@@ -1,4 +1,5 @@
 import { getQRAsCanvas, getQRAsSVGDataUri, getQRData } from "@/lib/qr";
+import useDomain from "@/lib/swr/use-domain";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { QRLinkProps } from "@/lib/types";
 import { QRCode } from "@/ui/shared/qr-code";
@@ -90,9 +91,10 @@ function LinkQRModalInner({
   showLinkQRModal: boolean;
   setShowLinkQRModal: Dispatch<SetStateAction<boolean>>;
 } & LinkQRModalProps) {
-  const { logo: workspaceLogo, plan, id: workspaceId, slug } = useWorkspace();
+  const { plan, id: workspaceId, slug } = useWorkspace();
   const id = useId();
   const { isMobile } = useMediaQuery();
+  const { logo: domainLogo } = useDomain(props.domain);
 
   const url = useMemo(() => {
     return props.key && props.domain
@@ -107,10 +109,10 @@ function LinkQRModalInner({
       hideLogo: false,
     },
   );
-  const [data, setData] = useState(dataPersisted);
 
-  const logo = workspaceLogo && plan !== "free" ? workspaceLogo : DUB_QR_LOGO;
+  const [data, setData] = useState(dataPersisted);
 
+  const logo = domainLogo || DUB_QR_LOGO;
   const hideLogo = data.hideLogo && plan !== "free";
 
   const qrData = useMemo(