Medusa Storefront Development

https://docs.medusajs.com/resources/storefront-development
Admin
Medusa Storefront Development provides guides and tools for developers to build custom web or mobile...
Tokens:123,020
Snippets:1,006
Trust Score:9.8
Update:6 months ago
Show doc for...
Tokens:
Raw
### Next.js Installation Prompts

Source: https://docs.medusajs.com/resources/storefront-development/guides/express-checkout

Default configuration choices for the Next.js project setup.

```text
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like your code inside a `src/` directory? No
Would you like to use App Router? (recommended) Yes
Would you like to use Turbopack for `next dev`?  No
Would you like to customize the import alias (`@/*` by default)? No
```

--------------------------------

### Install Stripe SDKs

Source: https://docs.medusajs.com/resources/storefront-development/checkout/payment/stripe

Install the required Stripe JavaScript and React SDKs in your storefront project.

```bash
npm install @stripe/react-stripe-js @stripe/stripe-js
```

--------------------------------

### Install Medusa JS SDK

Source: https://docs.medusajs.com/resources/storefront-development/tips/index.html.md

Install the necessary packages to interact with the Medusa backend.

```bash
npm install @medusajs/js-sdk@latest @medusajs/types@latest
```

--------------------------------

### Register Customer with JS SDK

Source: https://docs.medusajs.com/resources/storefront-development/customers/register

Example of registering a customer using the Medusa JS SDK. Ensure the SDK is installed and configured.

```javascript
import { MedusaProvider } from "@medusajs/medusa-react"

function App() {
  return (
    <MedusaProvider
      baseUrl="http://localhost:9000"
      queryClientConfig={{
        defaultOptions: {
          queries: {
            refetchOnWindowFocus: false,
          },
        },
      }}
    >
      {/* Your app components */}
    </MedusaProvider>
  )
}

```

```javascript
import React from "react"
import { useRegisterCustomer } from "@medusajs/medusa-react"

function RegisterForm() {
  const registerCustomer = useRegisterRegisterCustomer()

  const handleSubmit = (event) => {
    event.preventDefault()
    const email = event.target.email.value
    const password = event.target.password.value
    const firstName = event.target.first_name.value
    const lastName = event.target.last_name.value

    registerCustomer.mutate({
      email,
      password,
      first_name: firstName,
      last_name: lastName,
    })
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" placeholder="Email" />
      <input type="password" name="password" placeholder="Password" />
      <input type="text" name="first_name" placeholder="First Name" />
      <input type="text" name="last_name" placeholder="Last Name" />
      <button type="submit">Register</button>
    </form>
  )
}

export default RegisterForm

```

--------------------------------

### Start Expo Server

Source: https://docs.medusajs.com/resources/storefront-development/guides/react-native-expo

Run this command in your Expo project directory to start the Expo server and generate a QR code for testing.

```bash
npm run start
```

--------------------------------

### Install Medusa Application

Source: https://docs.medusajs.com/resources/storefront-development/guides/express-checkout

Command to initialize a new Medusa project.

```bash
yarn dlx create-medusa-app@latest
```

--------------------------------

### Start Development Servers

Source: https://docs.medusajs.com/resources/storefront-development/guides/express-checkout

Commands to launch the Medusa backend and the Next.js storefront development environments.

```bash
yarn dev
```

--------------------------------

### Create CartProvider and useCart Hook

Source: https://docs.medusajs.com/resources/storefront-development/cart/context

This example creates a React context for managing the cart. It includes a `CartProvider` to handle cart creation or retrieval using the JS SDK and a `useCart` hook for accessing cart data. Ensure the JS SDK is installed and configured.

```tsx
"use client" // include with Next.js 13+

import {
  createContext,
  useContext,
  useEffect,
  useState,
} from "react"
import { HttpTypes } from "@medusajs/types"
import { useRegion } from "./region"
import { sdk } from "@/lib/sdk"

type CartContextType = {
  cart?: HttpTypes.StoreCart
  setCart: React.Dispatch<
    React.SetStateAction<HttpTypes.StoreCart | undefined>
  >
  refreshCart: () => void
}

const CartContext = createContext<CartContextType | null>(null)

type CartProviderProps = {
  children: React.ReactNode
}

export const CartProvider = ({ children }: CartProviderProps) => {
  const [cart, setCart] = useState<
    HttpTypes.StoreCart
  >()
  const { region } = useRegion()

  useEffect(() => {
    if (cart || !region) {
      return
    }

    const cartId = localStorage.getItem("cart_id")
    if (!cartId) {
      // create a cart
      sdk.store.cart.create({
        region_id: region.id,
      })
      .then(({ cart: dataCart }) => {
        localStorage.setItem("cart_id", dataCart.id)
        setCart(dataCart)
      })
    } else {
      // retrieve cart
      sdk.store.cart.retrieve(cartId)
      .then(({ cart: dataCart }) => {
        setCart(dataCart)
      })
    }
  }, [cart, region])

  const refreshCart = () => {
    localStorage.removeItem("cart_id")
    setCart(undefined)
  }

  return (
    <CartContext.Provider value={{
      cart,
      setCart,
      refreshCart,
    }}>
      {children}
    </CartContext.Provider>
  )
}

export const useCart = () => {
  const context = useContext(CartContext)

  if (!context) {
    throw new Error("useCart must be used within a CartProvider")
  }

  return context
}
```

--------------------------------

### Start Medusa Application

Source: https://docs.medusajs.com/resources/storefront-development/guides/express-checkout/index.html.md

Run this command in the Medusa project's directory to start the Medusa application. The application will be accessible at http://localhost:9000.

```bash
npm run dev
```

--------------------------------

### Install Medusa UI Packages

Source: https://docs.medusajs.com/resources/storefront-development/guides/express-checkout/index.html.md

Install the main UI library, design presets, and icons package for your Next.js project.

```bash
npm install @medusajs/ui@latest @medusajs/ui-preset@latest @medusajs/icons@latest
```

--------------------------------

### Install react-jwt library

Source: https://docs.medusajs.com/resources/storefront-development/customers/third-party-login/index.html.md

Install the dependency required to decode authentication tokens returned by Medusa.

```bash
npm install react-jwt
```

--------------------------------

### Install Medusa UI Packages

Source: https://docs.medusajs.com/resources/storefront-development/guides/express-checkout

Installs the core UI library, design presets, and icons package for Medusa. Use this command to add Medusa's frontend components to your project.

```bash
yarn add @medusajs/ui@latest @medusajs/ui-preset@latest @medusajs/icons@latest
```

--------------------------------

### Install ecommerce-storefront plugin in Claude Code

Source: https://docs.medusajs.com/resources/storefront-development/index.html.md

Commands to initialize Claude Code and install the Medusa ecommerce-storefront plugin.

```bash
claude # start claude code
/plugin marketplace add medusajs/medusa-agent-skills
/plugin install ecommerce-storefront@medusa
```

--------------------------------

### Install Dependencies

Source: https://docs.medusajs.com/resources/storefront-development/guides/react-native-expo

Installs the Medusa JS SDK, navigation libraries, and storage utilities required for the mobile app.

```bash
npm install @medusajs/js-sdk @medusajs/types @react-native-async-storage/async-storage @react-native-picker/picker @react-navigation/drawer
```

--------------------------------

### Install Medusa JS SDK and Types

Source: https://docs.medusajs.com/resources/storefront-development/guides/express-checkout

Installs the JavaScript SDK for interacting with the Medusa API and the associated TypeScript types. This is essential for building your storefront's backend logic.

```bash
yarn add @medusajs/js-sdk@latest @medusajs/types@latest
```

--------------------------------

### Localized Product Response Structure

Source: https://docs.medusajs.com/resources/storefront-development/products/retrieve

Example of the JSON structure returned when a locale is successfully applied.

```json
{
  "id": "prod_123",
  "title": "Chemise Exemple",
  "description": "Ceci est une description en français.",
  // other product fields...
}
```

--------------------------------

### List Products with React

Source: https://docs.medusajs.com/resources/storefront-development/products/list

Fetches and displays a list of products using the Medusa JS SDK within a React component. Ensure the JS SDK is installed and configured.

```tsx
"use client" // include with Next.js 13+

import { useEffect, useState } from "react"
import { HttpTypes } from "@medusajs/types"
import { sdk } from "@/lib/sdk"

export default function Products() {
  const [loading, setLoading] = useState(true)
  const [products, setProducts] = useState<
    HttpTypes.StoreProduct[]
  >([])

  useEffect(() => {
    if (!loading) {
      return 
    }

    sdk.store.product.list()
    .then(({ products: dataProducts }) => {
      setProducts(dataProducts)
      setLoading(false)
    })
  }, [loading])

  return (
    <div>
      {loading && <span>Loading...</span>}
      {!loading && products.length === 0 && <span>No products found.</span>}
      {!loading && products.length > 0 && (
        <ul>
          {products.map((product) => (
            <li key={product.id}>{product.title}</li>
          ))}
        </ul>
      )}
    </div>
  )
}
```

--------------------------------

### Use useCustomer Hook in a Component

Source: https://docs.medusajs.com/resources/storefront-development/customers/context/index.html.md

Access the customer's data within any child component of `CustomerProvider` using the `useCustomer` hook. This example shows how to import and use the hook to get the `customer` object.

```tsx
"use client" // include with Next.js 13+
// ...
import { useCustomer } from "@/providers/customer"

export default function Profile() {
  const { customer } = useCustomer()
  // ...
}
```

--------------------------------

### Initialize Next.js Project

Source: https://docs.medusajs.com/resources/storefront-development/guides/express-checkout

Command to create a new Next.js application for the storefront.

```bash
yarn dlx create-next-app@latest express-checkout
```

--------------------------------

### Create Expo Project

Source: https://docs.medusajs.com/resources/storefront-development/guides/react-native-expo

Initializes a new React Native application using the Expo CLI.

```bash
npx create-expo-app@latest
```

--------------------------------

### Fetch Products using JS SDK

Source: https://docs.medusajs.com/resources/storefront-development/tips/index.html.md

Use the initialized SDK instance to retrieve a list of products from the store.

```typescript
import { sdk } from "@/lib/sdk"

sdk.store.product.list()
.then(({ products }) => {
  console.log(products)
})
```

--------------------------------

### Configure Root Layout

Source: https://docs.medusajs.com/resources/storefront-development/guides/react-native-expo

Wraps the application with the RegionProvider and initializes the drawer navigation stack.

```tsx
import { useColorScheme } from "@/hooks/use-color-scheme"
import { DarkTheme, DefaultTheme, ThemeProvider } from "@react-navigation/native"
import { Stack } from "expo-router"
import { StatusBar } from "expo-status-bar"
import { GestureHandlerRootView } from "react-native-gesture-handler"
import "react-native-reanimated"
import { RegionProvider } from "@/context/region-context"

export default function RootLayout() {
  const colorScheme = useColorScheme()

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
        <RegionProvider>
          <Stack screenOptions={{ headerShown: false }}>
            <Stack.Screen name="(drawer)" options={{ headerShown: false }} />
            {/* TODO: Add checkout and order confirmation screens */}
          </Stack>
          <StatusBar style="auto" />
        </RegionProvider>
      </ThemeProvider>
    </GestureHandlerRootView>
  )
}
```

--------------------------------

### Initialize Medusa JS SDK

Source: https://docs.medusajs.com/resources/storefront-development/guides/react-native-expo

Create lib/sdk.ts to configure the Medusa SDK with environment variables and AsyncStorage for token persistence.

```typescript
import Medusa from "@medusajs/js-sdk"
import AsyncStorage from "@react-native-async-storage/async-storage"
import Constants from "expo-constants"

const MEDUSA_BACKEND_URL =
  Constants.expoConfig?.extra?.EXPO_PUBLIC_MEDUSA_URL ||
  process.env.EXPO_PUBLIC_MEDUSA_URL ||
  "http://localhost:9000"

const MEDUSA_PUBLISHABLE_API_KEY = 
  Constants.expoConfig?.extra?.EXPO_PUBLIC_MEDUSA_PUBLISHABLE_API_KEY ||
  process.env.EXPO_PUBLIC_MEDUSA_PUBLISHABLE_API_KEY ||
  ""

export const sdk = new Medusa({
  baseUrl: MEDUSA_BACKEND_URL,
  debug: __DEV__,
  auth: {
    type: "jwt",
    jwtTokenStorageMethod: "custom",
    storage: AsyncStorage,
  },
  publishableKey: MEDUSA_PUBLISHABLE_API_KEY,
})
```

--------------------------------

### Claude Code Prompts

Source: https://docs.medusajs.com/resources/storefront-development/index.html.md

Example prompts for generating storefront features using the ecommerce-storefront plugin.

```text
Build a Next.js ecommerce storefront that uses Medusa as the backend. The storefront should have product listing, product detail, cart, and checkout pages.
Add a megamenu to the storefront's header that displays product categories and subcategories. The menu should be responsive and work well on mobile devices.
```

--------------------------------

### Get Current Locale from JS SDK

Source: https://docs.medusajs.com/resources/storefront-development/localization/index.html.md

Retrieve the currently active locale set in the JS SDK using the `sdk.getLocale()` method.

```ts
const currentLocale = sdk.getLocale()
console.log(currentLocale) // "fr-FR"
```

--------------------------------

### Implement Google Callback in React

Source: https://docs.medusajs.com/resources/storefront-development/customers/third-party-login/index.html.md

A React component example for handling Google OAuth callbacks, including token decoding and customer creation.

```tsx
"use client" // include with Next.js 13+

import { HttpTypes } from "@medusajs/types"
import { useEffect, useMemo, useState } from "react"
import { decodeToken } from "react-jwt"
import { sdk } from "@/lib/sdk"

export default function GoogleCallback() {
  const [loading, setLoading] = useState(true)
  const [customer, setCustomer] = useState<HttpTypes.StoreCustomer>()
  // for other than Next.js
  const queryParams = useMemo(() => {
    const searchParams = new URLSearchParams(window.location.search)
    return Object.fromEntries(searchParams.entries())
  }, [])

  const sendCallback = async () => {
    let token = ""

    try {
      token = await sdk.auth.callback(
        "customer", 
        "google", 
        // pass all query parameters received from the
        // third party provider
        queryParams
      )
    } catch (error) {
      alert("Authentication Failed")
      
      throw error
    }

    return token
  }

  const createCustomer = async () => {
    // create customer
    await sdk.store.customer.create({
      email: "example@medusajs.com",
    })
  }

  const refreshToken = async () => {
    // refresh the token
    const result = await sdk.auth.refresh()
  }

  const validateCallback = async () => {
    const token = await sendCallback()

    const decodedToken = decodeToken(token) as { actor_id: string, user_metadata: Record<string, unknown> }

    const shouldCreateCustomer = decodedToken.actor_id === ""

    if (shouldCreateCustomer) {
      await createCustomer(decodedToken.user_metadata.email as string)

      await refreshToken()
    }

    // use token to send authenticated requests
    const { customer: customerData } =  await sdk.store.customer.retrieve()

    setCustomer(customerData)
    setLoading(false)
  }

  useEffect(() => {
    if (!loading) {
      return
    }

    validateCallback()
  }, [loading])

  useEffect(() => {
    if (!customer) {
      return
    }

    // TODO redirect to homepage after successful authentication
  }, [customer])

  return (
    <div>
      {loading && <span>Loading...</span>}
      {customer && <span>Created customer {customer.email} with Google.</span>}
    </div>
  )
}
```

--------------------------------

### Create a Publishable API Key

Source: https://docs.medusajs.com/resources/storefront-development/publishable-api-keys/index.html.md

Use the Admin API to create a new publishable API key. Ensure you replace `{token}` with your actual authorization token.

```bash
curl -X POST 'http://localhost:9000/admin/api-keys' \
-H 'Authorization: Bearer {token}' \
-H 'Content-Type: application/json' \
--data-raw '{
  "title": "Storefront Key",
  "type": "publishable"
}'
```

--------------------------------

### Retrieve Localized Product via Header

Source: https://docs.medusajs.com/resources/storefront-development/products/retrieve

Requests a product with a specific locale using the x-medusa-locale header.

```bash
curl "http://localhost:9000/store/products/prod_123" \
-H 'x-publishable-api-key: {your_publishable_api_key}' \
-H "x-medusa-locale: fr-FR"
```

--------------------------------

### Make Authenticated Request with Cookie Session (cURL)

Source: https://docs.medusajs.com/resources/storefront-development/customers/login

Example of making an authenticated request to the Medusa API using a cookie session ID stored in the 'connect.sid' cookie.

```bash
curl '{backend_url}/store/products' \
-H 'Cookie: connect.sid={sid}'
```

--------------------------------

### Create Main Screen Redirect

Source: https://docs.medusajs.com/resources/storefront-development/guides/react-native-expo

Implements a redirect component to ensure the home tab is the default entry point.

```tsx
import { Redirect } from "expo-router"
import React from "react"

const MainScreen = () => {
  return <Redirect href="/(drawer)/(tabs)/(home)" />
}

export default MainScreen
```

--------------------------------

### Integrate CartProvider in Next.js Layout

Source: https://docs.medusajs.com/resources/storefront-development/cart/context

This example shows how to wrap your application with the `CartProvider` in a Next.js `layout.tsx` file. Ensure `CartProvider` is a child of `RegionProvider` if it depends on region context.

```tsx
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { CartProvider } from "@/providers/cart"
import { RegionProvider } from "@/providers/region"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <RegionProvider>
          <CartProvider>
          {/* Other providers... */}
            {children}
          </CartProvider>
        </RegionProvider>
      </body>
    </html>
  )
}
```

--------------------------------

### Initialize Shipping Component

Source: https://docs.medusajs.com/resources/storefront-development/guides/express-checkout

Set up the Shipping component with necessary state variables and context providers. This component handles the selection of shipping methods.

```typescript
"use client"

import {
  useState,
} from "react"
import { useCart } from "@/providers/cart"
import { HttpTypes } from "@medusajs/types"
import { useRouter } from "next/navigation"

type ShippingProps = {
  handle: string
  isActive: boolean
}

export const Shipping = ({
  handle,
  isActive,
}: ShippingProps) => {
  const { cart, updateCart } = useCart()
  const [loading, setLoading] = useState(true)
  const [shippingMethod, setShippingMethod] = useState(
    cart?.shipping_methods?.[0]?.shipping_option_id || ""
  )
  const [shippingOptions, setShippingOptions] = useState< 
    HttpTypes.StoreCartShippingOption[] 
  >([])
  const [calculatedPrices, setCalculatedPrices] = useState< 
    Record<string, number> 
  >({})
  const router = useRouter()

  // TODO retrieve shipping options
```

--------------------------------

### Get Product Images

Source: https://docs.medusajs.com/resources/storefront-development/guides/react-native-expo

Memoizes an array of image URLs for the product, falling back to the thumbnail if no images are available. Returns an empty array if no images or thumbnail are present.

```typescript
// Get all images from product
const images = useMemo(() => {
  const productImages = product?.images?.map((img) => img.url).filter(Boolean) || []
  // If no images, use thumbnail or fallback
  if (productImages.length === 0 && product?.thumbnail) {
    return [product.thumbnail]
  }
  return productImages.length > 0 ? productImages : []
}, [product])
```

--------------------------------

### Retrieve Product Variant's Price with Tax

Source: https://docs.medusajs.com/resources/storefront-development/products/price/examples/tax-price

Use the `sdk.store.product.retrieve` method with `region_id` and `country_code` query parameters to get the product variant's price with taxes.

```typescript
sdk.store.product.retrieve(id, {
  fields: `*variants.calculated_price`,
  region_id: region.id,
  country_code: region.countries[0].iso_2,
})
.then(({ product }) => {
  // TODO use product
  console.log(product)
})
```

--------------------------------

### Make Storefront Requests with Publishable API Key

Source: https://docs.medusajs.com/resources/storefront-development/publishable-api-keys/index.html.md

Include the `x-publishable-api-key` header in your requests to Medusa's Store API routes. Replace `{your_publishable_api_key}` with your actual key.

```bash
curl '{backend_url}/store/products' \
-H 'x-publishable-api-key: {your_publishable_api_key}'
```

--------------------------------

### Initialize Product Component

Source: https://docs.medusajs.com/resources/storefront-development/guides/express-checkout/index.html.md

Defines the initial structure of the Product component with necessary state variables and context hooks.

```tsx
"use client"

import { 
  useState,
} from "react"
import { HttpTypes } from "@medusajs/types"
import { useRegion } from "@/providers/region"
import { useCart } from "@/providers/cart"
import { useRouter } from "next/navigation"

type ProductProps = {
  handle: string
  isActive: boolean
}

export const Product = ({ handle, isActive }: ProductProps) => {
  const [loading, setLoading] = useState(true)
  const [product, setProduct] = useState<HttpTypes.StoreProduct>()
  const [selectedOptions, setSelectedOptions] = useState<
    Record<string, string>
  >({})
  const [quantity, setQuantity] = useState(1)
  const { region } = useRegion()
  const { cart, addToCart } = useCart()
  const router = useRouter()

  // TODO get product details
}
```

--------------------------------

### Example JSON Response with French Translations

Source: https://docs.medusajs.com/resources/storefront-development/products/list

This JSON structure shows how product fields like `title` and `description` will appear in the specified locale (French in this case) when translations are available.

```json
{
  "products": [
    {
      "id": "prod_123",
      "title": "Chemise Exemple",
      "description": "Ceci est une description en français.",
      // other product fields...
    }
  ]
}
```

--------------------------------

### List Products with JS SDK

Source: https://docs.medusajs.com/resources/storefront-development/products/list

A direct JS SDK call to retrieve a list of products. This snippet assumes the SDK is already initialized.

```ts
sdk.store.product.list()
.then(({ products: dataProducts }) => {
  setProducts(dataProducts)
  setLoading(false)
})
```

--------------------------------

### Provide Cart Context to Children

Source: https://docs.medusajs.com/resources/storefront-development/guides/express-checkout

Renders the CartContext.Provider component, making cart data and functions available to all child components. This setup ensures that the entire storefront has access to cart functionalities.

```jsx
return (
  <CartContext.Provider value={{
    cart,
    addToCart,
    updateCart,
    refreshCart,
    updateItemQuantity,
    unsetCart,
  }}>
    {children}
  </CartContext.Provider>
)
```

--------------------------------

### Import SDK and React hooks for product retrieval

Source: https://docs.medusajs.com/resources/storefront-development/guides/express-checkout

Add the necessary SDK and React imports to the top of the product component file.

```typescript
import { sdk } from "@/lib/sdk"
import { 
  // other imports...
  useEffect,
} from "react"
```

--------------------------------

### Update Cart with Email using JS SDK

Source: https://docs.medusajs.com/resources/storefront-development/checkout/email

Example of updating a cart with an email address using the Medusa JS SDK. This snippet assumes you have a cart ID and the email value available.

```ts
const cartId = localStorage.getItem("cart_id")

sdk.store.cart.update(cart.id, {
  email,
})
.then(({ cart }) => {
  // use cart...
  console.log(cart)
})
```

--------------------------------

### Create Cart using JS SDK

Source: https://docs.medusajs.com/resources/storefront-development/cart/create

This is a basic example of creating a cart using the Medusa JS SDK. It requires a region ID and stores the created cart's ID in localStorage.

```ts
sdk.store.cart.create({
  region_id: region.id,
})
.then(({ cart }) => {
  localStorage.setItem("cart_id", cart.id)
})
```

--------------------------------

### Navigate to Project Directory

Source: https://docs.medusajs.com/resources/storefront-development/guides/react-native-expo

Changes the current working directory to the newly created Expo project folder.

```bash
cd your-project-name
```

--------------------------------

### Create ProductSkeleton Component

Source: https://docs.medusajs.com/resources/storefront-development/guides/react-native-expo

Implements a loading placeholder with animated shimmer effects for product images, titles, descriptions, and action buttons.

```tsx
import { Colors } from "@/constants/theme"
import { useColorScheme } from "@/hooks/use-color-scheme"
import React, { useEffect, useRef } from "react"
import { Animated, StyleSheet, View } from "react-native"

export function ProductSkeleton() {
  const colorScheme = useColorScheme()
  const colors = Colors[colorScheme ?? "light"]
  const shimmerAnim = useRef(new Animated.Value(0)).current

  useEffect(() => {
    Animated.loop(
      Animated.sequence([
        Animated.timing(shimmerAnim, {
          toValue: 1,
          duration: 1000,
          useNativeDriver: true,
        }),
        Animated.timing(shimmerAnim, {
          toValue: 0,
          duration: 1000,
          useNativeDriver: true,
        }),
      ])
    ).start()
  }, [shimmerAnim])

  const opacity = shimmerAnim.interpolate({
    inputRange: [0, 1],
    outputRange: [0.3, 0.7],
  })

  const skeletonColor = colorScheme === "dark" ? "#333" : "#e0e0e0"

  return (
    <View style={[styles.container, { backgroundColor: colors.background }]}>
      {/* Main Image Skeleton with Pagination Dots */}
      <View style={styles.imageContainer}>
        <Animated.View
          style={[
            styles.imageSkeleton,
            { backgroundColor: skeletonColor, opacity },
          ]}
        />
        <View style={styles.pagination}>
          {[1, 2, 3].map((i) => (
            <Animated.View
              key={i}
              style={[
                styles.paginationDot,
                { backgroundColor: skeletonColor, opacity },
              ]}
            />
          ))}
        </View>
      </View>

      <View style={styles.content}>
        {/* Title Skeleton */}
        <Animated.View
          style={[
            styles.titleSkeleton,
            { backgroundColor: skeletonColor, opacity },
          ]}
        />

        {/* Description Skeleton - 3 lines */}
        <View style={styles.descriptionContainer}>
          <Animated.View
            style={[
              styles.descriptionLine,
              { backgroundColor: skeletonColor, opacity, width: "100%" },
            ]}
          />
          <Animated.View
            style={[
              styles.descriptionLine,
              { backgroundColor: skeletonColor, opacity, width: "90%" },
            ]}
          />
          <Animated.View
            style={[
              styles.descriptionLine,
              { backgroundColor: skeletonColor, opacity, width: "70%" },
            ]}
          />
        </View>

        {/* Price Skeleton */}
        <Animated.View
          style={[
            styles.priceSkeleton,
            { backgroundColor: skeletonColor, opacity },
          ]}
        />

        {/* Options Skeleton */}
        <View style={styles.optionsContainer}>
          <Animated.View
            style={[
              styles.optionTitleSkeleton,
              { backgroundColor: skeletonColor, opacity },
            ]}
          />
          <View style={styles.optionButtons}>
            {[1, 2, 3].map((i) => (
              <Animated.View
                key={i}
                style={[
                  styles.optionButtonSkeleton,
                  { backgroundColor: skeletonColor, opacity },
                ]}
              />
            ))}
          </View>
        </View>

        {/* Quantity Skeleton */}
        <View style={styles.quantityContainer}>
          <Animated.View
            style={[
              styles.quantityLabelSkeleton,
              { backgroundColor: skeletonColor, opacity },
            ]}
          />
          <View style={styles.quantityControls}>
            <Animated.View
              style={[
                styles.quantityButtonSkeleton,
                { backgroundColor: skeletonColor, opacity },
              ]}
            />
            <Animated.View
              style={[
                styles.quantityValueSkeleton,
                { backgroundColor: skeletonColor, opacity },
              ]}
            />
            <Animated.View
              style={[
                styles.quantityButtonSkeleton,
                { backgroundColor: skeletonColor, opacity },
              ]}
            />
          </View>
        </View>

        {/* Add to Cart Button Skeleton */}
        <Animated.View
          style={[
            styles.buttonSkeleton,
            { backgroundColor: skeletonColor, opacity },
          ]}
        />
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  imageContainer: {
    position: "relative",
  },
  imageSkeleton: {
    width: "100%",

```

--------------------------------

### Get Current Cart State

Source: https://docs.medusajs.com/resources/storefront-development/production-optimizations/index.html.md

Retrieves the current cart state from the query cache. It first attempts to fetch the cart with specific fields and falls back to a general cart query if necessary.

```APIDOC
## GET /carts/current

### Description
Retrieves the current cart state from the query cache. This function prioritizes fetching a cart with specific fields and then falls back to a broader cart query if the specific one is not found.

### Method
GET

### Endpoint
/carts/current

### Parameters
#### Query Parameters
- **fields** (string) - Optional - Specifies the fields to retrieve for the cart.

### Request Example
```typescript
import { QueryClient } from '@tanstack/react-query';
import { getCurrentCart } from './cartUtils'; // Assuming cartUtils contains the function

const queryClient = new QueryClient();
const currentCart = getCurrentCart(queryClient);

if (currentCart) {
  console.log('Cart found:', currentCart);
} else {
  console.log('No cart found in cache.');
}
```

### Response
#### Success Response (200)
- **HttpTypes.StoreCart** (object) - The current cart object, including details like items, totals, addresses, etc. Returns `null` if no cart is found in the cache.

#### Response Example
```json
{
  "id": "cart_abc123",
  "items": [
    {
      "id": "item_xyz789",
      "title": "Awesome T-Shirt",
      "quantity": 1,
      "unit_price": 2000,
      "total": 2000,
      "thumbnail": "http://localhost:9000/images/t-shirt.png"
    }
  ],
  "total": 2000,
  "subtotal": 2000,
  "tax_total": 0,
  "shipping_total": 0,
  "shipping_tax_total": 0,
  "shipping_subtotal": 0,
  "original_shipping_total": 0,
  "original_shipping_subtotal": 0,
  "original_shipping_tax_total": 0,
  "shipping_address": null,
  "billing_address": null,
  "shipping_methods": [],
  "payment_collection": null,
  "region": {
    "id": "reg_us",
    "name": "United States",
    "currency_code": "usd"
  },
  "customer_id": null,
  "sales_channel_id": "cscart_default",
  "promotions": [],
  "currency_code": "usd",
  "metadata": {},
  "created_at": "2023-10-27T10:00:00.000Z",
  "updated_at": "2023-10-27T10:00:00.000Z",
  "isOptimistic": false
}
```

#### Error Response (404)
- **null** - Returned if no cart is found in the cache.

#### Error Response Example
```json
null
```
```

--------------------------------

### Retrieve Localized Product via Query Parameter

Source: https://docs.medusajs.com/resources/storefront-development/products/retrieve

Requests a product with a specific locale using a URL query parameter.

```bash
curl "http://localhost:9000/store/products/prod_123?locale=fr-FR" \
-H 'x-publishable-api-key: {your_publishable_api_key}'
```

--------------------------------

### List Regions in React Component

Source: https://docs.medusajs.com/resources/storefront-development/regions/list/index.html.md

Use this React component to fetch and display a list of regions. It utilizes the `useEffect` hook to call the `sdk.store.region.list()` method on component mount. Ensure the JS SDK is installed and configured.

```tsx
"use client" // include with Next.js 13+

import { useEffect, useState } from "react"
import { HttpTypes } from "@medusajs/types"
import { sdk } from "@/lib/sdk"

export default function Regions() {
  const [loading, setLoading] = useState(true)
  const [regions, setRegions] = useState<
    HttpTypes.StoreRegion[]
  >([])

  useEffect(() => {
    if (!loading) {
      return 
    }

    sdk.store.region.list()
    .then(({ regions: dataRegions }) => {
      setRegions(dataRegions)
      setLoading(false)
    })
  }, [loading])

  return (
    <div>
      {loading && <span>Loading...</span>}
      {!loading && regions.length === 0 && <span>No regions found.</span>}
      {!loading && regions.length > 0 && (
        <ul>
          {regions.map((region) => (
            <li key={region.id}>{region.name}</li>
          ))}
        </ul>
      )}
    </div>
  )
}
```

--------------------------------

### Integrate CustomerProvider in Next.js Layout

Source: https://docs.medusajs.com/resources/storefront-development/customers/context/index.html.md

Wrap your application with `CustomerProvider` to make customer context available. This example shows integration within a Next.js `app/layout.tsx` file, ensuring it's placed high in the component tree.

```tsx
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { CartProvider } from "@/providers/cart"
import { RegionProvider } from "@/providers/region"
import { CustomerProvider } from "@/providers/customer"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <RegionProvider>
          <CustomerProvider>
            {/* Other providers... */}
            <CartProvider>
              {children}
            </CartProvider>
          </CustomerProvider>
        </RegionProvider>
      </body>
    </html>
  )
}
```

--------------------------------

### Implement Google Callback Page Component

Source: https://docs.medusajs.com/resources/storefront-development/customers/third-party-login/index.html.md

Create the storefront page component to handle the redirect from Google and validate the authentication callback.

```tsx
"use client" // include with Next.js 13+

import { HttpTypes } from "@medusajs/types"
import { useEffect, useMemo, useState } from "react"
import { decodeToken } from "react-jwt"
import { sdk } from "@/lib/sdk"

export default function GoogleCallback() {
  const [loading, setLoading] = useState(true)
  const [customer, setCustomer] = useState<HttpTypes.StoreCustomer>()
  // for other than Next.js
  const queryParams = useMemo(() => {
    const searchParams = new URLSearchParams(window.location.search)
    return Object.fromEntries(searchParams.entries())
  }, [])

  const sendCallback = async () => {
    let token = ""

    try {
      token = await sdk.auth.callback(
        "customer", 
        "google", 
        // pass all query parameters received from the
        // third party provider
        queryParams
      )
    } catch (error) {
      alert("Authentication Failed")
      
      throw error
    }

    return token
  }

  // TODO add more functions

  return (
    <div>
      {loading && <span>Loading...</span>}
      {customer && <span>Created customer {customer.email} with Google.</span>}
    </div>
  )
}
```

```ts
import { decodeToken } from "react-jwt"

// ...

const searchParams = new URLSearchParams(window.location.search)
const queryParams = Object.fromEntries(searchParams.entries())

const sendCallback = async () => {
  let token = ""

  try {
    token = await sdk.auth.callback(
      "customer", 
      "google", 
      // pass all query parameters received from the
      // third party provider
      queryParams
    )
  } catch (error) {
    alert("Authentication Failed")
    
    throw error
  }

  return token
}

// TODO add more functions...
```

--------------------------------

### Handle Payment Provider Selection and Initiate Session

Source: https://docs.medusajs.com/resources/storefront-development/guides/express-checkout

Implement logic to handle the user's selected payment provider. This involves updating the cart with the selection and initiating the payment session using the SDK. Memoized variables are used to optimize UI rendering and determine order placement eligibility.

```typescript
const handleSelectProvider = async () => {
  if (!selectedPaymentProvider || !cart) {
    return
  }

  setLoading(true)

  sdk.store.payment.initiatePaymentSession(cart, {
    provider_id: selectedPaymentProvider,
  })
    .then(() => {
      setLoading(false)
    })
}

useEffect(() => {
  if (!selectedPaymentProvider || !cart) {
    return
  }

  handleSelectProvider()
}, [selectedPaymentProvider])

const paymentUi = useMemo(() => {
  if (!selectedPaymentProvider) {
    return
  }

  switch (selectedPaymentProvider) {
    // TODO handle other providers
    default:
      return <></>
  }
}, [selectedPaymentProvider])

const canPlaceOrder = useMemo(() => {
  switch (selectedPaymentProvider) {
    case "":
      return false
    // TODO handle other providers
    default:
      return true
  }
}, [selectedPaymentProvider])

// TODO handle place order
```
Tokens:
Raw