webstudio/apps/builder/app/shared/router-utils/path-utils.ts

import type { AUTH_PROVIDERS } from "~/shared/session";
import { getAssetUploadApiUrl } from "@webstudio-is/sdk/runtime";
import { getAuthorizationServerOrigin } from "./origins";
import type { BuilderMode } from "../nano-states/misc";

const searchParams = (params: Record<string, string | undefined | null>) => {
  const searchParams = new URLSearchParams();
  for (const [key, value] of Object.entries(params)) {
    if (typeof value === "string") {
      searchParams.set(key, value);
    }
  }
  const asString = searchParams.toString();
  return asString === "" ? "" : `?${asString}`;
};

export type BuilderLinkParams = {
  pageId?: string;
  instanceSelector?: readonly string[];
  authToken?: string;
  pageHash?: string;
  mode?: BuilderMode;
  safemode?: boolean;
};

export const builderPath = ({
  pageId,
  instanceSelector,
  authToken,
  pageHash,
  mode,
  safemode = false,
}: BuilderLinkParams = {}) => {
  return `/${searchParams({
    pageId,
    instance: instanceSelector?.join(","),
    authToken,
    pageHash,
    mode,
    safemode: safemode ? "true" : undefined,
  })}`;
};

export const builderUrl = ({
  projectId,
  origin,
  ...link
}: BuilderLinkParams & {
  projectId: string;
  origin: string;
}) => {
  const authServerOrigin = getAuthorizationServerOrigin(origin);

  const url = new URL(builderPath(link), authServerOrigin);

  const fragments = url.host.split(".");
  if (fragments.length <= 3) {
    fragments.splice(0, 0, "p-" + projectId);
  } else {
    // staging | development branches
    fragments[0] = "p-" + projectId + "-dot-" + fragments[0];
  }

  url.host = fragments.join(".");

  return url.href;
};

export const dashboardPath = (
  view: "templates" | "search" | "projects" = "projects"
) => {
  if (view === "projects") {
    return `/dashboard`;
  }
  return `/dashboard/${view}`;
};

export const dashboardUrl = (props: { origin: string }) => {
  const authServerOrigin = getAuthorizationServerOrigin(props.origin);

  return `${authServerOrigin}/dashboard`;
};

export const cloneProjectUrl = (props: {
  origin: string;
  sourceAuthToken: string;
}) => {
  const authServerOrigin = getAuthorizationServerOrigin(props.origin);

  const searchParams = new URLSearchParams();
  searchParams.set("projectToCloneAuthToken", props.sourceAuthToken);

  return `${authServerOrigin}/dashboard?${searchParams.toString()}`;
};

export const loginPath = (params: {
  error?: (typeof AUTH_PROVIDERS)[keyof typeof AUTH_PROVIDERS];
  message?: string;
  returnTo?: string;
}) => `/login${searchParams(params)}`;

export const logoutPath = () => "/logout";
export const restLogoutPath = () => "/dashboard-logout";

export const planSubscriptionPath = (subscriptionId?: string) => {
  const urlSearchParams = new URLSearchParams();
  urlSearchParams.set("return_url", window.location.href);
  if (subscriptionId) {
    urlSearchParams.set("subscription", subscriptionId);
  }

  return `/builder-payments/billing-portal/sessions?${urlSearchParams.toString()}`;
};

export const authCallbackPath = ({
  provider,
}: {
  provider: "google" | "github";
}) => `/auth/${provider}/callback`;

export const authPath = ({
  provider,
}: {
  provider: "google" | "github" | "dev";
}) => `/auth/${provider}`;

export const restAssetsUploadPath = ({
  name,
  width,
  height,
}: {
  name: string;
  width?: number | undefined;
  height?: number | undefined;
}) => {
  const urlSearchParams = new URLSearchParams();
  if (width !== undefined) {
    urlSearchParams.set("width", String(width));
  }
  if (height !== undefined) {
    urlSearchParams.set("height", String(height));
  }

  const query = urlSearchParams.toString();
  if (query !== "") {
    return `${getAssetUploadApiUrl(name)}?${query}`;
  }

  return getAssetUploadApiUrl(name);
};

export const getCanvasUrl = () => {
  return `/canvas`;
};

export const restResourcesLoader = ({ diagnostics = false } = {}) =>
  `/rest/resources-loader${diagnostics ? "?diagnostics=true" : ""}`;

export const marketplacePath = (method: string) =>
  `/builder/marketplace/${method}`;

// Editor navigation does not change the Builder data loaded by the route.
export const areBuilderDataUrlsEqual = (currentUrl: URL, nextUrl: URL) => {
  const current = new URL(currentUrl);
  const next = new URL(nextUrl);
  for (const param of [
    "pageId",
    "instance",
    "instanceId",
    "mode",
    "pageHash",
  ]) {
    current.searchParams.delete(param);
    next.searchParams.delete(param);
  }
  return current.href === next.href;
};