@spree/seller-dashboard 6.0.0 → 6.0.2

package/src/locales/zh-CN.json

@@ -1,17 +1,4 @@
 {
-  "accept_invitation": {
-    "failed": "无法接受该邀请。邀请可能已过期，或密码有误。",
-    "first_name": "名字",
-    "invalid_link": "此链接缺少令牌。请从邀请邮件中打开链接。",
-    "last_name": "姓氏",
-    "not_found": "此邀请已失效。请让邀请你的人重新发送一份。",
-    "password": "密码",
-    "password_confirmation": "确认密码",
-    "submit": "接受邀请",
-    "submitting": "正在接受…",
-    "subtitle": "你以 {{email}} 的身份受邀。设置密码即可完成。",
-    "title": "加入团队"
-  },
   "account": {
     "avatar": "照片",
     "avatar_help": "在面板中显示在您的姓名旁边。方形图片效果最佳。",

package/src/pages/accept-invitation.tsx

@@ -1,26 +1,14 @@
-import { useAuth } from '@spree/dashboard-core'
-import { Button, Field, FieldError, FieldGroup, FieldLabel, Input } from '@spree/dashboard-ui'
-import { useQuery } from '@tanstack/react-query'
+import { InvitationAcceptance } from '@spree/dashboard-core'
 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.
+ * The screens are the framework's, shared with the operator's dashboard; what
+ * is the panel's own is which API answers the lookup and where an accepted
+ * member lands. That is the seller they joined: the layout under that route
+ * loads the member's permissions for it.
  */
 export function AcceptInvitationPage({
   invitationId,
@@ -29,98 +17,31 @@ export function AcceptInvitationPage({
   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 className="flex w-full max-w-sm flex-col gap-6">
+        <InvitationAcceptance
+          invitationId={invitationId}
+          token={token}
+          lookup={async (id, token) => {
+            const invitation = await sellerClient().auth.lookupInvitation(id, token)
+            // Carried by the lookup alone; the team listings leave it out.
+            return {
+              ...invitation,
+              invitee_exists: invitation.invitee_exists ?? false,
+              target: invitation.seller,
+            }
+          }}
+          onAccepted={(invitation) =>
+            navigate({
+              to: '/$sellerId',
+              params: { sellerId: invitation.target.id },
+              replace: true,
+            })
+          }
+        />
       </div>
     </div>
   )

package/src/pages/onboarding.tsx

@@ -24,15 +24,13 @@ import {
   Progress,
   ScrollArea,
   StatusBadge as SharedStatusBadge,
+  StepIcon,
   Textarea,
   toastManager,
 } from '@spree/dashboard-ui'
 import {
-  CheckCircle2Icon,
   ChevronRightIcon,
   CircleAlertIcon,
-  CircleIcon,
-  ClockIcon,
   ExternalLinkIcon,
   XCircleIcon,
 } from '@spree/dashboard-ui/icons'
@@ -517,17 +515,14 @@ function panelRoute(kind: string): string | undefined {
   }
 }
 
+// The operator's setup checklist icons, plus a submission sent back.
 function StatusIcon({ status }: { status: string }) {
-  if (status === 'complete') {
-    return <CheckCircle2Icon className="size-5 shrink-0 text-success" />
-  }
-  if (status === 'pending') {
-    return <ClockIcon className="size-5 shrink-0 text-warning" />
-  }
+  if (status === 'complete') return <StepIcon status="done" className="size-5" />
+  if (status === 'pending') return <StepIcon status="in_progress" className="size-5" />
   if (status === 'rejected') {
     return <XCircleIcon className="size-5 shrink-0 text-destructive" />
   }
-  return <CircleIcon className="size-5 shrink-0 text-muted-foreground" />
+  return <StepIcon status="todo" className="size-5" />
 }
 
 function StatusBadge({ status }: { status: string }) {