@progus/connector 0.2.0 → 0.4.0

package/README.md

@@ -1,7 +1,7 @@
 # @progus/connector
 
 Headless connector for Progus partner/affiliate tracking, partner ID assignment,
-and cross-sell offers. No UI code, no embedded secrets.
+and cross-sell offers.
 
 ## Installation
 
@@ -18,7 +18,7 @@ const connector = createProgusConnector({
   appKey: "progus-store-locator",
   apiBaseUrl: process.env.PARTNERS_API_URL!,
   signingSecret: process.env.PARTNERS_SECRET_KEY!,
-  apiKey: process.env.PARTNERS_API_KEY, // optional
+  apiKey: process.env.PARTNERS_API_KEY,
 });
 
 await connector.trackInstall({
@@ -51,14 +51,16 @@ if (result.success) {
 }
 ```
 
-## Cross-sell offers
+## Cross-sell offers (remote catalog)
 
 ```ts
-import { getCrossSellOffers } from "@progus/connector";
+import { getCrossSellOffersFromApi } from "@progus/connector";
 
-const offers = getCrossSellOffers({
+const offers = await getCrossSellOffersFromApi({
   currentAppKey: "progus-store-locator",
   installedAppKeys: ["progus_cod"],
+  appsCatalogUrl: "https://appsdata.progus.workers.dev/recommendations",
+  limit: 3,
 });
 ```
 
@@ -70,6 +72,12 @@ import { signPayload } from "@progus/connector";
 const signature = signPayload(JSON.stringify({ test: true }), process.env.PARTNERS_SECRET_KEY!);
 ```
 
+## UI components
+
+```tsx
+import { Recommendations, PartnerIdCard } from "@progus/connector";
+```
+
 ## Environment variables
 
 - `PARTNERS_API_URL` - base URL for partner API (e.g. `https://partners.example.com`)

package/dist/index.cjs

@@ -20,9 +20,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  appsCatalog: () => appsCatalog,
+  PartnerIdCard: () => PartnerIdCard,
+  Recommendations: () => Recommendations,
   createProgusConnector: () => createProgusConnector,
+  fetchAppsCatalog: () => fetchAppsCatalog,
   getCrossSellOffers: () => getCrossSellOffers,
+  getCrossSellOffersFromApi: () => getCrossSellOffersFromApi,
   normalizePartnerId: () => normalizePartnerId,
   signPayload: () => signPayload
 });
@@ -209,52 +212,228 @@ function createProgusConnector(config) {
   };
 }
 
-// src/appsCatalog.json
-var appsCatalog_default = [
-  {
-    key: "progus_cod",
-    type: "app",
-    title: "Progus COD",
-    company: "Progus",
-    companyUrl: "https://progus.com",
-    desc: "Automate COD Fees & Hide/Show Cash on Delivery by Rules",
-    url: "https://apps.shopify.com/progus-cod",
-    icon: "https://cdn.shopify.com/app-store/listing_images/bc537219cc3ed2bd4e7e3e683fe6b74a/icon/CMi_6dTEkIoDEAE=.png",
-    priority: 100,
-    enabled: true
-  },
-  {
-    key: "progus_trust_badges",
-    type: "app",
-    title: "Progus Trust Badges",
-    company: "Progus",
-    companyUrl: "https://progus.com",
-    desc: "Add Trust Badges to your store to build trust and credibility.",
-    url: "https://apps.shopify.com/progus-trust-badges-1",
-    icon: "https://cdn.shopify.com/app-store/listing_images/f9d0009e237f27d2db35b41ef99be858/icon/CJ3y1qDn1JEDEAE=.png",
-    priority: 90,
-    enabled: true
-  }
-];
-
 // src/crossSell.ts
-var catalog = appsCatalog_default;
 function getCrossSellOffers(options = {}) {
-  const appsCatalog2 = options.appsCatalog ?? catalog;
+  const appsCatalog = options.appsCatalog ?? [];
   const installedKeys = new Set(
     [options.currentAppKey, ...options.installedAppKeys ?? []].filter(
       (key) => Boolean(key)
     )
   );
   const locale = options.locale;
-  return appsCatalog2.filter((app) => app.enabled !== false).filter((app) => locale ? !app.locales || app.locales.includes(locale) : true).filter((app) => !installedKeys.has(app.key)).sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+  return appsCatalog.filter((app) => app.enabled !== false).filter((app) => locale ? !app.locales || app.locales.includes(locale) : true).filter((app) => !installedKeys.has(app.key)).sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+}
+var DEFAULT_APPS_CATALOG_URL = "https://appsdata.progus.workers.dev/recommendations";
+async function fetchAppsCatalog(options = {}) {
+  const fetchImpl = options.fetch ?? globalThis.fetch;
+  const logger = options.logger ?? console;
+  const appName = options.appName ?? options.currentAppKey;
+  const baseUrl = stripTrailingSlash(options.appsCatalogUrl ?? DEFAULT_APPS_CATALOG_URL);
+  const limit = typeof options.limit === "number" ? options.limit : 3;
+  const params = new URLSearchParams();
+  if (appName) params.set("appName", appName);
+  if (limit > 0) params.set("limit", String(limit));
+  const url = params.toString() ? `${baseUrl}?${params.toString()}` : baseUrl;
+  if (!fetchImpl) {
+    throw new Error("Fetch implementation is required");
+  }
+  try {
+    const response = await fetchImpl(url);
+    const text = await response.text();
+    const parsed = safeJsonParse(text);
+    if (!response.ok || !parsed) {
+      logger?.error?.("Failed to fetch apps catalog", { status: response.status });
+      return [];
+    }
+    return parsed;
+  } catch (error) {
+    logger?.error?.("Failed to fetch apps catalog", {
+      error: error instanceof Error ? error.message : String(error)
+    });
+    return [];
+  }
+}
+async function getCrossSellOffersFromApi(options = {}) {
+  const appsCatalog = options.appsCatalog ?? await fetchAppsCatalog(options);
+  return getCrossSellOffers({ ...options, appsCatalog });
+}
+
+// src/ui/PartnerIdCard.tsx
+var import_polaris = require("@shopify/polaris");
+var import_jsx_runtime = require("react/jsx-runtime");
+function PartnerIdCard({
+  partnerId,
+  onPartnerIdChange,
+  onSave,
+  saveLabel,
+  loading,
+  saving,
+  locked,
+  error,
+  label,
+  placeholder,
+  helpText,
+  saveDisabled
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_polaris.LegacyCard,
+    {
+      sectioned: true,
+      primaryFooterAction: {
+        content: saveLabel,
+        loading: Boolean(saving),
+        onAction: onSave,
+        disabled: Boolean(saveDisabled)
+      },
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_polaris.SkeletonBodyText, { lines: 1 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_polaris.FormLayout, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_polaris.TextField,
+        {
+          error,
+          label,
+          value: partnerId,
+          onChange: onPartnerIdChange,
+          placeholder,
+          helpText,
+          autoComplete: "off",
+          disabled: Boolean(locked || loading)
+        }
+      ) })
+    }
+  );
+}
+
+// src/ui/Recommendations.tsx
+var import_polaris2 = require("@shopify/polaris");
+var import_polaris_icons = require("@shopify/polaris-icons");
+var import_react = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Recommendations({
+  recommendations,
+  loading,
+  title,
+  dismissLabel,
+  installLabel,
+  freePlanLabel,
+  newBadgeLabel,
+  onDismiss,
+  openUrl,
+  getDescription
+}) {
+  const [menuActive, setMenuActive] = (0, import_react.useState)(false);
+  if (!recommendations || recommendations.length === 0) {
+    return null;
+  }
+  const handleOpenUrl = (url) => {
+    if (openUrl) return openUrl(url);
+    if (typeof window !== "undefined") {
+      window.open(url, "_blank", "noopener,noreferrer");
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_polaris2.LegacyCard,
+    {
+      sectioned: true,
+      title: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_polaris2.Text, { variant: "headingSm", as: "h3", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_polaris2.Popover,
+          {
+            active: menuActive,
+            activator: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_polaris2.Button,
+              {
+                onClick: () => setMenuActive(!menuActive),
+                icon: import_polaris_icons.MenuHorizontalIcon,
+                variant: "plain",
+                accessibilityLabel: "Menu"
+              }
+            ),
+            onClose: () => setMenuActive(false),
+            preferredAlignment: "right",
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_polaris2.ActionList,
+              {
+                actionRole: "menuitem",
+                items: [
+                  {
+                    content: dismissLabel,
+                    onAction: () => {
+                      setMenuActive(false);
+                      onDismiss();
+                    }
+                  }
+                ]
+              }
+            )
+          }
+        ) })
+      ] }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_polaris2.Layout, { children: recommendations.map((rec, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_polaris2.Layout.Section, { variant: "oneThird", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_polaris2.LegacyCard, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_polaris2.LegacyCard.Section, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", gap: "16px", position: "relative" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "div",
+            {
+              style: {
+                flexShrink: 0,
+                width: "48px",
+                height: "48px",
+                borderRadius: "12px",
+                overflow: "hidden",
+                backgroundColor: "#f6f6f7",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: rec.icon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "img",
+                {
+                  src: rec.icon,
+                  alt: rec.title,
+                  style: { width: "48px", height: "48px", objectFit: "cover" }
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "div",
+                {
+                  style: {
+                    width: "48px",
+                    height: "48px",
+                    backgroundColor: "#e1e1e1",
+                    borderRadius: "12px"
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { position: "relative" }, children: [
+            rec.newBadge && newBadgeLabel && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { position: "absolute", right: "-8px", top: "-8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_polaris2.Badge, { tone: "info", children: newBadgeLabel }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_polaris2.Text, { variant: "headingSm", as: "h3", truncate: true, children: rec.title }),
+            freePlanLabel && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { marginTop: "6px" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_polaris2.Badge, { tone: "info", children: freePlanLabel }) })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { marginTop: "12px" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_polaris2.Text, { variant: "bodySm", tone: "subdued", as: "p", children: getDescription ? getDescription(rec) : rec.desc }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { marginTop: "12px" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_polaris2.Button,
+          {
+            disabled: loading,
+            size: "micro",
+            variant: "plain",
+            onClick: () => handleOpenUrl(rec.url),
+            icon: import_polaris_icons.ExternalIcon,
+            children: installLabel
+          }
+        ) })
+      ] }) }) }, `${rec.key}-${index}`)) })
+    }
+  );
 }
-var appsCatalog = catalog;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  appsCatalog,
+  PartnerIdCard,
+  Recommendations,
   createProgusConnector,
+  fetchAppsCatalog,
   getCrossSellOffers,
+  getCrossSellOffersFromApi,
   normalizePartnerId,
   signPayload
 });

package/dist/index.d.cts

@@ -1,3 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TextFieldProps } from '@shopify/polaris';
+
 type FetchLike = typeof fetch;
 type Logger = {
     info?: (message: string, meta?: Record<string, unknown>) => void;
@@ -24,6 +27,13 @@ type CrossSellOptions = {
     shopPlan?: string;
     appsCatalog?: AppsCatalogEntry[];
 };
+type CrossSellFetchOptions = CrossSellOptions & {
+    appName?: string;
+    appsCatalogUrl?: string;
+    limit?: number;
+    fetch?: FetchLike;
+    logger?: Logger;
+};
 type ConnectorConfig = {
     appKey: string;
     apiBaseUrl: string;
@@ -97,10 +107,44 @@ type Connector = {
 declare function createProgusConnector(config: ConnectorConfig): Connector;
 
 declare function getCrossSellOffers(options?: CrossSellOptions): AppsCatalogEntry[];
-declare const appsCatalog: AppsCatalogEntry[];
+declare function fetchAppsCatalog(options?: CrossSellFetchOptions): Promise<AppsCatalogEntry[]>;
+declare function getCrossSellOffersFromApi(options?: CrossSellFetchOptions): Promise<AppsCatalogEntry[]>;
 
 declare function signPayload(body: string, secret: string): string;
 
 declare function normalizePartnerId(value?: string | null): string | null;
 
-export { type AppsCatalogEntry, type AssignPartnerIdInput, type CheckPartnerIdResult, type ConnectorConfig, type CrossSellOptions, type Logger, type SubscriptionEventData, type TrackEventName, type TrackEventParams, type TrackResult, appsCatalog, createProgusConnector, getCrossSellOffers, normalizePartnerId, signPayload };
+type PartnerIdCardProps = {
+    partnerId: string;
+    onPartnerIdChange: (value: string) => void;
+    onSave: () => void;
+    saveLabel: string;
+    loading?: boolean;
+    saving?: boolean;
+    locked?: boolean;
+    error?: string | TextFieldProps["error"];
+    label: string;
+    placeholder?: string;
+    helpText?: string;
+    saveDisabled?: boolean;
+};
+declare function PartnerIdCard({ partnerId, onPartnerIdChange, onSave, saveLabel, loading, saving, locked, error, label, placeholder, helpText, saveDisabled, }: PartnerIdCardProps): react_jsx_runtime.JSX.Element;
+
+type RecommendationItem = AppsCatalogEntry & {
+    newBadge?: boolean;
+};
+type RecommendationsProps = {
+    recommendations: RecommendationItem[];
+    loading?: boolean;
+    title: string;
+    dismissLabel: string;
+    installLabel: string;
+    freePlanLabel?: string;
+    newBadgeLabel?: string;
+    onDismiss: () => void;
+    openUrl?: (url: string) => void;
+    getDescription?: (item: RecommendationItem) => string;
+};
+declare function Recommendations({ recommendations, loading, title, dismissLabel, installLabel, freePlanLabel, newBadgeLabel, onDismiss, openUrl, getDescription, }: RecommendationsProps): react_jsx_runtime.JSX.Element | null;
+
+export { type AppsCatalogEntry, type AssignPartnerIdInput, type CheckPartnerIdResult, type ConnectorConfig, type CrossSellFetchOptions, type CrossSellOptions, type Logger, PartnerIdCard, type PartnerIdCardProps, type RecommendationItem, Recommendations, type RecommendationsProps, type SubscriptionEventData, type TrackEventName, type TrackEventParams, type TrackResult, createProgusConnector, fetchAppsCatalog, getCrossSellOffers, getCrossSellOffersFromApi, normalizePartnerId, signPayload };

package/dist/index.d.ts

@@ -1,3 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TextFieldProps } from '@shopify/polaris';
+
 type FetchLike = typeof fetch;
 type Logger = {
     info?: (message: string, meta?: Record<string, unknown>) => void;
@@ -24,6 +27,13 @@ type CrossSellOptions = {
     shopPlan?: string;
     appsCatalog?: AppsCatalogEntry[];
 };
+type CrossSellFetchOptions = CrossSellOptions & {
+    appName?: string;
+    appsCatalogUrl?: string;
+    limit?: number;
+    fetch?: FetchLike;
+    logger?: Logger;
+};
 type ConnectorConfig = {
     appKey: string;
     apiBaseUrl: string;
@@ -97,10 +107,44 @@ type Connector = {
 declare function createProgusConnector(config: ConnectorConfig): Connector;
 
 declare function getCrossSellOffers(options?: CrossSellOptions): AppsCatalogEntry[];
-declare const appsCatalog: AppsCatalogEntry[];
+declare function fetchAppsCatalog(options?: CrossSellFetchOptions): Promise<AppsCatalogEntry[]>;
+declare function getCrossSellOffersFromApi(options?: CrossSellFetchOptions): Promise<AppsCatalogEntry[]>;
 
 declare function signPayload(body: string, secret: string): string;
 
 declare function normalizePartnerId(value?: string | null): string | null;
 
-export { type AppsCatalogEntry, type AssignPartnerIdInput, type CheckPartnerIdResult, type ConnectorConfig, type CrossSellOptions, type Logger, type SubscriptionEventData, type TrackEventName, type TrackEventParams, type TrackResult, appsCatalog, createProgusConnector, getCrossSellOffers, normalizePartnerId, signPayload };
+type PartnerIdCardProps = {
+    partnerId: string;
+    onPartnerIdChange: (value: string) => void;
+    onSave: () => void;
+    saveLabel: string;
+    loading?: boolean;
+    saving?: boolean;
+    locked?: boolean;
+    error?: string | TextFieldProps["error"];
+    label: string;
+    placeholder?: string;
+    helpText?: string;
+    saveDisabled?: boolean;
+};
+declare function PartnerIdCard({ partnerId, onPartnerIdChange, onSave, saveLabel, loading, saving, locked, error, label, placeholder, helpText, saveDisabled, }: PartnerIdCardProps): react_jsx_runtime.JSX.Element;
+
+type RecommendationItem = AppsCatalogEntry & {
+    newBadge?: boolean;
+};
+type RecommendationsProps = {
+    recommendations: RecommendationItem[];
+    loading?: boolean;
+    title: string;
+    dismissLabel: string;
+    installLabel: string;
+    freePlanLabel?: string;
+    newBadgeLabel?: string;
+    onDismiss: () => void;
+    openUrl?: (url: string) => void;
+    getDescription?: (item: RecommendationItem) => string;
+};
+declare function Recommendations({ recommendations, loading, title, dismissLabel, installLabel, freePlanLabel, newBadgeLabel, onDismiss, openUrl, getDescription, }: RecommendationsProps): react_jsx_runtime.JSX.Element | null;
+
+export { type AppsCatalogEntry, type AssignPartnerIdInput, type CheckPartnerIdResult, type ConnectorConfig, type CrossSellFetchOptions, type CrossSellOptions, type Logger, PartnerIdCard, type PartnerIdCardProps, type RecommendationItem, Recommendations, type RecommendationsProps, type SubscriptionEventData, type TrackEventName, type TrackEventParams, type TrackResult, createProgusConnector, fetchAppsCatalog, getCrossSellOffers, getCrossSellOffersFromApi, normalizePartnerId, signPayload };

package/dist/index.js

@@ -179,51 +179,227 @@ function createProgusConnector(config) {
   };
 }
 
-// src/appsCatalog.json
-var appsCatalog_default = [
-  {
-    key: "progus_cod",
-    type: "app",
-    title: "Progus COD",
-    company: "Progus",
-    companyUrl: "https://progus.com",
-    desc: "Automate COD Fees & Hide/Show Cash on Delivery by Rules",
-    url: "https://apps.shopify.com/progus-cod",
-    icon: "https://cdn.shopify.com/app-store/listing_images/bc537219cc3ed2bd4e7e3e683fe6b74a/icon/CMi_6dTEkIoDEAE=.png",
-    priority: 100,
-    enabled: true
-  },
-  {
-    key: "progus_trust_badges",
-    type: "app",
-    title: "Progus Trust Badges",
-    company: "Progus",
-    companyUrl: "https://progus.com",
-    desc: "Add Trust Badges to your store to build trust and credibility.",
-    url: "https://apps.shopify.com/progus-trust-badges-1",
-    icon: "https://cdn.shopify.com/app-store/listing_images/f9d0009e237f27d2db35b41ef99be858/icon/CJ3y1qDn1JEDEAE=.png",
-    priority: 90,
-    enabled: true
-  }
-];
-
 // src/crossSell.ts
-var catalog = appsCatalog_default;
 function getCrossSellOffers(options = {}) {
-  const appsCatalog2 = options.appsCatalog ?? catalog;
+  const appsCatalog = options.appsCatalog ?? [];
   const installedKeys = new Set(
     [options.currentAppKey, ...options.installedAppKeys ?? []].filter(
       (key) => Boolean(key)
     )
   );
   const locale = options.locale;
-  return appsCatalog2.filter((app) => app.enabled !== false).filter((app) => locale ? !app.locales || app.locales.includes(locale) : true).filter((app) => !installedKeys.has(app.key)).sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+  return appsCatalog.filter((app) => app.enabled !== false).filter((app) => locale ? !app.locales || app.locales.includes(locale) : true).filter((app) => !installedKeys.has(app.key)).sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+}
+var DEFAULT_APPS_CATALOG_URL = "https://appsdata.progus.workers.dev/recommendations";
+async function fetchAppsCatalog(options = {}) {
+  const fetchImpl = options.fetch ?? globalThis.fetch;
+  const logger = options.logger ?? console;
+  const appName = options.appName ?? options.currentAppKey;
+  const baseUrl = stripTrailingSlash(options.appsCatalogUrl ?? DEFAULT_APPS_CATALOG_URL);
+  const limit = typeof options.limit === "number" ? options.limit : 3;
+  const params = new URLSearchParams();
+  if (appName) params.set("appName", appName);
+  if (limit > 0) params.set("limit", String(limit));
+  const url = params.toString() ? `${baseUrl}?${params.toString()}` : baseUrl;
+  if (!fetchImpl) {
+    throw new Error("Fetch implementation is required");
+  }
+  try {
+    const response = await fetchImpl(url);
+    const text = await response.text();
+    const parsed = safeJsonParse(text);
+    if (!response.ok || !parsed) {
+      logger?.error?.("Failed to fetch apps catalog", { status: response.status });
+      return [];
+    }
+    return parsed;
+  } catch (error) {
+    logger?.error?.("Failed to fetch apps catalog", {
+      error: error instanceof Error ? error.message : String(error)
+    });
+    return [];
+  }
+}
+async function getCrossSellOffersFromApi(options = {}) {
+  const appsCatalog = options.appsCatalog ?? await fetchAppsCatalog(options);
+  return getCrossSellOffers({ ...options, appsCatalog });
+}
+
+// src/ui/PartnerIdCard.tsx
+import { FormLayout, LegacyCard, SkeletonBodyText, TextField } from "@shopify/polaris";
+import { jsx } from "react/jsx-runtime";
+function PartnerIdCard({
+  partnerId,
+  onPartnerIdChange,
+  onSave,
+  saveLabel,
+  loading,
+  saving,
+  locked,
+  error,
+  label,
+  placeholder,
+  helpText,
+  saveDisabled
+}) {
+  return /* @__PURE__ */ jsx(
+    LegacyCard,
+    {
+      sectioned: true,
+      primaryFooterAction: {
+        content: saveLabel,
+        loading: Boolean(saving),
+        onAction: onSave,
+        disabled: Boolean(saveDisabled)
+      },
+      children: loading ? /* @__PURE__ */ jsx(SkeletonBodyText, { lines: 1 }) : /* @__PURE__ */ jsx(FormLayout, { children: /* @__PURE__ */ jsx(
+        TextField,
+        {
+          error,
+          label,
+          value: partnerId,
+          onChange: onPartnerIdChange,
+          placeholder,
+          helpText,
+          autoComplete: "off",
+          disabled: Boolean(locked || loading)
+        }
+      ) })
+    }
+  );
+}
+
+// src/ui/Recommendations.tsx
+import { ActionList, Badge, Button, Layout, LegacyCard as LegacyCard2, Popover, Text } from "@shopify/polaris";
+import { ExternalIcon, MenuHorizontalIcon } from "@shopify/polaris-icons";
+import { useState } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function Recommendations({
+  recommendations,
+  loading,
+  title,
+  dismissLabel,
+  installLabel,
+  freePlanLabel,
+  newBadgeLabel,
+  onDismiss,
+  openUrl,
+  getDescription
+}) {
+  const [menuActive, setMenuActive] = useState(false);
+  if (!recommendations || recommendations.length === 0) {
+    return null;
+  }
+  const handleOpenUrl = (url) => {
+    if (openUrl) return openUrl(url);
+    if (typeof window !== "undefined") {
+      window.open(url, "_blank", "noopener,noreferrer");
+    }
+  };
+  return /* @__PURE__ */ jsx2(
+    LegacyCard2,
+    {
+      sectioned: true,
+      title: /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsx2(Text, { variant: "headingSm", as: "h3", children: title }),
+        /* @__PURE__ */ jsx2("div", { children: /* @__PURE__ */ jsx2(
+          Popover,
+          {
+            active: menuActive,
+            activator: /* @__PURE__ */ jsx2(
+              Button,
+              {
+                onClick: () => setMenuActive(!menuActive),
+                icon: MenuHorizontalIcon,
+                variant: "plain",
+                accessibilityLabel: "Menu"
+              }
+            ),
+            onClose: () => setMenuActive(false),
+            preferredAlignment: "right",
+            children: /* @__PURE__ */ jsx2(
+              ActionList,
+              {
+                actionRole: "menuitem",
+                items: [
+                  {
+                    content: dismissLabel,
+                    onAction: () => {
+                      setMenuActive(false);
+                      onDismiss();
+                    }
+                  }
+                ]
+              }
+            )
+          }
+        ) })
+      ] }),
+      children: /* @__PURE__ */ jsx2(Layout, { children: recommendations.map((rec, index) => /* @__PURE__ */ jsx2(Layout.Section, { variant: "oneThird", children: /* @__PURE__ */ jsx2(LegacyCard2, { children: /* @__PURE__ */ jsxs(LegacyCard2.Section, { children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "16px", position: "relative" }, children: [
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              style: {
+                flexShrink: 0,
+                width: "48px",
+                height: "48px",
+                borderRadius: "12px",
+                overflow: "hidden",
+                backgroundColor: "#f6f6f7",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: rec.icon ? /* @__PURE__ */ jsx2(
+                "img",
+                {
+                  src: rec.icon,
+                  alt: rec.title,
+                  style: { width: "48px", height: "48px", objectFit: "cover" }
+                }
+              ) : /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  style: {
+                    width: "48px",
+                    height: "48px",
+                    backgroundColor: "#e1e1e1",
+                    borderRadius: "12px"
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx2("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+            rec.newBadge && newBadgeLabel && /* @__PURE__ */ jsx2("div", { style: { position: "absolute", right: "-8px", top: "-8px" }, children: /* @__PURE__ */ jsx2(Badge, { tone: "info", children: newBadgeLabel }) }),
+            /* @__PURE__ */ jsx2(Text, { variant: "headingSm", as: "h3", truncate: true, children: rec.title }),
+            freePlanLabel && /* @__PURE__ */ jsx2("div", { style: { marginTop: "6px" }, children: /* @__PURE__ */ jsx2(Badge, { tone: "info", children: freePlanLabel }) })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsx2("div", { style: { marginTop: "12px" }, children: /* @__PURE__ */ jsx2(Text, { variant: "bodySm", tone: "subdued", as: "p", children: getDescription ? getDescription(rec) : rec.desc }) }),
+        /* @__PURE__ */ jsx2("div", { style: { marginTop: "12px" }, children: /* @__PURE__ */ jsx2(
+          Button,
+          {
+            disabled: loading,
+            size: "micro",
+            variant: "plain",
+            onClick: () => handleOpenUrl(rec.url),
+            icon: ExternalIcon,
+            children: installLabel
+          }
+        ) })
+      ] }) }) }, `${rec.key}-${index}`)) })
+    }
+  );
 }
-var appsCatalog = catalog;
 export {
-  appsCatalog,
+  PartnerIdCard,
+  Recommendations,
   createProgusConnector,
+  fetchAppsCatalog,
   getCrossSellOffers,
+  getCrossSellOffersFromApi,
   normalizePartnerId,
   signPayload
 };

package/package.json

@@ -1,23 +1,22 @@
 {
   "name": "@progus/connector",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Progus partner/affiliate connector helpers",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
+      "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     }
   },
   "files": [
     "dist",
-    "README.md",
-    "src/appsCatalog.json"
+    "README.md"
   ],
   "sideEffects": false,
   "engines": {
@@ -27,12 +26,21 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsup src/index.ts --format esm,cjs --dts --clean --target node18",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --watch --target node18",
+    "build": "tsup src/index.ts --format esm,cjs --dts --clean --target node18 --external react --external react-dom --external @shopify/polaris --external @shopify/polaris-icons",
+    "dev": "tsup src/index.ts --format esm,cjs --dts --watch --target node18 --external react --external react-dom --external @shopify/polaris --external @shopify/polaris-icons",
+    "prepare": "npm run build",
     "smoke": "tsx scripts/smoke.ts"
   },
+  "peerDependencies": {
+    "@shopify/polaris": ">=13",
+    "@shopify/polaris-icons": ">=8",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
   "devDependencies": {
     "@types/node": "^20.11.30",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
     "tsup": "^8.0.1",
     "tsx": "^4.7.1",
     "typescript": "^5.4.5"

package/src/appsCatalog.json

@@ -1,26 +0,0 @@
-[
-  {
-    "key": "progus_cod",
-    "type": "app",
-    "title": "Progus COD",
-    "company": "Progus",
-    "companyUrl": "https://progus.com",
-    "desc": "Automate COD Fees & Hide/Show Cash on Delivery by Rules",
-    "url": "https://apps.shopify.com/progus-cod",
-    "icon": "https://cdn.shopify.com/app-store/listing_images/bc537219cc3ed2bd4e7e3e683fe6b74a/icon/CMi_6dTEkIoDEAE=.png",
-    "priority": 100,
-    "enabled": true
-  },
-  {
-    "key": "progus_trust_badges",
-    "type": "app",
-    "title": "Progus Trust Badges",
-    "company": "Progus",
-    "companyUrl": "https://progus.com",
-    "desc": "Add Trust Badges to your store to build trust and credibility.",
-    "url": "https://apps.shopify.com/progus-trust-badges-1",
-    "icon": "https://cdn.shopify.com/app-store/listing_images/f9d0009e237f27d2db35b41ef99be858/icon/CJ3y1qDn1JEDEAE=.png",
-    "priority": 90,
-    "enabled": true
-  }
-]