@shopify/shop-minis-react 0.0.33 → 0.0.35

package/src/components/atoms/{thumbhash-image.tsx → image.tsx}

@@ -1,22 +1,19 @@
+/* eslint-disable jsx-a11y/alt-text */
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import {ImgHTMLAttributes, useCallback, useMemo, memo, useState} from 'react'
 
 import {cn} from '../../lib/utils'
-import {getThumbhashDataURL} from '../../utils/image'
+import {getThumbhashDataURL, getResizedImageUrl} from '../../utils'
 
-type ThumbhashImageProps = ImgHTMLAttributes<HTMLImageElement> & {
-  src: string
-  thumbhash: string
-  alt?: string | null
+type ImageProps = ImgHTMLAttributes<HTMLImageElement> & {
+  src?: string
+  thumbhash?: string | null
   aspectRatio?: number | string
 }
 
-export const ThumbhashImage = memo(function ThumbhashImage(
-  props: ThumbhashImageProps
-) {
+export const Image = memo(function Image(props: ImageProps) {
   const {
     src,
-    alt,
     thumbhash,
     onLoad,
     className,
@@ -27,7 +24,7 @@ export const ThumbhashImage = memo(function ThumbhashImage(
 
   const [isLoaded, setIsLoaded] = useState(false)
 
-  const dataURL = useMemo(
+  const thumbhashDataURL = useMemo(
     () => getThumbhashDataURL(thumbhash ?? undefined),
     [thumbhash]
   )
@@ -40,24 +37,27 @@ export const ThumbhashImage = memo(function ThumbhashImage(
     [onLoad]
   )
 
+  const resizedImageSrc = useMemo(() => getResizedImageUrl(src), [src])
+
   return (
     <div
       className={cn('relative w-full ', className)}
       style={{
         ...style,
         aspectRatio,
-        backgroundImage: dataURL ? `url(${dataURL})` : undefined,
+        backgroundImage: thumbhashDataURL
+          ? `url(${thumbhashDataURL})`
+          : undefined,
         backgroundSize: 'cover',
         backgroundPosition: 'center',
       }}
     >
       <img
         className={cn(
-          'absolute inset-0 w-full h-full opacity-0 object-cover',
+          'absolute inset-0 opacity-0 object-cover',
           isLoaded && 'opacity-100'
         )}
-        src={src}
-        alt={alt}
+        src={resizedImageSrc}
         onLoad={handleLoad}
         {...restProps}
       />

package/src/components/atoms/product-variant-price.test.tsx

@@ -0,0 +1,128 @@
+import {describe, expect, it, vi} from 'vitest'
+
+import {render, screen} from '../../test-utils'
+
+import {ProductVariantPrice} from './product-variant-price'
+
+// Mock formatMoney function
+vi.mock('../../lib/formatMoney', () => ({
+  formatMoney: vi.fn((amount: string, currencyCode: string) => {
+    const numAmount = parseFloat(amount)
+    return currencyCode === 'USD'
+      ? `$${numAmount.toFixed(2)}`
+      : `${currencyCode} ${numAmount.toFixed(2)}`
+  }),
+}))
+
+describe('ProductVariantPrice', () => {
+  it('renders nothing when amount is missing', () => {
+    const {container} = render(
+      <ProductVariantPrice amount="" currencyCode="USD" />
+    )
+
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('renders nothing when currencyCode is missing', () => {
+    const {container} = render(
+      <ProductVariantPrice amount="19.99" currencyCode="" />
+    )
+
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('renders single price when no compare at price', () => {
+    render(<ProductVariantPrice amount="19.99" currencyCode="USD" />)
+
+    const price = screen.getByText('$19.99')
+    expect(price).not.toHaveClass('line-through')
+  })
+
+  it('renders both prices when compare at price is provided and different', () => {
+    render(
+      <ProductVariantPrice
+        amount="19.99"
+        currencyCode="USD"
+        compareAtPriceAmount="29.99"
+      />
+    )
+
+    expect(screen.getByText('$19.99')).toBeInTheDocument()
+    expect(screen.getByText('$29.99')).toBeInTheDocument()
+
+    const compareAtPrice = screen.getByText('$29.99')
+    expect(compareAtPrice).toHaveClass('line-through')
+  })
+
+  it('renders single price when compare at price equals current price', () => {
+    render(
+      <ProductVariantPrice
+        amount="19.99"
+        currencyCode="USD"
+        compareAtPriceAmount="19.99"
+      />
+    )
+
+    const prices = screen.getAllByText('$19.99')
+    expect(prices).toHaveLength(1)
+    expect(prices[0]).not.toHaveClass('line-through')
+  })
+
+  it('handles different currency codes', () => {
+    render(
+      <ProductVariantPrice
+        amount="19.99"
+        currencyCode="EUR"
+        compareAtPriceAmount="29.99"
+        compareAtPriceCurrencyCode="GBP"
+      />
+    )
+
+    expect(screen.getByText('EUR 19.99')).toBeInTheDocument()
+    expect(screen.getByText('GBP 29.99')).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    render(
+      <ProductVariantPrice
+        amount="19.99"
+        currencyCode="USD"
+        className="custom-class"
+      />
+    )
+
+    const container = screen.getByText('$19.99').parentElement
+    expect(container).toHaveClass('custom-class')
+  })
+
+  it('applies custom price classNames', () => {
+    render(
+      <ProductVariantPrice
+        amount="19.99"
+        currencyCode="USD"
+        compareAtPriceAmount="29.99"
+        currentPriceClassName="current-custom"
+        originalPriceClassName="original-custom"
+      />
+    )
+
+    const currentPrice = screen.getByText('$19.99')
+    expect(currentPrice).toHaveClass('current-custom')
+
+    const originalPrice = screen.getByText('$29.99')
+    expect(originalPrice).toHaveClass('original-custom')
+  })
+
+  it('handles string and number amounts', () => {
+    render(
+      <ProductVariantPrice
+        amount={19.99}
+        currencyCode="USD"
+        compareAtPriceAmount={29.99}
+      />
+    )
+
+    expect(screen.getByText('$19.99')).toBeInTheDocument()
+    expect(screen.getByText('$29.99')).toBeInTheDocument()
+  })
+})

package/src/components/atoms/text-input.test.tsx

@@ -0,0 +1,104 @@
+import {describe, expect, it, vi, beforeEach} from 'vitest'
+
+import {useShopActions} from '../../internal/useShopActions'
+import {render, screen, userEvent} from '../../test-utils'
+
+import {TextInput} from './text-input'
+
+vi.mock('../../internal/useShopActions', () => ({
+  useShopActions: vi.fn(() => ({
+    translateContentUp: vi.fn(),
+    translateContentDown: vi.fn(),
+  })),
+}))
+
+describe('TextInput', () => {
+  let mockTranslateContentUp: ReturnType<typeof vi.fn>
+  let mockTranslateContentDown: ReturnType<typeof vi.fn>
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    mockTranslateContentUp = vi.fn()
+    mockTranslateContentDown = vi.fn()
+    ;(useShopActions as ReturnType<typeof vi.fn>).mockReturnValue({
+      translateContentUp: mockTranslateContentUp,
+      translateContentDown: mockTranslateContentDown,
+    })
+  })
+
+  it('forwards all input props correctly', () => {
+    render(
+      <TextInput
+        placeholder="Test input"
+        value="test value"
+        disabled
+        type="email"
+        className="custom-class"
+        id="test-input"
+      />
+    )
+
+    const input = screen.getByPlaceholderText('Test input')
+    expect(input).toHaveValue('test value')
+    expect(input).toBeDisabled()
+    expect(input).toHaveAttribute('type', 'email')
+    expect(input).toHaveClass('custom-class')
+    expect(input).toHaveAttribute('id', 'test-input')
+
+    expect(input).toBeInstanceOf(HTMLInputElement)
+    expect(input.tagName).toBe('INPUT')
+  })
+
+  it('calls translateContentUp on focus', async () => {
+    const user = userEvent.setup()
+
+    render(<TextInput placeholder="Test input" />)
+
+    const input = screen.getByPlaceholderText('Test input')
+
+    await user.click(input)
+
+    expect(mockTranslateContentUp).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls translateContentDown on blur', async () => {
+    const user = userEvent.setup()
+
+    render(<TextInput placeholder="Test input" />)
+
+    const input = screen.getByPlaceholderText('Test input')
+
+    await user.click(input)
+    await user.tab()
+
+    expect(mockTranslateContentDown).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls custom onFocus handler when provided', async () => {
+    const user = userEvent.setup()
+    const customOnFocus = vi.fn()
+
+    render(<TextInput placeholder="Test input" onFocus={customOnFocus} />)
+
+    const input = screen.getByPlaceholderText('Test input')
+    await user.click(input)
+
+    expect(customOnFocus).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls custom onBlur handler when provided', async () => {
+    const user = userEvent.setup()
+    const customOnBlur = vi.fn()
+
+    render(<TextInput placeholder="Test input" onBlur={customOnBlur} />)
+
+    const input = screen.getByPlaceholderText('Test input')
+
+    // Focus first, then blur
+    await user.click(input)
+    await user.tab()
+
+    expect(customOnBlur).toHaveBeenCalledTimes(1)
+  })
+})

package/src/components/atoms/text-input.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+
+import {useKeyboardAvoidingView} from '../../hooks'
+import {Input} from '../ui/input'
+
+function TextInput({...props}: React.ComponentProps<'input'>) {
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const {onBlur, onFocus} = useKeyboardAvoidingView()
+
+  const _onFocus = React.useCallback(
+    (event: React.FocusEvent<HTMLInputElement>) => {
+      onFocus(inputRef)
+      props.onFocus?.(event)
+    },
+    [props, onFocus, inputRef]
+  )
+
+  const _onBlur = React.useCallback(
+    (event: React.FocusEvent<HTMLInputElement>) => {
+      onBlur()
+      props.onBlur?.(event)
+    },
+    [props, onBlur]
+  )
+
+  return (
+    <Input innerRef={inputRef} onFocus={_onFocus} onBlur={_onBlur} {...props} />
+  )
+}
+
+export {TextInput}

package/src/components/commerce/merchant-card.test.tsx

@@ -0,0 +1,261 @@
+import {describe, expect, it, vi, beforeEach, afterEach} from 'vitest'
+
+import {
+  render,
+  screen,
+  userEvent,
+  mockShop,
+  mockMinisSDK,
+  resetAllMocks,
+} from '../../test-utils'
+
+import {
+  MerchantCard,
+  MerchantCardContainer,
+  MerchantCardHeader,
+  MerchantCardInfo,
+  MerchantCardName,
+  MerchantCardRating,
+} from './merchant-card'
+
+// Mock hooks
+vi.mock('../../hooks/navigation/useShopNavigation', () => ({
+  useShopNavigation: () => ({
+    navigateToShop: mockMinisSDK.navigateToShop,
+    navigateToProduct: mockMinisSDK.navigateToProduct,
+  }),
+}))
+
+// Mock utils with simple implementations
+vi.mock('../../utils', () => ({
+  extractBrandTheme: vi.fn(() => ({
+    type: 'default',
+    backgroundColor: 'white',
+  })),
+  getFeaturedImages: vi.fn(() => []),
+  formatReviewCount: vi.fn((count: number) => {
+    if (count >= 1000) return `${(count / 1000).toFixed(1)}k`
+    return count.toString()
+  }),
+  normalizeRating: vi.fn((rating: number) => rating.toFixed(1)),
+}))
+
+vi.mock('../../utils/colors', () => ({
+  isDarkColor: vi.fn(() => false),
+}))
+
+describe('MerchantCard', () => {
+  beforeEach(() => {
+    resetAllMocks()
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('renders with basic shop information', () => {
+      const shop = mockShop()
+      render(<MerchantCard shop={shop} />)
+
+      expect(screen.getByText(shop.name)).toBeInTheDocument()
+      // createShop returns 4.3 rating with 50 reviews
+      expect(screen.getByText('4.3 (50)')).toBeInTheDocument() // Rating and review count
+    })
+
+    it('renders shop logo when available', () => {
+      const shop = mockShop({
+        visualTheme: {
+          logoImage: {
+            url: 'https://example.com/logo.png',
+            altText: 'Shop Logo',
+            sensitive: false,
+          },
+          featuredImages: [],
+          id: '123',
+        },
+      })
+
+      render(<MerchantCard shop={shop} />)
+
+      const logo = screen.getByAltText(`${shop.name} logo`)
+      expect(logo).toBeInTheDocument()
+      expect(logo).toHaveAttribute('src', 'https://example.com/logo.png')
+    })
+
+    it('renders shop initial when logo is not available', () => {
+      const shop = mockShop({
+        name: 'Test Shop',
+        visualTheme: null,
+      })
+
+      render(<MerchantCard shop={shop} />)
+
+      expect(screen.getByText('T')).toBeInTheDocument()
+    })
+
+    it('renders without reviews when not available', () => {
+      const shop = mockShop({
+        reviewAnalytics: {
+          averageRating: null,
+          reviewCount: 0,
+        },
+      })
+
+      render(<MerchantCard shop={shop} />)
+
+      expect(
+        screen.queryByTestId('merchant-card-rating')
+      ).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Interactions', () => {
+    it('handles shop click navigation', async () => {
+      const user = userEvent.setup()
+      const shop = mockShop()
+
+      render(<MerchantCard shop={shop} />)
+
+      const card = screen.getByText(shop.name).closest('div')
+        ?.parentElement?.parentElement
+      await user.click(card!)
+
+      expect(mockMinisSDK.navigateToShop).toHaveBeenCalledWith({
+        shopId: shop.id,
+      })
+    })
+
+    it('does not navigate when touchable is false', async () => {
+      const user = userEvent.setup()
+      const shop = mockShop()
+
+      render(<MerchantCard shop={shop} touchable={false} />)
+
+      const card = screen.getByText(shop.name).closest('div')
+        ?.parentElement?.parentElement
+      await user.click(card!)
+
+      expect(mockMinisSDK.navigateToShop).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Custom Composition', () => {
+    it('renders with custom children layout', () => {
+      const shop = mockShop()
+
+      render(
+        <MerchantCard shop={shop}>
+          <MerchantCardContainer>
+            <div data-testid="custom-layout">
+              <MerchantCardName>Custom Name</MerchantCardName>
+              <MerchantCardRating />
+            </div>
+          </MerchantCardContainer>
+        </MerchantCard>
+      )
+
+      expect(screen.getByTestId('custom-layout')).toBeInTheDocument()
+      expect(screen.getByText('Custom Name')).toBeInTheDocument()
+      // createShop returns 4.3 rating with 50 reviews
+      expect(screen.getByText('4.3 (50)')).toBeInTheDocument()
+    })
+
+    it('allows individual component usage', () => {
+      const shop = mockShop()
+
+      render(
+        <MerchantCard shop={shop}>
+          <MerchantCardContainer>
+            <MerchantCardHeader withLogo />
+            <MerchantCardInfo>
+              <MerchantCardName />
+              <MerchantCardRating />
+            </MerchantCardInfo>
+          </MerchantCardContainer>
+        </MerchantCard>
+      )
+
+      expect(screen.getByText(shop.name)).toBeInTheDocument()
+      // createShop returns 4.3 rating with 50 reviews
+      expect(screen.getByText('4.3 (50)')).toBeInTheDocument()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('handles shop without visual theme', () => {
+      const shop = mockShop({
+        visualTheme: null,
+      })
+
+      render(<MerchantCard shop={shop} />)
+
+      expect(screen.getByText(shop.name)).toBeInTheDocument()
+    })
+
+    it('handles shop with empty name', () => {
+      const shop = mockShop({
+        name: '',
+      })
+
+      render(<MerchantCard shop={shop} />)
+
+      // Should still render with empty name
+      const heading = screen.getByRole('heading', {level: 3})
+      expect(heading).toBeInTheDocument()
+    })
+
+    it('handles very long shop names', () => {
+      const shop = mockShop({
+        name: 'This is a very long shop name that should be truncated in the UI',
+      })
+
+      render(<MerchantCard shop={shop} />)
+
+      const nameElement = screen.getByText(shop.name)
+      expect(nameElement).toHaveClass('truncate')
+    })
+
+    it('handles high review counts', () => {
+      const shop = mockShop({
+        reviewAnalytics: {
+          averageRating: 4.8,
+          reviewCount: 12500,
+        },
+      })
+
+      render(<MerchantCard shop={shop} />)
+
+      expect(screen.getByText('4.8 (12.5k)')).toBeInTheDocument()
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('maintains proper heading hierarchy', () => {
+      const shop = mockShop()
+      render(<MerchantCard shop={shop} />)
+
+      const heading = screen.getByRole('heading', {level: 3})
+      expect(heading).toHaveTextContent(shop.name)
+    })
+
+    it('provides fallback alt text for logo', () => {
+      const shop = mockShop({
+        visualTheme: {
+          logoImage: {
+            url: 'https://example.com/logo.png',
+            altText: null,
+            sensitive: false,
+          },
+          featuredImages: [],
+          id: '123',
+        },
+      })
+
+      render(<MerchantCard shop={shop} />)
+
+      const logo = screen.getByAltText(`${shop.name} logo`)
+      expect(logo).toBeInTheDocument()
+    })
+  })
+})

package/src/components/commerce/merchant-card.tsx

@@ -14,7 +14,7 @@ import {
   normalizeRating,
 } from '../../utils'
 import {isDarkColor} from '../../utils/colors'
-import {ThumbhashImage} from '../atoms/thumbhash-image'
+import {Image} from '../atoms/image'
 import {Touchable} from '../atoms/touchable'
 
 interface MerchantCardContextValue {
@@ -100,7 +100,7 @@ function MerchantCardImage({
 
   if (thumbhash) {
     return (
-      <ThumbhashImage
+      <Image
         data-slot="merchant-card-image"
         src={src}
         alt={alt}
@@ -274,6 +274,8 @@ function MerchantCardDefaultHeader({withLogo = false}: {withLogo?: boolean}) {
         />
       )
     }
+
+    return null
   }
 
   return (