Skip to content
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

Create CartItemView component, update ProductCard board #74

Merged
merged 5 commits into from
Oct 8, 2024
Merged

Create CartItemView component, update ProductCard board #74

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8c09c87
Create CartItemView component
yurii-ve Oct 7, 2024
39081f5
Update product card board
yurii-ve Oct 7, 2024
9c1fc1f
Updated UI kit components board
yurii-ve Oct 8, 2024
d61493d
Resolve comments
yurii-ve Oct 8, 2024
221bc33
Resolve comments 2
yurii-ve Oct 8, 2024
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
10 changes: 6 additions & 4 deletions _codux/boards/components/cart/cart-item.board.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
import { createBoard } from '@wixc3/react-board';
import ComponentWrapper from '_codux/board-wrappers/component-wrapper';
import { mockCartItem, mockOutOfStockCartItem } from '_codux/mocks/cart-item';
import { CartItem } from '~/components/cart/cart-item/cart-item';
import { CartItemView } from '~/components/cart/cart-item/cart-item-view';

const noop = () => {};

export default createBoard({
name: 'Cart Item',
name: 'Cart Item View',
Board: () => {
return (
<ComponentWrapper>
<CartItem cartItem={mockCartItem} />
<CartItem cartItem={mockOutOfStockCartItem} />
<CartItemView cartItem={mockCartItem} onQuantityChange={noop} onRemoveButtonClick={noop} />
<CartItemView cartItem={mockOutOfStockCartItem} onQuantityChange={noop} onRemoveButtonClick={noop} />
</ComponentWrapper>
);
},
Expand Down
16 changes: 0 additions & 16 deletions _codux/boards/components/product-card/product-card-out-of-stock.board.tsx
View file
Open in desktop

This file was deleted.

11 changes: 0 additions & 11 deletions _codux/boards/components/product-card/product-card-without-image.board.tsx
View file
Open in desktop

This file was deleted.

8 changes: 8 additions & 0 deletions _codux/boards/components/product-card/product-card.board.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.root {
display: flex;
gap: 50px;
}

.card {
flex-basis: 350px;
}
31 changes: 25 additions & 6 deletions _codux/boards/components/product-card/product-card.board.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,34 @@
import { createBoard } from '@wixc3/react-board';
import { ProductCard } from '~/components/product-card/product-card';
import styles from './product-card.board.module.scss';

export default createBoard({
name: 'Product Card',
Board: () => (
<ProductCard
name='Shel 50" Class LED 4K UHD Smart TV'
price={{ formatted: { price: '$85' } }}
style={{ width: '300px' }}
imageUrl="https://wixmp-b7f7090100b13623109851bc.wixmp.com/layouters-starters/img_02.jpg"
/>
<div className={styles.root}>
<ProductCard
Copy link

Choose a reason for hiding this comment

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

Do you have ProductCard in UI-Kit board?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

you're right, removed separate board and added 'Out of stock' and 'With discount' cards to the UI kit board.
Even though personally I don't like the idea :)

className={styles.card}
name='Shel 50" Class LED 4K UHD Smart TV'
price={{ formatted: { price: '$85' } }}
style={{ width: '300px' }}
imageUrl="https://wixmp-b7f7090100b13623109851bc.wixmp.com/layouters-starters/img_02.jpg"
/>

<ProductCard
className={styles.card}
name='Shel 50" Class LED 4K UHD Smart TV'
price={{ formatted: { price: '$85' } }}
/>

<ProductCard
className={styles.card}
name='Shel 50" Class LED 4K UHD Smart TV'
price={{ formatted: { price: '$85' } }}
style={{ width: '300px' }}
imageUrl="https://wixmp-b7f7090100b13623109851bc.wixmp.com/layouters-starters/img_02.jpg"
outOfStock={true}
/>
</div>
),
tags: ['Component'],
});
0 ...ents/cart/cart-item/cart-item.module.scss → ...cart/cart-item/cart-item-view.module.scss
View file
Open in desktop
File renamed without changes.
69 changes: 69 additions & 0 deletions src/components/cart/cart-item/cart-item-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import { Cross2Icon } from '@radix-ui/react-icons';
import { cart } from '@wix/ecom';
import classNames from 'classnames';
import { getImageHttpUrl } from '~/api/wix-image';
import { Price } from '~/components/price/price';
import { isCartItemAvailable } from '~/utils';
import styles from './cart-item-view.module.scss';

export interface CartItemViewProps {
className?: string;
isLast?: boolean;
cartItem: cart.LineItem;
onRemoveButtonClick: () => void;
onQuantityChange: React.ChangeEventHandler<HTMLInputElement>;
}

export const CartItemView = ({
cartItem,
className,
isLast,
onRemoveButtonClick,
onQuantityChange,
}: CartItemViewProps) => {
const name = cartItem.productName?.translated || '';
const imageUrl = getImageHttpUrl(cartItem.image, 120, 120);
const isAvailable = isCartItemAvailable(cartItem);

return (
<div
className={classNames(
styles.root,
{ [styles.divider]: !isLast, [styles.outOfStock]: !isAvailable },
className
)}
>
<img src={imageUrl} alt={name || ''} className={styles.image} />
<div className={styles.infoContainer}>
<div className={styles.itemLine}>
<div>
<h4 className={styles.description}>{name}</h4>
{cartItem.fullPrice?.formattedConvertedAmount && (
<Price
fullPrice={cartItem.fullPrice?.formattedConvertedAmount}
discountedPrice={cartItem.price?.formattedConvertedAmount}
/>
)}
</div>
<button onClick={onRemoveButtonClick} aria-label="Remove item" className={styles.removeButton}>
<Cross2Icon height={20} width={18} />
</button>
</div>

{isAvailable ? (
<div className={styles.actionsContainer}>
<input
type="number"
value={cartItem.quantity}
onChange={onQuantityChange}
min={0}
className="numberInput"
/>
</div>
) : (
<div>Out of stock</div>
)}
</div>
</div>
);
};
68 changes: 13 additions & 55 deletions src/components/cart/cart-item/cart-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,7 @@
import { Cross2Icon } from '@radix-ui/react-icons';
import { cart } from '@wix/ecom';
import classNames from 'classnames';
import { ChangeEvent } from 'react';
import { useRemoveItemFromCart, useUpdateCartItemQuantity } from '~/api/api-hooks';
import { getImageHttpUrl } from '~/api/wix-image';
import { Price } from '~/components/price/price';
import { isCartItemAvailable } from '~/utils';
import styles from './cart-item.module.scss';
import { CartItemView } from './cart-item-view';

export interface CartItemProps {
className?: string;
Expand All @@ -15,67 +10,30 @@ export interface CartItemProps {
}

export const CartItem = ({ cartItem, className, isLast }: CartItemProps) => {
const name = cartItem.productName?.translated || '';
const imageUrl = getImageHttpUrl(cartItem.image, 120, 120);

const { trigger: updateQuantity } = useUpdateCartItemQuantity();
const { trigger: removeItem } = useRemoveItemFromCart();

function updateQuantityHandler(e: ChangeEvent<HTMLInputElement>) {
const handleQuantityChange = (e: ChangeEvent<HTMLInputElement>) => {
if (!cartItem._id) {
return;
}
const newQuantity = parseInt(e.target.value, 10);
if (newQuantity > 0) {
updateQuantity({ id: cartItem._id, quantity: newQuantity });
}
}
};

const isAvailable = isCartItemAvailable(cartItem);
const handleRemoveItem = () => {
Copy link
Collaborator

Choose a reason for hiding this comment

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

can be 1 liner

const handleRemoveItem = () =>removeItem(cartItem._id!)

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

hate oneliners

Copy link
Collaborator

Choose a reason for hiding this comment

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

you just don't know how to cook them

Copy link
Collaborator

Choose a reason for hiding this comment

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

images

return removeItem(cartItem._id!);
};

return (
<div
className={classNames(
styles.root,
{ [styles.divider]: !isLast, [styles.outOfStock]: !isAvailable },
className
)}
>
<img src={imageUrl} alt={name || ''} className={styles.image} />
<div className={styles.infoContainer}>
<div className={styles.itemLine}>
<div>
<h4 className={styles.description}>{name}</h4>
{cartItem.fullPrice?.formattedConvertedAmount && (
<Price
fullPrice={cartItem.fullPrice?.formattedConvertedAmount}
discountedPrice={cartItem.price?.formattedConvertedAmount}
/>
)}
</div>
<button
onClick={() => removeItem(cartItem._id!)}
aria-label="Remove item"
className={styles.removeButton}
>
<Cross2Icon height={20} width={18} />
</button>
</div>

{isAvailable ? (
<div className={styles.actionsContainer}>
<input
type="number"
value={cartItem.quantity}
onChange={updateQuantityHandler}
min={0}
className="numberInput"
/>
</div>
) : (
<div>Out of stock</div>
)}
</div>
</div>
<CartItemView
className={className}
cartItem={cartItem}
onQuantityChange={handleQuantityChange}
onRemoveButtonClick={handleRemoveItem}
isLast={isLast}
/>
);
};