From b7631b6eb156321657d3e9c7477450e139da35a0 Mon Sep 17 00:00:00 2001
From: Graham Rogers <grahamr@adobe.com>
Date: Thu, 8 Aug 2024 10:56:26 -0600
Subject: [PATCH] sync v2

---
 .eslintrc.js                                  |   1 +
 README.md                                     | 147 +++++++++---------
 package.json                                  |   4 +-
 src/api/graphql.ts                            |  12 +-
 src/api/mutations.ts                          |  63 +++++++-
 src/api/queries.ts                            |  25 ++-
 .../InputButtonGroup/InputButtonGroup.tsx     |   3 +
 src/components/ProductItem/ProductItem.tsx    |  12 +-
 .../WishlistButton/WishlistButton.stories.mdx |  39 +++++
 .../WishlistButton/WishlistButton.test.tsx    |  26 ++++
 .../WishlistButton/WishlistButton.tsx         |  78 ++++++++++
 src/components/WishlistButton/index.ts        |  11 ++
 src/context/cart.tsx                          |  16 +-
 src/context/index.ts                          |  10 +-
 src/context/store.tsx                         |  10 +-
 src/context/widgetConfig.tsx                  | 133 ++++++++++++++++
 src/context/wishlist.tsx                      | 124 +++++++++++++++
 src/icons/emptyHeart.svg                      |   3 +
 src/icons/filledHeart.svg                     |   3 +
 src/styles/index.css                          |  47 ++++--
 src/styles/tokens.css                         |   2 +
 src/types/globals.d.ts                        |   5 +-
 src/types/interface.ts                        |  32 ++++
 src/types/widgetConfig.interface.ts           |  95 +++++++++++
 src/utils/handleUrlFilters.ts                 |  22 ++-
 25 files changed, 805 insertions(+), 118 deletions(-)
 create mode 100644 src/components/WishlistButton/WishlistButton.stories.mdx
 create mode 100644 src/components/WishlistButton/WishlistButton.test.tsx
 create mode 100644 src/components/WishlistButton/WishlistButton.tsx
 create mode 100644 src/components/WishlistButton/index.ts
 create mode 100644 src/context/widgetConfig.tsx
 create mode 100644 src/context/wishlist.tsx
 create mode 100644 src/icons/emptyHeart.svg
 create mode 100644 src/icons/filledHeart.svg
 create mode 100644 src/types/widgetConfig.interface.ts

diff --git a/.eslintrc.js b/.eslintrc.js
index 6de23f1..5f845db 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -77,6 +77,7 @@ module.exports = {
     document: true,
     window: true,
     API_URL: true,
+    WIDGET_CONFIG_URL: true,
     API_KEY: true,
     SANDBOX_KEY: true,
     TEST_URL: true,
diff --git a/README.md b/README.md
index a48c7a5..426ff96 100644
--- a/README.md
+++ b/README.md
@@ -36,7 +36,7 @@ Node and NPM setup: https://docs.npmjs.com/downloading-and-installing-node-js-an
 
 Within the root of the project (~/storefront-product-listing-page):
 
-```
+```sh
 npm install
 ```
 
@@ -44,7 +44,7 @@ npm install
 
 Install storybook: https://storybook.js.org/docs/react/get-started/install
 
-```
+```sh
 npm run storybook
 ```
 
@@ -52,25 +52,25 @@ npm run storybook
 
 build tailwind styles and run locally
 
-```
+```sh
 npm run tailwind:build
 npm run dev
 ```
 
 note: for styles to update you must run `npm run tailwind:build`
 
-And open `localhost:8080/v1/index.html` in your favorite browser.
+And open `localhost:8080/v2/index.html` in your favorite browser.
 
 ### Unit Testing
 
-```
+```sh
 npm run test
 ```
 
 ### Build
 
-```
-npm run tailwind:build //builds tailwind styles
+```sh
+npm run tailwind:build # builds tailwind styles
 npm run build
 ```
 
@@ -80,7 +80,7 @@ search.js will be built to ./dist/
 
 import the script:
 
-```
+```html
 <script type="text/javascript" src="search.js"></script>
 ```
 
@@ -90,71 +90,81 @@ Most of these will be passed with the extension if you have your storefront setu
 
 #### Store Variables needed:
 
-```
-      ENVIRONMENT_ID
-      WEBSITE_CODE
-      STORE_CODE
-      STORE_VIEW_CODE
-      CUSTOMER_GROUP_CODE
-      API_KEY
-      SANDBOX_KEY // input this key into webpack.dev.js & webpack.prod.js
+```sh
+ENVIRONMENT_ID
+WEBSITE_CODE
+STORE_CODE
+STORE_VIEW_CODE
+CUSTOMER_GROUP_CODE
+API_KEY
+SANDBOX_KEY # input this key into webpack.dev.js & webpack.prod.js
 ```
 
 - To set up sandbox keys please see here: https://experienceleague.adobe.com/docs/commerce-merchant-services/catalog-service/installation.html?lang=en
 
 #### insert into store details config
 
-```
+```ts
 const storeDetails = {
-      environmentId: 'ENVIRONMENT_ID',
-      websiteCode: 'WEBSITE_CODE',
-      storeCode: 'STORE_CODE',
-      storeViewCode: 'STORE_VIEW_CODE',
-      config: {
-        minQueryLength: '2',
-        pageSize: 8,
-        perPageConfig: {
-          pageSizeOptions: '12,24,36',
-          defaultPageSizeOption: '24',
-        },
-        currencySymbol: '$',
-        currencyRate: '1',
-        displaySearchBox: true,
-        displayOutOfStock: true,
-        allowAllProducts: false,
-        currentCategoryUrlPath?: string;
-        categoryName: '', // name of category to display
-        displaySearchBox: false, // display search box
-        displayOutOfStock: '', // "1" will return from php escapeJs and boolean is returned if called from data-service-graphql
-        displayMode: '', // "" for search || "PAGE" for category search
-        locale: '', //add locale for translations
-        priceSlider: false, //enable slider for price - EXPERIMENTAL, default is false
-        imageCarousel: false, //enable multiple image carousel - EXPERIMENTAL, default is false
-        listview: false; //add listview as an option - EXPERIMENTAL, default is false
-        optimizeImages: true, // optimize images with Fastly
-        imageBaseWidth: 200,
-        resolveCartId?: resolveCartId // Luma specific addToCart method. Enabled with the extension
-        refreshCart?: refreshCart // Luma specific addToCart method. Enabled with the extension
-        addToCart?: (sku, options, quantity)=>{} // custom add to cart callback function. Called on addToCart action
-      },
-      context: {
-        customerGroup: 'CUSTOMER_GROUP_CODE',
-      },
-      apiKey: 'API_KEY',
-    };
+  environmentId: 'ENVIRONMENT_ID',
+  websiteCode: 'WEBSITE_CODE',
+  storeCode: 'STORE_CODE',
+  storeViewCode: 'STORE_VIEW_CODE',
+  config: {
+    minQueryLength: '2',
+    pageSize: 8,
+    perPageConfig: {
+      pageSizeOptions: '12,24,36',
+      defaultPageSizeOption: '24',
+    },
+    currencySymbol: '$',
+    currencyRate: '1',
+    allowAllProducts: false,
+    currentCategoryUrlPath: "string",
+    /* name of category to display */
+    categoryName: '',
+    /* display search box */
+    displaySearchBox: false,
+    /* '1' will return from php escapeJs and boolean is returned if called from data-service-graphql */
+    displayOutOfStock: '',
+    /* "" for search || "PAGE" for category search */
+    displayMode: '',
+    /* add locale for translations */
+    locale: '',
+    /* enable slider for price - EXPERIMENTAL, default is false */
+    priceSlider: false,
+    /* enable multiple image carousel - EXPERIMENTAL, default is false */
+    imageCarousel: false,
+    /* add listview as an option - EXPERIMENTAL, default is false */
+    listview: false,
+    /* optimize images with Fastly */
+    optimizeImages: true,
+    imageBaseWidth: 200,
+    /* Luma specific addToCart method. Enabled with the extension */
+    resolveCartId: resolveCartId(),
+    /* Luma specific addToCart method. Enabled with the extension */
+    refreshCart: refreshCart(),
+    /* custom add to cart callback function. Called on addToCart action */
+    addToCart: (sku, options, quantity) => {},
+  },
+  context: {
+    customerGroup: 'CUSTOMER_GROUP_CODE',
+  },
+  apiKey: 'API_KEY',
+};
 ```
 
 Append LiveSearchPLP to the storefront window:
 
-```
+```js
 const root = document.querySelector('div.search-plp-root');
 
 setTimeout(async () => {
-      while (typeof window.LiveSearchPLP !== 'function') {
-        console.log('waiting for window.LiveSearchPLP to be available');
-        await new Promise((resolve) => setTimeout(resolve, 500));
-      }
-      window.LiveSearchPLP({ storeDetails, root });
+  while (typeof window.LiveSearchPLP !== 'function') {
+    console.log('waiting for window.LiveSearchPLP to be available');
+    await new Promise((resolve) => setTimeout(resolve, 500));
+  }
+  window.LiveSearchPLP({ storeDetails, root });
 }, 1000);
 ```
 
@@ -172,7 +182,7 @@ So how do we use CSS variables to style our components? Great question 😄
 
 Let's say as if I want to style an element with the theme's primary color. Normally, in CSS we would have done the following:
 
-```
+```tsx
 <style>
  .primaryColor {
     color: var(--primary-color)
@@ -186,11 +196,8 @@ Let's say as if I want to style an element with the theme's primary color. Norma
 
 Using Tailwind the following produces the exact same result:
 
-```
-<div class="text-primary">
-  Yippee I am a primary color!
-</div>
-
+```tsx
+<div class="text-primary">Yippee I am a primary color!</div>
 ```
 
 Looking at the config file you will notice that the CSS variable is `--color-primary` is mapped to the Tailwind CSS theme color key `primary`. this means anywhere in Tailwind you would use a Color key in a class you can now use the word `primary`.
@@ -203,7 +210,7 @@ Now default behavior:
 
 Follow the [tailwind nesting documentation](https://tailwindcss.com/docs/using-with-preprocessors#nesting). Your [postcss.config](./postcss.config.js) will look like this:
 
-```
+```js
 module.exports = {
   plugins: [
     require('postcss-import'),
@@ -217,7 +224,7 @@ module.exports = {
 
 From there you should be able to nest the tailwind classes:
 
-```
+```css
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
@@ -225,13 +232,13 @@ From there you should be able to nest the tailwind classes:
 
 within `.ds-widgets` in [token.css](./src/styles/tokens.css)
 
-```
+```css
 .ds-widgets {
   @import 'tailwindcss/base';
   @import 'tailwindcss/components';
   @import 'tailwindcss/utilities';
 
-  ...
+  ...;
 }
 ```
 
@@ -248,7 +255,7 @@ To extend and customize this repo, you must first be familiar with react:
 
 Example Implemention - adding a button to [ProductItem](./src/components/ProductItem/ProductItem.tsx):
 
-```
+```tsx
 export const ProductItem: FunctionComponent<ProductProps> = ({
   item,
   currencySymbol,
diff --git a/package.json b/package.json
index 3daf47c..d6a337f 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
   "private": true,
   "name": "@adobe/storefront-product-listing-page",
-  "version": "1.1.0",
-  "license": "Apache-2.0",
+  "version": "2.0.0",
+  "license": "MIT",
   "typings": "./dist/@types/index.d.ts",
   "engines": {
     "node": ">=18"
diff --git a/src/api/graphql.ts b/src/api/graphql.ts
index f01d6ca..d62f990 100644
--- a/src/api/graphql.ts
+++ b/src/api/graphql.ts
@@ -1,6 +1,12 @@
-const graphqlEndpoint = `${window.origin}/graphql`;
-
-async function getGraphQL(query = '', variables = {}, store = '') {
+async function getGraphQL(
+  query = '',
+  variables = {},
+  store = '',
+  baseUrl = ''
+) {
+  const graphqlEndpoint = baseUrl
+    ? `${baseUrl}/graphql`
+    : `${window.origin}/graphql`;
   const response = await fetch(graphqlEndpoint, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json', Store: store },
diff --git a/src/api/mutations.ts b/src/api/mutations.ts
index 4301730..ad1cce0 100644
--- a/src/api/mutations.ts
+++ b/src/api/mutations.ts
@@ -30,4 +30,65 @@ const ADD_TO_CART = `
   }
 `;
 
-export { ADD_TO_CART, CREATE_EMPTY_CART };
+const ADD_TO_WISHLIST = `
+  mutation addProductsToWishlist(
+    $wishlistId: ID!
+    $wishlistItems: [WishlistItemInput!]!
+  ) {
+      addProductsToWishlist(
+        wishlistId: $wishlistId
+        wishlistItems: $wishlistItems
+      ) {
+        wishlist {
+          id
+          name
+          items_count
+          items_v2 {
+            items {
+              id
+              product {
+                uid
+                name
+                sku
+              }
+            }
+          }
+        }
+      }
+  }
+`;
+
+const REMOVE_FROM_WISHLIST = `
+  mutation removeProductsFromWishlist (
+    $wishlistId: ID!
+    $wishlistItemsIds: [ID!]!
+  ) {
+    removeProductsFromWishlist(
+      wishlistId: $wishlistId
+      wishlistItemsIds: $wishlistItemsIds
+    ) {
+        wishlist {
+          id
+          name
+          items_count
+          items_v2 {
+            items {
+              id
+              product {
+                uid
+                name
+                sku
+              }
+            }
+          }
+        }
+      }
+  }
+`;
+
+export {
+  CREATE_EMPTY_CART,
+  ADD_TO_CART,
+  ADD_TO_WISHLIST,
+  REMOVE_FROM_WISHLIST,
+};
diff --git a/src/api/queries.ts b/src/api/queries.ts
index 0599367..a166d4e 100644
--- a/src/api/queries.ts
+++ b/src/api/queries.ts
@@ -193,10 +193,33 @@ const GET_CUSTOMER_CART = `
     }
 `;
 
+const GET_CUSTOMER_WISHLISTS = `
+    query customer {
+      customer {
+        wishlists {
+          id
+          name
+          items_count
+          items_v2 {
+            items {
+            id
+              product {
+              uid
+              name
+              sku
+              }
+            }
+          }
+        }
+      }
+    }
+`;
+
 export {
   ATTRIBUTE_METADATA_QUERY,
-  GET_CUSTOMER_CART,
   PRODUCT_SEARCH_QUERY,
   QUICK_SEARCH_QUERY,
   REFINE_PRODUCT_QUERY,
+  GET_CUSTOMER_CART,
+  GET_CUSTOMER_WISHLISTS,
 };
diff --git a/src/components/InputButtonGroup/InputButtonGroup.tsx b/src/components/InputButtonGroup/InputButtonGroup.tsx
index 1c319df..46cfa63 100644
--- a/src/components/InputButtonGroup/InputButtonGroup.tsx
+++ b/src/components/InputButtonGroup/InputButtonGroup.tsx
@@ -123,6 +123,9 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
       <fieldset className="ds-sdk-input__options mt-md">
         <div className="space-y-4">
           {buckets.slice(0, numberOfOptions).map((option) => {
+            if (!option.title) {
+              return null;
+            }
             const checked = isSelected(option.title);
             const noShowPriceBucketCount = option.__typename === 'RangeBucket';
             return (
diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index 185c4a5..d965898 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -367,12 +367,12 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
           )}
         </div>
       )}
-        <div className="pb-4 mt-sm">
-          {screenSize.mobile && <AddToCartButton onClick={handleAddToCart} />}
-          {isHovering && screenSize.desktop && (
-            <AddToCartButton onClick={handleAddToCart} />
-          )}
-        </div>
+      <div className="pb-4 mt-sm">
+        {screenSize.mobile && <AddToCartButton onClick={handleAddToCart} />}
+        {isHovering && screenSize.desktop && (
+          <AddToCartButton onClick={handleAddToCart} />
+        )}
+      </div>
     </div>
   );
 };
diff --git a/src/components/WishlistButton/WishlistButton.stories.mdx b/src/components/WishlistButton/WishlistButton.stories.mdx
new file mode 100644
index 0000000..bb78985
--- /dev/null
+++ b/src/components/WishlistButton/WishlistButton.stories.mdx
@@ -0,0 +1,39 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { WishlistButton } from '../WishlistButton';
+
+<Meta
+  title="PLP/WishlistButton"
+  component={WishlistButton}
+  parameters={{
+    layout: 'centered',
+  }}
+/>
+
+export const Template = (args) => <WishlistButton {...args} />;
+
+# WishlistButton
+
+```
+import { WishlistButton } from '../WishlistButton'
+```
+
+<Canvas>
+  <Story
+    name="Wishlist Default Button"
+    args={{
+      type: 'default',
+      isPressed: false,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="Wishlist Product Tile Button"
+    args={{
+      type: 'OnProductTile',
+      isPressed: false,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
diff --git a/src/components/WishlistButton/WishlistButton.test.tsx b/src/components/WishlistButton/WishlistButton.test.tsx
new file mode 100644
index 0000000..8dba494
--- /dev/null
+++ b/src/components/WishlistButton/WishlistButton.test.tsx
@@ -0,0 +1,26 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+import { render } from '@testing-library/preact';
+
+import { WishlistButton } from './WishlistButton';
+
+describe('WidgetSDK - UIKit/FilterButton', () => {
+  test('renders', () => {
+    const { container } = render(
+      <WishlistButton type="inLineWithName" productSku="SKU-123" />
+    );
+
+    const elem = container.querySelector(
+      `.ds-sdk-wishlist-inLineWithName-button`
+    );
+
+    expect(!!elem).toEqual(true);
+  });
+});
diff --git a/src/components/WishlistButton/WishlistButton.tsx b/src/components/WishlistButton/WishlistButton.tsx
new file mode 100644
index 0000000..8bf0191
--- /dev/null
+++ b/src/components/WishlistButton/WishlistButton.tsx
@@ -0,0 +1,78 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+import { FunctionComponent } from 'preact';
+
+import { useWishlist } from '../../context';
+import EmptyHeart from '../../icons/emptyHeart.svg';
+import FilledHeart from '../../icons/filledHeart.svg';
+import { WishlistItem } from '../../types/interface';
+import { AddToWishlistPlacement } from '../../types/widgetConfig.interface';
+import { classNames } from '../../utils/dom';
+
+export interface WishlistButtonProps {
+  type: AddToWishlistPlacement;
+  productSku: string;
+}
+
+export const WishlistButton: FunctionComponent<WishlistButtonProps> = ({
+  type,
+  productSku,
+}: WishlistButtonProps) => {
+  const { isAuthorized, wishlist, addItemToWishlist, removeItemFromWishlist } =
+    useWishlist();
+  const wishlistItemStatus: WishlistItem | undefined =
+    wishlist?.items_v2?.items.filter((ws) => ws.product.sku === productSku)[0];
+  const isWishlistItem = !!wishlistItemStatus;
+
+  const heart = isWishlistItem ? <FilledHeart /> : <EmptyHeart />;
+
+  const preventBubbleUp = (e: any) => {
+    // prevent <a> parent link from firing
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  const handleAddWishlist = (e: any) => {
+    preventBubbleUp(e);
+    const selectedWishlistId = wishlist?.id as string;
+    if (isAuthorized) {
+      const wishlistItem = {
+        sku: productSku,
+        quantity: 1,
+      };
+      addItemToWishlist(selectedWishlistId, wishlistItem);
+    } else {
+      // FIXME: This will need revisit for AEM/CIF since this url does not exist
+      window.location.href = `${window.origin}/customer/account/login/`;
+    }
+  };
+
+  const handleRemoveWishlist = (e: any) => {
+    preventBubbleUp(e);
+    if (!wishlistItemStatus) return;
+    const selectedWishlistId = wishlist?.id as string;
+    removeItemFromWishlist(selectedWishlistId, wishlistItemStatus.id);
+  };
+
+  return (
+    <div
+      className={classNames(
+        `ds-sdk-wishlist-${type}-button mt-[-2px]`,
+        type !== 'inLineWithName'
+          ? 'w-[30px] absolute top-0 right-0'
+          : 'w-[24px]'
+      )}
+    >
+      <div onClick={isWishlistItem ? handleRemoveWishlist : handleAddWishlist}>
+        {heart}
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/WishlistButton/index.ts b/src/components/WishlistButton/index.ts
new file mode 100644
index 0000000..c365457
--- /dev/null
+++ b/src/components/WishlistButton/index.ts
@@ -0,0 +1,11 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+export * from './WishlistButton';
+export { WishlistButton as default } from './WishlistButton';
diff --git a/src/context/cart.tsx b/src/context/cart.tsx
index 644181c..c67581c 100644
--- a/src/context/cart.tsx
+++ b/src/context/cart.tsx
@@ -36,12 +36,17 @@ const useCart = (): CartAttributesContext => {
 const CartProvider: FunctionComponent = ({ children }) => {
   const [cart, setCart] = useState<CartProps>({ cartId: '' });
   const { refreshCart, resolveCartId } = useProducts();
-  const { storeViewCode } = useStore();
+  const { storeViewCode, config } = useStore();
 
   const initializeCustomerCart = async (): Promise<string> => {
     let cartId = '';
     if (!resolveCartId) {
-      const customerResponse = await getGraphQL(GET_CUSTOMER_CART);
+      const customerResponse = await getGraphQL(
+        GET_CUSTOMER_CART,
+        {},
+        storeViewCode,
+        config?.baseUrl
+      );
       cartId = customerResponse?.data.customerCart?.id ?? '';
     } else {
       cartId = (await resolveCartId()) ?? '';
@@ -67,7 +72,12 @@ const CartProvider: FunctionComponent = ({ children }) => {
       cartItems,
     };
 
-    const response = await getGraphQL(ADD_TO_CART, variables, storeViewCode);
+    const response = await getGraphQL(
+      ADD_TO_CART,
+      variables,
+      storeViewCode,
+      config?.baseUrl
+    );
 
     return response;
   };
diff --git a/src/context/index.ts b/src/context/index.ts
index c73b2a3..8406a5d 100644
--- a/src/context/index.ts
+++ b/src/context/index.ts
@@ -8,10 +8,12 @@ it.
 */
 
 export * from './attributeMetadata';
-export * from './cart';
+export * from './store';
+export * from './widgetConfig';
+export * from './search';
+export * from './products';
 export * from './displayChange';
 export * from './events';
-export * from './products';
-export * from './search';
-export * from './store';
 export * from './translation';
+export * from './cart';
+export * from './wishlist';
diff --git a/src/context/store.tsx b/src/context/store.tsx
index 2ceac90..f03c247 100644
--- a/src/context/store.tsx
+++ b/src/context/store.tsx
@@ -74,10 +74,12 @@ const StoreContextProvider = ({
         userViewHistory: context?.userViewHistory ?? [],
       },
       apiUrl: environmentType?.toLowerCase() === 'testing' ? TEST_URL : API_URL,
-      apiKey:
-        environmentType?.toLowerCase() === 'testing' && !apiKey
-          ? SANDBOX_KEY
-          : apiKey,
+      apiKey: environmentType?.toLowerCase() === 'testing' ? API_KEY : apiKey,
+      //This is for the publix repo setup
+      // apiKey:
+      //   environmentType?.toLowerCase() === 'testing' && !apiKey
+      //     ? SANDBOX_KEY
+      //     : apiKey,
       route,
       searchQuery,
     }),
diff --git a/src/context/widgetConfig.tsx b/src/context/widgetConfig.tsx
new file mode 100644
index 0000000..88a8dfe
--- /dev/null
+++ b/src/context/widgetConfig.tsx
@@ -0,0 +1,133 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+import { createContext } from 'preact';
+import { useContext, useEffect, useState } from 'preact/hooks';
+
+import { WidgetConfigOptions } from '../types/interface';
+import { useStore } from './store';
+
+interface WidgetConfigProps extends WidgetConfigOptions {}
+
+const defaultWidgetConfigState = {
+  badge: {
+    enabled: false,
+    label: '',
+    attributeCode: '',
+    backgroundColor: '',
+  },
+  price: {
+    showNoPrice: false,
+    showRange: true,
+    showRegularPrice: true,
+    showStrikethruPrice: true,
+  },
+  attributeSlot: {
+    enabled: false,
+    attributeCode: '',
+    backgroundColor: '',
+  },
+  addToWishlist: {
+    enabled: true,
+    placement: 'inLineWithName' as const,
+  },
+  layout: {
+    defaultLayout: 'grid' as const,
+    allowedLayouts: [],
+    showToggle: true,
+  },
+  addToCart: { enabled: true },
+  stockStatusFilterLook: 'radio' as const,
+  swatches: {
+    enabled: false,
+    swatchAttributes: [],
+    swatchesOnPage: 10,
+  },
+  multipleImages: {
+    enabled: true,
+    limit: 10,
+  },
+  compare: {
+    enabled: true,
+  },
+};
+
+const WidgetConfigContext = createContext<WidgetConfigProps>(
+  defaultWidgetConfigState
+);
+
+const WidgetConfigContextProvider = ({ children }: { children?: any }) => {
+  const storeCtx = useStore();
+  const { environmentId, storeCode } = storeCtx;
+
+  const [widgetConfig, setWidgetConfig] = useState<WidgetConfigProps>(
+    defaultWidgetConfigState
+  );
+  // widgetConfigFetched is to prevent configs flashing with default setting
+  // incase of there's slowness of widget config API
+  const [widgetConfigFetched, setWidgetConfigFetched] =
+    useState<boolean>(false);
+
+  useEffect(() => {
+    if (!environmentId || !storeCode) {
+      return;
+    }
+
+    !widgetConfigFetched &&
+      getWidgetConfig(environmentId, storeCode)
+        .then((results) => {
+          const newWidgetConfig = {
+            // new merchant config could have some missing node config, so it needs to merge with default config for missing nodes
+            ...defaultWidgetConfigState,
+            ...results,
+          };
+          setWidgetConfig(newWidgetConfig);
+          setWidgetConfigFetched(true);
+        })
+        .finally(() => {
+          setWidgetConfigFetched(true);
+        });
+  }, [environmentId, storeCode]);
+
+  const getWidgetConfig = async (
+    envId: string,
+    storeCode: string
+  ): Promise<WidgetConfigOptions> => {
+    const fileName = 'widgets-config.json';
+    const S3path = `/${envId}/${storeCode}/${fileName}`;
+    const widgetConfigUrl = `${WIDGET_CONFIG_URL}${S3path}`;
+
+    const response = await fetch(widgetConfigUrl, {
+      method: 'GET',
+    });
+
+    if (response.status !== 200) {
+      return defaultWidgetConfigState;
+    }
+    const results = await response?.json();
+    return results;
+  };
+
+  const widgetConfigCtx = {
+    ...widgetConfig,
+  };
+
+  return (
+    <WidgetConfigContext.Provider value={widgetConfigCtx}>
+      {widgetConfigFetched && children}
+    </WidgetConfigContext.Provider>
+  );
+};
+
+const useWidgetConfig = () => {
+  const widgetConfigCtx = useContext(WidgetConfigContext);
+  return widgetConfigCtx;
+};
+
+export { WidgetConfigContextProvider, useWidgetConfig };
diff --git a/src/context/wishlist.tsx b/src/context/wishlist.tsx
new file mode 100644
index 0000000..ec8d802
--- /dev/null
+++ b/src/context/wishlist.tsx
@@ -0,0 +1,124 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+import { createContext, FunctionComponent } from 'preact';
+import { useContext, useEffect, useState } from 'preact/hooks';
+
+import { getGraphQL } from '../api/graphql';
+import { ADD_TO_WISHLIST, REMOVE_FROM_WISHLIST } from '../api/mutations';
+import { GET_CUSTOMER_WISHLISTS } from '../api/queries';
+import {
+  Wishlist,
+  WishlistAddItemInput,
+  WishlistResponse,
+} from '../types/interface';
+import { useStore } from './store';
+
+export interface WishlistAttributesContext {
+  isAuthorized: boolean;
+  wishlist: Wishlist | undefined;
+  allWishlist: Wishlist[] | [];
+  addItemToWishlist: (
+    wishlistId: string,
+    wishlistItem: WishlistAddItemInput
+  ) => void;
+  removeItemFromWishlist: (wishlistId: string, wishlistItemIds: string) => void;
+}
+
+const WishlistContext = createContext({} as WishlistAttributesContext);
+
+const useWishlist = (): WishlistAttributesContext => {
+  return useContext(WishlistContext);
+};
+
+const WishlistProvider: FunctionComponent = ({ children }) => {
+  const [isAuthorized, setIsAuthorized] = useState<boolean>(false);
+  const [allWishlist, setAllWishlist] = useState<Wishlist[] | []>([]);
+  const [wishlist, setWishlist] = useState<Wishlist>();
+  const { storeViewCode, config } = useStore();
+
+  useEffect(() => {
+    getWishlists();
+  }, []);
+
+  const getWishlists = async () => {
+    const { data } =
+      (await getGraphQL(
+        GET_CUSTOMER_WISHLISTS,
+        {},
+        storeViewCode,
+        config?.baseUrl
+      )) || {};
+    const wishlistResponse: WishlistResponse = data?.customer;
+    const isAuthorized = !!wishlistResponse;
+
+    setIsAuthorized(isAuthorized);
+    if (isAuthorized) {
+      // TODO: MSRCH-4278
+      // We'll need to add a way to select a wishlist
+      // // FIXME: first Wishlist is temporary solution for QA as working concept
+      const firstWishlist = wishlistResponse.wishlists[0];
+      setWishlist(firstWishlist);
+      setAllWishlist(wishlistResponse.wishlists);
+    }
+  };
+
+  const addItemToWishlist = async (
+    wishlistId: string,
+    wishlistItem: WishlistAddItemInput
+  ) => {
+    const { data } =
+      (await getGraphQL(
+        ADD_TO_WISHLIST,
+        {
+          wishlistId,
+          wishlistItems: [wishlistItem],
+        },
+        storeViewCode,
+        config?.baseUrl
+      )) || {};
+    const wishlistResponse: Wishlist = data?.addProductsToWishlist.wishlist;
+    setWishlist(wishlistResponse);
+  };
+
+  const removeItemFromWishlist = async (
+    wishlistId: string,
+    wishlistItemsIds: string
+  ) => {
+    const { data } =
+      (await getGraphQL(
+        REMOVE_FROM_WISHLIST,
+        {
+          wishlistId,
+          wishlistItemsIds: [wishlistItemsIds],
+        },
+        storeViewCode,
+        config?.baseUrl
+      )) || {};
+    const wishlistResponse: Wishlist =
+      data?.removeProductsFromWishlist.wishlist;
+    setWishlist(wishlistResponse);
+  };
+
+  const wishlistContext: WishlistAttributesContext = {
+    isAuthorized,
+    wishlist,
+    allWishlist,
+    addItemToWishlist,
+    removeItemFromWishlist,
+  };
+
+  return (
+    <WishlistContext.Provider value={wishlistContext}>
+      {children}
+    </WishlistContext.Provider>
+  );
+};
+
+export { useWishlist, WishlistProvider };
diff --git a/src/icons/emptyHeart.svg b/src/icons/emptyHeart.svg
new file mode 100644
index 0000000..dcf75a5
--- /dev/null
+++ b/src/icons/emptyHeart.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
+</svg>
diff --git a/src/icons/filledHeart.svg b/src/icons/filledHeart.svg
new file mode 100644
index 0000000..4fdb897
--- /dev/null
+++ b/src/icons/filledHeart.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
+</svg>
diff --git a/src/styles/index.css b/src/styles/index.css
index 5222881..79184ca 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,7 +1,7 @@
 /* Tokens */
 
 .ds-widgets {
-  /* ! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com */
+  /* ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com */
   /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -29,8 +29,10 @@
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
 */
-  html {
+  html,
+:host {
     line-height: 1.5;
     /* 1 */
     -webkit-text-size-adjust: 100%;
@@ -40,12 +42,14 @@
     -o-tab-size: 4;
        tab-size: 4;
     /* 3 */
-    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     /* 4 */
     font-feature-settings: normal;
     /* 5 */
     font-variation-settings: normal;
     /* 6 */
+    -webkit-tap-highlight-color: transparent;
+    /* 7 */
   }
   /*
 1. Remove the margin in all browsers.
@@ -104,8 +108,10 @@ strong {
     font-weight: bolder;
   }
   /*
-1. Use the user's configured `mono` font family by default.
-2. Correct the odd `em` font sizing in all browsers.
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
 */
   code,
 kbd,
@@ -113,8 +119,12 @@ samp,
 pre {
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     /* 1 */
-    font-size: 1em;
+    font-feature-settings: normal;
     /* 2 */
+    font-variation-settings: normal;
+    /* 3 */
+    font-size: 1em;
+    /* 4 */
   }
   /*
 Add the correct font size in all browsers.
@@ -521,6 +531,9 @@ video {
   .right-0 {
     right: 0px;
   }
+  .top-0 {
+    top: 0px;
+  }
   .z-20 {
     z-index: 20;
   }
@@ -604,6 +617,9 @@ video {
   .mt-8 {
     margin-top: 2rem;
   }
+  .mt-\[-2px\] {
+    margin-top: -2px;
+  }
   .mt-md {
     margin-top: var(--spacing-md);
   }
@@ -706,6 +722,9 @@ video {
   .w-\[24px\] {
     width: 24px;
   }
+  .w-\[30px\] {
+    width: 30px;
+  }
   .w-fit {
     width: -moz-fit-content;
     width: fit-content;
@@ -1050,9 +1069,6 @@ video {
   .pb-6 {
     padding-bottom: 1.5rem;
   }
-  .pb-8 {
-    padding-bottom: 2rem;
-  }
   .pl-3 {
     padding-left: 0.75rem;
   }
@@ -1283,6 +1299,7 @@ video {
   .ease-out {
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
   }
+  font-size: 1.6rem;
   /* Colors */
   --color-body: #fff;
   --color-on-body: #222;
@@ -1490,12 +1507,6 @@ video {
   opacity: 1;
 }
 
-@media (prefers-color-scheme: dark) {
-  .dark\:bg-gray-700 {
-    background-color: var(--color-gray-7);
-  }
-}
-
 @media (min-width: 640px) {
   .sm\:flex {
     display: flex;
@@ -1567,3 +1578,9 @@ video {
          column-gap: 2rem;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  .dark\:bg-gray-700 {
+    background-color: var(--color-gray-7);
+  }
+}
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index 61023b3..98078f0 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -4,6 +4,8 @@
   @import 'tailwindcss/components';
   @import 'tailwindcss/utilities';
 
+  font-size: 1.6rem;
+
   /* Colors */
   --color-body: #fff;
   --color-on-body: #222;
diff --git a/src/types/globals.d.ts b/src/types/globals.d.ts
index 396d152..cc86627 100644
--- a/src/types/globals.d.ts
+++ b/src/types/globals.d.ts
@@ -20,7 +20,8 @@ declare global {
   const API_URL: string;
   const WIDGET_CONFIG_URL: string;
   const LS_API_URL: string;
-  const TEST_URL: string;
   const API_KEY: string;
-  const SANDBOX_KEY: string;
+  const TEST_URL: string;
+  const FLOODGATE_CLIENT_ID: string;
+  const FLOODGATE_API_KEY: string;
 }
diff --git a/src/types/interface.ts b/src/types/interface.ts
index d956ccf..f4c513a 100644
--- a/src/types/interface.ts
+++ b/src/types/interface.ts
@@ -48,6 +48,7 @@ export interface StoreDetailsConfig {
   imageBaseWidth?: number;
   resolveCartId?: () => Promise<string | undefined>;
   refreshCart?: () => void;
+  baseUrl?: string; // base URL for store view
   addToCart?: (
     sku: string,
     options: [],
@@ -430,3 +431,34 @@ export interface GQLSortInput {
   direction: 'ASC' | 'DESC';
   attribute: string;
 }
+
+export interface WishlistItem {
+  id: string;
+  product: {
+    uid: string;
+    name: string;
+    sku: string;
+  };
+}
+
+export interface Wishlist {
+  id: string;
+  name: string;
+  items_count: number;
+  items_v2: {
+    items: WishlistItem[];
+  };
+}
+
+export interface WishlistResponse {
+  wishlists: Array<Wishlist>;
+}
+
+export interface WishlistAddItemInput {
+  quantity: number;
+  sku: string;
+  parent_sku?: string;
+  selected_options?: string[];
+}
+
+export { WidgetConfigOptions } from './widgetConfig.interface';
diff --git a/src/types/widgetConfig.interface.ts b/src/types/widgetConfig.interface.ts
new file mode 100644
index 0000000..712300e
--- /dev/null
+++ b/src/types/widgetConfig.interface.ts
@@ -0,0 +1,95 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+// Widget Configuration Options Specific Types
+export interface WidgetConfigOptions {
+  // pageSize: number; // TODO: phase-2 MSRCH-4164
+  // minQueryLength: number; // TODO: phase-2 MSRCH-4164
+  // currencySymbol: string; // TODO: phase-2 MSRCH-4164
+  // currencyRate: number; // TODO: phase-2 MSRCH-4164
+  // displayOutOfStock: boolean; // TODO: phase-2 MSRCH-4164
+  // allowAllProducts: boolean; // TODO: phase-2 MSRCH-4164
+  badge: Badge;
+  price: Price;
+  attributeSlot: AttributeSlot;
+  addToWishlist: AddToWishlist;
+  layout: Layout;
+  addToCart: AddToCart;
+  stockStatusFilterLook: StockStatusFilterLook;
+  swatches: Swatches;
+  multipleImages: MultipleImages;
+  compare: Compare;
+}
+
+type Badge = {
+  enabled: boolean;
+  label: string;
+  attributeCode: string;
+  backgroundColor: string;
+};
+
+type Price = {
+  showNoPrice: boolean;
+  showRange: boolean;
+  showRegularPrice: boolean;
+  showStrikethruPrice: boolean;
+};
+
+type AttributeSlot = {
+  enabled: boolean;
+  attributeCode: string;
+  backgroundColor: string;
+};
+
+type AddToWishlist = {
+  enabled: boolean;
+  placement: AddToWishlistPlacement;
+};
+
+export type AddToWishlistPlacement =
+  | 'inLineWithName' // default
+  | 'onCard';
+
+type Layout = {
+  defaultLayout: LayoutType;
+  allowedLayouts: LayoutType[];
+  showToggle: boolean;
+};
+
+type LayoutType =
+  | 'grid' // default
+  | 'list';
+
+type AddToCart = {
+  enabled: boolean;
+};
+
+type StockStatusFilterLook = 'radio' | 'checkbox' | 'toggle';
+
+type Swatches = {
+  enabled: boolean;
+  swatchAttributes: SwatchAttribute[];
+  swatchesOnPage: number;
+};
+
+type SwatchAttribute = {
+  attributeCode: string;
+  swatchType: SwatchAttributeType;
+};
+
+type SwatchAttributeType = 'color' | 'size';
+
+type MultipleImages = {
+  enabled: boolean;
+  limit: number;
+};
+
+type Compare = {
+  enabled: boolean;
+};
diff --git a/src/utils/handleUrlFilters.ts b/src/utils/handleUrlFilters.ts
index cbbe8e4..820d659 100644
--- a/src/utils/handleUrlFilters.ts
+++ b/src/utils/handleUrlFilters.ts
@@ -42,7 +42,7 @@ const addUrlFilter = (filter: SearchClauseInput) => {
       }
     });
   }
-  window.history.pushState({}, '', `${url.pathname}?${params}`);
+  setWindowHistory(url.pathname, params);
 };
 
 const removeUrlFilter = (name: string, option?: string) => {
@@ -54,7 +54,7 @@ const removeUrlFilter = (name: string, option?: string) => {
     allValues.splice(allValues.indexOf(option), 1);
     allValues.forEach((val) => params.append(name, val));
   }
-  window.history.pushState({}, '', `${url.pathname}?${params}`);
+  setWindowHistory(url.pathname, params);
 };
 
 const removeAllUrlFilters = () => {
@@ -66,21 +66,21 @@ const removeAllUrlFilters = () => {
       params.delete(key);
     }
   }
-  window.history.pushState({}, '', `${url.pathname}?${params.toString()}`);
+  setWindowHistory(url.pathname, params);
 };
 
 const handleUrlSort = (sortOption: string) => {
   const url = new URL(window.location.href);
   const params = new URLSearchParams(url.searchParams);
   params.set('product_list_order', sortOption);
-  window.history.pushState({}, '', `${url.pathname}?${params}`);
+  setWindowHistory(url.pathname, params);
 };
 
 const handleViewType = (viewType: string) => {
   const url = new URL(window.location.href);
   const params = new URLSearchParams(url.searchParams);
   params.set('view_type', viewType);
-  window.history.pushState({}, '', `${url.pathname}?${params}`);
+  setWindowHistory(url.pathname, params);
 };
 
 const handleUrlPageSize = (pageSizeOption: number) => {
@@ -91,7 +91,7 @@ const handleUrlPageSize = (pageSizeOption: number) => {
   } else {
     params.set('page_size', pageSizeOption.toString());
   }
-  window.history.pushState({}, '', `${url.pathname}?${params}`);
+  setWindowHistory(url.pathname, params);
 };
 
 const handleUrlPagination = (pageNumber: number) => {
@@ -102,7 +102,7 @@ const handleUrlPagination = (pageNumber: number) => {
   } else {
     params.set('p', pageNumber.toString());
   }
-  window.history.pushState({}, '', `${url.pathname}?${params}`);
+  setWindowHistory(url.pathname, params);
 };
 
 const getFiltersFromUrl = (
@@ -155,6 +155,14 @@ const getSearchParams = () => {
   return new URLSearchParams(search);
 };
 
+const setWindowHistory = (pathname: string, params: URLSearchParams) => {
+  if(params.toString() === '') {
+    window.history.pushState({}, '', `${pathname}`);
+  } else {
+    window.history.pushState({}, '', `${pathname}?${params.toString()}`);
+  }
+};
+
 export {
   addUrlFilter,
   getFiltersFromUrl,