Merge pull request #2485 from graphcommerce-org/feature/various

CMS Block integration in example

.changeset/beige-worms-tell.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-product-configurable': patch
+---
+
+Solve issue where the GetConfigurableOptionsSelection query would be executed even if the product wasn't a ConfigurableProduct.

.changeset/funny-rats-wave.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-product': patch
+---
+
+ProductSpecs now uses `attribute { label }` instead of `useQuery(ProductSpecsTypes)`

.changeset/large-balloons-teach.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-cms': patch
+---
+
+Added cmsBlocks query and `<CmsBlock />` component.

.changeset/nice-starfishes-melt.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-cart-items': patch
+---
+
+Solve issue where the CartItem href wouldn't be correct

.changeset/spicy-mangos-draw.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-cart': patch
+---
+
+When ordering a virtual product the checkout would still reference a Track & Trace

.changeset/ten-flies-pay.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-cart-items': patch
+---
+
+Exported cartItemToCartItemInput so it can be extended with plugins

.changeset/tender-emus-smash.md

@@ -0,0 +1,6 @@
+---
+'@graphcommerce/magento-store': patch
+'@graphcommerce/next-ui': patch
+---
+
+Added a CurrencySymbol component that renders the current currency symbol

docs/feature-list.md

@@ -290,13 +290,13 @@ Features taken from the Magento Commerce 2 Feature List
       registry. — [Commerce]
 - [ ] Automatically update item counts and notify the registry owner as
       purchases are made. — [Commerce]
-- [ ] Allow customers to purchase physical and virtual gift cards. — [Commerce]
+- [x] Allow customers to purchase physical and virtual gift cards. — [Commerce]
 - [ ] Offer exclusive shopping experiences with private or flash sale sites. —
       [Commerce]
 - [ ] Streamline re-ordering by enabling shoppers to add products to the cart by
       SKU. — [Commerce]
 - [ ] Accelerate growth by collecting and displaying high-converting user
-      generated content powered by Yotpo. — [Commerce]
+      generated content powered by Yotpo. — [Commerce] f
 
 ### Customer accounts
 

docs/roadmap.md

@@ -14,7 +14,8 @@ roadmap.
 - [ ] GraphCommerce Pro: Distribution of private npm packages for customers.
 - [ ] GraphCommerce Pro: Distribution of private Magento modules for customers.
 - [ ] Adobe Commerce: Returns functionality
-- [ ] Adobe Commerce: Store credit functionality
+- [x] Adobe Commerce: Store credit functionality
+- [x] Adobe Commerce: Gift card functionality
 - [ ] Adobe Commerce: Content staging functionality in preview mode.
 - [ ] Storelocator UI. Generic Store Locator UI to allow for any datasource to
       be used. Integrate with Magento's pickupLocations functionality.
@@ -36,7 +37,6 @@ roadmap.
 - [ ] Upgrade to React 19 + Next.js app router support.
 - [ ] Adobe Commerce: Reward points functionality
 - [ ] Adobe Commerce: Gift wrapping functionality
-- [ ] Adobe Commerce: Gift card functionality
 - [ ] Adobe Commerce: Gift registry functionality
 - [ ] Adobe Commerce: Multi Wishlist functionality
 - [ ] Adobe Comemrce: Adobe Sensei integration
@@ -50,7 +50,7 @@ roadmap.
       logging in.
 - [ ] Magento 2.4.7: Implement attributesForm for customer_account_edit,
       customer_account_create, customer_register_address, customer_address_edit
-- [ ] Magento 2.4.7: sendEmailToFriend implementation
+- [ ] Magento: sendEmailToFriend implementation
 - [ ] Magento 2.4.7: Implement a new success page on the the new
       guestOrderByToken
 - [ ] Magento: Implement fixed_product_taxes

examples/magento-open-source/components/Layout/Footer.tsx

@@ -5,7 +5,8 @@ import { DateFormat, Footer as FooterBase } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
 import { Button, Link } from '@mui/material'
 
-export function Footer() {
+export function Footer(props: { socialLinks?: React.ReactNode }) {
+  const { socialLinks } = props
   const cartEnabled = useCheckoutGuestEnabled()
   const config = useQuery(StoreConfigDocument)
 
@@ -14,7 +15,7 @@ export function Footer() {
 
   return (
     <FooterBase
-      socialLinks={<div />}
+      socialLinks={socialLinks}
       storeSwitcher={<StoreSwitcherButton />}
       customerService={
         <Button href='/service' variant='pill'>

examples/magento-open-source/components/Layout/Layout.graphql

@@ -3,4 +3,10 @@ query Layout {
     __typename
   }
   ...MenuQueryFragment
+
+  cmsBlocks(identifiers: ["footer_links_block"]) {
+    items {
+      ...CmsBlock
+    }
+  }
 }

examples/magento-open-source/components/Layout/LayoutMinimal.tsx

@@ -1,3 +1,4 @@
+import { CmsBlock } from '@graphcommerce/magento-cms'
 import type { LayoutDefaultProps } from '@graphcommerce/next-ui'
 import { LayoutDefault } from '@graphcommerce/next-ui'
 import { Footer } from './Footer'
@@ -8,13 +9,15 @@ export type LayoutMinimalProps = LayoutQuery &
   Omit<LayoutDefaultProps, 'header' | 'footer' | 'cartFab' | 'noSticky'>
 
 export function LayoutMinimal(props: LayoutMinimalProps) {
-  const { menu, children, ...uiProps } = props
+  const { menu, children, cmsBlocks, ...uiProps } = props
+
+  const footerBlock = cmsBlocks?.items?.find((item) => item?.identifier === 'footer_links_block')
 
   return (
     <LayoutDefault
       {...uiProps}
       header={<Logo />}
-      footer={<Footer />}
+      footer={<Footer socialLinks={footerBlock ? <CmsBlock cmsBlock={footerBlock} /> : <div />} />}
       sx={{ background: (theme) => theme.palette.background.paper }}
     >
       {children}

examples/magento-open-source/components/Layout/LayoutNavigation.tsx

@@ -1,5 +1,6 @@
 import { CartFab, useCartEnabled } from '@graphcommerce/magento-cart'
 import { magentoMenuToNavigation } from '@graphcommerce/magento-category'
+import { CmsBlock } from '@graphcommerce/magento-cms'
 import { CustomerFab, CustomerMenuFabItem } from '@graphcommerce/magento-customer'
 import { SearchFab, SearchField } from '@graphcommerce/magento-search'
 import { WishlistFab, WishlistMenuFabItem } from '@graphcommerce/magento-wishlist'
@@ -36,13 +37,15 @@ export type LayoutNavigationProps = LayoutQuery &
   Omit<LayoutDefaultProps, 'footer' | 'header' | 'cartFab' | 'menuFab'>
 
 export function LayoutNavigation(props: LayoutNavigationProps) {
-  const { menu, children, ...uiProps } = props
+  const { menu, children, cmsBlocks, ...uiProps } = props
 
   const selection = useNavigationSelection()
   const router = useRouter()
 
   const cartEnabled = useCartEnabled()
 
+  const footerBlock = cmsBlocks?.items?.find((item) => item?.identifier === 'footer_links_block')
+
   return (
     <>
       <NavigationProvider
@@ -167,7 +170,9 @@ export function LayoutNavigation(props: LayoutNavigationProps) {
             </MobileTopRight>
           </>
         }
-        footer={<Footer />}
+        footer={
+          <Footer socialLinks={footerBlock ? <CmsBlock cmsBlock={footerBlock} /> : <div />} />
+        }
         cartFab={<CartFab BadgeProps={{ color: 'secondary' }} />}
         menuFab={<NavigationFab onClick={() => selection.set([])} />}
       >

packages/magento-cart-items/components/CartItemActionCard/CartItemActionCard.tsx

@@ -1,6 +1,6 @@
 import { Image } from '@graphcommerce/image'
 import { useDisplayInclTax } from '@graphcommerce/magento-cart/hooks'
-import type { ProductLinkProps } from '@graphcommerce/magento-product'
+import { productLink, productPath, type ProductLinkProps } from '@graphcommerce/magento-product'
 import { Money } from '@graphcommerce/magento-store'
 import type { ActionCardProps } from '@graphcommerce/next-ui'
 import { ActionCard, actionCardImageSizes, filterNonNullableKeys } from '@graphcommerce/next-ui'
@@ -107,7 +107,7 @@ export function CartItemActionCard(props: CartItemActionCardProps) {
       title={
         url_key ? (
           <Link
-            href={url_key}
+            href={productPath(url_key)}
             underline='hover'
             sx={{
               color: 'inherit',

packages/magento-cart-items/index.ts

@@ -11,3 +11,4 @@ export * from './components/SelectedCustomizableOptions/SelectedCustomizableOpti
 export * from './components/UpdateItemQuantity/UpdateItemQuantity'
 export * from './components/EditCartItem'
 export * from './hooks/useRemoveItemFromCart'
+export * from './utils/cartItemToCartItemInput'

packages/magento-cart/components/CartSummary/CartSummary.tsx

@@ -88,7 +88,9 @@ export function CartSummary(props: CartSummaryProps) {
         <Box>
           <SectionContainer
             variantLeft='h5'
-            labelLeft={<Trans id='Confirmation + Track & trace' />}
+            labelLeft={
+              is_virtual ? <Trans id='Confirmation' /> : <Trans id='Confirmation + Track & trace' />
+            }
             sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '8px' } }}
           />
           <Typography variant='body1'>{email || ''}</Typography>

packages/magento-cms/components/CmsBlock/CmsBlock.graphql

@@ -0,0 +1,4 @@
+fragment CmsBlock on CmsBlock {
+  identifier
+  content
+}

packages/magento-cms/components/CmsBlock/CmsBlock.tsx

@@ -0,0 +1,10 @@
+import type { CmsBlockFragment } from './CmsBlock.gql'
+
+export type CmsBlockProps = { cmsBlock: CmsBlockFragment | null | undefined }
+
+export function CmsBlock(props: CmsBlockProps) {
+  const { cmsBlock } = props
+  if (!cmsBlock?.content) return null
+  // eslint-disable-next-line react/no-danger
+  return <div dangerouslySetInnerHTML={{ __html: cmsBlock.content }} />
+}

packages/magento-cms/graphql/CmsBlocks.graphql

@@ -0,0 +1,7 @@
+query CmsBlocks($identifiers: [String!]!) {
+  cmsBlocks(identifiers: $identifiers) {
+    items {
+      ...CmsBlock
+    }
+  }
+}

packages/magento-cms/index.ts

@@ -1,3 +1,5 @@
+export * from './components/CmsBlock/CmsBlock'
+export * from './components/CmsBlock/CmsBlock.gql'
 export * from './components/CmsPageContent/CmsPageContent'
 export * from './components/CmsPageContent/CmsPageContent.gql'
 export * from './components/CmsPageMeta/CmsPageMeta'

packages/magento-product-configurable/components/ConfigurableProductOptions/ConfigurableProductOption.tsx

@@ -39,6 +39,7 @@ export function ConfigurableProductOption(props: ConfigurableProductOptionProps)
     attribute_code,
     url_key,
     render,
+    __typename,
     ...other
   } = props
   const fieldName = `cartItems.${index}.selected_options.${optionIndex}` as const
@@ -55,7 +56,11 @@ export function ConfigurableProductOption(props: ConfigurableProductOptionProps)
     // .slice(0, optionIndex)
     .filter((o) => o !== selectedOption)
 
-  const { configured } = useConfigurableOptionsForSelection({ url_key, selectedOptions })
+  const { configured } = useConfigurableOptionsForSelection({
+    __typename,
+    url_key,
+    selectedOptions,
+  })
 
   const available =
     configured?.configurable_product_options_selection?.options_available_for_selection?.find(

packages/magento-product-configurable/components/ConfigurableProductOptions/ConfigurableProductOptions.tsx

@@ -39,7 +39,7 @@ export function ConfigurableProductOptions(props: ConfigurableProductOptionsProp
     'values',
   ])
 
-  const { configured } = useConfigurableOptionsSelection({ url_key: product.url_key, index })
+  const { configured } = useConfigurableOptionsSelection({ ...product, index })
   const unavailable =
     configured &&
     (configured?.configurable_product_options_selection?.options_available_for_selection ?? [])
@@ -75,6 +75,7 @@ export function ConfigurableProductOptions(props: ConfigurableProductOptionsProp
           index={index}
           optionIndex={optionIndex}
           sx={sx}
+          __typename={product.__typename}
           url_key={product.url_key}
           {...other}
         />

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

@@ -0,0 +1,4 @@
+fragment UseConfigurableOptions on ProductInterface {
+  __typename
+  url_key
+}

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

@@ -4,20 +4,18 @@ import { useFormAddProductsToCart } from '@graphcommerce/magento-product'
 import { findByTypename, nonNullable } from '@graphcommerce/next-ui'
 import { useWatch } from '@graphcommerce/react-hook-form'
 import { GetConfigurableOptionsSelectionDocument } from '../graphql/GetConfigurableOptionsSelection.gql'
-
-export type UseConfigurableOptionsSelection = { url_key?: string | null } & AddToCartItemSelector
+import type { UseConfigurableOptionsFragment } from '../graphql/UseConfigurableOptions.gql'
 
 type UseConfigurableOptionsForSelection = {
-  url_key?: string | null
   selectedOptions: string[]
-}
+} & UseConfigurableOptionsFragment
 
 export function useConfigurableOptionsForSelection(variables: UseConfigurableOptionsForSelection) {
-  const { url_key, selectedOptions } = variables
+  const { __typename, url_key, selectedOptions } = variables
 
   const selection = useQuery(GetConfigurableOptionsSelectionDocument, {
     variables: { urlKey: url_key ?? '', selectedOptions },
-    skip: !url_key,
+    skip: __typename !== 'ConfigurableProduct' || !url_key,
   })
 
   const configured = selection.error
@@ -29,15 +27,17 @@ export function useConfigurableOptionsForSelection(variables: UseConfigurableOpt
   return { ...selection, configured }
 }
 
+export type UseConfigurableOptionsSelection = UseConfigurableOptionsFragment & AddToCartItemSelector
+
 export function useConfigurableOptionsSelection(props: UseConfigurableOptionsSelection) {
-  const { url_key, index = 0 } = props
+  const { __typename, url_key, index = 0 } = props
 
   const { control } = useFormAddProductsToCart()
   const selectedOptions = (useWatch({ control, name: `cartItems.${index}.selected_options` }) ?? [])
     .filter(nonNullable)
     .filter(Boolean)
 
-  return useConfigurableOptionsForSelection({ url_key, selectedOptions })
+  return useConfigurableOptionsForSelection({ __typename, url_key, selectedOptions })
 }
 
 export function useConfigurableSelectedVariant(props: UseConfigurableOptionsSelection) {

packages/magento-product-configurable/plugins/ConfigurableProductPage/ConfigurableProductPageDescription.tsx

@@ -15,7 +15,7 @@ export function ProductPageDescription(
   props: PluginProps<ProductPageDescriptionProps & AddToCartItemSelector>,
 ) {
   const { Prev, product, index, ...rest } = props
-  const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index })
+  const variant = useConfigurableSelectedVariant({ ...product, index })
 
   return (
     <Prev

packages/magento-product-configurable/plugins/ConfigurableProductPage/ConfigurableProductPageGallery.tsx

@@ -1,5 +1,6 @@
 import type { AddToCartItemSelector, ProductPageGalleryProps } from '@graphcommerce/magento-product'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { isTypename } from '@graphcommerce/next-ui'
 import { useConfigurableOptionsSelection } from '../../hooks'
 
 export const config: PluginConfig = {
@@ -13,7 +14,7 @@ export function ProductPageGallery(
 ) {
   const { Prev, product, index, ...rest } = props
 
-  const { configured } = useConfigurableOptionsSelection({ url_key: product.url_key, index })
+  const { configured } = useConfigurableOptionsSelection({ ...product, index })
   const media_gallery =
     (configured?.configurable_product_options_selection?.media_gallery?.length ?? 0) > 0 &&
     configured?.configurable_product_options_selection?.variant

packages/magento-product-configurable/plugins/ConfigurableProductPage/ConfigurableProductPageJsonLd.tsx

@@ -16,6 +16,6 @@ export function ProductPageJsonLd<T extends { '@type': string }, P extends JsonL
   props: PluginProps<ProductPageJsonLdProps<T, P>> & AddToCartItemSelector,
 ) {
   const { Prev, product, index, ...rest } = props
-  const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index })
+  const variant = useConfigurableSelectedVariant({ ...product, index })
   return <Prev product={(variant ?? product) as P} {...rest} />
 }

packages/magento-product-configurable/plugins/ConfigurableProductPage/ConfigurableProductPageMeta.tsx

@@ -16,7 +16,7 @@ export function ProductPageMeta(props: PluginProps<ProductPageMetaProps> & AddTo
   const { Prev, product, index, ...rest } = props
   const { replace, asPath } = useRouter()
 
-  const variant = useConfigurableSelectedVariant({ url_key: product?.url_key, index })
+  const variant = useConfigurableSelectedVariant({ ...product, index })
 
   const isValidVariant = (variant?.url_rewrites ?? []).length > 0 && variant?.url_key
   const targetUrl = isValidVariant ? productLink(variant) : productLink(product)

packages/magento-product-configurable/plugins/ConfigurableProductPage/ConfigurableProductPageName.tsx

@@ -10,6 +10,6 @@ export const config: PluginConfig = {
 
 export function ProductPageName(props: PluginProps<ProductPageNameProps> & AddToCartItemSelector) {
   const { Prev, product, index, ...rest } = props
-  const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index })
+  const variant = useConfigurableSelectedVariant({ ...product, index })
   return <Prev product={variant ?? product} {...rest} />
 }

packages/magento-product-configurable/plugins/ConfigurableProductPage/ConfigurableProductPagePrice.tsx

@@ -11,7 +11,7 @@ export function ProductPagePrice(
   props: PluginProps<ProductPagePriceProps> & AddToCartItemSelector,
 ) {
   const { Prev, product, index, ...rest } = props
-  const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index })
+  const variant = useConfigurableSelectedVariant({ ...product, index })
 
   if (product.__typename !== 'ConfigurableProduct') return <Prev {...props} />
 

packages/magento-product-configurable/plugins/ConfigurableProductPage/ConfigurableProductPagePriceTiers.tsx

@@ -14,7 +14,7 @@ export function ProductPagePriceTiers(
   props: PluginProps<ProductPagePriceTiersProps> & AddToCartItemSelector,
 ) {
   const { Prev, product, index, ...rest } = props
-  const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index })
+  const variant = useConfigurableSelectedVariant({ ...product, index })
 
   if (!variant || product.__typename !== 'ConfigurableProduct')
     return <Prev product={product} {...rest} />