Merge pull request #2048 from graphcommerce-org/feature/enable-config…

…urable-options-in-wishlist-GCOM-1188

Feature/enable configurable options in wishlist gcom 1188

.changeset/chilly-brooms-move.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-product-configurable': patch
+---
+
+When selecitng a non-existing option on a configurable product page, the price would not update.

.changeset/empty-ads-run.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/graphql': patch
+---
+
+Include @connection, @export, @defer and @nonreactive in schema, so they can be used, in queries

.changeset/flat-emus-look.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-customer': patch
+---
+
+Allow passing skip to useCustomerQuery and useGuestQuery

.changeset/fresh-ways-hide.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-product': patch
+---
+
+When a product has a discount price, render that on the product page

.changeset/red-ghosts-cry.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/next-ui': patch
+---
+
+filterNonNullable keys simplified the types which caused unions to be collapsed

.changeset/red-poems-kick.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/graphql': patch
+---
+
+Allow configurable_product_options_selection to be stored in the localStorage so queries can be resolved correctly

.changeset/serious-fishes-do.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-product': patch
+---
+
+The product page will now also load all information that a ProductListItem will load

.changeset/tall-tips-float.md

@@ -0,0 +1,9 @@
+---
+'@graphcommerce/magento-product-configurable': minor
+'@graphcommerce/magento-product-bundle': minor
+'@graphcommerce/magento-wishlist': minor
+'@graphcommerce/magento-product': minor
+'@graphcommerce/ecommerce-ui': minor
+---
+
+Wishlist will now support configurable products and uses the ActionCardLayout

examples/magento-graphcms/components/Layout/LayoutNavigation.tsx

@@ -86,7 +86,11 @@ export function LayoutNavigation(props: LayoutNavigationProps) {
             >
               <Trans id='Customer Service' />
             </MenuFabSecondaryItem>,
-            <WishlistMenuFabItem key='wishlist' icon={<IconSvg src={iconHeart} size='medium' />}>
+            <WishlistMenuFabItem
+              onClick={() => selection.set(false)}
+              key='wishlist'
+              icon={<IconSvg src={iconHeart} size='medium' />}
+            >
               <Trans id='Wishlist' />
             </WishlistMenuFabItem>,
             <DarkLightModeMenuSecondaryItem key='darkmode' />,

examples/magento-graphcms/locales/de.po

@@ -145,6 +145,9 @@ msgstr "Schließen Sie die Zahlung auf der Website Ihrer Bank ab."
 msgid "Complete your purchase"
 msgstr "Schließen Sie Ihren Kauf ab"
 
+msgid "Configure"
+msgstr "Konfigurieren"
+
 msgid "Confirm new email"
 msgstr "Neue E-Mail bestätigen"
 
@@ -319,9 +322,6 @@ msgstr "Heller Modus"
 msgid "Loading"
 msgstr "Laden"
 
-msgid "Loading wishlist"
-msgstr "Wunschliste wird geladen"
-
 msgid "Loading your account"
 msgstr "Ihr Kundenkonto wird geladen"
 

examples/magento-graphcms/locales/en.po

@@ -145,6 +145,9 @@ msgstr "Complete the payment on your bank’s website."
 msgid "Complete your purchase"
 msgstr "Complete your purchase"
 
+msgid "Configure"
+msgstr "Configure"
+
 msgid "Confirm new email"
 msgstr "Confirm new email"
 
@@ -319,9 +322,6 @@ msgstr "Light Mode"
 msgid "Loading"
 msgstr "Loading"
 
-msgid "Loading wishlist"
-msgstr "Loading wishlist"
-
 msgid "Loading your account"
 msgstr "Loading your account"
 

examples/magento-graphcms/locales/es.po

@@ -145,6 +145,9 @@ msgstr "Complete el pago en el sitio web de su banco."
 msgid "Complete your purchase"
 msgstr "Complete su compra"
 
+msgid "Configure"
+msgstr "Configurar"
+
 msgid "Confirm new email"
 msgstr "Confirmar nuevo correo electrónico"
 
@@ -319,9 +322,6 @@ msgstr "Modo claro"
 msgid "Loading"
 msgstr "Cargando"
 
-msgid "Loading wishlist"
-msgstr "Cargando lista de deseos"
-
 msgid "Loading your account"
 msgstr "Cargando tu cuenta"
 

examples/magento-graphcms/locales/fr.po

@@ -145,6 +145,9 @@ msgstr "Complétez le paiement sur le site de votre banque."
 msgid "Complete your purchase"
 msgstr "Complétez votre achat"
 
+msgid "Configure"
+msgstr "Configurer"
+
 msgid "Confirm new email"
 msgstr "Confirmer le nouvel email"
 
@@ -319,9 +322,6 @@ msgstr "Mode clair"
 msgid "Loading"
 msgstr "Chargement"
 
-msgid "Loading wishlist"
-msgstr "Chargement de la liste de souhaits"
-
 msgid "Loading your account"
 msgstr "Chargement de votre compte"
 

examples/magento-graphcms/locales/it.po

@@ -145,6 +145,9 @@ msgstr "Completa il pagamento sul sito del tuo banco."
 msgid "Complete your purchase"
 msgstr "Completa il tuo acquisto"
 
+msgid "Configure"
+msgstr "Configura"
+
 msgid "Confirm new email"
 msgstr "Conferma nuovo indirizzo email"
 
@@ -319,9 +322,6 @@ msgstr "Modalità chiara"
 msgid "Loading"
 msgstr "Caricamento"
 
-msgid "Loading wishlist"
-msgstr "Caricamento lista desideri"
-
 msgid "Loading your account"
 msgstr "Caricamento del tuo account"
 

examples/magento-graphcms/locales/nl.po

@@ -145,6 +145,9 @@ msgstr "Voltooi de betaling op uw bank's website."
 msgid "Complete your purchase"
 msgstr "Maak uw bestelling compleet"
 
+msgid "Configure"
+msgstr "Configureer"
+
 msgid "Confirm new email"
 msgstr "Bevestig nieuwe email"
 
@@ -319,9 +322,6 @@ msgstr "Lichte modus"
 msgid "Loading"
 msgstr "Laden"
 
-msgid "Loading wishlist"
-msgstr "Ophalen verlanglijst"
-
 msgid "Loading your account"
 msgstr "Uw account laden"
 

examples/magento-graphcms/pages/p/[url].tsx

@@ -217,8 +217,8 @@ export const getStaticProps: GetPageStaticProps = async ({ params, locale }) =>
   const productPage = staticClient.query({ query: ProductPage2Document, variables: { urlKey } })
   const layout = staticClient.query({ query: LayoutDocument, fetchPolicy: 'cache-first' })
 
-  const product = productPage.then((pp) =>
-    pp.data.products?.items?.find((p) => p?.url_key === urlKey),
+  const product = productPage.then(
+    (pp) => pp.data.products?.items?.find((p) => p?.url_key === urlKey),
   )
 
   const pages = hygraphPageContent(staticClient, 'product/global', product, true)

examples/magento-graphcms/pages/wishlist/index.tsx

@@ -2,10 +2,9 @@ import { WaitForQueries } from '@graphcommerce/ecommerce-ui'
 import { PageOptions } from '@graphcommerce/framer-next-pages'
 import { PageMeta, StoreConfigDocument } from '@graphcommerce/magento-store'
 import {
-  WishlistItems,
   useWishlistItems,
-  WishlistItem,
-  WishlistItemBase,
+  WishlistItemActionCard,
+  WishlistItemActionCardProps,
 } from '@graphcommerce/magento-wishlist'
 import {
   GetStaticProps,
@@ -18,40 +17,48 @@ import {
 } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
-import { Container } from '@mui/material'
+import { CircularProgress, Container, Theme, useMediaQuery } from '@mui/material'
 import { LayoutOverlay, LayoutOverlayProps } from '../../components'
 import { graphqlSharedClient } from '../../lib/graphql/graphqlSsrClient'
 
 type Props = Record<string, unknown>
 type GetPageStaticProps = GetStaticProps<LayoutOverlayProps, Props>
 
 function WishlistPage() {
-  const wishlistItemsData = useWishlistItems()
+  const wishlistItems = useWishlistItems()
+
+  const isMobile = useMediaQuery<Theme>((theme) => theme.breakpoints.down('md'), {
+    defaultMatches: false,
+  })
+
+  const size: WishlistItemActionCardProps['size'] = isMobile ? 'small' : 'large'
 
   return (
     <>
       <PageMeta title={i18n._(/* i18n */ 'Wishlist')} metaRobots={['noindex']} />
-      <LayoutOverlayHeader>
-        <LayoutTitle component='span' size='small'>
+      <LayoutOverlayHeader
+        switchPoint={0}
+        noAlign
+        sx={(theme) => ({
+          '&.noAlign': { marginBottom: theme.spacings.sm },
+          '& + .MuiContainer-root': { marginBottom: theme.spacings.sm },
+        })}
+      >
+        <LayoutTitle component='span' size='small' icon={iconHeart}>
           <Trans id='Wishlist' />
         </LayoutTitle>
       </LayoutOverlayHeader>
 
       <WaitForQueries
-        waitFor={[wishlistItemsData]}
+        waitFor={[wishlistItems]}
         fallback={
-          <Container maxWidth='md'>
-            <FullPageMessage
-              title={<Trans id='Loading wishlist' />}
-              icon={<IconSvg src={iconHeart} size='xxl' />}
-            >
-              <Trans id='We are fetching your favorite products, one moment please!' />
-            </FullPageMessage>
-          </Container>
+          <FullPageMessage title={<Trans id='Loading' />} icon={<CircularProgress />}>
+            <Trans id='We are fetching your favorite products, one moment please!' />
+          </FullPageMessage>
         }
       >
         <Container maxWidth='md'>
-          {!wishlistItemsData.data || wishlistItemsData.data.length === 0 ? (
+          {wishlistItems.items.length === 0 ? (
             <FullPageMessage
               title={<Trans id='Your wishlist is empty' />}
               icon={<IconSvg src={iconHeart} size='xxl' />}
@@ -63,29 +70,13 @@ function WishlistPage() {
             >
               <Trans id='Discover our collection and add items to your wishlist!' />
             </FullPageMessage>
-          ) : null}
-
-          {wishlistItemsData.data && wishlistItemsData.data.length > 0 ? (
+          ) : (
             <>
-              <LayoutTitle icon={iconHeart}>
-                <Trans id='Wishlist' />
-              </LayoutTitle>
-              <Container maxWidth='md'>
-                <WishlistItems
-                  renderer={{
-                    BundleProduct: WishlistItemBase,
-                    ConfigurableProduct: WishlistItemBase,
-                    DownloadableProduct: WishlistItemBase,
-                    SimpleProduct: WishlistItem,
-                    VirtualProduct: WishlistItem,
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                    // @ts-ignore GiftCardProduct is only available in Commerce
-                    GiftCardProduct: WishlistItemBase,
-                  }}
-                />
-              </Container>
+              {wishlistItems.items.map((item) => (
+                <WishlistItemActionCard key={item.id} item={item} size={size} />
+              ))}
             </>
-          ) : null}
+          )}
         </Container>
       </WaitForQueries>
     </>

graphql.config.js

@@ -14,6 +14,7 @@ module.exports = {
     MagentoGraphCms: {
       schema: [
         'examples/magento-graphcms/.mesh/schema.graphql',
+        'packages/graphql/apollo-client.graphql',
         'packagesDev/graphql-codegen-near-operation-file/src/directive/env.graphqls',
         'packagesDev/graphql-codegen-near-operation-file/src/directive/injectable.graphqls',
       ],

packages/graphql/apollo-client.graphql

@@ -1,2 +1,26 @@
-"Indicates that the client should resolve the field value locally as part of a query, e.g. in a React component"
+"""
+The @client directive allows you to resolve client-only data alongside your server data. These fields are not sent to the GraphQL server.
+"""
 directive @client on FIELD
+
+"""
+The @connection directive allows you to specify a custom cache key for paginated results. For more information, see this section on the [@connection directive](https://www.apollographql.com/docs/react/caching/advanced-topics/#the-connection-directive).
+"""
+directive @connection(key: String, filter: [String]) on FIELD
+
+"""
+This directive enables your queries to receive data for specific fields incrementally, instead of receiving all field data at the same time. This is helpful whenever some fields in a query take much longer to resolve than others.
+"""
+directive @defer(if: Boolean! = true, label: String) on FRAGMENT_SPREAD | INLINE_FRAGMENT
+
+# """
+# Directs the executor to stream plural fields when the `if` argument is true or undefined.
+# """
+# directive @stream(if: Boolean! = true, label: String, initialCount: Int! = 0) on FIELD
+
+directive @export(exportName: String!) on FIELD
+
+"""
+The @nonreactive directive can be used to mark query fields or fragment spreads and is used to indicate that changes to the data contained within the subtrees marked @nonreactive should not trigger rerendering.
+"""
+directive @nonreactive on FIELD | FRAGMENT_SPREAD | INLINE_FRAGMENT

packages/graphql/components/GraphQLProvider/persistenceMapper.ts

@@ -31,7 +31,6 @@ export const persistenceMapper = (data: string): Promise<string> => {
     'ROOT_QUERY.checkoutAgreements',
     'ROOT_QUERY.storeConfig',
     'ROOT_QUERY.__type*',
-    'ConfigurableProduct:*.configurable_product_options_selection*',
     '*Product:{"uid":"*"}.crosssell_products',
   ])
 

packages/magento-customer/hooks/useCustomerQuery.ts

@@ -13,5 +13,5 @@ export function useCustomerQuery<Q, V extends OperationVariables>(
   options: QueryHookOptions<Q, V> = {},
 ): QueryResult<Q, V> {
   const { loggedIn } = useCustomerSession()
-  return useQuery(document, { ...options, ssr: false, skip: !loggedIn })
+  return useQuery(document, { ...options, ssr: false, skip: options.skip || !loggedIn })
 }

packages/magento-customer/hooks/useGuestQuery.ts

@@ -12,5 +12,5 @@ export function useGuestQuery<Q, V extends OperationVariables>(
   queryOptions: QueryHookOptions<Q, V> = {},
 ) {
   const { token } = useCustomerSession()
-  return useQuery(document, { ...queryOptions, ssr: false, skip: !!token })
+  return useQuery(document, { ...queryOptions, ssr: false, skip: queryOptions.skip || !!token })
 }

packages/magento-product-configurable/ConfigurableProductAddToCart/ConfigurableProductAddToCart.tsx

@@ -39,6 +39,9 @@ const compName = 'ConfigurableOptionsInput' as const
 const parts = ['form', 'button', 'finalPrice', 'quantity', 'divider', 'buttonWrapper'] as const
 const { classes } = extendableComponent(compName, parts)
 
+/**
+ * @deprecated
+ */
 export function ConfigurableProductAddToCart(props: ConfigurableProductAddToCartProps) {
   const {
     name,

packages/magento-product-configurable/graphql/ConfigurableOptions.graphql

@@ -1,4 +1,4 @@
-fragment ConfigurableOptions on ConfigurableProduct {
+fragment ConfigurableOptions on ConfigurableProduct @injectable {
   __typename
   uid
   sku

packages/magento-product-configurable/hooks/useConfigurableOptionsSelection.ts

@@ -19,10 +19,12 @@ export function useConfigurableOptionsForSelection(variables: UseConfigurableOpt
     skip: !url_key || !selectedOptions.length,
   })
 
-  const configured = findByTypename(
-    selection.data?.products?.items ?? selection.previousData?.products?.items,
-    'ConfigurableProduct',
-  )
+  const configured = selection.error
+    ? undefined
+    : findByTypename(
+        selection.data?.products?.items ?? selection.previousData?.products?.items,
+        'ConfigurableProduct',
+      )
   return { ...selection, configured }
 }