feat: create a marketplace-link automatically when user submits to marketplace, and keep this link hidden in share link modal.

apps/builder/app/builder/features/project-settings/section-marketplace.tsx

@@ -17,7 +17,7 @@ import {
   Box,
 } from "@webstudio-is/design-system";
 import { Image, wsImageLoader } from "@webstudio-is/image";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
   MarketplaceProduct,
   marketplaceCategories,
@@ -29,6 +29,7 @@ import { MarketplaceApprovalStatus } from "@webstudio-is/project";
 import { serverSyncStore } from "~/shared/sync";
 import { trpcClient } from "~/shared/trpc/trpc-client";
 import { rightPanelWidth, sectionSpacing } from "./utils";
+import { MARKETPLACE_SHARE_LINK } from "~/shared/share-project";
 
 const thumbnailStyle = css({
   borderRadius: theme.borderRadius[4],
@@ -69,6 +70,15 @@ const useMarketplaceApprovalStatus = () => {
     trpcClient.project.setMarketplaceApprovalStatus.useMutation();
   const project = useStore($project);
 
+  const { send: createToken } =
+    trpcClient.authorizationToken.create.useMutation();
+
+  const { send: removeToken } =
+    trpcClient.authorizationToken.remove.useMutation();
+
+  const { load } = trpcClient.authorizationToken.findMany.useQuery();
+  const marketPlaceToken = useRef<string>();
+
   const status =
     data?.marketplaceApprovalStatus ??
     project?.marketplaceApprovalStatus ??
@@ -88,6 +98,20 @@ const useMarketplaceApprovalStatus = () => {
     }
   };
 
+  useEffect(() => {
+    const project = $project.get();
+    if (project) {
+      load({ projectId: project?.id }, (data) => {
+        const searchToken = data.find(
+          (authToken) => authToken.name === MARKETPLACE_SHARE_LINK
+        );
+
+        console.info(searchToken);
+        marketPlaceToken.current = searchToken ? searchToken.token : undefined;
+      });
+    }
+  }, [marketPlaceToken, load]);
+
   return {
     status,
     state,
@@ -100,6 +124,11 @@ const useMarketplaceApprovalStatus = () => {
           },
           handleSuccess
         );
+        createToken({
+          projectId: project.id,
+          relation: "viewers",
+          name: MARKETPLACE_SHARE_LINK,
+        });
       }
     },
     unlist() {
@@ -111,6 +140,12 @@ const useMarketplaceApprovalStatus = () => {
           },
           handleSuccess
         );
+        if (marketPlaceToken.current) {
+          removeToken({
+            projectId: project.id,
+            token: marketPlaceToken.current,
+          });
+        }
       }
     },
   };

apps/builder/app/shared/share-project/index.ts

@@ -1 +1,2 @@
 export { ShareProjectContainer } from "./share-project-container";
+export { MARKETPLACE_SHARE_LINK } from "./share-project";

apps/builder/app/shared/share-project/share-project-container.tsx

@@ -2,7 +2,11 @@ import { useEffect, useRef, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
 import { builderUrl } from "~/shared/router-utils";
 import { trpcClient } from "../trpc/trpc-client";
-import { ShareProject, type LinkOptions } from "./share-project";
+import {
+  MARKETPLACE_SHARE_LINK,
+  ShareProject,
+  type LinkOptions,
+} from "./share-project";
 
 const useShareProjectContainer = (projectId: string) => {
   const {
@@ -21,7 +25,12 @@ const useShareProjectContainer = (projectId: string) => {
 
   useEffect(() => {
     load({ projectId }, (data) => {
-      setLinks(data ?? []);
+      // prevent user from editing the auto-generated market place share token
+      const filterLinks = data.filter(
+        (link) => link.name !== MARKETPLACE_SHARE_LINK
+      );
+
+      setLinks(filterLinks ?? []);
     });
   }, [load, projectId]);
 
@@ -66,7 +75,10 @@ const useShareProjectContainer = (projectId: string) => {
       },
       () => {
         load({ projectId }, (data) => {
-          setLinks(data ?? []);
+          const filterLinks = data.filter(
+            (link) => link.name !== MARKETPLACE_SHARE_LINK
+          );
+          setLinks(filterLinks ?? []);
         });
       }
     );

apps/builder/app/shared/share-project/share-project.tsx

@@ -39,6 +39,8 @@ import { CopyToClipboard } from "~/builder/shared/copy-to-clipboard";
 import { useIds } from "../form-utils";
 import type { BuilderMode } from "../nano-states";
 
+export const MARKETPLACE_SHARE_LINK = "wstd-marketplace-link";
+
 const Item = (props: ComponentProps<typeof Flex>) => (
   <Flex
     direction="column"
@@ -109,7 +111,10 @@ const Menu = ({ name, hasProPlan, value, onChange, onDelete }: MenuProps) => {
   };
 
   const saveCustomLinkName = () => {
-    if (customLinkName.length === 0) {
+    if (
+      customLinkName.length === 0 ||
+      customLinkName === MARKETPLACE_SHARE_LINK
+    ) {
       return;
     }
 
@@ -137,7 +142,12 @@ const Menu = ({ name, hasProPlan, value, onChange, onDelete }: MenuProps) => {
           <Label htmlFor={ids.name}>Name</Label>
           <InputField
             id={ids.name}
-            color={customLinkName.length === 0 ? "error" : undefined}
+            color={
+              customLinkName.length === 0 ||
+              customLinkName.trim() === MARKETPLACE_SHARE_LINK
+                ? "error"
+                : undefined
+            }
             value={customLinkName}
             onChange={(event) => setCustomLinkName(event.target.value)}
             onKeyDown={(event) => {