feature: add settings item for setting the checkout selector

Author: densumesh

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

@@ -37,6 +37,10 @@ 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: "",
@@ -66,22 +70,29 @@ export const defaultServerEnvsConfiguration: DatasetConfig = {
   BM25_AVG_LEN: 256,
 };
 
+export const defaultRevenueTrackingOptions: RevenueTrackingOptions = {
+  checkout_selector: "",
+};
+
 export const DatasetSettings = ({
   initalCrawlOptions,
+  initalRevenueTrackingOptions,
   shopDataset,
 }: {
   initalCrawlOptions: ExtendedCrawlOptions;
+  initalRevenueTrackingOptions: RevenueTrackingOptions;
   shopDataset: Dataset;
 }) => {
   const [unsavedCrawlOptions, setUnsavedCrawlOptions] =
     useState(initalCrawlOptions);
+  const [unsavedRevenueTrackingOptions, setUnsavedRevenueTrackingOptions] =
+    useState(initalRevenueTrackingOptions);
   const shopify = useAppBridge();
   const submit = useSubmit();
   const [datasetSettings, setDatasetSettings] = useState<DatasetConfig>(
     shopDataset.server_configuration ?? ({} as DatasetConfig),
   );
 
-
   useEffect(() => {
     // Quickly set the nonnegotiable options for shopify to work
     setUnsavedCrawlOptions({
@@ -133,6 +144,21 @@ export const DatasetSettings = ({
     shopify.toast.show("Saved LLM settings!");
   };
 
+  const onRevenueTrackingSettingsSave = async () => {
+    submit(
+      {
+        revenue_tracking_options: JSON.stringify(unsavedRevenueTrackingOptions),
+        dataset_id: shopDataset.id,
+        type: "revenue_tracking",
+      },
+      {
+        method: "POST",
+      },
+    );
+
+    shopify.toast.show("Saved revenue tracking settings!");
+  };
+
   return (
     <BlockStack gap="200">
       <Card>
@@ -180,6 +206,34 @@ export const DatasetSettings = ({
           </InlineStack>
         </BlockStack>
       </Card>
+      <Card>
+        <BlockStack gap="200">
+          <Text variant="headingLg" as="h1">
+            Revenue Tracking Settings
+          </Text>
+
+          <FormLayout>
+            <TextField
+              autoComplete="off"
+              label="Checkout Selector"
+              helpText="The HTML selector of the checkout button on your shopify store. This is used to track revenue when a user clicks the checkout button."
+              value={
+                unsavedRevenueTrackingOptions?.checkout_selector || ""
+              }
+              onChange={(e) => {
+                setUnsavedRevenueTrackingOptions({
+                  ...unsavedRevenueTrackingOptions,
+                  checkout_selector: e,
+                });
+              }}
+            />
+          </FormLayout>
+
+          <InlineStack align="end">
+            <Button onClick={onRevenueTrackingSettingsSave}>Save</Button>
+          </InlineStack>
+        </BlockStack>
+      </Card>
       <Card>
         <BlockStack gap="200">
           <Text variant="headingLg" as="h1">

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

@@ -6,6 +6,7 @@ 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";
@@ -19,7 +20,10 @@ import { AppInstallData } from "./app.setup";
 
 const setAppMetafields = async (
   adminApi: AdminApiCaller,
-  trieveKey: TrieveKey,
+  valuesToSet: {
+    key: string;
+    value: string;
+  }[],
 ) => {
   const response = await adminApi<AppInstallData>(`
       #graphql
@@ -54,31 +58,60 @@ const setAppMetafields = async (
     `,
     {
       variables: {
-        metafieldsSetInput: [
-          {
-            namespace: "trieve",
-            key: "dataset_id",
-            value: trieveKey.currentDatasetId,
-            type: "single_line_text_field",
-            ownerId: appId.currentAppInstallation.id,
-          },
-          {
-            namespace: "trieve",
-            key: "api_key",
-            value: trieveKey.key,
-            type: "single_line_text_field",
-            ownerId: appId.currentAppInstallation.id,
-          },
-        ],
+        metafieldsSetInput: valuesToSet.map((value) => ({
+          namespace: "trieve",
+          key: value.key,
+          value: value.value,
+          type: "single_line_text_field",
+          ownerId: appId.currentAppInstallation.id,
+        })),
       },
     },
   );
 };
 
+type Metafields = {
+  currentAppInstallation: {
+    metafields: {
+      nodes: {
+        id: string;
+        namespace: string;
+        key: string;
+        value: string;
+      }[];
+    };
+  };
+};
+
+const getAppMetafields = async (adminApi: AdminApiCaller) => {
+  const response = await adminApi<Metafields>(`
+    #graphql
+    query {
+      currentAppInstallation {
+        metafields(first: 10) {
+          nodes {
+            id
+            namespace
+            key
+            value
+          }
+        }
+      }
+    }
+    `);
+
+  if (response.error) {
+    throw response.error;
+  }
+
+  return response.data.currentAppInstallation.metafields.nodes;
+};
+
 export const loader = async ({
   request,
 }: LoaderFunctionArgs): Promise<{
   crawlSettings: ExtendedCrawlOptions | undefined;
+  revenueTrackingSettings: RevenueTrackingOptions | undefined;
 }> => {
   const { session } = await authenticate.admin(request);
   const key = await validateTrieveAuth(request);
@@ -87,7 +120,13 @@ export const loader = async ({
     session.shop,
     session.accessToken!,
   );
-  setAppMetafields(fetcher, key).catch(console.error);
+  setAppMetafields(fetcher, [{
+    key: "dataset_id",
+    value: key.currentDatasetId || "",
+  }, {
+    key: "api_key",
+    value: key.key,
+  }]).catch(console.error);
 
   const crawlSettings: {
     crawlSettings: ExtendedCrawlOptions | undefined;
@@ -98,13 +137,21 @@ export const loader = async ({
     },
   })) as any;
 
-  return { crawlSettings: crawlSettings?.crawlSettings };
+  const revenueTrackingSettings: RevenueTrackingOptions = {
+    checkout_selector: (await getAppMetafields(fetcher)).find((metafield) => metafield.key === "checkout_selector")?.value ?? "",
+  };
+
+  return { crawlSettings: crawlSettings?.crawlSettings, revenueTrackingSettings };
 };
 
 export const action = async ({ request }: ActionFunctionArgs) => {
   const { session } = await authenticate.admin(request);
   const key = await validateTrieveAuth(request);
   const trieve = sdkFromKey(key);
+  const fetcher = buildAdminApiFetcherForServer(
+    session.shop,
+    session.accessToken!,
+  );
   const formData = await request.formData();
   const type = formData.get("type");
   if (type === "crawl") {
@@ -132,7 +179,13 @@ export const action = async ({ request }: ActionFunctionArgs) => {
     sendChunks(datasetId as string, key, fetcher, session, crawlSettings).catch(
       console.error,
     );
-    setAppMetafields(fetcher, key).catch(console.error);
+    setAppMetafields(fetcher, [{
+      key: "dataset_id",
+      value: key.currentDatasetId || "",
+    }, {
+      key: "api_key",
+      value: key.key,
+    }]).catch(console.error);
 
     return { success: true };
   } else if (type === "dataset") {
@@ -145,20 +198,31 @@ 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);
 
+    return { success: true };
+  }
   return { success: false };
 };
 
 export default function Dataset() {
   const { trieve } = useTrieve();
   const { data: shopDataset } = useSuspenseQuery(shopDatasetQuery(trieve));
-  const { crawlSettings } = useLoaderData<typeof loader>();
+  const { crawlSettings, revenueTrackingSettings } = useLoaderData<typeof loader>();
 
   return (
     <Box paddingBlockStart="400">
       <DatasetSettings
         initalCrawlOptions={crawlSettings as ExtendedCrawlOptions}
+        initalRevenueTrackingOptions={revenueTrackingSettings as RevenueTrackingOptions}
         shopDataset={shopDataset as Dataset}
       />
     </Box>

clients/trieve-shopify-extension/extensions/global-search/blocks/global_component.liquid

@@ -97,6 +97,11 @@
       showFloatingSearchIcon: toBool(getValue("{{ block.settings.show_floating_search_icon }}", true)),
       floatingSearchIconPosition: getValue("{{ block.settings.floating_icon_pos }}", "left"),
       allowSwitchingModes: false,
+      analyticsSelectors: {
+        checkout: {
+          querySelector: appMetafieldTrieve.checkout_selector,
+        },
+      },
     });
   }
 </script>

clients/trieve-shopify-extension/extensions/global-search/blocks/inline_component.liquid

@@ -108,6 +108,11 @@
       inline: true,
       groupTrackingId: productId ? productId.toString() : undefined,
       cleanGroupName: productTitle ?? undefined,
+      analyticsSelectors: {
+        checkout: {
+          querySelector: appMetafieldTrieve.checkout_selector,
+        },
+      },
     });
   }
 </script>