diff --git a/.changeset/curvy-hairs-suffer.md b/.changeset/curvy-hairs-suffer.md new file mode 100644 index 0000000000..4387fbadca --- /dev/null +++ b/.changeset/curvy-hairs-suffer.md @@ -0,0 +1,5 @@ +--- +'@graphcommerce/magento-customer': patch +--- + +Update OrderDetails and styling diff --git a/examples/magento-graphcms/locales/de.po b/examples/magento-graphcms/locales/de.po index 2d06328fad..271ce118c1 100644 --- a/examples/magento-graphcms/locales/de.po +++ b/examples/magento-graphcms/locales/de.po @@ -418,6 +418,9 @@ msgstr "Bestellung #{orderId}" msgid "Order before 22:00" msgstr "Bestellen Sie vor 22:00 Uhr" +msgid "Order date" +msgstr "Auftragsdatum" + msgid "Order not found" msgstr "Bestellung nicht gefunden" diff --git a/examples/magento-graphcms/locales/en.po b/examples/magento-graphcms/locales/en.po index 4abd9b5670..51541414d3 100644 --- a/examples/magento-graphcms/locales/en.po +++ b/examples/magento-graphcms/locales/en.po @@ -418,6 +418,9 @@ msgstr "Order #{orderId}" msgid "Order before 22:00" msgstr "Order before 22:00" +msgid "Order date" +msgstr "Order date" + msgid "Order not found" msgstr "Order not found" diff --git a/examples/magento-graphcms/locales/es.po b/examples/magento-graphcms/locales/es.po index bc3f4c4a15..4582a8eca4 100644 --- a/examples/magento-graphcms/locales/es.po +++ b/examples/magento-graphcms/locales/es.po @@ -418,8 +418,11 @@ msgstr "Pedido #{orderId}" msgid "Order before 22:00" msgstr "Pedido antes de las 22:00" +msgid "Order date" +msgstr "Besteldatum" + msgid "Order not found" -msgstr "Pedido no encontrado" +msgstr "fecha de orden" msgid "Order number" msgstr "Número de pedido" diff --git a/examples/magento-graphcms/locales/fr.po b/examples/magento-graphcms/locales/fr.po index 0a0b7ed8f2..aaf917ce66 100644 --- a/examples/magento-graphcms/locales/fr.po +++ b/examples/magento-graphcms/locales/fr.po @@ -418,6 +418,9 @@ msgstr "Commande #{orderId}" msgid "Order before 22:00" msgstr "Commandez avant 22:00" +msgid "Order date" +msgstr "Date de commande" + msgid "Order not found" msgstr "Commande non trouvée" diff --git a/examples/magento-graphcms/locales/it.po b/examples/magento-graphcms/locales/it.po index d31477e4f9..3d305c2d71 100644 --- a/examples/magento-graphcms/locales/it.po +++ b/examples/magento-graphcms/locales/it.po @@ -418,6 +418,9 @@ msgstr "Ordine #{orderId}" msgid "Order before 22:00" msgstr "Ordina prima delle 22:00" +msgid "Order date" +msgstr "data dell'ordine" + msgid "Order not found" msgstr "Ordine non trovato" diff --git a/examples/magento-graphcms/locales/nl.po b/examples/magento-graphcms/locales/nl.po index 3b0f9d9b4f..ee8a2855c6 100644 --- a/examples/magento-graphcms/locales/nl.po +++ b/examples/magento-graphcms/locales/nl.po @@ -418,6 +418,9 @@ msgstr "Bestelling #{orderId}" msgid "Order before 22:00" msgstr "Bestel voor 22:00" +msgid "Order date" +msgstr "Besteldatum" + msgid "Order not found" msgstr "Bestelling niet gevonden" diff --git a/examples/magento-graphcms/pages/account/index.tsx b/examples/magento-graphcms/pages/account/index.tsx index f88f3a57ff..225bf3fc25 100644 --- a/examples/magento-graphcms/pages/account/index.tsx +++ b/examples/magento-graphcms/pages/account/index.tsx @@ -97,20 +97,7 @@ function AccountIndexPage() { {', '} - {latestOrder?.items && ( - , - Invoiced: () => , - Shipped: () => , - Refunded: () => , - Canceled: () => , - Returned: () => , - Partial: () => , - }} - /> - )} + {latestOrder?.items && } ) : undefined } diff --git a/examples/magento-graphcms/pages/account/orders/view.tsx b/examples/magento-graphcms/pages/account/orders/view.tsx index 85982e8b4b..e284424c63 100644 --- a/examples/magento-graphcms/pages/account/orders/view.tsx +++ b/examples/magento-graphcms/pages/account/orders/view.tsx @@ -4,8 +4,10 @@ import { WaitForCustomer, useOrderCardItemImages, OrderDetails, + OrderTotals, OrderItems, OrderDetailPageDocument, + OrderStateLabel, } from '@graphcommerce/magento-customer' import { CountryRegionsDocument, PageMeta, StoreConfigDocument } from '@graphcommerce/magento-store' import { @@ -17,7 +19,7 @@ import { } from '@graphcommerce/next-ui' import { i18n } from '@lingui/core' import { Trans } from '@lingui/react' -import { Container } from '@mui/material' +import { Container, Typography } from '@mui/material' import { useRouter } from 'next/router' import { LayoutOverlay, LayoutOverlayProps } from '../../../components' import { graphqlSsrClient, graphqlSharedClient } from '../../../lib/graphql/graphqlSsrClient' @@ -32,10 +34,9 @@ function OrderDetailPage() { fetchPolicy: 'cache-and-network', variables: { orderNumber: orderId as string }, }) - const { data, loading } = orders + const { data } = orders const images = useOrderCardItemImages(data?.customer?.orders) const order = data?.customer?.orders?.items?.[0] - const isLoading = orderId ? loading : true return ( <> @@ -52,7 +53,11 @@ function OrderDetailPage() { )} - + ({ mb: theme.spacings.xxs })} + > @@ -62,8 +67,12 @@ function OrderDetailPage() { title={i18n._(/* i18n */ 'Order #{orderId}', { orderId })} metaRobots={['noindex']} /> - - + ({ textAlign: 'center', mb: theme.spacings.lg })}> + + + + + )} diff --git a/packages/magento-customer/components/OrderCard/OrderCard.tsx b/packages/magento-customer/components/OrderCard/OrderCard.tsx index 5d3b44d57b..732915842f 100644 --- a/packages/magento-customer/components/OrderCard/OrderCard.tsx +++ b/packages/magento-customer/components/OrderCard/OrderCard.tsx @@ -99,18 +99,7 @@ export function OrderCard(props: OrderCardProps) { #{number} - , - Invoiced: () => , - Shipped: () => , - Refunded: () => , - Canceled: () => , - Returned: () => , - Partial: () => , - }} - /> + & { - loading?: boolean sx?: SxProps } @@ -21,79 +20,12 @@ const componentName = 'OrderDetails' as const const parts = [ 'sectionContainer', 'orderDetailTitle', - 'orderDetailsInnerContainer', - 'totalsContainer', - 'totalsRow', - 'totalsDivider', - 'totalsVat', + 'orderDetailContainer', + 'orderDetailRow', 'invoice', ] as const const { classes } = extendableComponent(componentName, parts) -const OrderDetailTitle = styled('span', { target: classes.orderDetailTitle })(({ theme }) => ({ - borderBottom: `1px solid ${theme.palette.divider}`, - fontWeight: 'bold', - display: 'block', - width: '100%', - paddingBottom: responsiveVal(2, 8), - marginBottom: theme.spacings.xs, -})) - -const OrderDetailsInnerContainer = styled('span', { target: classes.orderDetailsInnerContainer })( - ({ theme }) => - theme.unstable_sx({ - display: 'grid', - gridColumnGap: theme.spacings.sm, - gridRowGap: theme.spacings.lg, - padding: `${theme.spacings.md} 0`, - borderBottom: `1px solid ${theme.palette.divider}`, - [theme.breakpoints.up('sm')]: { - gridColumnGap: theme.spacings.xxl, - gridRowGap: theme.spacings.md, - gridTemplateColumns: 'repeat(2, 1fr)', - }, - }), -) - -const TotalsContainer = styled('span', { target: classes.totalsContainer })(({ theme }) => - theme.unstable_sx({ - padding: `${theme.spacings.xxs} 0`, - }), -) - -const TotalsRow = styled('span', { target: classes.totalsRow })(({ theme }) => - theme.unstable_sx({ - display: 'flex', - justifyContent: 'space-between', - padding: '4px 0', - }), -) - -const TotalsDivider = styled('span', { target: classes.totalsDivider })(({ theme }) => - theme.unstable_sx({ - height: 1, - width: '100%', - background: theme.palette.divider, - margin: `${theme.spacings.xxs} 0`, - }), -) - -const TotalsVat = styled(TotalsRow, { target: classes.totalsVat })(({ theme }) => - theme.unstable_sx({ - fontWeight: 'bold', - padding: `${theme.spacings.xxs} 0`, - }), -) - -const Invoice = styled(TotalsRow, { target: classes.invoice })(({ theme }) => - theme.unstable_sx({ - display: 'flex', - justifyContent: 'flex-start', - alignItems: 'center', - color: 'primary.main', - }), -) - export function OrderDetails(props: OrderDetailsProps) { const { number, @@ -103,257 +35,150 @@ export function OrderDetails(props: OrderDetailsProps) { payment_methods, shipments, shipping_method, - total, invoices, - loading, - carrier, sx = [], } = props const dateFormatter = useDateTimeFormat({ year: 'numeric', month: 'long', day: 'numeric' }) - const billingAddressCountry = useFindCountry(billing_address?.country_code) - const billingAddressRegion = useFindRegion( - billing_address?.country_code, - Number(billing_address?.region_id) ?? undefined, - ) - - const shippingAddressCountry = useFindCountry(shipping_address?.country_code) - const shippingAddressRegion = useFindRegion( - shipping_address?.country_code, - Number(shipping_address?.region_id) ?? undefined, - ) - - if (loading) { - return ( - ({ - '& .SectionHeader-root': { - marginTop: theme.spacings.sm, - marginBottom: theme.spacings.sm, - }, - }), - ...(Array.isArray(sx) ? sx : [sx]), - ]} - borderBottom - > - -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
- - - - -
Products
-
- -
- - - {total?.discounts?.map((discount) => ( - -
{discount?.label}
-
- -
- - ))} - - -
Shipping
-
- -
- - - - - -
Total (incl. VAT)
-
- -
- - - - ) - } - return ( } 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': { - marginTop: theme.spacings.sm, - marginBottom: theme.spacings.sm, + mt: 0, + mb: theme.spacings.xs, }, }), ...(Array.isArray(sx) ? sx : [sx]), ]} > - -
- - - -
{number}
-
- -
- - - -
- Ordered: {order_date && dateFormatter.format(new Date(order_date))} - {/* Shipped */} -
-
- -
- - - -
-
{shipping_method ?? ''}
+ ({ + 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]), + ]} + > + + } + className={classes.orderDetailTitle} + sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '4px' } }} + > + {number} + + + + + } + className={classes.orderDetailTitle} + sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '4px' } }} + > + {order_date && dateFormatter.format(new Date(order_date))} + + + + + } + className={classes.orderDetailTitle} + sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '4px' } }} + > + {shipping_method ?? ''} {shipments && shipments.length > 0 && ( <> -
{shipments?.[0]?.tracking && shipments?.[0]?.tracking?.[0]?.title}
+ {shipments?.[0]?.tracking && shipments?.[0]?.tracking?.[0]?.title} {shipments?.[0]?.tracking?.[0] && ( )} )} -
-
- -
- - - -
+ + + + + } + className={classes.orderDetailTitle} + sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '4px' } }} + > {payment_methods && payment_methods.length < 1 && ( -
- - - -
+ + + )} {payment_methods && payment_methods[0] && ( <> -
{payment_methods[0].name}
- + {payment_methods[0].name} {invoices && invoices?.length > 0 && ( - + {invoices?.[0]?.number} - + )} )} -
-
- -
- - - -
-
- {shipping_address?.firstname} {shipping_address?.lastname} -
-
{shipping_address?.street}
-
- {shipping_address?.postcode} {shipping_address?.city} -
-
- {shippingAddressRegion?.name}, {shippingAddressCountry?.full_name_locale} -
-
-
- -
- - - -
-
- {billing_address?.firstname} {billing_address?.lastname} -
-
{billing_address?.street}
-
- {billing_address?.postcode} {billing_address?.city} -
-
- {billingAddressRegion?.name}, {billingAddressCountry?.full_name_locale} -
-
-
- - - - -
- -
-
- -
- - - {total?.discounts?.map((discount) => ( - -
{discount?.label}
-
- {discount?.amount && ( - - )} -
- - ))} - - -
- -
-
- -
-
{carrier}
- - - - - -
- -
-
- -
- - + + + + + } + className={classes.orderDetailTitle} + sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '4px' } }} + > + + + + + + } + className={classes.orderDetailTitle} + sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '4px' } }} + > + + + + ) } diff --git a/packages/magento-customer/components/OrderDetails/OrderTotals.tsx b/packages/magento-customer/components/OrderDetails/OrderTotals.tsx new file mode 100644 index 0000000000..67df68e09c --- /dev/null +++ b/packages/magento-customer/components/OrderDetails/OrderTotals.tsx @@ -0,0 +1,95 @@ +import { Money } from '@graphcommerce/magento-store' +import { extendableComponent, breakpointVal } from '@graphcommerce/next-ui' +import { Trans } from '@lingui/react' +import { Box, Divider, SxProps, Theme, Typography } from '@mui/material' +import { OrderDetailsFragment } from './OrderDetails.gql' + +export type OrderTotalsProps = Partial & { + sx?: SxProps +} + +const componentName = 'OrderTotals' as const +const parts = ['totalsContainer', 'totalsRow', 'totalsDivider', 'totalsVat'] as const +const { classes } = extendableComponent(componentName, parts) + +export function OrderTotals(props: OrderTotalsProps) { + const { total, carrier, sx = [] } = props + + return ( + ({ + border: `1px solid ${theme.palette.divider}`, + marginBottom: theme.spacings.md, + p: theme.spacings.sm, + ...breakpointVal( + 'borderRadius', + theme.shape.borderRadius * 2, + theme.shape.borderRadius * 3, + theme.breakpoints.values, + ), + }), + ...(Array.isArray(sx) ? sx : [sx]), + ]} + > + + + + + + + + {total?.discounts?.map((discount) => ( + + {discount?.label} + + {discount?.amount && ( + + )} + + ))} + + + + + + + + ({ my: theme.spacings.xxs })} /> + + ({ + display: 'flex', + justifyContent: 'space-between', + color: theme.palette.primary.main, + })} + > + + + + + + {total?.taxes?.map((tax) => ( + ({ + display: 'flex', + justifyContent: 'space-between', + color: theme.palette.text.disabled, + })} + > + + + + + + ))} + + ) +} diff --git a/packages/magento-customer/components/OrderItem/OrderItem.graphql b/packages/magento-customer/components/OrderItem/OrderItem.graphql index 2e71c8663c..7a1511c8d1 100644 --- a/packages/magento-customer/components/OrderItem/OrderItem.graphql +++ b/packages/magento-customer/components/OrderItem/OrderItem.graphql @@ -7,7 +7,12 @@ fragment OrderItem on OrderItemInterface { label value } + quantity_invoiced quantity_ordered + quantity_refunded + quantity_returned + quantity_shipped + quantity_canceled product_sale_price { ...Money } diff --git a/packages/magento-customer/components/OrderItem/OrderItem.tsx b/packages/magento-customer/components/OrderItem/OrderItem.tsx index 8a604c7f7d..710b3bad78 100644 --- a/packages/magento-customer/components/OrderItem/OrderItem.tsx +++ b/packages/magento-customer/components/OrderItem/OrderItem.tsx @@ -58,6 +58,7 @@ export function OrderItem(props: OrderItemProps) { ({ + borderBottom: `1px solid ${theme.palette.divider}`, display: 'grid', gridTemplate: ` "picture itemName itemName itemName" @@ -68,15 +69,13 @@ export function OrderItem(props: OrderItemProps) { columnGap: theme.spacings.sm, alignItems: 'baseline', typography: 'body1', - marginBottom: theme.spacings.lg, - marginTop: theme.spacings.md, + 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)`, - marginBottom: theme.spacings.md, }, '&:not(.hasOptions)': { @@ -95,38 +94,9 @@ export function OrderItem(props: OrderItemProps) { }, })} > - - - ({ - overflow: 'hidden', - width: '100%', - height: '100%', - display: 'flex', - position: 'relative', - alignItems: 'center', - flexShrink: 0, - userSelect: 'none', - borderRadius: '50%', - justifyContent: 'center', - })} - > + + + {thumbnail?.url && thumbnail?.label && ( {thumbnail?.label ({ - gridColumn: 1, backgroundColor: theme.palette.background.image, - objectFit: 'cover', - display: 'block', - transform: 'scale(1.1)', })} /> )} @@ -172,7 +138,7 @@ export function OrderItem(props: OrderItemProps) { sx={(theme) => ({ gridArea: 'itemPrice', textAlign: 'left', - color: theme.palette.text.disabled, + color: theme.palette.text.secondary, })} > diff --git a/packages/magento-customer/components/OrderItems/OrderItems.tsx b/packages/magento-customer/components/OrderItems/OrderItems.tsx index d42c398cc5..72a95a850a 100644 --- a/packages/magento-customer/components/OrderItems/OrderItems.tsx +++ b/packages/magento-customer/components/OrderItems/OrderItems.tsx @@ -1,13 +1,12 @@ -import { SectionContainer, responsiveVal, extendableComponent } from '@graphcommerce/next-ui' +import { SectionContainer, extendableComponent } from '@graphcommerce/next-ui' import { Trans } from '@lingui/react' -import { Skeleton, Button, Box, SxProps, Theme } from '@mui/material' +import { Button, Box, SxProps, Theme } from '@mui/material' import { useState } from 'react' import { UseOrderCardItemImages } from '../../hooks/useOrderCardItemImages' import { OrderItem } from '../OrderItem/OrderItem' import { OrderItemsFragment } from './OrderItems.gql' export type OrderItemsProps = OrderItemsFragment & { - loading?: boolean images?: UseOrderCardItemImages sx?: SxProps } @@ -17,60 +16,10 @@ const parts = ['root', 'orderItemsInnerContainer', 'skeletonOrderItem', 'viewAll const { classes } = extendableComponent(componentName, parts) export function OrderItems(props: OrderItemsProps) { - const { images, items, loading, sx = [] } = props + const { images, items, sx = [] } = props const [expanded, setExpanded] = useState(false) const maxItemsAboveFold = 4 - if (loading) { - return ( - } - /* endLabel='SHIPPED'*/ - className={classes.root} - sx={[ - (theme) => ({ - marginTop: theme.spacings.md, - marginBottom: theme.spacings.md, - }), - ...(Array.isArray(sx) ? sx : [sx]), - ]} - > - ({ borderBottom: `1px solid ${theme.palette.divider}` })} - > - ({ - marginTop: theme.spacings.xxs, - marginBottom: theme.spacings.xxs, - })} - > - - - ({ - marginTop: theme.spacings.xxs, - marginBottom: theme.spacings.xxs, - })} - > - - - ({ - marginTop: theme.spacings.xxs, - marginBottom: theme.spacings.xxs, - })} - > - - - - - ) - } - return ( } @@ -79,22 +28,21 @@ export function OrderItems(props: OrderItemsProps) { sx={[ (theme) => ({ marginTop: theme.spacings.md, - marginBottom: theme.spacings.md, + marginBottom: theme.spacings.sm, }), ...(Array.isArray(sx) ? sx : [sx]), ]} > - ({ borderBottom: `1px solid ${theme.palette.divider}` })} - > - {items?.slice(0, maxItemsAboveFold).map((orderItem) => ( - - {orderItem && ( - - )} - - ))} + ({ mb: theme.spacings.md })}> + {items + ?.slice(0, maxItemsAboveFold) + .map((orderItem) => ( + + {orderItem && ( + + )} + + ))} {expanded && items diff --git a/packages/magento-customer/components/OrderStateLabel/OrderStateLabel.tsx b/packages/magento-customer/components/OrderStateLabel/OrderStateLabel.tsx index 685f2a7898..10de0394db 100644 --- a/packages/magento-customer/components/OrderStateLabel/OrderStateLabel.tsx +++ b/packages/magento-customer/components/OrderStateLabel/OrderStateLabel.tsx @@ -1,4 +1,5 @@ import { extendableComponent } from '@graphcommerce/next-ui' +import { Trans } from '@lingui/react' import { Box, SxProps, Theme } from '@mui/material' import { OrderStateLabelFragment } from './OrderStateLabel.gql' @@ -12,13 +13,14 @@ type OrderState = | 'Partial' type OrderStateLabelPropsBase = OrderStateLabelFragment -type OrderStateRenderer = Record< + +export type OrderStateRenderer = Record< OrderState, (props: OrderStateLabelPropsBase) => React.ReactElement | null > export type OrderStateLabelProps = { - renderer: OrderStateRenderer + renderer?: Partial sx?: SxProps } & OrderStateLabelPropsBase @@ -32,8 +34,20 @@ const { withState } = extendableComponent , + Invoiced: () => , + Shipped: () => , + Refunded: () => , + Canceled: () => , + Returned: () => , + Partial: () => , +} + export function OrderStateLabel(props: OrderStateLabelProps) { - const { items, renderer, sx = [], ...orderProps } = props + const { items, renderer: incomingRenderer, sx = [], ...orderProps } = props + + const renderer: OrderStateRenderer = { ...defaultRenderer, ...incomingRenderer } let orderState: OrderState = 'Partial' if (items?.every((item) => item?.quantity_ordered === item?.quantity_invoiced)) diff --git a/packages/magento-customer/components/OrderStateLabel/OrderStateLabelInline.tsx b/packages/magento-customer/components/OrderStateLabel/OrderStateLabelInline.tsx index ace236ac4e..f2ffdd15c8 100644 --- a/packages/magento-customer/components/OrderStateLabel/OrderStateLabelInline.tsx +++ b/packages/magento-customer/components/OrderStateLabel/OrderStateLabelInline.tsx @@ -1,13 +1,26 @@ -import { OrderStateLabel, OrderStateLabelProps } from './OrderStateLabel' +import { Trans } from '@lingui/react' +import { OrderStateLabel, OrderStateLabelProps, OrderStateRenderer } from './OrderStateLabel' type OrderStateLabelInlineProps = OrderStateLabelProps +const defaultRenderer: OrderStateRenderer = { + Ordered: () => , + Invoiced: () => , + Shipped: () => , + Refunded: () => , + Canceled: () => , + Returned: () => , + Partial: () => , +} + export function OrderStateLabelInline(props: OrderStateLabelInlineProps) { - const { sx = [] } = props + const { sx = [], renderer: incomingRenderer } = props + const renderer: OrderStateRenderer = { ...defaultRenderer, ...incomingRenderer } return ( ({ fontStyle: 'normal', diff --git a/packages/magento-customer/components/index.ts b/packages/magento-customer/components/index.ts index 31b5029a7e..82bc6cce2c 100644 --- a/packages/magento-customer/components/index.ts +++ b/packages/magento-customer/components/index.ts @@ -26,6 +26,7 @@ export * from './OrderCard/OrderCard' export * from './OrderCardItem/OrderCardItem' export * from './OrderCardItemImage/OrderCardItemImage' export * from './OrderDetails/OrderDetails' +export * from './OrderDetails/OrderTotals' export * from './OrderItem/OrderItem' export * from './OrderItems/OrderItems' export * from './OrderStateLabel/OrderStateLabel'