@magento/venia-pwa-live-search 1.0.0-alpha10

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@magento/venia-pwa-live-search",
+  "version": "1.0.0-alpha10",
+  "description": "Live Search PWA Studio extension.",
+  "main": "src/index.jsx",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": " "
+  },
+  "repository": "https://github.com/github:magento/pwa-studio",
+  "license": "MIT",
+  "dependencies": {
+    "@adobe/magento-storefront-event-collector": "^1.13.0",
+    "@adobe/magento-storefront-events-sdk": "^1.13.0",
+    "@magento/pwa-buildpack": "~11.5.3",
+    "@magento/storefront-search-as-you-type": "~1.0.4",
+    "@magento/venia-ui": "~11.5.0",
+    "currency-symbol-map": "^5.1.0",
+    "lodash": "^4.17.21"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2"
+  },
+  "pwa-studio": {
+    "targets": {
+      "intercept": "src/targets/intercept"
+    }
+  }
+}

package/postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    plugins: [require('tailwindcss/nesting')]
+};

package/src/api/fragments.js

@@ -0,0 +1,193 @@
+/*
+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.
+*/
+
+const Facet = `
+    fragment Facet on Aggregation {
+        title
+        attribute
+        buckets {
+            title
+            __typename
+            ... on CategoryView {
+                name
+                count
+                path
+            }
+            ... on ScalarBucket {
+                count
+            }
+            ... on RangeBucket {
+                from
+                to
+                count
+            }
+            ... on StatsBucket {
+                min
+                max
+            }
+        }
+    }
+`;
+
+const ProductView = `
+    fragment ProductView on ProductSearchItem {
+        productView {
+            id
+            __typename
+            sku
+            name
+            inStock
+            url
+            urlKey
+            images {
+                label
+                url
+                roles
+            }
+            ... on ComplexProductView {
+                priceRange {
+                    maximum {
+                        final {
+                            amount {
+                                value
+                                currency
+                            }
+                        }
+                        regular {
+                            amount {
+                                value
+                                currency
+                            }
+                        }
+                    }
+                    minimum {
+                        final {
+                            amount {
+                                value
+                                currency
+                            }
+                        }
+                        regular {
+                            amount {
+                                value
+                                currency
+                            }
+                        }
+                    }
+                }
+                options {
+                    id
+                    title
+                    values {
+                        title
+                        ... on ProductViewOptionValueSwatch {
+                            id
+                            inStock
+                            type
+                            value
+                        }
+                    }
+                }
+            }
+            ... on SimpleProductView {
+                price {
+                    final {
+                        amount {
+                            value
+                            currency
+                        }
+                    }
+                    regular {
+                        amount {
+                            value
+                            currency
+                        }
+                    }
+                }
+            }
+        }
+        highlights {
+            attribute
+            value
+            matched_words
+        }
+    }
+`;
+
+const Product = `
+    fragment Product on ProductSearchItem {
+        product {
+            __typename
+            sku
+            description {
+                html
+            }
+            short_description {
+                html
+            }
+            name
+            canonical_url
+            small_image {
+                url
+            }
+            image {
+                url
+            }
+            thumbnail {
+                url
+            }
+            price_range {
+                minimum_price {
+                    fixed_product_taxes {
+                        amount {
+                            value
+                            currency
+                        }
+                        label
+                    }
+                    regular_price {
+                        value
+                        currency
+                    }
+                    final_price {
+                        value
+                        currency
+                    }
+                    discount {
+                        percent_off
+                        amount_off
+                    }
+                }
+                maximum_price {
+                    fixed_product_taxes {
+                        amount {
+                            value
+                            currency
+                        }
+                        label
+                    }
+                    regular_price {
+                        value
+                        currency
+                    }
+                    final_price {
+                        value
+                        currency
+                    }
+                    discount {
+                        percent_off
+                        amount_off
+                    }
+                }
+            }
+        }
+    }
+`;
+
+export { Facet, ProductView, Product };

package/src/api/graphql.js

@@ -0,0 +1,26 @@
+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
+        },
+        body: JSON.stringify({
+            query,
+            variables
+        })
+    });
+
+    return response.json();
+}
+
+export { getGraphQL };

package/src/api/mutations.js

@@ -0,0 +1,94 @@
+const CREATE_EMPTY_CART = `
+  mutation createEmptyCart($input: createEmptyCartInput) {
+    createEmptyCart(input: $input)
+  }
+`;
+
+const ADD_TO_CART = `
+  mutation addProductsToCart(
+    $cartId: String!
+    $cartItems: [CartItemInput!]!
+  ) {
+      addProductsToCart(
+        cartId: $cartId
+        cartItems: $cartItems
+      ) {
+          cart {
+            items {
+              product {
+                name
+                sku
+              }
+              quantity
+            }
+          }
+          user_errors {
+            code
+            message
+          }
+      }
+  }
+`;
+
+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
+};

package/src/api/queries.js

@@ -0,0 +1,225 @@
+/*
+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 { Facet, Product, ProductView } from './fragments';
+
+const ATTRIBUTE_METADATA_QUERY = `
+    query attributeMetadata {
+        attributeMetadata {
+        sortable {
+            label
+            attribute
+            numeric
+        }
+        filterableInSearch {
+            label
+            attribute
+            numeric
+        }
+        }
+    }
+`;
+
+const QUICK_SEARCH_QUERY = `
+    query quickSearch(
+        $phrase: String!
+        $pageSize: Int = 20
+        $currentPage: Int = 1
+        $filter: [SearchClauseInput!]
+        $sort: [ProductSearchSortInput!]
+        $context: QueryContextInput
+    ) {
+        productSearch(
+            phrase: $phrase
+            page_size: $pageSize
+            current_page: $currentPage
+            filter: $filter
+            sort: $sort
+            context: $context
+        ) {
+            suggestions
+            items {
+                ...Product
+            }
+            page_info {
+                current_page
+                page_size
+                total_pages
+            }
+        }
+    }
+    ${Product}
+`;
+
+const PRODUCT_SEARCH_QUERY = `
+    query productSearch(
+        $phrase: String!
+        $pageSize: Int
+        $currentPage: Int = 1
+        $filter: [SearchClauseInput!]
+        $sort: [ProductSearchSortInput!]
+        $context: QueryContextInput
+    ) {
+        productSearch(
+            phrase: $phrase
+            page_size: $pageSize
+            current_page: $currentPage
+            filter: $filter
+            sort: $sort
+            context: $context
+        ) {
+            total_count
+            items {
+                ...Product
+                ...ProductView
+            }
+            facets {
+                ...Facet
+            }
+            page_info {
+                current_page
+                page_size
+                total_pages
+            }
+        }
+        attributeMetadata {
+            sortable {
+                label
+                attribute
+                numeric
+            }
+        }
+    }
+    ${Product}
+    ${ProductView}
+    ${Facet}
+`;
+
+const REFINE_PRODUCT_QUERY = `
+    query refineProduct(
+        $optionIds: [String!]!
+        $sku: String!
+    ) {
+        refineProduct(
+            optionIds: $optionIds
+            sku: $sku
+        ) {
+            __typename
+            id
+            sku
+            name
+            inStock
+            url
+            urlKey
+            images {
+                label
+                url
+                roles
+            }
+            ... on SimpleProductView {
+                price {
+                    final {
+                        amount {
+                            value
+                        }
+                    }
+                    regular {
+                        amount {
+                            value
+                        }
+                    }
+                }
+            }
+            ... on ComplexProductView {
+                options {
+                    id
+                    title
+                    required
+                    values {
+                        id
+                        title
+                    }
+                }
+                priceRange {
+                    maximum {
+                        final {
+                            amount {
+                                value
+                            }
+                        }
+                        regular {
+                            amount {
+                                value
+                            }
+                        }
+                    }
+                    minimum {
+                        final {
+                            amount {
+                                value
+                            }
+                        }
+                        regular {
+                            amount {
+                                value
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+`;
+
+const GET_CUSTOMER_CART = `
+    query customerCart {
+        customerCart {
+            id
+            items {
+            id
+            product {
+                name
+                sku
+            }
+            quantity
+            }
+        }
+    }
+`;
+
+const GET_CUSTOMER_WISHLISTS = `
+    query customer {
+      customer {
+        wishlists {
+          id
+          name
+          items_count
+          items_v2 {
+            items {
+            id
+              product {
+              uid
+              name
+              sku
+              }
+            }
+          }
+        }
+      }
+    }
+`;
+
+export {
+    ATTRIBUTE_METADATA_QUERY,
+    PRODUCT_SEARCH_QUERY,
+    QUICK_SEARCH_QUERY,
+    REFINE_PRODUCT_QUERY,
+    GET_CUSTOMER_CART,
+    GET_CUSTOMER_WISHLISTS
+};