diff --git a/apps/web/ui/links/destination-url-input.tsx b/apps/web/ui/links/destination-url-input.tsx index 61c9777167..a21a1fb6c1 100644 --- a/apps/web/ui/links/destination-url-input.tsx +++ b/apps/web/ui/links/destination-url-input.tsx @@ -1,8 +1,16 @@ "use client"; import { DomainProps } from "@/lib/types"; -import { InfoTooltip, SimpleTooltipContent, useMediaQuery } from "@dub/ui"; +import { + InfoTooltip, + SimpleTooltipContent, + useMediaQuery, + UTM_PARAMETERS, +} from "@dub/ui"; +import { getParamsFromURL } from "@dub/utils"; import { forwardRef, HTMLProps, ReactNode, useId } from "react"; +import { useFormContext } from "react-hook-form"; +import { LinkFormData } from "../modals/link-builder"; import { AlertCircleFill } from "../shared/icons"; import { ProBadgeTooltip } from "../shared/pro-badge-tooltip"; @@ -32,6 +40,8 @@ export const DestinationUrlInput = forwardRef< const inputId = useId(); const { isMobile } = useMediaQuery(); + const { setValue: setValueParent } = useFormContext(); + return (
@@ -84,6 +94,18 @@ export const DestinationUrlInput = forwardRef< } block w-full rounded-md focus:outline-none sm:text-sm`} aria-invalid="true" {...inputProps} + onChange={(e) => { + const url = e.target.value; + + setValueParent("url", url); + const parentParams = getParamsFromURL(url); + + UTM_PARAMETERS.filter((p) => p.key !== "ref").forEach((p) => + setValueParent(p.key as any, parentParams?.[p.key], { + shouldDirty: true, + }), + ); + }} /> {error && (