@forgecart/cli 1.0.1 → 1.1.0

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

@@ -0,0 +1,35 @@
+'use client'
+
+interface QuantitySelectorProps {
+  quantity: number
+  onIncrease: () => void
+  onDecrease: () => void
+  disabled?: boolean
+}
+
+export function QuantitySelector({
+  quantity,
+  onIncrease,
+  onDecrease,
+  disabled,
+}: QuantitySelectorProps) {
+  return (
+    <div className="flex items-center gap-2">
+      <button
+        onClick={onDecrease}
+        disabled={disabled || quantity <= 1}
+        className="w-8 h-8 flex items-center justify-center border rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        -
+      </button>
+      <span className="w-8 text-center">{quantity}</span>
+      <button
+        onClick={onIncrease}
+        disabled={disabled}
+        className="w-8 h-8 flex items-center justify-center border rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        +
+      </button>
+    </div>
+  )
+}

package/dist/templates/storefront-additions/src/context/CartContext.tsx

@@ -0,0 +1,158 @@
+'use client'
+
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+  ReactNode,
+} from 'react'
+import forgecart from '../lib/forgecart'
+
+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 Cart {
+  id: string
+  lines: CartLine[]
+  totalQuantity: number
+  subTotalWithTax: number
+  totalWithTax: number
+  currencyCode: string
+}
+
+interface CartContextType {
+  cart: Cart | null
+  loading: boolean
+  itemCount: number
+  addToCart: (productVariantId: string, quantity: number) => Promise<void>
+  updateQuantity: (orderLineId: string, quantity: number) => Promise<void>
+  removeItem: (orderLineId: string) => Promise<void>
+  refreshCart: () => Promise<void>
+}
+
+const CartContext = createContext<CartContextType | undefined>(undefined)
+
+export function CartProvider({ children }: { children: ReactNode }) {
+  const [cart, setCart] = useState<Cart | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  const refreshCart = useCallback(async () => {
+    try {
+      const result = await forgecart.shop.order.activeOrder()
+      if (result.activeOrder) {
+        setCart(result.activeOrder as unknown as Cart)
+      } else {
+        setCart(null)
+      }
+    } catch (error) {
+      console.error('Failed to fetch cart:', error)
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    refreshCart()
+  }, [refreshCart])
+
+  const addToCart = async (productVariantId: string, quantity: number) => {
+    setLoading(true)
+    try {
+      const result = await forgecart.shop.order.addItemToOrder({
+        productVariantId,
+        quantity,
+      })
+      if (
+        result.addItemToOrder &&
+        result.addItemToOrder.__typename === 'Order'
+      ) {
+        setCart(result.addItemToOrder as unknown as Cart)
+      }
+    } catch (error) {
+      console.error('Failed to add item:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const updateQuantity = async (orderLineId: string, quantity: number) => {
+    setLoading(true)
+    try {
+      const result = await forgecart.shop.order.adjustOrderLine({
+        orderLineId,
+        quantity,
+      })
+      if (
+        result.adjustOrderLine &&
+        result.adjustOrderLine.__typename === 'Order'
+      ) {
+        setCart(result.adjustOrderLine as unknown as Cart)
+      }
+    } catch (error) {
+      console.error('Failed to update quantity:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const removeItem = async (orderLineId: string) => {
+    setLoading(true)
+    try {
+      const result = await forgecart.shop.order.removeOrderLine({
+        orderLineId,
+      })
+      if (
+        result.removeOrderLine &&
+        result.removeOrderLine.__typename === 'Order'
+      ) {
+        setCart(result.removeOrderLine as unknown as Cart)
+      }
+    } catch (error) {
+      console.error('Failed to remove item:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const itemCount = cart?.totalQuantity ?? 0
+
+  return (
+    <CartContext.Provider
+      value={{
+        cart,
+        loading,
+        itemCount,
+        addToCart,
+        updateQuantity,
+        removeItem,
+        refreshCart,
+      }}
+    >
+      {children}
+    </CartContext.Provider>
+  )
+}
+
+export function useCart() {
+  const context = useContext(CartContext)
+  if (!context) {
+    throw new Error('useCart must be used within CartProvider')
+  }
+  return context
+}

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

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

package/dist/templates/storefront-e2e-additions/playwright.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig, devices } from '@playwright/test'
+import { nxE2EPreset } from '@nx/playwright/preset'
+
+import { workspaceRoot } from '@nx/devkit'
+
+const baseURL = process.env['BASE_URL'] || 'http://localhost:4200'
+
+export default defineConfig({
+  ...nxE2EPreset(__filename, { testDir: './src' }),
+  use: {
+    baseURL,
+    trace: 'on-first-retry',
+  },
+  webServer: {
+    command: 'npx nx run storefront:dev',
+    url: 'http://localhost:4200',
+    reuseExistingServer: !process.env.CI,
+    cwd: workspaceRoot,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+})

package/dist/templates/storefront-e2e-additions/src/example.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('has title', async ({ page }) => {
+  await page.goto('/')
+  expect(await page.locator('h1').innerText()).toContain('Our Products')
+})
+
+test('has cart link', async ({ page }) => {
+  await page.goto('/')
+  await expect(page.locator('a[href="/cart"]')).toBeVisible()
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forgecart/cli",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "type": "module",
   "description": "CLI tool for deploying applications to ForgeCart",
   "main": "dist/index.js",
@@ -8,7 +8,7 @@
     "forgecart": "./bin/forgecart.js"
   },
   "dependencies": {
-    "@forgecart/sdk": "1.2.1"
+    "@forgecart/sdk": "1.2.5"
   },
   "files": [
     "dist",

package/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/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/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/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/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/templates/storefront-additions/postcss.config.js

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

package/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/templates/storefront-additions/src/app/global.css

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

package/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/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/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>
+  )
+}