@graphcommerce/magento-customer 9.1.0-canary.18 → 9.1.0-canary.20

package/components/OrderDetails/OrderDetails.graphql

@@ -1,77 +0,0 @@
-fragment OrderDetails on CustomerOrder {
-  id
-  number
-  order_date
-  status
-  invoices {
-    id
-    number
-  }
-  shipping_method
-  shipments {
-    id
-    tracking {
-      ...TrackingLink
-    }
-  }
-  payment_methods {
-    name
-    type
-    additional_data {
-      name
-      value
-    }
-  }
-  billing_address {
-    city
-    postcode
-    firstname
-    lastname
-    street
-    country_code
-    region_id
-  }
-  shipping_address {
-    city
-    postcode
-    firstname
-    lastname
-    street
-    country_code
-    region_id
-  }
-  carrier
-  total {
-    subtotal {
-      ...Money
-    }
-    total_shipping {
-      ...Money
-    }
-    # todo
-    # shipping_handling {}
-    discounts {
-      amount {
-        ...Money
-      }
-      label
-    }
-    grand_total {
-      ...Money
-    }
-
-    total_tax {
-      ...Money
-    }
-    taxes {
-      amount {
-        ...Money
-      }
-      rate
-      title
-    }
-    total_shipping {
-      ...Money
-    }
-  }
-}

package/components/OrderItem/OrderItem.tsx

@@ -1,176 +0,0 @@
-import { Image } from '@graphcommerce/image'
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { useProductLink } from '@graphcommerce/magento-product/hooks/useProductLink'
-import { Money } from '@graphcommerce/magento-store'
-import { extendableComponent, NextLink, responsiveVal } from '@graphcommerce/next-ui'
-import { Box } from '@mui/material'
-import type { OrderCardItemImageFragment } from '../../hooks/OrderCardItemImage.gql'
-import type { OrderItemFragment } from './OrderItem.gql'
-
-export type OrderItemProps = OrderItemFragment & Omit<OrderCardItemImageFragment, 'uid'>
-
-const rowImageSize = responsiveVal(70, 110)
-
-type OwnerState = { hasOptions: boolean }
-const componentName = 'OrderItem'
-const parts = [
-  'root',
-  'itemWithoutOptions',
-  'picture',
-  'pictureSpacing',
-  'image',
-  'productLink',
-  'itemName',
-  'itemNameWithOptions',
-  'itemPrice',
-  'quantity',
-  'rowPrice',
-  'optionsList',
-  'option',
-] as const
-const { withState } = extendableComponent<OwnerState, typeof componentName, typeof parts>(
-  componentName,
-  parts,
-)
-
-export function OrderItem(props: OrderItemProps) {
-  const {
-    product_url_key,
-    selected_options,
-    product_sale_price,
-    quantity_ordered,
-    product_name,
-    product,
-  } = props
-  const productLink = useProductLink({
-    __typename: 'SimpleProduct' as const,
-    url_key: product_url_key,
-  })
-
-  const hasOptions = Boolean(selected_options && selected_options.length >= 1)
-
-  const classes = withState({ hasOptions })
-
-  return (
-    <Box
-      className={classes.root}
-      sx={(theme) => ({
-        borderBottom: `1px solid ${theme.palette.divider}`,
-        display: 'grid',
-        gridTemplate: `
-          "picture itemName itemName itemName"
-          "picture itemOptions itemOptions itemOptions"
-          "picture itemPrice quantity rowPrice"
-        `,
-        gridTemplateColumns: `${rowImageSize} repeat(3, 1fr)`,
-        columnGap: theme.spacings.sm,
-        alignItems: 'baseline',
-        typography: 'body1',
-        py: theme.spacings.xxs,
-        [theme.breakpoints.up('sm')]: {
-          gridTemplate: `
-            "picture itemName itemName itemName itemName"
-            "picture itemOptions itemPrice quantity rowPrice"
-          `,
-          gridTemplateColumns: `${rowImageSize} 4fr 1fr 1fr minmax(75px, 1fr)`,
-        },
-
-        '&:not(.hasOptions)': {
-          display: 'grid',
-          gridTemplate: `
-            "picture itemName itemName itemName"
-            "picture itemPrice quantity rowPrice"`,
-          alignItems: 'center',
-          gridTemplateColumns: `${rowImageSize} repeat(3, 1fr)`,
-          [theme.breakpoints.up('sm')]: {
-            gridTemplate: `
-              "picture itemName itemPrice quantity rowPrice"
-            `,
-            gridTemplateColumns: `${rowImageSize} 4fr 1fr minmax(120px, 1fr) minmax(75px, 1fr)`,
-          },
-        },
-      })}
-    >
-      <Box className={classes.picture} sx={{ gridArea: 'picture' }}>
-        <Box href={productLink} component={NextLink} className={classes.productLink}>
-          <Box className={classes.pictureSpacing}>
-            {product?.thumbnail?.url && product.thumbnail?.label && (
-              <Image
-                alt={product.thumbnail?.label ?? ''}
-                width={104}
-                height={86}
-                src={product.thumbnail?.url ?? ''}
-                className={classes.image}
-                sx={(theme) => ({
-                  backgroundColor: theme.palette.background.image,
-                })}
-              />
-            )}
-          </Box>
-        </Box>
-      </Box>
-
-      <Box
-        href={productLink}
-        component={NextLink}
-        className={classes.itemName}
-        sx={(theme) => ({
-          typography: 'h5',
-          fontWeight: 500,
-          gridArea: 'itemName',
-          color: theme.palette.text.primary,
-          textDecoration: 'none',
-          flexWrap: 'nowrap',
-          maxWidth: 'max-content',
-          '&.hasOptions': {
-            alignSelf: 'flex-end',
-          },
-        })}
-      >
-        {product_name}
-      </Box>
-
-      <Box
-        className={classes.itemPrice}
-        sx={(theme) => ({
-          gridArea: 'itemPrice',
-          textAlign: 'left',
-          color: theme.palette.text.secondary,
-        })}
-      >
-        <Money {...product_sale_price} />
-      </Box>
-
-      <Box
-        className={classes.quantity}
-        sx={{ gridArea: 'quantity', justifySelf: 'center' }}
-      >{`${quantity_ordered}x`}</Box>
-
-      <Box className={classes.rowPrice} sx={{ gridArea: 'rowPrice', textAlign: 'right' }}>
-        <Money
-          currency={product_sale_price.currency}
-          value={(product_sale_price.value ?? 0) * (quantity_ordered ?? 1)}
-        />
-      </Box>
-
-      {hasOptions && (
-        <Box className={classes.optionsList} sx={{ gridArea: 'itemOptions', cursor: 'default' }}>
-          {selected_options?.map((option) => (
-            <Box
-              key={option?.label}
-              className={classes.option}
-              sx={(theme) => ({
-                color: theme.palette.grey['500'],
-                marginRight: theme.spacings.xs,
-                paddingBottom: '1px',
-                display: 'inline',
-              })}
-            >
-              {option?.value}
-            </Box>
-          ))}
-        </Box>
-      )}
-    </Box>
-  )
-}

package/components/OrderItems/OrderItems.tsx

@@ -1,70 +0,0 @@
-import { extendableComponent, SectionContainer } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
-import type { SxProps, Theme } from '@mui/material'
-import { Box, Button } from '@mui/material'
-import { useState } from 'react'
-import { OrderItem } from '../OrderItem/OrderItem'
-import type { OrderItemsFragment } from './OrderItems.gql'
-
-export type OrderItemsProps = OrderItemsFragment & {
-  sx?: SxProps<Theme>
-}
-
-const componentName = 'OrderItems'
-const parts = ['root', 'orderItemsInnerContainer', 'skeletonOrderItem', 'viewAllButton'] as const
-const { classes } = extendableComponent(componentName, parts)
-
-export function OrderItems(props: OrderItemsProps) {
-  const { items, sx = [] } = props
-  const [expanded, setExpanded] = useState<boolean>(false)
-  const maxItemsAboveFold = 4
-
-  return (
-    <SectionContainer
-      labelLeft={<Trans id='Ordered items' />}
-      /* endLabel='SHIPPED'*/
-      className={classes.root}
-      sx={[
-        (theme) => ({
-          marginTop: theme.spacings.md,
-          marginBottom: theme.spacings.sm,
-        }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
-    >
-      <Box className={classes.orderItemsInnerContainer} sx={(theme) => ({ mb: theme.spacings.md })}>
-        {items
-          ?.slice(0, maxItemsAboveFold)
-          .map((orderItem) => (
-            <Box key={`orderItem-${orderItem?.id}`}>
-              {orderItem && <OrderItem {...orderItem} />}
-            </Box>
-          ))}
-
-        {expanded &&
-          items
-            ?.slice(maxItemsAboveFold, items?.length)
-            .map((orderItem) => (
-              <Box key={`orderItem-${orderItem?.id}`}>
-                {orderItem && <OrderItem {...orderItem} />}
-              </Box>
-            ))}
-      </Box>
-
-      {items && maxItemsAboveFold < items?.length && (
-        <Box
-          className={classes.viewAllButton}
-          sx={(theme) => ({
-            margin: `${theme.spacings.xs} auto 0 auto`,
-            textAlign: 'center',
-            '& a': { padding: '8px' },
-          })}
-        >
-          <Button variant='text' color='primary' onClick={() => setExpanded(!expanded)}>
-            {expanded ? <Trans id='View less items' /> : <Trans id='View all items' />}
-          </Button>
-        </Box>
-      )}
-    </SectionContainer>
-  )
-}

package/graphql/OrderDetailPage.graphql

@@ -1,10 +0,0 @@
-query OrderDetailPage($orderNumber: String) {
-  customer {
-    orders(filter: { number: { eq: $orderNumber } }) {
-      items {
-        ...OrderDetails
-        ...OrderItems
-      }
-    }
-  }
-}