@shopify/shop-minis-react/src/utils/merchant-card.ts

React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)

import {type Shop, type BrandSettings} from '@shopify/shop-minis-platform'

export type ExtractedBrandTheme =
  | {
      type: 'coverImage'
      coverImageUrl: string
      coverImageThumbhash?: string
      backgroundColor: string
    }
  | {
      type: 'brandColor'
      backgroundColor: string
    }
  | {
      type: 'logoColor'
      backgroundColor: string
    }
  | {
      type: 'default'
      backgroundColor: string
    }

export function formatReviewCount(count: number): string {
  if (count >= 1000000) {
    return `${Math.floor(count / 100000) / 10}M`
  }
  if (count >= 1000) {
    return `${Math.floor(count / 1000)}K`
  }
  return count.toString()
}

export function normalizeRating(rating: number): number {
  return Math.round(rating * 10) / 10
}

export function extractBrandTheme(
  brandSettings?: BrandSettings | null
): ExtractedBrandTheme {
  if (!brandSettings) {
    return {
      type: 'default',
      backgroundColor: 'white',
    }
  }

  if (brandSettings.headerTheme) {
    const coverImageUrl =
      brandSettings.headerTheme.coverImage?.url ??
      brandSettings.headerTheme.thumbnailImage?.url
    const coverImageThumbhash =
      brandSettings.headerTheme.coverImage?.thumbhash ??
      brandSettings.headerTheme.thumbnailImage?.thumbhash ??
      undefined
    const coverImageColor = brandSettings.colors?.coverDominant

    if (coverImageUrl && coverImageColor) {
      return {
        type: 'coverImage',
        coverImageUrl,
        coverImageThumbhash,
        backgroundColor: coverImageColor,
      }
    }
  }

  if (brandSettings.colors?.primary) {
    return {
      type: 'brandColor',
      backgroundColor: brandSettings.colors.primary,
    }
  }

  if (brandSettings.colors?.logoDominant) {
    return {
      type: 'logoColor',
      backgroundColor: brandSettings.colors.logoDominant,
    }
  }

  return {
    type: 'default',
    backgroundColor: 'white',
  }
}

export function getFeaturedImages(visualTheme: Shop['visualTheme'], limit = 4) {
  const images = visualTheme?.featuredImages.slice(0, limit)

  if (!images) {
    return []
  }

  if (images.length === 3) {
    return visualTheme?.featuredImages.slice(0, 2)
  }

  return images
}