create-scryme-app 9.69.0

package/template/components/navbar.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import React, { useState } from 'react';
+import Link from 'next/link';
+import { ShoppingBag, User, ShoppingCart, X } from 'lucide-react';
+import { useCart } from '@/providers/cart-provider';
+import { useCustomerAuth } from '@/providers/customer-auth-provider';
+
+export const Navbar: React.FC = () => {
+  const { totalItems, items, subtotal, removeItem, updateQuantity } = useCart();
+  const { user, logout } = useCustomerAuth();
+  const [isCartOpen, setIsCartOpen] = useState(false);
+
+  return (
+    <>
+      <header className="sticky top-0 z-40 bg-white dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-800">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
+          <Link href="/" className="flex items-center gap-2 text-xl font-bold text-zinc-900 dark:text-white">
+            <ShoppingBag className="w-6 h-6 text-indigo-600" />
+            <span>ScrymeStore</span>
+          </Link>
+
+          <nav className="flex items-center gap-6">
+            <Link href="/" className="text-sm font-medium hover:text-indigo-600 transition">
+              Products
+            </Link>
+            <Link href="/account" className="text-sm font-medium hover:text-indigo-600 transition flex items-center gap-1">
+              <User className="w-4 h-4" />
+              <span>{user ? user.firstName || 'Account' : 'Login'}</span>
+            </Link>
+            <button
+              onClick={() => setIsCartOpen(true)}
+              className="relative p-2 text-zinc-700 dark:text-zinc-200 hover:text-indigo-600 transition"
+              aria-label="Shopping Cart"
+            >
+              <ShoppingCart className="w-6 h-6" />
+              {totalItems > 0 && (
+                <span className="absolute top-0 right-0 bg-indigo-600 text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">
+                  {totalItems}
+                </span>
+              )}
+            </button>
+          </nav>
+        </div>
+      </header>
+
+      {/* Slide-over Cart */}
+      {isCartOpen && (
+        <div className="fixed inset-0 z-50 overflow-hidden bg-black/50 backdrop-blur-sm flex justify-end">
+          <div className="w-full max-w-md bg-white dark:bg-zinc-900 h-full shadow-2xl flex flex-col p-6">
+            <div className="flex items-center justify-between border-b pb-4 dark:border-zinc-800">
+              <h2 className="text-lg font-semibold text-zinc-900 dark:text-white">Your Cart ({totalItems})</h2>
+              <button onClick={() => setIsCartOpen(false)} className="text-zinc-500 hover:text-zinc-800 dark:hover:text-white">
+                <X className="w-6 h-6" />
+              </button>
+            </div>
+
+            <div className="flex-1 overflow-y-auto py-4 space-y-4">
+              {items.length === 0 ? (
+                <p className="text-center text-zinc-500 py-10">Your cart is empty.</p>
+              ) : (
+                items.map((item) => (
+                  <div key={item.id} className="flex items-center justify-between border-b pb-3 dark:border-zinc-800">
+                    <div>
+                      <h4 className="font-medium text-zinc-900 dark:text-white">{item.name}</h4>
+                      <p className="text-sm text-zinc-500">${item.price.toFixed(2)}</p>
+                      <div className="flex items-center gap-2 mt-2">
+                        <button
+                          onClick={() => updateQuantity(item.id, item.quantity - 1)}
+                          className="px-2 py-1 bg-zinc-100 dark:bg-zinc-800 rounded text-sm"
+                        >
+                          -
+                        </button>
+                        <span className="text-sm font-semibold">{item.quantity}</span>
+                        <button
+                          onClick={() => updateQuantity(item.id, item.quantity + 1)}
+                          className="px-2 py-1 bg-zinc-100 dark:bg-zinc-800 rounded text-sm"
+                        >
+                          +
+                        </button>
+                      </div>
+                    </div>
+                    <button
+                      onClick={() => removeItem(item.id)}
+                      className="text-red-500 hover:text-red-700 text-sm"
+                    >
+                      Remove
+                    </button>
+                  </div>
+                ))
+              )}
+            </div>
+
+            {items.length > 0 && (
+              <div className="border-t pt-4 dark:border-zinc-800 space-y-4">
+                <div className="flex justify-between font-semibold text-lg">
+                  <span>Subtotal:</span>
+                  <span>${subtotal.toFixed(2)}</span>
+                </div>
+                <Link
+                  href="/checkout"
+                  onClick={() => setIsCartOpen(false)}
+                  className="block w-full text-center bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 rounded-lg transition"
+                >
+                  Proceed to Checkout
+                </Link>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  );
+};

package/template/lib/scryme.ts

@@ -0,0 +1,18 @@
+import { ScrymeClientSDK } from '@scryme/sdk/client';
+import { ScrymeServerSDK } from '@scryme/sdk/server';
+
+export const ORG_SLUG = process.env.NEXT_PUBLIC_SCRYME_ORG_SLUG || 'demo-store';
+export const API_URL = process.env.NEXT_PUBLIC_SCRYME_API_URL || 'https://api.scryme.com';
+
+export const scrymeClient = new ScrymeClientSDK({
+  baseUrl: API_URL,
+  orgSlug: ORG_SLUG,
+});
+
+export const getScrymeServerClient = (token?: string) => {
+  return new ScrymeServerSDK({
+    baseUrl: API_URL,
+    orgSlug: ORG_SLUG,
+    token,
+  });
+};

package/template/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "scryme-ecommerce-starter",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@scryme/sdk": "^9.69.0",
+    "lucide-react": "^0.475.0",
+    "next": "^15.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.0.0"
+  }
+}

package/template/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/template/providers/cart-provider.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+export interface CartItem {
+  id: string;
+  name: string;
+  price: number;
+  quantity: number;
+  imageUrl?: string;
+}
+
+interface CartContextType {
+  items: CartItem[];
+  addItem: (item: Omit<CartItem, 'quantity'> & { quantity?: number }) => void;
+  removeItem: (id: string) => void;
+  updateQuantity: (id: string, quantity: number) => void;
+  clearCart: () => void;
+  totalItems: number;
+  subtotal: number;
+}
+
+const CartContext = createContext<CartContextType | undefined>(undefined);
+
+const CART_STORAGE_KEY = 'scryme_cart_items';
+
+export const CartProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [items, setItems] = useState<CartItem[]>([]);
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem(CART_STORAGE_KEY);
+      if (stored) {
+        setItems(JSON.parse(stored));
+      }
+    } catch (e) {
+      console.error('Failed to parse stored cart:', e);
+    } finally {
+      setIsInitialized(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isInitialized) {
+      localStorage.setItem(CART_STORAGE_KEY, JSON.stringify(items));
+    }
+  }, [items, isInitialized]);
+
+  const addItem = (item: Omit<CartItem, 'quantity'> & { quantity?: number }) => {
+    const qty = item.quantity || 1;
+    setItems((prev) => {
+      const existing = prev.find((i) => i.id === item.id);
+      if (existing) {
+        return prev.map((i) =>
+          i.id === item.id ? { ...i, quantity: i.quantity + qty } : i
+        );
+      }
+      return [...prev, { ...item, quantity: qty }];
+    });
+  };
+
+  const removeItem = (id: string) => {
+    setItems((prev) => prev.filter((i) => i.id !== id));
+  };
+
+  const updateQuantity = (id: string, quantity: number) => {
+    if (quantity <= 0) {
+      removeItem(id);
+      return;
+    }
+    setItems((prev) =>
+      prev.map((i) => (i.id === id ? { ...i, quantity } : i))
+    );
+  };
+
+  const clearCart = () => {
+    setItems([]);
+  };
+
+  const totalItems = items.reduce((sum, i) => sum + i.quantity, 0);
+  const subtotal = items.reduce((sum, i) => sum + i.price * i.quantity, 0);
+
+  return (
+    <CartContext.Provider
+      value={{
+        items,
+        addItem,
+        removeItem,
+        updateQuantity,
+        clearCart,
+        totalItems,
+        subtotal,
+      }}
+    >
+      {children}
+    </CartContext.Provider>
+  );
+};
+
+export const useCart = () => {
+  const context = useContext(CartContext);
+  if (!context) {
+    throw new Error('useCart must be used within a CartProvider');
+  }
+  return context;
+};

package/template/providers/customer-auth-provider.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { scrymeClient } from '@/lib/scryme';
+
+interface CustomerUser {
+  id?: string;
+  email?: string;
+  firstName?: string;
+  lastName?: string;
+  phone?: string;
+}
+
+interface CustomerAuthContextType {
+  user: CustomerUser | null;
+  isLoading: boolean;
+  login: (email: string) => Promise<void>;
+  logout: () => void;
+}
+
+const CustomerAuthContext = createContext<CustomerAuthContextType | undefined>(undefined);
+
+export const CustomerAuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [user, setUser] = useState<CustomerUser | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    // Check if customer session exists
+    scrymeClient.customer.auth
+      .getSession()
+      .then((res) => {
+        if (res && res.data && res.data.user) {
+          setUser(res.data.user);
+        }
+      })
+      .catch(() => {
+        setUser(null);
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }, []);
+
+  const login = async (email: string) => {
+    setIsLoading(true);
+    try {
+      // Example OTP/Login sequence via SDK
+      await scrymeClient.customer.auth.login({ email });
+      const session = await scrymeClient.customer.auth.getSession();
+      if (session?.data?.user) {
+        setUser(session.data.user);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const logout = () => {
+    scrymeClient.customer.auth.logout();
+    setUser(null);
+  };
+
+  return (
+    <CustomerAuthContext.Provider value={{ user, isLoading, login, logout }}>
+      {children}
+    </CustomerAuthContext.Provider>
+  );
+};
+
+export const useCustomerAuth = () => {
+  const context = useContext(CustomerAuthContext);
+  if (!context) {
+    throw new Error('useCustomerAuth must be used within CustomerAuthProvider');
+  }
+  return context;
+};

package/template/tailwind.config.ts

@@ -0,0 +1,20 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    './providers/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: 'var(--background)',
+        foreground: 'var(--foreground)',
+      },
+    },
+  },
+  plugins: [],
+};
+export default config;

package/template/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}