@graphcommerce/magento-product 9.1.0-canary.18 → 9.1.0-canary.19

package/components/ProductPageGallery/ProductVideo.tsx

@@ -0,0 +1,169 @@
+import type { MotionImageAspectPropsAdditional } from '@graphcommerce/framer-scroller'
+import { Fab, iconPlay, IconSvg, sxx, type FabProps } from '@graphcommerce/next-ui'
+import { Avatar, Box, IconButton, styled, type SxProps, type Theme } from '@mui/material'
+import { m, type MotionProps, type MotionStyle } from 'framer-motion'
+import React, { useState } from 'react'
+import type { ProductVideoFragment } from './ProductVideo.gql'
+
+const youtubeRegExp = new RegExp(
+  '^(?:https?://|//)?(?:www\\.|m\\.)?' +
+    '(?:youtu\\.be/|(?:youtube\\.com/|youtube-nocookie\\.com/)(?:embed/|v/|watch\\?v=|watch\\?.+&v=))' +
+    '([\\w-]{11})(?![\\w-])',
+)
+const vimeoRegExp = new RegExp(
+  'https?://(?:www\\.|player\\.)?vimeo.com/(?:channels/' +
+    '(?:\\w+/)?|groups/([^/]*)/videos/|album/(\\d+)/video/|video/|)(\\d+)(?:$|/|\\?)',
+)
+
+export function isHostedVideo(src: string): boolean {
+  return vimeoRegExp.test(src) || youtubeRegExp.test(src)
+}
+
+const Iframe = m.create(styled('iframe')({}))
+const Video = m.create(styled('video')({}))
+
+type IframeProps = React.ComponentProps<typeof Iframe>
+type VideoProps = React.ComponentProps<typeof Video>
+
+export type ProductVideoProps = {
+  video?: ProductVideoFragment
+  autoplay?: boolean
+  iframeProps?: IframeProps
+  videoProps?: VideoProps
+  sx?: SxProps<Theme>
+  width?: number
+  height?: number
+} & MotionImageAspectPropsAdditional
+
+export function PlayCircle(props: Omit<FabProps, 'icon'>) {
+  return (
+    <Fab
+      // color='inherit'
+      size='responsive'
+      sx={{
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        '& svg': { pl: '2px' },
+      }}
+      icon={iconPlay}
+      {...props}
+    />
+  )
+}
+
+/**
+ * The regular URL will be something like https://vimeo.com/1059670239 The resulting URL will be
+ * something like https://player.vimeo.com/video/1059670239?autoplay=1&loop=1&muted=1
+ *
+ * https://developer.vimeo.com/player/sdk/embed
+ */
+function vimeoUrl(regularUrl: string, noCookie: boolean, muted: boolean = true) {
+  const vimUrl = new URL(regularUrl)
+
+  vimUrl.host = 'player.vimeo.com'
+  vimUrl.pathname = `/video${vimUrl.pathname}`
+  vimUrl.searchParams.set('autoplay', '1')
+  vimUrl.searchParams.set('loop', '1')
+  vimUrl.searchParams.set('muted', muted ? '1' : '0')
+
+  return vimUrl.toString()
+}
+
+function youtubeUrl(regularUrl: string, noCookie: boolean = false, autoplay: boolean = true) {
+  const videoId = regularUrl.split('v=')[1]
+  if (!videoId) return null
+  const ytUrl = noCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com'
+  let iframeSrc = `${ytUrl}/embed/${videoId}`
+  iframeSrc = autoplay ? `${iframeSrc}?autoplay=1&mute=1&loop=1&disablekb=1` : iframeSrc
+  return iframeSrc
+}
+
+function getEmbedUrl(regularUrl: string, noCookie: boolean = true, muted: boolean = true) {
+  if (youtubeRegExp.test(regularUrl)) {
+    return youtubeUrl(regularUrl, noCookie, muted)
+  }
+  if (vimeoRegExp.test(regularUrl)) {
+    return vimeoUrl(regularUrl, noCookie, muted)
+  }
+  return null
+}
+
+export function ProductVideo(props: ProductVideoProps) {
+  const { video, autoplay, iframeProps, videoProps, sx, style, layout, width, height } = props
+
+  const [play, setPlay] = useState(autoplay)
+
+  const videoContent = video?.video_content
+
+  if (!videoContent?.video_url) return null
+
+  const src = videoContent.video_url
+  const title = videoContent.video_title || undefined
+
+  const baseSx: SxProps<Theme> = (theme) => ({
+    display: 'block',
+    maxWidth: '99.6%',
+    maxHeight: '100%',
+    width: '100%',
+    height: 'auto',
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    aspectRatio: width && height ? `${width} / ${height}` : '16 / 9',
+    border: 'none',
+  })
+
+  const embedUrl = getEmbedUrl(src)
+
+  return (
+    <>
+      {play &&
+        (embedUrl ? (
+          <Box
+            sx={(theme) => ({
+              width: '100%',
+              height: '100%',
+              background: theme.palette.background.image,
+            })}
+          >
+            <Iframe
+              title={title}
+              frameBorder='none'
+              allowFullScreen
+              loading={autoplay ? 'eager' : 'lazy'}
+              // src={autoplay ? `${src}?autoplay=1&mute=1&loop=1&controls=0&disablekb=1` : src}
+              {...iframeProps}
+              style={style}
+              src={embedUrl}
+              allow='autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media'
+              sx={sxx(baseSx, sx, iframeProps?.sx)}
+            />
+          </Box>
+        ) : (
+          <Video
+            src={src}
+            title={title}
+            controls={false}
+            autoPlay={Boolean(autoplay)}
+            muted={Boolean(autoplay)}
+            playsInline
+            {...videoProps}
+            style={style}
+            sx={sxx(baseSx, sx, videoProps?.sx)}
+          />
+        ))}
+
+      {!play && (
+        <PlayCircle
+          onClick={(e) => {
+            e.preventDefault()
+            setPlay(true)
+          }}
+        />
+      )}
+    </>
+  )
+}

package/components/ProductPageMeta/ProductPageMeta.graphql

@@ -8,6 +8,7 @@ fragment ProductPageMeta on ProductInterface {
   }
   meta_title
   meta_description
+  meta_keyword
   price_range {
     minimum_price {
       final_price {

package/components/ProductPageMeta/ProductPageMeta.tsx

@@ -17,6 +17,7 @@ export function ProductPageMeta(props: ProductPageMetaProps) {
     media_gallery,
     name,
     meta_title,
+    meta_keyword,
     meta_description,
     url_key,
     __typename,
@@ -27,6 +28,7 @@ export function ProductPageMeta(props: ProductPageMetaProps) {
       title={meta_title ?? name ?? ''}
       metaDescription={meta_description ?? name ?? ''}
       canonical={productLink({ url_key, __typename })}
+      metaKeywords={meta_keyword ?? name ?? ''}
       ogImage={media_gallery?.[0]?.url}
       ogType='product'
       {...rest}

package/components/ProductPagePrice/ProductPagePrice.graphql

@@ -3,16 +3,7 @@ fragment ProductPagePrice on ProductInterface {
   url_key
   price_range {
     minimum_price {
-      regular_price {
-        ...Money
-      }
-      discount {
-        amount_off
-        percent_off
-      }
-      final_price {
-        ...Money
-      }
+      ...ProductPrice
     }
   }
   price_tiers {

package/components/ProductPagePrice/ProductPrice.graphql

@@ -0,0 +1,12 @@
+fragment ProductPrice on ProductPrice {
+  regular_price {
+    ...Money
+  }
+  discount {
+    amount_off
+    percent_off
+  }
+  final_price {
+    ...Money
+  }
+}

package/components/ProductPagePrice/getProductTierPrice.ts

@@ -4,14 +4,12 @@ import type { ProductPagePriceFragment } from './ProductPagePrice.gql'
 export function getProductTierPrice(
   price: Pick<ProductPagePriceFragment, 'price_tiers'>,
   quantity: number,
-): MoneyFragment | undefined {
+): MoneyFragment | undefined | null {
   const { price_tiers } = price
-  let result
+  let result: MoneyFragment | undefined | null
 
   price_tiers?.forEach((priceTier) => {
-    if (priceTier?.quantity && quantity >= priceTier?.quantity) {
-      result = priceTier?.final_price
-    }
+    if (priceTier?.quantity && quantity >= priceTier?.quantity) result = priceTier?.final_price
   })
 
   return result

package/components/ProductPagePrice/useCustomizableOptionPrice.ts

@@ -4,7 +4,6 @@ import { filterNonNullableKeys, isTypename, nonNullable } from '@graphcommerce/n
 import type { AddToCartItemSelector } from '../AddProductsToCart'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import type {
-  AnyOption,
   CustomizableProductOptionBase,
   OptionValueSelector,
   SelectorsProp,
@@ -18,14 +17,18 @@ export type UseCustomizableOptionPriceProps = {
 } & AddToCartItemSelector &
   SelectorsProp
 
-function calcOptionPrice(option: CustomizableProductOptionBase, product: MoneyFragment) {
+function calcOptionPrice(
+  option: CustomizableProductOptionBase,
+  productPrice: MoneyFragment | null | undefined,
+) {
   if (!option?.price) return 0
   switch (option.price_type) {
     case 'DYNAMIC':
+      return productPrice?.value ?? 0
     case 'FIXED':
       return option.price
     case 'PERCENT':
-      return (product?.value ?? 0) * (option.price / 100)
+      return (productPrice?.value ?? 0) * (option.price / 100)
   }
 
   return 0
@@ -40,47 +43,53 @@ export function useCustomizableOptionPrice(props: UseCustomizableOptionPriceProp
     getProductTierPrice(product, cartItem?.quantity) ??
     product.price_range.minimum_price.final_price
 
-  const allSelectors: OptionValueSelector = { ...productCustomizableSelectors, ...selectors }
+  const allSelectors = { ...productCustomizableSelectors, ...selectors } as OptionValueSelector
 
   if (isTypename(product, ['GroupedProduct'])) return price.value
   if (!product.options || product.options.length === 0) return price.value
 
-  const finalPrice = product.options.filter(nonNullable).reduce((optionPrice, productOption) => {
-    const isCustomizable = Boolean(cartItem.customizable_options?.[productOption.uid])
-    const isEntered = Boolean(
-      cartItem.entered_options?.find((o) => productOption.uid && o?.uid && o?.value),
-    )
-    if (!isCustomizable && !isEntered) return optionPrice
+  // If a product option is required the cheapest option is already included in the price of the product.
+  // We remove the value as the value is added in the finalPrice.
+  const optionPriceIncluded = product.options
+    .filter((o) => !!o)
+    .reduce((acc, productOption) => {
+      if (!productOption.required) return acc
 
-    const selector = allSelectors[productOption.__typename] as
-      | undefined
-      | ((option: AnyOption) => CustomizableProductOptionBase | CustomizableProductOptionBase[])
+      const value = allSelectors[productOption.__typename]?.(productOption).reduce((p, v) => {
+        if (!v) return p
+        return Math.min(p, calcOptionPrice(v, price))
+      }, 0)
+
+      return acc + value
+    }, 0)
+
+  const optionPrice = product.options.filter(nonNullable).reduce((acc, productOption) => {
+    const { uid } = productOption
+
+    const selected = cartItem.selected_options_record?.[uid]
+    const entered = cartItem.entered_options_record?.[uid]
+
+    const selector = allSelectors[productOption.__typename]
     const value = selector ? selector(productOption) : null
 
     if (!value) return 0
 
-    // If the option can have multiple values
-    if (Array.isArray(value)) {
+    if (selected) {
       return (
-        optionPrice +
+        acc +
         filterNonNullableKeys(value)
-          .filter(
-            (v) =>
-              cartItem.customizable_options?.[productOption.uid] &&
-              cartItem.customizable_options?.[productOption.uid].includes(v.uid),
-          )
+          .filter((v) => (Array.isArray(selected) ? selected.includes(v.uid) : selected === v.uid))
           .reduce((p, v) => p + calcOptionPrice(v, price), 0)
       )
     }
 
-    // If the option can have a single value entered.
-    if (
-      cartItem.entered_options?.filter((v) => v?.uid === productOption.uid && v.value).length !== 0
-    )
-      return optionPrice + calcOptionPrice(value, price)
+    if (entered) {
+      // If the option can have a single value entered.
+      return acc + calcOptionPrice(value[0], price)
+    }
 
-    return optionPrice
-  }, price.value ?? 0)
+    return acc
+  }, 0)
 
-  return finalPrice
+  return (price.value ?? 0) + (optionPrice - optionPriceIncluded)
 }

package/{Api → graphql/fragments}/ProductListItem.graphql

@@ -3,6 +3,8 @@ fragment ProductListItem on ProductInterface {
   ...ProductLink
   sku
   name
+  new_to_date
+  new_from_date
   small_image {
     ...ProductImage
   }

package/graphql/index.ts

@@ -0,0 +1,2 @@
+export * from './fragments/ProductListItem.gql'
+export * from './fragments/ProductPageItem.gql'

package/index.ts

@@ -1,6 +1,5 @@
 export * from './components'
-export * from './Api/ProductListItem.gql'
-export * from './Api/ProductPageItem.gql'
+export * from './graphql'
 export * from './hooks/useProductLink'
 export * from './hooks/useProductListLink'
 export * from './hooks/useProductListLinkReplace'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.1.0-canary.18",
+  "version": "9.1.0-canary.19",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,18 +18,18 @@
     "typescript": "5.7.2"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.1.0-canary.18",
-    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.18",
-    "@graphcommerce/framer-next-pages": "^9.1.0-canary.18",
-    "@graphcommerce/framer-scroller": "^9.1.0-canary.18",
-    "@graphcommerce/graphql": "^9.1.0-canary.18",
-    "@graphcommerce/graphql-mesh": "^9.1.0-canary.18",
-    "@graphcommerce/image": "^9.1.0-canary.18",
-    "@graphcommerce/magento-cart": "^9.1.0-canary.18",
-    "@graphcommerce/magento-store": "^9.1.0-canary.18",
-    "@graphcommerce/next-ui": "^9.1.0-canary.18",
-    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.18",
-    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.18",
+    "@graphcommerce/ecommerce-ui": "^9.1.0-canary.19",
+    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.19",
+    "@graphcommerce/framer-next-pages": "^9.1.0-canary.19",
+    "@graphcommerce/framer-scroller": "^9.1.0-canary.19",
+    "@graphcommerce/graphql": "^9.1.0-canary.19",
+    "@graphcommerce/graphql-mesh": "^9.1.0-canary.19",
+    "@graphcommerce/image": "^9.1.0-canary.19",
+    "@graphcommerce/magento-cart": "^9.1.0-canary.19",
+    "@graphcommerce/magento-store": "^9.1.0-canary.19",
+    "@graphcommerce/next-ui": "^9.1.0-canary.19",
+    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.19",
+    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.19",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",