@pradip1995/commerce-core 1.0.0

package/src/hooks/use-product-actions.ts

@@ -0,0 +1,190 @@
+"use client"
+
+import { useCallback, useMemo, useState } from "react"
+import { useParams } from "next/navigation"
+import { HttpTypes } from "@medusajs/types"
+import { addToCart, buyNow, updateLineItem, deleteLineItem } from "@core/data/cart"
+import { trackAddToCart } from "@core/analytics/ga4-ecommerce"
+import {
+  type ProductOptions,
+  isVariantInStock,
+  getInventoryLimit,
+  getVariantCartItem,
+} from "@core/domain/product/variant-selection"
+import { type VariantPrice } from "@core/domain/product/pricing"
+
+type UseProductActionsOptions = {
+  product: HttpTypes.StoreProduct
+  region?: HttpTypes.StoreRegion
+  cart?: HttpTypes.StoreCart | null
+  selectedVariant?: HttpTypes.StoreProductVariant
+  options: ProductOptions
+  isValidVariant: boolean
+  displayPrice: VariantPrice | null
+  validateOptions: () => boolean
+}
+
+export function useProductActions({
+  product,
+  region,
+  cart,
+  selectedVariant,
+  options,
+  isValidVariant,
+  displayPrice,
+  validateOptions,
+}: UseProductActionsOptions) {
+  const { countryCode } = useParams() as { countryCode: string }
+  const [isAdding, setIsAdding] = useState(false)
+  const [isBuyingNow, setIsBuyingNow] = useState(false)
+  const [quantity, setQuantity] = useState(1)
+
+  const variantInCart = useMemo(
+    () => getVariantCartItem(cart, selectedVariant?.id),
+    [cart, selectedVariant?.id]
+  )
+
+  const quantityInCart = useMemo(() => variantInCart?.quantity || 0, [variantInCart])
+
+  const inStock = useMemo(
+    () => isVariantInStock(selectedVariant, product, quantity, quantityInCart),
+    [selectedVariant, product, quantity, quantityInCart]
+  )
+
+  const inventoryLimit = useMemo(
+    () => getInventoryLimit(selectedVariant, quantityInCart),
+    [selectedVariant, quantityInCart]
+  )
+
+  const trackCartAdd = useCallback(() => {
+    if (!selectedVariant?.id) {
+      return
+    }
+
+    const currency = region?.currency_code?.toUpperCase() ?? "USD"
+    const unitPrice = displayPrice?.calculated_price_number ?? 0
+    const value = (unitPrice * quantity) / 100
+
+    trackAddToCart({
+      currency,
+      value,
+      items: [
+        {
+          item_id: selectedVariant.id,
+          item_name: product.title ?? "",
+          price: unitPrice / 100,
+          quantity,
+          item_variant: selectedVariant.title ?? undefined,
+        },
+      ],
+    })
+  }, [selectedVariant, region, displayPrice, quantity, product.title])
+
+  const handleAddToCart = useCallback(async () => {
+    if (!validateOptions()) {
+      return null
+    }
+
+    if (!selectedVariant?.id) {
+      return null
+    }
+
+    setIsAdding(true)
+
+    try {
+      await addToCart({
+        variantId: selectedVariant.id,
+        quantity,
+        countryCode,
+      })
+      trackCartAdd()
+    } finally {
+      setIsAdding(false)
+    }
+  }, [validateOptions, selectedVariant, quantity, countryCode, trackCartAdd])
+
+  const handleBuyNow = useCallback(async () => {
+    if (!validateOptions()) {
+      return null
+    }
+
+    if (!selectedVariant?.id) {
+      return null
+    }
+
+    setIsBuyingNow(true)
+
+    try {
+      await buyNow({
+        variantId: selectedVariant.id,
+        quantity,
+        countryCode,
+      })
+    } catch (e) {
+      console.error(e)
+    } finally {
+      setIsBuyingNow(false)
+    }
+  }, [validateOptions, selectedVariant, quantity, countryCode])
+
+  const handleIncreaseQuantity = useCallback(async () => {
+    if (!variantInCart || isAdding) {
+      return
+    }
+
+    setIsAdding(true)
+    try {
+      await updateLineItem({
+        lineId: variantInCart.id,
+        quantity: variantInCart.quantity + 1,
+      })
+    } catch (e) {
+      console.error(e)
+    } finally {
+      setIsAdding(false)
+    }
+  }, [variantInCart, isAdding])
+
+  const handleDecreaseQuantity = useCallback(async () => {
+    if (!variantInCart || isAdding) {
+      return
+    }
+
+    setIsAdding(true)
+    try {
+      if (variantInCart.quantity > 1) {
+        await updateLineItem({
+          lineId: variantInCart.id,
+          quantity: variantInCart.quantity - 1,
+        })
+      } else {
+        await deleteLineItem(variantInCart.id)
+      }
+    } catch (e) {
+      console.error(e)
+    } finally {
+      setIsAdding(false)
+    }
+  }, [variantInCart, isAdding])
+
+  const canAddToCart = useMemo(() => {
+    const allOptionsSelected = product.options?.every((opt) => options[opt.id])
+    return inStock && isValidVariant && (!product.options?.length || allOptionsSelected)
+  }, [inStock, isValidVariant, product.options, options])
+
+  return {
+    quantity,
+    setQuantity,
+    isAdding,
+    isBuyingNow,
+    variantInCart,
+    quantityInCart,
+    inStock,
+    inventoryLimit,
+    handleAddToCart,
+    handleBuyNow,
+    handleIncreaseQuantity,
+    handleDecreaseQuantity,
+    canAddToCart,
+  }
+}

package/src/hooks/use-product-reviews.ts

@@ -0,0 +1,18 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { fetchReviewsForProduct } from "@core/data/reviews"
+
+export function useProductReviews(productId: string | undefined) {
+  const [reviews, setReviews] = useState<unknown[]>([])
+
+  useEffect(() => {
+    if (!productId) return
+
+    fetchReviewsForProduct(productId)
+      .then(setReviews)
+      .catch(() => setReviews([]))
+  }, [productId])
+
+  return reviews
+}

package/src/hooks/use-product-variant.ts

@@ -0,0 +1,142 @@
+"use client"
+
+import { useEffect, useMemo, useState, useCallback } from "react"
+import { usePathname, useSearchParams } from "next/navigation"
+import { HttpTypes } from "@medusajs/types"
+import {
+  type ProductOptions,
+  getInitialOptions,
+  findVariantByOptions,
+  isValidVariantSelection,
+  findColorOption,
+  findSizeOption,
+  getUniqueColorVariants,
+  getOtherOptions,
+  getMissingOptionIds,
+} from "@core/domain/product/variant-selection"
+import { useProductContext } from "@modules/products/context/product-context"
+
+type UseProductVariantOptions = {
+  product: HttpTypes.StoreProduct
+}
+
+export function useProductVariant({ product }: UseProductVariantOptions) {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const { setSelectedVariantId, setSelectedOptions } = useProductContext()
+
+  const [options, setOptions] = useState<ProductOptions>(() =>
+    getInitialOptions(product, searchParams.get("v_id"))
+  )
+  const [validationErrors, setValidationErrors] = useState<Record<string, boolean>>({})
+
+  useEffect(() => {
+    const variantIdFromUrl = searchParams.get("v_id")
+    if (variantIdFromUrl && product.variants) {
+      const variantFromUrl = product.variants.find((v) => v.id === variantIdFromUrl)
+      if (variantFromUrl) {
+        setOptions(getInitialOptions(product, variantIdFromUrl))
+      }
+    }
+  }, [product, searchParams])
+
+  const selectedVariant = useMemo(
+    () => findVariantByOptions(product, options),
+    [product, options]
+  )
+
+  const isValidVariant = useMemo(
+    () => isValidVariantSelection(product, options),
+    [product, options]
+  )
+
+  useEffect(() => {
+    setSelectedOptions(options)
+  }, [options, setSelectedOptions])
+
+  const setOptionValue = useCallback((optionId: string, value: string) => {
+    setOptions((prev) => ({
+      ...prev,
+      [optionId]: value,
+    }))
+    setValidationErrors((prev) => ({
+      ...prev,
+      [optionId]: false,
+    }))
+  }, [])
+
+  const setColorValue = useCallback((colorOptionId: string, value: string) => {
+    setOptions((prev) => ({
+      ...prev,
+      [colorOptionId]: value,
+    }))
+    setValidationErrors((prev) => ({
+      ...prev,
+      [colorOptionId]: false,
+    }))
+  }, [])
+
+  const validateOptions = useCallback(() => {
+    const missing = getMissingOptionIds(product, options)
+    if (Object.keys(missing).length > 0) {
+      setValidationErrors(missing)
+      return false
+    }
+    return true
+  }, [product, options])
+
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams.toString())
+    const value = isValidVariant ? selectedVariant?.id : undefined
+
+    setSelectedVariantId(value)
+
+    if (params.get("v_id") === value) {
+      return
+    }
+
+    if (value) {
+      params.set("v_id", value)
+    } else {
+      params.delete("v_id")
+    }
+
+    const newUrl = pathname + "?" + params.toString()
+    window.history.replaceState(null, "", newUrl)
+  }, [selectedVariant, isValidVariant, pathname, searchParams, setSelectedVariantId])
+
+  const colorOption = useMemo(() => findColorOption(product), [product])
+  const sizeOption = useMemo(() => findSizeOption(product), [product])
+  const otherOptions = useMemo(() => getOtherOptions(product), [product])
+
+  const colorVariants = useMemo(() => {
+    if (!colorOption) {
+      return []
+    }
+    return getUniqueColorVariants(product, colorOption)
+  }, [product, colorOption])
+
+  const selectedColorValue = useMemo(() => {
+    if (!colorOption) {
+      return null
+    }
+    return options[colorOption.id]
+  }, [options, colorOption])
+
+  return {
+    options,
+    setOptions,
+    setOptionValue,
+    setColorValue,
+    selectedVariant,
+    isValidVariant,
+    validationErrors,
+    setValidationErrors,
+    validateOptions,
+    colorOption,
+    sizeOption,
+    otherOptions,
+    colorVariants,
+    selectedColorValue,
+  }
+}

package/src/hooks/use-server-action.ts

@@ -0,0 +1,30 @@
+"use client"
+
+import { useCallback, useState, useTransition } from "react"
+
+type ServerAction<TInput, TOutput> = (input: TInput) => Promise<TOutput> | TOutput
+
+export function useServerAction<TInput, TOutput>(
+  action: ServerAction<TInput, TOutput>
+) {
+  const [isPending, startTransition] = useTransition()
+  const [error, setError] = useState<Error | null>(null)
+  const [result, setResult] = useState<TOutput | null>(null)
+
+  const execute = useCallback(
+    (input: TInput) => {
+      setError(null)
+      startTransition(async () => {
+        try {
+          const output = await action(input)
+          setResult(output)
+        } catch (err) {
+          setError(err instanceof Error ? err : new Error(String(err)))
+        }
+      })
+    },
+    [action]
+  )
+
+  return { execute, isPending, error, result }
+}

package/src/hooks/use-toggle-state.tsx

@@ -0,0 +1,46 @@
+import { useState } from "react"
+
+export type StateType = [boolean, () => void, () => void, () => void] & {
+  state: boolean
+  open: () => void
+  close: () => void
+  toggle: () => void
+}
+
+/**
+ *
+ * @param initialState - boolean
+ * @returns An array like object with `state`, `open`, `close`, and `toggle` properties
+ *  to allow both object and array destructuring
+ *
+ * ```
+ *  const [showModal, openModal, closeModal, toggleModal] = useToggleState()
+ *  // or
+ *  const { state, open, close, toggle } = useToggleState()
+ * ```
+ */
+
+const useToggleState = (initialState = false) => {
+  const [state, setState] = useState<boolean>(initialState)
+
+  const close = () => {
+    setState(false)
+  }
+
+  const open = () => {
+    setState(true)
+  }
+
+  const toggle = () => {
+    setState((state) => !state)
+  }
+
+  const hookData = [state, open, close, toggle] as StateType
+  hookData.state = state
+  hookData.open = open
+  hookData.close = close
+  hookData.toggle = toggle
+  return hookData
+}
+
+export default useToggleState

package/src/hooks/use-wishlist.ts

@@ -0,0 +1,3 @@
+"use client"
+
+export { useWishlist } from "@core/context/wishlist-context"

package/src/theme/inline-vars.ts

@@ -0,0 +1,12 @@
+/** CSS variable references for inline styles (maps to active theme.css). */
+export const themeColors = {
+  brandAccent: "var(--color-brand-accent)",
+  brandAccentHover: "var(--color-brand-accent-hover)",
+  brandAccentMuted: "var(--color-brand-accent-muted)",
+  brandAccentBorder: "var(--color-brand-accent-border)",
+  border: "var(--color-border)",
+  surface: "var(--color-surface)",
+  pageBg: "var(--color-page-bg)",
+  textHeading: "var(--color-text-heading)",
+  textInverse: "var(--color-text-inverse)",
+} as const

package/src/types/account.ts

@@ -0,0 +1,21 @@
+export type AccountPageData = {
+  countryCode: string
+}
+
+export enum LOGIN_VIEW {
+  SIGN_IN = "sign-in",
+  REGISTER = "register",
+  FORGOT_PASSWORD = "forgot-password",
+}
+
+export type LoginSlotProps = {
+  setCurrentView: (view: LOGIN_VIEW) => void
+}
+
+export type RegisterSlotProps = {
+  setCurrentView: (view: LOGIN_VIEW) => void
+}
+
+export type ForgotPasswordSlotProps = {
+  setCurrentView: (view: LOGIN_VIEW) => void
+}

package/src/types/cart.ts

@@ -0,0 +1,13 @@
+import { HttpTypes } from "@medusajs/types"
+
+export type AbandonedCartsData = {
+  buyNowCarts: HttpTypes.StoreCart[]
+  reorderCarts: HttpTypes.StoreCart[]
+}
+
+export type CartPageData = {
+  cart: HttpTypes.StoreCart | null
+  customer: HttpTypes.StoreCustomer | null
+  countryCode: string
+  abandonedCarts: AbandonedCartsData
+}

package/src/types/home.ts

@@ -0,0 +1,52 @@
+import { HttpTypes } from "@medusajs/types"
+
+export type BannerData = {
+  image: string
+  title: string
+  subtitle: string
+  description: string
+  buttonName: string
+  buttonLink: string
+}
+
+export type HeroBlockData = {
+  homeBanner: BannerData
+  appBanner: BannerData
+}
+
+export type WhyChooseUsBlockData = {
+  title: string
+  features: Array<{ name: string; icon: string }>
+}
+
+export type TestimonialsBlockData = {
+  initialData: {
+    title: string
+    testimonials: Array<{
+      id: string
+      text: string
+      name: string
+      rating: number
+      avatar?: string
+    }>
+  } | null
+}
+
+export type HomePageData = {
+  hero: HeroBlockData
+  shopByAge: { collections: HttpTypes.StoreCollection[] }
+  shopByCategory: { categories: HttpTypes.StoreProductCategory[] }
+  whyChooseUs: WhyChooseUsBlockData
+  newArrivals: {
+    products: HttpTypes.StoreProduct[]
+    region: HttpTypes.StoreRegion
+    ratings: unknown[]
+  }
+  lovedByMoms: {
+    products: HttpTypes.StoreProduct[]
+    region: HttpTypes.StoreRegion
+    ratings: unknown[]
+  }
+  testimonials: TestimonialsBlockData
+  features: Record<string, never>
+}

package/src/types/layout.ts

@@ -0,0 +1,29 @@
+import { HttpTypes, StoreRegion } from "@medusajs/types"
+import { StoreCartShippingOption } from "@medusajs/types"
+
+export type NavSlotData = {
+  regions: StoreRegion[]
+  currentLocale: string
+  customer: HttpTypes.StoreCustomer | null
+}
+
+export type PromoBarSlotData = {
+  text: string
+  code: string
+  value: string
+  active: boolean
+}
+
+export type FooterSlotData = {
+  categories: HttpTypes.StoreProductCategory[]
+  socialLinks: Array<{ name: string; url: string; icon: string | null }>
+}
+
+export type MainLayoutData = {
+  customer: HttpTypes.StoreCustomer | null
+  cart: HttpTypes.StoreCart | null
+  shippingOptions: StoreCartShippingOption[]
+  nav: NavSlotData
+  promoBar: PromoBarSlotData
+  footer: FooterSlotData
+}

package/src/types/product-card.ts

@@ -0,0 +1,17 @@
+import type { HttpTypes } from "@medusajs/types"
+
+export type ProductCardRating = {
+  product_id: string
+  average_rating: number
+  total_reviews: number
+}
+
+/** Shared props contract for theme ProductCard slots. */
+export type ProductCardProps = {
+  product: HttpTypes.StoreProduct
+  region: HttpTypes.StoreRegion
+  rating?: ProductCardRating
+  isFeatured?: boolean
+  wishlistProductIds?: string[] | null
+  className?: string
+}

package/src/util/compare-addresses.ts

@@ -0,0 +1,28 @@
+import { isEqual, pick } from "lodash"
+
+export default function compareAddresses(address1: any, address2: any) {
+  return isEqual(
+    pick(address1, [
+      "first_name",
+      "last_name",
+      "address_1",
+      "company",
+      "postal_code",
+      "city",
+      "country_code",
+      "province",
+      "phone",
+    ]),
+    pick(address2, [
+      "first_name",
+      "last_name",
+      "address_1",
+      "company",
+      "postal_code",
+      "city",
+      "country_code",
+      "province",
+      "phone",
+    ])
+  )
+}

package/src/util/env.ts

@@ -0,0 +1,3 @@
+export const getBaseURL = () => {
+  return process.env.NEXT_PUBLIC_BASE_URL || "https://localhost:8000"
+}

package/src/util/get-locale-header.ts

@@ -0,0 +1,8 @@
+import { getLocale } from "@core/data/locale-actions"
+
+export async function getLocaleHeader() {
+  const locale = await getLocale()
+  return {
+    "x-medusa-locale": locale,
+  } as const
+}

package/src/util/get-percentage-diff.ts

@@ -0,0 +1,6 @@
+export const getPercentageDiff = (original: number, calculated: number) => {
+  const diff = original - calculated
+  const decrease = (diff / original) * 100
+
+  return decrease.toFixed()
+}