medusa-ui-common 2.0.0

package/src/skeletons/components/skeleton-order-confirmed-header/index.tsx

@@ -0,0 +1,14 @@
+const SkeletonOrderConfirmedHeader = () => {
+  return (
+    <div className="flex flex-col gap-y-2 pb-10 animate-pulse">
+      <div className="w-2/5 h-4 bg-gray-100"></div>
+      <div className="w-3/6 h-6 bg-gray-100"></div>
+      <div className="flex gap-x-4">
+        <div className="w-16 h-4 bg-gray-100"></div>
+        <div className="w-12 h-4 bg-gray-100"></div>
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonOrderConfirmedHeader

package/src/skeletons/components/skeleton-order-information/index.tsx

@@ -0,0 +1,36 @@
+import SkeletonCartTotals from "medusa-ui-common/skeletons/components/skeleton-cart-totals"
+
+const SkeletonOrderInformation = () => {
+  return (
+    <div>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 py-10 border-b border-gray-200">
+        <div className="flex flex-col">
+          <div className="w-32 h-4 bg-gray-100 mb-4"></div>
+          <div className="w-2/6 h-3 bg-gray-100"></div>
+          <div className="w-3/6 h-3 bg-gray-100 my-2"></div>
+          <div className="w-1/6 h-3 bg-gray-100"></div>
+        </div>
+        <div className="flex flex-col">
+          <div className="w-32 h-4 bg-gray-100 mb-4"></div>
+          <div className="w-2/6 h-3 bg-gray-100"></div>
+          <div className="w-3/6 h-3 bg-gray-100 my-2"></div>
+          <div className="w-2/6 h-3 bg-gray-100"></div>
+          <div className="w-1/6 h-3 bg-gray-100 mt-2"></div>
+          <div className="w-32 h-4 bg-gray-100 my-4"></div>
+          <div className="w-1/6 h-3 bg-gray-100"></div>
+        </div>
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 py-10">
+        <div className="flex flex-col">
+          <div className="w-32 h-4 bg-gray-100 mb-4"></div>
+          <div className="w-2/6 h-3 bg-gray-100"></div>
+          <div className="w-3/6 h-3 bg-gray-100 my-4"></div>
+        </div>
+
+        <SkeletonCartTotals />
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonOrderInformation

package/src/skeletons/components/skeleton-order-items/index.tsx

@@ -0,0 +1,43 @@
+const SkeletonOrderItems = () => {
+  return (
+    <div className="flex flex-col gap-y-4 py-10 border-y border-gray-200">
+      <div className="grid grid-cols-[122px_1fr] gap-x-4">
+        <div className="w-full aspect-[29/34] bg-gray-100"></div>
+        <div className="flex items-start justify-between">
+          <div className="flex flex-col gap-y-2">
+            <div className="w-48 h-6 bg-gray-100"></div>
+            <div className="w-24 h-4 bg-gray-100"></div>
+            <div className="w-32 h-4 bg-gray-100"></div>
+          </div>
+          <div className="w-32 h-6 bg-gray-100"></div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-[122px_1fr] gap-x-4">
+        <div className="w-full aspect-[29/34] bg-gray-100"></div>
+        <div className="flex items-start justify-between">
+          <div className="flex flex-col gap-y-2">
+            <div className="w-48 h-6 bg-gray-100"></div>
+            <div className="w-24 h-4 bg-gray-100"></div>
+            <div className="w-32 h-4 bg-gray-100"></div>
+          </div>
+          <div className="w-32 h-6 bg-gray-100"></div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-[122px_1fr] gap-x-4">
+        <div className="w-full aspect-[29/34] bg-gray-100"></div>
+        <div className="flex items-start justify-between">
+          <div className="flex flex-col gap-y-2">
+            <div className="w-48 h-6 bg-gray-100"></div>
+            <div className="w-24 h-4 bg-gray-100"></div>
+            <div className="w-32 h-4 bg-gray-100"></div>
+          </div>
+          <div className="w-32 h-6 bg-gray-100"></div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonOrderItems

package/src/skeletons/components/skeleton-order-summary/index.tsx

@@ -0,0 +1,15 @@
+import SkeletonButton from "medusa-ui-common/skeletons/components/skeleton-button"
+import SkeletonCartTotals from "medusa-ui-common/skeletons/components/skeleton-cart-totals"
+
+const SkeletonOrderSummary = () => {
+  return (
+    <div className="grid-cols-1">
+      <SkeletonCartTotals header={false} />
+      <div className="mt-4">
+        <SkeletonButton />
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonOrderSummary

package/src/skeletons/components/skeleton-product-preview/index.tsx

@@ -0,0 +1,15 @@
+import { Container } from "@medusajs/ui"
+
+const SkeletonProductPreview = () => {
+  return (
+    <div className="animate-pulse">
+      <Container className="aspect-[9/16] w-full bg-gray-100 bg-ui-bg-subtle" />
+      <div className="flex justify-between text-base-regular mt-2">
+        <div className="w-2/5 h-6 bg-gray-100"></div>
+        <div className="w-1/5 h-6 bg-gray-100"></div>
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonProductPreview

package/src/skeletons/templates/skeleton-cart-page/index.tsx

@@ -0,0 +1,65 @@
+import { Table } from "@medusajs/ui"
+
+import repeat from "medusa-ui-common/util/repeat"
+import SkeletonCartItem from "medusa-ui-common/skeletons/components/skeleton-cart-item"
+import SkeletonCodeForm from "medusa-ui-common/skeletons/components/skeleton-code-form"
+import SkeletonOrderSummary from "medusa-ui-common/skeletons/components/skeleton-order-summary"
+
+const SkeletonCartPage = () => {
+  return (
+    <div className="py-12">
+      <div className="content-container">
+        <div className="grid grid-cols-1 small:grid-cols-[1fr_360px] gap-x-40">
+          <div className="flex flex-col bg-white p-6 gap-y-6">
+            <div className="bg-white flex items-start justify-between">
+              <div className="flex flex-col gap-y-2">
+                <div className="w-60 h-8 bg-gray-200 animate-pulse" />
+                <div className="w-48 h-6 bg-gray-200 animate-pulse" />
+              </div>
+              <div>
+                <div className="w-14 h-8 bg-gray-200 animate-pulse" />
+              </div>
+            </div>
+            <div>
+              <div className="pb-3 flex items-center">
+                <div className="w-20 h-12 bg-gray-200 animate-pulse" />
+              </div>
+              <Table>
+                <Table.Header className="border-t-0">
+                  <Table.Row>
+                    <Table.HeaderCell className="!pl-0">
+                      <div className="w-10 h-6 bg-gray-200 animate-pulse" />
+                    </Table.HeaderCell>
+                    <Table.HeaderCell></Table.HeaderCell>
+                    <Table.HeaderCell>
+                      <div className="w-16 h-6 bg-gray-200 animate-pulse" />
+                    </Table.HeaderCell>
+                    <Table.HeaderCell>
+                      <div className="w-12 h-6 bg-gray-200 animate-pulse" />
+                    </Table.HeaderCell>
+                    <Table.HeaderCell className="!pr-0">
+                      <div className="flex justify-end">
+                        <div className="w-12 h-6 bg-gray-200 animate-pulse" />
+                      </div>
+                    </Table.HeaderCell>
+                  </Table.Row>
+                </Table.Header>
+                <Table.Body>
+                  {repeat(4).map((index) => (
+                    <SkeletonCartItem key={index} />
+                  ))}
+                </Table.Body>
+              </Table>
+            </div>
+          </div>
+          <div className="flex flex-col gap-y-8">
+            <SkeletonOrderSummary />
+            <SkeletonCodeForm />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonCartPage

package/src/skeletons/templates/skeleton-order-confirmed/index.tsx

@@ -0,0 +1,21 @@
+import SkeletonOrderConfirmedHeader from "medusa-ui-common/skeletons/components/skeleton-order-confirmed-header"
+import SkeletonOrderInformation from "medusa-ui-common/skeletons/components/skeleton-order-information"
+import SkeletonOrderItems from "medusa-ui-common/skeletons/components/skeleton-order-items"
+
+const SkeletonOrderConfirmed = () => {
+  return (
+    <div className="bg-gray-50 py-6 min-h-[calc(100vh-64px)] animate-pulse">
+      <div className="content-container flex justify-center">
+        <div className="max-w-4xl h-full bg-white w-full p-10">
+          <SkeletonOrderConfirmedHeader />
+
+          <SkeletonOrderItems />
+
+          <SkeletonOrderInformation />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonOrderConfirmed

package/src/skeletons/templates/skeleton-product-grid/index.tsx

@@ -0,0 +1,23 @@
+import repeat from "medusa-ui-common/util/repeat"
+import SkeletonProductPreview from "medusa-ui-common/skeletons/components/skeleton-product-preview"
+
+const SkeletonProductGrid = ({
+  numberOfProducts = 8,
+}: {
+  numberOfProducts?: number
+}) => {
+  return (
+    <ul
+      className="grid grid-cols-2 small:grid-cols-3 medium:grid-cols-4 gap-x-6 gap-y-8 flex-1"
+      data-testid="products-list-loader"
+    >
+      {repeat(numberOfProducts).map((index) => (
+        <li key={index}>
+          <SkeletonProductPreview />
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export default SkeletonProductGrid

package/src/skeletons/templates/skeleton-related-products/index.tsx

@@ -0,0 +1,25 @@
+import repeat from "medusa-ui-common/util/repeat"
+import SkeletonProductPreview from "medusa-ui-common/skeletons/components/skeleton-product-preview"
+
+const SkeletonRelatedProducts = () => {
+  return (
+    <div className="product-page-constraint">
+      <div className="flex flex-col gap-8 items-center text-center mb-8">
+        <div className="w-20 h-6 animate-pulse bg-gray-100"></div>
+        <div className="flex flex-col gap-4 items-center text-center mb-16">
+          <div className="w-96 h-10 animate-pulse bg-gray-100"></div>
+          <div className="w-48 h-10 animate-pulse bg-gray-100"></div>
+        </div>
+      </div>
+      <ul className="grid grid-cols-2 small:grid-cols-3 medium:grid-cols-4 gap-x-6 gap-y-8 flex-1">
+        {repeat(3).map((index) => (
+          <li key={index}>
+            <SkeletonProductPreview />
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default SkeletonRelatedProducts

package/src/types/global.ts

@@ -0,0 +1,24 @@
+import { StorePrice } from "@medusajs/types"
+
+export type FeaturedProduct = {
+  id: string
+  title: string
+  handle: string
+  thumbnail?: string
+}
+
+export type VariantPrice = {
+  calculated_price_number: number
+  calculated_price: string
+  original_price_number: number
+  original_price: string
+  currency_code: string
+  price_type: string
+  percentage_diff: string
+}
+
+export type StoreFreeShippingPrice = StorePrice & {
+  target_reached: boolean
+  target_remaining: number
+  remaining_percentage: number
+}

package/src/types/icon.ts

@@ -0,0 +1,6 @@
+import type { SVGAttributes } from "react";
+
+export type IconProps = {
+  color?: string;
+  size?: string | number;
+} & SVGAttributes<SVGElement>;

package/src/util/checkout-dom.ts

@@ -0,0 +1,65 @@
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+export function normalizeCheckoutEmail(email?: string | null): string {
+  return (email ?? "").trim().toLowerCase()
+}
+
+export function isValidCheckoutEmail(email?: string | null): boolean {
+  const normalized = normalizeCheckoutEmail(email)
+  return normalized.length > 0 && EMAIL_PATTERN.test(normalized)
+}
+
+export function readCheckoutAddressFromDom(fallback?: {
+  email?: string | null
+  shipping_address?: Record<string, unknown> | null
+}) {
+  const fullNameInput = document.getElementById("shipping_full_name_field") as HTMLInputElement | null
+  const address1Input = document.getElementById("shipping_address_1_field") as HTMLInputElement | null
+  const companyInput = document.getElementById("shipping_company_field") as HTMLInputElement | null
+  const cityInput = document.getElementById("shipping_city_field") as HTMLInputElement | null
+  const provinceInput = document.getElementById("shipping_province_field") as HTMLInputElement | null
+  const postalInput = document.getElementById("shipping_postal_code_field") as HTMLInputElement | null
+  const phoneInput = document.getElementById("shipping_phone_field_internal") as HTMLInputElement | null
+  const emailInput = document.getElementById("shipping_email_field") as HTMLInputElement | null
+
+  const fullName = fullNameInput?.value?.trim() || ""
+  const [firstName, ...lastNameParts] = fullName.split(/\s+/).filter(Boolean)
+  const lastName = lastNameParts.join(" ") || "."
+
+  const shipping = fallback?.shipping_address ?? {}
+
+  return {
+    email: normalizeCheckoutEmail(emailInput?.value || (fallback?.email as string) || ""),
+    shipping_address: {
+      first_name: firstName || (shipping.first_name as string) || "Visitor",
+      last_name: lastName || (shipping.last_name as string) || "Customer",
+      address_1: address1Input?.value?.trim() || (shipping.address_1 as string) || "",
+      company: companyInput?.value?.trim() || (shipping.company as string) || "",
+      city: cityInput?.value?.trim() || (shipping.city as string) || "",
+      province: provinceInput?.value?.trim() || (shipping.province as string) || "",
+      postal_code: postalInput?.value?.trim() || (shipping.postal_code as string) || "",
+      phone: phoneInput?.value?.trim() || (shipping.phone as string) || "",
+      country_code: (shipping.country_code as string) || "in",
+    },
+  }
+}
+
+export async function syncCheckoutAddressFromDom(fallback?: {
+  email?: string | null
+  shipping_address?: Record<string, unknown> | null
+}) {
+  const payload = readCheckoutAddressFromDom(fallback)
+
+  if (!isValidCheckoutEmail(payload.email)) {
+    throw new Error("Please enter a valid email address before continuing.")
+  }
+
+  const { updateAddressSilently } = await import("medusa-storefront-data/cart")
+  const result = await updateAddressSilently(payload)
+
+  if (result && "success" in result && result.success === false) {
+    throw new Error("Could not save your delivery details. Please check your email and try again.")
+  }
+
+  return payload
+}

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-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()
+}

package/src/util/get-product-price.ts

@@ -0,0 +1,79 @@
+import { HttpTypes } from "@medusajs/types"
+import { getPercentageDiff } from "./get-percentage-diff"
+import { convertToLocale } from "./money"
+
+export const getPricesForVariant = (variant: any) => {
+  if (!variant?.calculated_price?.calculated_amount) {
+    return null
+  }
+
+  return {
+    calculated_price_number: variant.calculated_price.calculated_amount,
+    calculated_price: convertToLocale({
+      amount: variant.calculated_price.calculated_amount,
+      currency_code: variant.calculated_price.currency_code,
+    }),
+    original_price_number: variant.calculated_price.original_amount,
+    original_price: convertToLocale({
+      amount: variant.calculated_price.original_amount,
+      currency_code: variant.calculated_price.currency_code,
+    }),
+    currency_code: variant.calculated_price.currency_code,
+    price_type: variant.calculated_price.calculated_price.price_list_type,
+    percentage_diff: getPercentageDiff(
+      variant.calculated_price.original_amount,
+      variant.calculated_price.calculated_amount
+    ),
+  }
+}
+
+export function getProductPrice({
+  product,
+  variantId,
+}: {
+  product: HttpTypes.StoreProduct
+  variantId?: string
+}) {
+  if (!product || !product.id) {
+    throw new Error("No product provided")
+  }
+
+  const cheapestPrice = () => {
+    if (!product || !product.variants?.length) {
+      return null
+    }
+
+    const cheapestVariant: any = product.variants
+      .filter((v: any) => !!v.calculated_price)
+      .sort((a: any, b: any) => {
+        return (
+          a.calculated_price.calculated_amount -
+          b.calculated_price.calculated_amount
+        )
+      })[0]
+
+    return getPricesForVariant(cheapestVariant)
+  }
+
+  const variantPrice = () => {
+    if (!product || !variantId) {
+      return null
+    }
+
+    const variant: any = product.variants?.find(
+      (v) => v.id === variantId || v.sku === variantId
+    )
+
+    if (!variant) {
+      return null
+    }
+
+    return getPricesForVariant(variant)
+  }
+
+  return {
+    product,
+    cheapestPrice: cheapestPrice(),
+    variantPrice: variantPrice(),
+  }
+}

package/src/util/isEmpty.ts

@@ -0,0 +1,11 @@
+export const isObject = (input: any) => input instanceof Object
+export const isArray = (input: any) => Array.isArray(input)
+export const isEmpty = (input: any) => {
+  return (
+    input === null ||
+    input === undefined ||
+    (isObject(input) && Object.keys(input).length === 0) ||
+    (isArray(input) && (input as any[]).length === 0) ||
+    (typeof input === "string" && input.trim().length === 0)
+  )
+}

package/src/util/money.ts

@@ -0,0 +1,26 @@
+import { isEmpty } from "./isEmpty"
+
+type ConvertToLocaleParams = {
+  amount: number
+  currency_code: string
+  minimumFractionDigits?: number
+  maximumFractionDigits?: number
+  locale?: string
+}
+
+export const convertToLocale = ({
+  amount,
+  currency_code,
+  minimumFractionDigits,
+  maximumFractionDigits,
+  locale = "en-US",
+}: ConvertToLocaleParams) => {
+  return currency_code && !isEmpty(currency_code)
+    ? new Intl.NumberFormat(locale, {
+        style: "currency",
+        currency: currency_code,
+        minimumFractionDigits,
+        maximumFractionDigits,
+      }).format(amount)
+    : amount.toString()
+}

package/src/util/product.ts

@@ -0,0 +1,86 @@
+import { HttpTypes } from "@medusajs/types";
+
+export const isSimpleProduct = (product: HttpTypes.StoreProduct): boolean => {
+    return product.options?.length === 1 && product.options[0].values?.length === 1;
+}
+
+/**
+ * Consistently determines which images to show for a product or a specific variant.
+ * Used on both server and client to prevent flickering during hydration.
+ */
+export function getImagesForVariant(
+    product: HttpTypes.StoreProduct,
+    selectedVariantId?: string
+): HttpTypes.StoreProductImage[] {
+    // 1. If no variant is selected, show general product images
+    if (!selectedVariantId || !product.variants) {
+        return product.images || []
+    }
+
+    // 2. Find the selected variant
+    const variant = product.variants.find((v) => v.id === selectedVariantId)
+
+    // 3. If variant has specific images assigned in the Media section
+    if (variant?.images && variant.images.length > 0) {
+        const variantImages = [...variant.images] as HttpTypes.StoreProductImage[]
+
+        // We want to avoid showing the main product thumbnail in the variant gallery 
+        // if it's already included (Medusa often duplicates it).
+        const productImageUrls = new Set<string>()
+        const productImageIds = new Set<string>()
+
+        if (product.thumbnail) {
+            const cleanThumbnailUrl = product.thumbnail.split('?')[0].toLowerCase().trim()
+            const thumbnailPath = cleanThumbnailUrl.split('/').pop() || ''
+            productImageUrls.add(cleanThumbnailUrl)
+            if (thumbnailPath) {
+                productImageUrls.add(thumbnailPath.toLowerCase())
+            }
+        }
+
+        if (product.images && product.images.length > 0) {
+            product.images.forEach(img => {
+                if (img.url) {
+                    const cleanUrl = img.url.split('?')[0].toLowerCase().trim()
+                    const urlPath = cleanUrl.split('/').pop() || ''
+                    productImageUrls.add(cleanUrl)
+                    if (urlPath) {
+                        productImageUrls.add(urlPath.toLowerCase())
+                    }
+                }
+                if (img.id) {
+                    productImageIds.add(img.id)
+                }
+            })
+        }
+
+        const filteredVariantImages = variantImages.filter(img => {
+            if (!img.url) return false
+
+            const cleanImgUrl = img.url.split('?')[0].toLowerCase().trim()
+            const imgPath = cleanImgUrl.split('/').pop() || ''
+            const imgId = img.id
+
+            const urlMatches = productImageUrls.has(cleanImgUrl) || (imgPath && productImageUrls.has(imgPath.toLowerCase()))
+            const idMatches = imgId && productImageIds.has(imgId)
+
+            return !urlMatches && !idMatches
+        })
+
+        // Return variant-specific images, or fallback to all variant images if filtering cleared everything
+        return filteredVariantImages.length > 0 ? filteredVariantImages : variantImages
+    }
+
+    // 4. Default Fallback: If a specific variant is selected but has NO specific media images,
+    // show the product thumbnail as a single image.
+    if (product.thumbnail) {
+        return [
+            {
+                id: "default-thumb",
+                url: product.thumbnail,
+            } as HttpTypes.StoreProductImage,
+        ]
+    }
+
+    return product.images || []
+}

package/src/util/repeat.ts

@@ -0,0 +1,5 @@
+const repeat = (times: number) => {
+  return Array.from(Array(times).keys())
+}
+
+export default repeat