@graphcommerce/magento-product-configurable 4.13.2 → 4.14.0-canary.10

package/CHANGELOG.md

@@ -1,6 +1,48 @@
 # Change Log
 
-## 4.13.2
+## 4.14.0-canary.10
+
+## 4.14.0-canary.9
+
+## 4.14.0-canary.8
+
+## 4.14.0-canary.7
+
+### Patch Changes
+
+- [#1738](https://github.com/graphcommerce-org/graphcommerce/pull/1738) [`41f907dd4`](https://github.com/graphcommerce-org/graphcommerce/commit/41f907dd4eea20624ba87bdea48d9c330b8c0762) - Fix issue where the configurable cart item couldn’t be properly loaded ([@paales](https://github.com/paales))
+
+## 4.14.0-canary.6
+
+### Minor Changes
+
+- [#1737](https://github.com/graphcommerce-org/graphcommerce/pull/1737) [`1f5ece0c2`](https://github.com/graphcommerce-org/graphcommerce/commit/1f5ece0c24524f33561614adf09f669d305666b0) - Allow Simple Products to show the Confgurable product page. Created a new defaultConfigurableOptionsSelection utility function to set up all the data correctly. ([@paales](https://github.com/paales))
+
+### Patch Changes
+
+- [#1737](https://github.com/graphcommerce-org/graphcommerce/pull/1737) [`c278116d4`](https://github.com/graphcommerce-org/graphcommerce/commit/c278116d4c6f984a0b542fbf9426b8fc676ab36e) - Render the configured_variant image in the cart ([@paales](https://github.com/paales))
+
+- [#1737](https://github.com/graphcommerce-org/graphcommerce/pull/1737) [`3916fdd7a`](https://github.com/graphcommerce-org/graphcommerce/commit/3916fdd7a801b381df6ce1708bf388a2c581eab1) - Make sure configurable_options without swatch data still render correctly ([@paales](https://github.com/paales))
+
+## 4.14.0-canary.5
+
+## 4.14.0-canary.4
+
+### Patch Changes
+
+- [#1733](https://github.com/graphcommerce-org/graphcommerce/pull/1733) [`29eb2e94f`](https://github.com/graphcommerce-org/graphcommerce/commit/29eb2e94f04b120bc060ab945ff28aabf3f3ecfd) - Dependency issue with Magento 2.4.5 ([@paales](https://github.com/paales))
+
+## 4.14.0-canary.3
+
+## 4.14.0-canary.2
+
+### Patch Changes
+
+- [#1718](https://github.com/graphcommerce-org/graphcommerce/pull/1718) [`37e86cdc8`](https://github.com/graphcommerce-org/graphcommerce/commit/37e86cdc86ccca3db77d6c59b1e14c8112bb7893) - Remove usage of PropsWithChildren ([@paales](https://github.com/paales))
+
+## 4.13.2-canary.1
+
+## 4.13.2-canary.0
 
 ## 4.13.1
 

package/ConfigurableCartItem/ConfigurableCartItem.graphql

@@ -8,4 +8,11 @@ fragment ConfigurableCartItem on ConfigurableCartItem @inject(into: ["CartItem"]
   configurable_customizable: customizable_options {
     ...SelectedCustomizableOption
   }
+  configured_variant {
+    uid
+    name
+    thumbnail {
+      ...ProductImage
+    }
+  }
 }

package/ConfigurableCartItem/ConfigurableCartItem.tsx

@@ -3,9 +3,23 @@ import { ConfigurableCartItemFragment } from './ConfigurableCartItem.gql'
 import { OptionsList } from './OptionsList'
 
 export function ConfigurableCartItem(props: ConfigurableCartItemFragment & CartItemProps) {
-  const { configurable_options, ...cartItemProps } = props
+  const {
+    configurable_options,
+    configurable_customizable,
+    configured_variant,
+    product,
+    ...cartItemProps
+  } = props
   return (
-    <CartItem {...cartItemProps} withOptions>
+    <CartItem
+      {...cartItemProps}
+      product={{
+        ...product,
+        name: configured_variant?.name ?? product.name,
+        thumbnail: configured_variant?.thumbnail ?? product.thumbnail,
+      }}
+      withOptions
+    >
       <OptionsList configurable_options={configurable_options} />
     </CartItem>
   )

package/ConfigurableCartItem/OptionsList.tsx

@@ -2,7 +2,7 @@ import { extendableComponent } from '@graphcommerce/next-ui'
 import { Box, SxProps, Theme } from '@mui/material'
 import { ConfigurableCartItemFragment } from './ConfigurableCartItem.gql'
 
-type CartItemOptionsListProps = ConfigurableCartItemFragment & {
+type CartItemOptionsListProps = Partial<ConfigurableCartItemFragment> & {
   sx?: SxProps<Theme>
 }
 

package/ConfigurableContext/ConfigurableContext.tsx

@@ -1,7 +1,6 @@
 import {
   useContext,
   createContext,
-  PropsWithChildren,
   Context,
   useState,
   Dispatch,
@@ -12,7 +11,10 @@ import {
 import { ConfigurableProductFormFragment } from './ConfigurableProductForm.gql'
 import cheapestVariant from './cheapestVariant'
 
-type ConfigurableProductFormProps = ConfigurableProductFormFragment & { sku: string }
+type ConfigurableProductFormProps = ConfigurableProductFormFragment & {
+  sku: string
+  children?: React.ReactNode
+}
 
 export type Selected = { [attrCode: string]: number }
 export type Variants = NonNullable<ConfigurableProductFormProps['variants']>
@@ -114,9 +116,7 @@ function traverseAttrTree(selection: Selected, attrTree: AttributeTree | undefin
   return variantList
 }
 
-export function ConfigurableContextProvider(
-  props: PropsWithChildren<ConfigurableProductFormProps>,
-) {
+export function ConfigurableContextProvider(props: ConfigurableProductFormProps) {
   const { children, sku, configurable_options, variants: providedVariants } = props
   const [selection, select] = useState<Selected>({})
 

package/SwatchList.tsx

@@ -8,7 +8,7 @@ import { SwatchSize, SwatchTypeRenderer } from './Swatches/types'
 import { ProductListItemConfigurableFragment } from './components/ProductListItemConfigurable/ProductListItemConfigurable.gql'
 
 type SwatchListProps = {
-  attributes: string[]
+  attributes?: string[]
   configurable_options?: Maybe<ProductListItemConfigurableFragment['configurable_options']>
 }
 
@@ -18,7 +18,8 @@ const renderer: SwatchTypeRenderer = {
   ColorSwatchData,
 }
 
-export function SwatchList({ attributes, configurable_options }: SwatchListProps) {
+export function SwatchList(props: SwatchListProps) {
+  const { attributes = [], configurable_options } = props
   const options =
     configurable_options?.filter((option) => attributes.includes(option?.attribute_code ?? '')) ??
     []

package/components/ConfigurableProductOptions/ConfigurableProductOptions.tsx

@@ -38,7 +38,7 @@ export function ConfigurableProductOptions(props: ConfigurableProductOptionsProp
       filterNonNullableKeys(product.configurable_options, ['attribute_code', 'label']).map(
         (option) => ({
           ...option,
-          values: filterNonNullableKeys(option.values, ['uid', 'swatch_data']).map((ov) => ({
+          values: filterNonNullableKeys(option.values, ['uid']).map((ov) => ({
             value: ov.uid,
             ...ov,
           })),

package/components/ProductListItemConfigurable/ProductListItemConfigurable.tsx

@@ -14,7 +14,7 @@ export type ProductListItemConfigurableActionProps = ProductListItemConfigurable
 
 export type ProdustListItemConfigurableProps = ProductListItemConfigurableFragment &
   ProductListItemProps & {
-    swatchLocations?: Record<OverlayAreaKeys, string[]>
+    swatchLocations?: Partial<Record<OverlayAreaKeys, string[]>>
   }
 
 export function ProductListItemConfigurable(props: ProdustListItemConfigurableProps) {

package/graphql/ConfigurableOptionsSelection.graphql

@@ -1,24 +1,9 @@
 fragment ConfigurableOptionsSelection on ConfigurableProduct @injectable {
   configurable_product_options_selection(configurableOptionValueUids: $selectedOptions) {
-    configurable_options {
-      attribute_code
-      label
-      values {
-        is_available
-        is_use_default
-        label
-        swatch {
-          value
-          ... on ImageSwatchData {
-            thumbnail
-          }
-        }
-        uid
-      }
-    }
+    __typename
     options_available_for_selection {
+      __typename
       attribute_code
-      option_value_uids
     }
     media_gallery {
       __typename
@@ -29,21 +14,7 @@ fragment ConfigurableOptionsSelection on ConfigurableProduct @injectable {
       ...ProductVideo
     }
     variant {
-      uid
-      name
-      thumbnail {
-        ...ProductImage
-      }
-      price_range {
-        minimum_price {
-          final_price {
-            ...Money
-          }
-          regular_price {
-            ...Money
-          }
-        }
-      }
+      ...ConfiguredVariant
     }
   }
 }

package/graphql/ConfiguredVariant.graphql

@@ -0,0 +1,15 @@
+fragment ConfiguredVariant on SimpleProduct @injectable {
+  __typename
+  uid
+  name
+  price_range {
+    minimum_price {
+      final_price {
+        ...Money
+      }
+      regular_price {
+        ...Money
+      }
+    }
+  }
+}

package/graphql/GetConfigurableOptionsSelection.graphql

@@ -1,5 +1,6 @@
 query GetConfigurableOptionsSelection($urlKey: String!, $selectedOptions: [ID!] = []) {
   products(filter: { url_key: { eq: $urlKey } }) {
+    __typename
     items {
       __typename
       uid

package/hooks/useConfigurableOptionsSelection.ts

@@ -19,7 +19,6 @@ export function useConfigurableOptionsSelection({
   const cpc = useQuery(GetConfigurableOptionsSelectionDocument, {
     variables: { urlKey: url_key ?? '', selectedOptions },
     skip: !url_key || !selectedOptions.length,
-    ssr: false,
   })
 
   const configured = findByTypename(

package/index.ts

@@ -5,3 +5,4 @@ export * from './ConfigurableProductAddToCart/ConfigurableProductAddToCart'
 export * from './ConfigurableProductPage.gql'
 export * from './graphql'
 export * from './hooks'
+export * from './utils'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product-configurable",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.13.2",
+  "version": "4.14.0-canary.10",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -19,18 +19,18 @@
     "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@graphcommerce/graphql": "4.30.1",
-    "@graphcommerce/graphql-mesh": "4.30.1",
-    "@graphcommerce/image": "4.30.1",
-    "@graphcommerce/magento-cart": "4.13.2",
-    "@graphcommerce/magento-cart-items": "4.13.2",
-    "@graphcommerce/magento-category": "4.13.2",
-    "@graphcommerce/magento-customer": "4.13.2",
-    "@graphcommerce/magento-product": "4.13.2",
-    "@graphcommerce/magento-product-simple": "4.13.2",
-    "@graphcommerce/magento-store": "4.13.2",
-    "@graphcommerce/next-ui": "4.30.1",
-    "@graphcommerce/react-hook-form": "4.30.1"
+    "@graphcommerce/graphql": "4.31.0-canary.6",
+    "@graphcommerce/graphql-mesh": "4.31.0-canary.6",
+    "@graphcommerce/image": "4.31.0-canary.6",
+    "@graphcommerce/magento-cart": "4.14.0-canary.10",
+    "@graphcommerce/magento-cart-items": "4.14.0-canary.10",
+    "@graphcommerce/magento-category": "4.14.0-canary.10",
+    "@graphcommerce/magento-customer": "4.14.0-canary.10",
+    "@graphcommerce/magento-product": "4.14.0-canary.10",
+    "@graphcommerce/magento-product-simple": "4.14.0-canary.10",
+    "@graphcommerce/magento-store": "4.14.0-canary.10",
+    "@graphcommerce/next-ui": "4.31.0-canary.6",
+    "@graphcommerce/react-hook-form": "4.31.0-canary.6"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",

package/utils/DefaultConfigurableOptionsSelection.graphql

@@ -0,0 +1,13 @@
+fragment DefaultConfigurableOptionsSelection on Products {
+  items {
+    uid
+    __typename
+    url_key
+    ...ProductPageGallery
+    ...ConfigurableOptions
+
+    ... on SimpleProduct {
+      ...ConfiguredVariant
+    }
+  }
+}

package/utils/defaultConfigurableOptionsSelection.ts

@@ -0,0 +1,116 @@
+import { ApolloClient } from '@graphcommerce/graphql'
+import { AddProductsToCartFormProps } from '@graphcommerce/magento-product'
+import { findByTypename, filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { GetConfigurableOptionsSelectionDocument } from '../graphql'
+import { DefaultConfigurableOptionsSelectionFragment } from './DefaultConfigurableOptionsSelection.gql'
+
+type BaseQuery =
+  | { products?: DefaultConfigurableOptionsSelectionFragment | null | undefined }
+  | null
+  | undefined
+
+let warned = false
+/**
+ * This method writes the GetConfigurableOptionsSelection query result to the Apollo cache and sets
+ * the defaultValues for the `<AddProductsToCartForm defaultValues={{}}/>`.
+ */
+export function defaultConfigurableOptionsSelection<Q extends BaseQuery = BaseQuery>(
+  urlKey: string,
+  client: ApolloClient<object>,
+  query: Q,
+): Q & Pick<AddProductsToCartFormProps, 'defaultValues'> {
+  const requested = query?.products?.items?.find((p) => p?.url_key === urlKey)
+  if (!requested || requested?.__typename !== 'SimpleProduct')
+    return { ...query, defaultValues: {} }
+
+  const configurable = findByTypename(query?.products?.items, 'ConfigurableProduct')
+  const variant = findByTypename(query?.products?.items, 'SimpleProduct')
+
+  if (!configurable?.url_key || !variant) return { ...query, products: { items: [requested] } }
+
+  const selectedOptions: string[] = []
+
+  const options = filterNonNullableKeys(configurable.configurable_options)
+
+  const warnFor: string[] = []
+  options.forEach((o, index) => {
+    const simpleValue = variant[o.attribute_code]
+    if (!simpleValue) warnFor.push(o.attribute_code)
+
+    filterNonNullableKeys(o.values).forEach((v) => {
+      if (Buffer.from(v.uid, 'base64').toString('utf8').endsWith(`/${simpleValue}`)) {
+        selectedOptions[index] = v.uid
+      }
+    })
+  })
+
+  if (process.env.NODE_ENV !== 'production' && warnFor.length && !warned) {
+    warned = true
+    const warnStr = warnFor.join(', ')
+    console.warn(
+      `[@graphcommerce/magento-product-configurable]: The following attributes were found in the configurable options: ${warnStr}. However, they were not found in the simple product. Please add the following attributes to the simple product: ${warnStr}`,
+    )
+  }
+  if (warnFor.length) {
+    return {
+      ...query,
+      products: { items: [requested] },
+      defaultValues: {},
+    }
+  }
+
+  if (!selectedOptions.length) return { ...query, defaultValues: {} }
+
+  /**
+   * We're using writeQuery to the Apollo Client cache, to to avoid a second request to the GraphQL
+   * API. However, this is resulting in somewhat brittle code, because when the
+   * GetConfigurableOptionsSelectionDocument query is modified, this code can break.
+   *
+   * Even if this code won't break the frontend will throw an hydration error if addtional fields
+   * need to be requested.
+   *
+   * The code below by default does the exact same thing as:
+   *
+   * ```ts
+   * await client.query({
+   *   query: GetConfigurableOptionsSelectionDocument,
+   *   variables: { urlKey: configurable.url_key, selectedOptions },
+   * })
+   * ```
+   */
+  client.cache.writeQuery({
+    query: GetConfigurableOptionsSelectionDocument,
+    variables: { urlKey: configurable.url_key, selectedOptions },
+    data: {
+      products: {
+        __typename: 'Products',
+        items: [
+          {
+            __typename: 'ConfigurableProduct',
+            uid: configurable.uid,
+            configurable_product_options_selection: {
+              __typename: 'ConfigurableProductOptionsSelection',
+              media_gallery: variant.media_gallery,
+              variant: {
+                __typename: 'SimpleProduct',
+                price_range: variant.price_range,
+                uid: variant.uid,
+                name: variant.name,
+              },
+              options_available_for_selection: options.map(({ attribute_code }) => ({
+                __typename: 'ConfigurableOptionAvailableForSelection' as const,
+                attribute_code,
+              })),
+            },
+          },
+        ],
+      },
+    },
+  })
+
+  return {
+    ...query,
+    products: { items: [configurable] },
+    defaultValues: { cartItems: [{ selected_options: selectedOptions }] },
+  }
+}

package/utils/index.ts

@@ -0,0 +1 @@
+export * from './defaultConfigurableOptionsSelection'