@shopify/shop-minis-cli 0.0.37 → 0.0.38

package/templates/__template_hello_world/src/components/quiz/QuizSlide.tsx

@@ -0,0 +1,76 @@
+import {Box, Button, Text, useTheme} from '@shopify/shop-minis-platform-sdk'
+import {ReactNode} from 'react'
+import {StyleSheet, useWindowDimensions} from 'react-native'
+
+import {QuizSlideType} from './types'
+
+export interface QuizSlideProps extends QuizSlideType {
+  children?: ReactNode
+}
+
+export const QuizSlide = (props: QuizSlideProps) => {
+  const {
+    mainText,
+    subText,
+    ctaText,
+    ctaOnPressHandler,
+    ctaDisabled,
+    children,
+    isTallSlide,
+  } = props
+
+  const theme = useTheme()
+  const gutter = theme.spacing.gutter
+
+  const {height: windowHeight, width} = useWindowDimensions()
+
+  const containerWidth = width - gutter * 2
+  const containerHeight = windowHeight - 245
+
+  return (
+    <Box
+      height={containerHeight}
+      flex={1}
+      paddingHorizontal="gutter"
+      paddingTop={isTallSlide ? 'xxxl' : 'auto'}
+      position="relative"
+      justifyContent="center"
+    >
+      <Box marginBottom="m" width={containerWidth}>
+        <Text variant="subtitle">{mainText}</Text>
+        {subText ? (
+          <Text marginTop="xxs" variant="bodySmall">
+            {subText}
+          </Text>
+        ) : null}
+      </Box>
+      <Box marginBottom="xxxl" paddingBottom={isTallSlide ? 'l' : 'none'}>
+        {children}
+      </Box>
+      <Box style={styles.ctaContainer} paddingBottom="s" width={containerWidth}>
+        <Button
+          size="l"
+          style={{width: containerWidth}}
+          onPress={
+            ctaOnPressHandler
+              ? ctaOnPressHandler
+              : () => console.log('Next Press')
+          }
+          variant="secondary"
+          text={ctaText ?? 'Next'}
+          disabled={ctaDisabled ?? false}
+        />
+      </Box>
+    </Box>
+  )
+}
+
+const styles = StyleSheet.create({
+  ctaContainer: {
+    alignItems: 'center',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+})

package/templates/__template_hello_world/src/components/quiz/QuizSlideCommander.tsx

@@ -0,0 +1,35 @@
+import {ImageCarouselSlide, ImageCarouselSlideProps} from './ImageCarouselSlide'
+import {
+  MultipleChoiceSlide,
+  MultipleChoiceSlideProps,
+} from './MultipleChoiceSlide'
+import {QuizSlide} from './QuizSlide'
+import {TextFieldSlide, TextFieldSlideProps} from './TextFieldSlide'
+import {TextSlide} from './TextSlide'
+import {QuizSlideScreenType, TextSlideProps} from './types'
+
+export interface QuizSlideCommanderProps {
+  type: QuizSlideScreenType
+  props: TextSlideProps | MultipleChoiceSlideProps | ImageCarouselSlideProps
+}
+
+export const QuizSlideCommander = ({type, props}: QuizSlideCommanderProps) => {
+  switch (type) {
+    case 'TextSlide':
+      return <TextSlide {...(props as TextSlideProps)} />
+    case 'TextFieldSlide':
+      return <TextFieldSlide {...(props as TextFieldSlideProps)} />
+    case 'ImageCarouselSlide':
+      return <ImageCarouselSlide {...(props as ImageCarouselSlideProps)} />
+    case 'MultipleChoiceSlide':
+      return <MultipleChoiceSlide {...(props as MultipleChoiceSlideProps)} />
+    default:
+      return (
+        <QuizSlide
+          mainText="error"
+          subText={`slide type ${type} is unknown`}
+          ctaText="oh no!"
+        />
+      )
+  }
+}

package/templates/__template_hello_world/src/components/quiz/TextFieldSlide.tsx

@@ -0,0 +1,47 @@
+import {Box, TextField} from '@shopify/shop-minis-platform-sdk'
+import {ComponentProps, useCallback, useEffect, useState} from 'react'
+
+import {QuizSlide, QuizSlideProps} from './QuizSlide'
+import {SlideLogic} from './types'
+
+export interface TextFieldSlideProps extends SlideLogic<string> {
+  quizSlideProps: QuizSlideProps
+  textFieldProps: ComponentProps<typeof TextField>
+}
+
+export const TextFieldSlide = ({
+  quizSlideProps,
+  textFieldProps,
+  determineCtaDisabled,
+  handleAnswerSelection,
+}: TextFieldSlideProps) => {
+  const [fieldValue, setFieldValue] = useState<string>()
+
+  const [isCtaDisabled, setCtaDisabled] = useState(
+    quizSlideProps.ctaDisabled ?? false
+  )
+
+  const handleChange = useCallback((newTextValue: string) => {
+    setFieldValue(newTextValue)
+  }, [])
+
+  useEffect(() => {
+    if (handleAnswerSelection === undefined || fieldValue === undefined) return
+
+    handleAnswerSelection(fieldValue)
+  }, [fieldValue, handleAnswerSelection])
+
+  useEffect(() => {
+    if (determineCtaDisabled === undefined || fieldValue === undefined) return
+
+    setCtaDisabled(determineCtaDisabled(fieldValue))
+  }, [determineCtaDisabled, fieldValue])
+
+  return (
+    <QuizSlide {...quizSlideProps} ctaDisabled={isCtaDisabled}>
+      <Box marginBottom="xl">
+        <TextField {...textFieldProps} onChangeText={handleChange} />
+      </Box>
+    </QuizSlide>
+  )
+}

package/templates/__template_hello_world/src/components/quiz/TextSlide.tsx

@@ -0,0 +1,6 @@
+import {QuizSlide} from './QuizSlide'
+import {TextSlideProps} from './types'
+
+export const TextSlide = (props: TextSlideProps) => {
+  return <QuizSlide {...props.quizSlideProps} />
+}

package/templates/__template_hello_world/src/components/quiz/types.ts

@@ -0,0 +1,72 @@
+import type {ImageCarouselSlideProps} from './ImageCarouselSlide'
+import type {MultipleChoiceSlideProps} from './MultipleChoiceSlide'
+import type {TextFieldSlideProps} from './TextFieldSlide'
+
+export interface QuizSlideType {
+  mainText: string
+  ctaOnPressHandler?: () => void
+  ctaDisabled?: boolean
+  subText?: string
+  ctaText?: string // default to 'next'
+  isTallSlide?: boolean
+}
+
+export interface TextSlideProps extends SlideLogic<string> {
+  quizSlideProps: QuizSlideType
+}
+
+export type QuizSlideScreenType =
+  | 'TextSlide'
+  | 'TextFieldSlide'
+  | 'MultipleChoiceSlide'
+  | 'ImageCarouselSlide'
+
+export interface SlideInformation {
+  id: string
+  type: QuizSlideScreenType
+  // When adding the slide props, we get a dependency cycle
+  props:
+    | TextSlideProps
+    | TextFieldSlideProps
+    | MultipleChoiceSlideProps
+    | ImageCarouselSlideProps
+}
+
+export interface QuizData {
+  slides: SlideInformation[]
+}
+
+export interface SlideLogic<T extends QuizAnswerType> {
+  handleAnswerSelection?: (answer: T) => void
+  determineNextSlide?: (answer: T) => string
+  determineCtaDisabled?: (answer: T) => boolean
+  nextSlideId?: string
+}
+
+// @react-navigation/native-stack requires a `type` instead of an `interface`
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type QuizStackParamList = {
+  '__MINI_APP_HANDLE_PASCAL_CASE__.QuizResult': undefined
+  '__MINI_APP_HANDLE_PASCAL_CASE__.QuizSlide': {
+    slideIndex: number
+  }
+}
+
+export interface SlideChoiceConsequence {
+  nextSlideId?: string
+  skipSlideIds?: [string]
+}
+
+export type QuizAnswerType = string | number | number[]
+
+export type DetermineNextSlide<T> = (answer: T) => string
+
+export interface QuizResultEntry {
+  slideType: QuizSlideScreenType
+  answer: QuizAnswerType
+}
+
+// key is the ID of the question
+export type QuizResult = Record<string, QuizResultEntry>
+
+export type QuizDataState = 'Loading' | 'Ready'

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/routes.tsx

@@ -18,7 +18,8 @@ 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'
 
 const Stack = createNativeStackNavigator()
 
@@ -116,8 +117,13 @@ export const __MINI_APP_HANDLE_PASCAL_CASE__Navigator = () => {
         options={{headerShown: false}}
       />
       <Stack.Screen
-        name="__MINI_APP_HANDLE_PASCAL_CASE__.ImageCarousel"
-        component={ImageCarouselScreen}
+        name="__MINI_APP_HANDLE_PASCAL_CASE__.ImageMultipleChoice"
+        component={ImageMultipleChoiceScreen}
+        options={{headerShown: false}}
+      />
+      <Stack.Screen
+        name="__MINI_APP_HANDLE_PASCAL_CASE__.Quiz"
+        component={QuizScreen}
         options={{headerShown: false}}
       />
     </Stack.Navigator>

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}

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

@@ -2,22 +2,23 @@ import {ItemValue} from '@react-native-community/picker/typings/Picker'
 import {
   Box,
   DatePicker,
-  Icon,
   KeyboardAvoidingView,
   Picker,
+  TextFieldPhoneNumber,
   TextField,
+  TextFieldAutofill,
   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,31 +27,12 @@ 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)
@@ -85,14 +67,38 @@ export const InputScreen = () => {
             </Box>
             <Box marginBottom="s">
               <Box marginBottom="xs">
-                <Text variant="bodyLargeBold">Text / Email</Text>
+                <Text variant="bodyLargeBold">Text</Text>
               </Box>
 
               <TextField
+                placeholder="Enter a word"
+                onChangeText={console.log}
+              />
+            </Box>
+            <Box marginBottom="s">
+              <Box marginBottom="xs">
+                <Text variant="bodyLargeBold">Email with Autofill</Text>
+              </Box>
+
+              <TextFieldAutofill
+                type="email"
+                shopId="shopify"
                 placeholder="Enter your email"
                 onChangeText={console.log}
               />
             </Box>
+            <Box marginBottom="s">
+              <Box marginBottom="xs">
+                <Text variant="bodyLargeBold">Name with Autofill</Text>
+              </Box>
+
+              <TextFieldAutofill
+                type="name"
+                shopId="shopify"
+                placeholder="Enter your name"
+                onChangeText={console.log}
+              />
+            </Box>
             <Box marginBottom="s">
               <Box marginBottom="xs">
                 <Text variant="bodyLargeBold">Date</Text>
@@ -113,36 +119,14 @@ export const InputScreen = () => {
             </Box>
             <Box marginBottom="s">
               <Box marginBottom="xs">
-                <Text variant="bodyLargeBold">Select / Trailing component</Text>
+                <Text variant="bodyLargeBold">TextFieldPhoneNumber</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>
-                }
+              <TextFieldPhoneNumber
+                selectedCountry={selectedCountry}
+                onFlagPress={() => setShowCountryPicker(true)}
+                shopId="shop"
+                autofill
+                onPhoneInfoChange={console.log}
               />
             </Box>
             <Box marginBottom="s">

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="__MINI_APP_HANDLE_PASCAL_CASE__.QuizSlide"
+              component={QuizSlideScreen}
+              options={{
+                title: '__MINI_APP_HANDLE_PASCAL_CASE__ Quiz',
+                headerBackTitle: 'Previous',
+              }}
+              initialParams={{
+                slideIndex: 0,
+              }}
+            />
+            <Stack.Screen
+              name="__MINI_APP_HANDLE_PASCAL_CASE__.QuizResult"
+              component={QuizResultScreen}
+              options={{headerShown: false}}
+            />
+          </Stack.Navigator>
+        </NavigationContainer>
+      </>
+    </QuizContextProvider>
+  )
+}