90 lines
2.7 KiB
TypeScript
90 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import { Button } from "@/components/ui/Button";
|
|
import { useTranslation } from "@/lib/hooks/useTranslation";
|
|
import { useAppDispatch, useAppSelector } from "@/lib/redux/hooks";
|
|
import { clearBox, selectBoxItems } from "@/lib/redux/slices/boxSlice";
|
|
import { addItem } from "components/cart/actions";
|
|
import { useCart } from "components/cart/cart-context";
|
|
import { useRouter } from "next/navigation";
|
|
import { useState } from "react";
|
|
|
|
interface AddBoxToCartClientWithTranslationProps {
|
|
buttonText?: string;
|
|
}
|
|
|
|
export function AddBoxToCartClientWithTranslation({ buttonText }: AddBoxToCartClientWithTranslationProps) {
|
|
const { t } = useTranslation();
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const dispatch = useAppDispatch();
|
|
const boxItems = useAppSelector(selectBoxItems);
|
|
const router = useRouter();
|
|
const { addCartItem } = useCart();
|
|
|
|
// Check if we have a box container
|
|
const hasBoxContainer = boxItems.some(item => item.variantId === 'box-container');
|
|
|
|
// Disable the button if no box container is selected
|
|
const isDisabled = !hasBoxContainer;
|
|
|
|
const handleAddToCart = async () => {
|
|
setIsLoading(true);
|
|
|
|
try {
|
|
// Get box container details (for image, name etc.)
|
|
const boxContainer = boxItems.find(item => item.variantId === 'box-container');
|
|
|
|
if (!boxContainer) {
|
|
throw new Error('No box container selected');
|
|
}
|
|
|
|
// Generate a unique box ID to group all items together
|
|
const boxGroupId = `box-${Date.now()}`;
|
|
|
|
// Add box to cart with attribute marking it as a box container
|
|
await addItem(
|
|
null,
|
|
boxContainer.id,
|
|
1,
|
|
[
|
|
{ key: "_box_type", value: "container" },
|
|
{ key: "_box_group_id", value: boxGroupId }
|
|
]
|
|
);
|
|
|
|
// Add all product items with same box group ID
|
|
for (const item of boxItems.filter(i => i.variantId !== 'box-container')) {
|
|
await addItem(
|
|
null,
|
|
item.id,
|
|
item.quantity,
|
|
[
|
|
{ key: "_box_type", value: "item" },
|
|
{ key: "_box_group_id", value: boxGroupId }
|
|
]
|
|
);
|
|
}
|
|
|
|
// Clear the box
|
|
dispatch(clearBox());
|
|
|
|
// Redirect to cart page
|
|
router.push('/cart');
|
|
} catch (error) {
|
|
console.error('Error adding box to cart:', error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Button
|
|
variant="primary"
|
|
onClick={handleAddToCart}
|
|
className="w-full py-3"
|
|
disabled={isDisabled || isLoading}
|
|
>
|
|
{isLoading ? 'Loading...' : (buttonText || t('buildBox.customize.addToCart'))}
|
|
</Button>
|
|
);
|
|
}
|