diff --git a/apps/storefront/src/pages/orderDetail/components/OrderAction.tsx b/apps/storefront/src/pages/orderDetail/components/OrderAction.tsx index 794c95d8..d80cc3f7 100644 --- a/apps/storefront/src/pages/orderDetail/components/OrderAction.tsx +++ b/apps/storefront/src/pages/orderDetail/components/OrderAction.tsx @@ -1,21 +1,12 @@ import { useState, - useEffect, - useContext, - JSXElementConstructor, - ReactElement, - ReactFragment, - ReactPortal, - MouseEvent, } from 'react' import { Card, CardContent, Typography, - CardActions, Button, - Input, } from '@mui/material' import styled from '@emotion/styled' @@ -23,21 +14,11 @@ import { format, } from 'date-fns' -import { - TableColumnItem, -} from '@/components/B3Table' - import { OrderDialog, } from './OrderDialog' -const OrderActionContainer = styled('div')(() => ({ - -})) -const Test = styled('div')(() => ({ - minWidth: '100%', - minHeight: '300px', -})) +const OrderActionContainer = styled('div')(() => ({})) /// orderCard const InformationContainer = styled('div')(() => ({ @@ -66,29 +47,27 @@ const StyledCardActions = styled('div')(() => ({ const ItemContainer = styled('div')((props: any) => ({ display: 'flex', justifyContent: 'space-between', - fontWeight: props.nameKey === 'Grand Total' ? 700 : 400, - marginBottom: props.infoKey === 'paymentMethod' ? '8px' : 0, - marginTop: props.infoKey === 'address' ? '8px' : 0, + fontWeight: props.nameKey === 'Grand total' ? 700 : 400, + '& p': { marginTop: 0, }, })) +const PaymentItemContainer = styled('div')((props: any) => ({ + display: 'flex', + justifyContent: 'space-between', + fontWeight: 400, + marginBottom: props.isAddMarginButton && '0.8rem', +})) + const StyledCurrency = styled('div')(() => ({ display: 'flex', alignItems: 'center', width: '40%', justifyContent: 'space-between', - - // '& p': { - // marginLeft: '1rem', - // }, })) -// const Subtitle = styled('p')(() => ({ - -// })) - const OrderCard = (props: any) => { const { header, @@ -122,13 +101,10 @@ const OrderCard = (props: any) => { const infoType = typeof infos const [open, setOpen] = useState(false) - const [title, setTitle] = useState('') const [type, setType] = useState('') const [currentDialogData, setCurrentDialogData] = useState({}) - // const [infoKey, setInfoKey] = useState([]) - // const [infoValue, setInfoValue] = useState([]) - let infoKey + let infoKey: any let infoValue: any if (infoType !== 'string') { const { @@ -142,7 +118,6 @@ const OrderCard = (props: any) => { const handleOpenDialog = (e: any) => { const { name, - value, } = e.target if (name === 'viewInvoice') { @@ -151,7 +126,6 @@ const OrderCard = (props: any) => { // TODO } else { setOpen(true) - setTitle(value) setType(name) const newDialogData = dialogData.find((data: any) => data.type === name) @@ -162,7 +136,6 @@ const OrderCard = (props: any) => { return ( @@ -181,7 +154,7 @@ const OrderCard = (props: any) => { <> { infos.money ? ( - infoKey && infoKey.map((key, index) => ( + infoKey && infoKey.map((key: string, index: number) => ( { )) ) : ( - infoKey && infoKey.map((key: any) => ( - ( + - {infos.info[key]} - + {value} + )) ) } @@ -264,29 +237,31 @@ export const OrderAction = (props: any) => { state, zip, country, + city, } = billingAddress const paymentAddress = { paymentMethod: `Payment by ${paymentMethod}`, name: `${firstName} ${lastName}`, company, - address: `${street1}, `, - address1: `${state} ${zip}, ${country}`, + street: street1, + address: `${city}, ${state} ${zip}, ${country}`, } return paymentAddress } const handleOrderComments = (value: string) => { - // const comments = value.replace(/\n/g, '
') const commentsArr = value.split(/\n/g) - const comments: any = commentsArr.filter((item) => !!item.trim()).length > 0 ? { - mes0: 'Comments:', - } : {} + const comments: any = {} commentsArr.forEach((item, index) => { if (item.trim().length > 0) { - comments[`mes${index + 1}`] = item + const isHaveTitle = item.trim().includes(':') + + const message = isHaveTitle ? item : `Comments: ${item}` + + comments[`mes${index}`] = message } }) @@ -299,7 +274,6 @@ export const OrderAction = (props: any) => { key: 'Re-Order', name: 'reOrder', variant: 'outlined', - // onClick: () => handleTest(), }, { value: 'Return', @@ -319,7 +293,6 @@ export const OrderAction = (props: any) => { { header: 'Order summary', key: 'order-summary', - // subtitle: 'Purchased by John Miles on 13 Oct 22.', subtitle: `Purchased by ${name} on ${format(+updatedAt * 1000, 'dd MMM yy')}.`, buttons, infos: { diff --git a/apps/storefront/src/pages/orderDetail/components/OrderCheckboxProduct.tsx b/apps/storefront/src/pages/orderDetail/components/OrderCheckboxProduct.tsx index 8d19747e..75af23fc 100644 --- a/apps/storefront/src/pages/orderDetail/components/OrderCheckboxProduct.tsx +++ b/apps/storefront/src/pages/orderDetail/components/OrderCheckboxProduct.tsx @@ -3,6 +3,7 @@ import { Typography, Checkbox, TextField, + FormControlLabel, } from '@mui/material' import { @@ -57,6 +58,12 @@ const Flex = styled('div')(({ }, } : {} + // const mobileItemCheckboxStyle = isMobile ? { + // '& #product-item-checkbox': { + // paddingLeft: 0, + // }, + // } : {} + const flexWrap = isMobile ? 'wrap' : 'initial' return { @@ -122,6 +129,18 @@ const mobileItemStyle = { }, } +const StyledProductItemCheckbox = styled(Checkbox)(({ + isMobile, +}: any) => { + const mobileItemStyle = isMobile ? { + paddingLeft: 0, + } : {} + + return { + ...mobileItemStyle, + } +}) + export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => { const { products, @@ -197,12 +216,23 @@ export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => { ) } - {/* + { isMobile && ( - + + )} + sx={{ + paddingLeft: '0.6rem', + }} + /> ) - } */} + } { products.map((product: OrderProductItem) => ( @@ -236,7 +266,7 @@ export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => { - {isMobile && Price:} + {isMobile && Price: } {`${currency} ${getProductPrice(product.base_price)}`} @@ -252,7 +282,7 @@ export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => { /> - {isMobile && Cost:} + {isMobile && Cost: } {`${currency} ${getProductTotals(getProductQuantity(product), product.base_price)}`} diff --git a/apps/storefront/src/pages/orderDetail/components/OrderDialog.tsx b/apps/storefront/src/pages/orderDetail/components/OrderDialog.tsx index d273f9bb..a1e7a1dd 100644 --- a/apps/storefront/src/pages/orderDetail/components/OrderDialog.tsx +++ b/apps/storefront/src/pages/orderDetail/components/OrderDialog.tsx @@ -28,9 +28,8 @@ import { } from './OrderShoppingList' import CreateShoppingList from './CreateShoppingList' -interface OrderDialogProps { +interface OrderDialogProps { open: boolean, - confirmText?: string, setOpen: (open: boolean) => void, products?: any, type?: string, @@ -38,7 +37,7 @@ interface OrderDialogProps { itemKey: string, } -export const OrderDialog: (props: OrderDialogProps) => ReactElement = ({ +export const OrderDialog: (props: OrderDialogProps) => ReactElement = ({ open, products, type, diff --git a/apps/storefront/src/pages/orderDetail/components/OrderShoppingList.tsx b/apps/storefront/src/pages/orderDetail/components/OrderShoppingList.tsx index d64760b7..5f6fe840 100644 --- a/apps/storefront/src/pages/orderDetail/components/OrderShoppingList.tsx +++ b/apps/storefront/src/pages/orderDetail/components/OrderShoppingList.tsx @@ -137,7 +137,7 @@ export const OrderShoppingList = (props: orderShoppingListProps) => { textTransform: 'none', }} > - + Create new + + Create New diff --git a/apps/storefront/src/pages/orderDetail/shared/B2BOrderData.ts b/apps/storefront/src/pages/orderDetail/shared/B2BOrderData.ts index ee406ac9..468c07f2 100644 --- a/apps/storefront/src/pages/orderDetail/shared/B2BOrderData.ts +++ b/apps/storefront/src/pages/orderDetail/shared/B2BOrderData.ts @@ -30,10 +30,6 @@ export interface B2BOrderData { [k: string]: any } -// export interface OrderActionProps { -// [k: string]: any -// } - const getOrderShipping = (data: B2BOrderData) => { const { shipments, @@ -111,11 +107,11 @@ const getOrderSummary = (data: B2BOrderData) => { createAt: dateCreated, name: `${firstName} ${lastName}`, priceData: { - SubTotal: formatPrice(subtotalExTax || subtotalIncTax || ''), - Shipping: formatPrice(shippingCostExTax || shippingCostIncTax || ''), - HandingFee: formatPrice(handlingCostExTax || handlingCostIncTax || ''), - Tax: formatPrice(totalTax || ''), - 'Grand Total': formatPrice(totalExTax || totalIncTax || ''), + 'Sub total': subtotalExTax || subtotalIncTax, + Shipping: shippingCostExTax || shippingCostIncTax, + 'Handing fee': handlingCostExTax || handlingCostIncTax, + Tax: totalTax, + 'Grand total': totalExTax || totalIncTax, }, }