@shopify/shop-minis-cli 0.0.37 → 0.0.38

package/build/commands/check/index.d.ts

@@ -2,4 +2,5 @@ import { Command } from 'commander';
 export declare function assertDependenciesUpToDate(): Promise<void>;
 export declare function assertApiKeyIsSet(): void;
 export declare function assertNoActiveSubmissions(): Promise<void>;
+export declare function assertManifestValid(): void;
 export declare function loadCommand(parentProgram: Command): Promise<void>;

package/build/commands/check/index.js

@@ -26,13 +26,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadCommand = exports.assertNoActiveSubmissions = exports.assertApiKeyIsSet = exports.assertDependenciesUpToDate = void 0;
+exports.loadCommand = exports.assertManifestValid = exports.assertNoActiveSubmissions = exports.assertApiKeyIsSet = exports.assertDependenciesUpToDate = void 0;
 const commander_1 = require("commander");
 const semver_1 = __importDefault(require("semver"));
 const chalk_1 = __importDefault(require("chalk"));
 const dotenv = __importStar(require("dotenv"));
 const exec_async_child_process_1 = require("../utils/exec-async-child-process");
 const versions_1 = require("./utils/versions");
+const manifest_1 = require("./utils/manifest");
 async function assertDependenciesUpToDate() {
     const { stdout: latestCliVersion } = await (0, exec_async_child_process_1.execAsync)({
         cmd: 'npm show @shopify/shop-minis-cli version',
@@ -61,12 +62,21 @@ async function assertNoActiveSubmissions() {
     // TODO: check if there are any active submissions
 }
 exports.assertNoActiveSubmissions = assertNoActiveSubmissions;
+function assertManifestValid() {
+    const { valid, errors } = (0, manifest_1.validateManifest)();
+    if (!valid) {
+        console.warn(chalk_1.default.red(`Manifest invalid: ${errors}`));
+        process.exit(1);
+    }
+}
+exports.assertManifestValid = assertManifestValid;
 async function loadCommand(parentProgram) {
     const command = new commander_1.Command()
         .name('check')
         .version('2.0.0')
         .description('Check your Shop Mini configuration')
         .action(async () => {
+        assertManifestValid();
         assertApiKeyIsSet();
         await assertDependenciesUpToDate();
         await assertNoActiveSubmissions();

package/build/commands/check/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/commands/check/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yCAAiC;AACjC,oDAA2B;AAC3B,kDAAyB;AACzB,+CAAgC;AAEhC,gFAA2D;AAE3D,+CAA2D;AAEpD,KAAK,UAAU,0BAA0B;IAC9C,MAAM,EAAC,MAAM,EAAE,gBAAgB,EAAC,GAAG,MAAM,IAAA,oCAAS,EAAC;QACjD,GAAG,EAAE,0CAA0C;KAChD,CAAC,CAAA;IACF,MAAM,mBAAmB,GACvB,IAAA,qCAA0B,EAAC,yBAAyB,CAAC,IAAI,OAAO,CAAA;IAElE,MAAM,UAAU,GAAG,gBAAM,CAAC,EAAE,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAA;IAEtE,IAAI,CAAC,UAAU,EAAE;QACf,OAAO,CAAC,IAAI,CAAC,eAAK,CAAC,GAAG,CAAC,iDAAiD,CAAC,CAAC,CAAA;QAC1E,OAAO,CAAC,GAAG,CACT,sBAAsB,mBAAmB,aAAa,gBAAgB,GAAG,CAC1E,CAAA;QACD,OAAO,CAAC,GAAG,CACT,OAAO,eAAK,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAC9B,2CAA2C,CAC5C,aAAa,CACf,CAAA;QACD,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;KAChB;AACH,CAAC;AArBD,gEAqBC;AAED,SAAgB,iBAAiB;IAC/B,MAAM,CAAC,MAAM,EAAE,CAAA;IACf,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAA;IAE7C,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,CAAC,IAAI,CAAC,eAAK,CAAC,GAAG,CAAC,8CAA8C,CAAC,CAAC,CAAA;QACvE,OAAO,CAAC,GAAG,CACT,qDAAqD,eAAK,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAC5E,8CAA8C,CAC/C,EAAE,CACJ,CAAA;QACD,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;KAChB;AACH,CAAC;AAbD,8CAaC;AAEM,KAAK,UAAU,yBAAyB;IAC7C,kDAAkD;AACpD,CAAC;AAFD,8DAEC;AAEM,KAAK,UAAU,WAAW,CAAC,aAAsB;IACtD,MAAM,OAAO,GAAG,IAAI,mBAAO,EAAE;SAC1B,IAAI,CAAC,OAAO,CAAC;SACb,OAAO,CAAC,OAAO,CAAC;SAChB,WAAW,CAAC,oCAAoC,CAAC;SACjD,MAAM,CAAC,KAAK,IAAI,EAAE;QACjB,iBAAiB,EAAE,CAAA;QACnB,MAAM,0BAA0B,EAAE,CAAA;QAClC,MAAM,yBAAyB,EAAE,CAAA;IACnC,CAAC,CAAC,CAAA;IAEJ,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;AACnC,CAAC;AAZD,kCAYC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/commands/check/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yCAAiC;AACjC,oDAA2B;AAC3B,kDAAyB;AACzB,+CAAgC;AAEhC,gFAA2D;AAE3D,+CAA2D;AAC3D,+CAAiD;AAE1C,KAAK,UAAU,0BAA0B;IAC9C,MAAM,EAAC,MAAM,EAAE,gBAAgB,EAAC,GAAG,MAAM,IAAA,oCAAS,EAAC;QACjD,GAAG,EAAE,0CAA0C;KAChD,CAAC,CAAA;IACF,MAAM,mBAAmB,GACvB,IAAA,qCAA0B,EAAC,yBAAyB,CAAC,IAAI,OAAO,CAAA;IAElE,MAAM,UAAU,GAAG,gBAAM,CAAC,EAAE,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAA;IAEtE,IAAI,CAAC,UAAU,EAAE;QACf,OAAO,CAAC,IAAI,CAAC,eAAK,CAAC,GAAG,CAAC,iDAAiD,CAAC,CAAC,CAAA;QAC1E,OAAO,CAAC,GAAG,CACT,sBAAsB,mBAAmB,aAAa,gBAAgB,GAAG,CAC1E,CAAA;QACD,OAAO,CAAC,GAAG,CACT,OAAO,eAAK,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAC9B,2CAA2C,CAC5C,aAAa,CACf,CAAA;QACD,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;KAChB;AACH,CAAC;AArBD,gEAqBC;AAED,SAAgB,iBAAiB;IAC/B,MAAM,CAAC,MAAM,EAAE,CAAA;IACf,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAA;IAE7C,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,CAAC,IAAI,CAAC,eAAK,CAAC,GAAG,CAAC,8CAA8C,CAAC,CAAC,CAAA;QACvE,OAAO,CAAC,GAAG,CACT,qDAAqD,eAAK,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAC5E,8CAA8C,CAC/C,EAAE,CACJ,CAAA;QACD,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;KAChB;AACH,CAAC;AAbD,8CAaC;AAEM,KAAK,UAAU,yBAAyB;IAC7C,kDAAkD;AACpD,CAAC;AAFD,8DAEC;AAED,SAAgB,mBAAmB;IACjC,MAAM,EAAC,KAAK,EAAE,MAAM,EAAC,GAAG,IAAA,2BAAgB,GAAE,CAAA;IAE1C,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,CAAC,IAAI,CAAC,eAAK,CAAC,GAAG,CAAC,qBAAqB,MAAM,EAAE,CAAC,CAAC,CAAA;QACtD,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;KAChB;AACH,CAAC;AAPD,kDAOC;AAEM,KAAK,UAAU,WAAW,CAAC,aAAsB;IACtD,MAAM,OAAO,GAAG,IAAI,mBAAO,EAAE;SAC1B,IAAI,CAAC,OAAO,CAAC;SACb,OAAO,CAAC,OAAO,CAAC;SAChB,WAAW,CAAC,oCAAoC,CAAC;SACjD,MAAM,CAAC,KAAK,IAAI,EAAE;QACjB,mBAAmB,EAAE,CAAA;QACrB,iBAAiB,EAAE,CAAA;QACnB,MAAM,0BAA0B,EAAE,CAAA;QAClC,MAAM,yBAAyB,EAAE,CAAA;IACnC,CAAC,CAAC,CAAA;IAEJ,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;AACnC,CAAC;AAbD,kCAaC"}

package/build/commands/check/utils/manifest.d.ts

@@ -0,0 +1,4 @@
+export declare function validateManifest(): {
+    valid: boolean;
+    errors: string[];
+};

package/build/commands/check/utils/manifest.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateManifest = void 0;
+const jsonschema_1 = require("jsonschema");
+const minis_manifest_1 = require("../../dev/utils/minis-manifest");
+const contextual_image_schema_json_1 = __importDefault(require("./schemas/contextual-image.schema.json"));
+const contextual_object_schema_json_1 = __importDefault(require("./schemas/contextual-object.schema.json"));
+const manifest_schema_json_1 = __importDefault(require("./schemas/manifest.schema.json"));
+const visibility_schema_json_1 = __importDefault(require("./schemas/visibility.schema.json"));
+function validateManifest() {
+    const manifest = (0, minis_manifest_1.getMiniManifest)();
+    const validator = new jsonschema_1.Validator();
+    validator.addSchema(contextual_image_schema_json_1.default, '/contextual-image.schema.json');
+    validator.addSchema(contextual_object_schema_json_1.default, '/contextual-object.schema.json');
+    validator.addSchema(visibility_schema_json_1.default, '/visibility.schema.json');
+    const result = validator.validate(manifest, manifest_schema_json_1.default);
+    return {
+        valid: result.valid,
+        errors: result.errors.map(validationError => validationError.stack),
+    };
+}
+exports.validateManifest = validateManifest;
+//# sourceMappingURL=manifest.js.map

package/build/commands/check/utils/manifest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"manifest.js","sourceRoot":"","sources":["../../../../src/commands/check/utils/manifest.ts"],"names":[],"mappings":";;;;;;AAAA,2CAAoC;AAEpC,mEAA8D;AAE9D,0GAA0E;AAC1E,4GAA4E;AAC5E,0FAA2D;AAC3D,8FAA+D;AAE/D,SAAgB,gBAAgB;IAC9B,MAAM,QAAQ,GAAG,IAAA,gCAAe,GAAE,CAAA;IAClC,MAAM,SAAS,GAAG,IAAI,sBAAS,EAAE,CAAA;IAEjC,SAAS,CAAC,SAAS,CAAC,sCAAqB,EAAE,+BAA+B,CAAC,CAAA;IAC3E,SAAS,CAAC,SAAS,CAAC,uCAAsB,EAAE,gCAAgC,CAAC,CAAA;IAC7E,SAAS,CAAC,SAAS,CAAC,gCAAgB,EAAE,yBAAyB,CAAC,CAAA;IAEhE,MAAM,MAAM,GAAG,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAE,8BAAc,CAAC,CAAA;IAE3D,OAAO;QACL,KAAK,EAAE,MAAM,CAAC,KAAK;QACnB,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC;KACpE,CAAA;AACH,CAAC;AAdD,4CAcC"}

package/build/commands/check/utils/schemas/contextual-image.schema.json

@@ -0,0 +1,21 @@
+{
+    "$id": "/contextual-image.schema.json",
+    "$schema": "http://json-schema.org/draft-07/schema",
+    "type": "object",
+    "title": "Contextual image entry-point",
+    "required": ["default_value"],
+    "properties": {
+        "namespace": {
+            "type": "string"
+        },
+        "key": {
+            "type": "string"
+        },
+        "default_value": {
+            "type": "array",
+            "items": {
+                "type": "string"
+            }
+        }
+    }
+}

package/build/commands/check/utils/schemas/contextual-object.schema.json

@@ -0,0 +1,17 @@
+{
+    "$id": "/contextual-object.schema.json",
+    "$schema": "http://json-schema.org/draft-07/schema",
+    "type": "object",
+    "title": "Contextual entry-point",
+    "properties": {
+        "namespace": {
+            "type": "string"
+        },
+        "key": {
+            "type": "string"
+        },
+        "default_value": {
+            "type": "string"
+        }
+    }
+}

package/build/commands/check/utils/schemas/manifest.schema.json

@@ -0,0 +1,226 @@
+{
+    "$schema": "http://json-schema.org/draft-07/schema",
+    "type": "object",
+    "title": "Shop Mini Manifest",
+    "additionalProperties": false,
+    "properties": {
+        "name": {
+            "type": "string",
+            "description": "The name of the Mini",
+            "maxLength": 20
+        },
+        "handle": {
+            "type": "string",
+            "description": "A unique identifier for the Mini",
+            "pattern": "^(?:@[a-z0-9-*~][a-z0-9-*._~]*/)?[a-z0-9-~][a-z0-9-._~]*$"
+        },
+        "description": {
+            "type": "string",
+            "description": "The description of the Mini",
+            "maxLength": 100
+        },
+        "icon_url": {
+            "type": "string",
+            "title": "The icon of the Mini",
+            "description": "An absolute path to the image (e.g. https://example.com/icon.png)"
+        },
+        "partner_name": {
+            "type": "string",
+            "description": "The name of the Shopify partner who built the Mini",
+            "maxLength": 20
+        },
+        "contact_email": {
+            "type": "string",
+            "description": "An email address for receiving notifications.",
+            "format": "email"
+        },
+        "shopify_app_ids": {
+            "type": "array",
+            "description": "The list of Shopify app IDs associated with the Mini",
+            "items": {
+                "type": "integer"
+            }
+        },
+        "notification_topics": {
+            "type": "array",
+            "description": "Specifies the reason for communication and the scope for messages. An example of a topic could be live streaming related notifications related to a merchant",
+            "items": {
+                "type": "object",
+                "required": ["handle", "description", "scope"],
+                "properties": {
+                    "handle": {
+                        "type": "string",
+                        "description": "Text identifier of the topic"
+                    },
+                    "description": {
+                        "type": "string",
+                        "description": "Reason for the communication using the topic"
+                    },
+                    "scope": {
+                        "type": "string",
+                        "description": "The scope in which messages are processed for the topic. SHOP means each message will be processed in the scope of a specific merchant, PRODUCT means each message will be processed in the scope of a specific product",
+                        "enum": ["SHOP", "PRODUCT"]
+                    }
+                }
+            }
+        },
+        "notification_templates": {
+            "type": "array",
+            "description": "Specify the message which will be sent to subscribers when notification is triggered by the mutation",
+            "items": {
+                "type": "object",
+                "required": [
+                    "handle",
+                    "topic_handle",
+                    "title",
+                    "body",
+                    "cooldown_minutes"
+                ],
+                "properties": {
+                    "handle": {
+                        "type": "string",
+                        "description": "Text identifier of the template"
+                    },
+                    "topic_handle": {
+                        "type": "string",
+                        "description": "Reference to a notification topic"
+                    },
+                    "title": {
+                        "type": "string",
+                        "description": "Template of notification title, supports interpolation using the Liquid template language"
+                    },
+                    "body": {
+                        "type": "string",
+                        "description": "Template of notification body, supports interpolation using the Liquid template language"
+                    },
+                    "cooldown_minutes": {
+                        "type": "number",
+                        "description": "How often the template allowes to send the exact same message to the same user, in minutes"
+                    }
+                }
+            }
+        },
+        "entry_points": {
+            "type": "array",
+            "description": "A list of entry points that the Mini supports",
+            "items": {
+                "type": "object",
+                "properties": {
+                    "location": {
+                        "type": "string",
+                        "enum": ["PRODUCT_PAGE", "STORE_PAGE"]
+                    },
+                    "type": {
+                        "type": "string",
+                        "enum": ["CONTENT_CARD", "ACTION_BUTTON", "EVENT_CARD"]
+                    },
+                    "primary_text": {
+                        "$ref": "/contextual-object.schema.json"
+                    },
+                    "call_to_action_text": {
+                        "$ref": "/contextual-object.schema.json"
+                    },
+                    "images": {
+                        "$ref": "/contextual-image.schema.json"
+                    },
+                    "visibility": {
+                        "$ref": "/visibility.schema.json"
+                    },
+                    "visibility_rule": {
+                        "$ref": "/visibility.schema.json"
+                    },
+                    "pre_active_images": {
+                        "$ref": "/contextual-image.schema.json",
+                        "description": "The images list used to render entry point in PRE_ACTIVE state"
+                    },
+                    "post_active_images": {
+                        "$ref": "/contextual-image.schema.json",
+                        "description": "(Optional) The images list used to render entry point in POST_ACTIVE state"
+                    },
+                    "notification_topic": {
+                        "type": "string",
+                        "description": "The notification topic handle which Shop users could subscribe to, must match one from the notification_topics manifest section"
+                    },
+                    "event_status": {
+                        "type": "object",
+                        "description": "The status of related event, affects how the user can interact with entry point",
+                        "required": ["default_value"],
+                        "properties": {
+                            "namespace": {
+                                "type": "string"
+                            },
+                            "key": {
+                                "type": "string"
+                            },
+                            "default_value": {
+                                "type": "string",
+                                "enum": ["PRE_ACTIVE", "ACTIVE", "POST_ACTIVE"]
+                            }
+                        }
+                    }
+                },
+                "allOf": [
+                    {
+                        "if": {
+                            "properties": {
+                                "type": {
+                                    "const": "CONTENT_CARD"
+                                }
+                            }
+                        },
+                        "then": {
+                            "required": ["location", "type", "primary_text", "images"]
+                        }
+                    },
+                    {
+                        "if": {
+                            "properties": {
+                                "type": {
+                                    "const": "ACTION_BUTTON"
+                                }
+                            }
+                        },
+                        "then": {
+                            "required": ["location", "type", "call_to_action_text"]
+                        }
+                    },
+                    {
+                        "if": {
+                            "properties": {
+                                "type": {
+                                    "const": "EVENT_CARD"
+                                }
+                            }
+                        },
+                        "then": {
+                            "required": [
+                                "location",
+                                "type",
+                                "primary_text",
+                                "images",
+                                "notification_topic",
+                                "pre_active_images"
+                            ]
+                        }
+                    }
+                ]
+            }
+        },
+        "ios_app_store_url": {
+            "type": "string",
+            "description": "The URL to the Mini's publisher's app on the iOS App Store"
+        },
+        "android_play_store_url": {
+            "type": "string",
+            "description": "The URL to the Mini's publisher's app on the Android Play Store"
+        }
+    },
+    "required": [
+        "name",
+        "handle",
+        "icon_url",
+        "partner_name",
+        "shopify_app_ids",
+        "entry_points"
+    ]
+}

package/build/commands/check/utils/schemas/visibility.schema.json

@@ -0,0 +1,17 @@
+{
+    "$id": "/visibility.schema.json",
+    "$schema": "http://json-schema.org/draft-07/schema",
+    "type": "object",
+    "title": "Entry-point visibility schema",
+    "properties": {
+        "owner_type": {
+            "type": "string"
+        },
+        "namespace": {
+            "type": "string"
+        },
+        "key": {
+            "type": "string"
+        }
+    }
+}

package/package.json

@@ -4,7 +4,7 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org/"
   },
-  "version": "0.0.37",
+  "version": "0.0.38",
   "description": "Shop Minis CLI",
   "main": "build/index.js",
   "bin": {
@@ -32,6 +32,8 @@
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
+    "@graphql-codegen/cli": "^3.2.2",
+    "@graphql-codegen/client-preset": "^2.1.1",
     "@react-native-community/eslint-config": "^3.1.0",
     "@shopify/eslint-plugin": "^42.0.1",
     "@types/connect": "^3.4.35",
@@ -54,6 +56,7 @@
     "eslint-plugin-reanimated": "^2.0.0",
     "jest": "^29.3.1",
     "prettier": "^2.7.1",
+    "ts-jest": "^29.0.5",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.4"
   },
@@ -61,7 +64,9 @@
     "@google-cloud/storage": "^6.9.0",
     "@react-native-community/cli": "^10.0.0",
     "@react-native-community/cli-plugin-metro": "^10.0.0",
+    "@shopify/cli-kit": "3.44",
     "@types/qrcode-terminal": "^0.12.0",
+    "archiver": "^5.3.1",
     "chalk": "^4.1.2",
     "commander": "^9.4.1",
     "connect": "^3.7.0",
@@ -69,9 +74,11 @@
     "fs-extra": "^11.1.0",
     "graphql": "^15.0.0",
     "graphql-config": "^4.3.5",
+    "graphql-request": "^5.2.0",
     "graphql-typescript-definitions": "^3.2.2",
     "inquirer": "^8.2.3",
     "internal-ip": "^6.2.0",
+    "jsonschema": "^1.4.1",
     "lodash": "^4.17.21",
     "metro": "^0.73.6",
     "metro-config": "^0.73.6",

package/templates/__template_common/package.json

@@ -40,6 +40,7 @@
     "graphql": "^15.0.0",
     "intl": "^1.2.5",
     "jest": "^26.6.3",
+    "jsonschema": "^1.4.1",
     "metro-react-native-babel-preset": "^0.67.0",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",

package/templates/__template_hello_world/src/components/ComponentLink.ts

@@ -28,8 +28,8 @@ export const componentLinks: ComponentLink[] = [
     screen: '__MINI_APP_HANDLE_PASCAL_CASE__.Icons',
   },
   {
-    name: 'ImageCarousel',
-    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.ImageCarousel',
+    name: 'ImageMultipleChoice',
+    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.ImageMultipleChoice',
   },
   {
     name: 'Inputs',
@@ -75,6 +75,10 @@ export const componentLinks: ComponentLink[] = [
     name: 'QuantityPicker',
     screen: '__MINI_APP_HANDLE_PASCAL_CASE__.QuantityPicker',
   },
+  {
+    name: 'Quiz Example',
+    screen: '__MINI_APP_HANDLE_PASCAL_CASE__.Quiz',
+  },
   {
     name: 'WebView',
     screen: '__MINI_APP_HANDLE_PASCAL_CASE__.WebView',

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

@@ -0,0 +1,54 @@
+import {
+  ImageCarousel,
+  ImageCarouselProps,
+} from '@shopify/shop-minis-platform-sdk'
+import {useCallback, useEffect, useState} from 'react'
+
+import {QuizSlide, QuizSlideProps} from './QuizSlide'
+import {SlideLogic} from './types'
+
+export interface ImageCarouselSlideProps extends SlideLogic<number[]> {
+  quizSlideProps: QuizSlideProps
+  imageCarouselProps: ImageCarouselProps
+}
+
+export const ImageCarouselSlide = ({
+  quizSlideProps,
+  imageCarouselProps,
+  determineCtaDisabled,
+  handleAnswerSelection,
+}: ImageCarouselSlideProps) => {
+  const [selectedIndex, setSelectedIndex] = useState<number>()
+
+  const [isCtaDisabled, setCtaDisabled] = useState(
+    quizSlideProps.ctaDisabled ?? false
+  )
+
+  const handleOnChoiceSelected = useCallback((index: number) => {
+    setSelectedIndex(index)
+  }, [])
+
+  useEffect(() => {
+    if (handleAnswerSelection === undefined) return
+
+    handleAnswerSelection(selectedIndex === undefined ? [] : [selectedIndex])
+  }, [handleAnswerSelection, selectedIndex])
+
+  useEffect(() => {
+    if (determineCtaDisabled === undefined) return
+
+    setCtaDisabled(
+      determineCtaDisabled(selectedIndex === undefined ? [] : [selectedIndex])
+    )
+  }, [determineCtaDisabled, selectedIndex])
+
+  return (
+    <QuizSlide {...quizSlideProps} ctaDisabled={isCtaDisabled}>
+      <ImageCarousel
+        {...imageCarouselProps}
+        selectedIndexes={selectedIndex === undefined ? [] : [selectedIndex]}
+        onChoiceSelected={handleOnChoiceSelected}
+      />
+    </QuizSlide>
+  )
+}

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

@@ -0,0 +1,77 @@
+import {
+  Box,
+  MultipleChoice,
+  MultipleChoiceProps,
+  useMultiSelect,
+} from '@shopify/shop-minis-platform-sdk'
+import {useCallback, useEffect, useMemo, useState} from 'react'
+
+import {QuizSlide, QuizSlideProps} from './QuizSlide'
+import {SlideLogic} from './types'
+
+export interface MultipleChoiceSlideProps extends SlideLogic<number[]> {
+  quizSlideProps: QuizSlideProps
+  multipleChoiceProps: MultipleChoiceProps
+  isMultiSelect?: boolean
+}
+
+export const MultipleChoiceSlide = ({
+  quizSlideProps,
+  multipleChoiceProps,
+  isMultiSelect,
+  determineCtaDisabled,
+  handleAnswerSelection,
+}: MultipleChoiceSlideProps) => {
+  const [multiSelectedIndexes, toggleIndex] = useMultiSelect()
+  const [selectedIndex, setSelectedIndex] = useState<number>()
+
+  const [isCtaDisabled, setCtaDisabled] = useState(
+    quizSlideProps.ctaDisabled ?? false
+  )
+
+  const singleSelectIndex = useMemo(
+    () => (selectedIndex === undefined ? [] : [selectedIndex]),
+    [selectedIndex]
+  )
+
+  const selectedIndexes = useMemo(
+    () => (isMultiSelect ? multiSelectedIndexes : singleSelectIndex),
+    [isMultiSelect, multiSelectedIndexes, singleSelectIndex]
+  )
+
+  const handleOnChoiceSelected = useCallback(
+    (index: number) => {
+      if (isMultiSelect) {
+        toggleIndex(index)
+      } else {
+        setSelectedIndex(index)
+      }
+    },
+    [isMultiSelect, toggleIndex]
+  )
+
+  useEffect(() => {
+    if (selectedIndexes.length < 1 || handleAnswerSelection === undefined)
+      return
+
+    handleAnswerSelection(selectedIndexes)
+  }, [handleAnswerSelection, selectedIndexes])
+
+  useEffect(() => {
+    if (determineCtaDisabled === undefined) return
+
+    setCtaDisabled(determineCtaDisabled(selectedIndexes))
+  }, [determineCtaDisabled, selectedIndexes])
+
+  return (
+    <QuizSlide {...quizSlideProps} ctaDisabled={isCtaDisabled}>
+      <Box marginBottom="xl">
+        <MultipleChoice
+          {...multipleChoiceProps}
+          selectedIndexes={selectedIndexes}
+          onChoiceSelected={handleOnChoiceSelected}
+        />
+      </Box>
+    </QuizSlide>
+  )
+}

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

@@ -0,0 +1,64 @@
+import {createContext, useContext, useMemo} from 'react'
+
+import {useQuizData} from '../../hooks/useQuizData'
+import {useQuizState} from '../../hooks/useQuizState'
+
+import {QuizData, QuizDataState, QuizResult, QuizResultEntry} from './types'
+
+interface QuizContext {
+  recordQuestionResult: (id: string, answer: QuizResultEntry) => void
+  quizResult: QuizResult | undefined
+  quizDataState: QuizDataState | 'Loading'
+  quizData: QuizData | undefined
+  setUserName: (name: string) => void
+  userName: string | undefined
+}
+
+export const QuizContext = createContext<QuizContext>({
+  recordQuestionResult: () => undefined,
+  quizResult: undefined,
+  quizDataState: 'Loading',
+  quizData: undefined,
+  setUserName: (_name: string) => undefined,
+  userName: undefined,
+})
+
+export interface QuizProviderProps {
+  children: React.ReactElement
+}
+
+export const QuizContextProvider = ({children}: QuizProviderProps) => {
+  const {quizDataState, quizData} = useQuizData()
+  const {recordQuestionResult, quizResult, setUserName, userName} =
+    useQuizState()
+
+  const value = useMemo(
+    () => ({
+      recordQuestionResult,
+      quizResult,
+      quizDataState,
+      quizData,
+      setUserName,
+      userName,
+    }),
+    [
+      quizData,
+      quizDataState,
+      quizResult,
+      recordQuestionResult,
+      setUserName,
+      userName,
+    ]
+  )
+  return <QuizContext.Provider value={value}>{children}</QuizContext.Provider>
+}
+
+export const useQuizContext = () => {
+  const context = useContext(QuizContext)
+
+  if (!context) {
+    throw new Error('Make sure to wrap your component with QuizProvider')
+  }
+
+  return context
+}