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

package/components/Order/OrderDetails/ShippingHandling.graphql

@@ -0,0 +1,19 @@
+fragment ShippingHandling on ShippingHandling {
+  amount_excluding_tax {
+    ...Money
+  }
+  amount_including_tax {
+    ...Money
+  }
+  discounts {
+    amount {
+      ...Money
+    }
+  }
+  taxes {
+    ...TaxItem
+  }
+  total_amount {
+    ...Money
+  }
+}

package/components/Order/OrderDetails/TaxItem.graphql

@@ -0,0 +1,7 @@
+fragment TaxItem on TaxItem {
+  title
+  rate
+  amount {
+    ...Money
+  }
+}

package/components/{OrderItem → Order/OrderItem}/OrderItem.graphql

@@ -1,4 +1,5 @@
 fragment OrderItem on OrderItemInterface {
+  __typename
   id
   product_sku
   product_url_key
@@ -8,10 +9,12 @@ fragment OrderItem on OrderItemInterface {
     value
   }
   product {
+    __typename
     uid
     thumbnail {
       ...ProductImage
     }
+    url_key
   }
   quantity_invoiced
   quantity_ordered
@@ -22,4 +25,14 @@ fragment OrderItem on OrderItemInterface {
   product_sale_price {
     ...Money
   }
+  discounts {
+    amount {
+      ...Money
+    }
+    label
+  }
+  entered_options {
+    label
+    value
+  }
 }

package/components/Order/OrderItem/OrderItem.tsx

@@ -0,0 +1,144 @@
+import { Image } from '@graphcommerce/image'
+import { Money, PriceModifiersList, type PriceModifier } from '@graphcommerce/magento-store'
+import {
+  ActionCard,
+  actionCardImageSizes,
+  filterNonNullableKeys,
+  type ActionCardProps,
+} from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import { Box } from '@mui/material'
+import type { OrderItemFragment } from './OrderItem.gql'
+
+export type OrderItemProps = Omit<ActionCardProps, 'value' | 'image' | 'title'> & {
+  item: OrderItemFragment
+  priceModifiers?: PriceModifier[]
+}
+
+export function OrderItem(props: OrderItemProps) {
+  const { item, priceModifiers: incomingPriceModifiers, size = 'responsive', ...rest } = props
+  const {
+    selected_options,
+    entered_options,
+    product_sale_price,
+    quantity_ordered,
+    product_name,
+    product,
+    id,
+  } = item
+
+  const priceModifiers: PriceModifier[] = [
+    ...(incomingPriceModifiers ?? []),
+    ...filterNonNullableKeys(selected_options).map((option) => ({
+      key: option.label,
+      label: option.label,
+      items: [{ key: option.value, label: option.value }],
+    })),
+    ...filterNonNullableKeys(entered_options).map((option) => ({
+      key: option.label,
+      label: option.label,
+      items: [{ key: option.value, label: option.value }],
+    })),
+  ]
+
+  return (
+    <ActionCard
+      {...rest}
+      value={id}
+      sx={(theme) => ({
+        '&.ActionCard-root': {
+          px: 0,
+          py: theme.spacings.xs,
+        },
+        '& .ActionCard-rootInner': {
+          justifyContent: 'space-between',
+          alignItems: 'stretch',
+        },
+        '&.sizeSmall': {
+          px: 0,
+        },
+        '&.sizeResponsive': {
+          [theme.breakpoints.down('md')]: { px: 0 },
+        },
+        '& .ActionCard-end': {
+          justifyContent: 'space-between',
+        },
+        '& .ActionCard-action': {
+          pr: 0,
+        },
+        '& .ActionCard-image': {
+          alignSelf: 'flex-start',
+        },
+        '& .ActionCard-secondaryAction': {
+          display: 'grid',
+          rowGap: theme.spacings.xs,
+          justifyItems: 'start',
+        },
+        '& .ActionCard-price': {
+          pr: 0,
+          mb: { xs: 0.5, sm: 0 },
+        },
+      })}
+      size={size}
+      image={
+        product?.thumbnail?.url && (
+          <Image
+            layout='fill'
+            src={product.thumbnail.url}
+            alt={product.thumbnail?.label ?? ''}
+            sx={{
+              width: actionCardImageSizes[size],
+              height: actionCardImageSizes[size],
+              display: 'block',
+              borderRadius: 1,
+              objectFit: 'contain',
+              backgroundColor: 'background.image',
+            }}
+            sizes={actionCardImageSizes[size]}
+          />
+        )
+      }
+      title={product_name}
+      price={
+        <Money
+          currency={product_sale_price.currency}
+          value={(product_sale_price.value ?? 0) * (quantity_ordered ?? 1)}
+        />
+      }
+      action={<>&nbsp;</>}
+      secondaryAction={
+        <>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              color: 'text.secondary',
+              mt: 1,
+              gap: '10px',
+              justifyContent: 'start',
+            }}
+          >
+            {quantity_ordered}
+            {' ⨉ '}
+            <Money {...product_sale_price} />
+          </Box>
+
+          {rest.secondaryAction}
+        </>
+      }
+      details={
+        <>
+          {priceModifiers && priceModifiers.length > 0 && (
+            <PriceModifiersList
+              label={<Trans id='Base Price'>Base price</Trans>}
+              modifiers={priceModifiers}
+              total={product_sale_price.value ?? 0}
+              currency={product_sale_price.currency}
+            />
+          )}
+          {rest.details}
+        </>
+      }
+    />
+  )
+}

package/components/Order/OrderItems/OrderItems.tsx

@@ -0,0 +1,81 @@
+import {
+  ActionCardLayout,
+  breakpointVal,
+  extendableComponent,
+  nonNullable,
+  SectionContainer,
+} from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
+import type { OrderItemProps } from '../OrderItem/OrderItem'
+import { OrderItem } from '../OrderItem/OrderItem'
+import type { OrderItemsFragment } from './OrderItems.gql'
+
+export type OrderItemsProps = {
+  order: OrderItemsFragment
+  sx?: SxProps<Theme>
+  layout?: 'list' | 'grid'
+  size?: 'small' | 'medium' | 'large'
+  itemProps?: Omit<OrderItemProps, 'cartItem'>
+}
+
+const name = 'OrderItems'
+const parts = ['root', 'items', 'actionCard'] as const
+const { classes } = extendableComponent(name, parts)
+
+export function OrderItems(props: OrderItemsProps) {
+  const { order, sx = [], layout = 'list', size, itemProps = {} } = props
+
+  const items = (order.items ?? []).filter(nonNullable)
+  if (!items.length) return null
+
+  return (
+    <Box
+      className={classes.root}
+      sx={[
+        (theme) => ({
+          my: theme.spacings.md,
+          padding: `${theme.spacings.sm} ${theme.spacings.sm}`,
+          border: `1px ${theme.palette.divider} solid`,
+          ...breakpointVal(
+            'borderRadius',
+            theme.shape.borderRadius * 2,
+            theme.shape.borderRadius * 3,
+            theme.breakpoints.values,
+          ),
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <SectionContainer
+        sx={{ '& .SectionHeader-root': { mt: 0 } }}
+        labelLeft={<Trans id='Ordered items' />}
+        variantLeft='h6'
+        className={classes.items}
+      >
+        <ActionCardLayout
+          sx={(theme) => ({
+            marginBottom: theme.spacings.md,
+            '&.layoutStack': {
+              gap: 0,
+            },
+          })}
+          className={classes.actionCard}
+          layout={layout}
+        >
+          {items.map((orderItem) => (
+            <OrderItem
+              key={orderItem.id}
+              item={orderItem}
+              variant='default'
+              {...itemProps}
+              size={size}
+              layout={layout}
+            />
+          ))}
+        </ActionCardLayout>
+      </SectionContainer>
+    </Box>
+  )
+}

package/components/{OrderStateLabel → Order/OrderStateLabel}/OrderStateLabel.tsx

@@ -2,8 +2,8 @@ import { extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
-import type { OrderState, OrderStateProps } from '../../utils'
-import { getOrderState } from '../../utils'
+import type { OrderState, OrderStateProps } from '../../../utils'
+import { getOrderState } from '../../../utils'
 
 type OrderStateLabelPropsBase = OrderStateProps
 

package/components/Order/OrderTotals/OrderTotal.graphql

@@ -0,0 +1,32 @@
+fragment OrderTotal on OrderTotal {
+  subtotal {
+    ...Money
+  }
+  total_shipping {
+    ...Money
+  }
+  shipping_handling {
+    ...ShippingHandling
+  }
+  discounts {
+    amount {
+      ...Money
+    }
+    label
+  }
+  base_grand_total {
+    ...Money
+  }
+  grand_total {
+    ...Money
+  }
+  total_tax {
+    ...Money
+  }
+  taxes {
+    ...TaxItem
+  }
+  total_shipping {
+    ...Money
+  }
+}

package/components/Order/OrderTotals/OrderTotals.graphql

@@ -0,0 +1,7 @@
+fragment OrderTotals on CustomerOrder {
+  total {
+    ...OrderTotal
+  }
+  shipping_method
+  carrier
+}

package/components/{OrderDetails → Order/OrderTotals}/OrderTotals.tsx

@@ -1,12 +1,16 @@
 import { Money } from '@graphcommerce/magento-store'
-import { breakpointVal, extendableComponent } from '@graphcommerce/next-ui'
+import { breakpointVal, extendableComponent, sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import type { SxProps, Theme } from '@mui/material'
-import { Box, Divider, Typography } from '@mui/material'
-import type { OrderDetailsFragment } from './OrderDetails.gql'
+import { Box, Divider, lighten, Typography } from '@mui/material'
+import type { OrderTotalsFragment } from './OrderTotals.gql'
 
-export type OrderTotalsProps = Partial<OrderDetailsFragment> & {
+export type OrderTotalsProps = {
+  order: OrderTotalsFragment
   sx?: SxProps<Theme>
+  additionalSubtotals?: React.ReactNode
+  additionalGrandTotals?: React.ReactNode
+  additionalTaxes?: React.ReactNode
 }
 
 const componentName = 'OrderTotals'
@@ -14,25 +18,29 @@ const parts = ['totalsContainer', 'totalsRow', 'totalsDivider', 'totalsVat'] as
 const { classes } = extendableComponent(componentName, parts)
 
 export function OrderTotals(props: OrderTotalsProps) {
-  const { total, carrier, shipping_method, sx = [] } = props
+  const { order, sx = [], additionalSubtotals, additionalGrandTotals, additionalTaxes } = props
+  const { total, carrier, shipping_method } = order
 
   return (
     <Box
       className={classes.totalsContainer}
-      sx={[
+      sx={sxx(
         (theme) => ({
-          border: `1px solid ${theme.palette.divider}`,
-          marginBottom: theme.spacings.md,
-          p: theme.spacings.sm,
+          my: theme.spacings.md,
           ...breakpointVal(
             'borderRadius',
-            theme.shape.borderRadius * 2,
             theme.shape.borderRadius * 3,
+            theme.shape.borderRadius * 5,
             theme.breakpoints.values,
           ),
+          background:
+            theme.palette.mode === 'light'
+              ? theme.palette.background.default
+              : lighten(theme.palette.background.default, 0.15),
+          padding: `${theme.spacings.xs} ${theme.spacings.sm}`,
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <Box className={classes.totalsRow} sx={{ display: 'flex', justifyContent: 'space-between' }}>
         <Typography>
@@ -66,6 +74,8 @@ export function OrderTotals(props: OrderTotalsProps) {
         </Box>
       )}
 
+      {additionalSubtotals}
+
       <Divider sx={(theme) => ({ my: theme.spacings.xxs })} />
 
       <Box
@@ -81,6 +91,9 @@ export function OrderTotals(props: OrderTotalsProps) {
         </Typography>
         <Money {...total?.grand_total} />
       </Box>
+
+      {additionalGrandTotals}
+
       {total?.taxes?.map((tax) => (
         <Box
           key={tax?.title}
@@ -97,6 +110,8 @@ export function OrderTotals(props: OrderTotalsProps) {
           <Money {...tax?.amount} />
         </Box>
       ))}
+
+      {additionalTaxes}
     </Box>
   )
 }

package/components/Order/index.ts

@@ -0,0 +1,16 @@
+export * from './OrderAdditional/OrderAdditional'
+export * from './OrderAdditional/OrderAdditional.gql'
+export * from './OrderCard/OrderCard'
+export * from './OrderCard/OrderCard.gql'
+export * from './OrderCard/OrderCardItem.gql'
+export * from './OrderComments/SalesComments'
+export * from './OrderDetails/OrderDetails'
+export * from './OrderDetails/OrderDetails.gql'
+export * from './OrderItem/OrderItem'
+export * from './OrderItem/OrderItem.gql'
+export * from './OrderItems/OrderItems'
+export * from './OrderItems/OrderItems.gql'
+export * from './OrderStateLabel/OrderStateLabel'
+export * from './OrderStateLabel/OrderStateLabel.gql'
+export * from './OrderTotals/OrderTotals'
+export * from './OrderTotals/OrderTotals.gql'

package/components/ReorderItems/ReorderItems.tsx

@@ -4,7 +4,7 @@ import { AddProductsToCartSnackbarMessage } from '@graphcommerce/magento-product
 import { iconChevronRight, IconSvg, LinkOrButton, nonNullable } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
 import { Box } from '@mui/material'
-import type { OrderItemsFragment } from '../OrderItems/OrderItems.gql'
+import type { OrderItemsFragment } from '../Order'
 import type { ReorderItemsMutation, ReorderItemsMutationVariables } from './ReorderItems.gql'
 import { ReorderItemsDocument } from './ReorderItems.gql'
 

package/components/Shipment/Shipment.graphql

@@ -0,0 +1,14 @@
+fragment Shipment on OrderShipment {
+  id
+  number
+  items {
+    ...ShipmentItem
+  }
+  comments {
+    message
+    timestamp
+  }
+  tracking {
+    ...TrackingLink
+  }
+}

package/components/Shipment/ShipmentCard.graphql

@@ -0,0 +1,8 @@
+fragment ShipmentCard on OrderShipment {
+  id
+  number
+  comments {
+    message
+    timestamp
+  }
+}

package/components/Shipment/ShipmentCard.tsx

@@ -0,0 +1,71 @@
+import { Money } from '@graphcommerce/magento-store'
+import {
+  breakpointVal,
+  filterNonNullableKeys,
+  iconChevronRight,
+  IconSvg,
+  NextLink,
+  sxx,
+} from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, lighten } from '@mui/material'
+import { TrackingLink } from '../TrackingLink/TrackingLink'
+import type { ShipmentCardFragment } from './ShipmentCard.gql'
+
+export type ShipmentCardProps = {
+  orderNumber: string
+  shipment: ShipmentCardFragment
+  sx?: SxProps<Theme>
+}
+
+export function ShipmentCard(props: ShipmentCardProps) {
+  const { orderNumber, shipment, sx = [] } = props
+  const { number } = shipment
+
+  return (
+    <Box
+      component={NextLink}
+      href={`/account/orders/shipment?orderNumber=${orderNumber}&shipmentNumber=${number}`}
+      sx={sxx(
+        (theme) => ({
+          textDecoration: 'none',
+          color: 'text.primary',
+          px: theme.spacings.xxs,
+          py: theme.spacings.xxs,
+          gap: theme.spacings.sm,
+          background:
+            theme.palette.mode === 'light'
+              ? theme.palette.background.default
+              : lighten(theme.palette.background.default, 0.15),
+          ...breakpointVal(
+            'borderRadius',
+            theme.shape.borderRadius * 2,
+            theme.shape.borderRadius * 3,
+            theme.breakpoints.values,
+          ),
+          // '&:hover': {
+          //   backgroundColor: theme.palette.action.hover,
+          // },
+          display: 'grid',
+          gridTemplate: `
+            "number action" / 1fr auto
+          `,
+          rowGap: 0.5,
+          columnGap: 1,
+        }),
+        sx,
+      )}
+    >
+      <Box sx={{ gridArea: 'number', typography: 'body1' }}>
+        <Trans>Shipment #{number}</Trans>
+      </Box>
+
+      <IconSvg
+        src={iconChevronRight}
+        size='medium'
+        sx={{ gridArea: 'action', alignSelf: 'center' }}
+      />
+    </Box>
+  )
+}

package/components/Shipment/ShipmentDetails.tsx

@@ -0,0 +1,100 @@
+import {
+  breakpointVal,
+  DateTimeFormat,
+  extendableComponent,
+  filterNonNullableKeys,
+  SectionContainer,
+} from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, lighten, Typography } from '@mui/material'
+import { TrackingLink } from '../TrackingLink/TrackingLink'
+import type { ShipmentFragment } from './Shipment.gql'
+
+export type ShipmentDetailsProps = {
+  shipment: ShipmentFragment
+  sx?: SxProps<Theme>
+}
+
+const componentName = 'ShipmentDetails'
+const parts = [
+  'sectionContainer',
+  'shipmentDetailTitle',
+  'shipmentDetailContainer',
+  'shipmentDetailRow',
+] as const
+const { classes } = extendableComponent(componentName, parts)
+
+export function ShipmentDetails(props: ShipmentDetailsProps) {
+  const { shipment, sx = [] } = props
+  const { number, tracking } = shipment
+
+  return (
+    <SectionContainer
+      labelLeft={<Trans>Shipment details</Trans>}
+      sx={[
+        (theme) => ({
+          padding: theme.spacings.sm,
+          marginBottom: theme.spacings.md,
+          background:
+            theme.palette.mode === 'light'
+              ? theme.palette.background.default
+              : lighten(theme.palette.background.default, 0.15),
+          ...breakpointVal(
+            'borderRadius',
+            theme.shape.borderRadius * 2,
+            theme.shape.borderRadius * 3,
+            theme.breakpoints.values,
+          ),
+          '& .SectionHeader-root': {
+            mt: 0,
+            mb: theme.spacings.xs,
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <Box
+        className={classes.shipmentDetailContainer}
+        sx={[
+          (theme) => ({
+            gridColumnGap: theme.spacings.xxl,
+            gridRowGap: theme.spacings.md,
+            display: 'grid',
+            [theme.breakpoints.up('sm')]: {
+              gridTemplateColumns: '1fr 1fr',
+              marginTop: theme.spacings.xxs,
+            },
+          }),
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+      >
+        <Box className={classes.shipmentDetailRow}>
+          <SectionContainer
+            variantLeft='h5'
+            labelLeft={<Trans>Shipment number</Trans>}
+            className={classes.shipmentDetailTitle}
+            sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '4px' } }}
+          >
+            <Typography>{number}</Typography>
+          </SectionContainer>
+        </Box>
+
+        {tracking && tracking.length > 0 && (
+          <Box className={classes.shipmentDetailRow}>
+            <SectionContainer
+              variantLeft='h5'
+              labelLeft={<Trans>Tracking</Trans>}
+              className={classes.shipmentDetailTitle}
+              sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '4px' } }}
+            >
+              {filterNonNullableKeys(tracking).map((track) => (
+                <TrackingLink key={track.number} {...track} />
+              ))}
+            </SectionContainer>
+          </Box>
+        )}
+      </Box>
+    </SectionContainer>
+  )
+}

package/components/Shipment/ShipmentItem.graphql

@@ -0,0 +1,19 @@
+fragment ShipmentItem on ShipmentItemInterface {
+  __typename
+  id
+  product_name
+  product_sku
+  quantity_shipped
+  product_sale_price {
+    ...Money
+  }
+  order_item {
+    id
+    product {
+      uid
+      thumbnail {
+        ...ProductImage
+      }
+    }
+  }
+}