@spree/seller-dashboard 1.0.0-beta.1

package/src/nav/default.ts

@@ -0,0 +1,108 @@
+import { hasVisibleSettingsEntries, i18n, nav } from '@spree/dashboard-core'
+import {
+  BanknoteIcon,
+  ClipboardCheckIcon,
+  HandCoinsIcon,
+  HomeIcon,
+  PackageIcon,
+  SettingsIcon,
+  StoreIcon,
+  TagIcon,
+} from '@spree/dashboard-ui/icons'
+import { OnboardingNavBadge } from '../components/onboarding-nav-badge'
+
+// The panel's built-in sidebar. Registered into the same registry a plugin
+// writes to, so a marketplace can remove, reorder or add beside these with
+// `defineDashboardPlugin({ nav: ... })` instead of forking the chrome.
+//
+// Positions leave room on either side (100/200/…) exactly as the operator's
+// dashboard does, so a plugin slots between built-ins without renumbering.
+//
+// Subjects are the seller-branch CanCanCan subjects the API's `/me`
+// serializes; an entry a member cannot act on is hidden by the same
+// permission filter the operator's sidebar uses.
+
+nav.add({
+  key: 'home',
+  label: i18n.t('nav.home'),
+  path: '/',
+  icon: HomeIcon,
+  position: 50,
+  subject: 'seller_profile',
+})
+
+// High in the rail while a seller is still being admitted: until they are
+// approved it is the only thing that matters. A marketplace that admits
+// sellers some other way removes it like any other entry.
+nav.add({
+  key: 'onboarding',
+  label: i18n.t('nav.onboarding'),
+  path: '/onboarding',
+  icon: ClipboardCheckIcon,
+  position: 100,
+  subject: 'seller_profile',
+  badge: OnboardingNavBadge,
+})
+
+nav.add({
+  key: 'products',
+  label: i18n.t('nav.products'),
+  path: '/products',
+  icon: TagIcon,
+  position: 110,
+  subject: 'Spree::Product',
+})
+
+nav.add({
+  key: 'orders',
+  label: i18n.t('nav.orders'),
+  path: '/orders',
+  icon: PackageIcon,
+  position: 120,
+  subject: 'Spree::Order',
+})
+
+// The seller's own books. Two entries rather than one because they answer
+// different questions: what an order earned, and whether last week's
+// settlement went out. Both gated on the ledger key, so a teammate given
+// orders but not money sees neither.
+nav.add({
+  key: 'earnings',
+  label: i18n.t('nav.earnings'),
+  path: '/earnings',
+  icon: BanknoteIcon,
+  position: 130,
+  subject: 'seller_earnings',
+})
+
+nav.add({
+  key: 'payouts',
+  label: i18n.t('nav.payouts'),
+  path: '/payouts',
+  icon: HandCoinsIcon,
+  position: 140,
+  subject: 'seller_earnings',
+})
+
+nav.add({
+  key: 'profile',
+  label: i18n.t('nav.profile'),
+  path: '/profile',
+  icon: StoreIcon,
+  position: 150,
+  subject: 'seller_profile',
+})
+
+// Settings opens the landing page (and the secondary rail on wide viewports).
+// The entries inside it live in `nav/settings.ts`. Bottom section and gated
+// on there being something to see, exactly as the operator's dashboard does
+// it — a member with no settings authority never opens an empty shell.
+nav.add({
+  key: 'settings',
+  label: i18n.t('nav.settings'),
+  path: '/settings',
+  icon: SettingsIcon,
+  if: ({ permissions }) => hasVisibleSettingsEntries(permissions),
+  section: 'bottom',
+  position: 100,
+})

package/src/nav/settings.ts

@@ -0,0 +1,114 @@
+import { i18n, settingsNav } from '@spree/dashboard-core'
+import {
+  PackageIcon,
+  ScrollTextIcon,
+  TruckIcon,
+  UsersRoundIcon,
+  WarehouseIcon,
+} from '@spree/dashboard-ui/icons'
+
+// The panel's settings rail, registered into the same registry the operator's
+// dashboard writes to — so a marketplace adds, removes or reorders entries
+// with `defineDashboardPlugin` rather than forking the chrome.
+//
+// Deliberately short. Most of what an operator configures is the
+// marketplace's, not a seller's; what belongs here is what a seller owns and
+// only they can answer.
+
+settingsNav.addGroup({
+  key: 'fulfillment',
+  labelKey: 'admin.settings_nav.groups.fulfillment',
+  position: 200,
+})
+
+settingsNav.addGroup({
+  key: 'legal',
+  label: i18n.t('nav.legal'),
+  position: 250,
+})
+
+settingsNav.addGroup({
+  key: 'team',
+  labelKey: 'admin.settings_nav.groups.team',
+  position: 300,
+})
+
+settingsNav.add({
+  key: 'settings.stock-locations',
+  labelKey: 'admin.settings_nav.items.stock_locations',
+  descriptionKey: 'admin.settings_nav.descriptions.stock_locations',
+  keywords: ['warehouse', 'inventory', 'fulfillment', 'pickup'],
+  path: '/stock-locations',
+  icon: WarehouseIcon,
+  group: 'fulfillment',
+  position: 100,
+  // The seller-branch subject the API's `/me` serializes. A member without
+  // stock permission never sees the entry.
+  subject: 'Spree::StockLocation',
+})
+
+// How this seller's goods ship. Beside stock locations because the two are
+// one question asked twice — where the goods are, and how they leave.
+settingsNav.add({
+  key: 'settings.delivery-methods',
+  label: i18n.t('nav.delivery_methods'),
+  descriptionKey: 'admin.settings_nav.descriptions.delivery_methods',
+  keywords: ['shipping', 'rates', 'carriers', 'delivery'],
+  path: '/delivery-methods',
+  icon: TruckIcon,
+  group: 'fulfillment',
+  position: 200,
+  // The seller-branch subject the API's `/me` serializes. A member without
+  // delivery permission never sees the entry.
+  subject: 'Spree::DeliveryMethod',
+})
+
+// What this seller packs their goods into. Beside the other two because the
+// three answer one question together: where the goods are, how they leave,
+// and what they leave in (docs/plans/6.0-seller-package-types.md).
+settingsNav.add({
+  key: 'settings.package-types',
+  label: i18n.t('nav.package_types'),
+  descriptionKey: 'admin.settings_nav.descriptions.package_types',
+  keywords: ['box', 'carton', 'pallet', 'container', 'packaging', 'parcel'],
+  path: '/package-types',
+  icon: PackageIcon,
+  group: 'fulfillment',
+  position: 300,
+  // The seller-branch subject the API's `/me` serializes. A member without
+  // packaging permission never sees the entry.
+  subject: 'Spree::PackageType',
+})
+
+// Who runs this seller. Under settings rather than in the main rail, matching
+// where the operator's dashboard puts its own staff page: managing people is
+// configuration, not day-to-day selling.
+settingsNav.add({
+  key: 'settings.team',
+  label: i18n.t('nav.team'),
+  descriptionKey: 'admin.settings_nav.descriptions.team',
+  keywords: ['users', 'staff', 'invite', 'members'],
+  path: '/team',
+  icon: UsersRoundIcon,
+  group: 'team',
+  position: 100,
+  subject: 'seller_profile',
+  action: 'update',
+})
+
+// The seller's own legal documents. Under settings because publishing them is
+// configuration a seller does once, not day-to-day selling — and because what
+// they must publish is the marketplace's onboarding checklist, which links
+// here.
+settingsNav.add({
+  key: 'settings.policies',
+  label: i18n.t('nav.policies'),
+  descriptionKey: 'admin.settings_nav.descriptions.policies',
+  keywords: ['legal', 'terms', 'privacy', 'returns', 'refund'],
+  path: '/policies',
+  icon: ScrollTextIcon,
+  group: 'legal',
+  position: 100,
+  subject: 'seller_profile',
+  action: 'update',
+})

package/src/pages/accept-invitation.tsx

@@ -0,0 +1,127 @@
+import { useAuth } from '@spree/dashboard-core'
+import { Button, Field, FieldError, FieldGroup, FieldLabel, Input } from '@spree/dashboard-ui'
+import { useQuery } from '@tanstack/react-query'
+import { useNavigate } from '@tanstack/react-router'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { sellerClient } from '../api-client'
+import { CenteredMessage } from '../components/centered-message'
+
+interface AcceptValues {
+  password: string
+  password_confirmation: string
+  first_name: string
+  last_name: string
+}
+
+/**
+ * Joining a seller's team from the emailed link.
+ *
+ * The invitation id and token in the URL are the whole credential — nobody is
+ * signed in yet. Accepting returns a seller session, so the new member lands
+ * in the panel rather than being bounced to a login form.
+ */
+export function AcceptInvitationPage({
+  invitationId,
+  token,
+}: {
+  invitationId: string
+  token?: string
+}) {
+  const { t } = useTranslation()
+  const { acceptInvitation } = useAuth()
+  const navigate = useNavigate()
+  const [error, setError] = useState<string | null>(null)
+
+  const {
+    data: invitation,
+    isLoading,
+    error: lookupError,
+  } = useQuery({
+    queryKey: ['seller', 'invitation', invitationId],
+    queryFn: () => sellerClient().auth.lookupInvitation(invitationId, token ?? ''),
+    enabled: Boolean(token),
+    retry: false,
+  })
+
+  const form = useForm<AcceptValues>({
+    defaultValues: { password: '', password_confirmation: '', first_name: '', last_name: '' },
+  })
+
+  if (!token) return <CenteredMessage>{t('accept_invitation.invalid_link')}</CenteredMessage>
+  if (isLoading) return <CenteredMessage>{t('common.loading')}</CenteredMessage>
+  if (lookupError || !invitation) {
+    return <CenteredMessage>{t('accept_invitation.not_found')}</CenteredMessage>
+  }
+
+  async function onSubmit(values: AcceptValues) {
+    setError(null)
+    try {
+      await acceptInvitation(invitationId, token ?? '', values)
+      // The index route decides where to go from there — it already knows how
+      // to skip the picker for someone who runs exactly one seller. Without
+      // this the form simply sits there after a successful accept, and the
+      // obvious next move is to submit again, against an invitation that has
+      // now been consumed.
+      navigate({ to: '/', replace: true })
+    } catch {
+      setError(t('accept_invitation.failed'))
+    }
+  }
+
+  const { errors, isSubmitting } = form.formState
+
+  return (
+    <div className="flex min-h-screen items-center justify-center p-6">
+      <div className="w-full max-w-sm">
+        <h1 className="font-medium text-xl">{t('accept_invitation.title')}</h1>
+        <p className="mt-1 mb-6 text-muted-foreground text-sm">
+          {t('accept_invitation.subtitle', { email: invitation.email })}
+        </p>
+
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <FieldGroup>
+            <Field>
+              <FieldLabel htmlFor="first_name">{t('accept_invitation.first_name')}</FieldLabel>
+              <Input id="first_name" {...form.register('first_name')} />
+            </Field>
+
+            <Field>
+              <FieldLabel htmlFor="last_name">{t('accept_invitation.last_name')}</FieldLabel>
+              <Input id="last_name" {...form.register('last_name')} />
+            </Field>
+
+            <Field>
+              <FieldLabel htmlFor="password">{t('accept_invitation.password')}</FieldLabel>
+              <Input
+                id="password"
+                type="password"
+                aria-invalid={!!errors.password || undefined}
+                {...form.register('password', { required: true })}
+              />
+              <FieldError errors={[errors.password]} />
+            </Field>
+
+            <Field>
+              <FieldLabel htmlFor="password_confirmation">
+                {t('accept_invitation.password_confirmation')}
+              </FieldLabel>
+              <Input
+                id="password_confirmation"
+                type="password"
+                {...form.register('password_confirmation')}
+              />
+            </Field>
+
+            {error && <p className="text-destructive text-sm">{error}</p>}
+
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting ? t('accept_invitation.submitting') : t('accept_invitation.submit')}
+            </Button>
+          </FieldGroup>
+        </form>
+      </div>
+    </div>
+  )
+}