Skip to content

Commit

Permalink
feat: add order return dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
@b3aton
b3aton committed Dec 29, 2022
1 parent 0728a37 commit f0b9004
Show file tree
Hide file tree
Showing 9 changed files with 322 additions and 39 deletions.
92 changes: 79 additions & 13 deletions apps/storefront/src/components/B3ProductList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,16 @@ import {
ReactElement,
ChangeEvent,
KeyboardEvent,
useState,
useEffect,
} from 'react'

import {
Box,
Typography,
TextField,
Checkbox,
FormControlLabel,
} from '@mui/material'

import styled from '@emotion/styled'
Expand Down Expand Up @@ -36,9 +40,6 @@ interface FlexProps {
interface FlexItemProps {
width?: string,
padding?: string,
sx?: {
[k: string]: string
}
}

const Flex = styled('div')(({
Expand Down Expand Up @@ -75,15 +76,13 @@ const Flex = styled('div')(({
const FlexItem = styled('div')(({
width,
padding = '0',
sx = {},
}: FlexItemProps) => ({
display: 'flex',
flexGrow: width ? 0 : 1,
flexShrink: width ? 0 : 1,
alignItems: 'center',
width,
padding,
...sx,
}))

const ProductHead = styled('div')(() => ({
Expand Down Expand Up @@ -131,7 +130,10 @@ interface ProductProps <T> {
actionWidth?: string,
quantityKey?: string,
quantityEditable?: boolean,
onProductQuantityChange?: (id: number, newQuantity: number) => void
onProductQuantityChange?: (id: number, newQuantity: number) => void,
showCheckbox?: boolean,
setCheckedArr?: (items: Array<T & ProductItem>) => void
selectAllText?: string,
}

export const B3ProductList: <T>(props: ProductProps<T>) => ReactElement = (props) => {
Expand All @@ -143,8 +145,13 @@ export const B3ProductList: <T>(props: ProductProps<T>) => ReactElement = (props
actionWidth = '100px',
quantityEditable = false,
onProductQuantityChange = noop,
showCheckbox = false,
setCheckedArr = noop,
selectAllText = 'Select all products',
} = props

const [list, setList] = useState<ProductItem[]>([])

const [isMobile] = useMobile()

const getProductPrice = (price: string | number) => {
Expand All @@ -153,7 +160,7 @@ export const B3ProductList: <T>(props: ProductProps<T>) => ReactElement = (props
return priceNumber.toFixed(2)
}

const getQuantity = (product: any) => parseInt(product[quantityKey].toString(), 10) || ''
const getQuantity = (product: any) => parseInt(product[quantityKey]?.toString() || '', 10) || ''

const getProductTotals = (quantity: number, price: string | number) => {
const priceNumber = parseFloat(price.toString()) || 0
Expand All @@ -179,6 +186,36 @@ export const B3ProductList: <T>(props: ProductProps<T>) => ReactElement = (props
}
}

const handleSelectAllChange = () => {
const newList = [...list]
if (newList.length === products.length) {
setList([])
} else {
setList([...products])
}
}

const handleSelectChange = (product: ProductItem) => {
const newList = [...list]
const index = newList.findIndex((item) => item.id === product.id)
if (index !== -1) {
newList.splice(index, 1)
} else {
newList.push(product)
}
setList(newList)
}

const isChecked = (product: ProductItem) => list.findIndex((item) => item.id === product.id) !== -1

useEffect(() => {
setCheckedArr(list)
}, [list])

useEffect(() => {
setList([])
}, [products])

const itemStyle = isMobile ? mobileItemStyle : defaultItemStyle

return products.length > 0 ? (
Expand All @@ -189,6 +226,14 @@ export const B3ProductList: <T>(props: ProductProps<T>) => ReactElement = (props
isHeader
isMobile={isMobile}
>
{
showCheckbox && (
<Checkbox
checked={list.length === products.length}
onChange={handleSelectAllChange}
/>
)
}
<FlexItem>
<ProductHead>Product</ProductHead>
</FlexItem>
Expand All @@ -213,12 +258,37 @@ export const B3ProductList: <T>(props: ProductProps<T>) => ReactElement = (props
)
}

{
isMobile && showCheckbox && (
<FormControlLabel
label={selectAllText}
control={(
<Checkbox
checked={list.length === products.length}
onChange={handleSelectAllChange}
/>
)}
sx={{
paddingLeft: '0.6rem',
}}
/>
)
}

{
products.map((product) => (
<Flex
isMobile={isMobile}
key={product.id}
>
{
showCheckbox && (
<Checkbox
checked={isChecked(product)}
onChange={() => handleSelectChange(product)}
/>
)
}
<FlexItem>
<ProductImage src={product.imageUrl || PRODUCT_DEFAULT_IMAGE} />
<Box
Expand All @@ -245,10 +315,8 @@ export const B3ProductList: <T>(props: ProductProps<T>) => ReactElement = (props
</FlexItem>

<FlexItem
padding={quantityEditable ? '10px 0 0' : ''}
{...itemStyle.default}
sx={{
minHeight: '40px',
}}
>
{isMobile && <span>Price:</span>}
{`${currency} ${getProductPrice(product.base_price)}`}
Expand Down Expand Up @@ -283,10 +351,8 @@ export const B3ProductList: <T>(props: ProductProps<T>) => ReactElement = (props
</FlexItem>

<FlexItem
padding={quantityEditable ? '10px 0 0' : ''}
{...itemStyle.default}
sx={{
minHeight: '40px',
}}
>
{isMobile && <span>Total:</span>}
{`${currency} ${getProductTotals(getQuantity(product) || 0, product.base_price)}`}
Expand Down
13 changes: 6 additions & 7 deletions apps/storefront/src/pages/orderDetail/components/OrderAction.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,8 +157,8 @@ const OrderCard = (props: OrderCardProps) => {
confirmText: 'Submit return request',
},
{
dialogTitle: 'Add to shipping list',
type: 'shippingList',
dialogTitle: 'Add to shopping list',
type: 'shoppingList',
description: 'Select products and quantity to add to shopping list',
confirmText: 'Add to shopping list',
},
Expand All @@ -184,8 +184,6 @@ const OrderCard = (props: OrderCardProps) => {
navigate('/invoiceDetail/1')
} else if (name === 'printInvoice') {
window.open(`/account.php?action=print_invoice&order_id=${orderId}`)
} else if (name === 'return') {
// TODO
} else {
setOpen(true)
setType(name)
Expand Down Expand Up @@ -323,6 +321,7 @@ export const OrderAction = (props: OrderActionProps) => {
products,
orderId,
ipStatus = 0,
canReturn = false,
} = detailsData

if (!orderId) {
Expand Down Expand Up @@ -397,12 +396,12 @@ export const OrderAction = (props: OrderActionProps) => {
key: 'Return',
name: 'return',
variant: 'outlined',
isCanShow: true,
isCanShow: canReturn,
},
{
value: 'ADD TO SHOPPING LIST',
key: 'add-to-shipping-list',
name: 'shippingList',
key: 'add-to-shopping-list',
name: 'shoppingList',
variant: 'outlined',
isCanShow: isB2BUser,
},
Expand Down
14 changes: 11 additions & 3 deletions apps/storefront/src/pages/orderDetail/components/OrderCheckboxProduct.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ interface FlexItemProps {
width?: string,
padding?: string,
flexBasis?: string,
minHeight?: string,
}

const Flex = styled('div')(({
Expand Down Expand Up @@ -287,14 +288,18 @@ export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => {
))}
</Box>
</FlexItem>
<FlexItem {...itemStyle.default}>
<FlexItem
padding="10px 0 0"
{...itemStyle.default}
>
{isMobile && <span>Price: </span>}
{`${currencyInfo.currency_token} ${getProductPrice(product.base_price)}`}
</FlexItem>
<FlexItem {...itemStyle.qty}>
<TextField
type="number"
variant={isMobile ? 'filled' : 'outlined'}
variant="filled"
hiddenLabel={!isMobile}
label={isMobile ? 'Qty' : ''}
value={getProductQuantity(product)}
onChange={handleProductQuantityChange(product)}
Expand All @@ -306,7 +311,10 @@ export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => {
}}
/>
</FlexItem>
<FlexItem {...itemStyle.default}>
<FlexItem
padding="10px 0 0"
{...itemStyle.default}
>
{isMobile && <span>Cost: </span>}
{`${currencyInfo.currency_token} ${getProductTotals(getProductQuantity(product), product.base_price)}`}
</FlexItem>
Expand Down
Loading

0 comments on commit f0b9004

Please sign in to comment.