@forgecart/cli 1.0.1 → 1.1.0

package/dist/src/utils/spinner.js

@@ -1,3 +1,4 @@
+import chalk from 'chalk';
 import ora from 'ora';
 export function createSpinner(text) {
     return ora({
@@ -17,4 +18,71 @@ export async function withSpinner(text, successText, failText, fn) {
         throw error;
     }
 }
+/**
+ * Displays a spinner with inline log streaming below it.
+ * Logs are displayed as they arrive from the subscription.
+ */
+export async function withSpinnerAndLogs(text, successText, failText, fn, logStream, onCancel) {
+    const spinner = createSpinner(text).start();
+    let cancelled = false;
+    if (logStream) {
+        ;
+        (async () => {
+            try {
+                for await (const result of logStream) {
+                    if (cancelled)
+                        break;
+                    const log = result.deploymentLogs;
+                    if (!log?.message)
+                        continue;
+                    let displayMessage = log.message;
+                    try {
+                        const parsed = JSON.parse(log.message);
+                        if ('Message' in parsed) {
+                            displayMessage = parsed.Message?.trim() || '';
+                        }
+                    }
+                    catch {
+                        // Not JSON, use as-is
+                    }
+                    if (!displayMessage)
+                        continue;
+                    const timestamp = new Date(log.timestamp).toLocaleTimeString('en-US', {
+                        hour12: false,
+                        hour: '2-digit',
+                        minute: '2-digit',
+                        second: '2-digit',
+                    });
+                    spinner.clear();
+                    console.log(`  ${chalk.gray(timestamp)} ${displayMessage}`);
+                    spinner.render();
+                }
+            }
+            catch {
+                // Stream ended
+            }
+        })();
+    }
+    try {
+        const result = await fn();
+        cancelled = true;
+        // Close the async iterator to stop the WebSocket connection
+        if (logStream?.return) {
+            logStream.return(undefined);
+        }
+        onCancel?.();
+        spinner.succeed(successText);
+        return result;
+    }
+    catch (error) {
+        cancelled = true;
+        // Close the async iterator to stop the WebSocket connection
+        if (logStream?.return) {
+            logStream.return(undefined);
+        }
+        onCancel?.();
+        spinner.fail(failText);
+        throw error;
+    }
+}
 //# sourceMappingURL=spinner.js.map

package/dist/src/utils/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/utils/spinner.ts"],"names":[],"mappings":"AAAA,OAAO,GAAY,MAAM,KAAK,CAAA;AAE9B,MAAM,UAAU,aAAa,CAAC,IAAY;IACxC,OAAO,GAAG,CAAC;QACT,IAAI;QACJ,OAAO,EAAE,MAAM;KAChB,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,WAAW,CAC/B,IAAY,EACZ,WAAmB,EACnB,QAAgB,EAChB,EAAoB;IAEpB,MAAM,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,CAAA;IAE3C,IAAI,CAAC;QACH,MAAM,MAAM,GAAG,MAAM,EAAE,EAAE,CAAA;QACzB,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,CAAA;QAC5B,OAAO,MAAM,CAAA;IACf,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QACtB,MAAM,KAAK,CAAA;IACb,CAAC;AACH,CAAC"}
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/utils/spinner.ts"],"names":[],"mappings":"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"}

package/dist/templates/application-additions/src/app/app.module.ts

@@ -1,8 +1,8 @@
-import { Module } from '@nestjs/common';
-import { ConfigModule } from '@nestjs/config';
-import { AppController } from './app.controller';
-import { AppService } from './app.service';
-import { ForgeCartService, PriceFetcherService } from '../services';
+import { Module } from '@nestjs/common'
+import { ConfigModule } from '@nestjs/config'
+import { AppController } from './app.controller'
+import { AppService } from './app.service'
+import { ForgeCartService, ProductEventListenerService } from '../services'
 
 @Module({
   imports: [
@@ -11,6 +11,6 @@ import { ForgeCartService, PriceFetcherService } from '../services';
     }),
   ],
   controllers: [AppController],
-  providers: [AppService, ForgeCartService, PriceFetcherService],
+  providers: [AppService, ForgeCartService, ProductEventListenerService],
 })
 export class AppModule {}

package/dist/templates/application-additions/src/services/index.ts

@@ -1,2 +1,2 @@
 export { ForgeCartService } from './forgecart.service'
-export { PriceFetcherService } from './price-fetcher.service'
+export { ProductEventListenerService } from './product-event-listener.service'

package/dist/templates/application-additions/src/services/product-event-listener.service.ts

@@ -0,0 +1,150 @@
+import {
+  Injectable,
+  OnModuleInit,
+  OnModuleDestroy,
+  Logger,
+} from '@nestjs/common'
+import { ConfigService } from '@nestjs/config'
+import { ForgeCartService } from './forgecart.service'
+
+interface EventSubscription {
+  unsubscribe: () => void
+}
+
+@Injectable()
+export class ProductEventListenerService
+  implements OnModuleInit, OnModuleDestroy
+{
+  private readonly logger = new Logger(ProductEventListenerService.name)
+  private subscriptions: EventSubscription[] = []
+  private isAuthenticated = false
+
+  constructor(
+    private readonly forgeCart: ForgeCartService,
+    private readonly configService: ConfigService
+  ) {}
+
+  async onModuleInit(): Promise<void> {
+    await this.initialize()
+  }
+
+  onModuleDestroy(): void {
+    this.cleanup()
+  }
+
+  private async initialize(): Promise<void> {
+    const username = this.configService.get<string>('FORGECART_ADMIN_USERNAME')
+    const password = this.configService.get<string>('FORGECART_ADMIN_PASSWORD')
+
+    // Skip if credentials are not provided
+    if (!username || !password) {
+      this.logger.warn(
+        'FORGECART_ADMIN_USERNAME and FORGECART_ADMIN_PASSWORD not set. ' +
+          'Product event listeners will not be registered.'
+      )
+      return
+    }
+
+    try {
+      // Login with admin credentials
+      const loginResult = await this.forgeCart.admin.administrator.login({
+        username,
+        password,
+      })
+
+      const login = (
+        loginResult as { login?: { __typename?: string; message?: string } }
+      )?.login
+      if (login?.__typename !== 'CurrentUser') {
+        this.logger.error(
+          'Admin login failed:',
+          login?.message || 'Unknown error'
+        )
+        return
+      }
+
+      this.isAuthenticated = true
+      this.logger.log('Successfully authenticated as admin')
+
+      // Register event handlers
+      this.registerEventHandlers()
+    } catch (error) {
+      this.logger.error('Failed to initialize product event listener:', error)
+    }
+  }
+
+  private registerEventHandlers(): void {
+    if (!this.isAuthenticated) return
+
+    const sdk = this.forgeCart.getSDK()
+
+    // Non-blocking handlers
+    const productUpdatedSub = sdk.admin.registerEventHandler(
+      'product.updated',
+      (event) => {
+        this.logger.log(`Product updated: ${JSON.stringify(event)}`)
+        this.handleProductUpdated(event)
+      }
+    )
+    this.subscriptions.push(productUpdatedSub)
+
+    const productCreatedSub = sdk.admin.registerEventHandler(
+      'product.created',
+      (event) => {
+        this.logger.log(`Product created: ${JSON.stringify(event)}`)
+        this.handleProductCreated(event)
+      }
+    )
+    this.subscriptions.push(productCreatedSub)
+
+    const productDeletedSub = sdk.admin.registerEventHandler(
+      'product.deleted',
+      (event) => {
+        this.logger.log(`Product deleted: ${JSON.stringify(event)}`)
+        this.handleProductDeleted(event)
+      }
+    )
+    this.subscriptions.push(productDeletedSub)
+
+    // Blocking handler (must complete within 1000ms)
+    const variantUpdatedSub = sdk.admin.registerBlockingEventHandler(
+      'product.variant.updated',
+      async (event) => {
+        this.logger.log(
+          `Product variant updated (blocking): ${JSON.stringify(event)}`
+        )
+        await this.handleVariantUpdated(event)
+      }
+    )
+    this.subscriptions.push(variantUpdatedSub)
+
+    this.logger.log('Product event handlers registered successfully')
+  }
+
+  private handleProductUpdated(event: unknown): void {
+    // Implement custom logic here
+    this.logger.debug('handleProductUpdated called', event)
+  }
+
+  private handleProductCreated(event: unknown): void {
+    // Implement custom logic here
+    this.logger.debug('handleProductCreated called', event)
+  }
+
+  private handleProductDeleted(event: unknown): void {
+    // Implement custom logic here
+    this.logger.debug('handleProductDeleted called', event)
+  }
+
+  private async handleVariantUpdated(event: unknown): Promise<void> {
+    // Blocking handler - must complete within 1000ms
+    this.logger.debug('handleVariantUpdated called', event)
+  }
+
+  private cleanup(): void {
+    for (const subscription of this.subscriptions) {
+      subscription.unsubscribe()
+    }
+    this.subscriptions = []
+  }
+}

package/dist/templates/application-e2e-additions/src/support/global-setup.ts

@@ -0,0 +1,16 @@
+import { waitForPortOpen } from '@nx/node/utils'
+
+/* eslint-disable */
+var __TEARDOWN_MESSAGE__: string
+
+module.exports = async function () {
+  // Start services that the app needs to run (e.g. database, docker-compose, etc.).
+  console.log('\nSetting up...\n')
+
+  const host = process.env.HOST ?? 'localhost'
+  const port = process.env.PORT ? Number(process.env.PORT) : 8080 // Match application's default port
+  await waitForPortOpen(port, { host })
+
+  // Hint: Use `globalThis` to pass variables to global teardown.
+  globalThis.__TEARDOWN_MESSAGE__ = '\nTearing down...\n'
+}

package/dist/templates/application-e2e-additions/src/support/test-setup.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+import axios from 'axios'
+
+module.exports = async function () {
+  // Configure axios for tests to use.
+  const host = process.env.HOST ?? 'localhost'
+  const port = process.env.PORT ?? '8080' // Match application's default port
+  axios.defaults.baseURL = `http://${host}:${port}`
+}

package/dist/templates/storefront-additions/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}

package/dist/templates/storefront-additions/src/app/cart/page.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import Link from 'next/link'
+import { useCart } from '../../context/CartContext'
+import { CartItem } from '../../components/CartItem'
+
+export default function CartPage() {
+  const { cart, loading, itemCount } = useCart()
+
+  if (loading && !cart) {
+    return (
+      <div className="max-w-4xl mx-auto px-4 py-8">
+        <h1 className="text-3xl font-bold mb-8 text-gray-900">Your Cart</h1>
+        <p className="text-gray-600">Loading cart...</p>
+      </div>
+    )
+  }
+
+  if (!cart || cart.lines.length === 0) {
+    return (
+      <div className="max-w-4xl mx-auto px-4 py-8">
+        <h1 className="text-3xl font-bold mb-8 text-gray-900">Your Cart</h1>
+        <p className="text-gray-600 mb-4">Your cart is empty.</p>
+        <Link
+          href="/"
+          className="inline-block bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700"
+        >
+          Continue Shopping
+        </Link>
+      </div>
+    )
+  }
+
+  const subtotal = (cart.subTotalWithTax / 100).toFixed(2)
+  const total = (cart.totalWithTax / 100).toFixed(2)
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 py-8">
+      <h1 className="text-3xl font-bold mb-8 text-gray-900">Your Cart</h1>
+
+      <div className="bg-white rounded-lg shadow p-6">
+        {cart.lines
+          .filter((line) => line.productVariant)
+          .map((line) => (
+            <CartItem key={line.id} line={line as never} />
+          ))}
+
+        <div className="mt-6 pt-4 border-t">
+          <div className="flex justify-between text-lg mb-2">
+            <span className="text-gray-600">Subtotal ({itemCount} items)</span>
+            <span className="font-semibold">
+              {subtotal} {cart.currencyCode}
+            </span>
+          </div>
+          <div className="flex justify-between text-xl font-bold">
+            <span>Total</span>
+            <span>
+              {total} {cart.currencyCode}
+            </span>
+          </div>
+        </div>
+
+        <div className="mt-6 flex gap-4">
+          <Link
+            href="/"
+            className="flex-1 text-center border border-gray-300 py-3 rounded-lg hover:bg-gray-50"
+          >
+            Continue Shopping
+          </Link>
+          <button className="flex-1 bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700">
+            Checkout
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/dist/templates/storefront-additions/src/app/global.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/dist/templates/storefront-additions/src/app/layout.tsx

@@ -0,0 +1,25 @@
+import './global.css'
+import { CartProvider } from '../context/CartContext'
+import { Header } from '../components/Header'
+
+export const metadata = {
+  title: 'Store',
+  description: 'Your ecommerce store',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className="bg-gray-50 min-h-screen">
+        <CartProvider>
+          <Header />
+          <main>{children}</main>
+        </CartProvider>
+      </body>
+    </html>
+  )
+}

package/dist/templates/storefront-additions/src/app/page.tsx

@@ -0,0 +1,43 @@
+import { ProductList, Product } from '@forgecart/sdk/shop'
+import forgecart from '../lib/forgecart'
+import { ProductCard } from '../components/ProductCard'
+
+async function getProducts(): Promise<ProductList> {
+  try {
+    const result = await forgecart.shop.products.products({
+      options: {
+        take: 20,
+      },
+    })
+    return (result.products as ProductList) || { items: [], totalItems: 0 }
+  } catch (error) {
+    console.error('Failed to fetch products:', error)
+    return {
+      items: [] as Product[],
+      totalItems: 0,
+    }
+  }
+}
+
+export default async function HomePage() {
+  const products = await getProducts()
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 py-8">
+      <h1 className="text-3xl font-bold mb-8 text-gray-900">Our Products</h1>
+
+      {products.items.length === 0 ? (
+        <p className="text-gray-600">
+          No products found. Make sure your ForgeCart channel is configured
+          correctly.
+        </p>
+      ) : (
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+          {products.items.map((product: Product) => (
+            <ProductCard key={product.id} product={product as never} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/dist/templates/storefront-additions/src/components/AddToCartButton.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import { useState } from 'react'
+import { useCart } from '../context/CartContext'
+
+interface AddToCartButtonProps {
+  productVariantId: string
+}
+
+export function AddToCartButton({ productVariantId }: AddToCartButtonProps) {
+  const { addToCart } = useCart()
+  const [isAdding, setIsAdding] = useState(false)
+
+  const handleClick = async () => {
+    setIsAdding(true)
+    await addToCart(productVariantId, 1)
+    setIsAdding(false)
+  }
+
+  return (
+    <button
+      onClick={handleClick}
+      disabled={isAdding}
+      className="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 disabled:bg-blue-300 disabled:cursor-not-allowed transition-colors"
+    >
+      {isAdding ? 'Adding...' : 'Add to Cart'}
+    </button>
+  )
+}

package/dist/templates/storefront-additions/src/components/CartItem.tsx

@@ -0,0 +1,82 @@
+'use client'
+
+import { useCart } from '../context/CartContext'
+import { QuantitySelector } from './QuantitySelector'
+
+interface CartLine {
+  id: string
+  quantity: number
+  productVariant: {
+    id: string
+    name: string
+    price: number
+    priceWithTax: number
+    currencyCode: string
+  }
+  featuredAsset?: {
+    preview: string
+  }
+  unitPriceWithTax: number
+  linePriceWithTax: number
+}
+
+interface CartItemProps {
+  line: CartLine
+}
+
+export function CartItem({ line }: CartItemProps) {
+  const { updateQuantity, removeItem, loading } = useCart()
+
+  // Defensive check for incomplete line data
+  if (!line.productVariant) {
+    return null
+  }
+
+  const unitPrice = (line.unitPriceWithTax / 100).toFixed(2)
+  const lineTotal = (line.linePriceWithTax / 100).toFixed(2)
+
+  return (
+    <div className="flex gap-4 py-4 border-b">
+      {line.featuredAsset && (
+        <img
+          src={line.featuredAsset.preview}
+          alt={line.productVariant.name}
+          className="w-20 h-20 object-cover rounded"
+        />
+      )}
+      {!line.featuredAsset && (
+        <div className="w-20 h-20 bg-gray-200 rounded flex items-center justify-center">
+          <span className="text-gray-400 text-xs">No img</span>
+        </div>
+      )}
+      <div className="flex-1">
+        <h3 className="font-semibold text-gray-900">
+          {line.productVariant.name}
+        </h3>
+        <p className="text-gray-600 text-sm">
+          {unitPrice} {line.productVariant.currencyCode} each
+        </p>
+        <div className="flex items-center justify-between mt-2">
+          <QuantitySelector
+            quantity={line.quantity}
+            onIncrease={() => updateQuantity(line.id, line.quantity + 1)}
+            onDecrease={() => updateQuantity(line.id, line.quantity - 1)}
+            disabled={loading}
+          />
+          <button
+            onClick={() => removeItem(line.id)}
+            disabled={loading}
+            className="text-red-600 hover:text-red-800 text-sm disabled:opacity-50"
+          >
+            Remove
+          </button>
+        </div>
+      </div>
+      <div className="text-right">
+        <p className="font-bold text-gray-900">
+          {lineTotal} {line.productVariant.currencyCode}
+        </p>
+      </div>
+    </div>
+  )
+}

package/dist/templates/storefront-additions/src/components/Header.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import Link from 'next/link'
+import { useCart } from '../context/CartContext'
+
+export function Header() {
+  const { itemCount, loading } = useCart()
+
+  return (
+    <header className="bg-white shadow-sm border-b">
+      <div className="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
+        <Link href="/" className="text-xl font-bold text-gray-900">
+          Store
+        </Link>
+        <Link
+          href="/cart"
+          className="relative flex items-center gap-2 text-gray-700 hover:text-gray-900"
+        >
+          <svg
+            className="w-6 h-6"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
+            />
+          </svg>
+          <span>Cart</span>
+          {itemCount > 0 && (
+            <span className="absolute -top-2 -right-2 bg-blue-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
+              {loading ? '...' : itemCount}
+            </span>
+          )}
+        </Link>
+      </div>
+    </header>
+  )
+}

package/dist/templates/storefront-additions/src/components/ProductCard.tsx

@@ -0,0 +1,57 @@
+import { AddToCartButton } from './AddToCartButton'
+
+interface ProductVariant {
+  id: string
+  price: number
+  priceWithTax: number
+  currencyCode: string
+}
+
+interface Product {
+  id: string
+  name: string
+  description: string
+  featuredAsset?: {
+    preview: string
+  }
+  variants: ProductVariant[]
+}
+
+interface ProductCardProps {
+  product: Product
+}
+
+export function ProductCard({ product }: ProductCardProps) {
+  const variant = product.variants[0]
+  const price = variant ? (variant.priceWithTax / 100).toFixed(2) : '0.00'
+  const currencyCode = variant?.currencyCode ?? 'USD'
+
+  return (
+    <div className="bg-white border rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
+      {product.featuredAsset && (
+        <img
+          src={product.featuredAsset.preview}
+          alt={product.name}
+          className="w-full h-48 object-cover"
+        />
+      )}
+      {!product.featuredAsset && (
+        <div className="w-full h-48 bg-gray-200 flex items-center justify-center">
+          <span className="text-gray-400">No image</span>
+        </div>
+      )}
+      <div className="p-4">
+        <h2 className="text-lg font-semibold mb-2 text-gray-900">
+          {product.name}
+        </h2>
+        <p className="text-gray-600 text-sm mb-3 line-clamp-2">
+          {product.description}
+        </p>
+        <p className="text-lg font-bold text-blue-600 mb-4">
+          {price} {currencyCode}
+        </p>
+        {variant && <AddToCartButton productVariantId={variant.id} />}
+      </div>
+    </div>
+  )
+}