@progus/connector-ui

UI components for Progus apps. Cross-sell helpers are re-exported from @progus/connector.

Installation

npm install @progus/connector-ui

Usage

import { Recommendations, PartnerIdCard, getCrossSellOffersFromApi } from "@progus/connector-ui";

Note: getCrossSellOffersFromApi is re-exported from @progus/connector and is intended to run server-side (pass a server-side fetch).

Prompt: Partner ID block implementation (copy/paste)

You are adding the Partner ID block using @progus/connector-ui.

Implement these pieces:
1) Fetch current partnerId on load (server-side loader recommended):
   - call checkPartnerId({ shopDomain }) via @progus/connector
   - set initial value and lock the field if a partnerId already exists

2) Render PartnerIdCard:
   - <PartnerIdCard
       partnerId={value}
       onPartnerIdChange={setValue}
       onSave={handleSave}
       saveLabel="Save Partner ID"
       label="Partner ID"
       placeholder="e.g. partner_123"
       helpText="Enter your partner ID to track affiliate referrals."
       loading={loading}
       saving={saving}
       locked={isLocked}
       error={error}
       saveDisabled={isLocked || loading || saving || !value.trim()}
     />

3) Save flow:
   - on save, call assignPartnerId({ shopDomain, partnerId }) via @progus/connector
   - on success, lock the field and stop allowing edits

Prompt: Recommendations block implementation (copy/paste)

You are adding the Progus Recommendations block using @progus/connector-ui.

Implement these pieces:
1) Fetch recommendations (server-side loader preferred):
   - getCrossSellOffersFromApi({ appName, limit, locale, installedAppKeys })
   - pass the resulting list to the UI

2) Render Recommendations:
   - <Recommendations
       recommendations={list}
       title="Recommended Progus apps"
       dismissLabel="Hide recommendations"
       installLabel="Install"
       freePlanLabel="Free plan"
       newBadgeLabel="New"
       onDismiss={() => hideBlock()}
     />
   - if list is empty, do not render the block

This block is independent from the partner program and can be used alone.