npm - create-shopify-firebase-app - Versions diffs - 1.2.1 → 2.0.0 - Mend

create-shopify-firebase-app 1.2.1 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/templates/web/products.html ADDED Viewed

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Products - {{APP_NAME}}</title>
+  <link rel="stylesheet" href="/css/app.css">
+  <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
+</head>
+<body>
+  <ui-nav-menu>
+    <a href="/" rel="home">Dashboard</a>
+    <a href="/products">Products</a>
+    <a href="/settings">Settings</a>
+    <a href="/polaris">Components</a>
+  </ui-nav-menu>
+  <ui-title-bar title="Products">
+    <button variant="primary" onclick="openResourcePicker()">Resource Picker</button>
+  </ui-title-bar>
+  <div class="page">
+    <!-- Search bar -->
+    <div class="card">
+      <div class="search-wrapper" style="margin-bottom: 0;">
+        <span class="search-icon">&#128269;</span>
+        <input
+          type="text"
+          class="search-input"
+          id="search-input"
+          placeholder="Search products by title..."
+          autocomplete="off"
+        >
+      </div>
+    </div>
+    <!-- Action bar -->
+    <div class="flex items-center justify-between mb-4">
+      <p class="text-secondary text-sm" id="results-count"></p>
+      <button class="btn btn-sm" onclick="openResourcePicker()">
+        &#128270; Use Resource Picker
+      </button>
+    </div>
+    <!-- Results container -->
+    <div id="products-container">
+      <div class="card">
+        <div class="empty-state">
+          <div class="empty-state-icon">&#128722;</div>
+          <h3>Search for products</h3>
+          <p>Enter a search term above to find products in your store, or use the Resource Picker to browse.</p>
+          <button class="btn btn-primary" onclick="document.getElementById('search-input').focus()">
+            Start searching
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Product detail modal -->
+  <ui-modal id="product-detail-modal" variant="large">
+    <div id="product-detail-content" style="padding: 16px;">
+      <div class="loading-state">
+        <div class="spinner"></div>
+        <p>Loading product details...</p>
+      </div>
+    </div>
+    <ui-title-bar title="Product Details">
+      <button variant="primary" onclick="document.getElementById('product-detail-modal').hide()">Done</button>
+    </ui-title-bar>
+  </ui-modal>
+  <!-- Resource picker result modal -->
+  <ui-modal id="picker-result-modal">
+    <div id="picker-result-content" style="padding: 16px;">
+      <p class="text-secondary">No products selected.</p>
+    </div>
+    <ui-title-bar title="Selected Products">
+      <button variant="primary" onclick="document.getElementById('picker-result-modal').hide()">Close</button>
+    </ui-title-bar>
+  </ui-modal>
+  <script src="/js/app.js"></script>
+  <script src="/js/pages/products.js"></script>
+</body>
+</html>

package/templates/web/settings.html ADDED Viewed

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Settings - {{APP_NAME}}</title>
+  <link rel="stylesheet" href="/css/app.css">
+  <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
+</head>
+<body>
+  <ui-nav-menu>
+    <a href="/" rel="home">Dashboard</a>
+    <a href="/products">Products</a>
+    <a href="/settings">Settings</a>
+    <a href="/polaris">Components</a>
+  </ui-nav-menu>
+  <ui-title-bar title="Settings">
+    <button variant="primary" onclick="saveSettings()">Save</button>
+  </ui-title-bar>
+  <ui-save-bar id="save-bar">
+    <button id="save-btn" variant="primary"></button>
+    <button id="discard-btn"></button>
+  </ui-save-bar>
+  <div class="page page-narrow">
+    <!-- Settings form -->
+    <div id="settings-container">
+      <div class="loading-state">
+        <div class="spinner"></div>
+        <p>Loading settings...</p>
+      </div>
+    </div>
+  </div>
+  <script src="/js/app.js"></script>
+  <script src="/js/pages/settings.js"></script>
+</body>
+</html>

package/templates/functions/src/admin-api.ts DELETED Viewed

@@ -1,125 +0,0 @@
-import { Router, Request, Response } from "express";
-import { verifySessionToken } from "./verify-token";
-import { getAccessToken } from "./auth";
-export const adminApiRouter = Router();
-// All admin routes require session token verification
-adminApiRouter.use(verifySessionToken);
-// Shopify API version — update when Shopify releases new versions
-// Docs: https://shopify.dev/docs/api/usage/versioning
-const API_VERSION = "2026-01";
-// ─── Get shop info ───────────────────────────────────────────────────────
-adminApiRouter.get("/shop", async (req: Request, res: Response) => {
-  const shop = (req as any).shopDomain;
-  const accessToken = await getAccessToken(shop);
-  if (!accessToken) {
-    res.status(401).json({ error: "Shop not authenticated" });
-    return;
-  }
-  try {
-    const response = await fetch(
-      `https://${shop}/admin/api/${API_VERSION}/graphql.json`,
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          "X-Shopify-Access-Token": accessToken,
-        },
-        body: JSON.stringify({
-          query: `{ shop { name email myshopifyDomain plan { displayName } } }`,
-        }),
-      },
-    );
-    const data = (await response.json()) as any;
-    res.json({ shop: data.data?.shop });
-  } catch (err: any) {
-    console.error("Shop info error:", err);
-    res.status(500).json({ error: err.message });
-  }
-});
-// ─── Search products (example) ───────────────────────────────────────────
-adminApiRouter.get("/products/search", async (req: Request, res: Response) => {
-  const shop = (req as any).shopDomain;
-  const query = (req.query.q as string) || "";
-  const accessToken = await getAccessToken(shop);
-  if (!accessToken) {
-    res.status(401).json({ error: "Shop not authenticated" });
-    return;
-  }
-  try {
-    const response = await fetch(
-      `https://${shop}/admin/api/${API_VERSION}/graphql.json`,
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          "X-Shopify-Access-Token": accessToken,
-        },
-        body: JSON.stringify({
-          query: `
-            query SearchProducts($query: String!) {
-              products(first: 10, query: $query) {
-                edges {
-                  node {
-                    id
-                    title
-                    handle
-                    status
-                    featuredImage { url }
-                    variants(first: 1) {
-                      edges { node { id price } }
-                    }
-                    priceRangeV2 {
-                      minVariantPrice { amount currencyCode }
-                    }
-                  }
-                }
-              }
-            }
-          `,
-          variables: { query },
-        }),
-      },
-    );
-    const data = (await response.json()) as any;
-    const products = (data.data?.products?.edges || []).map((edge: any) => ({
-      id: edge.node.id,
-      title: edge.node.title,
-      handle: edge.node.handle,
-      status: edge.node.status,
-      image: edge.node.featuredImage?.url || null,
-      variantId: edge.node.variants.edges[0]?.node.id || null,
-      price: edge.node.priceRangeV2?.minVariantPrice?.amount,
-      currency: edge.node.priceRangeV2?.minVariantPrice?.currencyCode,
-    }));
-    res.json({ products });
-  } catch (err: any) {
-    console.error("Product search error:", err);
-    res.status(500).json({ error: err.message });
-  }
-});
-// ──────────────────────────────────────────────────────────────────────────
-// HOW TO ADD A NEW ADMIN API ROUTE:
-//
-//   adminApiRouter.post("/my-endpoint", async (req, res) => {
-//     const shop = (req as any).shopDomain;
-//     const accessToken = await getAccessToken(shop);
-//     // Call Shopify Admin API, write to Firestore, etc.
-//     res.json({ success: true });
-//   });
-//
-// All routes are automatically protected by JWT session token verification.
-// Deploy: firebase deploy --only functions:api
-// ──────────────────────────────────────────────────────────────────────────

package/templates/web/js/bridge.js DELETED Viewed

@@ -1,98 +0,0 @@
-/**
- * App Bridge helper — handles authentication, API calls, and navigation.
- *
- * Security is handled by App Bridge (session tokens) and server-side
- * verification. No manual iframe checks needed.
- */
-(function () {
-  "use strict";
-  window.App = {
-    ready: false,
-    shop: null,
-    host: null,
-    async init() {
-      const params = new URLSearchParams(window.location.search);
-      this.host = params.get("host");
-      this.shop = params.get("shop");
-      await this._waitForShopify();
-      if (!window.shopify) {
-        document.getElementById("app").innerHTML = `
-          <div style="text-align:center;padding:60px 20px;color:#6d7175;">
-            <h2 style="color:#1a1a1a;">Loading...</h2>
-            <p>If this persists, reload from the Shopify admin.</p>
-          </div>
-        `;
-        return;
-      }
-      this.ready = true;
-      window.dispatchEvent(new Event("app-ready"));
-    },
-    _waitForShopify() {
-      return new Promise((resolve) => {
-        if (window.shopify) return resolve();
-        let attempts = 0;
-        const interval = setInterval(() => {
-          if (window.shopify || ++attempts > 50) {
-            clearInterval(interval);
-            resolve();
-          }
-        }, 100);
-      });
-    },
-    async getSessionToken() {
-      if (!window.shopify) throw new Error("App Bridge not loaded");
-      return await window.shopify.idToken();
-    },
-    async apiFetch(path, options = {}) {
-      const token = await this.getSessionToken();
-      const resp = await fetch(path, {
-        ...options,
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${token}`,
-          ...(options.headers || {}),
-        },
-      });
-      if (!resp.ok) {
-        const errText = await resp.text();
-        throw new Error(`API Error ${resp.status}: ${errText}`);
-      }
-      return resp.json();
-    },
-    navigate(page) {
-      const url = new URL(page, window.location.origin);
-      if (this.host) url.searchParams.set("host", this.host);
-      if (this.shop) url.searchParams.set("shop", this.shop);
-      window.location.href = url.pathname + url.search;
-    },
-    showToast(message) {
-      if (window.shopify?.toast) {
-        window.shopify.toast.show(message);
-        return;
-      }
-      const existing = document.querySelector(".toast");
-      if (existing) existing.remove();
-      const toast = document.createElement("div");
-      toast.className = "toast show";
-      toast.textContent = message;
-      document.body.appendChild(toast);
-      setTimeout(() => {
-        toast.classList.remove("show");
-        setTimeout(() => toast.remove(), 300);
-      }, 3000);
-    },
-  };
-  document.addEventListener("DOMContentLoaded", () => window.App.init());
-})();