@graphcommerce/magento-product-downloadable 9.0.4-canary.9 → 9.1.0-canary.16

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Change Log
 
+## 9.1.0-canary.16
+
+## 9.1.0-canary.15
+
+### Minor Changes
+
+- [#2493](https://github.com/graphcommerce-org/graphcommerce/pull/2493) [`01ba1a7`](https://github.com/graphcommerce-org/graphcommerce/commit/01ba1a73c86778ea9b34059ec092723b4a56b92b) - Improved Downloadable products functionality:
+
+  - Account Dashboard Link and Download Page
+  - Download samples / linkSamples and links from the backend.
+  - CartItem edit functionality for the DownloadableCartItem
+  - Dynamic ProductPagePrice for downloadable options ([@paales](https://github.com/paales))
+
+## 9.0.4-canary.14
+
+## 9.0.4-canary.13
+
+## 9.0.4-canary.12
+
+## 9.0.4-canary.11
+
+## 9.0.4-canary.10
+
 ## 9.0.4-canary.9
 
 ## 9.0.4-canary.8

package/README.md

@@ -0,0 +1 @@
+# Magento Downloadable Products

package/components/DownloadableAccountMenuItem/DownloadableAccountMenuItem.graphql

@@ -0,0 +1,11 @@
+fragment DownloadableAccountMenuItem on Query @inject(into: ["AccountDashboardQueryFragment"]) {
+  customerDownloadableProducts {
+    items {
+      date
+      download_url
+      order_increment_id
+      remaining_downloads
+      status
+    }
+  }
+}

package/components/DownloadableAccountMenuItem/DownloadableAccountMenuItem.tsx

@@ -0,0 +1,32 @@
+import {
+  AccountDashboardDocument,
+  AccountMenuItem,
+  useCustomerQuery,
+  type AccountMenuItemProps,
+} from '@graphcommerce/magento-customer'
+import { filterNonNullableKeys, iconDownload } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
+import type { SetOptional } from 'type-fest'
+
+type StoreCreditAccountMenuItemProps = SetOptional<
+  Omit<AccountMenuItemProps, 'href'>,
+  'iconSrc' | 'title'
+>
+
+export function DownloadableAccountMenuItem(props: StoreCreditAccountMenuItemProps) {
+  const dashboard = useCustomerQuery(AccountDashboardDocument, { fetchPolicy: 'cache-only' })
+  const downloadable = dashboard.data?.customerDownloadableProducts
+
+  const items = filterNonNullableKeys(downloadable?.items)
+  const count = items.length
+
+  return (
+    <AccountMenuItem
+      href='/account/downloads'
+      iconSrc={iconDownload}
+      title={<Trans id='Downloads'>Downloads</Trans>}
+      subtitle={<Trans>You have {count} downloads available.</Trans>}
+      {...props}
+    />
+  )
+}

package/components/DownloadableCartItemOptions/DownloadableCartItemOptions.tsx

@@ -0,0 +1,39 @@
+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.tsx

@@ -3,7 +3,13 @@ import type { AddToCartItemSelector } from '@graphcommerce/magento-product'
 import { useFormAddProductsToCart } from '@graphcommerce/magento-product'
 import { Money } from '@graphcommerce/magento-store'
 import type { ActionCardProps } from '@graphcommerce/next-ui'
-import { ActionCard, filterNonNullableKeys } from '@graphcommerce/next-ui'
+import {
+  ActionCard,
+  filterNonNullableKeys,
+  ListFormat,
+  SectionHeader,
+} from '@graphcommerce/next-ui'
+import { Box, Link } from '@mui/material'
 import { useMemo } from 'react'
 import type { DownloadableProductOptionsFragment } from './DownloadableProductOptions.gql'
 
@@ -15,28 +21,54 @@ export function DownloadableProductOptions(props: DownloadableProductOptionsProp
   const { product, index = 0 } = props
   const { control } = useFormAddProductsToCart()
 
-  const items = useMemo(
+  const options = useMemo(
     () =>
       filterNonNullableKeys(product.downloadable_product_links, ['title']).map((item) => {
         const newItem: ActionCardProps = {
           value: item.uid,
           title: item.title,
           price: <Money value={item.price} />,
+          details: item.sample_url ? <Link href={item.sample_url}>View Sample</Link> : null,
         }
         return newItem
       }),
     [product.downloadable_product_links],
   )
 
+  const samples = filterNonNullableKeys(product.downloadable_product_samples, [
+    'sort_order',
+    'title',
+    'sample_url',
+  ]).sort((a, b) => a.sort_order - b.sort_order)
+
   return (
-    <ActionCardListForm
-      size='medium'
-      required
-      errorMessage='Please select an option'
-      control={control}
-      name={`cartItems.${index}.selected_options.0`}
-      render={ActionCard}
-      items={items}
-    />
+    <>
+      <Box>
+        <SectionHeader labelLeft='Downloadable Option' />
+        <ActionCardListForm
+          multiple
+          size='medium'
+          required
+          errorMessage='Please select an option'
+          control={control}
+          name={`cartItems.${index}.selected_options`}
+          render={ActionCard}
+          items={options}
+        />
+      </Box>
+
+      {samples.length > 0 ? (
+        <Box>
+          <SectionHeader labelLeft='Samples' />
+          <ListFormat>
+            {samples.map((sample) => (
+              <Link key={sample.sample_url} href={sample.sample_url}>
+                {sample.title}
+              </Link>
+            ))}
+          </ListFormat>
+        </Box>
+      ) : null}
+    </>
   )
 }

package/components/DownloadsPage/DownloadsPage.graphql

@@ -0,0 +1,11 @@
+query DownloadsPage {
+  customerDownloadableProducts {
+    items {
+      date
+      download_url
+      order_increment_id
+      remaining_downloads
+      status
+    }
+  }
+}

package/components/DownloadsPage/DownloadsPage.tsx

@@ -0,0 +1,134 @@
+import type { ApolloClient, NormalizedCacheObject } from '@graphcommerce/graphql'
+import {
+  getCustomerAccountIsDisabled,
+  useCustomerQuery,
+  useCustomerSession,
+  WaitForCustomer,
+} from '@graphcommerce/magento-customer'
+import { PageMeta, StoreConfigDocument } from '@graphcommerce/magento-store'
+import {
+  Button,
+  DateFormat,
+  filterNonNullableKeys,
+  iconCreditCard,
+  iconDownload,
+  LayoutOverlayHeader,
+  LayoutTitle,
+  RelativeToTimeFormat,
+  SectionContainer,
+  type GetStaticProps,
+} from '@graphcommerce/next-ui'
+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'
+
+export type DownloadsPageProps = Record<string, unknown>
+type DownloadsGetStaticProps = GetStaticProps<Record<string, unknown>, DownloadsPageProps>
+
+export function DownloadsPage() {
+  const dashboard = useCustomerQuery(DownloadsPageDocument, {
+    fetchPolicy: 'cache-and-network',
+  })
+
+  const downloads = filterNonNullableKeys(dashboard.data?.customerDownloadableProducts?.items)
+
+  const session = useCustomerSession()
+
+  return (
+    <>
+      <LayoutOverlayHeader>
+        <LayoutTitle size='small' component='span' icon={iconDownload}>
+          <Trans id='Downloads'>Downloads</Trans>
+        </LayoutTitle>
+      </LayoutOverlayHeader>
+
+      <Container maxWidth='md'>
+        <WaitForCustomer waitFor={dashboard}>
+          <PageMeta title={t`Downloads`} metaRobots={['noindex']} />
+
+          <LayoutTitle
+            icon={iconDownload}
+            sx={(theme) => ({ mb: theme.spacings.xs })}
+            gutterBottom={false}
+          >
+            <Trans id='Downloads'>Downloads</Trans>
+          </LayoutTitle>
+
+          <Box>
+            <SectionContainer labelLeft={<Trans id='Balance history'>Balance history</Trans>}>
+              <Box
+                sx={{
+                  display: 'grid',
+                  gridTemplateColumns: 'repeat(5, auto)',
+                  gap: 1,
+                  alignItems: 'center',
+                }}
+              >
+                <Typography variant='subtitle1'>
+                  <Trans id='Order'>Order</Trans>
+                </Typography>
+                <Typography variant='subtitle1'>
+                  <Trans id='Download'>Download</Trans>
+                </Typography>
+                <Typography variant='subtitle1'>
+                  <Trans id='Remaining'>Remaining</Trans>
+                </Typography>
+                <Typography variant='subtitle1'>
+                  <Trans id='Status'>Status</Trans>
+                </Typography>
+                <Typography variant='subtitle1'>
+                  <Trans id='Date'>Date</Trans>
+                </Typography>
+
+                {downloads.map((item, index) => (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <React.Fragment key={index}>
+                    <Box>
+                      <Link href={`/account/orders/view?orderNumber=${item.order_increment_id}`}>
+                        {item.order_increment_id}
+                      </Link>
+                    </Box>
+                    <Box>
+                      {item.status === 'available' ? (
+                        <Link href={item.download_url} color='secondary'>
+                          Download now
+                        </Link>
+                      ) : (
+                        <Typography variant='subtitle1'>Order not completed</Typography>
+                      )}
+                    </Box>
+                    <Box>{item.remaining_downloads}</Box>
+                    <Box>{item.status}</Box>
+                    <Box>
+                      <RelativeToTimeFormat date={item.date} />
+                    </Box>
+                  </React.Fragment>
+                ))}
+              </Box>
+            </SectionContainer>
+          </Box>
+        </WaitForCustomer>
+      </Container>
+    </>
+  )
+}
+
+export function createGetStaticProps(
+  client: ApolloClient<NormalizedCacheObject>,
+): DownloadsGetStaticProps {
+  return async (context) => {
+    if (getCustomerAccountIsDisabled(context.locale)) return { notFound: true }
+
+    const conf = client.query({ query: StoreConfigDocument })
+
+    return {
+      props: {
+        apolloState: await conf.then(() => client.cache.extract()),
+        variantMd: 'bottom',
+        up: { href: '/account', title: i18n._('Account') },
+      },
+    }
+  }
+}

package/copy/pages/account/downloads.tsx

@@ -0,0 +1,26 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type { PageOptions } from '@graphcommerce/framer-next-pages'
+import type { DownloadsPageProps } from '@graphcommerce/magento-product-downloadable'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { createGetStaticProps, DownloadsPage } from '@graphcommerce/magento-product-downloadable'
+import type { GetStaticProps, LayoutOverlayProps } from '@graphcommerce/next-ui'
+import { LayoutOverlay } from '@graphcommerce/next-ui'
+import { graphqlSharedClient } from '../../lib/graphql/graphqlSsrClient'
+
+type GetPageStaticProps = GetStaticProps<LayoutOverlayProps>
+
+export default function Page(props: DownloadsPageProps) {
+  return <DownloadsPage {...props} />
+}
+
+const pageOptions: PageOptions<LayoutOverlayProps> = {
+  overlayGroup: 'account',
+  Layout: LayoutOverlay,
+}
+
+Page.pageOptions = pageOptions
+
+export const getStaticProps: GetPageStaticProps = async (context) => {
+  const client = graphqlSharedClient(context)
+  return createGetStaticProps(client)(context)
+}

package/copy/pages/downloadable/download/link/id/[id].tsx

@@ -0,0 +1,104 @@
+// managed by: graphcommerce
+// to modify this file, change it to managed by: local
+
+import type { PageOptions } from '@graphcommerce/framer-next-pages'
+import { cacheFirst } from '@graphcommerce/graphql'
+import { StoreConfigDocument } from '@graphcommerce/magento-store'
+import { FullPageMessage, iconError, IconSvg } from '@graphcommerce/next-ui'
+import type { GetServerSideProps } from 'next'
+import {
+  LayoutDocument,
+  LayoutNavigation,
+  type LayoutNavigationProps,
+} from '../../../../../components'
+import { graphqlSsrClient } from '../../../../../lib/graphql/graphqlSsrClient'
+
+type ErrorType = 'not-sharable' | 'unknown'
+
+type Props = { errorType: ErrorType }
+
+export default function DownloadLinkPage(props: Props) {
+  const { errorType } = props
+  return (
+    <FullPageMessage
+      icon={<IconSvg src={iconError} size='xxl' />}
+      title={<>Error while downloading file</>}
+    >
+      {errorType === 'not-sharable' && (
+        <>
+          The requested file of found, but is not &ldquo;Sharable&rdquo; and can therefor not be
+          downloaded.
+        </>
+      )}
+    </FullPageMessage>
+  )
+}
+
+DownloadLinkPage.pageOptions = {
+  Layout: LayoutNavigation,
+} as PageOptions
+
+export const getServerSideProps: GetServerSideProps<Props & LayoutNavigationProps> = async (
+  context,
+) => {
+  const { query } = context
+  const id = query?.id
+
+  const staticClient = graphqlSsrClient(context)
+  const conf = await staticClient.query({ query: StoreConfigDocument })
+
+  const baseUrl = conf.data.storeConfig?.secure_base_url
+  if (!baseUrl) return { notFound: true }
+
+  const downloadUrl = new URL(baseUrl)
+  downloadUrl.pathname = `/downloadable/download/link/id/${id}`
+
+  const response = await fetch(downloadUrl, {
+    redirect: 'manual',
+  })
+
+  async function pageResponse(errorType: ErrorType) {
+    const layout = staticClient.query({
+      query: LayoutDocument,
+      fetchPolicy: cacheFirst(staticClient),
+    })
+    return {
+      props: {
+        errorType,
+        ...(await layout).data,
+        apolloState: staticClient.cache.extract(),
+      },
+    }
+  }
+
+  if (response.status === 302) {
+    const location = response.headers.get('Location')
+    const requestSignIn = location?.includes('customer/account/login')
+    if (requestSignIn) return pageResponse('not-sharable')
+    return pageResponse('unknown')
+  }
+
+  if (response.status !== 200 || !response.body) return { notFound: true }
+
+  context.res.setHeader(
+    'Content-Type',
+    response.headers.get('Content-Type') ?? 'application/octet-stream',
+  )
+  context.res.setHeader(
+    'Content-Disposition',
+    response.headers.get('Content-Disposition') ?? 'attachment',
+  )
+
+  await response.body.pipeTo(
+    new WritableStream<Uint8Array>({
+      write: (chunk) => {
+        context.res.write(chunk)
+      },
+      close() {
+        context.res.end()
+      },
+    }),
+  )
+
+  return pageResponse('unknown')
+}

package/copy/pages/downloadable/download/linkSample/link_id/[id].tsx

@@ -0,0 +1,107 @@
+// managed by: graphcommerce
+// to modify this file, change it to managed by: local
+
+// managed by: graphcommerce
+// to modify this file, change it to managed by: local
+
+import type { PageOptions } from '@graphcommerce/framer-next-pages'
+import { cacheFirst } from '@graphcommerce/graphql'
+import { StoreConfigDocument } from '@graphcommerce/magento-store'
+import { FullPageMessage, iconError, IconSvg } from '@graphcommerce/next-ui'
+import type { GetServerSideProps } from 'next'
+import {
+  LayoutDocument,
+  LayoutNavigation,
+  type LayoutNavigationProps,
+} from '../../../../../components'
+import { graphqlSsrClient } from '../../../../../lib/graphql/graphqlSsrClient'
+
+type ErrorType = 'not-sharable' | 'unknown'
+
+type Props = { errorType: ErrorType }
+
+export default function DownloadLinkPage(props: Props) {
+  const { errorType } = props
+  return (
+    <FullPageMessage
+      icon={<IconSvg src={iconError} size='xxl' />}
+      title={<>Error while downloading file</>}
+    >
+      {errorType === 'not-sharable' && (
+        <>
+          The requested file of found, but is not &ldquo;Sharable&rdquo; and can therefor not be
+          downloaded.
+        </>
+      )}
+    </FullPageMessage>
+  )
+}
+
+DownloadLinkPage.pageOptions = {
+  Layout: LayoutNavigation,
+} as PageOptions
+
+export const getServerSideProps: GetServerSideProps<Props & LayoutNavigationProps> = async (
+  context,
+) => {
+  const { query } = context
+  const id = query?.id
+
+  const staticClient = graphqlSsrClient(context)
+  const conf = await staticClient.query({ query: StoreConfigDocument })
+
+  const baseUrl = conf.data.storeConfig?.secure_base_url
+  if (!baseUrl) return { notFound: true }
+
+  const downloadUrl = new URL(baseUrl)
+  downloadUrl.pathname = `/downloadable/download/linkSample/link_id/${id}`
+
+  const response = await fetch(downloadUrl, {
+    redirect: 'manual',
+  })
+
+  async function pageResponse(errorType: ErrorType) {
+    const layout = staticClient.query({
+      query: LayoutDocument,
+      fetchPolicy: cacheFirst(staticClient),
+    })
+    return {
+      props: {
+        errorType,
+        ...(await layout).data,
+        apolloState: staticClient.cache.extract(),
+      },
+    }
+  }
+
+  if (response.status === 302) {
+    const location = response.headers.get('Location')
+    const requestSignIn = location?.includes('customer/account/login')
+    if (requestSignIn) return pageResponse('not-sharable')
+    return pageResponse('unknown')
+  }
+
+  if (response.status !== 200 || !response.body) return { notFound: true }
+
+  context.res.setHeader(
+    'Content-Type',
+    response.headers.get('Content-Type') ?? 'application/octet-stream',
+  )
+  context.res.setHeader(
+    'Content-Disposition',
+    response.headers.get('Content-Disposition') ?? 'attachment',
+  )
+
+  await response.body.pipeTo(
+    new WritableStream<Uint8Array>({
+      write: (chunk) => {
+        context.res.write(chunk)
+      },
+      close() {
+        context.res.end()
+      },
+    }),
+  )
+
+  return pageResponse('unknown')
+}

package/copy/pages/downloadable/download/sample/sample_id/[id].tsx

@@ -0,0 +1,107 @@
+// managed by: graphcommerce
+// to modify this file, change it to managed by: local
+
+// managed by: graphcommerce
+// to modify this file, change it to managed by: local
+
+import type { PageOptions } from '@graphcommerce/framer-next-pages'
+import { cacheFirst } from '@graphcommerce/graphql'
+import { StoreConfigDocument } from '@graphcommerce/magento-store'
+import { FullPageMessage, iconError, IconSvg } from '@graphcommerce/next-ui'
+import type { GetServerSideProps } from 'next'
+import {
+  LayoutDocument,
+  LayoutNavigation,
+  type LayoutNavigationProps,
+} from '../../../../../components'
+import { graphqlSsrClient } from '../../../../../lib/graphql/graphqlSsrClient'
+
+type ErrorType = 'not-sharable' | 'unknown'
+
+type Props = { errorType: ErrorType }
+
+export default function DownloadLinkPage(props: Props) {
+  const { errorType } = props
+  return (
+    <FullPageMessage
+      icon={<IconSvg src={iconError} size='xxl' />}
+      title={<>Error while downloading file</>}
+    >
+      {errorType === 'not-sharable' && (
+        <>
+          The requested file of found, but is not &ldquo;Sharable&rdquo; and can therefor not be
+          downloaded.
+        </>
+      )}
+    </FullPageMessage>
+  )
+}
+
+DownloadLinkPage.pageOptions = {
+  Layout: LayoutNavigation,
+} as PageOptions
+
+export const getServerSideProps: GetServerSideProps<Props & LayoutNavigationProps> = async (
+  context,
+) => {
+  const { query } = context
+  const id = query?.id
+
+  const staticClient = graphqlSsrClient(context)
+  const conf = await staticClient.query({ query: StoreConfigDocument })
+
+  const baseUrl = conf.data.storeConfig?.secure_base_url
+  if (!baseUrl) return { notFound: true }
+
+  const downloadUrl = new URL(baseUrl)
+  downloadUrl.pathname = `/downloadable/download/sample/sample_id/${id}`
+
+  const response = await fetch(downloadUrl, {
+    redirect: 'manual',
+  })
+
+  async function pageResponse(errorType: ErrorType) {
+    const layout = staticClient.query({
+      query: LayoutDocument,
+      fetchPolicy: cacheFirst(staticClient),
+    })
+    return {
+      props: {
+        errorType,
+        ...(await layout).data,
+        apolloState: staticClient.cache.extract(),
+      },
+    }
+  }
+
+  if (response.status === 302) {
+    const location = response.headers.get('Location')
+    const requestSignIn = location?.includes('customer/account/login')
+    if (requestSignIn) return pageResponse('not-sharable')
+    return pageResponse('unknown')
+  }
+
+  if (response.status !== 200 || !response.body) return { notFound: true }
+
+  context.res.setHeader(
+    'Content-Type',
+    response.headers.get('Content-Type') ?? 'application/octet-stream',
+  )
+  context.res.setHeader(
+    'Content-Disposition',
+    response.headers.get('Content-Disposition') ?? 'attachment',
+  )
+
+  await response.body.pipeTo(
+    new WritableStream<Uint8Array>({
+      write: (chunk) => {
+        context.res.write(chunk)
+      },
+      close() {
+        context.res.end()
+      },
+    }),
+  )
+
+  return pageResponse('unknown')
+}

package/index.ts

@@ -1,4 +1,6 @@
-export * from './DownloadableProductPage.gql'
-export * from './ProductListItemDownloadable'
-export * from './ProductListItemDownloadable.gql'
+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'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product-downloadable",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.4-canary.9",
+  "version": "9.1.0-canary.16",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,18 +12,21 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.4-canary.9",
-    "@graphcommerce/eslint-config-pwa": "^9.0.4-canary.9",
-    "@graphcommerce/graphql": "^9.0.4-canary.9",
-    "@graphcommerce/magento-cart": "^9.0.4-canary.9",
-    "@graphcommerce/magento-product": "^9.0.4-canary.9",
-    "@graphcommerce/magento-store": "^9.0.4-canary.9",
-    "@graphcommerce/next-ui": "^9.0.4-canary.9",
-    "@graphcommerce/prettier-config-pwa": "^9.0.4-canary.9",
-    "@graphcommerce/typescript-config-pwa": "^9.0.4-canary.9",
+    "@graphcommerce/ecommerce-ui": "^9.1.0-canary.16",
+    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.16",
+    "@graphcommerce/graphql": "^9.1.0-canary.16",
+    "@graphcommerce/magento-cart": "^9.1.0-canary.16",
+    "@graphcommerce/magento-cart-items": "^9.1.0-canary.16",
+    "@graphcommerce/magento-customer": "^9.1.0-canary.16",
+    "@graphcommerce/magento-product": "^9.1.0-canary.16",
+    "@graphcommerce/magento-store": "^9.1.0-canary.16",
+    "@graphcommerce/next-ui": "^9.1.0-canary.16",
+    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.16",
+    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.16",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",
+    "@mui/material": "^5.10.16",
     "next": "*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

package/plugins/DownloadableAccountMenuItem.tsx

@@ -0,0 +1,19 @@
+import type { AccountMenuItemProps } from '@graphcommerce/magento-customer'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { DownloadableAccountMenuItem } from '../components/DownloadableAccountMenuItem/DownloadableAccountMenuItem'
+
+export const config: PluginConfig = {
+  module: '@graphcommerce/magento-customer',
+  type: 'component',
+}
+
+export function AccountMenuItem(props: PluginProps<AccountMenuItemProps>) {
+  const { Prev, href, ...rest } = props
+
+  return (
+    <>
+      <Prev {...rest} href={href} />
+      {href === '/account/orders' && <DownloadableAccountMenuItem />}
+    </>
+  )
+}

package/plugins/DownloadableCartItemActionCard.tsx

@@ -0,0 +1,30 @@
+import {
+  SelectedCustomizableOptions,
+  type CartItemActionCardProps,
+} from '@graphcommerce/magento-cart-items'
+import { Money } 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'
+
+export const config: PluginConfig = {
+  type: 'component',
+  module: '@graphcommerce/magento-cart-items',
+}
+
+export function CartItemActionCard(props: PluginProps<CartItemActionCardProps>) {
+  const { Prev, ...rest } = props
+
+  return (
+    <Prev
+      {...rest}
+      details={
+        <>
+          {rest.details} <DownloadableCartItemOptions {...rest} />
+        </>
+      }
+    />
+  )
+}

package/plugins/DownloadableProductPagePrice.tsx

@@ -0,0 +1,69 @@
+import { useWatch } from '@graphcommerce/ecommerce-ui'
+import {
+  useFormAddProductsToCart,
+  type AddToCartItemSelector,
+  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'
+
+export const config: PluginConfig = {
+  type: 'component',
+  module: '@graphcommerce/magento-product',
+}
+
+function isDownloadableProduct(
+  product:
+    | ProductPagePriceProps['product']
+    | (ProductPagePriceProps['product'] & DownloadableProductOptionsFragment),
+): product is ProductPagePriceProps['product'] & DownloadableProductOptionsFragment {
+  return (
+    product.__typename === 'DownloadableProduct' &&
+    Array.isArray((product as DownloadableProductOptionsFragment).downloadable_product_links)
+  )
+}
+
+export function ProductPagePrice(
+  props: PluginProps<ProductPagePriceProps> & AddToCartItemSelector,
+) {
+  const { Prev, product, index = 0, ...rest } = props
+
+  const form = useFormAddProductsToCart()
+  const selectedOptions = useWatch({
+    control: form.control,
+    name: `cartItems.${index}.selected_options`,
+  })
+
+  if (!isDownloadableProduct(product)) return <Prev product={product} index={index} {...rest} />
+
+  const selectedLinks = product.downloadable_product_links?.filter((link) =>
+    selectedOptions?.includes(link?.uid ?? ''),
+  )
+
+  const totalPrice = selectedLinks?.reduce((acc, link) => acc + (link?.price ?? 0), 0) ?? 0
+
+  return (
+    <Prev
+      product={{
+        ...product,
+        price_range: {
+          ...product.price_range,
+          minimum_price: {
+            ...product.price_range.minimum_price,
+            regular_price: {
+              currency: product.price_range.minimum_price.regular_price.currency,
+              value: (product.price_range.minimum_price.regular_price.value ?? 0) + totalPrice,
+            },
+            final_price: {
+              currency: product.price_range.minimum_price.final_price.currency,
+              value: (product.price_range.minimum_price.final_price.value ?? 0) + totalPrice,
+            },
+          },
+        },
+      }}
+      index={index}
+      {...rest}
+    />
+  )
+}

package/plugins/Downloadable_cartItemToCartItemInput.ts

@@ -0,0 +1,36 @@
+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'
+
+export const config: PluginConfig = {
+  type: 'function',
+  module: '@graphcommerce/magento-cart-items',
+}
+
+export const cartItemToCartItemInput: FunctionPlugin<typeof cartItemToCartItemInputType> = (
+  prev,
+  props,
+) => {
+  const result = prev(props)
+  const { product, cartItem } = props
+
+  if (!result) return result
+  if (!isTypename(product, ['DownloadableProduct'])) return result
+  if (!isTypename(cartItem, ['DownloadableCartItem'])) return result
+
+  const links = filterNonNullableKeys(cartItem.links, ['title', 'price'])
+  const productLinks = filterNonNullableKeys(product.downloadable_product_links, ['title', 'price'])
+
+  const selected_options: NonNullable<CartItemInput['selected_options']> = []
+
+  productLinks.forEach((link) => {
+    const linkIndex = links.findIndex((l) => l.uid === link.uid)
+    if (linkIndex !== -1) selected_options[linkIndex] = link.uid
+  })
+
+  return {
+    ...result,
+    selected_options,
+  } satisfies CartItemInput
+}

package/DownloadableProductPage.graphql

@@ -1,3 +0,0 @@
-query DownloadableProductPage($urlKey: String) {
-  ...ProductPageDownloadableQueryFragment
-}

package/ProductPageDownloadableQueryFragment.graphql

@@ -1,22 +0,0 @@
-fragment ProductPageDownloadableQueryFragment on Query {
-  typeProducts: products(filter: { url_key: { eq: $urlKey } }) {
-    items {
-      __typename
-      uid
-      ... on DownloadableProduct {
-        downloadable_product_links {
-          price
-          sample_url
-          sort_order
-          title
-          uid
-        }
-        downloadable_product_samples {
-          title
-          sort_order
-          sample_url
-        }
-      }
-    }
-  }
-}

package/graphql/GetDownloadableTypeProduct.graphql

@@ -1,9 +0,0 @@
-query DownloadableProductPage($urlKey: String) {
-  typeProducts: products(filter: { url_key: { eq: $urlKey } }) {
-    items {
-      __typename
-      uid
-      ...DownloadableProductOptions
-    }
-  }
-}