Merge branch 'main' into program-lander

apps/web/app/api/qr/route.tsx

@@ -18,7 +18,7 @@ export async function GET(req: NextRequest) {
   try {
     const params = getSearchParams(req.url);
 
-    let { url, logo, size, level, fgColor, bgColor, hideLogo, includeMargin } =
+    let { url, logo, size, level, fgColor, bgColor, margin, hideLogo } =
       getQRCodeQuerySchema.parse(params);
 
     await ratelimitOrThrow(req, "qr");
@@ -49,9 +49,9 @@ export async function GET(req: NextRequest) {
         value: url,
         size,
         level,
-        includeMargin,
         fgColor,
         bgColor,
+        margin,
         ...(logo
           ? {
               imageSettings: {

apps/web/app/partners.dub.co/(dashboard)/account/settings/layout.tsx

@@ -0,0 +1,11 @@
+import { MaxWidthWrapper } from "@dub/ui";
+
+export default function PartnerSettingsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <MaxWidthWrapper className="grid gap-5 py-8">{children}</MaxWidthWrapper>
+  );
+}

apps/web/app/partners.dub.co/(dashboard)/layout.tsx

@@ -1,16 +1,15 @@
 import { MainNav } from "@/ui/layout/main-nav";
 import { HelpButtonRSC } from "@/ui/layout/sidebar/help-button-rsc";
 import { PartnersSidebarNav } from "@/ui/layout/sidebar/partners-sidebar-nav";
-import { MaxWidthWrapper } from "@dub/ui";
 
-export default function DashboardLayout({
+export default function PartnerDashboardLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
     <MainNav toolContent={<HelpButtonRSC />} sidebar={PartnersSidebarNav}>
-      <MaxWidthWrapper className="grid gap-5 py-8">{children}</MaxWidthWrapper>
+      {children}
     </MainNav>
   );
 }

apps/web/lib/actions/update-sale-status.ts

@@ -5,33 +5,41 @@ import { SaleStatus } from "@prisma/client";
 import { z } from "zod";
 import { authActionClient } from "./safe-action";
 
-const schema = z.object({
+const updateSaleStatusSchema = z.object({
   workspaceId: z.string(),
   saleId: z.string(),
   status: z.nativeEnum(SaleStatus),
 });
 
 export const updateSaleStatusAction = authActionClient
-  .schema(schema)
+  .schema(updateSaleStatusSchema)
   .action(async ({ parsedInput, ctx }) => {
     const { workspace } = ctx;
     const { saleId, status } = parsedInput;
 
-    await prisma.sale.update({
+    const sale = await prisma.sale.findUniqueOrThrow({
       where: {
         id: saleId,
         program: {
           workspaceId: workspace.id,
         },
       },
+    });
+
+    if (sale.status === "paid") {
+      throw new Error("You cannot update a paid sale status.");
+    }
+
+    await prisma.sale.update({
+      where: {
+        id: sale.id,
+      },
       data: {
         status,
       },
     });
 
-    // TODO:
-    // Send email to the partner informing them about the sale status change
-
+    // TODO: [payouts] Send email to the partner informing them about the sale status change
     // TODO: [payouts] Update associated payout based on new status (fraud, duplicate, etc.)
 
     return {

apps/web/lib/qr/api.tsx

@@ -2,11 +2,10 @@ import qrcodegen from "./codegen";
 import {
   DEFAULT_BGCOLOR,
   DEFAULT_FGCOLOR,
-  DEFAULT_INCLUDEMARGIN,
   DEFAULT_LEVEL,
+  DEFAULT_MARGIN,
   DEFAULT_SIZE,
   ERROR_LEVEL_MAP,
-  MARGIN_SIZE,
 } from "./constants";
 import { QRPropsSVG } from "./types";
 import { excavateModules, generatePath, getImageSettings } from "./utils";
@@ -18,7 +17,7 @@ export async function getQRAsSVG(props: QRPropsSVG) {
     level = DEFAULT_LEVEL,
     bgColor = DEFAULT_BGCOLOR,
     fgColor = DEFAULT_FGCOLOR,
-    includeMargin = DEFAULT_INCLUDEMARGIN,
+    margin = DEFAULT_MARGIN,
     imageSettings,
     ...otherProps
   } = props;
@@ -28,12 +27,11 @@ export async function getQRAsSVG(props: QRPropsSVG) {
     ERROR_LEVEL_MAP[level],
   ).getModules();
 
-  const margin = includeMargin ? MARGIN_SIZE : 0;
   const numCells = cells.length + margin * 2;
   const calculatedImageSettings = getImageSettings(
     cells,
     size,
-    includeMargin,
+    margin,
     imageSettings,
   );
 

apps/web/lib/qr/constants.ts

@@ -11,9 +11,7 @@ export const DEFAULT_SIZE = 128;
 export const DEFAULT_LEVEL = "L";
 export const DEFAULT_BGCOLOR = "#FFFFFF";
 export const DEFAULT_FGCOLOR = "#000000";
-export const DEFAULT_INCLUDEMARGIN = false;
-
-export const MARGIN_SIZE = 4;
+export const DEFAULT_MARGIN = 2;
 
 export const QR_LEVELS = ["L", "M", "Q", "H"] as const;
 

apps/web/lib/qr/index.tsx

@@ -9,11 +9,10 @@ import qrcodegen from "./codegen";
 import {
   DEFAULT_BGCOLOR,
   DEFAULT_FGCOLOR,
-  DEFAULT_INCLUDEMARGIN,
   DEFAULT_LEVEL,
+  DEFAULT_MARGIN,
   DEFAULT_SIZE,
   ERROR_LEVEL_MAP,
-  MARGIN_SIZE,
 } from "./constants";
 import { QRProps, QRPropsCanvas } from "./types";
 import {
@@ -32,7 +31,7 @@ export function QRCodeCanvas(props: QRPropsCanvas) {
     level = DEFAULT_LEVEL,
     bgColor = DEFAULT_BGCOLOR,
     fgColor = DEFAULT_FGCOLOR,
-    includeMargin = DEFAULT_INCLUDEMARGIN,
+    margin = DEFAULT_MARGIN,
     style,
     imageSettings,
     ...otherProps
@@ -63,12 +62,11 @@ export function QRCodeCanvas(props: QRPropsCanvas) {
         ERROR_LEVEL_MAP[level],
       ).getModules();
 
-      const margin = includeMargin ? MARGIN_SIZE : 0;
       const numCells = cells.length + margin * 2;
       const calculatedImageSettings = getImageSettings(
         cells,
         size,
-        includeMargin,
+        margin,
         imageSettings,
       );
 
@@ -168,7 +166,7 @@ export async function getQRAsSVGDataUri(props: QRProps) {
     level = DEFAULT_LEVEL,
     bgColor = DEFAULT_BGCOLOR,
     fgColor = DEFAULT_FGCOLOR,
-    includeMargin = DEFAULT_INCLUDEMARGIN,
+    margin = DEFAULT_MARGIN,
     imageSettings,
   } = props;
 
@@ -177,12 +175,11 @@ export async function getQRAsSVGDataUri(props: QRProps) {
     ERROR_LEVEL_MAP[level],
   ).getModules();
 
-  const margin = includeMargin ? MARGIN_SIZE : 0;
   const numCells = cells.length + margin * 2;
   const calculatedImageSettings = getImageSettings(
     cells,
     size,
-    includeMargin,
+    margin,
     imageSettings,
   );
 
@@ -266,7 +263,7 @@ export async function getQRAsCanvas(
     level = DEFAULT_LEVEL,
     bgColor = DEFAULT_BGCOLOR,
     fgColor = DEFAULT_FGCOLOR,
-    includeMargin = DEFAULT_INCLUDEMARGIN,
+    margin = DEFAULT_MARGIN,
     imageSettings,
   } = props;
 
@@ -277,12 +274,11 @@ export async function getQRAsCanvas(
     value,
     ERROR_LEVEL_MAP[level],
   ).getModules();
-  const margin = includeMargin ? MARGIN_SIZE : 0;
   const numCells = cells.length + margin * 2;
   const calculatedImageSettings = getImageSettings(
     cells,
     size,
-    includeMargin,
+    margin,
     imageSettings,
   );
 
@@ -348,12 +344,13 @@ export function getQRData({
   fgColor,
   hideLogo,
   logo,
+  margin,
 }: {
   url: string;
   fgColor?: string;
   hideLogo?: boolean;
   logo?: string;
-  scale?: number;
+  margin?: number;
 }) {
   return {
     value: `${url}?qr=1`,
@@ -362,7 +359,7 @@ export function getQRData({
     size: 1024,
     level: "Q", // QR Code error correction level: https://blog.qrstuff.com/general/qr-code-error-correction
     hideLogo,
-    includeMargin: false,
+    margin,
     ...(!hideLogo && {
       imageSettings: {
         src: logo || DUB_QR_LOGO,

apps/web/lib/qr/types.ts

@@ -19,8 +19,8 @@ export type QRProps = {
   level?: string;
   bgColor?: string;
   fgColor?: string;
+  margin?: number;
   style?: CSSProperties;
-  includeMargin?: boolean;
   imageSettings?: ImageSettings;
   isOGContext?: boolean;
 };

apps/web/lib/qr/utils.tsx

@@ -3,11 +3,10 @@ import {
   DEFAULT_BGCOLOR,
   DEFAULT_FGCOLOR,
   DEFAULT_IMG_SCALE,
-  DEFAULT_INCLUDEMARGIN,
   DEFAULT_LEVEL,
+  DEFAULT_MARGIN,
   DEFAULT_SIZE,
   ERROR_LEVEL_MAP,
-  MARGIN_SIZE,
 } from "./constants";
 import { Excavation, ImageSettings, Modules, QRPropsSVG } from "./types";
 
@@ -77,7 +76,7 @@ export function generatePath(modules: Modules, margin = 0): string {
 export function getImageSettings(
   cells: Modules,
   size: number,
-  includeMargin: boolean,
+  margin: number,
   imageSettings?: ImageSettings,
 ): null | {
   x: number;
@@ -89,20 +88,18 @@ export function getImageSettings(
   if (imageSettings == null) {
     return null;
   }
-  const margin = includeMargin ? MARGIN_SIZE : 0;
-  const numCells = cells.length + margin * 2;
+
+  const qrCodeSize = cells.length;
   const defaultSize = Math.floor(size * DEFAULT_IMG_SCALE);
-  const scale = numCells / size;
+  const scale = qrCodeSize / size;
   const w = (imageSettings.width || defaultSize) * scale;
   const h = (imageSettings.height || defaultSize) * scale;
+
+  // Center the image in the QR code area (without margins)
   const x =
-    imageSettings.x == null
-      ? cells.length / 2 - w / 2
-      : imageSettings.x * scale;
+    imageSettings.x == null ? qrCodeSize / 2 - w / 2 : imageSettings.x * scale;
   const y =
-    imageSettings.y == null
-      ? cells.length / 2 - h / 2
-      : imageSettings.y * scale;
+    imageSettings.y == null ? qrCodeSize / 2 - h / 2 : imageSettings.y * scale;
 
   let excavation: Excavation | null = null;
   if (imageSettings.excavate) {
@@ -126,17 +123,13 @@ export function convertImageSettingsToPixels(
   },
   size: number,
   numCells: number,
-): {
-  imgWidth: number;
-  imgHeight: number;
-  imgLeft: number;
-  imgTop: number;
-} {
+  margin: number,
+) {
   const pixelRatio = size / numCells;
   const imgWidth = calculatedImageSettings.w * pixelRatio;
   const imgHeight = calculatedImageSettings.h * pixelRatio;
-  const imgLeft = calculatedImageSettings.x * pixelRatio;
-  const imgTop = calculatedImageSettings.y * pixelRatio;
+  const imgLeft = (calculatedImageSettings.x + margin) * pixelRatio;
+  const imgTop = (calculatedImageSettings.y + margin) * pixelRatio;
 
   return { imgWidth, imgHeight, imgLeft, imgTop };
 }
@@ -148,7 +141,7 @@ export function QRCodeSVG(props: QRPropsSVG) {
     level = DEFAULT_LEVEL,
     bgColor = DEFAULT_BGCOLOR,
     fgColor = DEFAULT_FGCOLOR,
-    includeMargin = DEFAULT_INCLUDEMARGIN,
+    margin = DEFAULT_MARGIN,
     isOGContext = false,
     imageSettings,
     ...otherProps
@@ -166,12 +159,11 @@ export function QRCodeSVG(props: QRPropsSVG) {
     ERROR_LEVEL_MAP[effectiveLevel],
   ).getModules();
 
-  const margin = includeMargin ? MARGIN_SIZE : 0;
   const numCells = cells.length + margin * 2;
   const calculatedImageSettings = getImageSettings(
     cells,
     size,
-    includeMargin,
+    margin,
     imageSettings,
   );
 
@@ -183,7 +175,12 @@ export function QRCodeSVG(props: QRPropsSVG) {
 
     if (isOGContext) {
       const { imgWidth, imgHeight, imgLeft, imgTop } =
-        convertImageSettingsToPixels(calculatedImageSettings, size, numCells);
+        convertImageSettingsToPixels(
+          calculatedImageSettings,
+          size,
+          numCells,
+          margin,
+        );
 
       image = (
         <img