@shopify/shop-minis-react 0.0.24 → 0.0.26

package/src/components/content/content-monitor.tsx

@@ -0,0 +1,23 @@
+// import {useShopActions} from '../../internal/useShopActions'
+import {Touchable} from '../atoms/touchable'
+
+export function ContentMonitor({
+  // publicId,
+  children,
+}: {
+  publicId: string
+  children: React.ReactNode
+}) {
+  // const {showFeedbackSheet} = useShopActions()
+
+  return (
+    <Touchable
+    // TODO: Add long press support to Touchable
+    // onLongPress={() => {
+    //   showFeedbackSheet({publicId})
+    // }}
+    >
+      {children}
+    </Touchable>
+  )
+}

package/src/components/content/content-wrapper.tsx

@@ -0,0 +1,56 @@
+import {useContent} from '../../hooks/content/useContent'
+import {Content} from '../../types'
+
+import {ContentMonitor} from './content-monitor'
+
+interface BaseContentWrapperProps {
+  children: ({
+    content,
+    loading,
+  }: {
+    content?: Content
+    loading: boolean
+  }) => JSX.Element | null
+}
+
+interface PublicIdContentWrapperProps extends BaseContentWrapperProps {
+  publicId: string
+  externalId?: never
+}
+
+interface ExternalIdContentWrapperProps extends BaseContentWrapperProps {
+  externalId: string
+  publicId?: never
+}
+
+type ContentWrapperProps =
+  | PublicIdContentWrapperProps
+  | ExternalIdContentWrapperProps
+
+// It's too messy in the docs to show the complete types here so we show a simplified version
+export interface ContentWrapperPropsForDocs extends BaseContentWrapperProps {
+  publicId?: string
+  externalId?: string
+}
+
+export function ContentWrapper({
+  publicId,
+  externalId,
+  children,
+}: ContentWrapperProps) {
+  const {content, loading} = useContent({
+    identifiers: [{publicId, externalId}],
+  })
+
+  const contentItem = content?.[0]
+
+  if (loading || !contentItem) {
+    return children({loading})
+  }
+
+  return (
+    <ContentMonitor publicId={contentItem.publicId}>
+      {children({content: contentItem, loading})}
+    </ContentMonitor>
+  )
+}

package/src/components/index.ts

@@ -7,6 +7,8 @@ export * from './commerce/product-card-skeleton'
 export * from './commerce/merchant-card-skeleton'
 export * from './commerce/quantity-selector'
 
+export * from './content/content-wrapper'
+
 export * from './navigation/transition-container'
 export * from './navigation/transition-link'
 

package/src/hooks/content/useContent.ts

@@ -0,0 +1,50 @@
+import {useMemo} from 'react'
+
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsDataFetching} from '../../internal/useShopActionsDataFetching'
+import {
+  Content,
+  ContentIdentifierInput,
+  DataHookOptionsBase,
+  DataHookReturnsBase,
+} from '../../types'
+
+export interface UseContentParams extends DataHookOptionsBase {
+  /**
+   * The identifiers of the content to fetch.
+   */
+  identifiers: ContentIdentifierInput | ContentIdentifierInput[]
+}
+
+interface UseContentReturns extends DataHookReturnsBase {
+  /**
+   * The content returned from the query.
+   */
+  content: Content[] | null
+}
+
+export const useContent = (params: UseContentParams): UseContentReturns => {
+  const {getContent} = useShopActions()
+  const {identifiers, skip = false, ...restParams} = params
+
+  const {data, ...rest} = useShopActionsDataFetching(
+    getContent,
+    {
+      identifiers,
+      ...restParams,
+    },
+    {
+      skip,
+      hook: 'useContent',
+    }
+  )
+
+  const content = useMemo(() => {
+    return data ?? null
+  }, [data])
+
+  return {
+    ...rest,
+    content,
+  }
+}

package/src/hooks/content/useCreateImageContent.ts

@@ -0,0 +1,80 @@
+import {useCallback, useState} from 'react'
+
+import {
+  ContentVisibility,
+  Content,
+  ContentCreateUserErrors,
+} from '@shopify/shop-minis-platform'
+
+import {useHandleAction} from '../../internal/useHandleAction'
+import {useShopActions} from '../../internal/useShopActions'
+import {fileToDataUri} from '../../utils'
+import {useImageUpload} from '../storage/useImageUpload'
+
+interface CreateImageContentParams {
+  image: File
+  contentTitle: string
+  visibility?: ContentVisibility[] | null
+}
+
+interface UseCreateImageContentReturns {
+  /**
+   * Upload an image and create content.
+   */
+  createImageContent: (
+    params: CreateImageContentParams
+  ) => Promise<{data: Content; userErrors?: ContentCreateUserErrors[]}>
+  /**
+   * Whether the content is being created.
+   */
+  loading: boolean
+}
+
+export const useCreateImageContent = (): UseCreateImageContentReturns => {
+  const {createContent} = useShopActions()
+  const {uploadImage} = useImageUpload()
+  const [loading, setLoading] = useState(false)
+
+  const createImageContent = useCallback(
+    async (params: CreateImageContentParams) => {
+      setLoading(true)
+
+      const {image, contentTitle, visibility} = params
+
+      if (!image.type) {
+        throw new Error('Unable to determine file type')
+      }
+      if (!image.type.startsWith('image/')) {
+        throw new Error('Invalid file type: must be an image')
+      }
+
+      const [uploadImageResult] = await uploadImage([
+        {
+          mimeType: image.type,
+          uri: await fileToDataUri(image),
+        },
+      ])
+      const uploadImageUrl = uploadImageResult.imageUrl
+
+      if (!uploadImageUrl) {
+        throw new Error('Image upload failed')
+      }
+
+      const createContentResult = await createContent({
+        title: contentTitle,
+        imageUrl: uploadImageUrl,
+        visibility,
+      })
+
+      setLoading(false)
+
+      return createContentResult
+    },
+    [createContent, uploadImage]
+  )
+
+  return {
+    createImageContent: useHandleAction(createImageContent),
+    loading,
+  }
+}

package/src/hooks/index.ts

@@ -39,6 +39,7 @@ export * from './shop/useShopCartActions'
 export * from './shop/useRecommendedShops'
 
 // - Content Hooks
+export * from './content/useCreateImageContent'
 
 // - Utility Hooks
 export * from './util/useErrorToast'

package/src/hooks/storage/useImageUpload.ts

@@ -12,7 +12,7 @@ export interface UploadImageParams {
   /**
    * The size of the image in bytes.
    */
-  fileSize: number
+  fileSize?: number
   /**
    * The URI of the image to upload.
    */
@@ -41,16 +41,29 @@ interface UseImageUploadReturns {
   uploadImage: (params: UploadImageParams[]) => Promise<UploadedImage[]>
 }
 
+// Fetch file data and detect file sizes if not provided
+// Works with file://, data:, and http(s):// URIs
+const processFileData = async (image: UploadImageParams) => {
+  const response = await fetch(image.uri)
+  const blob = await response.blob()
+
+  return {
+    ...image,
+    fileSize: image.fileSize ?? blob.size,
+    fileBlob: blob,
+  }
+}
+
 const uploadFileToGCS = async (
-  image: UploadImageParams,
+  image: UploadImageParams & {fileSize: number; fileBlob: Blob},
   target: UploadTarget
 ) => {
   const formData = new FormData()
   target.parameters.forEach(({name, value}: {name: string; value: string}) => {
     formData.append(name, value)
   })
-  // Append the actual file data last
-  formData.append('file', new Blob([image.uri], {type: image.mimeType}))
+
+  formData.append('file', image.fileBlob)
 
   const uploadResponse = await fetch(target.url, {
     method: 'POST',
@@ -76,11 +89,16 @@ export const useImageUpload = (): UseImageUploadReturns => {
         throw new Error('Multiple image upload is not supported yet')
       }
 
+      const imageParams = params[0]
+      const processedImageParams = await processFileData(imageParams)
+
       const links = await createImageUploadLink({
-        input: params.map(image => ({
-          mimeType: image.mimeType,
-          fileSize: image.fileSize,
-        })),
+        input: [
+          {
+            mimeType: processedImageParams.mimeType,
+            fileSize: processedImageParams.fileSize,
+          },
+        ],
       })
 
       if (!links.ok) {
@@ -88,9 +106,8 @@ export const useImageUpload = (): UseImageUploadReturns => {
       }
 
       // Upload single file to GCS
-      // TODO: Upload multiple files to GCS
       const {error: uploadError} = await uploadFileToGCS(
-        params[0],
+        processedImageParams,
         links?.data?.targets?.[0]!
       )
 
@@ -110,7 +127,6 @@ export const useImageUpload = (): UseImageUploadReturns => {
           throw new Error(result.error.message)
         }
 
-        // TODO: Add support for multiple files
         if (result.data?.files?.[0]?.fileStatus === 'READY') {
           return [
             {

package/src/mocks.ts

@@ -405,6 +405,38 @@ function makeMockActions(): ShopActions {
       pageInfo: createPagination(),
     },
     previewProductInAr: undefined,
+    createContent: {
+      data: {
+        publicId: 'content-123',
+        externalId: null,
+        image: {
+          id: 'img-123',
+          url: 'https://example.com/content-image.jpg',
+          width: 800,
+          height: 600,
+        },
+        title: 'Mock Content',
+        description: 'This is a mock content item',
+        visibility: ['DISCOVERABLE'],
+        shareableUrl: 'https://example.com/content/123',
+        products: null,
+      },
+    },
+    getContent: {
+      data: [
+        {
+          publicId: 'content-123',
+          image: {
+            id: 'img-123',
+            url: 'https://example.com/content-image.jpg',
+            width: 800,
+            height: 600,
+          },
+          title: 'Mock Content',
+          visibility: ['DISCOVERABLE'],
+        },
+      ],
+    },
   } as const
 
   const mock: Partial<ShopActions> = {}

package/src/stories/ProductVariantPrice.stories.tsx

@@ -0,0 +1,73 @@
+import {ProductVariantPrice} from '../components/atoms/product-variant-price'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+type ProductVariantPriceProps = React.ComponentProps<typeof ProductVariantPrice>
+
+const meta = {
+  title: 'Atoms/ProductVariantPrice',
+  component: ProductVariantPrice,
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {
+    amount: {
+      control: 'text',
+    },
+    currencyCode: {
+      control: 'select',
+      options: ['USD', 'CAD', 'EUR', 'GBP', 'JPY'],
+    },
+    compareAtPriceAmount: {
+      control: 'text',
+    },
+    compareAtPriceCurrencyCode: {
+      control: 'select',
+      options: ['USD', 'CAD', 'EUR', 'GBP', 'JPY'],
+    },
+    className: {
+      control: 'text',
+    },
+    currentPriceClassName: {
+      control: 'text',
+    },
+    originalPriceClassName: {
+      control: 'text',
+    },
+    containerClassName: {
+      control: 'text',
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<ProductVariantPriceProps>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    amount: '29.99',
+    currencyCode: 'USD',
+  },
+}
+
+export const WithDiscount: Story = {
+  name: 'With Discount',
+  args: {
+    amount: '24.99',
+    currencyCode: 'USD',
+    compareAtPriceAmount: '39.99',
+  },
+}
+
+export const CustomStyling: Story = {
+  name: 'Custom Styling',
+  args: {
+    amount: '89.99',
+    currencyCode: 'USD',
+    compareAtPriceAmount: '119.99',
+    currentPriceClassName: 'text-2xl font-bold text-green-600',
+    originalPriceClassName: 'text-lg text-red-500 line-through',
+    containerClassName: 'gap-3 p-4 bg-gray-50 rounded-lg',
+  },
+}

package/src/stories/Toaster.stories.tsx

@@ -26,7 +26,7 @@ type Story = StoryObj<typeof meta>
 
 export const SuccessToast: Story = {
   decorators: [
-    Story => (
+    () => (
       <Button onClick={() => toast.success('Success toast!')}>
         Show success Toast
       </Button>
@@ -37,7 +37,7 @@ export const SuccessToast: Story = {
 
 export const ErrorToast: Story = {
   decorators: [
-    Story => (
+    () => (
       <Button onClick={() => toast.error('Error toast!')}>
         Show error Toast
       </Button>

package/src/utils/imageToDataUri.ts

@@ -0,0 +1,8 @@
+export function fileToDataUri(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onloadend = () => resolve(reader.result as string)
+    reader.onerror = reject
+    reader.readAsDataURL(file)
+  })
+}

package/src/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './errors'
 export * from './merchant-card'
 export * from './parseUrl'
+export * from './imageToDataUri'