@greatapps/common 1.1.24 → 1.1.26

package/src/components/ui/form/SwitchOptionFieldWithIcon.tsx

@@ -0,0 +1,47 @@
+import { LucideIcon } from 'lucide-react';
+import { Switch } from './Switch';
+
+type SwitchOptionFieldWithIconProps = {
+  icon: LucideIcon;
+  label: string;
+  description: string;
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  disabled?: boolean;
+  hideBorderBottom?: boolean;
+  id?: string;
+};
+
+export default function SwitchOptionFieldWithIcon({
+  icon: Icon,
+  label,
+  description,
+  checked,
+  onCheckedChange,
+  disabled = false,
+  hideBorderBottom = false,
+  id,
+}: SwitchOptionFieldWithIconProps) {
+  return (
+    <label
+      className={`flex justify-between items-center gap-3 p-5 ${
+        !hideBorderBottom ? 'border-b border-gray-200' : ''
+      } ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`}
+    >
+      <div className="size-10 rounded-lg bg-gray-50 flex items-center justify-center text-gray-950">
+        <Icon size={20} />
+      </div>
+      <div className="flex flex-col gap-2 flex-1">
+        <span className="paragraph-small-semibold text-gray-950">{label}</span>
+        <span className="paragraph-small-regular text-gray-600">{description}</span>
+      </div>
+      <Switch
+        id={id}
+        checked={disabled ? true : checked}
+        onCheckedChange={onCheckedChange}
+        disabled={disabled}
+        className={disabled ? 'opacity-20!' : ''}
+      />
+    </label>
+  );
+}

package/src/components/ui/form/TextAreaField.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { forwardRef, type ComponentPropsWithoutRef } from 'react';
+import { Textarea } from './Textarea';
+import { cn } from '../../../infra/utils/clsx';
+
+interface TextAreaFieldProps extends ComponentPropsWithoutRef<'textarea'> {
+  label?: string;
+  optional?: boolean;
+  required?: boolean;
+  hintMessage?: string;
+  error?: boolean;
+  errorMessage?: string;
+}
+
+export const TextAreaField = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>(
+  (
+    {
+      label,
+      optional = false,
+      required = false,
+      hintMessage,
+      error = false,
+      errorMessage,
+      className,
+      ...textareaProps
+    },
+    ref
+  ) => {
+    const finalMessage = error && errorMessage ? errorMessage : hintMessage;
+    const messageColor = error ? 'text-red-600' : 'text-gray-600';
+
+    return (
+      <div className="flex flex-col gap-1.5">
+        <div className="flex items-center gap-1 paragraph-xsmall-semibold">
+          {label && <span className="text-gray-600">{label}</span>}
+          {optional && <span className="text-gray-500">(Opcional)</span>}
+          {required && <span className="text-red-600">*</span>}
+        </div>
+
+        <div
+          className={cn(
+            'flex px-4 py-3 border rounded-lg transition-colors overflow-hidden',
+            error
+              ? 'border-red-600 hover:border-red-700'
+              : 'border-gray-200 hover:border-gray-400 focus-within:border-gray-950'
+          )}
+        >
+          <Textarea
+            ref={ref}
+            className={cn(
+              'paragraph-small-medium w-full text-gray-950 border-none shadow-none focus-visible:ring-0 p-0 resize-none overflow-y-auto field-sizing-fixed! min-h-0! break-words',
+              error && 'placeholder:text-red-400',
+              className
+            )}
+            {...textareaProps}
+          />
+        </div>
+
+        {finalMessage && (
+          <span className={cn('paragraph-xsmall-medium', messageColor)}>{finalMessage}</span>
+        )}
+      </div>
+    );
+  }
+);
+
+TextAreaField.displayName = 'TextAreaField';
+
+export default TextAreaField;

package/src/enums/AccountSectionType.ts

@@ -0,0 +1,6 @@
+export enum AccountSectionType {
+  MY_PROFILE = 'my-profile',
+  SECURITY = 'security',
+  PREFERENCES = 'preferences',
+  CHANGE_PASSWORD = 'change-password',
+}

package/src/hooks/useCountdownTimer.ts

@@ -0,0 +1,41 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+
+interface UseCountdownTimerOptions {
+  initialSeconds?: number;
+  onExpire?: () => void;
+}
+
+interface UseCountdownTimerReturn {
+  seconds: number;
+  isExpired: boolean;
+  reset: () => void;
+}
+
+export default function useCountdownTimer({
+  initialSeconds = 59,
+  onExpire,
+}: UseCountdownTimerOptions = {}): UseCountdownTimerReturn {
+  const [seconds, setSeconds] = useState(initialSeconds);
+  const [isExpired, setIsExpired] = useState(false);
+
+  useEffect(() => {
+    if (seconds > 0) {
+      const interval = setInterval(() => {
+        setSeconds((prev) => prev - 1);
+      }, 1000);
+      return () => clearInterval(interval);
+    } else {
+      setIsExpired(true);
+      onExpire?.();
+    }
+  }, [seconds, onExpire]);
+
+  const reset = useCallback(() => {
+    setSeconds(initialSeconds);
+    setIsExpired(false);
+  }, [initialSeconds]);
+
+  return { seconds, isExpired, reset };
+}

package/src/hooks/useIsMobile.ts

@@ -0,0 +1,19 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export default function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 1024);
+    };
+
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  return isMobile;
+}

package/src/hooks/usePasswordVisibility.ts

@@ -0,0 +1,13 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+
+export default function usePasswordVisibility() {
+  const [showPassword, setShowPassword] = useState(false);
+
+  const togglePassword = useCallback(() => {
+    setShowPassword((prev) => !prev);
+  }, []);
+
+  return { showPassword, togglePassword };
+}

package/src/index.ts

@@ -96,3 +96,73 @@ export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './comp
 
 // Store
 export { useMdSidebarStore } from './store/useMdSidebarStore';
+
+// Enums
+export { AccountSectionType } from './enums/AccountSectionType';
+
+// Hooks
+export { default as usePasswordVisibility } from './hooks/usePasswordVisibility';
+export { default as useCountdownTimer } from './hooks/useCountdownTimer';
+export { default as useIsMobile } from './hooks/useIsMobile';
+
+// Utils
+export { formatPhone, formatTimer, formatFullName, formatCPF, formatCardNumber } from './utils/format/masks';
+export { buildTimezoneOptions } from './utils/intl/timezones';
+export type { TimezoneOption } from './utils/intl/timezones';
+export { buildLocaleOptions, LANGUAGE_OPTIONS as LOCALE_LANGUAGE_OPTIONS } from './utils/intl/locales';
+export type { LocaleOption } from './utils/intl/locales';
+export { copyToClipboard, readFromClipboard } from './utils/browser/clipboard';
+
+// UI - Form (new widgets)
+export { FormField } from './components/ui/form/FormField';
+export { SelectField } from './components/ui/form/SelectField';
+export { ComboboxField } from './components/ui/form/ComboboxField';
+export type { ComboboxOption } from './components/ui/form/ComboboxField';
+export { default as PhoneInput } from './components/ui/form/PhoneInput';
+export { default as SwitchOptionFieldWithIcon } from './components/ui/form/SwitchOptionFieldWithIcon';
+export { TextAreaField } from './components/ui/form/TextAreaField';
+
+// Account Module - Hooks
+export {
+  useUpdateAccount,
+  useUpdateAccountUser,
+  useUpdateAccountUserById,
+  useDeleteAccountUser,
+  useDeleteAccount,
+} from './modules/accounts/hooks/useAccountManagement';
+
+// Account Types
+export type {
+  UpdateAccountRequest,
+  UpdateAccountUserRequest,
+  ChangePasswordRequest,
+  DeleteAccountActionResult,
+  DeleteUserActionResult,
+  UpdateAccountActionResult,
+  UpdateUserActionResult,
+  TwoFactorGenerateResult,
+  TwoFactorActionResult,
+  ContactResetResult,
+} from './modules/accounts/types';
+
+// Account Components
+export { default as ConfigurationsMyAccountModal } from './components/account/ConfigurationsMyAccountModal';
+export { default as TwoFactorAuthModal } from './components/account/TwoFactorAuthModal';
+export { default as DisableTwoFactorAuthModal } from './components/account/DisableTwoFactorAuthModal';
+export { default as ConfirmGlobalPreferencesModal } from './components/account/ConfirmGlobalPreferencesModal';
+export { MyProfileSection } from './components/account/sections/MyProfileSection';
+export { PreferencesSection } from './components/account/sections/PreferencesSection';
+export { SecuritySection } from './components/account/sections/SecuritySection';
+export { ChangePasswordSection } from './components/account/sections/ChangePasswordSection';
+export { ChangeEmailModal } from './components/account/sections/ChangeEmailModal';
+export { ChangePhoneModal } from './components/account/sections/ChangePhoneModal';
+
+// Account Constants
+export {
+  GENDER_OPTIONS,
+  CURRENCY_OPTIONS,
+  TIMEZONE_OPTIONS,
+  TIME_FORMAT_OPTIONS,
+  NOTIFICATION_TYPES,
+  LANGUAGE_OPTIONS,
+} from './components/account/constants';

package/src/modules/accounts/actions/account-management.action.ts

@@ -0,0 +1,197 @@
+'use server';
+
+import { accountService } from '../services/account.service';
+import { ApiError } from '../../../infra/api/types';
+import type {
+  AccountUsersPaginationParams,
+  AccountUsersActionResult,
+  ChangePasswordActionResult,
+  ChangePasswordRequest,
+  ContactResetResult,
+  CreateAccountUserRequest,
+  DeleteAccountActionResult,
+  DeleteUserActionResult,
+  TwoFactorActionResult,
+  TwoFactorGenerateResult,
+  UpdateAccountActionResult,
+  UpdateAccountRequest,
+  UpdateAccountUserRequest,
+  UpdateUserActionResult,
+} from '../types';
+import { twoFactorService } from '../services/two-factor.service';
+
+export async function listAccountUsersAction(
+  params?: AccountUsersPaginationParams
+): Promise<AccountUsersActionResult> {
+  try {
+    const { users, total } = await accountService.listAccountUsers(params);
+    return { success: true, data: users, total };
+  } catch (error) {
+    if (error instanceof ApiError) return { success: false, error: error.message };
+    return { success: false, error: 'Erro ao listar usuários. Tente novamente.' };
+  }
+}
+
+export async function updateUserAction(
+  user: UpdateAccountUserRequest
+): Promise<UpdateUserActionResult> {
+  try {
+    const result = await accountService.updateAccountUser(user);
+    return { success: true, data: result };
+  } catch (error) {
+    if (error instanceof ApiError) return { success: false, error: error.message };
+    return { success: false, error: 'Erro ao atualizar usuário. Tente novamente.' };
+  }
+}
+
+export async function updateAccountUserByIdAction(
+  userId: number,
+  user: UpdateAccountUserRequest
+): Promise<UpdateUserActionResult> {
+  try {
+    const result = await accountService.updateAccountUserById(userId, user);
+    return { success: true, data: result };
+  } catch (error) {
+    if (error instanceof ApiError) return { success: false, error: error.message };
+    return { success: false, error: 'Erro ao atualizar usuário. Tente novamente.' };
+  }
+}
+
+export async function updateAccountAction(
+  data: UpdateAccountRequest
+): Promise<UpdateAccountActionResult> {
+  try {
+    await accountService.updateAccount(data);
+    return { success: true };
+  } catch (error) {
+    if (error instanceof ApiError) return { success: false, error: error.message };
+    return { success: false, error: 'Erro ao atualizar conta. Tente novamente.' };
+  }
+}
+
+export async function deleteAccountUserAction(userId: number): Promise<DeleteUserActionResult> {
+  try {
+    await accountService.deleteAccountUser(userId);
+    return { success: true };
+  } catch (error) {
+    if (error instanceof ApiError) return { success: false, error: error.message };
+    return { success: false, error: 'Erro ao remover usuário. Tente novamente.' };
+  }
+}
+
+export async function deleteAccountAction(): Promise<DeleteAccountActionResult> {
+  try {
+    await accountService.deleteAccount();
+    return { success: true };
+  } catch (error) {
+    if (error instanceof ApiError) return { success: false, error: error.message };
+    return { success: false, error: 'Erro ao excluir conta. Tente novamente.' };
+  }
+}
+
+export async function createAccountUserAction(
+  user: CreateAccountUserRequest
+): Promise<AccountUsersActionResult> {
+  try {
+    const result = await accountService.createAccountUser(user);
+    return { success: true, data: result.data };
+  } catch (error) {
+    if (error instanceof ApiError) return { success: false, error: error.message };
+    return { success: false, error: 'Erro ao criar usuário. Tente novamente.' };
+  }
+}
+
+export async function changePasswordAction(
+  data: ChangePasswordRequest
+): Promise<ChangePasswordActionResult> {
+  try {
+    await accountService.changePassword(data);
+    return { success: true };
+  } catch (error) {
+    if (error instanceof ApiError) return { success: false, error: error.message };
+    return { success: false, error: 'Erro ao alterar senha. Tente novamente.' };
+  }
+}
+
+export async function requestEmailChangeAction(newEmail: string): Promise<ContactResetResult> {
+  try {
+    await accountService.requestContactReset('email', newEmail);
+    return { success: true };
+  } catch (error) {
+    if (error instanceof ApiError) return { success: false, error: error.message };
+    return { success: false, error: 'E-mail já existente ou ocorreu um erro. Tente novamente mais tarde.' };
+  }
+}
+
+export async function confirmEmailChangeAction(
+  token: string,
+  newEmail: string
+): Promise<ContactResetResult> {
+  try {
+    await accountService.confirmContactReset('email', token, newEmail);
+    return { success: true };
+  } catch (error) {
+    if (error instanceof ApiError) return { success: false, error: error.message };
+    return { success: false, error: 'Código inválido ou expirado. Tente novamente.' };
+  }
+}
+
+export async function requestPhoneChangeAction(newPhone: string): Promise<ContactResetResult> {
+  try {
+    await accountService.requestContactReset('phone', newPhone);
+    return { success: true };
+  } catch (error) {
+    if (error instanceof ApiError) return { success: false, error: error.message };
+    return { success: false, error: 'Número já existente ou ocorreu um erro. Tente novamente mais tarde.' };
+  }
+}
+
+export async function confirmPhoneChangeAction(
+  token: string,
+  newPhone: string
+): Promise<ContactResetResult> {
+  try {
+    await accountService.confirmContactReset('phone', token, newPhone);
+    return { success: true };
+  } catch (error) {
+    if (error instanceof ApiError) return { success: false, error: error.message };
+    return { success: false, error: 'Código inválido ou expirado. Tente novamente.' };
+  }
+}
+
+export async function generateTwoFactorAction(): Promise<TwoFactorGenerateResult> {
+  try {
+    const result = await twoFactorService.generate();
+    return { success: true, qrcode: result.data.qrcode, backupCodes: result.data.backup_codes };
+  } catch (error) {
+    if (error instanceof ApiError) return { success: false, error: error.message };
+    return { success: false, error: 'Erro ao gerar QR Code. Tente novamente.' };
+  }
+}
+
+export async function confirmTwoFactorAction(code: string): Promise<TwoFactorActionResult> {
+  try {
+    await twoFactorService.confirm(code);
+    return { success: true };
+  } catch (error) {
+    if (error instanceof ApiError) return { success: false, error: error.message };
+    return { success: false, error: 'Código inválido. Tente novamente.' };
+  }
+}
+
+export async function disableTwoFactorAction(code: string): Promise<TwoFactorActionResult> {
+  try {
+    await twoFactorService.verify(code);
+  } catch (error) {
+    if (error instanceof ApiError) return { success: false, error: error.message };
+    return { success: false, error: 'Código inválido. Tente novamente.' };
+  }
+
+  try {
+    await twoFactorService.disable();
+    return { success: true };
+  } catch (error) {
+    if (error instanceof ApiError) return { success: false, error: error.message };
+    return { success: false, error: 'Erro ao desabilitar 2FA. Tente novamente.' };
+  }
+}

package/src/modules/accounts/hooks/useAccountManagement.ts

@@ -0,0 +1,79 @@
+'use client';
+
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { USER_QUERY_KEY } from '../../auth/hooks/useUserQuery';
+import type {
+  UpdateAccountRequest,
+  UpdateAccountUserRequest,
+  DeleteUserActionResult,
+  DeleteAccountActionResult,
+} from '../types';
+import {
+  updateUserAction,
+  updateAccountAction,
+  updateAccountUserByIdAction,
+  deleteAccountUserAction,
+  deleteAccountAction,
+} from '../actions/account-management.action';
+import type { UseMutationOptions } from '@tanstack/react-query';
+
+const ACCOUNT_USERS_QUERY_KEY = ['account-users'];
+
+export function useUpdateAccount() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: UpdateAccountRequest) => updateAccountAction(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ACCOUNT_USERS_QUERY_KEY });
+    },
+  });
+}
+
+export function useUpdateAccountUser() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: updateUserAction,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ACCOUNT_USERS_QUERY_KEY });
+      queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
+    },
+  });
+}
+
+export function useUpdateAccountUserById() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ userId, ...user }: UpdateAccountUserRequest & { userId: number }) =>
+      updateAccountUserByIdAction(userId, user),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ACCOUNT_USERS_QUERY_KEY });
+    },
+  });
+}
+
+export function useDeleteAccountUser(
+  options?: UseMutationOptions<DeleteUserActionResult, Error, number>
+) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (userId: number) => deleteAccountUserAction(userId),
+    ...options,
+    onSuccess: (...params) => {
+      options?.onSuccess?.(...params);
+      queryClient.invalidateQueries({ queryKey: ACCOUNT_USERS_QUERY_KEY });
+    },
+  });
+}
+
+export function useDeleteAccount(
+  options?: UseMutationOptions<DeleteAccountActionResult, Error, void>
+) {
+  return useMutation({
+    mutationFn: () => deleteAccountAction(),
+    ...options,
+  });
+}