@greatapps/common 1.1.790 → 1.1.792

package/src/components/account/sections/team/steps/NotificationsStep.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { IconMail, IconMessageCircle } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { Switch } from '../../../../ui/form/Switch';
+import { NOTIFICATION_TYPES } from '../../../constants';
+import { cn } from '../../../../../infra/utils/clsx';
+import type { UserFormData } from '../user-form.schema';
+
+const rowBaseClass = 'flex items-center gap-4 p-4 border border-zinc-200 rounded-lg text-left';
+
+type NotificationsStepProps = {
+  readOnly?: boolean;
+  /** Ajusta o espaçamento do passo ao container que o embute (sheet da equipe ou modal Minha conta). */
+  className?: string;
+};
+
+/** Passo de notificações do sheet de usuário: preferências de SMS e e-mail. */
+export function NotificationsStep({ readOnly = false, className }: NotificationsStepProps) {
+  const translate = useTranslations();
+  const { setValue, control } = useFormContext<UserFormData>();
+
+  const receiveSms = useWatch({ control, name: 'receiveSms' });
+  const receiveEmail = useWatch({ control, name: 'receiveEmail' });
+
+  return (
+    <div className={cn('flex flex-col gap-6 px-5 py-6 flex-1', className)}>
+      <span className="text-zinc-950 paragraph-medium-semibold">
+        {translate('common.account.workspace.team.notificationsStep.sectionTitle')}
+      </span>
+
+      <div className="flex flex-col gap-3">
+        <div
+          {...(readOnly
+            ? {}
+            : {
+                role: 'button' as const,
+                tabIndex: 0,
+                onClick: () => setValue('receiveSms', !receiveSms, { shouldDirty: true }),
+              })}
+          className={cn(rowBaseClass, !readOnly && 'cursor-pointer')}
+        >
+          <div className="size-10 rounded-lg bg-zinc-50 flex items-center justify-center shrink-0">
+            <IconMessageCircle size={20} className="text-zinc-600" />
+          </div>
+          <div className="flex flex-col gap-1 flex-1 min-w-0">
+            <span className="paragraph-small-semibold text-zinc-950">
+              {translate('common.account.workspace.team.notificationsStep.smsTitle')}
+            </span>
+            <span className="paragraph-small-regular text-zinc-500">
+              {translate('common.account.workspace.team.notificationsStep.smsDescription')}
+            </span>
+          </div>
+          <div onClick={(event) => event.stopPropagation()}>
+            <Switch
+              checked={receiveSms}
+              disabled={readOnly}
+              onCheckedChange={(checked) => setValue('receiveSms', checked, { shouldDirty: true })}
+            />
+          </div>
+        </div>
+
+        <div
+          {...(readOnly
+            ? {}
+            : {
+                role: 'button' as const,
+                tabIndex: 0,
+                onClick: () => setValue('receiveEmail', !receiveEmail, { shouldDirty: true }),
+              })}
+          className={cn(rowBaseClass, !readOnly && 'cursor-pointer')}
+        >
+          <div className="size-10 rounded-lg bg-zinc-50 flex items-center justify-center shrink-0">
+            <IconMail size={20} className="text-zinc-600" />
+          </div>
+          <div className="flex flex-col gap-1 flex-1 min-w-0">
+            <span className="paragraph-small-semibold text-zinc-950">
+              {translate('common.account.workspace.team.notificationsStep.emailTitle')}
+            </span>
+            <span className="paragraph-small-regular text-zinc-500">
+              {translate('common.account.workspace.team.notificationsStep.emailDescription')}
+            </span>
+          </div>
+          <div onClick={(event) => event.stopPropagation()}>
+            <Switch
+              checked={receiveEmail}
+              disabled={readOnly}
+              onCheckedChange={(checked) => setValue('receiveEmail', checked, { shouldDirty: true })}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-zinc-50 rounded-lg p-5 flex flex-col gap-4">
+        <span className="paragraph-small-semibold text-zinc-950">
+          {translate('common.account.workspace.team.notificationsStep.typesTitle')}
+        </span>
+        <ul className="list-disc pl-5 flex flex-col gap-0">
+          {NOTIFICATION_TYPES.map((type) => (
+            <li key={type} className="paragraph-small-medium text-zinc-500">
+              {translate(type)}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

package/src/components/account/sections/team/steps/ProjectSelectionStep.tsx

@@ -0,0 +1,219 @@
+'use client';
+
+import { useRef, useState } from 'react';
+import { IconChevronDown, IconChevronUp, IconSearch } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { toast } from 'sonner';
+import { Button } from '../../../../ui/buttons/Button';
+import { Toast } from '../../../../ui/feedback/Toast';
+import { FormField } from '../../../../ui/form/FormField';
+import { useDebounce } from '../../../../../hooks/useDebounce';
+import { useInfiniteProjects } from '../../../../../modules/projects/hooks/list-infinite-projects.hook';
+import { cn } from '../../../../../infra/utils/clsx';
+import { UserProfile } from '../../../../../modules/users/schema';
+import { ConnectListRow } from '../../shared/ConnectListRow';
+import { InfiniteScrollList } from '../../shared/InfiniteScrollList';
+import type { UserFormData } from '../user-form.schema';
+
+type ProjectSelectionStepProps = {
+  mode: 'add' | 'edit';
+  readOnly?: boolean;
+  /** Ajusta o espaçamento do passo ao container que o embute (sheet da equipe ou modal Minha conta). */
+  className?: string;
+};
+
+/** Passo de projetos do sheet de usuário: conecta e desconecta o usuário dos projetos da conta. */
+export function ProjectSelectionStep({ mode, readOnly = false, className }: ProjectSelectionStepProps) {
+  const translate = useTranslations();
+  const [showProjectSearch, setShowProjectSearch] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const debouncedSearch = useDebounce(searchQuery, 400);
+  const projectsListRef = useRef<HTMLDivElement>(null);
+
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isFetching } = useInfiniteProjects({
+    limit: 5000,
+  });
+  const { setValue, getValues, control, formState } = useFormContext<UserFormData>();
+  const selectedProjects = useWatch({ control, name: 'selectedProjects' });
+  const profile = useWatch({ control, name: 'profile' });
+  const hasFullProjectAccess = profile === UserProfile.admin || profile === UserProfile.owner;
+  const isSubmitting = formState.isSubmitting;
+
+  const liveProjects = data?.pages.flatMap((page) => page.data) ?? [];
+  // Durante o envio a lista é congelada: invalidações não podem tirar itens da tela no meio do submit.
+  const frozenProjectsRef = useRef(liveProjects);
+  if (!isSubmitting) frozenProjectsRef.current = liveProjects;
+  const allProjects = isSubmitting ? frozenProjectsRef.current : liveProjects;
+  const showFetchingState = isFetching && !isSubmitting;
+
+  const [addedProjectOrder, setAddedProjectOrder] = useState<number[]>([]);
+
+  const connected = allProjects.filter(
+    (project) => hasFullProjectAccess || selectedProjects[project.id.toString()]
+  );
+  const addedSet = new Set(addedProjectOrder);
+  const original = connected.filter((project) => !addedSet.has(project.id));
+  const added = addedProjectOrder
+    .filter((id) => connected.some((project) => project.id === id))
+    .map((id) => connected.find((project) => project.id === id)!);
+  const connectedProjects = [...original, ...added];
+
+  const searchTerm = debouncedSearch.trim().toLowerCase();
+  const availableProjects = allProjects.filter(
+    (project) =>
+      !hasFullProjectAccess &&
+      !selectedProjects[project.id.toString()] &&
+      (!searchTerm || project.title.toLowerCase().includes(searchTerm))
+  );
+
+  const handleAddProject = (id: number) => {
+    setAddedProjectOrder((previous) => [...previous, id]);
+    setValue('selectedProjects', { ...getValues('selectedProjects'), [id]: true }, { shouldDirty: true });
+
+    setTimeout(() => {
+      projectsListRef.current?.scrollTo({ top: projectsListRef.current.scrollHeight, behavior: 'smooth' });
+    }, 50);
+  };
+
+  const handleRemoveProject = (id: number) => {
+    const currentProjects = getValues('selectedProjects');
+
+    if (mode === 'edit' && !hasFullProjectAccess) {
+      const currentSelectedCount = Object.values(currentProjects).filter(Boolean).length;
+      if (currentSelectedCount <= 1) {
+        toast.custom(
+          (toastId) => (
+            <Toast
+              toastId={toastId}
+              variant="error"
+              message={translate('common.account.workspace.team.projectsStep.minimumOneProject')}
+            />
+          ),
+          { duration: 5000 }
+        );
+        return;
+      }
+    }
+
+    setAddedProjectOrder((previous) => previous.filter((projectId) => projectId !== id));
+    setValue('selectedProjects', { ...currentProjects, [id]: false }, { shouldDirty: true });
+  };
+
+  return (
+    <div className={cn('flex flex-col gap-6 px-5 py-6 flex-1', className)}>
+      <div className="flex flex-col gap-1">
+        <span className="text-zinc-950 paragraph-medium-semibold">
+          {translate('common.account.workspace.team.projectsStep.sectionTitle')}
+        </span>
+        <span className="text-zinc-600 paragraph-small-regular">
+          {hasFullProjectAccess
+            ? translate('common.account.workspace.team.projectsStep.descriptionAdmin')
+            : readOnly
+              ? translate('common.account.workspace.team.projectsStep.descriptionReadOnly')
+              : translate('common.account.workspace.team.projectsStep.descriptionDefault')}
+        </span>
+      </div>
+
+      <div className="flex flex-col gap-3">
+        {showFetchingState && allProjects.length === 0 ? (
+          <div className="flex flex-col border border-zinc-200 rounded-lg overflow-hidden">
+            {Array.from({ length: 5 }).map((_, index) => (
+              <div
+                key={index}
+                className={`px-4 py-4 flex items-center gap-4 min-h-18 ${index < 4 ? 'border-b border-zinc-200' : ''}`}
+              >
+                <div className="size-8 rounded-full bg-zinc-200 animate-pulse shrink-0" />
+                <div className="h-4 w-32 bg-zinc-200 rounded animate-pulse" />
+              </div>
+            ))}
+          </div>
+        ) : connectedProjects.length > 0 ? (
+          <div
+            ref={projectsListRef}
+            className="flex flex-col border border-zinc-200 rounded-lg overflow-hidden max-h-[330px] overflow-y-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300 [&>div]:min-h-18"
+          >
+            {connectedProjects.map((project, index) => (
+              <ConnectListRow
+                key={project.id}
+                name={project.title}
+                photo={project.photo}
+                variant="selected"
+                hideBorder={index === connectedProjects.length - 1}
+                onAction={() => handleRemoveProject(project.id)}
+                showAction={!readOnly && !hasFullProjectAccess && connectedProjects.length > 1}
+              />
+            ))}
+          </div>
+        ) : null}
+
+        {!readOnly && !hasFullProjectAccess && (
+          <>
+            <div className="flex justify-center">
+              <Button
+                variant="ghost"
+                className="h-10! text-zinc-600"
+                type="button"
+                onClick={() => setShowProjectSearch((previous) => !previous)}
+              >
+                {translate('common.account.workspace.team.projectsStep.connectAnotherProject')}
+                {showProjectSearch ? <IconChevronUp size={20} /> : <IconChevronDown size={20} />}
+              </Button>
+            </div>
+
+            {showProjectSearch && (
+              <>
+                <FormField
+                  placeholder={translate('common.account.workspace.team.projectsStep.searchProject')}
+                  leftIcon={IconSearch}
+                  classnameContainer="h-10!"
+                  value={searchQuery}
+                  onChange={(event) => setSearchQuery(event.target.value)}
+                  onKeyDown={(event) => event.key === 'Enter' && event.preventDefault()}
+                />
+                <InfiniteScrollList
+                  className="flex flex-col border border-zinc-200 rounded-lg overflow-y-auto max-h-65 w-full [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300"
+                  hasMore={!!hasNextPage && !isSubmitting}
+                  isLoadingMore={isFetchingNextPage}
+                  onLoadMore={() => fetchNextPage()}
+                >
+                  {availableProjects.length === 0 && !showFetchingState ? (
+                    <div className="flex items-center justify-center py-8 text-zinc-400 paragraph-small-regular">
+                      {searchTerm
+                        ? translate('common.account.workspace.team.projectsStep.noProjectFound')
+                        : translate('common.account.workspace.team.projectsStep.allProjectsAdded')}
+                    </div>
+                  ) : (
+                    availableProjects.map((project, index) => (
+                      <ConnectListRow
+                        key={project.id}
+                        name={project.title}
+                        photo={project.photo}
+                        variant="default"
+                        hideBorder={index === availableProjects.length - 1}
+                        onAction={() => handleAddProject(project.id)}
+                      />
+                    ))
+                  )}
+                  {showFetchingState &&
+                    Array.from({ length: 3 }).map((_, index) => (
+                      <div
+                        key={index}
+                        className={`px-4 py-4 flex items-center justify-between w-full gap-4 ${index < 2 ? 'border-b border-zinc-200' : ''}`}
+                      >
+                        <div className="size-8 rounded-full bg-zinc-200 animate-pulse shrink-0" />
+                        <div className="flex items-center gap-2 flex-1 min-w-0">
+                          <div className="h-4 w-24 bg-zinc-200 rounded animate-pulse" />
+                        </div>
+                        <div className="h-10 w-25 bg-zinc-100 rounded-lg animate-pulse shrink-0" />
+                      </div>
+                    ))}
+                </InfiniteScrollList>
+              </>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}