DEV 1261: Support app metatada id in deeplinking and public app endpo…

…int (#1145)

* Update QR code action and add warning flag

* Update get app endpoint + tests

* Make PR changes

* Remove commented code

* Rename to `draft_id`

web/api/v2/public/app/[app_id]/index.ts

@@ -74,24 +74,26 @@ export async function GET(
 
   let parsedAppMetadata = app_metadata[0];
   const nativeAppMetadata = NativeApps[process.env.NEXT_PUBLIC_APP_ENV];
-  if (app_metadata.length > 1) {
-    app_metadata.reduce((acc, current) => {
-      if (current.is_reviewer_world_app_approved) {
-        parsedAppMetadata = current;
-      }
-      return acc;
-    }, null);
-  }
 
-  /**
-   * Temporary: Testing staging feature for mini apps
-   */
+  // Get query param for specific metadata if provided
   const { searchParams } = new URL(request.url);
-  const app_metadata_id = searchParams.get("app_metadata_id");
-  if (process.env.NEXT_PUBLIC_APP_ENV !== "production" && app_metadata_id) {
-    parsedAppMetadata =
-      app_metadata.find((meta) => meta.id === app_metadata_id) ??
-      parsedAppMetadata;
+  const draft_id = searchParams.get("draft_id");
+
+  if (draft_id) {
+    const metadataById = app_metadata.find((meta) => meta.id === draft_id);
+    if (metadataById) {
+      parsedAppMetadata = metadataById;
+    }
+  } else if (app_metadata.length > 1) {
+    // If no specific metadata found by id, check for reviewer approved version
+    const approvedMetadata = app_metadata.find(
+      (meta) =>
+        meta.is_reviewer_world_app_approved &&
+        meta.verification_status === "verified",
+    );
+    if (approvedMetadata) {
+      parsedAppMetadata = approvedMetadata;
+    }
   }
 
   let formattedMetadata = await formatAppMetadata(

web/scenes/Portal/Teams/TeamId/Apps/AppId/Configuration/BasicInformation/QrQuickAction/index.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { CopyButton } from "@/components/CopyButton";
 import { FlaskIcon } from "@/components/Icons/FlaskIcon";
+import { Notification } from "@/components/Notification";
 import { QuickAction } from "@/components/QuickAction";
 import Image from "next/image";
 import QRCode from "qrcode";
@@ -17,17 +18,12 @@ const getQRCode = async (url: string): Promise<string | null> => {
 };
 
 export const QrQuickAction = (props: {
-  app_id: string;
-  app_metadata_id: string;
+  url: string;
+  showDeveloperFlag: boolean;
 }) => {
-  const { app_id, app_metadata_id } = props;
+  const { url, showDeveloperFlag } = props;
   const [qrCodeDataURL, setQrCodeDataURL] = useState<string | null>(null);
 
-  let url = `https://worldcoin.org/mini-app?app_id=${app_id}`;
-  if (process.env.NEXT_PUBLIC_APP_ENV !== "production" && app_metadata_id) {
-    url += `&app_metadata_id=${app_metadata_id}`;
-  }
-
   useEffect(() => {
     getQRCode(url).then(setQrCodeDataURL);
   }, [url]);
@@ -37,21 +33,36 @@ export const QrQuickAction = (props: {
   }
 
   return (
-    <QuickAction
-      type="button"
-      description="Scan this, or copy the link"
-      icon={<FlaskIcon />}
-      hideArrow
-      iconRight={
-        <CopyButton
-          fieldName="Miniapp URL"
-          fieldValue={url}
-          className="flex items-center justify-center rounded-full border p-2 !pr-2 text-blue-500"
-        />
-      }
-      title="See your mini app"
-    >
-      <Image src={qrCodeDataURL} width={200} height={200} alt="QR Code" />
-    </QuickAction>
+    <div className="grid gap-y-2">
+      {showDeveloperFlag && (
+        <Notification variant="warning">
+          <div className="text-sm">
+            <h3 className="font-medium text-yellow-800">Developer Preview</h3>
+            <div className="mt-2 text-yellow-700">
+              This link/QR code is for testing purposes only and will be deleted
+              after the app is verified.
+            </div>
+          </div>
+        </Notification>
+      )}
+      <div className="flex justify-center">
+        <QuickAction
+          type="button"
+          description="Scan this, or copy the link"
+          icon={<FlaskIcon />}
+          hideArrow
+          iconRight={
+            <CopyButton
+              fieldName="Miniapp URL"
+              fieldValue={url}
+              className="flex items-center justify-center rounded-full border p-2 !pr-2 text-blue-500"
+            />
+          }
+          title="See your mini app"
+        >
+          <Image src={qrCodeDataURL} width={200} height={200} alt="QR Code" />
+        </QuickAction>
+      </div>
+    </div>
   );
 };

web/scenes/Portal/Teams/TeamId/Apps/AppId/Configuration/BasicInformation/index.tsx

@@ -30,7 +30,7 @@ export const BasicInformation = (props: {
   app: FetchAppMetadataQuery["app"][0];
   teamName: string;
 }) => {
-  const { appId, teamId, app, teamName } = props;
+  const { appId, teamId, app } = props;
   const { refetch: refetchAppMetadata } =
     useRefetchQueries<FetchAppMetadataQueryVariables>(
       FetchAppMetadataDocument,
@@ -101,6 +101,15 @@ export const BasicInformation = (props: {
     [appMetaData?.id, refetchAppMetadata],
   );
 
+  const { url, showDeveloperFlag } = useMemo(() => {
+    let url = `https://worldcoin.org/mini-app?app_id=${appId}`;
+    let showDeveloperFlag = appMetaData?.verification_status !== "verified";
+    if (showDeveloperFlag) {
+      url += `&draft_id=${appMetaData?.id}`;
+    }
+    return { url, showDeveloperFlag };
+  }, [appId, appMetaData]);
+
   return (
     <div className="grid max-w-[580px] grid-cols-1fr/auto">
       <div className="">
@@ -158,7 +167,7 @@ export const BasicInformation = (props: {
           </DecoratedButton>
         </form>
         <div className="mt-7 flex justify-center sm:justify-start">
-          <QrQuickAction app_id={appId} app_metadata_id={appMetaData?.id} />
+          <QrQuickAction url={url} showDeveloperFlag={showDeveloperFlag} />
         </div>
       </div>
     </div>