@greatapps/common 1.1.173 → 1.1.174

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

@@ -1,98 +1,148 @@
-'use client';
-
-import { ComponentPropsWithoutRef, forwardRef } from 'react';
-import Image from 'next/image';
-import { Input } from './Input';
-import { Separator } from '../data-display/Separator';
-import { cn } from '../../../infra/utils/clsx';
-
-interface PhoneInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'type'> {
-  label?: string;
-  optional?: boolean;
-  required?: boolean;
-  hintMessage?: string;
-  error?: boolean;
-  errorMessage?: string;
-  countryCode?: string;
-  countryFlagSrc?: string;
-  countryFlagAlt?: string;
-  classnameContainer?: 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,
-      ...props
-    },
-    ref
-  ) => {
-    const finalMessage = error && errorMessage ? errorMessage : hintMessage;
-    const showMessage = finalMessage && finalMessage.trim() !== '';
-
-    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>
-        )}
-
-        <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
-          )}
-        >
-          <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>
-
-          <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}
-          />
-        </div>
-
-        {showMessage && (
-          <span className={cn('paragraph-xsmall-medium', error ? 'text-red-600' : 'text-gray-600')}>
-            {finalMessage}
-          </span>
-        )}
-      </div>
-    );
-  }
-);
-
-PhoneInput.displayName = 'PhoneInput';
-
-export default PhoneInput;
+'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;
+}
+
+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'> {
+  label?: string;
+  optional?: boolean;
+  required?: boolean;
+  hintMessage?: string;
+  error?: boolean;
+  errorMessage?: string;
+  countryCode?: string;
+  countryFlagSrc?: string;
+  countryFlagAlt?: string;
+  classnameContainer?: string;
+  selectedCountry?: PhoneCountry;
+  onCountryChange?: (country: PhoneCountry) => void;
+}
+
+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>
+        )}
+
+        <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>
+          )}
+
+          <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}
+          />
+        </div>
+
+        {showMessage && (
+          <span className={cn('paragraph-xsmall-medium', error ? 'text-red-600' : 'text-gray-600')}>
+            {finalMessage}
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+
+PhoneInput.displayName = 'PhoneInput';
+
+export default PhoneInput;

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

@@ -57,12 +57,12 @@ export async function confirmEmailChangeAction(token: string, newEmail: string)
   return safeServerAction(() => accountService.confirmContactReset('email', token, newEmail));
 }
 
-export async function requestPhoneChangeAction(newPhone: string) {
-  return safeServerAction(() => accountService.requestContactReset('phone', newPhone));
+export async function requestPhoneChangeAction(newPhone: string, ddi?: string) {
+  return safeServerAction(() => accountService.requestContactReset('phone', newPhone, ddi));
 }
 
-export async function confirmPhoneChangeAction(token: string, newPhone: string) {
-  return safeServerAction(() => accountService.confirmContactReset('phone', token, newPhone));
+export async function confirmPhoneChangeAction(token: string, newPhone: string, ddi?: string) {
+  return safeServerAction(() => accountService.confirmContactReset('phone', token, newPhone, ddi));
 }
 
 export async function generateTwoFactorAction() {

package/src/modules/accounts/services/account.service.ts

@@ -182,11 +182,11 @@ class AccountService {
     return response;
   }
 
-  async requestContactReset(type: 'email' | 'phone', newContact: string): Promise<void> {
+  async requestContactReset(type: 'email' | 'phone', newContact: string, ddi?: string): Promise<void> {
     const { id_account, id_user } = await getUserContext();
     const response = await api.apps.post<{ status: number; message: string }>(
       `/accounts/${id_account}/users/${id_user}/resetContact/request`,
-      { type, newContact }
+      { type, newContact, ...(ddi ? { ddi } : {}) }
     );
 
     if (response.status === 0) {
@@ -198,11 +198,11 @@ class AccountService {
     }
   }
 
-  async confirmContactReset(type: 'email' | 'phone', token: string, newContact: string): Promise<void> {
+  async confirmContactReset(type: 'email' | 'phone', token: string, newContact: string, ddi?: string): Promise<void> {
     const { id_account, id_user } = await getUserContext();
     const response = await api.apps.post<{ status: number; message: string }>(
       `/accounts/${id_account}/users/${id_user}/resetContact/confirm`,
-      { type, token, newContact }
+      { type, token, newContact, ...(ddi ? { ddi } : {}) }
     );
 
     if (response.status === 0) {