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

Jump to bottom

plugable selection for BuyCard; CarouselItemSelector; Image improvements; Cleanups #80

Merged
merged 12 commits into from
Apr 2, 2024
Merged

plugable selection for BuyCard; CarouselItemSelector; Image improvements; Cleanups #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
1ae0d8e
improved image support
artemis-prime Mar 30, 2024
f1ce836
img refactor compiles and runs
artemis-prime Mar 31, 2024
954943a
image refactor
artemis-prime Mar 31, 2024
00284c7
Checkout carousel interacts w order items.
artemis-prime Mar 31, 2024
aebe5bd
renamed cmmc components to reflect refactor
artemis-prime Apr 1, 2024
67bb2d9
logic selector logic working for allVariants case
artemis-prime Apr 1, 2024
386a16d
scrolling working for image (TODO Radio) as same
artemis-prime Apr 2, 2024
5c819fc
image and radio selectors work in all modes
artemis-prime Apr 2, 2024
56a8a48
enabled carousel selector
artemis-prime Apr 2, 2024
a66242f
UI conf mapping for skuPaths
artemis-prime Apr 2, 2024
ff84f1e
bug fixes
artemis-prime Apr 2, 2024
258af68
bumps [email protected], [email protected]
artemis-prime Apr 2, 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
3 changes: 2 additions & 1 deletion packages/commerce/components/buy/_to_deprecate_select-category-item-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & It
const item = items[0] as LineItem
return (
<div className={cn('flex flex-col justify-center items-center ' + (mobilePicker ? 'h-[180px] ' : 'h-auto min-h-24'), className)}>
<p className='text-lg text-center font-semibold'>{item.titleAsOption + ', ' + formatCurrencyValue(item.price)}</p>
<p className='text-lg text-center font-semibold'>{item.optionLabel + ', ' + formatCurrencyValue(item.price)}</p>
</div>
)
}
Expand All @@ -56,6 +56,7 @@ const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & It
selectSku={selectSku}
clx='mt-2'
showQuantity={false}
scrollList={false}
itemClx='flex flex-row gap-2.5 items-center'
/>
</div>
Expand Down
6 changes: 4 additions & 2 deletions packages/commerce/components/buy/_to_deprecate_select-category-item-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ const SelectCategoryItemPanel: React.FC<
<div className={cn('w-full border rounded-xl p-6 ')}>
<div className={cn('w-full aspect-square relative')}>
<Image
src={category.img}
src={category.img.src}
fill
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, (max-width: 1200px) 50vw, 20vw"
alt={category.title}
Expand Down Expand Up @@ -96,6 +96,8 @@ const SelectCategoryItemPanel: React.FC<
selectedItemRef={selectedItemRef}
selectSku={selectSku}
showQuantity={showQuantity}
scrollList={false}

clx='block columns-2 gap-4'
itemClx='flex flex-row gap-2 items-center mb-2.5'
/>
Expand Down Expand Up @@ -124,7 +126,7 @@ const SelectCategoryItemPanel: React.FC<
</h3>
{selectedItemRef.item?.sku ? (
<h6 className='text-center font-semibold'>
{(soleOption ? '' : (selectedItemRef.item.titleAsOption + ': ')) + formatCurrencyValue(selectedItemRef.item.price)}
{(soleOption ? '' : (selectedItemRef.item.optionLabel + ': ')) + formatCurrencyValue(selectedItemRef.item.price)}
</h6>
) : ''}
</div>
Expand Down
8 changes: 5 additions & 3 deletions packages/commerce/components/buy/add-to-cart-widget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ const AddToCartWidget: React.FC<{
onQuantityChanged
}) => {

const iconClx = ghost ? 'h-4 w-4 md:h-3 md:w-3 text-muted-3 hover:text-foreground' : 'h-5 w-7 px-1'
const digitClx = ghost ? 'px-2 md:px-0.5 text-foreground ' : 'sm:px-2 font-bold text-primary-fg '
const iconClx = ghost ? 'h-4 w-4 md:h-3 md:w-3 text-muted-3 hover:text-foreground' : 'h-5 w-7 px-1 opacity-50'
const digitClx = ghost ? 'px-2 md:px-0.5 text-foreground ' : 'sm:px-2 font-semibold text-primary-fg '

if (disabled) {
return (
Expand Down Expand Up @@ -81,12 +81,14 @@ const AddToCartWidget: React.FC<{
if (onQuantityChanged) {
onQuantityChanged(item.sku, old, old - 1)
}
/*
if (old === 1) {
toast(`Removed ${item.title} from your bag.`)
}
else {
toast(`Changed quantity to ${old - 1} for ${item.title}.`)
}
*/
sendGAEvent('remove_from_cart', {
items: [{
item_id: item.sku,
Expand Down Expand Up @@ -117,7 +119,7 @@ const AddToCartWidget: React.FC<{
<Icons.trash className={iconClx} aria-hidden='true'/>
)}
</Button>
<div className={'text-sm flex items-center cursor-default xs:px-2 ' + digitClx} >{item.quantity}</div>
<div className={'text-sm flex items-center cursor-default xs:px-2 ' + digitClx} >{item.quantity}{ghost ? '' : ' in Bag'}</div>
<Button
aria-label={'Add another ' + item.title + ' to the cart'}
size={size}
Expand Down
Loading
Loading