@tuturuuu/ui 0.19.0 → 0.20.1

package/src/components/ui/custom/workspace-access/workspace-access-invite-dialog.tsx

@@ -1,16 +1,24 @@
 'use client';
 
-import { MailPlus, UserPlus } from '@tuturuuu/icons';
-import type { WorkspaceDefaultPermissionMemberType } from '@tuturuuu/types';
+import {
+  CreditCard,
+  MailPlus,
+  ShieldCheck,
+  TriangleAlert,
+  UserPlus,
+} from '@tuturuuu/icons';
 import { Badge } from '@tuturuuu/ui/badge';
 import { Button } from '@tuturuuu/ui/button';
+import { Checkbox } from '@tuturuuu/ui/checkbox';
 import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from '@tuturuuu/ui/dialog';
+import { Label } from '@tuturuuu/ui/label';
 import {
   Select,
   SelectContent,
@@ -23,22 +31,32 @@ import { useTranslations } from 'next-intl';
 import { parseInviteEmails } from './member-filter-utils';
 
 type Props = {
+  accessPreset: 'guest' | 'member' | 'pos_operator';
+  canManageRoles: boolean;
+  confirmDefaultAdminMigration: boolean;
+  defaultAdminEnabled: boolean;
   emails: string;
   isSubmitting: boolean;
-  memberType: WorkspaceDefaultPermissionMemberType;
+  joinedMemberCount: number;
+  onAccessPresetChange: (value: 'guest' | 'member' | 'pos_operator') => void;
+  onConfirmDefaultAdminMigrationChange: (value: boolean) => void;
   onEmailsChange: (value: string) => void;
-  onMemberTypeChange: (value: WorkspaceDefaultPermissionMemberType) => void;
   onOpenChange: (open: boolean) => void;
   onSubmit: () => void;
   open: boolean;
 };
 
 export function WorkspaceAccessInviteDialog({
+  accessPreset,
+  canManageRoles,
+  confirmDefaultAdminMigration,
+  defaultAdminEnabled,
   emails,
   isSubmitting,
-  memberType,
+  joinedMemberCount,
+  onAccessPresetChange,
+  onConfirmDefaultAdminMigrationChange,
   onEmailsChange,
-  onMemberTypeChange,
   onOpenChange,
   onSubmit,
   open,
@@ -48,54 +66,143 @@ export function WorkspaceAccessInviteDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-xl">
-        <DialogHeader className="space-y-3">
-          <div className="flex h-10 w-10 items-center justify-center rounded-lg border bg-muted/50">
-            <UserPlus className="h-4 w-4" />
+      <DialogContent className="flex max-h-[calc(100dvh-1rem)] w-[calc(100%-1rem)] max-w-none flex-col gap-0 overflow-hidden rounded-b-none p-0 max-sm:top-auto max-sm:bottom-0 max-sm:left-0 max-sm:translate-x-0 max-sm:translate-y-0 sm:max-h-[min(88dvh,52rem)] sm:max-w-xl sm:rounded-lg">
+        <DialogHeader className="shrink-0 gap-0 border-b p-4 pr-12 text-left sm:p-6 sm:pr-12">
+          <div className="flex items-start gap-3">
+            <div className="flex size-10 shrink-0 items-center justify-center rounded-xl border border-dynamic-blue/25 bg-dynamic-blue/10 text-dynamic-blue">
+              <UserPlus className="size-4" />
+            </div>
+            <div className="min-w-0 space-y-1">
+              <DialogTitle>{t('ws-members.invite_member')}</DialogTitle>
+              <DialogDescription className="leading-5">
+                {t('ws-members.invite_dialog_description')}
+              </DialogDescription>
+            </div>
           </div>
-          <DialogTitle>{t('ws-members.invite_member')}</DialogTitle>
-          <DialogDescription>
-            {t('ws-members.invite_dialog_description')}
-          </DialogDescription>
         </DialogHeader>
 
-        <div className="space-y-4">
-          <Textarea
-            rows={7}
-            value={emails}
-            onChange={(event) => onEmailsChange(event.target.value)}
-            placeholder={'one@example.com\ntwo@example.com'}
-          />
-
-          <Select
-            value={memberType}
-            onValueChange={(value) =>
-              onMemberTypeChange(value as WorkspaceDefaultPermissionMemberType)
-            }
-          >
-            <SelectTrigger className="w-full">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="MEMBER">
-                {t('ws-members.invite_membership_member')}
-              </SelectItem>
-              <SelectItem value="GUEST">
-                {t('ws-members.invite_membership_guest')}
-              </SelectItem>
-            </SelectContent>
-          </Select>
+        <div className="min-h-0 flex-1 space-y-4 overflow-y-auto overscroll-contain p-4 sm:p-6">
+          <div className="grid gap-2">
+            <Label htmlFor="workspace-access-invite-emails">
+              {t('ws-members.invite_member')}
+            </Label>
+            <Textarea
+              id="workspace-access-invite-emails"
+              rows={5}
+              value={emails}
+              onChange={(event) => onEmailsChange(event.target.value)}
+              placeholder={'one@example.com\ntwo@example.com'}
+              className="min-h-28 resize-y"
+            />
+          </div>
 
-          <div className="flex flex-wrap items-center justify-between gap-3">
-            <Badge variant="secondary" className="rounded-full">
-              {count} {t('ws-members.pending_invitations').toLowerCase()}
-            </Badge>
-            <Button disabled={isSubmitting || count === 0} onClick={onSubmit}>
-              <MailPlus className="mr-2 h-4 w-4" />
-              {t('ws-members.invite_submit')}
-            </Button>
+          <div className="grid gap-2">
+            <Label htmlFor="workspace-access-invite-membership">
+              {t('ws-members.invite_membership_label')}
+            </Label>
+            <Select
+              value={accessPreset}
+              onValueChange={(value) =>
+                onAccessPresetChange(
+                  value as 'guest' | 'member' | 'pos_operator'
+                )
+              }
+            >
+              <SelectTrigger
+                id="workspace-access-invite-membership"
+                className="w-full"
+              >
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="member">
+                  {t('ws-members.invite_membership_member')}
+                </SelectItem>
+                <SelectItem value="guest">
+                  {t('ws-members.invite_membership_guest')}
+                </SelectItem>
+                <SelectItem value="pos_operator" disabled={!canManageRoles}>
+                  {t('ws-members.invite_membership_pos_operator')}
+                </SelectItem>
+              </SelectContent>
+            </Select>
           </div>
+
+          {accessPreset === 'pos_operator' ? (
+            <div className="space-y-3 rounded-xl border border-dynamic-blue/25 bg-dynamic-blue/5 p-3.5 sm:p-4">
+              <div className="flex items-start gap-3">
+                <div className="mt-0.5 rounded-lg border border-dynamic-blue/20 bg-background p-2 text-dynamic-blue">
+                  <CreditCard className="h-4 w-4" />
+                </div>
+                <div className="min-w-0 space-y-1">
+                  <p className="font-medium text-sm">
+                    {t('ws-members.pos_operator_title')}
+                  </p>
+                  <p className="text-muted-foreground text-sm leading-5">
+                    {t('ws-members.pos_operator_description')}
+                  </p>
+                </div>
+              </div>
+
+              <div className="grid gap-2 sm:grid-cols-2">
+                {defaultAdminEnabled ? (
+                  <div className="flex items-center gap-2 rounded-lg border bg-background/70 p-3 text-sm">
+                    <ShieldCheck className="h-4 w-4 text-dynamic-green" />
+                    <span>
+                      {joinedMemberCount}{' '}
+                      {t('ws-members.pos_operator_existing_members')}
+                    </span>
+                  </div>
+                ) : null}
+                <div className="flex items-center gap-2 rounded-lg border bg-background/70 p-3 text-sm">
+                  <CreditCard className="h-4 w-4 text-dynamic-blue" />
+                  <span>{t('ws-members.pos_operator_only_permission')}</span>
+                </div>
+              </div>
+
+              {defaultAdminEnabled ? (
+                <div className="flex items-start gap-2 rounded-lg border border-dynamic-orange/25 bg-dynamic-orange/5 p-3 text-sm">
+                  <TriangleAlert className="mt-0.5 h-4 w-4 shrink-0 text-dynamic-orange" />
+                  <p className="text-muted-foreground leading-5">
+                    {t('ws-members.pos_operator_admin_migration_note')}
+                  </p>
+                </div>
+              ) : null}
+
+              <label className="flex cursor-pointer items-start gap-3 rounded-lg border bg-background p-3">
+                <Checkbox
+                  checked={confirmDefaultAdminMigration}
+                  className="mt-0.5"
+                  onCheckedChange={(checked) =>
+                    onConfirmDefaultAdminMigrationChange(checked === true)
+                  }
+                />
+                <span className="text-sm leading-5">
+                  {t('ws-members.pos_operator_confirmation')}
+                </span>
+              </label>
+            </div>
+          ) : null}
         </div>
+
+        <DialogFooter className="grid shrink-0 grid-cols-[auto_1fr] items-center gap-3 border-t bg-muted/20 p-3 sm:flex sm:p-4">
+          <Badge variant="secondary" className="rounded-full">
+            {count} {t('ws-members.pending_invitations').toLowerCase()}
+          </Badge>
+          <Button
+            className="min-w-0"
+            disabled={
+              isSubmitting ||
+              count === 0 ||
+              (accessPreset === 'pos_operator' &&
+                (!canManageRoles || !confirmDefaultAdminMigration))
+            }
+            onClick={onSubmit}
+          >
+            <MailPlus className="mr-2 size-4" />
+            <span className="truncate">{t('ws-members.invite_submit')}</span>
+          </Button>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   );

package/src/components/ui/custom/workspace-access/workspace-access-member-profile-dialog.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { Loader2 } from '@tuturuuu/icons';
+import type { InternalApiEnhancedWorkspaceMember } from '@tuturuuu/types';
+import { Button } from '@tuturuuu/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@tuturuuu/ui/dialog';
+import { Input } from '@tuturuuu/ui/input';
+import { Label } from '@tuturuuu/ui/label';
+import { MAX_NAME_LENGTH } from '@tuturuuu/utils/constants';
+import { useTranslations } from 'next-intl';
+import { type FormEvent, useState } from 'react';
+
+type Props = {
+  isSubmitting: boolean;
+  member: InternalApiEnhancedWorkspaceMember;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (displayName: string | null) => void;
+  open: boolean;
+};
+
+export function WorkspaceAccessMemberProfileDialog({
+  isSubmitting,
+  member,
+  onOpenChange,
+  onSubmit,
+  open,
+}: Props) {
+  const t = useTranslations();
+  const [displayName, setDisplayName] = useState(
+    member.workspace_profile_display_name ?? member.display_name ?? ''
+  );
+
+  const submit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    onSubmit(displayName.trim() || null);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t('ws-members.profile_display_name')}</DialogTitle>
+          <DialogDescription>
+            {t('ws-members.profile_display_name_description')}
+          </DialogDescription>
+        </DialogHeader>
+
+        <form className="space-y-4" onSubmit={submit}>
+          <div className="space-y-2">
+            <Label htmlFor="workspace-member-profile-display-name">
+              {t('ws-members.profile_display_name')}
+            </Label>
+            <Input
+              id="workspace-member-profile-display-name"
+              autoComplete="off"
+              autoFocus
+              disabled={isSubmitting}
+              maxLength={MAX_NAME_LENGTH}
+              onChange={(event) => setDisplayName(event.target.value)}
+              placeholder={t('ws-members.profile_display_name_placeholder')}
+              value={displayName}
+            />
+          </div>
+
+          <DialogFooter>
+            <Button
+              disabled={isSubmitting}
+              onClick={() => onOpenChange(false)}
+              type="button"
+              variant="outline"
+            >
+              {t('common.cancel')}
+            </Button>
+            <Button disabled={isSubmitting} type="submit">
+              {isSubmitting ? (
+                <Loader2 className="size-4 animate-spin" />
+              ) : null}
+              {t('ws-members.save_profile_display_name')}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}