@shopify/shop-minis-cli 0.0.37 → 0.0.82

package/templates/__template_hello_world/src/fixtures/mocked-products-with-variants.ts

@@ -0,0 +1,274 @@
+const BASE_PRODUCT = {
+  __typename: 'Product',
+  id: 'gid://shopify/Product/7632803594495',
+  title: 'Canvas Shoes',
+  featuredImage: {
+    __typename: 'Image',
+    id: 'gid://shopify/ProductImage/37069008929023',
+    altText: null,
+    url: 'https://cdn.shopify.com/s/files/1/0621/0463/3599/products/mahabis-footwear-dv5AJQJ6ay8-unsplash.jpg?v=1651848310',
+  },
+} as const
+
+const BASE_VARIANT = {
+  __typename: 'ProductVariant',
+  image: {
+    __typename: 'Image',
+    id: 'gid://shopify/ProductImage/39889211949311',
+    altText: null,
+    url: 'https://cdn.shopify.com/s/files/1/0621/0463/3599/files/518DoMlGnHL._AC_SY695._SX._UX._SY._UY.jpg?v=1687945939',
+  },
+  price: {
+    __typename: 'Money',
+    amount: '899.0',
+    currencyCode: 'USD',
+  },
+}
+
+function createVariantForOptions(
+  optionEntries: [optionName: string, optionValue: string][],
+  {currentlyNotInStock = false, availableForSale = true} = {}
+) {
+  return {
+    ...BASE_VARIANT,
+    id: `gid://shopify/ProductVariant/${optionEntries
+      .map(([, value]) => value)
+      .join('')}`,
+    selectedOptions: optionEntries.map(([name, value]) => ({
+      __typename: 'SelectedOption',
+      name,
+      value,
+    })),
+    title: optionEntries.map(([, value]) => value).join(' / '),
+    currentlyNotInStock,
+    availableForSale,
+  }
+}
+
+const BASE_VARIANTS_CONFIG: [string, string][][] = [
+  [
+    ['Size', '43'],
+    ['Color', 'Black'],
+  ],
+  [
+    ['Size', '43'],
+    ['Color', 'Red'],
+  ],
+  [
+    ['Size', '43'],
+    ['Color', 'White'],
+  ],
+  [
+    ['Size', '44'],
+    ['Color', 'Black'],
+  ],
+  [
+    ['Size', '44'],
+    ['Color', 'Red'],
+  ],
+  [
+    ['Size', '44'],
+    ['Color', 'White'],
+  ],
+  [
+    ['Size', '45'],
+    ['Color', 'Black'],
+  ],
+  [
+    ['Size', '45'],
+    ['Color', 'Red'],
+  ],
+  [
+    ['Size', '45'],
+    ['Color', 'White'],
+  ],
+]
+
+const MOCKED_PRODUCT_1_DISABLED_VARIANTS = [
+  ['43', 'Black'],
+  ['44', 'White'],
+  ['44', 'Red'],
+  ['45', 'Red'],
+]
+
+/**
+ * 2 options: size, color
+ *
+ * all variants available except:
+ * variant with size 45 and color white is not available for sale
+ */
+export const MOCKED_PRODUCT_1 = {
+  ...BASE_PRODUCT,
+  options: [
+    {
+      __typename: 'ProductOption',
+      id: 'gid://shopify/ProductOption/9702957383935',
+      name: 'Size',
+      values: [
+        '40',
+        '43',
+        '44',
+        '45',
+        '46',
+        '47',
+        '48',
+        '49',
+        '50',
+        '51',
+        '52',
+        '53',
+        '54',
+        '55',
+      ],
+    },
+    {
+      __typename: 'ProductOption',
+      id: 'gid://shopify/ProductOption/10355959628031',
+      name: 'Color',
+      values: ['Black', 'Red', 'White'],
+    },
+  ],
+  variants: {
+    __typename: 'ProductVariantConnection',
+    nodes: [
+      // Standard options
+      ...BASE_VARIANTS_CONFIG.map(options => createVariantForOptions(options)),
+      // Use many sizes for black
+      createVariantForOptions([
+        ['Size', '55'],
+        ['Color', 'Black'],
+      ]),
+      createVariantForOptions([
+        ['Size', '54'],
+        ['Color', 'Black'],
+      ]),
+      createVariantForOptions([
+        ['Size', '53'],
+        ['Color', 'Black'],
+      ]),
+      createVariantForOptions([
+        ['Size', '52'],
+        ['Color', 'Black'],
+      ]),
+      createVariantForOptions([
+        ['Size', '51'],
+        ['Color', 'Black'],
+      ]),
+      createVariantForOptions([
+        ['Size', '50'],
+        ['Color', 'Black'],
+      ]),
+      createVariantForOptions([
+        ['Size', '49'],
+        ['Color', 'Black'],
+      ]),
+      createVariantForOptions([
+        ['Size', '48'],
+        ['Color', 'Black'],
+      ]),
+      createVariantForOptions([
+        ['Size', '47'],
+        ['Color', 'Black'],
+      ]),
+      createVariantForOptions([
+        ['Size', '46'],
+        ['Color', 'Black'],
+      ]),
+    ].map(variant => {
+      MOCKED_PRODUCT_1_DISABLED_VARIANTS.forEach(variantOptions =>
+        makeVariantNotAvailableForSale(variant, variantOptions)
+      )
+
+      return variant
+    }),
+  },
+  defaultVariant: createVariantForOptions([
+    ['Size', '43'],
+    ['Color', 'White'],
+  ]),
+}
+
+export const MOCKED_PRODUCT_1_DESCRIPTION = `Product with variants by size and color.\n* Sizes >45 only have Black color\n* Not available for sale: ${MOCKED_PRODUCT_1_DISABLED_VARIANTS.join(
+  ' - '
+)}`
+
+const MOCKED_PRODUCT_2_DISABLED_VARIANTS = [
+  ['45', 'Red', 'Warm'],
+  ['44', 'White', 'Cool'],
+  ['43', 'Black', 'Warm'],
+  ['44', 'Red', 'Extra Warm'],
+]
+
+/**
+ * 3 options: size, color and warmth
+ */
+export const MOCKED_PRODUCT_2 = {
+  ...BASE_PRODUCT,
+  options: [
+    {
+      __typename: 'ProductOption',
+      id: 'gid://shopify/ProductOption/9702957383935',
+      name: 'Size',
+      values: ['43', '44', '45'],
+    },
+    {
+      __typename: 'ProductOption',
+      id: 'gid://shopify/ProductOption/10355959628031',
+      name: 'Color',
+      values: ['Black', 'Red', 'White'],
+    },
+    {
+      __typename: 'ProductOption',
+      id: 'gid://shopify/ProductOption/WARMTH',
+      name: 'Warmth',
+      values: ['Cool', 'Warm', 'Extra Warm'],
+    },
+  ],
+  variants: {
+    __typename: 'ProductVariantConnection',
+    nodes: [
+      // Add warmth variants
+      ...BASE_VARIANTS_CONFIG.map(options => [
+        ...options,
+        ['Warmth', 'Cool'],
+      ]).map(options => createVariantForOptions(options as [string, string][])),
+      ...BASE_VARIANTS_CONFIG.map(options => [
+        ...options,
+        ['Warmth', 'Warm'],
+      ]).map(options => createVariantForOptions(options as [string, string][])),
+      ...BASE_VARIANTS_CONFIG.map(options => [
+        ...options,
+        ['Warmth', 'Extra Warm'],
+      ]).map(options => createVariantForOptions(options as [string, string][])),
+    ].map(variant => {
+      // make some variants not available for sale
+      MOCKED_PRODUCT_2_DISABLED_VARIANTS.forEach(variantOptions =>
+        makeVariantNotAvailableForSale(variant, variantOptions)
+      )
+      return variant
+    }),
+  },
+  defaultVariant: createVariantForOptions([
+    ['Size', '43'],
+    ['Color', 'White'],
+    ['Warmth', 'Cool'],
+  ]),
+}
+
+export const MOCKED_PRODUCT_2_DESCRIPTION = `Product with variants by size, color and warmth.\n* Not available for sale: ${MOCKED_PRODUCT_2_DISABLED_VARIANTS.join(
+  ' - '
+)}`
+
+function makeVariantNotAvailableForSale(
+  variant: ReturnType<typeof createVariantForOptions>,
+  optionValues: string[]
+) {
+  if (
+    optionValues.every(optionValue =>
+      variant.selectedOptions.find((opt: any) => opt.value === optionValue)
+    )
+  ) {
+    variant.availableForSale = false
+  }
+  return variant
+}

package/templates/__template_hello_world/src/hooks/useQuizData.ts

@@ -0,0 +1,26 @@
+import {useEffect, useState} from 'react'
+
+import {QuizData, QuizDataState} from '../components/quiz/types'
+import {mockQuizData} from '../utils/mockQuizData'
+
+const MOCK_FETCH_TIME = 2000
+
+export const useQuizData = () => {
+  const [quizDataState, setQuizDataState] = useState<QuizDataState>('Loading')
+  const [quizData, setQuizData] = useState<QuizData>()
+
+  // Here is where you would fetch the quesitons from your server
+  // and process them into the shape you need
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setQuizData(mockQuizData)
+      setQuizDataState('Ready')
+    }, MOCK_FETCH_TIME)
+    return () => clearTimeout(timer)
+  }, [])
+
+  return {
+    quizDataState,
+    quizData,
+  }
+}

package/templates/__template_hello_world/src/hooks/useQuizState.ts

@@ -0,0 +1,27 @@
+import {useCallback, useState} from 'react'
+
+import {QuizResult, QuizResultEntry} from '../components/quiz/types'
+
+export const useQuizState = () => {
+  const [userName, setUserName] = useState('you')
+
+  const [quizResult, setQuizResult] = useState<QuizResult>()
+
+  const recordQuestionResult = useCallback(
+    (id: string, answer: QuizResultEntry) => {
+      const newQuizResult = {
+        ...quizResult,
+        [id]: answer,
+      }
+      setQuizResult(newQuizResult)
+    },
+    [quizResult]
+  )
+
+  return {
+    recordQuestionResult,
+    quizResult,
+    setUserName,
+    userName,
+  }
+}

package/templates/__template_hello_world/src/index.tsx

@@ -1,9 +1,10 @@
-import {theme as defaultTheme, Theme} from '@shopify/shop-minis-platform-sdk'
+import {MiniAppConfig} from '@shopify/shop-minis-platform-sdk'
 
-import {__MINI_APP_HANDLE_PASCAL_CASE__Navigator} from './routes'
+import {__MINI_APP_NAME_PASCAL_CASE__Navigator} from './routes'
 
-export const theme: Theme = {
-  ...defaultTheme,
+const config: MiniAppConfig = {
+  name: '__MINI_APP_NAME__',
+  Root: __MINI_APP_NAME_PASCAL_CASE__Navigator,
 }
 
-export default __MINI_APP_HANDLE_PASCAL_CASE__Navigator
+export default config

package/templates/__template_hello_world/src/routes.tsx

@@ -11,6 +11,7 @@ import {ProgressIndicatorScreen} from './screens/ProgressIndicatorScreen'
 import {SpinnerScreen} from './screens/SpinnerScreen'
 import {TypographyScreen} from './screens/TypographyScreen'
 import {QuantityPickerScreen} from './screens/QuantityPickerScreen'
+import {VariantPickerScreen} from './screens/VariantPickerScreen'
 import {WebViewScreen} from './screens/WebViewScreen'
 import {ModalScreen} from './screens/ModalScreen'
 import {ProductLinkScreen} from './screens/ProductLinkScreen'
@@ -18,106 +19,129 @@ import {ProductCardScreen} from './screens/ProductCardScreen'
 import {ProductCardGridScreen} from './screens/ProductCardGridScreen'
 import {InputScreen} from './screens/InputScreen'
 import {MultipleChoiceScreen} from './screens/MultipleChoiceScreen'
-import {ImageCarouselScreen} from './screens/ImageCarouselScreen'
+import {QuizScreen} from './screens/QuizScreen'
+import {ImageMultipleChoiceScreen} from './screens/ImageMultipleChoiceScreen'
+import {AccordionScreen} from './screens/AccordionScreen'
+import {ShopActionsScreen} from './screens/ShopActionsScreen'
 
 const Stack = createNativeStackNavigator()
 
-export const __MINI_APP_HANDLE_PASCAL_CASE__Navigator = () => {
+export const __MINI_APP_NAME_PASCAL_CASE__Navigator = () => {
   return (
     <Stack.Navigator>
       <Stack.Screen
-        name="__MINI_APP_HANDLE_PASCAL_CASE__.Home"
+        name="__MINI_APP_NAME_PASCAL_CASE__.Home"
         component={HomeScreen}
         options={{headerShown: false}}
       />
       <Stack.Screen
-        name="__MINI_APP_HANDLE_PASCAL_CASE__.Avatar"
+        name="__MINI_APP_NAME_PASCAL_CASE__.Avatar"
         component={AvatarScreen}
         options={{headerShown: false}}
       />
       <Stack.Screen
-        name="__MINI_APP_HANDLE_PASCAL_CASE__.BottomSheet"
+        name="__MINI_APP_NAME_PASCAL_CASE__.BottomSheet"
         component={BottomSheetScreen}
         options={{headerShown: false}}
       />
       <Stack.Screen
-        name="__MINI_APP_HANDLE_PASCAL_CASE__.Buttons"
+        name="__MINI_APP_NAME_PASCAL_CASE__.Buttons"
         component={ButtonsScreen}
         options={{headerShown: false}}
       />
       <Stack.Screen
-        name="__MINI_APP_HANDLE_PASCAL_CASE__.Grid"
+        name="__MINI_APP_NAME_PASCAL_CASE__.Grid"
         component={GridScreen}
         options={{headerShown: false}}
       />
       <Stack.Screen
-        name="__MINI_APP_HANDLE_PASCAL_CASE__.Icons"
+        name="__MINI_APP_NAME_PASCAL_CASE__.Icons"
         component={IconsScreen}
         options={{headerShown: false}}
       />
       <Stack.Screen
-        name="__MINI_APP_HANDLE_PASCAL_CASE__.Media"
+        name="__MINI_APP_NAME_PASCAL_CASE__.Media"
         component={MediaScreen}
         options={{headerShown: false}}
       />
       <Stack.Screen
-        name="__MINI_APP_HANDLE_PASCAL_CASE__.ProgressIndicator"
+        name="__MINI_APP_NAME_PASCAL_CASE__.ProgressIndicator"
         component={ProgressIndicatorScreen}
         options={{headerShown: false}}
       />
       <Stack.Screen
-        name="__MINI_APP_HANDLE_PASCAL_CASE__.Spinner"
+        name="__MINI_APP_NAME_PASCAL_CASE__.Spinner"
         component={SpinnerScreen}
         options={{headerShown: false}}
       />
       <Stack.Screen
-        name="__MINI_APP_HANDLE_PASCAL_CASE__.Typography"
+        name="__MINI_APP_NAME_PASCAL_CASE__.Typography"
         component={TypographyScreen}
         options={{headerShown: false}}
       />
       <Stack.Screen
-        name="__MINI_APP_HANDLE_PASCAL_CASE__.QuantityPicker"
+        name="__MINI_APP_NAME_PASCAL_CASE__.QuantityPicker"
         component={QuantityPickerScreen}
         options={{headerShown: false}}
       />
       <Stack.Screen
-        name="__MINI_APP_HANDLE_PASCAL_CASE__.WebView"
+        name="__MINI_APP_NAME_PASCAL_CASE__.VariantPicker"
+        component={VariantPickerScreen}
+        options={{headerShown: false}}
+      />
+      <Stack.Screen
+        name="__MINI_APP_NAME_PASCAL_CASE__.WebView"
         component={WebViewScreen}
         options={{headerShown: false}}
       />
       <Stack.Screen
-        name="__MINI_APP_HANDLE_PASCAL_CASE__.Modal"
+        name="__MINI_APP_NAME_PASCAL_CASE__.Modal"
         component={ModalScreen}
         options={{headerShown: false}}
       />
       <Stack.Screen
-        name="__MINI_APP_HANDLE_PASCAL_CASE__.ProductLink"
+        name="__MINI_APP_NAME_PASCAL_CASE__.ProductLink"
         component={ProductLinkScreen}
         options={{headerShown: false}}
       />
       <Stack.Screen
-        name="__MINI_APP_HANDLE_PASCAL_CASE__.ProductCard"
+        name="__MINI_APP_NAME_PASCAL_CASE__.ProductCard"
         component={ProductCardScreen}
         options={{headerShown: false}}
       />
       <Stack.Screen
-        name="__MINI_APP_HANDLE_PASCAL_CASE__.ProductCardGrid"
+        name="__MINI_APP_NAME_PASCAL_CASE__.ProductCardGrid"
         component={ProductCardGridScreen}
         options={{headerShown: false}}
       />
       <Stack.Screen
-        name="__MINI_APP_HANDLE_PASCAL_CASE__.Inputs"
+        name="__MINI_APP_NAME_PASCAL_CASE__.Inputs"
         component={InputScreen}
         options={{headerShown: false}}
       />
       <Stack.Screen
-        name="__MINI_APP_HANDLE_PASCAL_CASE__.MultipleChoice"
+        name="__MINI_APP_NAME_PASCAL_CASE__.MultipleChoice"
         component={MultipleChoiceScreen}
         options={{headerShown: false}}
       />
       <Stack.Screen
-        name="__MINI_APP_HANDLE_PASCAL_CASE__.ImageCarousel"
-        component={ImageCarouselScreen}
+        name="__MINI_APP_NAME_PASCAL_CASE__.ImageMultipleChoice"
+        component={ImageMultipleChoiceScreen}
+        options={{headerShown: false}}
+      />
+      <Stack.Screen
+        name="__MINI_APP_NAME_PASCAL_CASE__.Quiz"
+        component={QuizScreen}
+        options={{headerShown: false}}
+      />
+      <Stack.Screen
+        name="__MINI_APP_NAME_PASCAL_CASE__.Accordion"
+        component={AccordionScreen}
+        options={{headerShown: false}}
+      />
+      <Stack.Screen
+        name="__MINI_APP_NAME_PASCAL_CASE__.ShopActions"
+        component={ShopActionsScreen}
         options={{headerShown: false}}
       />
     </Stack.Navigator>

package/templates/__template_hello_world/src/screens/AccordionScreen.tsx

@@ -0,0 +1,73 @@
+import {
+  Box,
+  Text,
+  AccordionProps,
+  Accordion,
+} from '@shopify/shop-minis-platform-sdk'
+import {SafeAreaView, ScrollView} from 'react-native'
+
+import {Header} from '../components/Header'
+
+const createAccordionEntries = (
+  numberOfEntries: number,
+  initiallyOpenIndexes?: number[]
+): AccordionProps['items'] => {
+  return Array(numberOfEntries)
+    .fill(undefined)
+    .map((_, index) => ({
+      title: `Option ${
+        index + 1
+      } - Reiciendis repellendus blanditiis, nam soluta `,
+      body: (
+        <Text>
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum
+          architecto, quibusdam incidunt error atque id voluptas sit dolores
+          reprehenderit. Reiciendis repellendus blanditiis, nam soluta
+          distinctio est nostrum reprehenderit veritatis id END?
+        </Text>
+      ),
+      isInitiallyOpen: initiallyOpenIndexes?.includes(index),
+    }))
+}
+
+const mockAccordionItems = createAccordionEntries(5)
+const mockAccordionItemsWithInitialOpen = createAccordionEntries(5, [1, 2])
+
+export const AccordionScreen = () => {
+  return (
+    <SafeAreaView style={{flex: 1}}>
+      <ScrollView style={{flex: 1}}>
+        <Header />
+        <Box padding="m">
+          <Box marginBottom="m">
+            <Text variant="headerBold">Accordion</Text>
+          </Box>
+          <Box marginBottom="xxl">
+            <Box marginBottom="s">
+              <Text variant="subtitle">All Closed</Text>
+            </Box>
+            <Box>
+              <Accordion items={mockAccordionItems} />
+            </Box>
+          </Box>
+          <Box marginBottom="xxl">
+            <Box marginBottom="s">
+              <Text variant="subtitle">Initial Open (2 & 3)</Text>
+            </Box>
+            <Box>
+              <Accordion items={mockAccordionItemsWithInitialOpen} />
+            </Box>
+          </Box>
+          <Box marginBottom="xxl">
+            <Box marginBottom="s">
+              <Text variant="subtitle">Toggle (alwaysOpen=false)</Text>
+            </Box>
+            <Box>
+              <Accordion items={mockAccordionItems} alwaysOpen={false} />
+            </Box>
+          </Box>
+        </Box>
+      </ScrollView>
+    </SafeAreaView>
+  )
+}

package/templates/__template_hello_world/src/screens/BottomSheetScreen.tsx

@@ -302,11 +302,12 @@ const ExampleUseBottomSheet = ({
     ref?.scrollTo({y: 0, animated: false})
   }, [])
 
-  const {BottomSheet, scrollRef, onScroll, dismissBottomSheet} =
-    useBottomSheet<Animated.ScrollView>({
-      onDismiss,
-      scrollToTop,
-    })
+  const {BottomSheet, scrollRef, onScroll, dismissBottomSheet} = useBottomSheet<
+    typeof Animated.ScrollView
+  >({
+    onDismiss,
+    scrollToTop,
+  })
 
   return (
     <BottomSheet>

package/templates/__template_hello_world/src/screens/HomeScreen.tsx

@@ -11,17 +11,17 @@ const featuredComponents: ComponentLink[] = [
   {
     name: 'Modal',
     thumbnail: require('../assets/Modal-component-thumbnail.png'),
-    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.Modal',
+    screen: '__MINI_APP_NAME_PASCAL_CASE__.Modal',
   },
   {
     name: 'ProductLink',
     thumbnail: require('../assets/ProductLink-component-thumbnail.png'),
-    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.ProductLink',
+    screen: '__MINI_APP_NAME_PASCAL_CASE__.ProductLink',
   },
   {
     name: 'ProductCard',
     thumbnail: require('../assets/ProductCard-component-thumbnail.png'),
-    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.ProductCard',
+    screen: '__MINI_APP_NAME_PASCAL_CASE__.ProductCard',
   },
 ]
 
@@ -64,6 +64,17 @@ export const HomeScreen = () => {
             ))}
           </Box>
         </Box>
+        <Box flex={1} p="gutter" backgroundColor="backgrounds-regular">
+          <Text variant="label" mb="s" mt="l">
+            Hooks
+          </Text>
+          <Box flexDirection="column">
+            <ComponentListItem
+              name="Shop actions"
+              screen="__MINI_APP_NAME_PASCAL_CASE__.ShopActions"
+            />
+          </Box>
+        </Box>
       </ScrollView>
     </SafeAreaView>
   )

package/templates/__template_hello_world/src/screens/{ImageCarouselScreen.tsx → ImageMultipleChoiceScreen.tsx}

@@ -1,7 +1,7 @@
 import {
   Box,
   Button,
-  ImageCarousel,
+  ImageMultipleChoice,
   ImageChoiceType,
   Text,
   useMultiSelect,
@@ -9,7 +9,6 @@ import {
 } from '@shopify/shop-minis-platform-sdk'
 import {useMemo, useState} from 'react'
 import {SafeAreaView, ScrollView} from 'react-native'
-import {Header} from '../components/Header'
 
 const DEFAULT_IMAGE_SIZE = 160
 const MOCK_IMAGE_INDEX_OFFSET = 20
@@ -62,7 +61,7 @@ const ControlSection = ({label, children}: ControlSectionProps) => (
     {children}
   </Box>
 )
-export const ImageCarouselScreen = () => {
+export const ImageMultipleChoiceScreen = () => {
   const [choiceText, setChoiceText] =
     useState<keyof typeof textOptions>('short')
 
@@ -82,7 +81,6 @@ export const ImageCarouselScreen = () => {
 
   return (
     <SafeAreaView style={{flex: 1}}>
-      <Header />
       <Box paddingVertical="xs">
         <ControlSection label="Text Length">
           <Box flexDirection="row">
@@ -120,7 +118,7 @@ export const ImageCarouselScreen = () => {
         <Box marginVertical="s" marginHorizontal="gutter">
           <Text variant="headerNormal">Single Select</Text>
         </Box>
-        <ImageCarousel
+        <ImageMultipleChoice
           initialOffsetX={theme.spacing.gutter}
           imageSize={imageSize}
           choices={choices}
@@ -133,7 +131,7 @@ export const ImageCarouselScreen = () => {
         <Box marginVertical="s" marginHorizontal="gutter">
           <Text variant="headerNormal">Multi Select</Text>
         </Box>
-        <ImageCarousel
+        <ImageMultipleChoice
           initialOffsetX={theme.spacing.gutter}
           imageSize={imageSize}
           choices={choices}