import { useCart } from '@data/cart-context'; function MyComponent() { const { cart, // Current cart state addToCart, // Add items to cart updateLineItem, // Update item quantity removeLineItem, // Remove item from cart applyPromoCode, // Apply discount code removePromoCode, // Remove discount code setShippingMethod // Set shipping option } = useCart(); }

const { addToCart } = useCart(); // Quantity is required when adding items await addToCart(variantId, 1); // Add one item await addToCart(variantId, 3); // Add three items

const { updateLineItem } = useCart(); // Update to specific quantity await updateLineItem(lineItemId, 2); // Remove item by setting quantity to 0 await updateLineItem(lineItemId, 0);

const { applyPromoCode, removePromoCode } = useCart(); // Apply a promotion code const success = await applyPromoCode('SUMMER2024'); // Remove a promotion code await removePromoCode('SUMMER2024');

const { setShippingMethod } = useCart(); // Set shipping method await setShippingMethod(shippingMethodId);

const { cart } = useCart(); // Get cart items const items = cart.items; // Get cart totals const { subtotal, tax_total, shipping_total, discount_total, total } = cart; // Check applied discounts const appliedPromotions = cart.promotions; // Get selected shipping method const currentShipping = cart.shipping_methods?.[0];

const { cart } = useCart(); // Cart is automatically created when needed // You don't need to explicitly create a cart

// When a guest user logs in, their existing cart is  // automatically associated with their customer account // This is handled by the CartProvider and CustomerProvider import { useCustomer } from '@data/customer-context'; import { useCart } from '@data/cart-context'; function CheckoutFlow() { const { customer } = useCustomer(); const { cart } = useCart(); // Cart remains the same, only the customer_id is updated }

import { useRegion } from '@data/region-context'; import { useCart } from '@data/cart-context'; function MyComponent() { const { region } = useRegion(); const { cart } = useCart(); // Cart automatically updates when region changes // Product prices will be updated based on the region console.log(cart.region_id); // Current region ID console.log(cart.currency_code); // Region's currency }

import { useRegion } from '@data/region-context'; function MyComponent() { const { region, // Current selected region setRegion, // Update region state } = useRegion(); }

const { region } = useRegion(); // Get region details (if region is loaded) const { id, name, currency_code, countries } = region || {};

const { setRegion } = useRegion(); // Fetch region data first const { region: newRegion } = await apiClient.store.region.retrieve(regionId); // Update region setRegion(newRegion); // This will: // - Persist region selection // - Update cart region automatically // - Trigger price recalculations

import { useNavigation } from '@react-navigation/native'; function MyComponent() { const navigation = useNavigation(); // Open region selector modal const openRegionSelect = () => { navigation.navigate('RegionSelect'); }; }

import { useCountries } from '@data/region-context'; function AddressForm() { const countries = useCountries(); // Format countries for picker/selector const countryOptions = countries?.map(country => ({ label: country.display_name, value: country.iso_2 })); }

import { useCustomer } from '@data/customer-context'; function MyComponent() { const { customer, // Current customer data login, // Login with email/password logout, // Logout current customer register, // Register new customer refreshCustomer, // Refresh customer data updateCustomer // Update customer details } = useCustomer(); }

const { login } = useCustomer(); try { await login(email, password); // On successful login: // - JWT token is stored in AsyncStorage // - Customer data is fetched // - Cart is associated with customer } catch (error) { // Handle login error }

const { register } = useCustomer(); try { await register( email, password, firstName, lastName ); // Registration automatically logs in the customer } catch (error) { // Handle registration error }

const { logout } = useCustomer(); await logout(); // This will: // - Clear the stored JWT token // - Reset customer data // - Reset cart

import { useLoggedIn } from '@data/hooks'; function MyComponent() { const { customer } = useCustomer(); const isLoggedIn = useLoggedIn(); // Access customer details const { email, first_name, last_name, phone, billing_address, shipping_addresses } = customer || {}; }

const { updateCustomer } = useCustomer(); // Update customer information await updateCustomer({ first_name: "John", last_name: "Doe", phone: "+1234567890" });

const { refreshCustomer } = useCustomer(); // Fetch latest customer data from server await refreshCustomer();

import { useColors, useTheme, useThemeName, useColorScheme } from '@styles/hooks'; function MyComponent() { const colors = useColors(); // Get current theme colors const themeName = useThemeName(); // Get current theme name const { colorScheme } = useColorScheme(); // Get 'light' or 'dark' // Access theme colors const { primary, // Brand/accent color background, // Main background backgroundSecondary,// Secondary/card background content, // Main text color contentSecondary // Secondary text color } = colors; }

// In app.tsx, set your preferred theme name in ThemeProvider <ThemeProvider name="default"> {/* ... other providers */} </ThemeProvider>

import { useTheme } from '@styles/hooks'; function ThemeSwitcher() { const { setThemeName } = useTheme(); // Switch to a different theme const switchTheme = (name: string) => { setThemeName(name); // 'default' | 'vintage' | 'funky' | 'eco' }; }

function ThemedButton() { return ( <TouchableOpacity className="bg-primary"> // Theme primary color <Text className="text-content font-bold"> // Theme content color Click Me </Text> </TouchableOpacity> ); }

import { useProductQuantity, useVariantQuantity, useCartQuantity, useCurrentCheckoutStep, useActivePaymentSession, useLoggedIn, useCountries } from '@data/hooks'; // Get quantity of a specific product in cart const quantity = useProductQuantity(productId); // Get quantity of a specific variant in cart const variantQuantity = useVariantQuantity(variantId); // Get total number of items in cart const cartQuantity = useCartQuantity(); // Get current checkout step const checkoutStep = useCurrentCheckoutStep(); // Returns: 'address' | 'delivery' | 'payment' | 'review' // Get active payment session in checkout const paymentSession = useActivePaymentSession(); // Check if user is logged in const isLoggedIn = useLoggedIn(); // Get formatted list of countries for current region const countries = useCountries(); // Returns: Array<{ label: string, value: string }>