Initial commit
This commit is contained in:
Rami Bitar
165
editor/hooks/use-shopify-cart.ts
Normal file
165
editor/hooks/use-shopify-cart.ts
Normal file
@@ -0,0 +1,165 @@
|
||||
'use client';
|
||||
|
||||
import { useContext } from 'react';
|
||||
import { shopifyFetch, SHOPIFY_STORE_DOMAIN } from '@/editor/services/shopify/client';
|
||||
import { CartContext } from '@/editor/contexts/shopify-context';
|
||||
import {
|
||||
CREATE_CART_MUTATION,
|
||||
ADD_CART_LINES_MUTATION,
|
||||
UPDATE_CART_LINES_MUTATION,
|
||||
REMOVE_CART_LINES_MUTATION,
|
||||
GET_CART_QUERY,
|
||||
} from '@/editor/graphql/cart';
|
||||
|
||||
export interface CartLineInput {
|
||||
merchandiseId: string;
|
||||
quantity: number;
|
||||
}
|
||||
|
||||
export interface CartLineUpdateInput {
|
||||
id: string;
|
||||
quantity: number;
|
||||
}
|
||||
|
||||
interface CartLine {
|
||||
id: string;
|
||||
quantity: number;
|
||||
cost: {
|
||||
totalAmount: {
|
||||
amount: string;
|
||||
currencyCode: string;
|
||||
};
|
||||
};
|
||||
merchandise: {
|
||||
id: string;
|
||||
title: string;
|
||||
selectedOptions: Array<{
|
||||
name: string;
|
||||
value: string;
|
||||
}>;
|
||||
price: {
|
||||
amount: string;
|
||||
currencyCode: string;
|
||||
};
|
||||
image?: {
|
||||
id: string;
|
||||
url: string;
|
||||
altText?: string;
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
product: {
|
||||
id: string;
|
||||
title: string;
|
||||
handle: string;
|
||||
vendor?: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export interface Cart {
|
||||
id: string;
|
||||
checkoutUrl: string;
|
||||
totalQuantity: number;
|
||||
cost: {
|
||||
subtotalAmount: {
|
||||
amount: string;
|
||||
currencyCode: string;
|
||||
};
|
||||
totalAmount: {
|
||||
amount: string;
|
||||
currencyCode: string;
|
||||
};
|
||||
totalTaxAmount?: {
|
||||
amount: string;
|
||||
currencyCode: string;
|
||||
};
|
||||
};
|
||||
lines: {
|
||||
edges: Array<{
|
||||
node: CartLine;
|
||||
}>;
|
||||
};
|
||||
}
|
||||
|
||||
// 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 },
|
||||
});
|
||||
|
||||
if (response.data.cartCreate.userErrors.length > 0) {
|
||||
throw new Error(response.data.cartCreate.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);
|
||||
}
|
||||
|
||||
return response.data.cartLinesAdd.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 },
|
||||
});
|
||||
|
||||
if (response.data.cartLinesUpdate.userErrors.length > 0) {
|
||||
throw new Error(response.data.cartLinesUpdate.userErrors[0].message);
|
||||
}
|
||||
|
||||
return response.data.cartLinesUpdate.cart;
|
||||
}
|
||||
|
||||
// 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 },
|
||||
});
|
||||
|
||||
if (response.data.cartLinesRemove.userErrors.length > 0) {
|
||||
throw new Error(response.data.cartLinesRemove.userErrors[0].message);
|
||||
}
|
||||
|
||||
return response.data.cartLinesRemove.cart;
|
||||
}
|
||||
|
||||
// Get cart by ID
|
||||
export async function getCart(cartId: string): Promise<Cart | null> {
|
||||
const response = await shopifyFetch({
|
||||
query: GET_CART_QUERY,
|
||||
variables: { cartId },
|
||||
});
|
||||
|
||||
return response.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;
|
||||
};
|
||||
127
editor/hooks/use-shopify-collections.ts
Normal file
127
editor/hooks/use-shopify-collections.ts
Normal file
@@ -0,0 +1,127 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { shopifyFetch } from '@/editor/services/shopify/client';
|
||||
import {
|
||||
GET_COLLECTIONS_QUERY,
|
||||
GET_COLLECTION_PRODUCTS_QUERY,
|
||||
} from '@/editor/graphql/collections';
|
||||
import type { Product } from './use-shopify-products';
|
||||
|
||||
interface CollectionImage {
|
||||
url: string;
|
||||
altText?: string;
|
||||
}
|
||||
|
||||
export interface Collection {
|
||||
id: string;
|
||||
title: string;
|
||||
handle: string;
|
||||
description?: string;
|
||||
descriptionHtml?: string;
|
||||
image?: CollectionImage;
|
||||
}
|
||||
|
||||
export interface CollectionWithProducts extends Collection {
|
||||
products: Product[];
|
||||
}
|
||||
|
||||
interface UseCollectionProductsOptions {
|
||||
first?: number;
|
||||
sortKey?: 'BEST_SELLING' | 'CREATED' | 'PRICE' | 'TITLE';
|
||||
reverse?: boolean;
|
||||
}
|
||||
|
||||
// Fetch all collections
|
||||
export async function getCollections(first = 50): Promise<Collection[]> {
|
||||
const response = await shopifyFetch({
|
||||
query: GET_COLLECTIONS_QUERY,
|
||||
variables: { first },
|
||||
});
|
||||
|
||||
return response.data.collections.edges.map((edge: { node: Collection }) => edge.node);
|
||||
}
|
||||
|
||||
// Fetch products in a collection by handle
|
||||
export async function getCollectionProducts(
|
||||
handle: string,
|
||||
{ first = 50, sortKey = 'BEST_SELLING', reverse = false }: UseCollectionProductsOptions = {}
|
||||
): Promise<CollectionWithProducts | null> {
|
||||
const response = await shopifyFetch({
|
||||
query: GET_COLLECTION_PRODUCTS_QUERY,
|
||||
variables: { handle, first, sortKey, reverse },
|
||||
});
|
||||
|
||||
const collection = response.data.collection;
|
||||
if (!collection) return null;
|
||||
|
||||
return {
|
||||
...collection,
|
||||
products: collection.products.edges.map((edge: { node: Product }) => edge.node),
|
||||
};
|
||||
}
|
||||
|
||||
// Hook for fetching all collections
|
||||
export function useCollections(first = 50) {
|
||||
const [collections, setCollections] = useState<Collection[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fetchCollections = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const data = await getCollections(first);
|
||||
setCollections(data);
|
||||
} catch (err) {
|
||||
console.error('Error fetching collections:', err);
|
||||
setError(err instanceof Error ? err.message : 'Failed to load collections');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [first]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchCollections();
|
||||
}, [fetchCollections]);
|
||||
|
||||
return { collections, loading, error, refetch: fetchCollections };
|
||||
}
|
||||
|
||||
// Hook for fetching products in a collection
|
||||
export function useCollectionProducts(
|
||||
handle: string | null,
|
||||
options: UseCollectionProductsOptions = {}
|
||||
) {
|
||||
const [collection, setCollection] = useState<CollectionWithProducts | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fetchCollection = useCallback(async () => {
|
||||
if (!handle) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const data = await getCollectionProducts(handle, options);
|
||||
setCollection(data);
|
||||
if (!data) {
|
||||
setError('Collection not found');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error fetching collection products:', err);
|
||||
setError(err instanceof Error ? err.message : 'Failed to load collection');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [handle, options.first, options.sortKey, options.reverse]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchCollection();
|
||||
}, [fetchCollection]);
|
||||
|
||||
return { collection, loading, error, refetch: fetchCollection };
|
||||
}
|
||||
205
editor/hooks/use-shopify-products.ts
Normal file
205
editor/hooks/use-shopify-products.ts
Normal file
@@ -0,0 +1,205 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { shopifyFetch } from '@/editor/services/shopify/client';
|
||||
import {
|
||||
GET_PRODUCTS_QUERY,
|
||||
GET_PRODUCT_QUERY,
|
||||
QUERY_PRODUCT_RECOMMENDATIONS,
|
||||
} from '@/editor/graphql/products';
|
||||
|
||||
interface ProductImage {
|
||||
url: string;
|
||||
altText?: string;
|
||||
}
|
||||
|
||||
interface ProductPrice {
|
||||
amount: string;
|
||||
currencyCode: string;
|
||||
}
|
||||
|
||||
interface ProductVariant {
|
||||
id: string;
|
||||
title: string;
|
||||
price: ProductPrice;
|
||||
availableForSale: boolean;
|
||||
selectedOptions: Array<{
|
||||
name: string;
|
||||
value: string;
|
||||
}>;
|
||||
image?: ProductImage;
|
||||
}
|
||||
|
||||
interface ProductOption {
|
||||
id: string;
|
||||
name: string;
|
||||
values: string[];
|
||||
}
|
||||
|
||||
export interface Product {
|
||||
id: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
descriptionHtml?: string;
|
||||
handle: string;
|
||||
images: {
|
||||
edges: Array<{
|
||||
node: ProductImage;
|
||||
}>;
|
||||
};
|
||||
priceRange: {
|
||||
minVariantPrice: ProductPrice;
|
||||
};
|
||||
compareAtPriceRange?: {
|
||||
minVariantPrice: ProductPrice;
|
||||
};
|
||||
variants: {
|
||||
edges: Array<{
|
||||
node: ProductVariant;
|
||||
}>;
|
||||
};
|
||||
options: ProductOption[];
|
||||
}
|
||||
|
||||
interface UseProductsOptions {
|
||||
first?: number;
|
||||
query?: string;
|
||||
sortKey?: 'BEST_SELLING' | 'CREATED_AT' | 'PRICE' | 'TITLE';
|
||||
reverse?: boolean;
|
||||
}
|
||||
|
||||
interface UseProductsReturn {
|
||||
products: Product[];
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
refetch: () => Promise<void>;
|
||||
}
|
||||
|
||||
// Fetch multiple products
|
||||
export async function getProducts({
|
||||
first = 20,
|
||||
query = '',
|
||||
sortKey = 'BEST_SELLING',
|
||||
reverse = false,
|
||||
}: UseProductsOptions = {}): Promise<Product[]> {
|
||||
const response = await shopifyFetch({
|
||||
query: GET_PRODUCTS_QUERY,
|
||||
variables: { first, query, sortKey, reverse },
|
||||
});
|
||||
|
||||
return response.data.products.edges.map((edge: { node: Product }) => edge.node);
|
||||
}
|
||||
|
||||
// Fetch a single product by handle
|
||||
export async function getProduct(handle: string): Promise<Product | null> {
|
||||
const response = await shopifyFetch({
|
||||
query: GET_PRODUCT_QUERY,
|
||||
variables: { handle },
|
||||
});
|
||||
|
||||
return response.data.product;
|
||||
}
|
||||
|
||||
// Fetch product recommendations
|
||||
export async function getProductRecommendations(productId: string): Promise<Product[]> {
|
||||
const response = await shopifyFetch({
|
||||
query: QUERY_PRODUCT_RECOMMENDATIONS,
|
||||
variables: { productId },
|
||||
});
|
||||
|
||||
return response.data.productRecommendations || [];
|
||||
}
|
||||
|
||||
// Hook for fetching multiple products
|
||||
export function useProducts(options: UseProductsOptions = {}): UseProductsReturn {
|
||||
const [products, setProducts] = useState<Product[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fetchProducts = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const data = await getProducts(options);
|
||||
setProducts(data);
|
||||
} catch (err) {
|
||||
console.error('Error fetching products:', err);
|
||||
setError(err instanceof Error ? err.message : 'Failed to load products');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [options.first, options.query, options.sortKey, options.reverse]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchProducts();
|
||||
}, [fetchProducts]);
|
||||
|
||||
return { products, loading, error, refetch: fetchProducts };
|
||||
}
|
||||
|
||||
// Hook for fetching a single product
|
||||
export function useProduct(handle: string | null) {
|
||||
const [product, setProduct] = useState<Product | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fetchProduct = useCallback(async () => {
|
||||
if (!handle) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const data = await getProduct(handle);
|
||||
setProduct(data);
|
||||
if (!data) {
|
||||
setError('Product not found');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error fetching product:', err);
|
||||
setError(err instanceof Error ? err.message : 'Failed to load product');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [handle]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchProduct();
|
||||
}, [fetchProduct]);
|
||||
|
||||
return { product, loading, error, refetch: fetchProduct };
|
||||
}
|
||||
|
||||
// Hook for fetching product recommendations
|
||||
export function useProductRecommendations(productId: string | null) {
|
||||
const [recommendations, setRecommendations] = useState<Product[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fetchRecommendations = useCallback(async () => {
|
||||
if (!productId) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const data = await getProductRecommendations(productId);
|
||||
setRecommendations(data);
|
||||
} catch (err) {
|
||||
console.error('Error fetching recommendations:', err);
|
||||
setError(err instanceof Error ? err.message : 'Failed to load recommendations');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [productId]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchRecommendations();
|
||||
}, [fetchRecommendations]);
|
||||
|
||||
return { recommendations, loading, error, refetch: fetchRecommendations };
|
||||
}
|
||||
Reference in New Issue
Block a user