quickbooks-medusa-plugin 0.0.4 → 0.0.5

package/.medusa/server/src/admin/routes/settings/quickbooks/page.tsx

@@ -0,0 +1,284 @@
+import { defineRouteConfig } from "@medusajs/admin-sdk"
+import { Container, Heading, Text, Input, Button, Label, Switch, toast, Badge } from "@medusajs/ui"
+import { useEffect, useState } from "react"
+import { useForm, Controller } from "react-hook-form"
+
+// Types
+type QuickBooksSettings = {
+    id: string
+    income_account_id?: string
+    cogs_account_id?: string
+    asset_account_id?: string
+    auto_sync_customers: boolean
+    auto_sync_products: boolean
+    auto_sync_orders: boolean
+    reverse_sync_customers: boolean
+    reverse_sync_products: boolean
+    reverse_sync_orders: boolean
+}
+
+type ConnectionStatus = {
+    is_connected: boolean
+    company_name?: string
+    realm_id?: string
+}
+
+const QuickBooksSettingsPage = () => {
+    const [settings, setSettings] = useState<QuickBooksSettings | null>(null)
+    const [connection, setConnection] = useState<ConnectionStatus | null>(null)
+    const [isLoading, setIsLoading] = useState(true)
+    const [isSaving, setIsSaving] = useState(false)
+
+    const { control, handleSubmit, reset } = useForm<QuickBooksSettings>({
+        defaultValues: {
+            auto_sync_customers: false,
+            auto_sync_products: false,
+            auto_sync_orders: false,
+            reverse_sync_customers: false,
+            reverse_sync_products: false,
+            reverse_sync_orders: false,
+        }
+    })
+
+    useEffect(() => {
+        fetchData()
+    }, [])
+
+    const fetchData = async () => {
+        try {
+            setIsLoading(true)
+            // Fetch connection status
+            const connRes = await fetch("/admin/quickbooks/connection")
+            const connData = await connRes.json()
+            setConnection(connData)
+
+            // Fetch settings
+            const setRes = await fetch("/admin/quickbooks/settings")
+            const setData = await setRes.json()
+
+            if (setData.settings) {
+                setSettings(setData.settings)
+                reset(setData.settings)
+            }
+        } catch (err) {
+            toast.error("Failed to load QuickBooks data")
+        } finally {
+            setIsLoading(false)
+        }
+    }
+
+    const onSubmit = async (data: QuickBooksSettings) => {
+        try {
+            setIsSaving(true)
+            const res = await fetch("/admin/quickbooks/settings", {
+                method: "PUT",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(data)
+            })
+
+            if (res.ok) {
+                toast.success("Settings saved successfully")
+                const updated = await res.json()
+                setSettings(updated.settings)
+                reset(updated.settings)
+            } else {
+                throw new Error("Failed to save")
+            }
+        } catch (err) {
+            toast.error("Failed to save settings")
+        } finally {
+            setIsSaving(false)
+        }
+    }
+
+    const handleConnect = async () => {
+        try {
+            const res = await fetch("/admin/quickbooks/connect")
+            const data = await res.json()
+            if (data.url) {
+                window.location.href = data.url
+            } else {
+                toast.error("Failed to get authorization URL")
+            }
+        } catch (err) {
+            toast.error("Connection error")
+        }
+    }
+
+    const handleDisconnect = async () => {
+        if (!confirm("Are you sure you want to disconnect?")) return
+
+        try {
+            const res = await fetch("/admin/quickbooks/disconnect", {
+                method: "POST"
+            })
+            if (res.ok) {
+                toast.success("Disconnected from QuickBooks")
+                fetchData()
+            } else {
+                toast.error("Failed to disconnect")
+            }
+        } catch (err) {
+            toast.error("Disconnection error")
+        }
+    }
+
+    if (isLoading) return <Text>Loading...</Text>
+
+    return (
+        <Container className="p-8 flex flex-col gap-y-8">
+            <div>
+                <Heading level="h1">QuickBooks Integration</Heading>
+                <Text className="text-ui-fg-subtle">
+                    Manage your connection and synchronization settings.
+                </Text>
+            </div>
+
+            {/* Connection Status */}
+            <div className="flex flex-col gap-y-4 p-4 border rounded-lg bg-ui-bg-base">
+                <div className="flex items-center justify-between">
+                    <div className="flex flex-col gap-y-1">
+                        <Heading level="h2">Connection Status</Heading>
+                        <div className="flex items-center gap-x-2">
+                            <Text>Status:</Text>
+                            {connection?.is_connected ? (
+                                <Badge color="green">Connected</Badge>
+                            ) : (
+                                <Badge color="red">Disconnected</Badge>
+                            )}
+                        </div>
+                        {connection?.is_connected && (
+                            <Text className="text-ui-fg-subtle text-small">
+                                Connected to: {connection.company_name} (Realm ID: {connection.realm_id})
+                            </Text>
+                        )}
+                    </div>
+                    <div>
+                        {connection?.is_connected ? (
+                            <Button variant="danger" onClick={handleDisconnect}>Disconnect</Button>
+                        ) : (
+                            <Button onClick={handleConnect}>Connect to QuickBooks</Button>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            {/* Settings Form */}
+            <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-y-6">
+
+                <div className="flex flex-col gap-y-4">
+                    <Heading level="h2">Account Mappings</Heading>
+                    <Text className="text-ui-fg-subtle">Enter the QuickBooks Account IDs (Numeric) for transactions.</Text>
+
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                        <div className="flex flex-col gap-y-2">
+                            <Label>Income Account ID</Label>
+                            <Controller
+                                control={control}
+                                name="income_account_id"
+                                render={({ field }) => <Input {...field} placeholder="e.g. 1" />}
+                            />
+                        </div>
+                        <div className="flex flex-col gap-y-2">
+                            <Label>COGS Account ID</Label>
+                            <Controller
+                                control={control}
+                                name="cogs_account_id"
+                                render={({ field }) => <Input {...field} placeholder="e.g. 50" />}
+                            />
+                        </div>
+                        <div className="flex flex-col gap-y-2">
+                            <Label>Asset Account ID</Label>
+                            <Controller
+                                control={control}
+                                name="asset_account_id"
+                                render={({ field }) => <Input {...field} placeholder="e.g. 80" />}
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <div className="flex flex-col gap-y-4">
+                    <Heading level="h2">Synchronization Settings</Heading>
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                        {/* Auto Sync (Medusa -> QB) */}
+                        <div className="flex flex-col gap-y-4">
+                            <Text weight="plus">Auto-Sync (Medusa to QuickBooks)</Text>
+
+                            <div className="flex items-center justify-between">
+                                <Label>Sync Customers</Label>
+                                <Controller
+                                    control={control}
+                                    name="auto_sync_customers"
+                                    render={({ field: { value, onChange } }) => (
+                                        <Switch checked={value} onCheckedChange={onChange} />
+                                    )}
+                                />
+                            </div>
+                            <div className="flex items-center justify-between">
+                                <Label>Sync Products</Label>
+                                <Controller
+                                    control={control}
+                                    name="auto_sync_products"
+                                    render={({ field: { value, onChange } }) => (
+                                        <Switch checked={value} onCheckedChange={onChange} />
+                                    )}
+                                />
+                            </div>
+                            <div className="flex items-center justify-between">
+                                <Label>Sync Orders</Label>
+                                <Controller
+                                    control={control}
+                                    name="auto_sync_orders"
+                                    render={({ field: { value, onChange } }) => (
+                                        <Switch checked={value} onCheckedChange={onChange} />
+                                    )}
+                                />
+                            </div>
+                        </div>
+
+                        {/* Reverse Sync (QB -> Medusa) */}
+                        <div className="flex flex-col gap-y-4">
+                            <Text weight="plus">Reverse Sync (QuickBooks to Medusa)</Text>
+                            <Text className="text-ui-fg-subtle text-small">Requires Webhooks to be configured in QuickBooks.</Text>
+
+                            <div className="flex items-center justify-between">
+                                <Label>Sync Customers (Recieve Updates)</Label>
+                                <Controller
+                                    control={control}
+                                    name="reverse_sync_customers"
+                                    render={({ field: { value, onChange } }) => (
+                                        <Switch checked={value} onCheckedChange={onChange} />
+                                    )}
+                                />
+                            </div>
+                            <div className="flex items-center justify-between">
+                                <Label>Sync Products (Receive Updates)</Label>
+                                <Controller
+                                    control={control}
+                                    name="reverse_sync_products"
+                                    render={({ field: { value, onChange } }) => (
+                                        <Switch checked={value} onCheckedChange={onChange} />
+                                    )}
+                                />
+                            </div>
+                            {/* Orders rarely reverse synced for status only, maybe later */}
+                        </div>
+                    </div>
+                </div>
+
+                <div className="flex justify-end">
+                    <Button type="submit" isLoading={isSaving}>Save Settings</Button>
+                </div>
+            </form>
+        </Container>
+    )
+}
+
+export const config = defineRouteConfig({
+    label: "QuickBooks",
+    icon: "currency-dollar",
+})
+
+export default QuickBooksSettingsPage

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quickbooks-medusa-plugin",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Medusa v2 plugin for QuickBooks Online bi-directional sync (Customers, Products, Orders, Inventory).",
   "author": "bootssecurity",
   "license": "MIT",
@@ -32,7 +32,7 @@
   "scripts": {
     "build": "medusa plugin:build && mkdir -p .medusa/server/src/admin && cp -r src/admin/routes .medusa/server/src/admin/",
     "dev": "medusa plugin:develop",
-    "prepublishOnly": "medusa plugin:build"
+    "prepublishOnly": "npm run build"
   },
   "devDependencies": {
     "@medusajs/admin-sdk": "2.12.3",