Adding more commerce actions (#512)

ts/packages/agents/browser/src/agent/instacart/actionHandler.mts

@@ -6,9 +6,12 @@ import { BrowserActionContext } from "../actionHandler.mjs";
 import { BrowserConnector } from "../browserConnector.mjs";
 import { createInstacartPageTranslator } from "./translator.mjs";
 import {
+  AllListsInfo,
+  HomeLink,
   ProductDetailsHeroTile,
   ProductTile,
   SearchInput,
+  StoreInfo,
 } from "./schema/pageComponents.mjs";
 
 export async function handleInstacartAction(
@@ -34,6 +37,13 @@ export async function handleInstacartAction(
       break;
     case "addToCartAction":
       await handleAddToCart(action);
+    case "addToListAction":
+      await handleAddToList(action);
+    case "findNearbyStoreAction":
+      await handleFindStores(action);
+      break;
+    case "setPreferredStoreAction":
+      await handleSetPreferredStore(action);
       break;
   }
 
@@ -95,5 +105,76 @@ export async function handleInstacartAction(
     }
   }
 
+  async function handleAddToList(action: any) {
+    const targetProduct = (await getComponentFromPage(
+      "ProductDetailsHeroTile",
+    )) as ProductDetailsHeroTile;
+
+    if (targetProduct.addToListButton) {
+      await browser.clickOn(targetProduct.addToListButton.cssSelector);
+
+      // this launches a popup with the available lists
+      const request = `ListName: ${action.listName}`;
+      const targetList = (await getComponentFromPage(
+        "AllListsInfo",
+        request,
+      )) as AllListsInfo;
+
+      if (targetList) {
+        // se
+        await browser.clickOn(targetList.lists[0].cssSelector);
+        await browser.clickOn(targetList.submitButtonCssSelector);
+      }
+    }
+  }
+
+  async function goToHomepage() {
+    const link = (await getComponentFromPage("HomeLink")) as HomeLink;
+
+    if (link.linkCssSelector) {
+      await browser.clickOn(link.linkCssSelector);
+    }
+  }
+
+  async function handleFindStores(action: any) {
+    await goToHomepage();
+
+    const stores = (await getComponentFromPage("StoreInfo")) as StoreInfo[];
+
+    console.log(stores);
+
+    return stores;
+  }
+
+  async function searchForStore(storeName: string) {
+    const selector = (await getComponentFromPage("SearchInput")) as SearchInput;
+    const searchSelector = selector.cssSelector;
+
+    await browser.clickOn(searchSelector);
+    await browser.enterTextIn("store: " + storeName, searchSelector);
+    await browser.clickOn(selector.submitButtonCssSelector);
+    await new Promise((r) => setTimeout(r, 400));
+    await browser.awaitPageLoad();
+  }
+
+  async function selectStoreSearchResult(storeName: string) {
+    const request = `Search result: ${storeName}`;
+    const targetStore = (await getComponentFromPage(
+      "StoreInfo",
+      request,
+    )) as StoreInfo;
+
+    await browser.clickOn(targetStore.storeLinkCssSelector);
+    await new Promise((r) => setTimeout(r, 200));
+    await browser.awaitPageLoad();
+  }
+
+  async function handleSetPreferredStore(action: any) {
+    await searchForStore(action.parameters.storeName);
+    await selectStoreSearchResult(action.parameters.storeName);
+
+    // TODO: persist preferrences
+  }
+
   return message;
 }

ts/packages/agents/browser/src/agent/instacart/schema/pageComponents.mts

@@ -30,6 +30,11 @@ export type ProductDetailsHeroTile = {
     cssSelector: string;
   };
 
+  addToListButton?: {
+    // css selector for the add to cart button
+    cssSelector: string;
+  };
+
   storeName?: string;
   // The physical location of the goods, such as the Aisle, Bay or Shelf
   // Only provide this infomration if it present on the page
@@ -45,10 +50,16 @@ export type SearchInput = {
   submitButtonCssSelector: string;
 };
 
+// The Instacart brand link at the top of the page. Clicking this takes you to the homepage.
+export type HomeLink = {
+  linkCssSelector: string;
+};
+
 // Information the Physical store location
-export type StoreLocation = {
-  locationName: string;
-  zipCode: string;
+export type StoreInfo = {
+  name: string;
+  subtitle: string;
+  storeLinkCssSelector: string;
 };
 
 export type RecipeBuyButton = {
@@ -61,3 +72,13 @@ export type RecipeInfo = {
   name: string;
   ingredients: ProductTile[];
 };
+
+export type AllListsInfo = {
+  lists: [
+    {
+      name: string;
+      cssSelector: string;
+    },
+  ];
+  submitButtonCssSelector: string;
+};

ts/packages/agents/browser/src/agent/instacart/schema/userActions.mts

@@ -74,6 +74,9 @@ export type DeleteRecipeAction = {
 
 export type SetPreferredStoreAction = {
   actionName: "setPreferredStoreAction";
+  parameters: {
+    storeName: string;
+  };
 };
 
 export type FindNearbyStoreAction = {