Merge pull request #45 from Shopify/small-example-app-fixes

Small example app fixes

Author: Jdiep7

app/models/QRCode.server.js

@@ -1,9 +1,9 @@
 import qrcode from "qrcode";
 import invariant from "tiny-invariant";
 
+// [START get-qrcode]
 const METAOBJECT_TYPE = "$app:qrcode";
 
-// [START get-qrcode]
 export async function getQRCode(handle, graphql, shop) {
   const response = await graphql(
     `
@@ -103,7 +103,6 @@ export async function getQRCodes(graphql, shop) {
 
   return Promise.all(metaobjects.map((mo) => transformMetaobject(mo, shop)));
 }
-// [END get-qrcode]
 
 async function transformMetaobject(metaobject, shop) {
   const product = metaobject.product?.reference;
@@ -132,6 +131,7 @@ async function transformMetaobject(metaobject, shop) {
 
   return qrCode;
 }
+// [END get-qrcode]
 
 // [START get-qrcode-image]
 export async function getQRCodeImage(handle, shop) {
@@ -240,6 +240,7 @@ export async function incrementQRCodeScans(id, currentScans, graphql) {
 }
 // [END increment-scans]
 
+// [START generate-handle]
 function slugify(text) {
   return text
     .toLowerCase()
@@ -250,6 +251,7 @@ function slugify(text) {
 export function generateHandle(title) {
   return `${slugify(title)}-${Date.now().toString(36)}`;
 }
+// [END generate-handle]
 
 // [START validate-qrcode]
 export function validateQRCode(data) {

app/routes/app._index.jsx

@@ -1,4 +1,4 @@
-import { useLoaderData, Link } from "react-router";
+import { useLoaderData } from "react-router";
 import { boundary } from "@shopify/shopify-app-react-router/server";
 
 import { authenticate } from "../shopify.server";
@@ -48,11 +48,13 @@ const EmptyQRCodeState = () => (
 );
 // [END empty]
 
+// [START truncate]
 function truncate(str, { length = 25 } = {}) {
   if (!str) return "";
   if (str.length <= length) return str;
   return str.slice(0, length) + "…";
 }
+// [END truncate]
 
 // [START table]
 const QRTable = ({ qrCodes }) => (

app/routes/app.qrcodes.$id.jsx

@@ -3,8 +3,6 @@ import {
   useActionData,
   useLoaderData,
   useSubmit,
-  useNavigation,
-  useNavigate,
   useParams,
 } from "react-router";
 import { authenticate } from "../shopify.server";
@@ -39,12 +37,9 @@ export async function loader({ request, params }) {
 
 // [START action]
 export async function action({ request, params }) {
-  const { session, admin, redirect } = await authenticate.admin(request);
+  const { admin, redirect } = await authenticate.admin(request);
 
-  /** @type {any} */
-  const data = {
-    ...Object.fromEntries(await request.formData()),
-  };
+  const data = Object.fromEntries(await request.formData());
 
   if (data.action === "delete") {
     await deleteQRCode(data.metaobjectId, admin.graphql);
@@ -72,7 +67,6 @@ export async function action({ request, params }) {
 // [END action]
 
 export default function QRCodeForm() {
-  const navigate = useNavigate();
   const { id } = useParams();
 
   // [START state]
@@ -81,7 +75,6 @@ export default function QRCodeForm() {
   const [initialFormState, setInitialFormState] = useState(qrCode);
   const [formState, setFormState] = useState(qrCode);
   const errors = useActionData()?.errors || {};
-  const isSaving = useNavigation().state === "submitting";
   const isDirty =
     JSON.stringify(formState) !== JSON.stringify(initialFormState);
   // [END state]
@@ -185,6 +178,7 @@ export default function QRCodeForm() {
         <button variant="primary" onClick={handleSave}></button>
         <button onClick={handleReset}></button>
       </ui-save-bar>
+      {/* [END save-bar] */}
       <form onSubmit={handleSave} onReset={handleReset}>
         {/* [START polaris] */}
         <s-page heading={initialFormState.title || "Create QR code"}>
@@ -316,7 +310,10 @@ export default function QRCodeForm() {
                   </s-button>
                 )}
                 {errors.productId ? (
-                  <s-text tone="critical">{errors.productId}</s-text>
+                  <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
+                    <s-icon type="alert-circle" tone="critical" size="small" />
+                    <s-text tone="critical" variant="bodySm">{errors.productId}</s-text>
+                  </div>
                 ) : null}
               </s-stack>
             </s-stack>

shopify.app.toml

@@ -12,44 +12,57 @@ include_config_on_deploy = true
 [webhooks]
 api_version = "2026-04"
 
+  [[webhooks.subscriptions]]
+  topics = [ "app/uninstalled" ]
+  uri = "/webhooks/app/uninstalled"
+
+  [[webhooks.subscriptions]]
+  topics = [ "app/scopes_update" ]
+  uri = "/webhooks/app/scopes_update"
+
 # [START access-scopes]
 [access_scopes]
 # Learn more at https://shopify.dev/docs/apps/tools/cli/configuration#access_scopes
 scopes = "write_metaobject_definitions,write_metaobjects,write_products"
 # [END access-scopes]
 
 [auth]
-redirect_urls = [ "<YOUR_APP_URL>/api/auth" ]
+redirect_urls = [ "https://example.com/api/auth" ]
+
+[product.metafields.app.demo_info]
+type = "single_line_text_field"
+name = "Demo Source Info"
+description = "Tracks products created by the Shopify app template for development"
+
+  [product.metafields.app.demo_info.access]
+  admin = "merchant_read_write"
 
 # [START metaobject-definition]
 [metaobjects.app.qrcode]
 name = "QR Code"
-display_name_field = "title"
+description = "QR codes that link to products"
 
   [metaobjects.app.qrcode.access]
   admin = "merchant_read_write"
 
 [metaobjects.app.qrcode.fields.title]
-type = "single_line_text_field"
 name = "Title"
+type = "single_line_text_field"
 required = true
 
 [metaobjects.app.qrcode.fields.product]
-type = "product_reference"
 name = "Product"
+type = "product_reference"
 
 [metaobjects.app.qrcode.fields.product_variant]
-type = "variant_reference"
 name = "Product Variant"
+type = "variant_reference"
 
 [metaobjects.app.qrcode.fields.destination]
-type = "single_line_text_field"
 name = "Destination"
-
-  [metaobjects.app.qrcode.fields.destination.validations]
-  choices = [ "product", "cart" ]
+type = "single_line_text_field"
 
 [metaobjects.app.qrcode.fields.scans]
-type = "number_integer"
 name = "Scans"
+type = "number_integer"
 # [END metaobject-definition]