add wishlist implementation (#70)

* add wishlist implementation

* fix lint

* check whether token exists before making query

---------

Co-authored-by: Mark J. Becker <[email protected]>

blocks/product-details/product-details.css

@@ -1 +1,7 @@
-/* stylelint-disable no-empty-source */
+.pdp-product__buttons { /* stylelint-disable-line selector-class-pattern */
+  display: flex;
+}
+
+.pdp-product__buttons > .dropin-button--primary { /* stylelint-disable-line selector-class-pattern */
+  flex-grow: 1;
+}

blocks/product-details/product-details.js

@@ -247,6 +247,24 @@ export default async function decorate(block) {
                   },
                 };
               });
+
+              ctx.appendButton((next, state) => {
+                const adding = state.get('adding');
+                return ({
+                  disabled: adding,
+                  icon: 'Heart',
+                  variant: 'secondary',
+                  onClick: async () => {
+                    try {
+                      state.set('adding', true);
+                      const { addToWishlist } = await import('../../scripts/wishlist/api.js');
+                      await addToWishlist(next.values.sku);
+                    } finally {
+                      state.set('adding', false);
+                    }
+                  },
+                });
+              });
             },
           },
           useACDL: true,

scripts/wishlist/api.js

@@ -0,0 +1,103 @@
+import { getSignInToken, performMonolithGraphQLQuery } from '../commerce.js';
+
+const redirectToSignin = () => {
+  window.location = '/customer/login';
+};
+
+const getWishlistsQuery = `
+ query GetWishlists {
+  customer {
+    wishlists {
+      id
+      name
+      items_count
+      items_v2 {
+        items {
+          id
+          product {
+            uid
+            name
+            sku
+          }
+        }
+      }
+    }
+  }
+}
+`;
+
+const addProductToWishlistMutation = `
+mutation(
+  $wishlistId: ID!,
+  $sku: String!
+) {
+  addProductsToWishlist(
+    wishlistId: $wishlistId,
+    wishlistItems: [
+      {
+        sku: $sku
+        quantity: 1
+      }
+    ]
+  ) {
+    user_errors {
+      code
+      message
+    }
+    wishlist {
+      name
+    }
+  }
+}
+`;
+
+export async function getWishlists() {
+  const token = getSignInToken();
+  if (!token) {
+    redirectToSignin();
+  }
+
+  const wishlists = await performMonolithGraphQLQuery(
+    getWishlistsQuery,
+    {},
+    true,
+    token,
+  );
+
+  if (wishlists.errors?.find((error) => error.message === "The current customer isn't authorized.")) {
+    redirectToSignin();
+  }
+
+  return wishlists.data?.customer?.wishlists;
+}
+
+/**
+ * Adds a product to the specified wishlist
+ * @param product SKU of the product to add
+ * @param wishlistId Optionally pass a wishlist. If no option, the first wishlist will be used.
+ * @returns {Promise<void>}
+ */
+export async function addToWishlist(product, wishlistId) {
+  const token = getSignInToken();
+  if (!token) {
+    redirectToSignin();
+  }
+
+  const toWishlist = wishlistId ?? (await getWishlists())[0].id;
+
+  const response = await performMonolithGraphQLQuery(
+    addProductToWishlistMutation,
+    {
+      wishlistId: toWishlist,
+      sku: product,
+    },
+    false,
+    token,
+  );
+
+  if (response.user_errors) {
+    console.error(response.user_errors);
+  } else {
+    window.location = `/customer/wishlist?wishlist_id=${toWishlist}`;
+  }
+}