@shopify/shop-minis-cli 0.0.41 → 0.0.43

package/templates/__template_hello_world/src/components/FeaturedComponents.tsx

@@ -39,8 +39,10 @@ export const FeaturedComponents = ({
                 componentLinks[
                   Math.floor(Math.random() * componentLinks.length)
                 ]
+              // @ts-expect-error - when the stack param list contains too many routes... typescript throws random errors
               navigation.navigate(randomComponentLink.screen)
             } else {
+              // @ts-expect-error - when the stack param list contains too many routes... typescript throws random errors
               navigation.navigate(item.screen)
             }
           }}

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

@@ -25,13 +25,12 @@ export const QuizSlide = (props: QuizSlideProps) => {
   const {height: windowHeight, width} = useWindowDimensions()
 
   const containerWidth = width - gutter * 2
-  const containerHeight = windowHeight - 245
+  const containerHeight = windowHeight - 255
 
   return (
     <Box
       height={containerHeight}
       flex={1}
-      paddingHorizontal="gutter"
       paddingTop={isTallSlide ? 'xxxl' : 'auto'}
       position="relative"
       justifyContent="center"
@@ -44,7 +43,11 @@ export const QuizSlide = (props: QuizSlideProps) => {
           </Text>
         ) : null}
       </Box>
-      <Box marginBottom="xxxl" paddingBottom={isTallSlide ? 'l' : 'none'}>
+      <Box
+        marginBottom="xxxl"
+        paddingBottom={isTallSlide ? 'l' : 'none'}
+        paddingHorizontal="gutter"
+      >
         {children}
       </Box>
       <Box style={styles.ctaContainer} paddingBottom="s" width={containerWidth}>

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

@@ -1,20 +1,48 @@
-import {Box, TextField} from '@shopify/shop-minis-platform-sdk'
+import {ItemValue} from '@react-native-community/picker/typings/Picker'
+import {
+  Box,
+  countryCodesAndPhonePrefixes,
+  getFlagEmoji,
+  Picker,
+  TextField,
+  TextFieldAutofill,
+  TextFieldPhoneNumber,
+} from '@shopify/shop-minis-platform-sdk'
 import {ComponentProps, useCallback, useEffect, useState} from 'react'
 
 import {QuizSlide, QuizSlideProps} from './QuizSlide'
 import {SlideLogic} from './types'
 
+interface Item {
+  value: string
+  label: string
+  selected?: boolean
+}
+
+const countryData: Item[] = countryCodesAndPhonePrefixes.map(
+  ({code, name}) => ({
+    value: code,
+    label: `${name} ${getFlagEmoji(code)}`,
+  })
+)
 export interface TextFieldSlideProps extends SlideLogic<string> {
   quizSlideProps: QuizSlideProps
-  textFieldProps: ComponentProps<typeof TextField>
+  textFieldProps:
+    | ComponentProps<typeof TextField>
+    | ComponentProps<typeof TextFieldAutofill>
+  autoFillType?: ComponentProps<typeof TextFieldAutofill>['type'] | 'telephone'
 }
 
 export const TextFieldSlide = ({
   quizSlideProps,
   textFieldProps,
+  autoFillType,
   determineCtaDisabled,
   handleAnswerSelection,
 }: TextFieldSlideProps) => {
+  const [showCountryPicker, setShowCountryPicker] = useState(false)
+  const [selectedCountry, setSelectedCountry] = useState<string>()
+
   const [fieldValue, setFieldValue] = useState<string>()
 
   const [isCtaDisabled, setCtaDisabled] = useState(
@@ -37,11 +65,64 @@ export const TextFieldSlide = ({
     setCtaDisabled(determineCtaDisabled(fieldValue))
   }, [determineCtaDisabled, fieldValue])
 
-  return (
-    <QuizSlide {...quizSlideProps} ctaDisabled={isCtaDisabled}>
-      <Box marginBottom="xl">
+  let textFieldComponent
+
+  switch (autoFillType) {
+    case 'email':
+      textFieldComponent = (
+        <TextFieldAutofill
+          {...textFieldProps}
+          type="email"
+          shopId="test"
+          onChangeText={handleChange}
+        />
+      )
+
+      break
+    case 'name':
+      textFieldComponent = (
+        <TextFieldAutofill
+          {...textFieldProps}
+          type="name"
+          shopId="test"
+          onChangeText={handleChange}
+        />
+      )
+      break
+    case 'telephone':
+      textFieldComponent = (
+        <TextFieldPhoneNumber
+          selectedCountry={selectedCountry}
+          onFlagPress={() => setShowCountryPicker(true)}
+          shopId="shop"
+          autofill
+          onPhoneInfoChange={info => handleChange(info.phoneNumber)}
+        />
+      )
+
+      break
+    default:
+      textFieldComponent = (
         <TextField {...textFieldProps} onChangeText={handleChange} />
-      </Box>
-    </QuizSlide>
+      )
+  }
+
+  return (
+    <>
+      <QuizSlide {...quizSlideProps} ctaDisabled={isCtaDisabled}>
+        <Box marginBottom="xl">{textFieldComponent}</Box>
+      </QuizSlide>
+      {showCountryPicker ? (
+        <Picker
+          headerText="Choose Your Country"
+          items={countryData}
+          handleDismiss={() => setShowCountryPicker(false)}
+          selectedValue={selectedCountry}
+          onValueChange={(value: ItemValue) => {
+            setSelectedCountry(value.toString())
+          }}
+        />
+      ) : null}
+    </>
   )
 }

package/templates/__template_hello_world/src/routes.tsx

@@ -20,6 +20,7 @@ import {InputScreen} from './screens/InputScreen'
 import {MultipleChoiceScreen} from './screens/MultipleChoiceScreen'
 import {QuizScreen} from './screens/QuizScreen'
 import {ImageMultipleChoiceScreen} from './screens/ImageMultipleChoiceScreen'
+import {AccordionScreen} from './screens/AccordionScreen'
 
 const Stack = createNativeStackNavigator()
 
@@ -126,6 +127,11 @@ export const __MINI_APP_HANDLE_PASCAL_CASE__Navigator = () => {
         component={QuizScreen}
         options={{headerShown: false}}
       />
+      <Stack.Screen
+        name="__MINI_APP_HANDLE_PASCAL_CASE__.Accordion"
+        component={AccordionScreen}
+        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/InputScreen.tsx

@@ -36,7 +36,7 @@ const countryData: Item[] = countryCodesAndPhonePrefixes.map(
 
 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())
@@ -58,9 +58,9 @@ 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>
@@ -70,10 +70,7 @@ export const InputScreen = () => {
                 <Text variant="bodyLargeBold">Text</Text>
               </Box>
 
-              <TextField
-                placeholder="Enter a word"
-                onChangeText={console.log}
-              />
+              <TextField placeholder="Enter a word" />
             </Box>
             <Box marginBottom="s">
               <Box marginBottom="xs">
@@ -84,7 +81,6 @@ export const InputScreen = () => {
                 type="email"
                 shopId="shopify"
                 placeholder="Enter your email"
-                onChangeText={console.log}
               />
             </Box>
             <Box marginBottom="s">
@@ -96,7 +92,6 @@ export const InputScreen = () => {
                 type="name"
                 shopId="shopify"
                 placeholder="Enter your name"
-                onChangeText={console.log}
               />
             </Box>
             <Box marginBottom="s">
@@ -115,7 +110,7 @@ export const InputScreen = () => {
               <Box marginBottom="xs">
                 <Text variant="bodyLargeBold">Multiline</Text>
               </Box>
-              <TextField multiline onTextInput={console.log} />
+              <TextField multiline />
             </Box>
             <Box marginBottom="s">
               <Box marginBottom="xs">
@@ -126,7 +121,6 @@ export const InputScreen = () => {
                 onFlagPress={() => setShowCountryPicker(true)}
                 shopId="shop"
                 autofill
-                onPhoneInfoChange={console.log}
               />
             </Box>
             <Box marginBottom="s">

package/templates/__template_hello_world/src/types.ts

@@ -26,4 +26,5 @@ export type StackParamList = {
   '__MINI_APP_HANDLE_PASCAL_CASE__.Avatar': undefined
   '__MINI_APP_HANDLE_PASCAL_CASE__.KeyboardAvoidingView': undefined
   '__MINI_APP_HANDLE_PASCAL_CASE__.Quiz': undefined
+  '__MINI_APP_HANDLE_PASCAL_CASE__.Accordion': undefined
 }

package/templates/__template_hello_world/src/utils/mockQuizData.ts

@@ -128,6 +128,19 @@ const ageChoices = [
   },
 ]
 
+const textFieldPhoneSlideProps: TextFieldSlideProps = {
+  quizSlideProps: {
+    mainText: 'Can we get your phone number, please?',
+    ctaDisabled: true,
+  },
+  textFieldProps: {
+    placeholder: 'gemme dem digits',
+  },
+  autoFillType: 'telephone',
+  determineCtaDisabled: (answer: QuizAnswerType) =>
+    (answer as string).length < 1,
+}
+
 const textFieldSlideProps: TextFieldSlideProps = {
   quizSlideProps: {
     mainText: 'Well that was rude of us...we never got your name.',
@@ -136,6 +149,7 @@ const textFieldSlideProps: TextFieldSlideProps = {
   textFieldProps: {
     placeholder: 'Enter your name',
   },
+  autoFillType: 'name',
   determineCtaDisabled: (answer: QuizAnswerType) =>
     (answer as string).length < 1,
 }
@@ -251,6 +265,11 @@ export const mockQuizData: QuizData = {
       type: 'MultipleChoiceSlide',
       props: multipleChoiceMustAcceptSlideProps,
     },
+    {
+      id: 'enter-phone',
+      type: 'TextFieldSlide',
+      props: textFieldPhoneSlideProps,
+    },
     {
       id: 'enter-name',
       type: 'TextFieldSlide',

package/build/commands/utils/graphql.d.ts

@@ -1,92 +0,0 @@
-export interface QueryUserErrors {
-    code: string;
-    message: string;
-    field: string[];
-}
-export interface CreateUploadParameters {
-    filename: string;
-    fileSize: number;
-    checksum: string;
-    mimeType: string;
-}
-export declare const createUpload: ({ filename, fileSize, checksum, mimeType, }: CreateUploadParameters) => Promise<{
-    __typename?: "SubmissionUploadCreatePayload" | undefined;
-    upload?: {
-        __typename?: "StagedUpload" | undefined;
-        url: any;
-        headers: string;
-        id: string;
-    } | null | undefined;
-    userErrors: {
-        __typename?: "SubmissionUploadCreateUserError" | undefined;
-        code: import("../types/autogenerated/shop-minis-admin-api/graphql.js").SubmissionUploadCreateUserErrorCode;
-        message: string;
-        field?: string[] | null | undefined;
-    }[];
-}>;
-export interface CreateSubmissionParameters {
-    description: string;
-    uploadId: string;
-}
-export declare const createSubmission: ({ description, uploadId, }: CreateSubmissionParameters) => Promise<{
-    __typename?: "SubmissionCreatePayload" | undefined;
-    submission?: {
-        __typename?: "Submission" | undefined;
-        reference: string;
-        description: string;
-        status: import("../types/autogenerated/shop-minis-admin-api/graphql.js").SubmissionStatus;
-        submittedAt: any;
-    } | null | undefined;
-    userErrors: {
-        __typename?: "SubmissionCreateUserError" | undefined;
-        code: import("../types/autogenerated/shop-minis-admin-api/graphql.js").SubmissionCreateUserErrorCode;
-        message: string;
-        field?: string[] | null | undefined;
-    }[];
-}>;
-export interface CancelSubmissionParameters {
-    reference: string;
-}
-export declare const cancelSubmission: ({ reference, }: CancelSubmissionParameters) => Promise<{
-    __typename?: "SubmissionCancelPayload" | undefined;
-    submission?: {
-        __typename?: "Submission" | undefined;
-        reference: string;
-        description: string;
-        status: import("../types/autogenerated/shop-minis-admin-api/graphql.js").SubmissionStatus;
-        submittedAt: any;
-    } | null | undefined;
-    userErrors: {
-        __typename?: "SubmissionCancelUserError" | undefined;
-        code: import("../types/autogenerated/shop-minis-admin-api/graphql.js").SubmissionCancelUserErrorCode;
-        message: string;
-        field?: string[] | null | undefined;
-    }[];
-}>;
-export interface GetSubmissionsParameters {
-    first?: number;
-}
-export declare const getSubmissions: ({ first, }?: GetSubmissionsParameters | undefined) => Promise<{
-    __typename?: "SubmissionConnection" | undefined;
-    nodes: {
-        __typename?: "Submission" | undefined;
-        reference: string;
-        description: string;
-        status: import("../types/autogenerated/shop-minis-admin-api/graphql.js").SubmissionStatus;
-        submittedAt: any;
-    }[];
-    pageInfo: {
-        __typename?: "PageInfo" | undefined;
-        hasNextPage: boolean;
-        hasPreviousPage: boolean;
-        startCursor?: string | null | undefined;
-        endCursor?: string | null | undefined;
-    };
-}>;
-export declare function getPendingSubmission(): Promise<{
-    __typename?: "Submission" | undefined;
-    reference: string;
-    description: string;
-    status: import("../types/autogenerated/shop-minis-admin-api/graphql.js").SubmissionStatus;
-    submittedAt: any;
-} | null>;

package/build/commands/utils/graphql.js

@@ -1,123 +0,0 @@
-import { GraphQLClient } from 'graphql-request';
-import { graphql } from '../types/autogenerated/shop-minis-admin-api/gql.js';
-import { SHOP_MINIS_ADMIN_API, SHOP_MINIS_ADMIN_API_KEY } from '../config.js';
-const client = new GraphQLClient(SHOP_MINIS_ADMIN_API, {
-    headers: {
-        Authorization: `Bearer ${SHOP_MINIS_ADMIN_API_KEY}`,
-    },
-});
-const createUploadQuery = graphql(/* GraphQL */ `
-  mutation CreateUpload(
-    $filename: String!
-    $fileSize: Int!
-    $checksum: String!
-    $mimeType: String!
-  ) {
-    submissionUploadCreate(
-      input: {
-        filename: $filename
-        fileSize: $fileSize
-        checksum: $checksum
-        mimeType: $mimeType
-      }
-    ) {
-      upload {
-        url
-        headers
-        id
-      }
-      userErrors {
-        code
-        message
-        field
-      }
-    }
-  }
-`);
-export const createUpload = async ({ filename, fileSize, checksum, mimeType, }) => {
-    const data = await client.request(createUploadQuery, {
-        filename,
-        fileSize,
-        checksum,
-        mimeType,
-    }, {});
-    return data.submissionUploadCreate;
-};
-const createSubmissionQuery = graphql(/* GraphQL */ `
-  mutation CreateSubmission($description: String!, $uploadId: ID!) {
-    submissionCreate(description: $description, uploadId: $uploadId) {
-      submission {
-        reference
-        description
-        status
-        submittedAt
-      }
-      userErrors {
-        code
-        message
-        field
-      }
-    }
-  }
-`);
-export const createSubmission = async ({ description, uploadId, }) => {
-    const data = await client.request(createSubmissionQuery, {
-        description,
-        uploadId,
-    }, {});
-    return data.submissionCreate;
-};
-const cancelSubmissionQuery = graphql(/* GraphQL */ `
-  mutation CancelSubmission($reference: String!) {
-    submissionCancel(reference: $reference) {
-      submission {
-        reference
-        description
-        status
-        submittedAt
-      }
-      userErrors {
-        code
-        message
-        field
-      }
-    }
-  }
-`);
-export const cancelSubmission = async ({ reference, }) => {
-    const data = await client.request(cancelSubmissionQuery, {
-        reference,
-    }, {});
-    return data.submissionCancel;
-};
-const getSubmissionQuery = graphql(/* GraphQL */ `
-  query Submissions($first: Int) {
-    submissions(first: $first) {
-      nodes {
-        reference
-        description
-        status
-        submittedAt
-      }
-      pageInfo {
-        hasNextPage
-        hasPreviousPage
-        startCursor
-        endCursor
-      }
-    }
-  }
-`);
-export const getSubmissions = async ({ first = 10, } = {}) => {
-    const data = await client.request(getSubmissionQuery, { first }, {});
-    return data.submissions;
-};
-export async function getPendingSubmission() {
-    const submissions = await getSubmissions();
-    const pendingSubmissions = submissions.nodes.filter(submission => submission.status === 'PENDING');
-    // There should only ever be one
-    if (pendingSubmissions.length)
-        return pendingSubmissions[0];
-    return null;
-}
-//# sourceMappingURL=graphql.js.map

package/build/commands/utils/graphql.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"graphql.js","sourceRoot":"","sources":["../../../src/commands/utils/graphql.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAA;AAE7C,OAAO,EAAC,OAAO,EAAC,MAAM,oDAAoD,CAAA;AAC1E,OAAO,EAAC,oBAAoB,EAAE,wBAAwB,EAAC,MAAM,cAAc,CAAA;AAE3E,MAAM,MAAM,GAAG,IAAI,aAAa,CAAC,oBAAoB,EAAE;IACrD,OAAO,EAAE;QACP,aAAa,EAAE,UAAU,wBAAwB,EAAE;KACpD;CACF,CAAC,CAAA;AAQF,MAAM,iBAAiB,GAAG,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2B/C,CAAC,CAAA;AASF,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,EAAE,EACjC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,GACe,EAAE,EAAE;IAC3B,MAAM,IAAI,GAAG,MAAM,MAAM,CAAC,OAAO,CAC/B,iBAAiB,EACjB;QACE,QAAQ;QACR,QAAQ;QACR,QAAQ;QACR,QAAQ;KACT,EACD,EAAE,CACH,CAAA;IAED,OAAO,IAAI,CAAC,sBAAsB,CAAA;AACpC,CAAC,CAAA;AAED,MAAM,qBAAqB,GAAG,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;;;;;;CAgBnD,CAAC,CAAA;AAOF,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,EAAE,EACrC,WAAW,EACX,QAAQ,GACmB,EAAE,EAAE;IAC/B,MAAM,IAAI,GAAG,MAAM,MAAM,CAAC,OAAO,CAC/B,qBAAqB,EACrB;QACE,WAAW;QACX,QAAQ;KACT,EACD,EAAE,CACH,CAAA;IAED,OAAO,IAAI,CAAC,gBAAgB,CAAA;AAC9B,CAAC,CAAA;AAED,MAAM,qBAAqB,GAAG,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;;;;;;CAgBnD,CAAC,CAAA;AAMF,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,EAAE,EACrC,SAAS,GACkB,EAAE,EAAE;IAC/B,MAAM,IAAI,GAAG,MAAM,MAAM,CAAC,OAAO,CAC/B,qBAAqB,EACrB;QACE,SAAS;KACV,EACD,EAAE,CACH,CAAA;IAED,OAAO,IAAI,CAAC,gBAAgB,CAAA;AAC9B,CAAC,CAAA;AAED,MAAM,kBAAkB,GAAG,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;;;;;;;CAiBhD,CAAC,CAAA;AAMF,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,EAAE,EACnC,KAAK,GAAG,EAAE,MAC8B,EAAE,EAAE,EAAE;IAC9C,MAAM,IAAI,GAAG,MAAM,MAAM,CAAC,OAAO,CAAC,kBAAkB,EAAE,EAAC,KAAK,EAAC,EAAE,EAAE,CAAC,CAAA;IAElE,OAAO,IAAI,CAAC,WAAW,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,CAAC,KAAK,UAAU,oBAAoB;IACxC,MAAM,WAAW,GAAG,MAAM,cAAc,EAAE,CAAA;IAC1C,MAAM,kBAAkB,GAAG,WAAW,CAAC,KAAK,CAAC,MAAM,CACjD,UAAU,CAAC,EAAE,CAAC,UAAU,CAAC,MAAM,KAAK,SAAS,CAC9C,CAAA;IAED,gCAAgC;IAChC,IAAI,kBAAkB,CAAC,MAAM;QAAE,OAAO,kBAAkB,CAAC,CAAC,CAAC,CAAA;IAE3D,OAAO,IAAI,CAAA;AACb,CAAC"}