quickbooks-medusa-plugin 0.0.5 → 0.0.7

package/.medusa/server/src/admin/index.mjs

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { defineRouteConfig } from "@medusajs/admin-sdk";
 import { toast, Text, Container, Heading, Badge, Button, Label, Input, Switch } from "@medusajs/ui";
+import { CurrencyDollar } from "@medusajs/icons";
 import React, { useState, useEffect } from "react";
 var isCheckBoxInput = (element) => element.type === "checkbox";
 var isDateObject = (value) => value instanceof Date;
@@ -1567,7 +1568,7 @@ function useForm(props = {}) {
   return _formControl.current;
 }
 const QuickBooksSettingsPage = () => {
-  const [settings, setSettings] = useState(null);
+  const [_, setSettings] = useState(null);
   const [connection, setConnection] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [isSaving, setIsSaving] = useState(false);
@@ -1789,7 +1790,7 @@ const QuickBooksSettingsPage = () => {
 };
 const config = defineRouteConfig({
   label: "QuickBooks",
-  icon: "currency-dollar"
+  icon: CurrencyDollar
 });
 const i18nTranslations0 = {};
 const widgetModule = { widgets: [] };

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

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineRouteConfig } from "@medusajs/admin-sdk";
+import { Container, Heading, Text, Input, Button, Label, Switch, toast, Badge } from "@medusajs/ui";
+import { CurrencyDollar } from "@medusajs/icons";
+import { useEffect, useState } from "react";
+import { useForm, Controller } from "react-hook-form";
+const QuickBooksSettingsPage = () => {
+    // defaults to null
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [_, setSettings] = useState(null);
+    const [connection, setConnection] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isSaving, setIsSaving] = useState(false);
+    const { control, handleSubmit, reset } = useForm({
+        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) => {
+        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 _jsx(Text, { children: "Loading..." });
+    return (_jsxs(Container, { className: "p-8 flex flex-col gap-y-8", children: [_jsxs("div", { children: [_jsx(Heading, { level: "h1", children: "QuickBooks Integration" }), _jsx(Text, { className: "text-ui-fg-subtle", children: "Manage your connection and synchronization settings." })] }), _jsx("div", { className: "flex flex-col gap-y-4 p-4 border rounded-lg bg-ui-bg-base", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex flex-col gap-y-1", children: [_jsx(Heading, { level: "h2", children: "Connection Status" }), _jsxs("div", { className: "flex items-center gap-x-2", children: [_jsx(Text, { children: "Status:" }), connection?.is_connected ? (_jsx(Badge, { color: "green", children: "Connected" })) : (_jsx(Badge, { color: "red", children: "Disconnected" }))] }), connection?.is_connected && (_jsxs(Text, { className: "text-ui-fg-subtle text-small", children: ["Connected to: ", connection.company_name, " (Realm ID: ", connection.realm_id, ")"] }))] }), _jsx("div", { children: connection?.is_connected ? (_jsx(Button, { variant: "danger", onClick: handleDisconnect, children: "Disconnect" })) : (_jsx(Button, { onClick: handleConnect, children: "Connect to QuickBooks" })) })] }) }), _jsxs("form", { onSubmit: handleSubmit(onSubmit), className: "flex flex-col gap-y-6", children: [_jsxs("div", { className: "flex flex-col gap-y-4", children: [_jsx(Heading, { level: "h2", children: "Account Mappings" }), _jsx(Text, { className: "text-ui-fg-subtle", children: "Enter the QuickBooks Account IDs (Numeric) for transactions." }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-y-2", children: [_jsx(Label, { children: "Income Account ID" }), _jsx(Controller, { control: control, name: "income_account_id", render: ({ field }) => _jsx(Input, { ...field, placeholder: "e.g. 1" }) })] }), _jsxs("div", { className: "flex flex-col gap-y-2", children: [_jsx(Label, { children: "COGS Account ID" }), _jsx(Controller, { control: control, name: "cogs_account_id", render: ({ field }) => _jsx(Input, { ...field, placeholder: "e.g. 50" }) })] }), _jsxs("div", { className: "flex flex-col gap-y-2", children: [_jsx(Label, { children: "Asset Account ID" }), _jsx(Controller, { control: control, name: "asset_account_id", render: ({ field }) => _jsx(Input, { ...field, placeholder: "e.g. 80" }) })] })] })] }), _jsxs("div", { className: "flex flex-col gap-y-4", children: [_jsx(Heading, { level: "h2", children: "Synchronization Settings" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", children: [_jsxs("div", { className: "flex flex-col gap-y-4", children: [_jsx(Text, { weight: "plus", children: "Auto-Sync (Medusa to QuickBooks)" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { children: "Sync Customers" }), _jsx(Controller, { control: control, name: "auto_sync_customers", render: ({ field: { value, onChange } }) => (_jsx(Switch, { checked: value, onCheckedChange: onChange })) })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { children: "Sync Products" }), _jsx(Controller, { control: control, name: "auto_sync_products", render: ({ field: { value, onChange } }) => (_jsx(Switch, { checked: value, onCheckedChange: onChange })) })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { children: "Sync Orders" }), _jsx(Controller, { control: control, name: "auto_sync_orders", render: ({ field: { value, onChange } }) => (_jsx(Switch, { checked: value, onCheckedChange: onChange })) })] })] }), _jsxs("div", { className: "flex flex-col gap-y-4", children: [_jsx(Text, { weight: "plus", children: "Reverse Sync (QuickBooks to Medusa)" }), _jsx(Text, { className: "text-ui-fg-subtle text-small", children: "Requires Webhooks to be configured in QuickBooks." }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { children: "Sync Customers (Recieve Updates)" }), _jsx(Controller, { control: control, name: "reverse_sync_customers", render: ({ field: { value, onChange } }) => (_jsx(Switch, { checked: value, onCheckedChange: onChange })) })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { children: "Sync Products (Receive Updates)" }), _jsx(Controller, { control: control, name: "reverse_sync_products", render: ({ field: { value, onChange } }) => (_jsx(Switch, { checked: value, onCheckedChange: onChange })) })] })] })] })] }), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { type: "submit", isLoading: isSaving, children: "Save Settings" }) })] })] }));
+};
+export const config = defineRouteConfig({
+    label: "QuickBooks",
+    icon: CurrencyDollar,
+});
+export default QuickBooksSettingsPage;

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "quickbooks-medusa-plugin",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Medusa v2 plugin for QuickBooks Online bi-directional sync (Customers, Products, Orders, Inventory).",
   "author": "bootssecurity",
   "license": "MIT",
   "files": [
-    ".medusa/server"
+    ".medusa/server",
+    "src/admin"
   ],
   "exports": {
     "./package.json": "./package.json",
@@ -15,7 +16,7 @@
     "./providers/*": "./.medusa/server/src/providers/*/index.js",
     "./*": "./.medusa/server/src/*.js",
     "./admin": {
-      "import": "./.medusa/server/src/admin/index.mjs",
+      "import": "./.medusa/server/src/admin/index.js",
       "require": "./.medusa/server/src/admin/index.js",
       "default": "./.medusa/server/src/admin/index.js"
     }
@@ -30,7 +31,7 @@
     "intuit"
   ],
   "scripts": {
-    "build": "medusa plugin:build && mkdir -p .medusa/server/src/admin && cp -r src/admin/routes .medusa/server/src/admin/",
+    "build": "medusa plugin:build && tsc --project src/admin/tsconfig.json",
     "dev": "medusa plugin:develop",
     "prepublishOnly": "npm run build"
   },

package/src/admin/README.md

@@ -0,0 +1,31 @@
+# Admin Customizations
+
+You can extend the Medusa Admin to add widgets and new pages. Your customizations interact with API routes to provide merchants with custom functionalities.
+
+## Example: Create a Widget
+
+A widget is a React component that can be injected into an existing page in the admin dashboard.
+
+For example, create the file `src/admin/widgets/product-widget.tsx` with the following content:
+
+```tsx title="src/admin/widgets/product-widget.tsx"
+import { defineWidgetConfig } from "@medusajs/admin-sdk"
+
+// The widget
+const ProductWidget = () => {
+  return (
+    <div>
+      <h2>Product Widget</h2>
+    </div>
+  )
+}
+
+// The widget's configurations
+export const config = defineWidgetConfig({
+  zone: "product.details.after",
+})
+
+export default ProductWidget
+```
+
+This inserts a widget with the text “Product Widget” at the end of a product’s details page.

package/src/admin/i18n/README.md

@@ -0,0 +1,58 @@
+# Admin Customizations Translations
+
+The Medusa Admin dashboard supports multiple languages for its interface. Medusa uses [react-i18next](https://react.i18next.com/) to manage translations in the admin dashboard.
+
+To add translations, create JSON translation files for each language under the `src/admin/i18n/json` directory. For example, create the `src/admin/i18n/json/en.json` file with the following content:
+
+```json
+{
+  "brands": {
+    "title": "Brands",
+    "description": "Manage your product brands"
+  },
+  "done": "Done"
+}
+```
+
+Then, export the translations in `src/admin/i18n/index.ts`:
+
+```ts
+import en from "./json/en.json" with { type: "json" }
+
+export default {
+  en: {
+    translation: en,
+  },
+}
+```
+
+Finally, use translations in your admin widgets and routes using the `useTranslation` hook:
+
+```tsx
+import { defineWidgetConfig } from "@medusajs/admin-sdk"
+import { Button, Container, Heading } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+
+const ProductWidget = () => {
+  const { t } = useTranslation()
+  return (
+    <Container className="p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">{t("brands.title")}</Heading>
+        <p>{t("brands.description")}</p>
+      </div>
+      <div className="flex justify-end px-6 py-4">
+        <Button variant="primary">{t("done")}</Button>
+      </div>
+    </Container>
+  )
+}
+
+export const config = defineWidgetConfig({
+  zone: "product.details.before",
+})
+
+export default ProductWidget
+```
+
+Learn more about translating admin extensions in the [Translate Admin Customizations](https://docs.medusajs.com/learn/fundamentals/admin/translations) documentation.

package/src/admin/i18n/index.ts

@@ -0,0 +1 @@
+export default {}

package/src/admin/index.ts

@@ -0,0 +1,7 @@
+// Medusa Admin Extension Entry Point
+// Must export 'widgets' and 'default' to be valid for the dashboard loader.
+
+export const widgets = [];
+
+const plugin = { widgets };
+export default plugin;

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

@@ -1,5 +1,6 @@
 import { defineRouteConfig } from "@medusajs/admin-sdk"
 import { Container, Heading, Text, Input, Button, Label, Switch, toast, Badge } from "@medusajs/ui"
+import { CurrencyDollar } from "@medusajs/icons"
 import { useEffect, useState } from "react"
 import { useForm, Controller } from "react-hook-form"
 
@@ -24,7 +25,9 @@ type ConnectionStatus = {
 }
 
 const QuickBooksSettingsPage = () => {
-    const [settings, setSettings] = useState<QuickBooksSettings | null>(null)
+    // defaults to null
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [_, setSettings] = useState<QuickBooksSettings | null>(null)
     const [connection, setConnection] = useState<ConnectionStatus | null>(null)
     const [isLoading, setIsLoading] = useState(true)
     const [isSaving, setIsSaving] = useState(false)
@@ -278,7 +281,7 @@ const QuickBooksSettingsPage = () => {
 
 export const config = defineRouteConfig({
     label: "QuickBooks",
-    icon: "currency-dollar",
+    icon: CurrencyDollar,
 })
 
 export default QuickBooksSettingsPage

package/src/admin/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": false,
+    "outDir": "../../.medusa/server/src/admin",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "."
+  ],
+  "exclude": [
+    "node_modules",
+    "../../.medusa"
+  ]
+}

package/src/admin/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />