Feat/add to cart

components/cart/add-to-cart.tsx

@@ -18,13 +18,13 @@ export function AddToCart({
   const router = useRouter();
   const searchParams = useSearchParams();
   const [isPending, startTransition] = useTransition();
-  const defaultVariantId = variants.length === 1 ? variants[0]?.id : undefined;
+  const defaultVariantId = variants.length === 1 ? variants[0]?.code : undefined;
   const variant = variants.find((variant: ProductVariant) =>
     variant.selectedOptions.every(
       (option) => option.value === searchParams.get(option.name.toLowerCase())
     )
   );
-  const selectedVariantId = variant?.id || defaultVariantId;
+  const selectedVariantId = variant?.code || defaultVariantId;
   const title = !availableForSale
     ? 'Out of stock'
     : !selectedVariantId

components/cart/delete-item-button.tsx

@@ -4,6 +4,8 @@ import { useRouter } from 'next/navigation';
 
 import clsx from 'clsx';
 import type { CartItem } from 'lib/sylius/types';
+import { useTransition } from 'react';
+import { removeItem } from './actions';
 
 export default function DeleteItemButton({ item }: { item: CartItem }) {
   const router = useRouter();

components/cart/modal.tsx

@@ -163,7 +163,11 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                     </div>
                     <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700">
                       <p>Shipping</p>
-                      <p className="text-right">Calculated at checkout</p>
+                      <Price
+                        className="text-right text-base text-black dark:text-white"
+                        amount={cart.cost.shippingAmount.amount}
+                        currencyCode={cart.cost.shippingAmount.currencyCode}
+                      />
                     </div>
                     <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700">
                       <p>Total</p>

lib/sylius/index.ts

@@ -164,9 +164,11 @@ export const getCart = async (cartId: string): Promise<Cart> => {
   const syliusCart = data.body;
   return normalizeCart(syliusCart);
 };
-export const addToCart = (cartId: string | undefined, payload: AddToCartPayload[]) => {
-  syliusRequest(REST_METHODS.PUT, `/orders/${cartId}/items`, payload[0]);
-  return {};
+export const addToCart = async (cartId: string | undefined, payload: AddToCartPayload[]) => {
+  await syliusRequest(REST_METHODS.POST, `/orders/${cartId}/items`, {
+    productVariant: payload[0]?.merchandiseId,
+    quantity: payload[0]?.quantity
+  });
 };
 export const removeFromCart = () => {};
 export const updateCart = () => {};

lib/sylius/normalizer/cart-normalizer.ts

@@ -11,9 +11,10 @@ export const normalizeCart = (syliusCart: SyliusCart): Cart => {
     cost: {
       subtotalAmount: normalizePrice(syliusCart.itemsTotal),
       totalAmount: normalizePrice(syliusCart.total),
-      totalTaxAmount: normalizePrice(syliusCart.taxTotal)
+      totalTaxAmount: normalizePrice(syliusCart.taxTotal),
+      shippingAmount: normalizePrice(syliusCart.shippingTotal)
     },
-    lines: syliusCart.items.map((item) => normalizeCartItem(item)),
+    lines: syliusCart.items.map(normalizeCartItem),
     totalQuantity: syliusCart.items.reduce((acc, item) => acc + item.quantity, 0)
   };
 };

lib/sylius/normalizer/product-normalizer.ts

@@ -12,15 +12,16 @@ export const normalizeProduct = (product: SyliusProduct): Product => ({
     title: product.name,
     description: product.shortDescription
   },
-  variants: product.variants.map((variant) => normalizeProductVariant(variant)),
-  images: product.images.map((image) => normalizeProductImage(image)),
+  // variants not needed for cart normalization
+  variants: product.variants ? product.variants.map(normalizeProductVariant) : [],
+  images: product.images.map(normalizeProductImage),
   id: product.id.toString(),
   handle: product.slug,
   availableForSale: product.variants.some((variant) => variant.inStock),
   title: product.name,
   description: product.shortDescription,
   descriptionHtml: product.description,
-  options: product.options.map((option) => normalizeProductOption(option)),
+  options: product.options.map(normalizeProductOption),
   priceRange: normalizePriceRange(product),
   featuredImage: normalizeProductImage(product.images[0] as SyliusProductImage),
   tags: [],
@@ -30,6 +31,7 @@ export const normalizeProduct = (product: SyliusProduct): Product => ({
 const normalizeProductVariant = (variant: SyliusProductVariant): ProductVariant => {
   return {
     id: variant.id.toString(),
+    code: variant.code,
     title: variant.name,
     availableForSale: variant.inStock,
     selectedOptions: variant.optionValues.map((optionValue) => {

lib/sylius/types.ts

@@ -5,6 +5,7 @@ export interface Cart {
     subtotalAmount: Money;
     totalAmount: Money;
     totalTaxAmount: Money;
+    shippingAmount: Money;
   };
   lines: CartItem[];
   totalQuantity: number;
@@ -63,6 +64,7 @@ export interface ProductOption {
 
 export interface ProductVariant {
   id: string;
+  code: string;
   title: string;
   availableForSale: boolean;
   selectedOptions: {