@graphcommerce/magento-product 4.5.10 → 4.6.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Change Log
 
+## 4.6.0
+
+### Minor Changes
+
+- [#1642](https://github.com/graphcommerce-org/graphcommerce/pull/1642) [`ad63ebf4e`](https://github.com/graphcommerce-org/graphcommerce/commit/ad63ebf4e33bfb0e5c9e5e68ab69b14775f3f8a8) Thanks [@paales](https://github.com/paales)! - Introduced `<AddProductsToCartForm/>`, which is allows for adding all product types to the cart with a single react-hook-form form.
+
+  Which allows you to fully compose the form on the product page without having to modify the page.
+
+### Patch Changes
+
+- [#1642](https://github.com/graphcommerce-org/graphcommerce/pull/1642) [`b6bf2c941`](https://github.com/graphcommerce-org/graphcommerce/commit/b6bf2c94197ddacbf8f1fc0d352cd0d46e096f30) Thanks [@paales](https://github.com/paales)! - Remove unused ProductCustomizable on the old product pages
+
+- Updated dependencies [[`ad63ebf4e`](https://github.com/graphcommerce-org/graphcommerce/commit/ad63ebf4e33bfb0e5c9e5e68ab69b14775f3f8a8), [`9e6fd498e`](https://github.com/graphcommerce-org/graphcommerce/commit/9e6fd498e3242ab30602767ae77a8e22f80d9fd3)]:
+  - @graphcommerce/ecommerce-ui@1.5.0
+  - @graphcommerce/magento-store@4.3.0
+  - @graphcommerce/next-ui@4.27.0
+  - @graphcommerce/magento-cart@4.8.4
+  - @graphcommerce/framer-scroller@2.1.39
+
 ## 4.5.10
 
 ### Patch Changes

package/components/AddProductsToCart/AddProductsToCart.graphql

@@ -0,0 +1,13 @@
+mutation AddProductsToCart($cartId: String!, $cartItems: [CartItemInput!]!) {
+  addProductsToCart(cartId: $cartId, cartItems: $cartItems) {
+    cart {
+      id
+      __typename
+      ...CartItemCountChanged
+    }
+    user_errors {
+      code
+      message
+    }
+  }
+}

package/components/AddProductsToCart/AddProductsToCartButton.tsx

@@ -0,0 +1,41 @@
+import { Button, ButtonProps } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import { SxProps, Theme } from '@mui/material'
+import { useFormAddProductsToCart } from './AddProductsToCartForm'
+
+export type AddProductsToCartButtonProps = {
+  sx?: SxProps<Theme>
+  sku: string
+  index?: number
+} & Pick<
+  ButtonProps<'button'>,
+  | 'variant'
+  | 'color'
+  | 'size'
+  | 'disabled'
+  | 'fullWidth'
+  | 'startIcon'
+  | 'endIcon'
+  | 'onClick'
+  | 'loading'
+>
+
+export function AddProductsToCartButton(props: AddProductsToCartButtonProps) {
+  const { formState, setValue } = useFormAddProductsToCart()
+  const { loading, sku, index = 0 } = props
+
+  return (
+    <Button
+      type='submit'
+      color='primary'
+      variant='pill'
+      size='large'
+      {...props}
+      disabled={Boolean(formState.errors.cartItems?.[index].sku?.message)}
+      loading={formState.isSubmitting || loading}
+      onClick={() => setValue(`cartItems.${index}.sku`, sku)}
+    >
+      <Trans id='Add to Cart' />
+    </Button>
+  )
+}

package/components/AddProductsToCart/AddProductsToCartError.tsx

@@ -0,0 +1,22 @@
+import { FormHelperText } from '@mui/material'
+import { useFormAddProductsToCart } from './AddProductsToCartForm'
+
+type AddProductsToCartErrorProps = {
+  children?: React.ReactNode
+  index?: number
+}
+
+export function AddProductsToCartError(props: AddProductsToCartErrorProps) {
+  const { children, index = 0 } = props
+  const { formState } = useFormAddProductsToCart()
+  const errorMsg = formState.errors.cartItems?.[index].sku?.message
+
+  if (errorMsg)
+    return (
+      <FormHelperText error sx={{ mt: 0, lineHeight: '1.3' }}>
+        {errorMsg}
+      </FormHelperText>
+    )
+
+  return <>{children}</>
+}

package/components/AddProductsToCart/AddProductsToCartForm.tsx

@@ -0,0 +1,69 @@
+import { UseFormGqlMutationReturn, UseFormGraphQlOptions } from '@graphcommerce/ecommerce-ui'
+import { useFormGqlMutationCart } from '@graphcommerce/magento-cart'
+import { Box, SxProps, Theme } from '@mui/material'
+import { createContext, useContext, useMemo } from 'react'
+import {
+  AddProductsToCartDocument,
+  AddProductsToCartMutation,
+  AddProductsToCartMutationVariables,
+} from './AddProductsToCart.gql'
+
+type AddProductsToCartContextType = UseFormGqlMutationReturn<
+  AddProductsToCartMutation,
+  AddProductsToCartMutationVariables
+>
+
+export const addProductsToCartContext = createContext(
+  undefined as AddProductsToCartContextType | undefined,
+)
+
+type AddProductsToCartFormProps = {
+  children: React.ReactNode
+  sx?: SxProps<Theme>
+} & Omit<
+  UseFormGraphQlOptions<AddProductsToCartMutation, AddProductsToCartMutationVariables>,
+  'onBeforeSubmit'
+>
+
+export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
+  const { children, defaultValues, sx, ...formProps } = props
+  const form = useFormGqlMutationCart(AddProductsToCartDocument, {
+    defaultValues,
+
+    // We're stripping out incomplete entered options.
+    onBeforeSubmit: ({ cartId, cartItems }) => ({
+      cartId,
+      cartItems: cartItems
+        .filter((cartItem) => cartItem.sku)
+        .map((cartItem) => ({
+          ...cartItem,
+          selected_options: cartItem.selected_options?.filter(Boolean),
+          entered_options: cartItem.entered_options?.filter((option) => option?.value),
+        })),
+    }),
+    ...formProps,
+  })
+
+  const submit = form.handleSubmit(() => {})
+
+  return (
+    <addProductsToCartContext.Provider value={form}>
+      <Box component='form' onSubmit={submit} noValidate sx={sx}>
+        {children}
+      </Box>
+    </addProductsToCartContext.Provider>
+  )
+}
+
+export function useFormAddProductsToCart(optional: true): AddProductsToCartContextType | undefined
+export function useFormAddProductsToCart(optional?: false): AddProductsToCartContextType
+export function useFormAddProductsToCart(optional = false) {
+  const context = useContext(addProductsToCartContext)
+
+  if (!optional && typeof context === 'undefined') {
+    throw Error(
+      'useFormAddProductsToCart must be used within a AddProductsToCartForm or provide the optional=true argument',
+    )
+  }
+  return context
+}

package/components/AddProductsToCart/AddProductsToCartIndex.tsx

@@ -0,0 +1,3 @@
+type AddProductsToCartIndexProps = { index: number }
+
+export function AddProductsToCartIndex() {}

package/components/AddProductsToCart/AddProductsToCartQuantity.tsx

@@ -0,0 +1,26 @@
+import { NumberFieldElement, NumberFieldElementProps } from '@graphcommerce/ecommerce-ui'
+import { useFormAddProductsToCart } from './AddProductsToCartForm'
+
+type AddToCartQuantityProps = Omit<
+  NumberFieldElementProps,
+  'error' | 'required' | 'inputProps' | 'inputRef' | 'helperText' | 'name'
+> & { index?: number }
+
+export function AddProductsToCartQuantity(props: AddToCartQuantityProps) {
+  const { index = 0 } = props
+  const { formState, control } = useFormAddProductsToCart()
+
+  return (
+    <NumberFieldElement
+      variant='outlined'
+      size='small'
+      {...props}
+      required
+      inputProps={{ min: 1 }}
+      defaultValue='1'
+      control={control}
+      name={`cartItems.${index}.quantity`}
+      helperText={formState.isSubmitted && formState.errors.cartItems?.[index].quantity?.message}
+    />
+  )
+}

package/components/AddProductsToCart/AddProductsToCartSnackbar.tsx

@@ -0,0 +1,67 @@
+import { ApolloCartErrorSnackbar } from '@graphcommerce/magento-cart'
+import {
+  Button,
+  iconChevronRight,
+  IconSvg,
+  MessageSnackbar,
+  ErrorSnackbar,
+} from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import PageLink from 'next/link'
+import { useFormAddProductsToCart } from './AddProductsToCartForm'
+
+type AddToCartMessageProps = { name?: string | null }
+
+export function AddProductsToCartSnackbar(props: AddToCartMessageProps) {
+  const { name } = props
+  const { formState, error, data } = useFormAddProductsToCart()
+
+  return (
+    <>
+      <ApolloCartErrorSnackbar error={error} />
+
+      <ErrorSnackbar
+        variant='pill'
+        severity='error'
+        open={(data?.addProductsToCart?.user_errors?.length ?? 0) > 0}
+        action={
+          <Button size='medium' variant='pill' color='secondary'>
+            <Trans id='Ok' />
+          </Button>
+        }
+      >
+        <>{data?.addProductsToCart?.user_errors?.map((e) => e?.message).join(', ')}</>
+      </ErrorSnackbar>
+
+      <MessageSnackbar
+        open={
+          !formState.isSubmitting &&
+          formState.isSubmitSuccessful &&
+          !error?.message &&
+          !data?.addProductsToCart?.user_errors?.length
+        }
+        variant='pill'
+        action={
+          <PageLink href='/cart' passHref>
+            <Button
+              id='view-shopping-cart-button'
+              size='medium'
+              variant='pill'
+              color='secondary'
+              endIcon={<IconSvg src={iconChevronRight} />}
+              sx={{ display: 'flex' }}
+            >
+              <Trans id='View shopping cart' />
+            </Button>
+          </PageLink>
+        }
+      >
+        <Trans
+          id='<0>{name}</0> has been added to your shopping cart!'
+          components={{ 0: <strong /> }}
+          values={{ name }}
+        />
+      </MessageSnackbar>
+    </>
+  )
+}

package/components/AddProductsToCart/index.ts

@@ -0,0 +1,6 @@
+export * from './AddProductsToCart.gql'
+export * from './AddProductsToCartButton'
+export * from './AddProductsToCartError'
+export * from './AddProductsToCartForm'
+export * from './AddProductsToCartQuantity'
+export * from './AddProductsToCartSnackbar'

package/components/ProductAddToCart/ProductAddToCart.graphql

@@ -3,7 +3,7 @@ mutation ProductAddToCart(
   $sku: String!
   $quantity: Float = 1
   $enteredOptions: [EnteredOptionInput] = []
-  $selectedOptions: [ID] = []
+  $selectedOptions: [ID!] = []
 ) {
   addProductsToCart(
     cartId: $cartId

package/components/ProductAddToCart/index.ts

@@ -0,0 +1,2 @@
+export * from './ProductAddToCart'
+export * from './ProductAddToCart.gql'

package/components/ProductCustomizable/ProductCustomizable.tsx

@@ -0,0 +1,93 @@
+import { SelectElement, TextFieldElement } from '@graphcommerce/ecommerce-ui'
+import { filterNonNullableKeys, RenderType, TypeRenderer } from '@graphcommerce/next-ui'
+import { useFormAddProductsToCart } from '../AddProductsToCart'
+import { ProductCustomizableFragment } from './ProductCustomizable.gql'
+
+type OptionTypeRenderer = TypeRenderer<
+  NonNullable<NonNullable<ProductCustomizableFragment['options']>[number]> & {
+    optionIndex: number
+    index: number
+  }
+>
+
+const CustomizableAreaOption: OptionTypeRenderer['CustomizableAreaOption'] = (props) => {
+  const { uid, areaValue, required, optionIndex, index, title } = props
+  const maxLength = areaValue?.max_characters ?? undefined
+  const { control, register } = useFormAddProductsToCart()
+
+  return (
+    <>
+      <input
+        type='hidden'
+        {...register(`cartItems.${index}.entered_options.${optionIndex}.uid`)}
+        value={uid}
+      />
+      <TextFieldElement
+        multiline
+        minRows={3}
+        control={control}
+        name={`cartItems.${index}.entered_options.${optionIndex}.value`}
+        label={title}
+        required={Boolean(required)}
+        validation={{ maxLength }}
+        helperText={(maxLength ?? 0) > 0 && `A maximum of ${maxLength}`}
+      />
+    </>
+  )
+}
+
+const CustomizableDropDownOption: OptionTypeRenderer['CustomizableDropDownOption'] = (props) => {
+  const { uid, required, optionIndex, index, title, dropdownValue } = props
+  const { control, register } = useFormAddProductsToCart()
+
+  return (
+    <>
+      <input
+        type='hidden'
+        {...register(`cartItems.${index}.entered_options.${optionIndex}.uid`)}
+        value={uid}
+      />
+      <SelectElement
+        control={control}
+        name={`cartItems.${index}.entered_options.${optionIndex}.value`}
+        label={title}
+        required={Boolean(required)}
+        options={filterNonNullableKeys(dropdownValue, ['title']).map((option) => ({
+          id: option.uid,
+          label: option.title,
+        }))}
+      />
+    </>
+  )
+}
+
+const renderer: OptionTypeRenderer = {
+  CustomizableAreaOption,
+  CustomizableCheckboxOption: () => <div>checkbox not implemented</div>,
+  CustomizableDateOption: () => <div>date not implemented</div>,
+  CustomizableDropDownOption,
+  CustomizableFieldOption: () => <div>field not implemented</div>,
+  CustomizableFileOption: () => <div>file not implemented</div>,
+  CustomizableMultipleOption: () => <div>multi not implemented</div>,
+  CustomizableRadioOption: () => <div>radios not implemented</div>,
+}
+
+type ProductCustomizableProps = { product: ProductCustomizableFragment; index?: number }
+
+export function ProductCustomizable(props: ProductCustomizableProps) {
+  const { product, index = 0 } = props
+
+  return (
+    <>
+      {filterNonNullableKeys(product.options, ['sort_order']).map((option) => (
+        <RenderType
+          key={option.uid}
+          renderer={renderer}
+          {...option}
+          optionIndex={option.sort_order - 1}
+          index={index}
+        />
+      ))}
+    </>
+  )
+}

package/components/ProductCustomizable/index.ts

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

package/components/ProductPage/ProductPageQueryFragment.graphql

@@ -4,6 +4,7 @@ fragment ProductPageQueryFragment on Query {
     items {
       __typename
       uid
+      ...ProductWeight
       ...ProductPageItem
     }
   }

package/components/ProductPageGallery/ProductPageGallery.tsx

@@ -1,12 +1,12 @@
 import { SidebarGallery, SidebarGalleryProps, TypeRenderer } from '@graphcommerce/next-ui'
-import React, { PropsWithChildren } from 'react'
+import { PropsWithChildren } from 'react'
 import { ProductPageGalleryFragment } from './ProductPageGallery.gql'
 
 export type ProductPageGalleryRenderers = TypeRenderer<
   NonNullable<NonNullable<ProductPageGalleryFragment['media_gallery']>[0]>
 >
 
-type ProductPageGalleryProps = PropsWithChildren<ProductPageGalleryFragment> &
+export type ProductPageGalleryProps = PropsWithChildren<ProductPageGalleryFragment> &
   Omit<SidebarGalleryProps, 'sidebar' | 'images'>
 
 export function ProductPageGallery(props: ProductPageGalleryProps) {

package/components/ProductPagePrice/index.ts

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

package/components/ProductShortDescription/ProductShortDescription.tsx

@@ -15,7 +15,13 @@ export function ProductShortDescription(props: ProductShortDescriptionProps) {
       component='div'
       className={classes.description}
       dangerouslySetInnerHTML={{ __html: short_description?.html ?? '' }}
-      sx={[{ '& > p': { marginTop: 0 } }, ...(Array.isArray(sx) ? sx : [sx])]}
+      sx={[
+        {
+          '& > p:first-of-type': { marginTop: 0 },
+          '& > p:last-of-type': { marginBottom: 0 },
+        },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
     />
   )
 }

package/components/ProductSidebarDelivery/ProductSidebarDelivery.tsx

@@ -22,7 +22,6 @@ export function ProductSidebarDelivery() {
         `,
         gridTemplateColumns: `min-content auto`,
         columnGap: theme.spacings.xxs,
-        marginTop: theme.spacings.xxs,
         background:
           theme.palette.mode === 'light'
             ? darken(theme.palette.background.default, 0.01)

package/components/index.ts

@@ -1,16 +1,16 @@
+export * from './AddProductsToCart'
 export * from './JsonLdProduct/jsonLdProduct'
-export * from './ProductAddToCart/ProductAddToCart'
-export * from './ProductAddToCart/ProductAddToCart.gql'
+export * from './ProductAddToCart'
 export * from './ProductList/ProductList.gql'
 export * from './ProductListCount/ProductListCount'
 export * from './ProductListFilters/ProductFilters.gql'
 export * from './ProductListFilters/ProductListFilters'
 export * from './ProductListFiltersContainer/ProductListFiltersContainer'
 export * from './ProductListItem/ProductListItem'
-export * from './ProductListItems/ProductListItems'
 export * from './ProductListItems/filteredProductList'
 export * from './ProductListItems/filterTypes'
 export * from './ProductListItems/getFilterTypes'
+export * from './ProductListItems/ProductListItems'
 export * from './ProductListItems/ProductListItems.gql'
 export * from './ProductListItems/ProductListItemsBase'
 export * from './ProductListItems/ProductListParamsProvider'
@@ -22,6 +22,7 @@ export * from './ProductPageCategory/productPageCategory'
 export * from './ProductPageDescription/ProductPageDescription'
 export * from './ProductPageGallery/ProductPageGallery'
 export * from './ProductPageMeta/ProductPageMeta'
+export * from './ProductPagePrice'
 export * from './ProductRelated/RelatedProducts.gql'
 export * from './ProductShortDescription/ProductShortDescription'
 export * from './ProductShortDescription/ProductShortDescription.gql'
@@ -30,3 +31,4 @@ export * from './ProductSpecs/ProductSpecs'
 export * from './ProductStaticPaths/getProductStaticPaths'
 export * from './ProductUpsells/UpsellProducts.gql'
 export * from './ProductWeight/ProductWeight'
+export * from './ProductCustomizable'

package/hooks/useProductLink.ts

@@ -3,16 +3,22 @@ import { ProductLinkFragment } from './ProductLink.gql'
 export type ProductLinkProps = Omit<ProductLinkFragment, 'uid'>
 
 export function productLink(link: ProductLinkProps) {
-  const { __typename, url_key } = link
-  const productRoute = __typename
-    .split(/(?=[A-Z])/)
-    .map((s) => s.toLowerCase())
-    .reverse()
+  if (process.env.NEXT_PUBLIC_SINGLE_PRODUCT_PAGE !== '1') {
+    const { __typename, url_key } = link
 
-  // For Simple and Virtual products we're not navigating to a type specific page
-  if (__typename === 'SimpleProduct') productRoute.splice(1, 1)
+    const productRoute = __typename
+      .split(/(?=[A-Z])/)
+      .map((s) => s.toLowerCase())
+      .reverse()
 
-  return `/${productRoute.join('/')}/${url_key}`
+    if (__typename === 'SimpleProduct')
+      // For Simple and Virtual products we're not navigating to a type specific page
+      productRoute.splice(1, 1)
+
+    return `/${productRoute.join('/')}/${url_key}`
+  }
+
+  return `/p/${link.url_key}`
 }
 
 export function useProductLink(props: ProductLinkProps) {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.5.10",
+  "version": "4.6.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -19,13 +19,14 @@
     "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@graphcommerce/framer-scroller": "2.1.38",
+    "@graphcommerce/ecommerce-ui": "1.5.0",
+    "@graphcommerce/framer-scroller": "2.1.39",
     "@graphcommerce/graphql": "3.4.8",
     "@graphcommerce/graphql-mesh": "4.2.0",
     "@graphcommerce/image": "3.1.9",
-    "@graphcommerce/magento-cart": "4.8.3",
-    "@graphcommerce/magento-store": "4.2.35",
-    "@graphcommerce/next-ui": "4.26.0",
+    "@graphcommerce/magento-cart": "4.8.4",
+    "@graphcommerce/magento-store": "4.3.0",
+    "@graphcommerce/next-ui": "4.27.0",
     "schema-dts": "^1.1.0"
   },
   "peerDependencies": {