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

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Change Log
 
+## 9.1.0-canary.19
+
+### Patch Changes
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`6b2b44c`](https://github.com/graphcommerce-org/graphcommerce/commit/6b2b44ca853279144d7768067f3462d4d4bf0af1) - Implement the Cart options as priceModifiers so the logic can be somewhat re-used for multiple locations ([@paales](https://github.com/paales))
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`2409514`](https://github.com/graphcommerce-org/graphcommerce/commit/240951428ac0bdc11649f4190b6d51c004680b34) - Order/Invoice/CreditMemo and Shipment views ([@paales](https://github.com/paales))
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`ef441bf`](https://github.com/graphcommerce-org/graphcommerce/commit/ef441bf44a23519e395f4b2143465a5e46bf2e7e) - Support for links_purchased_separately and links_title ([@paales](https://github.com/paales))
+
 ## 9.1.0-canary.18
 
 ## 9.1.0-canary.17

package/README.md

@@ -1 +1,7 @@
 # Magento Downloadable Products
+
+## Todo
+
+- [ ] DownloadableOrderItem
+- [ ] DownloadableCreditMemoItem
+- [ ] DownloadableInvoiceItem

package/components/DownloadableAccountMenuItem/DownloadableAccountMenuItem.tsx

@@ -20,6 +20,8 @@ export function DownloadableAccountMenuItem(props: StoreCreditAccountMenuItemPro
   const items = filterNonNullableKeys(downloadable?.items)
   const count = items.length
 
+  if (!count) return null
+
   return (
     <AccountMenuItem
       href='/account/downloads'

package/components/DownloadableProductOptions/DownloadableProductOptions.tsx

@@ -11,19 +11,26 @@ import {
 } from '@graphcommerce/next-ui'
 import { Box, Link } from '@mui/material'
 import { useMemo } from 'react'
-import type { DownloadableProductOptionsFragment } from './DownloadableProductOptions.gql'
+import type { ProductPageItemDownloadableFragment } from '../../graphql'
 
 export type DownloadableProductOptionsProps = AddToCartItemSelector & {
-  product: DownloadableProductOptionsFragment
+  product: ProductPageItemDownloadableFragment
 }
 
 export function DownloadableProductOptions(props: DownloadableProductOptionsProps) {
   const { product, index = 0 } = props
   const { control } = useFormAddProductsToCart()
 
+  const {
+    links_purchased_separately,
+    links_title,
+    downloadable_product_links,
+    downloadable_product_samples,
+  } = product
+
   const options = useMemo(
     () =>
-      filterNonNullableKeys(product.downloadable_product_links, ['title']).map((item) => {
+      filterNonNullableKeys(downloadable_product_links, ['title']).map((item) => {
         const newItem: ActionCardProps = {
           value: item.uid,
           title: item.title,
@@ -32,10 +39,10 @@ export function DownloadableProductOptions(props: DownloadableProductOptionsProp
         }
         return newItem
       }),
-    [product.downloadable_product_links],
+    [downloadable_product_links],
   )
 
-  const samples = filterNonNullableKeys(product.downloadable_product_samples, [
+  const samples = filterNonNullableKeys(downloadable_product_samples, [
     'sort_order',
     'title',
     'sample_url',
@@ -44,14 +51,13 @@ export function DownloadableProductOptions(props: DownloadableProductOptionsProp
   return (
     <>
       <Box>
-        <SectionHeader labelLeft='Downloadable Option' />
+        <SectionHeader labelLeft={links_title} />
         <ActionCardListForm
-          multiple
+          multiple={links_purchased_separately !== 1}
           size='medium'
           required
-          errorMessage='Please select an option'
           control={control}
-          name={`cartItems.${index}.selected_options`}
+          name={`cartItems.${index}.selected_options_record.downloadable`}
           render={ActionCard}
           items={options}
         />

package/components/DownloadsPage/DownloadsPage.tsx

@@ -22,7 +22,7 @@ import { i18n } from '@lingui/core'
 import { t, Trans } from '@lingui/macro'
 import { Box, Container, Link, Typography } from '@mui/material'
 import React from 'react'
-import { DownloadsPageDocument } from './DownloadsPage.gql'
+import { DownloadsPageDocument } from '../../graphql/queries/DownloadsPage.gql'
 
 export type DownloadsPageProps = Record<string, unknown>
 type DownloadsGetStaticProps = GetStaticProps<Record<string, unknown>, DownloadsPageProps>
@@ -57,7 +57,7 @@ export function DownloadsPage() {
           </LayoutTitle>
 
           <Box>
-            <SectionContainer labelLeft={<Trans id='Balance history'>Balance history</Trans>}>
+            <SectionContainer labelLeft={<Trans id='Downloads'>Downloads</Trans>}>
               <Box
                 sx={{
                   display: 'grid',

package/components/ProductListItemDownloadable/ProductListItemDownloadable.tsx

@@ -1,6 +1,6 @@
 import type { ProductListItemProps } from '@graphcommerce/magento-product'
 import { ProductListItem } from '@graphcommerce/magento-product'
-import type { ProductListItemDownloadableFragment } from './ProductListItemDownloadable.gql'
+import type { ProductListItemDownloadableFragment } from '../../graphql'
 
 export type ProductListItemDownloadableProps = ProductListItemDownloadableFragment &
   ProductListItemProps

package/graphql/fragments/DownloadableItemsLinks.graphql

@@ -0,0 +1,5 @@
+fragment DownloadableItemsLinks on DownloadableItemsLinks {
+  sort_order
+  title
+  uid
+}

package/graphql/fragments/DownloadableProductLinks.graphql

@@ -0,0 +1,7 @@
+fragment DownloadableProductLinks on DownloadableProductLinks {
+  price
+  sample_url
+  sort_order
+  title
+  uid
+}

package/graphql/fragments/DownloadableProductSamples.graphql

@@ -0,0 +1,5 @@
+fragment DownloadableProductSamples on DownloadableProductSamples {
+  title
+  sort_order
+  sample_url
+}

package/graphql/index.ts

@@ -0,0 +1,11 @@
+export * from './fragments/DownloadableItemsLinks.gql'
+export * from './fragments/DownloadableProductLinks.gql'
+export * from './fragments/DownloadableProductSamples.gql'
+export * from './inject/DownloadableAccountMenuItem.gql'
+export * from './inject/DownloadableCartItem.gql'
+export * from './inject/DownloadableCreditMemoItem.gql'
+export * from './inject/DownloadableInvoiceItem.gql'
+export * from './inject/DownloadableOrderItem.gql'
+export * from './inject/ProductListItemDownloadable.gql'
+export * from './inject/ProductPageItemDownloadable.gql'
+export * from './queries/DownloadsPage.gql'

package/{DownloadableCartItem → graphql/inject}/DownloadableCartItem.graphql

@@ -2,7 +2,6 @@ fragment DownloadableCartItem on DownloadableCartItem @inject(into: ["CartItem"]
   customizable_options {
     ...SelectedCustomizableOption
   }
-
   links {
     uid
     price
@@ -14,4 +13,10 @@ fragment DownloadableCartItem on DownloadableCartItem @inject(into: ["CartItem"]
     sort_order
     title
   }
+  product {
+    __typename
+    ... on DownloadableProduct {
+      links_title
+    }
+  }
 }

package/graphql/inject/DownloadableCreditMemoItem.graphql

@@ -0,0 +1,6 @@
+fragment DownloadableCreditMemoItem on DownloadableCreditMemoItem
+@inject(into: ["CreditMemoItem"]) {
+  downloadable_links {
+    ...DownloadableItemsLinks
+  }
+}

package/graphql/inject/DownloadableInvoiceItem.graphql

@@ -0,0 +1,5 @@
+fragment DownloadableInvoiceItem on DownloadableInvoiceItem @inject(into: ["InvoiceItem"]) {
+  downloadable_links {
+    ...DownloadableItemsLinks
+  }
+}

package/graphql/inject/DownloadableOrderItem.graphql

@@ -0,0 +1,5 @@
+fragment DownloadableOrderItem on DownloadableOrderItem @inject(into: ["OrderItem"]) {
+  downloadable_links {
+    ...DownloadableItemsLinks
+  }
+}

package/graphql/inject/ProductPageItemDownloadable.graphql

@@ -0,0 +1,12 @@
+fragment ProductPageItemDownloadable on DownloadableProduct @inject(into: ["ProductPageItem"]) {
+  __typename
+  uid
+  downloadable_product_links {
+    ...DownloadableProductLinks
+  }
+  downloadable_product_samples {
+    ...DownloadableProductSamples
+  }
+  links_purchased_separately
+  links_title
+}

package/index.ts

@@ -1,6 +1,5 @@
 export * from './components/ProductListItemDownloadable/ProductListItemDownloadable'
-export * from './components/ProductListItemDownloadable/ProductListItemDownloadable.gql'
 export * from './components/DownloadableProductOptions'
 export * from './components/DownloadableAccountMenuItem/DownloadableAccountMenuItem'
-export * from './components/DownloadableAccountMenuItem/DownloadableAccountMenuItem.gql'
 export * from './components/DownloadsPage/DownloadsPage'
+export * from './graphql'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product-downloadable",
   "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": {
@@ -12,17 +12,17 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.1.0-canary.18",
-    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.18",
-    "@graphcommerce/graphql": "^9.1.0-canary.18",
-    "@graphcommerce/magento-cart": "^9.1.0-canary.18",
-    "@graphcommerce/magento-cart-items": "^9.1.0-canary.18",
-    "@graphcommerce/magento-customer": "^9.1.0-canary.18",
-    "@graphcommerce/magento-product": "^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/graphql": "^9.1.0-canary.19",
+    "@graphcommerce/magento-cart": "^9.1.0-canary.19",
+    "@graphcommerce/magento-cart-items": "^9.1.0-canary.19",
+    "@graphcommerce/magento-customer": "^9.1.0-canary.19",
+    "@graphcommerce/magento-product": "^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",

package/plugins/DownloadableCartItemActionCard.tsx

@@ -1,13 +1,10 @@
 import {
-  SelectedCustomizableOptions,
+  selectedCustomizableOptionsModifiers,
   type CartItemActionCardProps,
 } from '@graphcommerce/magento-cart-items'
-import { Money } from '@graphcommerce/magento-store'
+import type { PriceModifier } from '@graphcommerce/magento-store'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
-import { filterNonNullableKeys, isTypename } from '@graphcommerce/next-ui'
-import { Box } from '@mui/material'
-import React from 'react'
-import { DownloadableCartItemOptions } from '../components/DownloadableCartItemOptions/DownloadableCartItemOptions'
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
 
 export const config: PluginConfig = {
   type: 'component',
@@ -15,16 +12,32 @@ export const config: PluginConfig = {
 }
 
 export function CartItemActionCard(props: PluginProps<CartItemActionCardProps>) {
-  const { Prev, ...rest } = props
+  const { Prev, priceModifiers = [], ...rest } = props
+
+  if (
+    rest.cartItem.__typename !== 'DownloadableCartItem' ||
+    rest.cartItem.product.__typename !== 'DownloadableProduct'
+  )
+    return <Prev priceModifiers={priceModifiers} {...rest} />
+
+  const downloadableModifier: PriceModifier = {
+    key: 'downloadable',
+    label: rest.cartItem.product.links_title,
+    items: filterNonNullableKeys(rest.cartItem.links).map((link) => ({
+      key: link.uid,
+      label: link.title,
+      amount: link.price,
+    })),
+  }
 
   return (
     <Prev
       {...rest}
-      details={
-        <>
-          {rest.details} <DownloadableCartItemOptions {...rest} />
-        </>
-      }
+      priceModifiers={[
+        ...priceModifiers,
+        downloadableModifier,
+        ...selectedCustomizableOptionsModifiers(rest.cartItem),
+      ]}
     />
   )
 }

package/plugins/DownloadableCreditMemoItem.tsx

@@ -0,0 +1,34 @@
+import type { CreditMemoItemProps } from '@graphcommerce/magento-customer'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
+
+export const config: PluginConfig = {
+  type: 'component',
+  module: '@graphcommerce/magento-customer',
+}
+
+export function CreditMemoItem(props: PluginProps<CreditMemoItemProps>) {
+  const { Prev, ...rest } = props
+
+  if (rest.item.__typename !== 'DownloadableCreditMemoItem') return <Prev {...rest} />
+
+  return (
+    <Prev
+      {...rest}
+      priceModifiers={[
+        ...(rest.priceModifiers ?? []),
+        {
+          key: 'downloadable-links',
+          label: <Trans id='Downloads'>Downloads</Trans>,
+          items: filterNonNullableKeys(rest.item.downloadable_links)
+            .sort((a, b) => a.sort_order - b.sort_order)
+            .map((link) => ({
+              key: link.uid,
+              label: link.title,
+            })),
+        },
+      ]}
+    />
+  )
+}

package/plugins/DownloadableInvoiceItem.tsx

@@ -0,0 +1,34 @@
+import type { InvoiceItemProps } from '@graphcommerce/magento-customer'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
+
+export const config: PluginConfig = {
+  type: 'component',
+  module: '@graphcommerce/magento-customer',
+}
+
+export function InvoiceItem(props: PluginProps<InvoiceItemProps>) {
+  const { Prev, ...rest } = props
+
+  if (rest.item.__typename !== 'DownloadableInvoiceItem') return <Prev {...rest} />
+
+  return (
+    <Prev
+      {...rest}
+      priceModifiers={[
+        ...(rest.priceModifiers ?? []),
+        {
+          key: 'downloadable-links',
+          label: <Trans id='Downloads'>Downloads</Trans>,
+          items: filterNonNullableKeys(rest.item.downloadable_links)
+            .sort((a, b) => a.sort_order - b.sort_order)
+            .map((link) => ({
+              key: link.uid,
+              label: link.title,
+            })),
+        },
+      ]}
+    />
+  )
+}

package/plugins/DownloadableOrderItem.tsx

@@ -0,0 +1,30 @@
+import type { OrderItemProps } from '@graphcommerce/magento-customer'
+import type { PriceModifier } from '@graphcommerce/magento-store'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+
+export const config: PluginConfig = {
+  type: 'component',
+  module: '@graphcommerce/magento-customer',
+}
+
+export function OrderItem(props: PluginProps<OrderItemProps>) {
+  const { Prev, ...rest } = props
+
+  if (rest.item.__typename !== 'DownloadableOrderItem') return <Prev {...rest} />
+
+  return (
+    <Prev
+      {...rest}
+      priceModifiers={[
+        ...(rest.priceModifiers ?? []),
+        ...filterNonNullableKeys(rest.item.downloadable_links)
+          .sort((a, b) => a.sort_order - b.sort_order)
+          .map<PriceModifier>((link) => ({
+            key: link.uid,
+            label: link.title,
+          })),
+      ]}
+    />
+  )
+}

package/plugins/DownloadableProductPagePrice.tsx

@@ -5,8 +5,8 @@ import {
   type ProductPagePriceProps,
 } from '@graphcommerce/magento-product'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
-import type { DownloadableProductOptionsFragment } from '../components/DownloadableProductOptions/DownloadableProductOptions.gql'
-import type { ProductListItemDownloadableFragment } from '../components/ProductListItemDownloadable/ProductListItemDownloadable.gql'
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+import type { ProductPageItemDownloadableFragment } from '../graphql'
 
 export const config: PluginConfig = {
   type: 'component',
@@ -16,11 +16,11 @@ export const config: PluginConfig = {
 function isDownloadableProduct(
   product:
     | ProductPagePriceProps['product']
-    | (ProductPagePriceProps['product'] & DownloadableProductOptionsFragment),
-): product is ProductPagePriceProps['product'] & DownloadableProductOptionsFragment {
+    | (ProductPagePriceProps['product'] & ProductPageItemDownloadableFragment),
+): product is ProductPagePriceProps['product'] & ProductPageItemDownloadableFragment {
   return (
     product.__typename === 'DownloadableProduct' &&
-    Array.isArray((product as DownloadableProductOptionsFragment).downloadable_product_links)
+    Array.isArray((product as ProductPageItemDownloadableFragment).downloadable_product_links)
   )
 }
 
@@ -32,13 +32,16 @@ export function ProductPagePrice(
   const form = useFormAddProductsToCart()
   const selectedOptions = useWatch({
     control: form.control,
-    name: `cartItems.${index}.selected_options`,
+    name: `cartItems.${index}.selected_options_record.downloadable`,
   })
 
-  if (!isDownloadableProduct(product)) return <Prev product={product} index={index} {...rest} />
+  if (!isDownloadableProduct(product) || !selectedOptions)
+    return <Prev product={product} index={index} {...rest} />
 
-  const selectedLinks = product.downloadable_product_links?.filter((link) =>
-    selectedOptions?.includes(link?.uid ?? ''),
+  const selectedLinks = filterNonNullableKeys(product.downloadable_product_links).filter((link) =>
+    Array.isArray(selectedOptions)
+      ? selectedOptions.includes(link.uid)
+      : selectedOptions === link.uid,
   )
 
   const totalPrice = selectedLinks?.reduce((acc, link) => acc + (link?.price ?? 0), 0) ?? 0

package/plugins/Downloadable_cartItemToCartItemInput.ts

@@ -1,4 +1,3 @@
-import type { CartItemInput } from '@graphcommerce/graphql-mesh'
 import { type cartItemToCartItemInput as cartItemToCartItemInputType } from '@graphcommerce/magento-cart-items'
 import type { FunctionPlugin, PluginConfig } from '@graphcommerce/next-config'
 import { filterNonNullableKeys, isTypename } from '@graphcommerce/next-ui'
@@ -22,15 +21,12 @@ export const cartItemToCartItemInput: FunctionPlugin<typeof cartItemToCartItemIn
   const links = filterNonNullableKeys(cartItem.links, ['title', 'price'])
   const productLinks = filterNonNullableKeys(product.downloadable_product_links, ['title', 'price'])
 
-  const selected_options: NonNullable<CartItemInput['selected_options']> = []
+  const downloadable: string[] = []
 
   productLinks.forEach((link) => {
     const linkIndex = links.findIndex((l) => l.uid === link.uid)
-    if (linkIndex !== -1) selected_options[linkIndex] = link.uid
+    if (linkIndex !== -1) downloadable.push(link.uid)
   })
 
-  return {
-    ...result,
-    selected_options,
-  } satisfies CartItemInput
+  return { ...result, selected_options_record: { ...result.selected_options_record, downloadable } }
 }

package/components/DownloadableCartItemOptions/DownloadableCartItemOptions.tsx

@@ -1,39 +0,0 @@
-import {
-  SelectedCustomizableOptions,
-  type CartItemActionCardProps,
-} from '@graphcommerce/magento-cart-items'
-import { Money } from '@graphcommerce/magento-store'
-import { filterNonNullableKeys } from '@graphcommerce/next-ui'
-import { Box } from '@mui/material'
-import React from 'react'
-
-export function DownloadableCartItemOptions(props: CartItemActionCardProps) {
-  const { cartItem } = props
-
-  if (cartItem.__typename !== 'DownloadableCartItem') return null
-
-  const links = filterNonNullableKeys(cartItem.links, ['title', 'price'])
-
-  return (
-    <>
-      <Box
-        sx={(theme) => ({
-          display: 'grid',
-          gridTemplateColumns: 'auto auto',
-          gap: theme.spacings.xs,
-        })}
-      >
-        {links.map((link) => (
-          <React.Fragment key={link.uid}>
-            <span>{link.title}</span>
-            <Box>
-              <Money value={link.price} currency={cartItem.prices?.price.currency} />
-            </Box>
-          </React.Fragment>
-        ))}
-      </Box>
-
-      <SelectedCustomizableOptions {...cartItem} />
-    </>
-  )
-}

package/components/DownloadableProductOptions/DownloadableProductOptions.graphql

@@ -1,18 +0,0 @@
-fragment DownloadableProductOptions on DownloadableProduct {
-  __typename
-  uid
-  ... on DownloadableProduct {
-    downloadable_product_links {
-      price
-      sample_url
-      sort_order
-      title
-      uid
-    }
-    downloadable_product_samples {
-      title
-      sort_order
-      sample_url
-    }
-  }
-}