Add React editor project
This commit is contained in:
Rami Bitar
+345
-68
@@ -1,15 +1,18 @@
|
||||
'use client';
|
||||
|
||||
import { useContext } from 'react';
|
||||
import { shopifyFetch, SHOPIFY_STORE_DOMAIN } from '@/services/shopify/client';
|
||||
import { CartContext } from '@/contexts/shopify-context';
|
||||
import { create } from 'zustand';
|
||||
import { storefront, unwrapStorefrontResult } from '@/services/shopify/client';
|
||||
import {
|
||||
CREATE_CART_MUTATION,
|
||||
ADD_CART_LINES_MUTATION,
|
||||
UPDATE_CART_LINES_MUTATION,
|
||||
REMOVE_CART_LINES_MUTATION,
|
||||
UPDATE_CART_DISCOUNT_CODES_MUTATION,
|
||||
GET_CART_QUERY,
|
||||
} from '@/graphql/cart';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
// ─── Types ───────────────────────────────────────────────────────────
|
||||
|
||||
export interface CartLineInput {
|
||||
merchandiseId: string;
|
||||
@@ -42,12 +45,12 @@ interface CartLine {
|
||||
currencyCode: string;
|
||||
};
|
||||
image?: {
|
||||
id: string;
|
||||
id?: string | null;
|
||||
url: string;
|
||||
altText?: string;
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
altText?: string | null;
|
||||
width?: number | null;
|
||||
height?: number | null;
|
||||
} | null;
|
||||
product: {
|
||||
id: string;
|
||||
title: string;
|
||||
@@ -57,10 +60,16 @@ interface CartLine {
|
||||
};
|
||||
}
|
||||
|
||||
export interface CartDiscountCode {
|
||||
code: string;
|
||||
applicable: boolean;
|
||||
}
|
||||
|
||||
export interface Cart {
|
||||
id: string;
|
||||
checkoutUrl: string;
|
||||
totalQuantity: number;
|
||||
discountCodes?: CartDiscountCode[];
|
||||
cost: {
|
||||
subtotalAmount: {
|
||||
amount: string;
|
||||
@@ -73,7 +82,7 @@ export interface Cart {
|
||||
totalTaxAmount?: {
|
||||
amount: string;
|
||||
currencyCode: string;
|
||||
};
|
||||
} | null;
|
||||
};
|
||||
lines: {
|
||||
edges: Array<{
|
||||
@@ -82,84 +91,352 @@ export interface Cart {
|
||||
};
|
||||
}
|
||||
|
||||
// Create a new cart (optionally with initial items)
|
||||
export async function createCart(lines: CartLineInput[] = []): Promise<Cart> {
|
||||
const response = await shopifyFetch({
|
||||
query: CREATE_CART_MUTATION,
|
||||
variables: { lines: lines.length > 0 ? lines : null },
|
||||
});
|
||||
// ─── Shopify API functions ───────────────────────────────────────────
|
||||
|
||||
if (response.data.cartCreate.userErrors.length > 0) {
|
||||
throw new Error(response.data.cartCreate.userErrors[0].message);
|
||||
/**
|
||||
* Every cart mutation returns the same `{ cart, userErrors }` payload, and both
|
||||
* the payload and the cart inside it are nullable — Shopify returns no cart when
|
||||
* the mutation could not be applied. Callers want a cart or an exception.
|
||||
*/
|
||||
function unwrapCartPayload<T>(
|
||||
payload:
|
||||
| {
|
||||
cart?: T | null;
|
||||
userErrors: ReadonlyArray<{ message: string }>;
|
||||
}
|
||||
| null
|
||||
| undefined
|
||||
): T {
|
||||
if (payload?.userErrors.length) {
|
||||
throw new Error(payload.userErrors[0].message);
|
||||
}
|
||||
|
||||
return response.data.cartCreate.cart;
|
||||
}
|
||||
|
||||
// Add items to cart
|
||||
export async function addCartLines(cartId: string, lines: CartLineInput[]): Promise<Cart> {
|
||||
const response = await shopifyFetch({
|
||||
query: ADD_CART_LINES_MUTATION,
|
||||
variables: { cartId, lines },
|
||||
});
|
||||
|
||||
if (response.data.cartLinesAdd.userErrors.length > 0) {
|
||||
throw new Error(response.data.cartLinesAdd.userErrors[0].message);
|
||||
if (!payload?.cart) {
|
||||
throw new Error('Cart update failed. Please try again.');
|
||||
}
|
||||
|
||||
return response.data.cartLinesAdd.cart;
|
||||
return payload.cart;
|
||||
}
|
||||
|
||||
// Update cart line quantities
|
||||
export async function updateCartLines(cartId: string, lines: CartLineUpdateInput[]): Promise<Cart> {
|
||||
const response = await shopifyFetch({
|
||||
query: UPDATE_CART_LINES_MUTATION,
|
||||
variables: { cartId, lines },
|
||||
});
|
||||
async function createCartApi(lines: CartLineInput[] = []): Promise<Cart> {
|
||||
const data = unwrapStorefrontResult(
|
||||
await storefront.graphql(CREATE_CART_MUTATION, {
|
||||
variables: { lines: lines.length > 0 ? lines : null },
|
||||
}),
|
||||
'CreateCart'
|
||||
);
|
||||
|
||||
if (response.data.cartLinesUpdate.userErrors.length > 0) {
|
||||
throw new Error(response.data.cartLinesUpdate.userErrors[0].message);
|
||||
}
|
||||
|
||||
return response.data.cartLinesUpdate.cart;
|
||||
return unwrapCartPayload(data.cartCreate);
|
||||
}
|
||||
|
||||
// Remove items from cart
|
||||
export async function removeCartLines(cartId: string, lineIds: string[]): Promise<Cart> {
|
||||
const response = await shopifyFetch({
|
||||
query: REMOVE_CART_LINES_MUTATION,
|
||||
variables: { cartId, lineIds },
|
||||
});
|
||||
async function addCartLinesApi(
|
||||
cartId: string,
|
||||
lines: CartLineInput[]
|
||||
): Promise<Cart> {
|
||||
const data = unwrapStorefrontResult(
|
||||
await storefront.graphql(ADD_CART_LINES_MUTATION, {
|
||||
variables: { cartId, lines },
|
||||
}),
|
||||
'AddCartLines'
|
||||
);
|
||||
|
||||
if (response.data.cartLinesRemove.userErrors.length > 0) {
|
||||
throw new Error(response.data.cartLinesRemove.userErrors[0].message);
|
||||
}
|
||||
|
||||
return response.data.cartLinesRemove.cart;
|
||||
return unwrapCartPayload(data.cartLinesAdd);
|
||||
}
|
||||
|
||||
// Get cart by ID
|
||||
export async function getCart(cartId: string): Promise<Cart | null> {
|
||||
const response = await shopifyFetch({
|
||||
query: GET_CART_QUERY,
|
||||
variables: { cartId },
|
||||
});
|
||||
async function updateCartLinesApi(
|
||||
cartId: string,
|
||||
lines: CartLineUpdateInput[]
|
||||
): Promise<Cart> {
|
||||
const data = unwrapStorefrontResult(
|
||||
await storefront.graphql(UPDATE_CART_LINES_MUTATION, {
|
||||
variables: { cartId, lines },
|
||||
}),
|
||||
'UpdateCartLines'
|
||||
);
|
||||
|
||||
return response.data.cart;
|
||||
return unwrapCartPayload(data.cartLinesUpdate);
|
||||
}
|
||||
|
||||
async function removeCartLinesApi(
|
||||
cartId: string,
|
||||
lineIds: string[]
|
||||
): Promise<Cart> {
|
||||
const data = unwrapStorefrontResult(
|
||||
await storefront.graphql(REMOVE_CART_LINES_MUTATION, {
|
||||
variables: { cartId, lineIds },
|
||||
}),
|
||||
'RemoveCartLines'
|
||||
);
|
||||
|
||||
return unwrapCartPayload(data.cartLinesRemove);
|
||||
}
|
||||
|
||||
async function updateCartDiscountCodesApi(
|
||||
cartId: string,
|
||||
discountCodes: string[]
|
||||
): Promise<Cart> {
|
||||
const data = unwrapStorefrontResult(
|
||||
await storefront.graphql(UPDATE_CART_DISCOUNT_CODES_MUTATION, {
|
||||
variables: { cartId, discountCodes },
|
||||
}),
|
||||
'UpdateCartDiscountCodes'
|
||||
);
|
||||
|
||||
return unwrapCartPayload(data.cartDiscountCodesUpdate);
|
||||
}
|
||||
|
||||
async function getCartApi(cartId: string): Promise<Cart | null> {
|
||||
const data = unwrapStorefrontResult(
|
||||
await storefront.graphql(GET_CART_QUERY, { variables: { cartId } }),
|
||||
'GetCart'
|
||||
);
|
||||
|
||||
return data.cart;
|
||||
}
|
||||
|
||||
// Redirect to Shopify checkout
|
||||
export function redirectToCheckout(checkoutUrl: string): void {
|
||||
if (checkoutUrl) {
|
||||
window.location.href = checkoutUrl;
|
||||
}
|
||||
}
|
||||
|
||||
// Hook to access cart context
|
||||
export const useShopifyCart = () => {
|
||||
const context = useContext(CartContext);
|
||||
if (!context) {
|
||||
throw new Error('useShopifyCart must be used within a ShopifyProvider');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
// ─── Zustand Store ───────────────────────────────────────────────────
|
||||
|
||||
const CART_ID_KEY = 'cartId';
|
||||
|
||||
interface CartState {
|
||||
// State
|
||||
isOpen: boolean;
|
||||
cartId: string | null;
|
||||
cart: Cart | null;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
_initialized: boolean;
|
||||
|
||||
// Computed (derived in the hook)
|
||||
// items, itemCount, totalAmount, checkoutUrl
|
||||
|
||||
// Actions
|
||||
openCart: () => void;
|
||||
closeCart: () => void;
|
||||
toggleCart: () => void;
|
||||
initCart: () => void;
|
||||
addItem: (variantId: string, quantity?: number) => Promise<Cart>;
|
||||
removeItem: (lineId: string) => Promise<Cart>;
|
||||
updateItemQuantity: (lineId: string, quantity: number) => Promise<Cart>;
|
||||
applyDiscountCode: (code: string) => Promise<Cart>;
|
||||
refreshCart: () => Promise<void>;
|
||||
}
|
||||
|
||||
export const useCartStore = create<CartState>((set, get) => ({
|
||||
// Initial state
|
||||
isOpen: false,
|
||||
cartId: null,
|
||||
cart: null,
|
||||
loading: true,
|
||||
error: null,
|
||||
_initialized: false,
|
||||
|
||||
// UI actions
|
||||
openCart: () => set({ isOpen: true }),
|
||||
closeCart: () => set({ isOpen: false }),
|
||||
toggleCart: () => set((s) => ({ isOpen: !s.isOpen })),
|
||||
|
||||
// Initialize cart from localStorage
|
||||
initCart: () => {
|
||||
if (get()._initialized) return;
|
||||
set({ _initialized: true });
|
||||
|
||||
if (typeof window === 'undefined') return;
|
||||
|
||||
const storedCartId = localStorage.getItem(CART_ID_KEY);
|
||||
if (!storedCartId) {
|
||||
set({ loading: false });
|
||||
return;
|
||||
}
|
||||
|
||||
set({ loading: true });
|
||||
getCartApi(storedCartId)
|
||||
.then((fetchedCart) => {
|
||||
if (fetchedCart) {
|
||||
set({ cart: fetchedCart, cartId: storedCartId, loading: false });
|
||||
} else {
|
||||
localStorage.removeItem(CART_ID_KEY);
|
||||
set({ cartId: null, cart: null, loading: false });
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
localStorage.removeItem(CART_ID_KEY);
|
||||
set({
|
||||
cartId: null,
|
||||
cart: null,
|
||||
loading: false,
|
||||
error: 'Failed to fetch cart',
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// Add item to cart (creates cart if needed)
|
||||
addItem: async (variantId: string, quantity: number = 1) => {
|
||||
try {
|
||||
set({ loading: true, error: null });
|
||||
|
||||
// Get or create cart
|
||||
let currentCartId = get().cartId;
|
||||
if (!currentCartId) {
|
||||
const storedCartId = localStorage.getItem(CART_ID_KEY);
|
||||
if (storedCartId) {
|
||||
currentCartId = storedCartId;
|
||||
set({ cartId: storedCartId });
|
||||
} else {
|
||||
const newCart = await createCartApi();
|
||||
localStorage.setItem(CART_ID_KEY, newCart.id);
|
||||
set({ cart: newCart, cartId: newCart.id });
|
||||
currentCartId = newCart.id;
|
||||
}
|
||||
}
|
||||
|
||||
const updatedCart = await addCartLinesApi(currentCartId, [
|
||||
{ merchandiseId: variantId, quantity },
|
||||
]);
|
||||
set({ cart: updatedCart, loading: false });
|
||||
return updatedCart;
|
||||
} catch (err) {
|
||||
const errorMessage =
|
||||
err instanceof Error ? err.message : 'Failed to add item to cart';
|
||||
set({ error: errorMessage, loading: false });
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
|
||||
// Remove item from cart
|
||||
removeItem: async (lineId: string) => {
|
||||
const { cartId } = get();
|
||||
if (!cartId) throw new Error('No cart exists');
|
||||
|
||||
try {
|
||||
set({ loading: true, error: null });
|
||||
const updatedCart = await removeCartLinesApi(cartId, [lineId]);
|
||||
set({ cart: updatedCart, loading: false });
|
||||
return updatedCart;
|
||||
} catch (err) {
|
||||
const errorMessage =
|
||||
err instanceof Error ? err.message : 'Failed to remove item from cart';
|
||||
set({ error: errorMessage, loading: false });
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
|
||||
// Update item quantity
|
||||
updateItemQuantity: async (lineId: string, quantity: number) => {
|
||||
const { cartId, removeItem } = get();
|
||||
if (!cartId) throw new Error('No cart exists');
|
||||
|
||||
if (quantity <= 0) {
|
||||
return removeItem(lineId);
|
||||
}
|
||||
|
||||
try {
|
||||
set({ loading: true, error: null });
|
||||
const updatedCart = await updateCartLinesApi(cartId, [
|
||||
{ id: lineId, quantity },
|
||||
]);
|
||||
set({ cart: updatedCart, loading: false });
|
||||
return updatedCart;
|
||||
} catch (err) {
|
||||
const errorMessage =
|
||||
err instanceof Error ? err.message : 'Failed to update item quantity';
|
||||
set({ error: errorMessage, loading: false });
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
|
||||
// Apply a discount code. Shopify accepts unknown codes and reports them back
|
||||
// as `applicable: false`, so callers should check the returned cart.
|
||||
applyDiscountCode: async (code: string) => {
|
||||
const { cartId } = get();
|
||||
if (!cartId) throw new Error('No cart exists');
|
||||
|
||||
try {
|
||||
set({ loading: true, error: null });
|
||||
const trimmed = code.trim();
|
||||
const updatedCart = await updateCartDiscountCodesApi(
|
||||
cartId,
|
||||
trimmed ? [trimmed] : []
|
||||
);
|
||||
set({ cart: updatedCart, loading: false });
|
||||
return updatedCart;
|
||||
} catch (err) {
|
||||
const errorMessage =
|
||||
err instanceof Error ? err.message : 'Failed to apply discount code';
|
||||
set({ error: errorMessage, loading: false });
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
|
||||
// Refresh cart from Shopify
|
||||
refreshCart: async () => {
|
||||
const storedCartId = localStorage.getItem(CART_ID_KEY);
|
||||
if (!storedCartId) {
|
||||
set({ loading: false });
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
set({ loading: true, error: null });
|
||||
const fetchedCart = await getCartApi(storedCartId);
|
||||
if (fetchedCart) {
|
||||
set({ cart: fetchedCart, cartId: storedCartId, loading: false });
|
||||
} else {
|
||||
localStorage.removeItem(CART_ID_KEY);
|
||||
set({ cartId: null, cart: null, loading: false });
|
||||
}
|
||||
} catch (err) {
|
||||
localStorage.removeItem(CART_ID_KEY);
|
||||
set({
|
||||
cartId: null,
|
||||
cart: null,
|
||||
loading: false,
|
||||
error: 'Failed to fetch cart',
|
||||
});
|
||||
}
|
||||
},
|
||||
}));
|
||||
|
||||
// ─── Hook (backwards-compatible API) ─────────────────────────────────
|
||||
|
||||
export function useShopifyCart() {
|
||||
const store = useCartStore();
|
||||
|
||||
// Initialize cart safely in an effect, not during render
|
||||
useEffect(() => {
|
||||
if (!store._initialized) {
|
||||
store.initCart();
|
||||
}
|
||||
}, []);
|
||||
|
||||
const items = store.cart?.lines?.edges?.map((edge) => edge.node) ?? [];
|
||||
const itemCount = items.reduce((sum, item) => sum + item.quantity, 0);
|
||||
const totalAmount = parseFloat(store.cart?.cost?.totalAmount?.amount ?? '0');
|
||||
const checkoutUrl = store.cart?.checkoutUrl ?? null;
|
||||
|
||||
return {
|
||||
isOpen: store.isOpen,
|
||||
openCart: store.openCart,
|
||||
closeCart: store.closeCart,
|
||||
toggleCart: store.toggleCart,
|
||||
cartId: store.cartId,
|
||||
cart: store.cart,
|
||||
items,
|
||||
itemCount,
|
||||
totalAmount,
|
||||
checkoutUrl,
|
||||
loading: store.loading,
|
||||
error: store.error,
|
||||
addItem: store.addItem,
|
||||
removeItem: store.removeItem,
|
||||
updateItemQuantity: store.updateItemQuantity,
|
||||
applyDiscountCode: store.applyDiscountCode,
|
||||
refreshCart: store.refreshCart,
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user