@shopify/shop-minis-cli 0.0.37 → 0.0.82

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

@@ -2,22 +2,21 @@ import {ItemValue} from '@react-native-community/picker/typings/Picker'
 import {
   Box,
   DatePicker,
-  Icon,
   KeyboardAvoidingView,
   Picker,
   TextField,
   Text,
+  countryCodesAndPhonePrefixes,
+  getFlagEmoji,
 } from '@shopify/shop-minis-platform-sdk'
 import {useState} from 'react'
 import {
   NativeSyntheticEvent,
-  Pressable,
   SafeAreaView,
   ScrollView,
   TextInputEndEditingEventData,
 } from 'react-native'
 
-import {getFlagEmoji} from '../utils/getFlagEmoji'
 import {Header} from '../components/Header'
 
 interface Item {
@@ -26,35 +25,16 @@ interface Item {
   selected?: boolean
 }
 
-const countryCodeToPrefixMap = {
-  US: '+1',
-  DE: '+49',
-  NL: '+31',
-  BR: '+55',
-}
-
-const countryData: Item[] = [
-  {
-    value: 'US',
-    label: `US ${getFlagEmoji('US')}`,
-  },
-  {
-    value: 'DE',
-    label: `DE ${getFlagEmoji('DE')}`,
-  },
-  {
-    value: 'BR',
-    label: `BR ${getFlagEmoji('BR')}`,
-  },
-  {
-    value: 'NL',
-    label: `NL ${getFlagEmoji('NL')}`,
-  },
-]
+const countryData: Item[] = countryCodesAndPhonePrefixes.map(
+  ({code, name}) => ({
+    value: code,
+    label: `${name} ${getFlagEmoji(code)}`,
+  })
+)
 
 export const InputScreen = () => {
   const [showCountryPicker, setShowCountryPicker] = useState(false)
-  const [selectedCountry, setSelectedCountry] = useState<string>('US')
+  const [selectedCountry, setSelectedCountry] = useState<string>()
 
   const [showDatePicker, setShowDatePicker] = useState(false)
   const [date, setDate] = useState(new Date())
@@ -76,22 +56,19 @@ export const InputScreen = () => {
   }
   return (
     <SafeAreaView style={{flex: 1}}>
-      <Header />
       <KeyboardAvoidingView>
         <ScrollView style={{flex: 1}}>
+          <Header />
           <Box padding="m">
             <Box marginBottom="m">
               <Text variant="headerBold">Inputs</Text>
             </Box>
             <Box marginBottom="s">
               <Box marginBottom="xs">
-                <Text variant="bodyLargeBold">Text / Email</Text>
+                <Text variant="bodyLargeBold">Text</Text>
               </Box>
 
-              <TextField
-                placeholder="Enter your email"
-                onChangeText={console.log}
-              />
+              <TextField placeholder="Enter a word" />
             </Box>
             <Box marginBottom="s">
               <Box marginBottom="xs">
@@ -109,41 +86,7 @@ export const InputScreen = () => {
               <Box marginBottom="xs">
                 <Text variant="bodyLargeBold">Multiline</Text>
               </Box>
-              <TextField multiline onTextInput={console.log} />
-            </Box>
-            <Box marginBottom="s">
-              <Box marginBottom="xs">
-                <Text variant="bodyLargeBold">Select / Trailing component</Text>
-              </Box>
-              <TextField
-                placeholder="Enter Your Phone"
-                leadingComponent={
-                  selectedCountry ? (
-                    <Text marginEnd="xs">
-                      {
-                        countryCodeToPrefixMap[
-                          selectedCountry as keyof typeof countryCodeToPrefixMap
-                        ]
-                      }
-                    </Text>
-                  ) : null
-                }
-                trailingComponent={
-                  <Pressable onPress={() => setShowCountryPicker(true)}>
-                    <Box
-                      flexDirection="row"
-                      borderStartWidth={1}
-                      borderStartColor="inputs-border-color"
-                      paddingStart="xs"
-                    >
-                      <Text marginEnd="xs">
-                        {getFlagEmoji(selectedCountry ?? 'US')}
-                      </Text>
-                      <Icon name="chevron-down" />
-                    </Box>
-                  </Pressable>
-                }
-              />
+              <TextField multiline />
             </Box>
             <Box marginBottom="s">
               <Box marginBottom="xs">

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

@@ -0,0 +1,82 @@
+import {Box, Text} from '@shopify/shop-minis-platform-sdk'
+import {useMemo} from 'react'
+import {Image, SafeAreaView, ScrollView} from 'react-native'
+
+import {useQuizContext} from '../components/quiz/QuizProvider'
+import {
+  addNameToText,
+  getImageCarouselAnswerUrls,
+  getMultilpleChoiceAnswerLabels,
+  getQuestionById,
+} from '../utils/quizUtils'
+
+export const QuizResultScreen = () => {
+  const {quizResult, quizData, userName} = useQuizContext()
+
+  const formattedResults = useMemo(() => {
+    if (!quizData) return []
+
+    return Object.entries(quizResult!).map(([questionId, result]) => {
+      let answer = ''
+      // image carousel type will be an imageUrl
+      let type: 'imageUrl' | 'string' = 'string'
+
+      switch (result.slideType) {
+        case 'MultipleChoiceSlide':
+          answer = getMultilpleChoiceAnswerLabels(
+            quizData,
+            questionId,
+            result.answer as number[]
+          ).join(', ')
+          break
+        case 'ImageCarouselSlide':
+          type = 'imageUrl'
+          answer = getImageCarouselAnswerUrls(
+            quizData,
+            questionId,
+            result.answer as number[]
+          )[0]
+          break
+        default:
+          answer = result.answer as string
+      }
+
+      const question = addNameToText(
+        getQuestionById(quizData, questionId),
+        userName
+      )
+
+      return {
+        type,
+        question,
+        answer,
+      }
+    })
+  }, [quizData, quizResult, userName])
+
+  return (
+    <SafeAreaView>
+      <ScrollView>
+        <Box paddingHorizontal="gutter" paddingVertical="xs">
+          <Text variant="posterXS" textAlign="center" marginVertical="m">
+            Results
+          </Text>
+          {formattedResults.map(({question, answer, type}, index) => (
+            <Box key={question} marginBottom="s">
+              <Text variant="headerNormal" marginBottom="xs">
+                {index + 1}. {question}
+              </Text>
+              {type === 'imageUrl' ? (
+                <Image
+                  style={{width: 160, height: 160}}
+                  source={{uri: answer}}
+                />
+              ) : null}
+              {type === 'string' ? <Text>Answer: {answer}</Text> : null}
+            </Box>
+          ))}
+        </Box>
+      </ScrollView>
+    </SafeAreaView>
+  )
+}

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

@@ -0,0 +1,40 @@
+import {NavigationContainer} from '@react-navigation/native'
+import {createNativeStackNavigator} from '@react-navigation/native-stack'
+
+import {Header} from '../components/Header'
+import {QuizContextProvider} from '../components/quiz/QuizProvider'
+
+import {QuizResultScreen} from './QuizResultScreen'
+import {QuizSlideScreen} from './QuizSlideScreen'
+
+const Stack = createNativeStackNavigator()
+
+export const QuizScreen = () => {
+  return (
+    <QuizContextProvider>
+      <>
+        <Header />
+        <NavigationContainer independent>
+          <Stack.Navigator>
+            <Stack.Screen
+              name="QuizScreen.QuizSlide"
+              component={QuizSlideScreen}
+              options={{
+                title: '__MINI_APP_NAME_PASCAL_CASE__ Quiz',
+                headerBackTitle: 'Previous',
+              }}
+              initialParams={{
+                slideIndex: 0,
+              }}
+            />
+            <Stack.Screen
+              name="QuizScreen.QuizResult"
+              component={QuizResultScreen}
+              options={{headerShown: false}}
+            />
+          </Stack.Navigator>
+        </NavigationContainer>
+      </>
+    </QuizContextProvider>
+  )
+}

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

@@ -0,0 +1,150 @@
+import {RouteProp, useNavigation, useRoute} from '@react-navigation/native'
+import {NativeStackNavigationProp} from '@react-navigation/native-stack'
+import {Box, Spinner, Text} from '@shopify/shop-minis-platform-sdk'
+import {useCallback, useMemo, useState} from 'react'
+import {SafeAreaView, ScrollView} from 'react-native'
+
+import {useQuizContext} from '../components/quiz/QuizProvider'
+import {
+  QuizSlideCommander,
+  QuizSlideCommanderProps,
+} from '../components/quiz/QuizSlideCommander'
+import {QuizAnswerType, QuizStackParamList} from '../components/quiz/types'
+import {
+  addNameToText,
+  getQuizSlideDataByIndex,
+  getQuizSlideIndexById,
+} from '../utils/quizUtils'
+
+export const QuizSlideScreen = () => {
+  const navigation =
+    useNavigation<NativeStackNavigationProp<QuizStackParamList>>()
+  const route: RouteProp<{params: {slideIndex: number}}, 'params'> = useRoute()
+
+  const [currentSlideAnswer, setCurrentSlideAnswer] = useState<QuizAnswerType>()
+
+  const currentSlideIndex = route.params?.slideIndex ?? 0
+
+  const {recordQuestionResult, quizData, quizDataState, setUserName, userName} =
+    useQuizContext()
+
+  const slideData = useMemo(
+    () =>
+      quizData
+        ? getQuizSlideDataByIndex(quizData, currentSlideIndex)
+        : undefined,
+    [currentSlideIndex, quizData]
+  )
+
+  const determineNextSlideIndex = useCallback(() => {
+    if (!quizData || !slideData) return 0
+
+    let determinedNextSlideId = ''
+
+    const {nextSlideId, determineNextSlide} = slideData.props
+
+    if (nextSlideId) {
+      determinedNextSlideId = nextSlideId
+    }
+
+    if (currentSlideAnswer && determineNextSlide) {
+      // the type of the parameter for determineNextSlide cannot be determined
+      // because it is generic but it will a QuizAnswerType
+      determinedNextSlideId = determineNextSlide(currentSlideAnswer as any)
+    }
+
+    if (determinedNextSlideId === '') return currentSlideIndex + 1
+
+    return getQuizSlideIndexById(quizData, determinedNextSlideId)
+  }, [currentSlideAnswer, currentSlideIndex, quizData, slideData])
+
+  const handleNextCtaPress = useCallback(() => {
+    if (!quizData) return
+
+    if (currentSlideAnswer !== undefined) {
+      const {id, type: slideType} = getQuizSlideDataByIndex(
+        quizData,
+        currentSlideIndex
+      )
+
+      recordQuestionResult(id, {
+        answer: currentSlideAnswer,
+        slideType,
+      })
+    }
+
+    if (slideData?.id === 'enter-name' && currentSlideAnswer) {
+      setUserName(currentSlideAnswer as string)
+    }
+
+    if (slideData?.props.nextSlideId === 'results') {
+      navigation.replace('QuizScreen.QuizResult')
+      return
+    }
+
+    navigation.push('QuizScreen.QuizSlide', {
+      slideIndex: determineNextSlideIndex(),
+    })
+  }, [
+    currentSlideAnswer,
+    currentSlideIndex,
+    determineNextSlideIndex,
+    navigation,
+    quizData,
+    recordQuestionResult,
+    setUserName,
+    slideData?.id,
+    slideData?.props.nextSlideId,
+  ])
+
+  const handleAnswerSelection = useCallback((answer: QuizAnswerType) => {
+    setCurrentSlideAnswer(answer)
+  }, [])
+
+  if (quizDataState === 'Loading') {
+    return (
+      <SafeAreaView>
+        <ScrollView>
+          <Box paddingHorizontal="gutter" paddingVertical="xl">
+            <Text textAlign="center">Please wait, systems processing</Text>
+            <Box
+              height={180}
+              flex={1}
+              justifyContent="center"
+              alignItems="center"
+            >
+              <Spinner size="large" />
+            </Box>
+          </Box>
+        </ScrollView>
+      </SafeAreaView>
+    )
+  }
+
+  // if quizDataState is not Loading, then data is ready
+  const {type, props} = slideData!
+
+  const mainTextWithUserName = addNameToText(
+    props.quizSlideProps.mainText,
+    userName
+  )
+
+  const enrichedSlideProps: QuizSlideCommanderProps['props'] = {
+    ...props,
+    quizSlideProps: {
+      ...props.quizSlideProps,
+      mainText: mainTextWithUserName,
+      ctaOnPressHandler: handleNextCtaPress,
+    },
+    handleAnswerSelection,
+  }
+  return (
+    <SafeAreaView>
+      <ScrollView>
+        <Box paddingHorizontal="gutter" paddingVertical="xs">
+          <QuizSlideCommander type={type} props={enrichedSlideProps} />
+        </Box>
+      </ScrollView>
+    </SafeAreaView>
+  )
+}

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

@@ -0,0 +1,48 @@
+import {useState} from 'react'
+import {SafeAreaView, ScrollView} from 'react-native'
+import {
+  Box,
+  Button,
+  KeyboardAvoidingView,
+  Text,
+  TextField,
+} from '@shopify/shop-minis-platform-sdk'
+import {useShopActions} from '@shopify/shop-minis-platform-sdk/actions'
+
+import {Header} from '../components/Header'
+
+export const ShopActionsScreen = () => {
+  const [navigateToCheckoutUrl, setNavigateToCheckoutUrl] = useState('')
+  const {navigateToCheckout} = useShopActions()
+
+  return (
+    <SafeAreaView style={{flex: 1}}>
+      <KeyboardAvoidingView>
+        <ScrollView style={{flex: 1}}>
+          <Header />
+          <Box px="gutter">
+            <Text variant="headerBold" mb="xs">
+              Shop Actions
+            </Text>
+            <Box marginBottom="m">
+              <Box marginBottom="xs">
+                <Text variant="bodyLargeBold">Checkout with URL</Text>
+              </Box>
+              <Box marginBottom="xs">
+                <TextField
+                  placeholder="URL"
+                  value={navigateToCheckoutUrl}
+                  onChangeText={text => setNavigateToCheckoutUrl(text)}
+                />
+              </Box>
+              <Button
+                text="Go to checkout"
+                onPress={() => navigateToCheckout({url: navigateToCheckoutUrl})}
+              />
+            </Box>
+          </Box>
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  )
+}

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

@@ -0,0 +1,120 @@
+import {useState} from 'react'
+import {SafeAreaView, ScrollView} from 'react-native'
+import {
+  Box,
+  Text,
+  Button,
+  useMinisQuery,
+  useTheme,
+  VariantPicker,
+  Variant,
+  VariantOption,
+} from '@shopify/shop-minis-platform-sdk'
+
+import {Header} from '../components/Header'
+import TestQuery from '../data/TestProducts.graphql'
+import {
+  MOCKED_PRODUCT_1,
+  MOCKED_PRODUCT_1_DESCRIPTION,
+  MOCKED_PRODUCT_2,
+  MOCKED_PRODUCT_2_DESCRIPTION,
+} from '../fixtures/mocked-products-with-variants'
+
+const SHOP_GID = 'gid://shopify/Shop/62104633599'
+const PRODUCT_GID = 'gid://shopify/Product/7632803594495'
+
+const FETCH_PRODUCT_FROM_API = {
+  label: '1. Fetch product from API',
+  description: '',
+}
+const USE_MOCK_PRODUCT_1 = {
+  label: '2. Use mock product with 2 options',
+  description: MOCKED_PRODUCT_1_DESCRIPTION,
+}
+const USE_MOCK_PRODUCT_2 = {
+  label: '3. Use mock product with 3 options',
+  description: MOCKED_PRODUCT_2_DESCRIPTION,
+}
+
+const PRODUCT_SOURCES = [
+  FETCH_PRODUCT_FROM_API,
+  USE_MOCK_PRODUCT_1,
+  USE_MOCK_PRODUCT_2,
+]
+
+const EMPTY_LIST: any[] = []
+
+function getProduct(productSource: any, data: any) {
+  if (productSource === FETCH_PRODUCT_FROM_API) {
+    return data?.shop?.productsByIds[0]
+  }
+  if (productSource === USE_MOCK_PRODUCT_1) {
+    return MOCKED_PRODUCT_1
+  }
+  return MOCKED_PRODUCT_2
+}
+
+export const VariantPickerScreen = () => {
+  const theme = useTheme()
+  const [options, setSelectedOptions] = useState<VariantOption[]>()
+  const [productSource, setProductSource] = useState(PRODUCT_SOURCES[0])
+
+  const {data} = useMinisQuery(TestQuery, {
+    variables: {
+      shopId: SHOP_GID,
+      productIds: [PRODUCT_GID],
+    },
+    fetchPolicy: 'cache-and-network',
+  })
+
+  const product = getProduct(productSource, data)
+
+  if (!product) return null
+
+  const variants = product.variants.nodes
+  const selectedOptions = product.defaultVariant?.selectedOptions || []
+
+  const handleProductVariantUpdated = (variant: Variant | null) => {
+    setSelectedOptions(variant?.selectedOptions)
+  }
+
+  return (
+    <SafeAreaView
+      style={{flex: 1, backgroundColor: theme.colors['backgrounds-regular']}}
+    >
+      <ScrollView
+        contentContainerStyle={{
+          flex: 1,
+          backgroundColor: theme.colors['backgrounds-regular'],
+        }}
+      >
+        <Header />
+        <Box px="gutter">
+          <Text variant="heroBold">VariantPicker</Text>
+          {PRODUCT_SOURCES.map(source => (
+            <Button
+              text={source.label}
+              key={source.label}
+              onPress={() => {
+                setSelectedOptions(undefined)
+                setProductSource(source)
+              }}
+              style={{
+                opacity: productSource === source ? 1 : 0.5,
+                margin: 8,
+              }}
+            />
+          ))}
+        </Box>
+        {/* There's a known issue where <VariantPicker> cannot be put inside a <Box> */}
+        <VariantPicker
+          key={productSource.label}
+          variants={variants || EMPTY_LIST}
+          productOptions={product.options || EMPTY_LIST}
+          initialSelectedOptions={options?.length ? options : selectedOptions}
+          onProductVariantUpdated={handleProductVariantUpdated}
+        />
+      </ScrollView>
+    </SafeAreaView>
+  )
+}

package/templates/__template_hello_world/src/types.ts

@@ -1,28 +1,31 @@
 // @react-navigation/native-stack requires a `type` instead of an `interface`
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export type StackParamList = {
-  '__MINI_APP_HANDLE_PASCAL_CASE__.Home': undefined
-  '__MINI_APP_HANDLE_PASCAL_CASE__.Modal': undefined
-  '__MINI_APP_HANDLE_PASCAL_CASE__.ProductCard': undefined
-  '__MINI_APP_HANDLE_PASCAL_CASE__.ProductCardGrid': undefined
-  '__MINI_APP_HANDLE_PASCAL_CASE__.ProductLink': undefined
-  '__MINI_APP_HANDLE_PASCAL_CASE__.Typography': undefined
-  '__MINI_APP_HANDLE_PASCAL_CASE__.BottomSheet': undefined
-  '__MINI_APP_HANDLE_PASCAL_CASE__.Buttons': undefined
-  '__MINI_APP_HANDLE_PASCAL_CASE__.Icons': undefined
-  '__MINI_APP_HANDLE_PASCAL_CASE__.ImageCarousel': undefined
-  '__MINI_APP_HANDLE_PASCAL_CASE__.Inputs': undefined
-  '__MINI_APP_HANDLE_PASCAL_CASE__.Media': undefined
-  '__MINI_APP_HANDLE_PASCAL_CASE__.MultipleChoice': undefined
-  '__MINI_APP_HANDLE_PASCAL_CASE__.QuantityPicker': undefined
-  '__MINI_APP_HANDLE_PASCAL_CASE__.WebView': undefined
-  '__MINI_APP_HANDLE_PASCAL_CASE__.Query': undefined
-  '__MINI_APP_HANDLE_PASCAL_CASE__.ShopActions': undefined
-  '__MINI_APP_HANDLE_PASCAL_CASE__.Html': undefined
-  '__MINI_APP_HANDLE_PASCAL_CASE__.Params': undefined
-  '__MINI_APP_HANDLE_PASCAL_CASE__.ProgressIndicator': undefined
-  '__MINI_APP_HANDLE_PASCAL_CASE__.Spinner': undefined
-  '__MINI_APP_HANDLE_PASCAL_CASE__.Grid': undefined
-  '__MINI_APP_HANDLE_PASCAL_CASE__.Avatar': undefined
-  '__MINI_APP_HANDLE_PASCAL_CASE__.KeyboardAvoidingView': undefined
+  '__MINI_APP_NAME_PASCAL_CASE__.Home': undefined
+  '__MINI_APP_NAME_PASCAL_CASE__.Modal': undefined
+  '__MINI_APP_NAME_PASCAL_CASE__.ProductCard': undefined
+  '__MINI_APP_NAME_PASCAL_CASE__.ProductCardGrid': undefined
+  '__MINI_APP_NAME_PASCAL_CASE__.ProductLink': undefined
+  '__MINI_APP_NAME_PASCAL_CASE__.Typography': undefined
+  '__MINI_APP_NAME_PASCAL_CASE__.BottomSheet': undefined
+  '__MINI_APP_NAME_PASCAL_CASE__.Buttons': undefined
+  '__MINI_APP_NAME_PASCAL_CASE__.Icons': undefined
+  '__MINI_APP_NAME_PASCAL_CASE__.ImageMultipleChoice': undefined
+  '__MINI_APP_NAME_PASCAL_CASE__.Inputs': undefined
+  '__MINI_APP_NAME_PASCAL_CASE__.Media': undefined
+  '__MINI_APP_NAME_PASCAL_CASE__.MultipleChoice': undefined
+  '__MINI_APP_NAME_PASCAL_CASE__.QuantityPicker': undefined
+  '__MINI_APP_NAME_PASCAL_CASE__.VariantPicker': undefined
+  '__MINI_APP_NAME_PASCAL_CASE__.WebView': undefined
+  '__MINI_APP_NAME_PASCAL_CASE__.Query': undefined
+  '__MINI_APP_NAME_PASCAL_CASE__.ShopActions': undefined
+  '__MINI_APP_NAME_PASCAL_CASE__.Html': undefined
+  '__MINI_APP_NAME_PASCAL_CASE__.Params': undefined
+  '__MINI_APP_NAME_PASCAL_CASE__.ProgressIndicator': undefined
+  '__MINI_APP_NAME_PASCAL_CASE__.Spinner': undefined
+  '__MINI_APP_NAME_PASCAL_CASE__.Grid': undefined
+  '__MINI_APP_NAME_PASCAL_CASE__.Avatar': undefined
+  '__MINI_APP_NAME_PASCAL_CASE__.KeyboardAvoidingView': undefined
+  '__MINI_APP_NAME_PASCAL_CASE__.Quiz': undefined
+  '__MINI_APP_NAME_PASCAL_CASE__.Accordion': undefined
 }