@greatapps/common 1.1.174 → 1.1.176

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/common",
-  "version": "1.1.174",
+  "version": "1.1.176",
   "description": "Shared library for GreatApps frontend applications",
   "main": "./dist/index.mjs",
   "types": "./src/index.ts",
@@ -44,6 +44,7 @@
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@tabler/icons-react": "^3.40.0",
     "@tanstack/query-broadcast-client-experimental": "^5.95.2",
     "@tanstack/react-query-persist-client": "^5.95.2",
     "axios": "^1.13.6",
@@ -53,7 +54,7 @@
     "date-fns": "^4.1.0",
     "idb-keyval": "^6.2.2",
     "input-otp": "^1.4.2",
-    "@tabler/icons-react": "^3.40.0",
+    "libphonenumber-js": "^1.12.40",
     "lucide-react": "^0.575.0",
     "react-day-picker": "^9.14.0",
     "server-only": "^0.0.1",

package/src/components/account/hooks/useChangePhoneForm.tsx

@@ -1,76 +1,79 @@
 'use client';
 
 import { useState, useCallback } from 'react';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
 import { toast } from 'sonner';
 import { Toast } from '../../ui/feedback/Toast';
-import { changePhoneSchema, type ChangePhoneFormData } from '../../../utils/validators/account';
-import { formatPhone } from '../../../utils/format/masks';
 import { requestPhoneChangeAction } from '../../../modules/accounts/actions/account-management.action';
-import { PHONE_COUNTRIES, type PhoneCountry } from '../../ui/form/PhoneInput';
+
+function splitPhoneValue(fullValue: string): { ddi: string; local: string } {
+  const trimmed = fullValue.trim();
+  const spaceIdx = trimmed.indexOf(' ');
+  if (spaceIdx === -1) return { ddi: '+55', local: trimmed };
+  return { ddi: trimmed.slice(0, spaceIdx), local: trimmed.slice(spaceIdx + 1) };
+}
 
 export default function useChangePhoneForm() {
   const [showVerification, setShowVerification] = useState(false);
-  const [selectedCountry, setSelectedCountry] = useState<PhoneCountry>(PHONE_COUNTRIES[0]);
-
-  const form = useForm<ChangePhoneFormData>({
-    resolver: zodResolver(changePhoneSchema),
-    mode: 'onChange',
-    defaultValues: { phone: '' },
-  });
+  const [phoneValue, setPhoneValue] = useState('');
+  const [phoneError, setPhoneError] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submittedPhone, setSubmittedPhone] = useState({ ddi: '+55', local: '' });
 
-  const phoneValue = form.watch('phone');
-  const errors = form.formState.errors;
-  const isSubmitting = form.formState.isSubmitting;
+  const handlePhoneChange = useCallback((value: string) => {
+    setPhoneValue(value);
+    if (phoneError) setPhoneError('');
+  }, [phoneError]);
 
-  const handlePhoneChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const formatted = formatPhone(e.target.value);
-      form.setValue('phone', formatted, { shouldValidate: true });
-    },
-    [form]
-  );
-
-  const handleCountryChange = useCallback((country: PhoneCountry) => {
-    setSelectedCountry(country);
-  }, []);
+  const handleContinue = useCallback(async (e: React.FormEvent) => {
+    e.preventDefault();
 
-  const handleContinue = form.handleSubmit(async (data) => {
-    const result = await requestPhoneChangeAction(data.phone, selectedCountry.code);
+    const { ddi, local } = splitPhoneValue(phoneValue);
 
-    if (!result.success) {
-      toast.custom((t) => (
-        <Toast
-          variant="error"
-          message={result.error ?? 'Número já existente ou ocorreu um erro. Tente novamente mais tarde.'}
-          toastId={t}
-        />
-      ));
+    if (!local || local.replace(/\D/g, '').length < 8) {
+      setPhoneError('Número de telefone inválido');
       return;
     }
 
-    setShowVerification(true);
-  });
+    setIsSubmitting(true);
+    try {
+      const result = await requestPhoneChangeAction(local, ddi);
+
+      if (!result.success) {
+        toast.custom((t) => (
+          <Toast
+            variant="error"
+            message={result.error ?? 'Número já existente ou ocorreu um erro. Tente novamente mais tarde.'}
+            toastId={t}
+          />
+        ));
+        return;
+      }
+
+      setSubmittedPhone({ ddi, local });
+      setShowVerification(true);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [phoneValue]);
 
   const handleBack = useCallback(() => {
     setShowVerification(false);
   }, []);
 
   const resetForm = useCallback(() => {
-    form.reset();
+    setPhoneValue('');
+    setPhoneError('');
+    setSubmittedPhone({ ddi: '+55', local: '' });
     setShowVerification(false);
-    setSelectedCountry(PHONE_COUNTRIES[0]);
-  }, [form]);
+  }, []);
 
   return {
     showVerification,
     phoneValue,
+    phoneError,
     isSubmitting,
-    errors,
-    selectedCountry,
+    submittedPhone,
     handlePhoneChange,
-    handleCountryChange,
     handleContinue,
     handleBack,
     resetForm,

package/src/components/account/sections/ChangePhoneModal.tsx

@@ -32,11 +32,10 @@ export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
   const {
     showVerification,
     phoneValue,
+    phoneError,
     isSubmitting,
-    errors,
-    selectedCountry,
+    submittedPhone,
     handlePhoneChange,
-    handleCountryChange,
     handleContinue,
     handleBack,
     resetForm,
@@ -63,12 +62,12 @@ export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
     onSuccess: handleSuccess,
     successMessage: 'Telefone alterado',
     validateFn: async (token) => {
-      const result = await confirmPhoneChangeAction(token, phoneValue, selectedCountry.code);
+      const result = await confirmPhoneChangeAction(token, submittedPhone.local, submittedPhone.ddi);
       return result.success;
     },
     resendFn: async () => {
       const { requestPhoneChangeAction } = await import('../../../modules/accounts/actions/account-management.action');
-      const result = await requestPhoneChangeAction(phoneValue, selectedCountry.code);
+      const result = await requestPhoneChangeAction(submittedPhone.local, submittedPhone.ddi);
       if (!result.success) {
         throw new Error(result.error);
       }
@@ -211,10 +210,8 @@ export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
                 placeholder="(00) 0 0000-0000"
                 value={phoneValue}
                 onChange={handlePhoneChange}
-                error={!!errors.phone}
-                errorMessage={errors.phone?.message}
-                selectedCountry={selectedCountry}
-                onCountryChange={handleCountryChange}
+                error={!!phoneError}
+                errorMessage={phoneError}
               />
             </div>
 

package/src/components/account/sections/MyProfileSection.tsx

@@ -233,12 +233,14 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
               <div className="flex flex-col gap-4">
                 <span className="paragraph-medium-semibold text-gray-600">Dados de acesso</span>
                 <div className="relative">
-                  <FormField
-                    label="E-mail"
-                    value={user?.email ?? ''}
-                    disabled
-                    classnameContainer="bg-gray-50 border-0!"
-                  />
+                  <div className="opacity-50">
+                    <FormField
+                      label="E-mail"
+                      value={user?.email ?? ''}
+                      disabled
+                      classnameContainer="bg-gray-50 border-0!"
+                    />
+                  </div>
                   <button
                     type="button"
                     className="absolute right-3 top-5.5 h-10 flex items-center paragraph-xsmall-semibold text-gray-950 underline cursor-pointer"

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

@@ -1,148 +1,205 @@
 'use client';
 
-import { ComponentPropsWithoutRef, forwardRef } from 'react';
-import Image from 'next/image';
-import { ChevronDown } from 'lucide-react';
-import { Input } from './Input';
-import { Separator } from '../data-display/Separator';
-import { cn } from '../../../infra/utils/clsx';
-
-export interface PhoneCountry {
-  code: string;
-  label: string;
-  emoji: string;
+import { useState, useEffect, useRef } from 'react';
+import { AsYouType, CountryCode } from 'libphonenumber-js';
+import { Input, Separator, Popover, PopoverTrigger, PopoverContent, cn } from '@greatapps/common';
+import { IconChevronDown, IconSearch } from '@tabler/icons-react';
+import { COUNTRIES, Country, flagUrl, parsePhoneValue } from '../../../utils/countries';
+
+function formatNational(digits: string, iso: string): string {
+  const raw = digits.replace(/\D/g, '');
+  if (!raw) return '';
+  return new AsYouType(iso as CountryCode).input(raw);
 }
 
-export const PHONE_COUNTRIES: PhoneCountry[] = [
-  { code: '+55', label: 'Brasil', emoji: '🇧🇷' },
-  { code: '+1', label: 'EUA', emoji: '🇺🇸' },
-  { code: '+351', label: 'Portugal', emoji: '🇵🇹' },
-  { code: '+54', label: 'Argentina', emoji: '🇦🇷' },
-  { code: '+56', label: 'Chile', emoji: '🇨🇱' },
-  { code: '+52', label: 'México', emoji: '🇲🇽' },
-  { code: '+44', label: 'Reino Unido', emoji: '🇬🇧' },
-  { code: '+34', label: 'Espanha', emoji: '🇪🇸' },
-  { code: '+49', label: 'Alemanha', emoji: '🇩🇪' },
-  { code: '+33', label: 'França', emoji: '🇫🇷' },
-  { code: '+57', label: 'Colômbia', emoji: '🇨🇴' },
-  { code: '+598', label: 'Uruguai', emoji: '🇺🇾' },
-];
-
-interface PhoneInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'type'> {
+interface PhoneInputProps {
+  value?: string;
+  onChange?: (value: string) => void;
   label?: string;
   optional?: boolean;
   required?: boolean;
   hintMessage?: string;
   error?: boolean;
   errorMessage?: string;
-  countryCode?: string;
-  countryFlagSrc?: string;
-  countryFlagAlt?: string;
+  placeholder?: string;
+  disabled?: boolean;
   classnameContainer?: string;
-  selectedCountry?: PhoneCountry;
-  onCountryChange?: (country: PhoneCountry) => void;
+  className?: string;
 }
 
-const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(
-  (
-    {
-      label,
-      optional = false,
-      required = false,
-      hintMessage,
-      error = false,
-      errorMessage,
-      countryCode = '+55',
-      countryFlagSrc = '/icons/brazil-flag.svg',
-      countryFlagAlt = 'Brazil flag',
-      className,
-      classnameContainer,
-      selectedCountry,
-      onCountryChange,
-      ...props
-    },
-    ref
-  ) => {
-    const finalMessage = error && errorMessage ? errorMessage : hintMessage;
-    const showMessage = finalMessage && finalMessage.trim() !== '';
-
-    const displayCode = selectedCountry ? selectedCountry.code : countryCode;
-
-    return (
-      <div className={cn('flex flex-col gap-1.5')}>
-        {label && (
-          <div className="flex items-center gap-1 paragraph-xsmall-semibold">
-            <span className="text-gray-600">{label}</span>
-            {optional && <span className="text-gray-500">(Opcional)</span>}
-            {required && <span className="text-red-600">*</span>}
-          </div>
-        )}
+export default function PhoneInput({
+  value,
+  onChange,
+  label,
+  optional = false,
+  required = false,
+  hintMessage,
+  error = false,
+  errorMessage,
+  placeholder,
+  disabled = false,
+  classnameContainer,
+  className,
+}: PhoneInputProps) {
+  const parsed = parsePhoneValue(value ?? '');
+  const [selectedCountry, setSelectedCountry] = useState<Country>(parsed.country);
+  const [phoneNumber, setPhoneNumber] = useState(parsed.number);
+  const [search, setSearch] = useState('');
+  const [open, setOpen] = useState(false);
+  const prevValueRef = useRef(value);
+  const inputRef = useRef<HTMLInputElement>(null);
 
-        <div
-          className={cn(
-            'flex gap-2 items-center border rounded-lg h-10 transition-colors',
-            error
-              ? 'border-red-600 hover:border-red-700'
-              : 'border-gray-200 hover:border-gray-400 focus-within:border-gray-950',
-            classnameContainer
-          )}
-        >
-          {onCountryChange ? (
-            <div className="relative flex items-center gap-2 px-4 cursor-pointer shrink-0">
-              <span className="text-base leading-none">{selectedCountry?.emoji ?? '🇧🇷'}</span>
-              <span className="paragraph-small-regular text-gray-950">{displayCode}</span>
-              <ChevronDown size={14} className="text-gray-500" />
-              <select
-                className="absolute inset-0 opacity-0 cursor-pointer w-full"
-                value={displayCode}
-                onChange={(e) => {
-                  const country = PHONE_COUNTRIES.find((c) => c.code === e.target.value);
-                  if (country) onCountryChange(country);
-                }}
-              >
-                {PHONE_COUNTRIES.map((c) => (
-                  <option key={c.code} value={c.code}>
-                    {c.emoji} {c.code} — {c.label}
-                  </option>
-                ))}
-              </select>
-            </div>
-          ) : (
-            <div className="flex items-center gap-2 px-4">
-              <Image
-                src={countryFlagSrc}
-                alt={countryFlagAlt}
-                width={20}
-                height={20}
-                className="h-5! w-5! rounded-full"
-              />
-              <span className="paragraph-small-regular text-gray-950">{countryCode}</span>
-            </div>
-          )}
+  useEffect(() => {
+    if (value !== prevValueRef.current) {
+      prevValueRef.current = value;
+      const p = parsePhoneValue(value ?? '');
+      setSelectedCountry(p.country);
+      setPhoneNumber(formatNational(p.number, p.country.iso));
+    }
+  }, [value]);
+
+  const emit = (country: Country, number: string) => {
+    onChange?.(`${country.dial} ${number}`);
+  };
+
+  const handleCountrySelect = (country: Country) => {
+    const reformatted = formatNational(phoneNumber, country.iso);
+    setSelectedCountry(country);
+    setPhoneNumber(reformatted);
+    setOpen(false);
+    setSearch('');
+    emit(country, reformatted);
+  };
+
+  const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const rawInput = e.target.value;
+    const cursorPos = e.target.selectionStart ?? rawInput.length;
+    const digitsBeforeCursor = rawInput.slice(0, cursorPos).replace(/\D/g, '').length;
+
+    const formatted = formatNational(rawInput, selectedCountry.iso);
+    setPhoneNumber(formatted);
+    emit(selectedCountry, formatted);
 
-          <Separator orientation="vertical" />
-
-          <Input
-            ref={ref}
-            type="tel"
-            className={cn(
-              'paragraph-small-medium w-full h-full text-gray-950 border-0 focus-visible:ring-0 focus-visible:ring-offset-0',
-              className
-            )}
-            {...props}
-          />
+    requestAnimationFrame(() => {
+      if (!inputRef.current) return;
+      let digitCount = 0;
+      let newPos = formatted.length;
+      for (let i = 0; i < formatted.length; i++) {
+        if (/\d/.test(formatted[i])) {
+          digitCount++;
+          if (digitCount === digitsBeforeCursor) {
+            newPos = i + 1;
+            break;
+          }
+        }
+      }
+      inputRef.current.setSelectionRange(newPos, newPos);
+    });
+  };
+
+  const filtered = COUNTRIES.filter(
+    (c) =>
+      c.name.toLowerCase().includes(search.toLowerCase()) ||
+      c.dial.includes(search) ||
+      c.iso.toLowerCase().includes(search.toLowerCase())
+  );
+
+  const finalMessage = error && errorMessage ? errorMessage : hintMessage;
+  const showMessage = finalMessage && finalMessage.trim() !== '';
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      {label && (
+        <div className="flex items-center gap-1 paragraph-xsmall-semibold">
+          <span className="text-zinc-600">{label}</span>
+          {optional && <span className="text-zinc-500">(Opcional)</span>}
+          {required && <span className="text-red-600">*</span>}
         </div>
+      )}
 
-        {showMessage && (
-          <span className={cn('paragraph-xsmall-medium', error ? 'text-red-600' : 'text-gray-600')}>
-            {finalMessage}
-          </span>
+      <div
+        className={cn(
+          'flex gap-2 items-center border rounded-lg h-10 transition-colors',
+          error
+            ? 'border-red-600 hover:border-red-700'
+            : 'border-zinc-200 hover:border-zinc-400 focus-within:border-zinc-950',
+          disabled && 'opacity-50 cursor-not-allowed',
+          classnameContainer
         )}
-      </div>
-    );
-  }
-);
+      >
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <button
+              type="button"
+              className="flex items-center gap-1.5 px-3 h-full shrink-0 focus:outline-none"
+              disabled={disabled}
+            >
+              <img src={flagUrl(selectedCountry.iso)} alt={selectedCountry.iso} className="w-5 h-5 rounded-full" />
+              <span className="paragraph-small-regular text-zinc-950">{selectedCountry.dial}</span>
+              <IconChevronDown size={14} className={cn("text-zinc-500 transition-transform duration-200", open && "rotate-180")} />
+            </button>
+          </PopoverTrigger>
+          <PopoverContent className="w-72 p-0 z-[1010]" align="start" side="top">
+            <div className="flex items-center gap-2 p-2 border-b border-zinc-100">
+              <IconSearch size={14} className="text-zinc-400 shrink-0" />
+              <input
+                type="text"
+                className="flex-1 text-sm outline-none placeholder:text-zinc-400"
+                placeholder="Buscar país..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                autoFocus
+              />
+            </div>
+            <div className="max-h-60 overflow-y-auto overscroll-contain" onTouchMove={(e) => e.stopPropagation()}>
+              {filtered.map((country) => (
+                <button
+                  key={country.iso}
+                  type="button"
+                  className={cn(
+                    'flex items-center gap-2.5 w-full px-3 py-2 text-left hover:bg-zinc-50 transition-colors',
+                    selectedCountry.iso === country.iso && 'bg-zinc-100'
+                  )}
+                  onClick={() => handleCountrySelect(country)}
+                >
+                  <img src={flagUrl(country.iso)} alt={country.iso} className="w-5 h-5 rounded-full shrink-0" />
+                  <span className="paragraph-small-regular text-zinc-950 flex-1 truncate">
+                    {country.name}
+                  </span>
+                  <span className="paragraph-small-regular text-zinc-500 shrink-0">
+                    {country.dial}
+                  </span>
+                </button>
+              ))}
+              {filtered.length === 0 && (
+                <p className="text-sm text-zinc-500 p-3 text-center">Nenhum país encontrado</p>
+              )}
+            </div>
+          </PopoverContent>
+        </Popover>
+
+        <Separator orientation="vertical" />
 
-PhoneInput.displayName = 'PhoneInput';
+        <Input
+          ref={inputRef}
+          type="tel"
+          value={phoneNumber}
+          onChange={handleNumberChange}
+          placeholder={placeholder}
+          disabled={disabled}
+          className={cn(
+            'paragraph-small-medium w-full h-full text-zinc-950 border-0 focus-visible:ring-0 focus-visible:ring-offset-0',
+            disabled && 'cursor-not-allowed',
+            className
+          )}
+        />
+      </div>
 
-export default PhoneInput;
+      {showMessage && (
+        <span className={cn('paragraph-xsmall-medium', error ? 'text-red-600' : 'text-zinc-600')}>
+          {finalMessage}
+        </span>
+      )}
+    </div>
+  );
+}