feature: add pixel on load and add button to manually add pixel in settings

Author: densumesh

clients/trieve-shopify-extension/app/components/DatasetSettings.tsx

@@ -5,11 +5,13 @@ import {
   Button,
   Card,
   FormLayout,
+  Icon,
   InlineStack,
   Select,
   Text,
   TextField,
 } from "@shopify/polaris";
+import { CheckCircleIcon } from "@shopify/polaris-icons";
 import { useEffect, useState } from "react";
 import { CrawlOptions, Dataset, DatasetConfigurationDTO } from "trieve-ts-sdk";
 
@@ -37,10 +39,6 @@ export type DatasetConfig = Exclude<
   LLM_API_KEY?: string | null;
 };
 
-export type RevenueTrackingOptions = {
-  checkout_selector: string;
-};
-
 export const defaultServerEnvsConfiguration: DatasetConfig = {
   LLM_BASE_URL: "",
   LLM_DEFAULT_MODEL: "",
@@ -70,23 +68,17 @@ export const defaultServerEnvsConfiguration: DatasetConfig = {
   BM25_AVG_LEN: 256,
 };
 
-export const defaultRevenueTrackingOptions: RevenueTrackingOptions = {
-  checkout_selector: "",
-};
-
 export const DatasetSettings = ({
   initalCrawlOptions,
-  initalRevenueTrackingOptions,
+  webPixelInstalled,
   shopDataset,
 }: {
   initalCrawlOptions: ExtendedCrawlOptions;
-  initalRevenueTrackingOptions: RevenueTrackingOptions;
+  webPixelInstalled: boolean;
   shopDataset: Dataset;
 }) => {
   const [unsavedCrawlOptions, setUnsavedCrawlOptions] =
     useState(initalCrawlOptions);
-  const [unsavedRevenueTrackingOptions, setUnsavedRevenueTrackingOptions] =
-    useState(initalRevenueTrackingOptions);
   const shopify = useAppBridge();
   const submit = useSubmit();
   const [datasetSettings, setDatasetSettings] = useState<DatasetConfig>(
@@ -147,7 +139,6 @@ export const DatasetSettings = ({
   const onRevenueTrackingSettingsSave = async () => {
     submit(
       {
-        revenue_tracking_options: JSON.stringify(unsavedRevenueTrackingOptions),
         dataset_id: shopDataset.id,
         type: "revenue_tracking",
       },
@@ -206,6 +197,30 @@ export const DatasetSettings = ({
           </InlineStack>
         </BlockStack>
       </Card>
+      <Card>
+        <BlockStack gap="200">
+          <Text variant="headingLg" as="h1">
+            Revenue Tracking Settings
+          </Text>
+
+          <FormLayout>
+            <BlockStack gap="200">
+              <div className="max-w-fit">
+                {webPixelInstalled ? (
+                  <Button disabled fullWidth={false} icon={CheckCircleIcon} size="slim">
+                    Revenue Tracker Installed
+                  </Button>
+                ) : (
+                  <Button onClick={onRevenueTrackingSettingsSave}>Install Revenue Tracker</Button>
+                )}
+              </div>
+              <Text as="p" tone="subdued" variant="bodySm">
+                Install the revenue tracker to start tracking revenue.
+              </Text>
+            </BlockStack>
+          </FormLayout>
+        </BlockStack>
+      </Card>
       <Card>
         <BlockStack gap="200">
           <Text variant="headingLg" as="h1">

clients/trieve-shopify-extension/app/components/onboarding/AddComponentOnboarding.tsx

@@ -19,34 +19,7 @@ import { useTrieve } from "app/context/trieveContext";
 import { TrieveKey } from "app/types";
 import { AdminApiCaller } from "app/loaders";
 
-const createWebPixel = async (adminApi: AdminApiCaller, trieveKey: TrieveKey) => {
-  const response = await adminApi(
-    `
-      #graphql
-      mutation webPixelCreate($webPixel: WebPixelInput!) {
-        webPixelCreate(webPixel: $webPixel) {
-          userErrors {
-            code
-            field
-            message
-          }
-          webPixel {
-            settings
-            id
-          }
-        }
-      }
-      `,
-    {
-      variables: {
-        webPixel: {
-          settings: `{"apiKey":"${trieveKey.key}", "datasetId": "${trieveKey.currentDatasetId}"}`,
-        },
-      },
-    },
-  );
-  console.log("Web pixel created", response);
-};
+
 
 const getShortThemeId = (fullGid: string): string | null => {
   const regex = /gid:\/\/shopify\/OnlineStoreTheme\/(\d+)/;
@@ -208,7 +181,6 @@ export const AddComponentOnboarding: OnboardingBody = ({
   useEffect(() => {
     if (globalComplete) {
       if (trieve.organizationId && trieve.trieve.apiKey != null) {
-        createWebPixel(adminApi, trieveKey);
         trackCustomerEvent(
           trieve.trieve.baseUrl,
           {

clients/trieve-shopify-extension/app/queries/webPixel.ts

@@ -0,0 +1,52 @@
+import { TrieveKey } from "app/types";
+
+import { AdminApiCaller } from "app/loaders";
+
+export const isWebPixelInstalled = async (adminApi: AdminApiCaller, trieveKey: TrieveKey) => {
+    const response = await adminApi<{ webPixel: { id: string | null, settings: string } }>(
+        `
+      #graphql
+      query {
+            webPixel {
+                id
+                settings
+            }
+        }
+      `,
+    );
+
+    if (response.error) {
+        console.error(response.error);
+        throw response.error;
+    }
+    return response.data.webPixel.id !== null;
+};
+
+export const createWebPixel = async (adminApi: AdminApiCaller, trieveKey: TrieveKey) => {
+    const response = await adminApi(
+        `
+      #graphql
+      mutation webPixelCreate($webPixel: WebPixelInput!) {
+        webPixelCreate(webPixel: $webPixel) {
+          userErrors {
+            code
+            field
+            message
+          }
+          webPixel {
+            settings
+            id
+          }
+        }
+      }
+      `,
+        {
+            variables: {
+                webPixel: {
+                    settings: `{"apiKey":"${trieveKey.key}", "datasetId": "${trieveKey.currentDatasetId}"}`,
+                },
+            },
+        },
+    );
+    console.log("Web pixel created", response);
+};

clients/trieve-shopify-extension/app/routes/app._dashboard.settings.tsx

@@ -6,7 +6,6 @@ import { sdkFromKey, validateTrieveAuth } from "app/auth";
 import {
   DatasetSettings as DatasetSettings,
   ExtendedCrawlOptions,
-  RevenueTrackingOptions,
 } from "app/components/DatasetSettings";
 import { useTrieve } from "app/context/trieveContext";
 import { AdminApiCaller } from "app/loaders";
@@ -17,6 +16,7 @@ import { authenticate } from "app/shopify.server";
 import { type Dataset } from "trieve-ts-sdk";
 import { AppInstallData } from "./app.setup";
 import { ResetSettings } from "app/components/ResetSettings";
+import { createWebPixel, isWebPixelInstalled } from "app/queries/webPixel";
 
 const setAppMetafields = async (
   adminApi: AdminApiCaller,
@@ -111,7 +111,7 @@ export const loader = async ({
   request,
 }: LoaderFunctionArgs): Promise<{
   crawlSettings: ExtendedCrawlOptions | undefined;
-  revenueTrackingSettings: RevenueTrackingOptions | undefined;
+  webPixelInstalled: boolean;
 }> => {
   const { session } = await authenticate.admin(request);
   const key = await validateTrieveAuth(request);
@@ -140,16 +140,11 @@ export const loader = async ({
     },
   })) as any;
 
-  const revenueTrackingSettings: RevenueTrackingOptions = {
-    checkout_selector:
-      (await getAppMetafields(fetcher)).find(
-        (metafield) => metafield.key === "checkout_selector",
-      )?.value ?? "",
-  };
+  const webPixelInstalled = await isWebPixelInstalled(fetcher, key);
 
   return {
     crawlSettings: crawlSettings?.crawlSettings,
-    revenueTrackingSettings,
+    webPixelInstalled,
   };
 };
 
@@ -211,19 +206,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 
     return { success: true };
   } else if (type === "revenue_tracking") {
-    const revenueTrackingSettingsString = formData.get(
-      "revenue_tracking_options",
-    );
-    const revenueTrackingSettings = JSON.parse(
-      revenueTrackingSettingsString as string,
-    );
-    await setAppMetafields(fetcher, [
-      {
-        key: "checkout_selector",
-        value: revenueTrackingSettings.checkout_selector,
-      },
-    ]).catch(console.error);
-
+    await createWebPixel(fetcher, key);
     return { success: true };
   }
   return { success: false };
@@ -232,16 +215,14 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 export default function Dataset() {
   const { trieve } = useTrieve();
   const { data: shopDataset } = useSuspenseQuery(shopDatasetQuery(trieve));
-  const { crawlSettings, revenueTrackingSettings } =
+  const { crawlSettings, webPixelInstalled } =
     useLoaderData<typeof loader>();
 
   return (
     <Box paddingBlockStart="400">
       <DatasetSettings
         initalCrawlOptions={crawlSettings as ExtendedCrawlOptions}
-        initalRevenueTrackingOptions={
-          revenueTrackingSettings as RevenueTrackingOptions
-        }
+        webPixelInstalled={webPixelInstalled}
         shopDataset={shopDataset as Dataset}
       />
       <div className="h-4"></div>

clients/trieve-shopify-extension/app/routes/app._dashboard.tsx

@@ -12,11 +12,13 @@ import {
 import { TrieveProvider } from "app/context/trieveContext";
 import { authenticate } from "app/shopify.server";
 import { useDehydratedState } from "app/dehydrate";
-import { StrongTrieveKey } from "app/types";
+import { StrongTrieveKey, TrieveKey } from "app/types";
 import { Dataset, OrganizationWithSubAndPlan } from "trieve-ts-sdk";
 import { useState, Suspense } from "react";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { shopDatasetQuery } from "app/queries/shopDataset";
+import { buildAdminApiFetcherForServer } from "app/loaders/serverLoader";
+import { createWebPixel, isWebPixelInstalled } from "app/queries/webPixel";
 
 export const loader = async (args: LoaderFunctionArgs) => {
   const key = await validateTrieveAuth(args.request, false);
@@ -36,6 +38,14 @@ export const loader = async (args: LoaderFunctionArgs) => {
   // Fill in dataset info
   const queryClient = new QueryClient();
   queryClient.setQueryData(shopDatasetQuery(trieve).queryKey, dataset);
+  const fetcher = buildAdminApiFetcherForServer(
+    session.shop,
+    session.accessToken!,
+  );
+
+  if (!(await isWebPixelInstalled(fetcher, key))) {
+    await createWebPixel(fetcher, key);
+  }
 
   return {
     key: key as StrongTrieveKey,