@graphcommerce/magento-cart-items 2.104.1

package/Api/CartItem.gql.ts

@@ -0,0 +1,14 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type CartItem_BundleCartItem_Fragment = { uid: string, quantity: number, product: { __typename: 'BundleProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }>, bundle_options: Array<Types.Maybe<{ uid: string, label: string, type: string, values: Array<Types.Maybe<{ uid: string, label: string, quantity: number, price: number }>> }>> };
+
+export type CartItem_ConfigurableCartItem_Fragment = { uid: string, quantity: number, product: { __typename: 'BundleProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }>, configurable_options: Array<Types.Maybe<{ configurable_product_option_uid: string, configurable_product_option_value_uid: string, option_label: string, value_label: string }>> };
+
+export type CartItem_DownloadableCartItem_Fragment = { uid: string, quantity: number, product: { __typename: 'BundleProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }>, links?: Types.Maybe<Array<Types.Maybe<{ uid: string, price?: Types.Maybe<number>, sample_url?: Types.Maybe<string>, title?: Types.Maybe<string> }>>>, samples?: Types.Maybe<Array<Types.Maybe<{ sample_url?: Types.Maybe<string>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string> }>>> };
+
+export type CartItem_SimpleCartItem_Fragment = { uid: string, quantity: number, product: { __typename: 'BundleProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }> };
+
+export type CartItem_VirtualCartItem_Fragment = { uid: string, quantity: number, product: { __typename: 'BundleProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }> };
+
+export type CartItemFragment = CartItem_BundleCartItem_Fragment | CartItem_ConfigurableCartItem_Fragment | CartItem_DownloadableCartItem_Fragment | CartItem_SimpleCartItem_Fragment | CartItem_VirtualCartItem_Fragment;

package/Api/CartItem.graphql

@@ -0,0 +1,34 @@
+fragment CartItem on CartItemInterface @injectable {
+  uid
+  quantity
+  product {
+    uid
+    ...ProductLink
+    name
+    url_key
+    thumbnail {
+      url
+      label
+    }
+  }
+  prices {
+    discounts {
+      amount {
+        ...Money
+      }
+      label
+    }
+    price {
+      ...Money
+    }
+    row_total {
+      ...Money
+    }
+    row_total_including_tax {
+      ...Money
+    }
+    total_item_discount {
+      ...Money
+    }
+  }
+}

package/Api/CartItems.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type CartItemsFragment = { id: string, items?: Types.Maybe<Array<Types.Maybe<{ __typename: 'BundleCartItem', uid: string, quantity: number, product: { __typename: 'BundleProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }>, bundle_options: Array<Types.Maybe<{ uid: string, label: string, type: string, values: Array<Types.Maybe<{ uid: string, label: string, quantity: number, price: number }>> }>> } | { __typename: 'ConfigurableCartItem', uid: string, quantity: number, product: { __typename: 'BundleProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }>, configurable_options: Array<Types.Maybe<{ configurable_product_option_uid: string, configurable_product_option_value_uid: string, option_label: string, value_label: string }>> } | { __typename: 'DownloadableCartItem', uid: string, quantity: number, product: { __typename: 'BundleProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }>, links?: Types.Maybe<Array<Types.Maybe<{ uid: string, price?: Types.Maybe<number>, sample_url?: Types.Maybe<string>, title?: Types.Maybe<string> }>>>, samples?: Types.Maybe<Array<Types.Maybe<{ sample_url?: Types.Maybe<string>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string> }>>> } | { __typename: 'SimpleCartItem', uid: string, quantity: number, product: { __typename: 'BundleProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }> } | { __typename: 'VirtualCartItem', uid: string, quantity: number, product: { __typename: 'BundleProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }> }>>> };

package/Api/CartItems.graphql

@@ -0,0 +1,8 @@
+fragment CartItems on Cart @injectable {
+  id
+  items {
+    uid
+    __typename
+    ...CartItem
+  }
+}

package/CHANGELOG.md

@@ -0,0 +1,119 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [2.104.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-items@2.104.0...@graphcommerce/magento-cart-items@2.104.1) (2021-09-27)
+
+**Note:** Version bump only for package @graphcommerce/magento-cart-items
+
+
+
+
+
+# 2.104.0 (2021-09-27)
+
+
+### Bug Fixes
+
+* app shell consistency wip ([be995ca](https://github.com/ho-nl/m2-pwa/commit/be995ca5c3e383b89fea3759186d53af4790e99b))
+* cart item image sizes ([e7c860c](https://github.com/ho-nl/m2-pwa/commit/e7c860c785e172b9275e1a00c8b51509d6b297a8))
+* **cart:** be able to remove items from cart ([9c7f939](https://github.com/ho-nl/m2-pwa/commit/9c7f9397e9904e08014e7509d3ca63df8c062032))
+* **cart:** display prices with taxes for specific store views ([fd25541](https://github.com/ho-nl/m2-pwa/commit/fd25541646c41111f5ea53822d244591cb08b199))
+* **cart:** mobile styles ([aa601af](https://github.com/ho-nl/m2-pwa/commit/aa601af28ca7190ad90c33cc180fe63a28682519))
+* display prices excl and incl tax ([0d41135](https://github.com/ho-nl/m2-pwa/commit/0d411350e4621928411c2800be6ea02c6125049a))
+* ignore md files from triggering version updates ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
+* **image:** fix build ([b730cb6](https://github.com/ho-nl/m2-pwa/commit/b730cb6ae4e50dcf2f60e2046d6acf3047caacb3))
+* implement next-ui barrel imports ([75bea70](https://github.com/ho-nl/m2-pwa/commit/75bea703dba898f18a2a1dfa3243ebd0a4e6f0e1))
+
+
+### Features
+
+* **cart:** when a cart is not active anymore show a clear cart button ([5d04a14](https://github.com/ho-nl/m2-pwa/commit/5d04a14726c040b20b34c0b88f923aee1dff22e5))
+* **graphql:** introduced new graphql package that holds all generated files ([a3e7aa0](https://github.com/ho-nl/m2-pwa/commit/a3e7aa05540540533b5ced9a95f1f802ecbe499f))
+* **image:** introduced completely rewritten Image component ([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
+* next.js 11 ([7d61407](https://github.com/ho-nl/m2-pwa/commit/7d614075a778f488045034f74be4f75b93f63c43))
+* **playwright:** added new playwright package to enable browser testing ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
+* renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of [@reachdigital](https://github.com/reachdigital) ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
+* **theme:** restructured fonts and applied to home and category page ([6adf5f1](https://github.com/ho-nl/m2-pwa/commit/6adf5f11321bdfbf499125f1161c5abf5a1bfe4a))
+* upgraded to nextjs 11 ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
+* useFormMutationCart and simpler imports ([012f090](https://github.com/ho-nl/m2-pwa/commit/012f090e8f54d09f35d393c61ad1e2319f5a90ff))
+
+
+### Reverts
+
+* Revert "chore: upgrade @apollo/client" ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
+
+
+
+
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [2.103.11](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-items@2.103.10...@graphcommerce/magento-cart-items@2.103.11) (2021-08-27)
+
+### Bug Fixes
+
+- app shell consistency wip
+  ([be995ca](https://github.com/ho-nl/m2-pwa/commit/be995ca5c3e383b89fea3759186d53af4790e99b))
+
+## [2.103.10](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-items@2.103.9...@graphcommerce/magento-cart-items@2.103.10) (2021-08-26)
+
+### Bug Fixes
+
+- **cart:** mobile styles
+  ([aa601af](https://github.com/ho-nl/m2-pwa/commit/aa601af28ca7190ad90c33cc180fe63a28682519))
+
+## [2.103.8](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-items@2.103.7...@graphcommerce/magento-cart-items@2.103.8) (2021-08-18)
+
+### Bug Fixes
+
+- **cart:** display prices with taxes for specific store views
+  ([fd25541](https://github.com/ho-nl/m2-pwa/commit/fd25541646c41111f5ea53822d244591cb08b199))
+- display prices excl and incl tax
+  ([0d41135](https://github.com/ho-nl/m2-pwa/commit/0d411350e4621928411c2800be6ea02c6125049a))
+
+# [2.103.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-items@2.102.3...@graphcommerce/magento-cart-items@2.103.0) (2021-08-12)
+
+### Features
+
+- upgraded to nextjs 11
+  ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
+
+## [2.102.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-items@2.102.1...@graphcommerce/magento-cart-items@2.102.2) (2021-08-09)
+
+### Reverts
+
+- Revert "chore: upgrade @apollo/client"
+  ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
+
+# [2.102.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-items@2.101.6...@graphcommerce/magento-cart-items@2.102.0) (2021-08-06)
+
+### Features
+
+- **theme:** restructured fonts and applied to home and category page
+  ([6adf5f1](https://github.com/ho-nl/m2-pwa/commit/6adf5f11321bdfbf499125f1161c5abf5a1bfe4a))
+
+## [2.101.6](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-items@2.101.5...@graphcommerce/magento-cart-items@2.101.6) (2021-08-04)
+
+### Bug Fixes
+
+- cart item image sizes
+  ([e7c860c](https://github.com/ho-nl/m2-pwa/commit/e7c860c785e172b9275e1a00c8b51509d6b297a8))
+
+# [2.101.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-items@2.100.19...@graphcommerce/magento-cart-items@2.101.0) (2021-07-26)
+
+### Features
+
+- **playwright:** added new playwright package to enable browser testing
+  ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
+
+## [2.100.11](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-items@2.100.10...@graphcommerce/magento-cart-items@2.100.11) (2021-07-20)
+
+### Bug Fixes
+
+- ignore md files from triggering version updates
+  ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))

package/CartItem/CartItem.tsx

@@ -0,0 +1,210 @@
+import { Badge, makeStyles, Theme, Link } from '@material-ui/core'
+import { Image } from '@graphcommerce/image'
+import { useDisplayInclTax } from '@graphcommerce/magento-cart'
+import { useProductLink } from '@graphcommerce/magento-product'
+import { Money } from '@graphcommerce/magento-store'
+import { UseStyles, responsiveVal } from '@graphcommerce/next-ui'
+import clsx from 'clsx'
+import PageLink from 'next/link'
+import React, { PropsWithChildren } from 'react'
+import { CartItemFragment } from '../Api/CartItem.gql'
+import DeliveryLabel from '../DeliveryLabel/DeliveryLabel'
+import RemoveItemFromCartFab from '../RemoveItemFromCart/RemoveItemFromCartFab'
+import UpdateItemQuantity from '../UpdateItemQuantity/UpdateItemQuantity'
+
+const rowImageSize = responsiveVal(70, 125)
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      display: 'grid',
+      gridTemplate: `
+      "picture itemName itemName itemName"
+      "picture itemOptions itemOptions itemOptions"
+      "picture itemPrice quantity rowPrice"
+        `,
+      gridTemplateColumns: `${rowImageSize} 1fr minmax(120px, 1fr) 1fr`,
+      columnGap: theme.spacings.sm,
+      alignItems: 'baseline',
+      ...theme.typography.body1,
+      marginBottom: theme.spacings.lg,
+      marginTop: theme.spacings.md,
+      [theme.breakpoints.up('sm')]: {
+        gridTemplate: `
+        "picture itemName itemName itemName itemName"
+        "picture itemOptions itemPrice quantity rowPrice"
+      `,
+        gridTemplateColumns: `${rowImageSize} 4fr 1fr minmax(120px, 1fr) minmax(75px, 1fr)`,
+        marginBottom: theme.spacings.md,
+      },
+    },
+    itemWithoutOptions: {
+      display: 'grid',
+      gridTemplate: `
+      "picture itemName itemName itemName"
+      "picture itemPrice quantity rowPrice"`,
+      alignItems: 'center',
+      gridTemplateColumns: `${rowImageSize} 1fr minmax(120px, 1fr) 1fr`,
+      [theme.breakpoints.up('sm')]: {
+        gridTemplate: `
+        "picture itemName itemPrice quantity rowPrice"
+      `,
+        gridTemplateColumns: `${rowImageSize} 4fr 1fr minmax(120px, 1fr) minmax(75px, 1fr)`,
+      },
+    },
+    picture: {
+      gridArea: 'picture',
+      width: rowImageSize,
+      height: rowImageSize,
+      padding: responsiveVal(5, 10),
+      border: `1px solid rgba(0,0,0,0.15)`,
+      borderRadius: '50%',
+      alignSelf: 'center',
+    },
+    badge: {
+      '& > button': {
+        background: theme.palette.text.primary,
+        color: theme.palette.common.white,
+        transition: 'opacity .15s ease',
+        '&:hover, &:active, &:visited': {
+          background: theme.palette.text.primary,
+          opacity: 0.75,
+        },
+        '& .MuiSvgIcon-root': {
+          fontSize: 24,
+        },
+        [theme.breakpoints.down('sm')]: {
+          width: 30,
+          height: 30,
+          minHeight: 'unset',
+          '& .MuiSvgIcon-root': {
+            fontSize: 20,
+          },
+        },
+      },
+    },
+    productLink: {
+      display: 'block',
+      width: '100%',
+      borderRadius: '50%',
+      overflow: 'hidden',
+    },
+    image: {
+      gridColumn: 1,
+      backgroundColor: theme.palette.background.paper,
+      objectFit: 'cover',
+      display: 'block',
+      width: '110% !important',
+      height: '110% !important',
+      marginLeft: '-5%',
+      marginTop: '-5%',
+    },
+    itemName: {
+      gridArea: 'itemName',
+      color: theme.palette.text.primary,
+      textDecoration: 'none',
+      flexWrap: 'nowrap',
+      maxWidth: 'max-content',
+    },
+    itemNameWithOptions: {
+      alignSelf: 'flex-end',
+    },
+    itemPrice: {
+      gridArea: 'itemPrice',
+      textAlign: 'left',
+      color: theme.palette.primary.mutedText,
+      alignSelf: 'center',
+      [theme.breakpoints.up('sm')]: {
+        alignSelf: 'flex-start',
+      },
+    },
+    quantity: {
+      gridArea: 'quantity',
+      justifySelf: 'center',
+      transform: 'translateY(0)',
+      [theme.breakpoints.up('sm')]: {
+        transform: 'translateY(-6px)',
+      },
+    },
+    rowPrice: {
+      gridArea: 'rowPrice',
+      textAlign: 'right',
+      alignSelf: 'center',
+      [theme.breakpoints.up('sm')]: {
+        alignSelf: 'flex-start',
+      },
+    },
+    cellNoOptions: {
+      textAlign: 'left',
+    },
+  }),
+  { name: 'CartItem' },
+)
+
+export type CartItemProps = PropsWithChildren<CartItemFragment> &
+  UseStyles<typeof useStyles> & { withOptions?: boolean }
+
+export default function CartItem(props: CartItemProps) {
+  const { product, uid, prices, quantity, children, withOptions } = props
+  const { name } = product
+  const classes = useStyles()
+  const productLink = useProductLink(product)
+  const inclTaxes = useDisplayInclTax()
+
+  return (
+    <div className={clsx(classes.root, !withOptions && classes.itemWithoutOptions)}>
+      <Badge
+        color='default'
+        badgeContent={<RemoveItemFromCartFab uid={uid} className={classes.badge} />}
+        component='div'
+        className={classes.picture}
+        overlap='circular'
+      >
+        <PageLink href={productLink}>
+          <a className={classes.productLink}>
+            {product?.thumbnail?.url && (
+              <Image
+                src={product.thumbnail.url ?? ''}
+                layout='fill'
+                alt={product.thumbnail.label ?? product.name ?? ''}
+                sizes={responsiveVal(70, 125)}
+                className={classes.image}
+              />
+            )}
+          </a>
+        </PageLink>
+      </Badge>
+
+      <PageLink href={productLink}>
+        <Link
+          variant='h6'
+          className={clsx(classes.itemName, withOptions && classes.itemNameWithOptions)}
+        >
+          {name}
+          <DeliveryLabel />
+        </Link>
+      </PageLink>
+
+      <div className={classes.itemPrice}>
+        {inclTaxes ? (
+          <Money
+            value={(prices?.row_total_including_tax?.value ?? 0) / quantity}
+            currency={prices?.price.currency}
+          />
+        ) : (
+          <Money {...prices?.price} />
+        )}
+      </div>
+
+      <div className={classes.quantity}>
+        <UpdateItemQuantity uid={uid} quantity={quantity} />
+      </div>
+
+      <div className={classes.rowPrice}>
+        <Money {...(inclTaxes ? prices?.row_total_including_tax : prices?.row_total)} /> <br />
+      </div>
+
+      {children}
+    </div>
+  )
+}

package/CartItem/CartItemOptionDropdown.tsx

@@ -0,0 +1,55 @@
+import { makeStyles, MenuItem, Select, SelectProps, Theme } from '@material-ui/core'
+import React from 'react'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      marginRight: theme.spacings.xs,
+    },
+    label: {
+      fontSize: theme.typography.fontSize,
+      letterSpacing: 1,
+      textTransform: 'uppercase',
+      fontWeight: 500,
+      color: theme.palette.secondary.mutedText,
+    },
+    select: {
+      padding: `${theme.spacings.xxs} ${theme.spacings.xxs}`,
+      border: `1px solid ${theme.palette.divider}`,
+      borderRadius: 8,
+      minWidth: 120,
+      '&:before': {
+        borderBottom: 'none',
+      },
+      '&:hover, &:active, &:focus': {
+        '&:before': {
+          borderBottom: 'none',
+        },
+        background: theme.palette.grey['100'],
+      },
+    },
+  }),
+  { name: 'CartItemOptionDropdown' },
+)
+
+export type CartItemOptionDropdownProps = {
+  label: string
+} & Pick<SelectProps, 'onChange'>
+
+export default function CartItemOptionDropdown(props: CartItemOptionDropdownProps) {
+  const { onChange, label } = props
+  const classes = useStyles()
+
+  return (
+    <>
+      <div className={classes.root}>
+        <div className={classes.label}>{label}</div>
+        <Select value={1} onChange={onChange} className={classes.select}>
+          <MenuItem value={1}>One</MenuItem>
+          <MenuItem value={2}>Two</MenuItem>
+          <MenuItem value={3}>Three</MenuItem>
+        </Select>
+      </div>
+    </>
+  )
+}

package/CartItems/CartItems.tsx

@@ -0,0 +1,28 @@
+import { useCartQuery } from '@graphcommerce/magento-cart'
+import { AnimatedRow, RenderType, TypeRenderer } from '@graphcommerce/next-ui'
+import { AnimatePresence } from 'framer-motion'
+import React from 'react'
+import { CartItemsFragment } from '../Api/CartItems.gql'
+import { CartItemsQueryDocument } from './CartItemsQuery.gql'
+
+export type CartItemRenderer = TypeRenderer<NonNullable<NonNullable<CartItemsFragment['items']>[0]>>
+
+export type CartProps = { renderer: CartItemRenderer }
+
+export default function CartItems(props: CartProps) {
+  const { data } = useCartQuery(CartItemsQueryDocument)
+  const { renderer } = props
+
+  return (
+    <AnimatePresence initial={false}>
+      {data?.cart?.items?.map((item) => {
+        if (!item?.uid || !data.cart?.id) return null
+        return (
+          <AnimatedRow key={item.uid}>
+            <RenderType renderer={renderer} {...item} />
+          </AnimatedRow>
+        )
+      })}
+    </AnimatePresence>
+  )
+}

package/CartItems/CartItemsQuery.gql.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const CartItemsQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CartItemsQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cart"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"cart_id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"quantity"}},{"kind":"Field","name":{"kind":"Name","value":"product"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"url_key"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"thumbnail"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"prices"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"discounts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}},{"kind":"Field","name":{"kind":"Name","value":"price"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"row_total"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"row_total_including_tax"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"total_item_discount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"BundleCartItem"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"bundle_options"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"values"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"quantity"}},{"kind":"Field","name":{"kind":"Name","value":"price"}}]}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ConfigurableCartItem"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurable_options"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurable_product_option_uid"}},{"kind":"Field","name":{"kind":"Name","value":"configurable_product_option_value_uid"}},{"kind":"Field","name":{"kind":"Name","value":"option_label"}},{"kind":"Field","name":{"kind":"Name","value":"value_label"}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"DownloadableCartItem"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"links"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"price"}},{"kind":"Field","name":{"kind":"Name","value":"sample_url"}},{"kind":"Field","name":{"kind":"Name","value":"title"}}]}},{"kind":"Field","name":{"kind":"Name","value":"samples"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"sample_url"}},{"kind":"Field","name":{"kind":"Name","value":"sort_order"}},{"kind":"Field","name":{"kind":"Name","value":"title"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<CartItemsQuery, CartItemsQueryVariables>;
+export type CartItemsQueryVariables = Types.Exact<{
+  cartId: Types.Scalars['String'];
+}>;
+
+
+export type CartItemsQuery = { cart?: Types.Maybe<{ id: string, items?: Types.Maybe<Array<Types.Maybe<{ __typename: 'BundleCartItem', uid: string, quantity: number, bundle_options: Array<Types.Maybe<{ uid: string, label: string, type: string, values: Array<Types.Maybe<{ uid: string, label: string, quantity: number, price: number }>> }>>, product: { __typename: 'BundleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }> } | { __typename: 'ConfigurableCartItem', uid: string, quantity: number, configurable_options: Array<Types.Maybe<{ configurable_product_option_uid: string, configurable_product_option_value_uid: string, option_label: string, value_label: string }>>, product: { __typename: 'BundleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }> } | { __typename: 'DownloadableCartItem', uid: string, quantity: number, links?: Types.Maybe<Array<Types.Maybe<{ uid: string, price?: Types.Maybe<number>, sample_url?: Types.Maybe<string>, title?: Types.Maybe<string> }>>>, samples?: Types.Maybe<Array<Types.Maybe<{ sample_url?: Types.Maybe<string>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string> }>>>, product: { __typename: 'BundleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }> } | { __typename: 'SimpleCartItem', uid: string, quantity: number, product: { __typename: 'BundleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }> } | { __typename: 'VirtualCartItem', uid: string, quantity: number, product: { __typename: 'BundleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }> }>>> }> };

package/CartItems/CartItemsQuery.graphql

@@ -0,0 +1,5 @@
+query CartItemsQuery($cartId: String!) {
+  cart(cart_id: $cartId) {
+    ...CartItems
+  }
+}

package/DeliveryLabel/DeliveryLabel.tsx

@@ -0,0 +1,67 @@
+import { IconButton, makeStyles, Popover, Theme } from '@material-ui/core'
+import React from 'react'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      display: 'inline-block',
+    },
+    labelContainer: {
+      padding: 5,
+    },
+    label: {
+      borderRadius: '100%',
+      width: 10,
+      height: 10,
+      background: '#01D26A', // TODO (yvo): order statuses. green, yellow, red
+    },
+    popover: {
+      '& > .MuiPaper-root': {
+        padding: 6,
+      },
+    },
+  }),
+  { name: 'DeliveryLabel' },
+)
+
+export type DeliveryLabelProps = Record<string, unknown>
+
+export default function DeliveryLabel(props: DeliveryLabelProps) {
+  const classes = useStyles()
+  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null)
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  const open = Boolean(anchorEl)
+
+  return (
+    <div className={classes.root}>
+      <IconButton component='button' className={classes.labelContainer} onClick={handleClick}>
+        <div className={classes.label} />
+      </IconButton>
+      <Popover
+        id={open ? 'simple-popover' : undefined}
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'center',
+        }}
+        className={classes.popover}
+      >
+        Ordered before <b>23:00</b>, delivery <b>tomorrow</b>
+      </Popover>
+    </div>
+  )
+}

package/RemoveItemFromCart/RemoveItemFromCart.gql.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const RemoveItemFromCartDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"RemoveItemFromCart"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"uid"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"removeItemFromCart"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"cart_id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"cart_item_uid"},"value":{"kind":"Variable","name":{"kind":"Name","value":"uid"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cart"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"quantity"}},{"kind":"Field","name":{"kind":"Name","value":"product"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"url_key"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"thumbnail"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"prices"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"discounts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}},{"kind":"Field","name":{"kind":"Name","value":"price"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"row_total"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"row_total_including_tax"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"total_item_discount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"BundleCartItem"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"bundle_options"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"values"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"quantity"}},{"kind":"Field","name":{"kind":"Name","value":"price"}}]}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ConfigurableCartItem"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurable_options"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurable_product_option_uid"}},{"kind":"Field","name":{"kind":"Name","value":"configurable_product_option_value_uid"}},{"kind":"Field","name":{"kind":"Name","value":"option_label"}},{"kind":"Field","name":{"kind":"Name","value":"value_label"}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"DownloadableCartItem"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"links"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"price"}},{"kind":"Field","name":{"kind":"Name","value":"sample_url"}},{"kind":"Field","name":{"kind":"Name","value":"title"}}]}},{"kind":"Field","name":{"kind":"Name","value":"samples"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"sample_url"}},{"kind":"Field","name":{"kind":"Name","value":"sort_order"}},{"kind":"Field","name":{"kind":"Name","value":"title"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"total_quantity"}},{"kind":"Field","name":{"kind":"Name","value":"prices"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"grand_total"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"applied_taxes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}},{"kind":"Field","name":{"kind":"Name","value":"discounts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}},{"kind":"Field","name":{"kind":"Name","value":"subtotal_excluding_tax"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"subtotal_including_tax"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"subtotal_with_discount_excluding_tax"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"shipping_addresses"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"selected_shipping_method"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"carrier_code"}},{"kind":"Field","name":{"kind":"Name","value":"method_code"}},{"kind":"Field","name":{"kind":"Name","value":"method_title"}},{"kind":"Field","name":{"kind":"Name","value":"carrier_title"}},{"kind":"Field","name":{"kind":"Name","value":"amount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"available_shipping_methods"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"carrier_code"}},{"kind":"Field","name":{"kind":"Name","value":"method_code"}},{"kind":"Field","name":{"kind":"Name","value":"price_incl_tax"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"price_excl_tax"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<RemoveItemFromCartMutation, RemoveItemFromCartMutationVariables>;
+export type RemoveItemFromCartMutationVariables = Types.Exact<{
+  cartId: Types.Scalars['String'];
+  uid: Types.Scalars['ID'];
+}>;
+
+
+export type RemoveItemFromCartMutation = { removeItemFromCart?: Types.Maybe<{ cart: { __typename: 'Cart', id: string, total_quantity: number, items?: Types.Maybe<Array<Types.Maybe<{ __typename: 'BundleCartItem', uid: string, quantity: number, bundle_options: Array<Types.Maybe<{ uid: string, label: string, type: string, values: Array<Types.Maybe<{ uid: string, label: string, quantity: number, price: number }>> }>>, product: { __typename: 'BundleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }> } | { __typename: 'ConfigurableCartItem', uid: string, quantity: number, configurable_options: Array<Types.Maybe<{ configurable_product_option_uid: string, configurable_product_option_value_uid: string, option_label: string, value_label: string }>>, product: { __typename: 'BundleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }> } | { __typename: 'DownloadableCartItem', uid: string, quantity: number, links?: Types.Maybe<Array<Types.Maybe<{ uid: string, price?: Types.Maybe<number>, sample_url?: Types.Maybe<string>, title?: Types.Maybe<string> }>>>, samples?: Types.Maybe<Array<Types.Maybe<{ sample_url?: Types.Maybe<string>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string> }>>>, product: { __typename: 'BundleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }> } | { __typename: 'SimpleCartItem', uid: string, quantity: number, product: { __typename: 'BundleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }> } | { __typename: 'VirtualCartItem', uid: string, quantity: number, product: { __typename: 'BundleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }> }>>>, prices?: Types.Maybe<{ __typename: 'CartPrices', grand_total?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }>, applied_taxes?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, subtotal_excluding_tax?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }>, subtotal_including_tax?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }>, subtotal_with_discount_excluding_tax?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }>, shipping_addresses: Array<Types.Maybe<{ selected_shipping_method?: Types.Maybe<{ carrier_code: string, method_code: string, method_title: string, carrier_title: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, available_shipping_methods?: Types.Maybe<Array<Types.Maybe<{ carrier_code: string, method_code?: Types.Maybe<string>, price_incl_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, price_excl_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>> }>> } }> };

package/RemoveItemFromCart/RemoveItemFromCart.graphql

@@ -0,0 +1,10 @@
+mutation RemoveItemFromCart($cartId: String!, $uid: ID!) {
+  removeItemFromCart(input: { cart_id: $cartId, cart_item_uid: $uid }) {
+    cart {
+      id
+      __typename
+      ...CartItemCountChanged
+      ...CartItems
+    }
+  }
+}

package/RemoveItemFromCart/RemoveItemFromCartFab.tsx

@@ -0,0 +1,27 @@
+import { Fab } from '@material-ui/core'
+import { useFormGqlMutationCart, ApolloCartErrorAlert } from '@graphcommerce/magento-cart'
+import { SvgImage, iconClose } from '@graphcommerce/next-ui'
+import React from 'react'
+import {
+  RemoveItemFromCartDocument,
+  RemoveItemFromCartMutationVariables,
+} from './RemoveItemFromCart.gql'
+
+export type RemoveItemFromCartProps = Omit<RemoveItemFromCartMutationVariables, 'cartId'> &
+  Omit<JSX.IntrinsicElements['form'], 'onSubmit' | 'noValidate'>
+
+export default function RemoveItemFromCartFab(props: RemoveItemFromCartProps) {
+  const { uid, ...formProps } = props
+  const form = useFormGqlMutationCart(RemoveItemFromCartDocument, { defaultValues: { uid } })
+  const { handleSubmit, formState, error } = form
+  const submitHandler = handleSubmit(() => {})
+
+  return (
+    <form noValidate onSubmit={submitHandler} {...formProps}>
+      <Fab aria-label='Remove Product' size='small' type='submit' disabled={formState.isSubmitting}>
+        <SvgImage src={iconClose} size='small' shade='inverted' alt='close' loading='eager' />
+      </Fab>
+      <ApolloCartErrorAlert error={error} />
+    </form>
+  )
+}

package/UpdateItemQuantity/UpdateItemQuantity.gql.ts

@@ -0,0 +1,14 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const UpdateItemQuantityDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateItemQuantity"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"uid"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"quantity"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Float"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateCartItems"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"cart_id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"cart_items"},"value":{"kind":"ListValue","values":[{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"cart_item_uid"},"value":{"kind":"Variable","name":{"kind":"Name","value":"uid"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"quantity"},"value":{"kind":"Variable","name":{"kind":"Name","value":"quantity"}}}]}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cart"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"quantity"}},{"kind":"Field","name":{"kind":"Name","value":"product"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"url_key"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"thumbnail"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"prices"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"discounts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}},{"kind":"Field","name":{"kind":"Name","value":"price"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"row_total"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"row_total_including_tax"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"total_item_discount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"BundleCartItem"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"bundle_options"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"values"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"quantity"}},{"kind":"Field","name":{"kind":"Name","value":"price"}}]}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ConfigurableCartItem"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurable_options"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurable_product_option_uid"}},{"kind":"Field","name":{"kind":"Name","value":"configurable_product_option_value_uid"}},{"kind":"Field","name":{"kind":"Name","value":"option_label"}},{"kind":"Field","name":{"kind":"Name","value":"value_label"}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"DownloadableCartItem"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"links"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"price"}},{"kind":"Field","name":{"kind":"Name","value":"sample_url"}},{"kind":"Field","name":{"kind":"Name","value":"title"}}]}},{"kind":"Field","name":{"kind":"Name","value":"samples"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"sample_url"}},{"kind":"Field","name":{"kind":"Name","value":"sort_order"}},{"kind":"Field","name":{"kind":"Name","value":"title"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"total_quantity"}},{"kind":"Field","name":{"kind":"Name","value":"prices"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"grand_total"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"applied_taxes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}},{"kind":"Field","name":{"kind":"Name","value":"discounts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}},{"kind":"Field","name":{"kind":"Name","value":"subtotal_excluding_tax"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"subtotal_including_tax"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"subtotal_with_discount_excluding_tax"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"shipping_addresses"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"selected_shipping_method"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"carrier_code"}},{"kind":"Field","name":{"kind":"Name","value":"method_code"}},{"kind":"Field","name":{"kind":"Name","value":"method_title"}},{"kind":"Field","name":{"kind":"Name","value":"carrier_title"}},{"kind":"Field","name":{"kind":"Name","value":"amount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"available_shipping_methods"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"carrier_code"}},{"kind":"Field","name":{"kind":"Name","value":"method_code"}},{"kind":"Field","name":{"kind":"Name","value":"price_incl_tax"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"price_excl_tax"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<UpdateItemQuantityMutation, UpdateItemQuantityMutationVariables>;
+export type UpdateItemQuantityMutationVariables = Types.Exact<{
+  cartId: Types.Scalars['String'];
+  uid: Types.Scalars['ID'];
+  quantity: Types.Scalars['Float'];
+}>;
+
+
+export type UpdateItemQuantityMutation = { updateCartItems?: Types.Maybe<{ cart: { __typename: 'Cart', id: string, total_quantity: number, items?: Types.Maybe<Array<Types.Maybe<{ __typename: 'BundleCartItem', uid: string, quantity: number, bundle_options: Array<Types.Maybe<{ uid: string, label: string, type: string, values: Array<Types.Maybe<{ uid: string, label: string, quantity: number, price: number }>> }>>, product: { __typename: 'BundleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }> } | { __typename: 'ConfigurableCartItem', uid: string, quantity: number, configurable_options: Array<Types.Maybe<{ configurable_product_option_uid: string, configurable_product_option_value_uid: string, option_label: string, value_label: string }>>, product: { __typename: 'BundleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }> } | { __typename: 'DownloadableCartItem', uid: string, quantity: number, links?: Types.Maybe<Array<Types.Maybe<{ uid: string, price?: Types.Maybe<number>, sample_url?: Types.Maybe<string>, title?: Types.Maybe<string> }>>>, samples?: Types.Maybe<Array<Types.Maybe<{ sample_url?: Types.Maybe<string>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string> }>>>, product: { __typename: 'BundleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }> } | { __typename: 'SimpleCartItem', uid: string, quantity: number, product: { __typename: 'BundleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }> } | { __typename: 'VirtualCartItem', uid: string, quantity: number, product: { __typename: 'BundleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }> }>>>, prices?: Types.Maybe<{ __typename: 'CartPrices', grand_total?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }>, applied_taxes?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, subtotal_excluding_tax?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }>, subtotal_including_tax?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }>, subtotal_with_discount_excluding_tax?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }>, shipping_addresses: Array<Types.Maybe<{ selected_shipping_method?: Types.Maybe<{ carrier_code: string, method_code: string, method_title: string, carrier_title: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, available_shipping_methods?: Types.Maybe<Array<Types.Maybe<{ carrier_code: string, method_code?: Types.Maybe<string>, price_incl_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, price_excl_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>> }>> } }> };

package/UpdateItemQuantity/UpdateItemQuantity.graphql

@@ -0,0 +1,12 @@
+mutation UpdateItemQuantity($cartId: String!, $uid: ID!, $quantity: Float!) {
+  updateCartItems(
+    input: { cart_id: $cartId, cart_items: [{ cart_item_uid: $uid, quantity: $quantity }] }
+  ) {
+    cart {
+      id
+      __typename
+      ...CartItemCountChanged
+      ...CartItems
+    }
+  }
+}

package/UpdateItemQuantity/UpdateItemQuantity.tsx

@@ -0,0 +1,38 @@
+import { useFormGqlMutationCart, ApolloCartErrorAlert } from '@graphcommerce/magento-cart'
+import { TextInputNumber } from '@graphcommerce/next-ui'
+import { useFormAutoSubmit } from '@graphcommerce/react-hook-form'
+import React from 'react'
+import {
+  UpdateItemQuantityDocument,
+  UpdateItemQuantityMutationVariables,
+} from './UpdateItemQuantity.gql'
+
+export type UpdateItemQuantityProps = Omit<UpdateItemQuantityMutationVariables, 'cartId'>
+
+export default function UpdateItemQuantity(props: UpdateItemQuantityProps) {
+  const { uid, quantity } = props
+  const form = useFormGqlMutationCart(UpdateItemQuantityDocument, {
+    defaultValues: { uid, quantity },
+    mode: 'onChange',
+  })
+
+  const { muiRegister, required, handleSubmit, formState, error } = form
+
+  const submit = handleSubmit(() => {})
+  useFormAutoSubmit({ form, submit })
+
+  return (
+    <form noValidate onSubmit={submit}>
+      <TextInputNumber
+        size='small'
+        variant='outlined'
+        inputProps={{ min: 1 }}
+        error={!!formState.errors.quantity}
+        required={required.quantity}
+        {...muiRegister('quantity', { required: required.quantity })}
+        helperText={formState.errors.quantity?.message}
+      />
+      <ApolloCartErrorAlert error={error} />
+    </form>
+  )
+}

package/index.ts

@@ -0,0 +1,20 @@
+export * from './Api/CartItem.gql'
+export * from './Api/CartItems.gql'
+
+export * from './CartItem/CartItem'
+export { default as CartItem } from './CartItem/CartItem'
+
+export * from './CartItem/CartItemOptionDropdown'
+export { default as CartItemOptionDropdown } from './CartItem/CartItemOptionDropdown'
+
+export * from './CartItems/CartItems'
+export { default as CartItems } from './CartItems/CartItems'
+
+export * from './DeliveryLabel/DeliveryLabel'
+export { default as DeliveryLabel } from './DeliveryLabel/DeliveryLabel'
+
+export * from './RemoveItemFromCart/RemoveItemFromCartFab'
+export { default as RemoveItemFromCartFab } from './RemoveItemFromCart/RemoveItemFromCartFab'
+
+export * from './UpdateItemQuantity/UpdateItemQuantity'
+export { default as UpdateItemQuantity } from './UpdateItemQuantity/UpdateItemQuantity'

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@graphcommerce/magento-cart-items",
+  "version": "2.104.1",
+  "sideEffects": false,
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "browserslist": [
+    "extends @graphcommerce/browserslist-config-pwa"
+  ],
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "devDependencies": {
+    "@graphcommerce/browserslist-config-pwa": "^3.0.1",
+    "@graphcommerce/eslint-config-pwa": "^3.0.1",
+    "@graphcommerce/prettier-config-pwa": "^3.0.1",
+    "@graphcommerce/typescript-config-pwa": "^3.0.1",
+    "@playwright/test": "^1.14.1"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.3.21",
+    "@graphcommerce/graphql": "^2.103.1",
+    "@graphcommerce/image": "^2.104.1",
+    "@graphcommerce/magento-cart": "^3.0.1",
+    "@graphcommerce/magento-customer": "^3.0.1",
+    "@graphcommerce/magento-product": "^3.0.1",
+    "@graphcommerce/magento-store": "^3.0.1",
+    "@graphcommerce/next-ui": "^3.0.1",
+    "@graphcommerce/react-hook-form": "^2.102.1",
+    "@graphql-typed-document-node/core": "^3.1.0",
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/lab": "^4.0.0-alpha.60",
+    "clsx": "^1.1.1",
+    "framer-motion": "^4.1.17",
+    "next": "^11.1.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}