Skip to content

redesign cart shopping #98

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
OrtalNisim wants to merge 1 commit into
base: main
Choose a base branch
from
Open

redesign cart shopping #98

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
170 changes: 92 additions & 78 deletions src/components/Cart/Cart.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,118 +1,132 @@
import React from 'react';

import { Divider, Grid } from '@mui/material';
import { Grid, Box, Divider } from '@mui/material';
Comment on lines -2 to +1
Copy link
Contributor

@OfekSagiv OfekSagiv Aug 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no use of Box and Divider, please remove


import {
GridContainer,
EmptyCartContainer,
CartContainer,
CartItemWrapper,
RemoveButtonWrapper,
CartItemCard,
ProductImage,
ProductContent,
SummaryCard,
SummaryRowWrapper,
StyledDivider,
} from './Cart.styles';
import { SharedImage } from '../../components/shared/Image/SharedImage.jsx';
import { CART_TEXT } from '../../constants/hardText.js';
import { TEXT_VARIANTS, BUTTON_VARIANTS } from '../../constants/types.js';
import { addSignShekel } from '../../utils/converting.js';
import { LOCKER_LOCATION } from '../../utils/textTemplates.js';
import ProductCard from '../Product/ProductCard';
import ActionButton from '../shared/Button/ActionButton.jsx';
import SharedTypography from '../shared/Text/SharedTypography.jsx';

const Cart = ({
items,
total,
onContinue,
handleItemRemove,
isLoading = false,
isError = false,
isLoggedIn = true,
}) => {
items,
total,
onContinue,
handleItemRemove,
isLoading = false,
isError = false,
}) => {
const validItems = Array.isArray(items) ? items : [];
const isCartEmpty = validItems.length === 0;
const canPurchase = !isCartEmpty && total > 0;

const statusText = isLoading
? CART_TEXT.CART_LOADING
: isError
? CART_TEXT.CART_ERROR
: isCartEmpty
? CART_TEXT.CART_EMPTY
: null;
if (isLoading || isError || isCartEmpty) {
const status = isLoading
? CART_TEXT.CART_LOADING
: isError
? CART_TEXT.CART_ERROR
: CART_TEXT.CART_EMPTY;

if (statusText) {
return (
<EmptyCartContainer>
<SharedTypography variant={TEXT_VARIANTS.DEFAULT}>
<SharedTypography variant={TEXT_VARIANTS.PAGE_TITLE}>
{CART_TEXT.CART_TITLE}
</SharedTypography>
<SharedTypography variant={TEXT_VARIANTS.DEFAULT}>
{statusText}
<SharedTypography variant={TEXT_VARIANTS.STATUS_TEXT}>
{status}
</SharedTypography>
</EmptyCartContainer>
);
}

return (
<CartContainer>
<SharedTypography variant={TEXT_VARIANTS.DEFAULT}>
{CART_TEXT.CART_TITLE}
</SharedTypography>

<Grid container spacing={3}>
{validItems.map(({ id, images, name, price, rating, lockerId }) => (
<Grid key={id} size={12}>
<CartItemWrapper elevation={2}>
<ProductCard
id={id}
images={images}
name={name}
price={price}
rating={rating}
onSelect={() => {}}
disabled
/>
<SharedTypography variant={TEXT_VARIANTS.DEFAULT}>
{LOCKER_LOCATION.LOCKER_LABEL(
lockerId?.lockerNumber ?? '',
lockerId?.location ?? '',
)}
</SharedTypography>
<RemoveButtonWrapper>
<GridContainer container spacing={4}>
<Grid item xs={12} md={9}>
<SharedTypography variant={TEXT_VARIANTS.PAGE_TITLE}>
{CART_TEXT.CART_TITLE}
</SharedTypography>

{validItems.map(({ id, images, name, price, lockerId }) => (
<CartItemCard key={id}>
<SharedImage src={images} alt={name} style={ProductImage} />

<ProductContent>
<SharedTypography variant={TEXT_VARIANTS.PRODUCT_TITLE}>
{name}
</SharedTypography>

<SharedTypography variant={TEXT_VARIANTS.PRODUCT_PRICE}>
{addSignShekel(price)}
</SharedTypography>

<SharedTypography variant={TEXT_VARIANTS.PRODUCT_LOCATION}>
{LOCKER_LOCATION.LOCKER_LABEL(
lockerId?.lockerNumber ?? '',
lockerId?.location ?? '',
)}
</SharedTypography>

<ActionButton
onClick={() => handleItemRemove(id)}
styleType={BUTTON_VARIANTS.OUTLINED}
fullWidth
>
{CART_TEXT.REMOVE_BUTTON}
</ActionButton>
</RemoveButtonWrapper>
</CartItemWrapper>
</Grid>
))}
</Grid>
</ProductContent>
</CartItemCard>
))}
</Grid>

<Divider />
<Grid item xs={12} md={3}>
<SummaryCard>
<SharedTypography variant={TEXT_VARIANTS.SECTION_TITLE}>
{CART_TEXT.ORDER_SUMMARY}
</SharedTypography>

<Grid size={12}>
<SharedTypography variant={TEXT_VARIANTS.DEFAULT}>
{CART_TEXT.CART_TOTAL}
</SharedTypography>
<SharedTypography variant={TEXT_VARIANTS.DEFAULT}>
{addSignShekel(total)}
</SharedTypography>
</Grid>

<ActionButton
onClick={onContinue}
disabled={!canPurchase}
styleType={BUTTON_VARIANTS.FILLED}
>
{CART_TEXT.CART_CONTINUE}
</ActionButton>

{!isLoggedIn && (
<SharedTypography variant={TEXT_VARIANTS.DEFAULT} sx={{ mt: 2 }}>
{CART_TEXT.CART_LOGIN_REQUIRED}
</SharedTypography>
)}
<SummaryRowWrapper>
<SharedTypography variant={TEXT_VARIANTS.SUMMARY_ROW}>
{CART_TEXT.SUBTOTAL}
</SharedTypography>
<SharedTypography variant={TEXT_VARIANTS.SUMMARY_ROW}>
{addSignShekel(total)}
</SharedTypography>
</SummaryRowWrapper>

<StyledDivider />

<SummaryRowWrapper>
<SharedTypography variant={TEXT_VARIANTS.SECTION_TOTAL}>
{CART_TEXT.CART_TOTAL}
</SharedTypography>
<SharedTypography variant={TEXT_VARIANTS.SECTION_TOTAL}>
{addSignShekel(total)}
</SharedTypography>
</SummaryRowWrapper>

<ActionButton
onClick={onContinue}
disabled={!canPurchase}
fullWidth
styleType={BUTTON_VARIANTS.FILLED}
sx={{ mt: 3 }}
>
{CART_TEXT.CONTINUE_TO_PURCHASE}
</ActionButton>
</SummaryCard>
</Grid>
</GridContainer>
</CartContainer>
);
};
Expand Down
126 changes: 103 additions & 23 deletions src/components/Cart/Cart.styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,22 @@
import { Paper, Box } from '@mui/material';
import { Paper, Box , Grid, Divider} from '@mui/material';
import { styled } from '@mui/material/styles';

import SharedTypography from '../shared/Text/SharedTypography.jsx';

export const GridContainer = styled(Grid)(({ theme }) => ({
width: '100vw',
paddingLeft: theme.spacing(10),
paddingRight: theme.spacing(10),
paddingTop: theme.spacing(6),
paddingBottom: theme.spacing(6),
}));

export const CartTitle = styled(SharedTypography)({
marginBottom: '32px',
fontSize: '1.7rem',
fontWeight: 800,
});

export const EmptyCartContainer = styled(Box)(({ theme }) => ({
maxWidth: '30rem',
marginInline: 'auto',
Expand All @@ -14,33 +30,97 @@ export const EmptyCartContainer = styled(Box)(({ theme }) => ({
gap: '2rem',
}));

export const CartContainer = styled(Box)(({ theme }) => ({
padding: '2rem',
backgroundColor: theme.palette.background.paper,
borderRadius: theme.shape.custom?.roundedLg || '0.75rem',
boxShadow: theme.shadows[2],
margin: '2rem auto',
maxWidth: '62.5rem',
width: '100%',
display: 'flex',
flexDirection: 'column',
gap: '2rem',
export const CartContainer = styled('div')(() => ({
width: '100vw',
minHeight: '100vh',
paddingTop: '1rem',
paddingBottom: '3rem',
paddingLeft: '6vw',
paddingRight: '6vw',
backgroundColor: '#f9f9f9',
boxSizing: 'border-box',
}));

export const CartItemWrapper = styled(Paper)(({ theme }) => ({
padding: '1rem',
borderRadius: '0.75rem',
export const CartItemCard = styled(Paper)(() => ({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
boxShadow: theme.shadows[1],
width: '80%',
margin: '0 auto',
flexDirection: 'row',
alignItems: 'flex-start',
padding: '2.5rem',
marginBottom: '3rem',
borderRadius: '1.5rem',
boxShadow: '0 6px 25px rgba(0, 0, 0, 0.08)',
width: '100%',
minHeight: '200px',
}));

export const ProductImage = {
width: '150px',
height: '150px',
objectFit: 'cover',
borderRadius: '14px',
marginRight: '2rem',
};
Comment on lines +56 to +62
Copy link

Copilot AI Aug 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ProductImage should be a styled component function like other exports in this file, rather than a plain object. This creates inconsistency in the styling approach.

Suggested change
export const ProductImage = {
width: '150px',
height: '150px',
objectFit: 'cover',
borderRadius: '14px',
marginRight: '2rem',
};
export const ProductImage = styled('img')(() => ({
width: '150px',
height: '150px',
objectFit: 'cover',
borderRadius: '14px',
marginRight: '2rem',
}));

Copilot uses AI. Check for mistakes.

export const ProductContent = styled('div')(() => ({
flex: 1,
}));

export const RemoveButtonWrapper = styled(Box)(() => ({
width: '100%',
marginTop: '1rem',
export const ProductName = styled('div')(() => ({
fontWeight: 800,
fontSize: '1.6rem',
marginBottom: '1rem',
textTransform: 'capitalize',
}));
Comment on lines +68 to 73
Copy link

Copilot AI Aug 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ProductName styled component duplicates styling that already exists in textVariants.js (PRODUCT_TITLE). Consider using the existing text variant instead of creating duplicate styles.

Suggested change
export const ProductName = styled('div')(() => ({
fontWeight: 800,
fontSize: '1.6rem',
marginBottom: '1rem',
textTransform: 'capitalize',
}));
// Use <SharedTypography variant="PRODUCT_TITLE" /> for product names instead of a custom styled component.

Copilot uses AI. Check for mistakes.

export const ProductPrice = styled('div')(() => ({
fontWeight: 700,
fontSize: '1.4rem',
color: '#111',
marginBottom: '1rem',
}));
Comment on lines +75 to +80
Copy link

Copilot AI Aug 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ProductPrice styled component duplicates styling that already exists in textVariants.js (PRODUCT_PRICE). Consider using the existing text variant instead of creating duplicate styles.

Suggested change
export const ProductPrice = styled('div')(() => ({
fontWeight: 700,
fontSize: '1.4rem',
color: '#111',
marginBottom: '1rem',
}));
export const ProductPrice = styled(SharedTypography)({
marginBottom: '1rem',
});

Copilot uses AI. Check for mistakes.

export const ProductLocation = styled('div')(() => ({
fontSize: '1.1rem',
color: 'gray',
marginBottom: '2rem',
}));
Comment on lines +82 to +86
Copy link

Copilot AI Aug 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ProductLocation styled component duplicates styling that already exists in textVariants.js (PRODUCT_LOCATION). Consider using the existing text variant instead of creating duplicate styles.

Suggested change
export const ProductLocation = styled('div')(() => ({
fontSize: '1.1rem',
color: 'gray',
marginBottom: '2rem',
}));
export const ProductLocation = styled(SharedTypography).attrs({
variant: 'PRODUCT_LOCATION',
})({
marginBottom: '2rem',
});

Copilot uses AI. Check for mistakes.

export const SummaryCard = styled(Paper)(() => ({
padding: '2.5rem',
borderRadius: '1rem',
boxShadow: '0 6px 25px rgba(0, 0, 0, 0.08)',
backgroundColor: '#fff',
position: 'sticky',
top: 30,
minWidth: '320px',
}));

export const SummaryTitle = styled('div')(() => ({
fontWeight: 800,
fontSize: '1.5rem',
marginBottom: '2rem',
}));
Comment on lines +98 to +102
Copy link

Copilot AI Aug 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

SummaryTitle styled component duplicates styling that already exists in textVariants.js (SECTION_TITLE). Consider using the existing text variant instead of creating duplicate styles.

Suggested change
export const SummaryTitle = styled('div')(() => ({
fontWeight: 800,
fontSize: '1.5rem',
marginBottom: '2rem',
}));
// Use SharedTypography with variant="SECTION_TITLE" instead of SummaryTitle

Copilot uses AI. Check for mistakes.

export const SummaryRow = styled('div')(() => ({
display: 'flex',
justifyContent: 'space-between',
fontSize: '1.2rem',
marginBottom: '1.2rem',
}));
Comment on lines +104 to +109
Copy link

Copilot AI Aug 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

SummaryRow styled component duplicates styling that already exists in textVariants.js (SUMMARY_ROW). Consider using the existing text variant instead of creating duplicate styles.

Suggested change
export const SummaryRow = styled('div')(() => ({
display: 'flex',
justifyContent: 'space-between',
fontSize: '1.2rem',
marginBottom: '1.2rem',
}));
// Removed duplicate SummaryRow styled component. Use SharedTypography with variant="SUMMARY_ROW" instead.

Copilot uses AI. Check for mistakes.

export const SummaryTotal = styled('div')(() => ({
display: 'flex',
justifyContent: 'space-between',
fontWeight: 800,
fontSize: '1.4rem',
}));
Comment on lines +111 to +116
Copy link

Copilot AI Aug 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

SummaryTotal styled component duplicates styling that already exists in textVariants.js (SECTION_TOTAL). Consider using the existing text variant instead of creating duplicate styles.

Suggested change
export const SummaryTotal = styled('div')(() => ({
display: 'flex',
justifyContent: 'space-between',
fontWeight: 800,
fontSize: '1.4rem',
}));
export const SummaryTotal = styled(SharedTypography).attrs({
variant: 'SECTION_TOTAL',
})({
display: 'flex',
justifyContent: 'space-between',
});

Copilot uses AI. Check for mistakes.

export const SummaryRowWrapper = styled(Box)({
display: 'flex',
justifyContent: 'space-between',
});

export const StyledDivider = styled(Divider)(({ theme }) => ({
marginTop: theme.spacing(2),
marginBottom: theme.spacing(2),
}));
8 changes: 6 additions & 2 deletions src/components/Product/Product.styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import { Card, Box } from '@mui/material';
import { styled } from '@mui/material/styles';

import { getTextStyles } from '../shared/Text/textVariants';

const defaultTextColor = getTextStyles().DEFAULT.color;

export const StyledCard = styled(Card)(({ theme, unavailable }) => ({
width: '15rem',
height: '17rem',
Expand All @@ -17,7 +21,7 @@ export const StyledCard = styled(Card)(({ theme, unavailable }) => ({
},
}));

export const UnavailableOverlay = styled(Box)(({ theme }) => ({
export const UnavailableOverlay = styled(Box)(() => ({
position: 'absolute',
inset: 0,
zIndex: 2,
Expand All @@ -30,7 +34,7 @@ export const UnavailableOverlay = styled(Box)(({ theme }) => ({

export const NotAvailableBadge = styled(Box)(({ theme }) => ({
backgroundColor: theme.palette.disabledCard.background,
color: theme.palette.disabledCard.text,
color: defaultTextColor,
padding: `${theme.spacing(1 / 2)} ${theme.spacing(1)}`,
Comment on lines 36 to 38
Copy link
Contributor

@OfekSagiv OfekSagiv Aug 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there isnt a way to add color from pallete ? (following mui documentation)

borderRadius: '1.25rem',
fontWeight: theme.typography.fontWeightBold,
Expand Down
Loading