@shopify/shop-minis-cli 0.0.121 → 0.0.122

package/package.json

@@ -4,7 +4,7 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org/"
   },
-  "version": "0.0.121",
+  "version": "0.0.122",
   "description": "Shop Minis CLI",
   "main": "build/index.js",
   "bin": {

package/shipit.snapshot.yml

@@ -0,0 +1,9 @@
+dependencies:
+  override:
+    - yarn install --no-progress --ignore-engines --frozen-lockfile
+
+deploy:
+  override:
+    - yarn build
+    - generate-local-npmrc "@shopify:registry=https://registry.npmjs.org/"
+    - npm publish --tag snapshot --new-version 0.0.0-snapshot.$(date +%Y%m%d%H%M%S) --no-git-tag-version --access public --verbose

package/templates/__template_shoppable_posts/src/App.tsx

@@ -1,52 +1,37 @@
 import {useMemo} from 'react'
 import {StatusBar} from 'react-native'
 import {
-  ImageCollectionV2EntryPointItem,
   ShoppablePosts,
   useMinisParams,
-  imageCollectionV2EntrypointFixture,
   MINIS_SANDBOX_SHOP_GID,
   SafeAreaView,
   Box,
+  shoppablePostsFixture,
 } from '@shopify/shop-minis-platform-sdk'
 
-export function App() {
-  const {entryPointParams, entryPoint: _entryPoint} = useMinisParams()
+/**
+ * A stub type to get you started. Remove this in favor of the type of your extension input query data moving forward.
+ */
+interface MyExtensionDataType {
+  shopId: string
+}
 
-  // Fixtures provided in the SDK will get you started without entrypoints.
-  // Remove them once you have you have your test store setup with your own entrypoints.
-  const entryPoint = _entryPoint || imageCollectionV2EntrypointFixture
-  const shopGID = entryPointParams?.shopGID || MINIS_SANDBOX_SHOP_GID
+export function App() {
+  const {extensionData} = useMinisParams<MyExtensionDataType>()
+  const shopId = extensionData?.shopId || MINIS_SANDBOX_SHOP_GID
 
   const shoppablePosts = useMemo(() => {
-    const collectionItems =
-      entryPoint?.type === 'IMAGE_COLLECTION_V2'
-        ? entryPoint.collectionItems
-        : []
-    return mapEntryPointCollectionItemsToShoppablePosts(collectionItems)
-  }, [entryPoint])
+    // Format your data in to the shape expected by `<ShoppablePosts />`
+    // return getShoppablePostsFromExtensionData(extensionData)
+    return shoppablePostsFixture
+  }, [])
 
   return (
-    <Box backgroundColor="backgrounds-regular" flex={1}>
-      <StatusBar barStyle="dark-content" />
+    <Box backgroundColor="foregrounds-contrasting-inverted" flex={1}>
+      <StatusBar barStyle="light-content" />
       <SafeAreaView style={{flex: 1}}>
-        <ShoppablePosts initialItems={shoppablePosts} shopId={shopGID} />
+        <ShoppablePosts initialItems={shoppablePosts} shopId={shopId} />
       </SafeAreaView>
     </Box>
   )
 }
-
-function mapEntryPointCollectionItemsToShoppablePosts(
-  collectionItems: ImageCollectionV2EntryPointItem[]
-) {
-  return collectionItems.map(item => {
-    const {relatedProducts: _relatedProducts, ...rest} = item
-    return {
-      ...rest,
-      image: {url: item.image.url},
-      relatedProductsIds: item.relatedProducts.map(
-        relatedProduct => relatedProduct.productId
-      ),
-    }
-  })
-}

package/templates/__template_shoppable_videos/src/App.tsx

@@ -2,46 +2,33 @@ import {useMemo} from 'react'
 import {StatusBar} from 'react-native'
 import {
   ShoppableVideos,
-  VideoCollectionV2EntryPointItem,
   useMinisParams,
-  videoCollectionV2EntrypointFixture,
   MINIS_SANDBOX_SHOP_GID,
   Box,
+  shoppableVideosFixture,
 } from '@shopify/shop-minis-platform-sdk'
 
-export function App() {
-  const {entryPointParams, entryPoint: _entryPoint} = useMinisParams()
+/**
+ * A stub type to get you started. Remove this in favor of the type of your extension input query data moving forward.
+ */
+interface MyExtensionDataType {
+  shopId: string
+}
 
-  // Fixtures provided in the SDK will get you started without entrypoints.
-  // Remove them once you have you have your test store setup with your own entrypoints.
-  const entryPoint = _entryPoint || videoCollectionV2EntrypointFixture
-  const shopGID = entryPointParams?.shopGID || MINIS_SANDBOX_SHOP_GID
+export function App() {
+  const {extensionData} = useMinisParams<MyExtensionDataType>()
+  const shopId = extensionData?.shopId || MINIS_SANDBOX_SHOP_GID
 
   const shoppableVideos = useMemo(() => {
-    const collectionItems =
-      entryPoint?.type === 'VIDEO_COLLECTION_V2'
-        ? entryPoint.collectionItems
-        : []
-    return mapEntryPointCollectionItemsToShoppableVideos(collectionItems)
-  }, [entryPoint])
+    // Format your data in to the shape expected by `<ShoppableVideos />`
+    // return getShoppableVideosFromExtensionData(extensionData)
+    return shoppableVideosFixture
+  }, [])
 
   return (
     <Box backgroundColor="foregrounds-contrasting-inverted" flex={1}>
       <StatusBar barStyle="light-content" />
-      <ShoppableVideos items={shoppableVideos} shopId={shopGID} />
+      <ShoppableVideos items={shoppableVideos} shopId={shopId} />
     </Box>
   )
 }
-
-function mapEntryPointCollectionItemsToShoppableVideos(
-  collectionItems: VideoCollectionV2EntryPointItem[]
-) {
-  return collectionItems.map(item => ({
-    externalId: item.externalId,
-    videoUrl: item.video.embeddedUrl,
-    fallbackImageUrl: item.fallbackImage.url,
-    relatedProductsIds: item.relatedProducts.map(
-      relatedProduct => relatedProduct.productId
-    ),
-  }))
-}