@greatapps/common 1.1.676 → 1.1.678

package/src/components/modals/cards/AddCardModal.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useState } from 'react';
+import { useCallback, useState, useEffect } from 'react';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';
 import { Button } from '../../ui/buttons/Button';
 import { Toast } from '../../ui/feedback/Toast';
@@ -8,8 +8,9 @@ import { useModalManager } from '../../../store/useModalManager';
 import { useCreateCard } from '../../../modules/cards/hooks/create-card.hook';
 import { useCreateSetupIntent } from '../../../modules/cards/hooks/create-setup-intent.hook';
 import { useUpdateAccount } from '../../../modules/accounts/hooks/useAccountManagement';
+import { useCurrentAccount } from '../../../modules/accounts/hooks/current-account.hook';
 import { useExternalContracting } from '../../../providers/whitelabel.provider';
-import { CardFormFields, BillingFormFields, cardFormSchema } from './CardFormFields';
+import { CardFormFields, BillingFormFields, buildCardFormSchema } from './CardFormFields';
 import type { CardFormData, StripeElementsStatus } from './CardFormFields';
 import { IconX, IconCreditCard, IconCheck, IconChevronRight } from '@tabler/icons-react';
 import { cn } from '../../../infra/utils/clsx';
@@ -17,6 +18,7 @@ import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { CardNumberElement, useElements, useStripe } from '@stripe/react-stripe-js';
 import { toast } from 'sonner';
+import { useTranslations } from 'next-intl';
 
 const INITIAL_STRIPE_STATUS: StripeElementsStatus = {
   cardNumber: false,
@@ -24,15 +26,15 @@ const INITIAL_STRIPE_STATUS: StripeElementsStatus = {
   cardCvc: false,
 };
 
-const STEPS = [
-  { number: 1, label: 'Cobrança' },
-  { number: 2, label: 'Cartão' },
-] as const;
-
 function CardStepper({ currentStep }: { readonly currentStep: number }) {
+  const translate = useTranslations();
+  const steps = [
+    { number: 1, label: translate('common.cards.add.stepBilling') },
+    { number: 2, label: translate('common.cards.add.stepCard') },
+  ];
   return (
     <div className="flex items-center justify-start gap-2 px-4 py-3 bg-zinc-50 border-b border-zinc-200 lg:border-b-0">
-      {STEPS.map((step, idx) => {
+      {steps.map((step, idx) => {
         const isCompleted = currentStep > step.number;
         const isCurrent = currentStep === step.number;
         const isPending = !isCompleted && !isCurrent;
@@ -61,7 +63,7 @@ function CardStepper({ currentStep }: { readonly currentStep: number }) {
             >
               {step.label}
             </span>
-            {idx < STEPS.length - 1 && (
+            {idx < steps.length - 1 && (
               <IconChevronRight size={16} className="text-zinc-300 ml-1" />
             )}
           </div>
@@ -72,9 +74,12 @@ function CardStepper({ currentStep }: { readonly currentStep: number }) {
 }
 
 export default function AddCardModal() {
+  const translate = useTranslations();
   const { activeModal, modalData, closeModal } = useModalManager();
   const isOpen = activeModal === 'addCardModal';
   const { isExternalContracting, redirectToExternal } = useExternalContracting();
+  const { data: account } = useCurrentAccount();
+  const isInternational = account?.gateway === 'stripe_usd';
   const [currentStep, setCurrentStep] = useState(1);
   const [stripeStatus, setStripeStatus] = useState<StripeElementsStatus>(INITIAL_STRIPE_STATUS);
   const [stripeErrors, setStripeErrors] = useState<Record<string, string | undefined>>({});
@@ -89,7 +94,7 @@ export default function AddCardModal() {
   const stripe = useStripe();
 
   const form = useForm<CardFormData>({
-    resolver: zodResolver(cardFormSchema),
+    resolver: zodResolver(buildCardFormSchema(isInternational)),
     mode: 'onSubmit',
     reValidateMode: 'onChange',
     defaultValues: {
@@ -98,6 +103,12 @@ export default function AddCardModal() {
     },
   });
 
+  useEffect(() => {
+    if (isInternational) {
+      form.setValue('country', 'US');
+    }
+  }, [isInternational, form]);
+
   const handleClose = useCallback(() => {
     form.reset();
     setCurrentStep(1);
@@ -118,18 +129,13 @@ export default function AddCardModal() {
   );
 
   const handleContinue = useCallback(async () => {
-    const isValid = await form.trigger([
-      'fullName',
-      'cep',
-      'street',
-      'streetNumber',
-      'neighborhood',
-      'city',
-      'state',
-    ]);
+    const fields: (keyof CardFormData)[] = isInternational
+      ? ['fullName', 'cep', 'street', 'city', 'state']
+      : ['fullName', 'cep', 'street', 'streetNumber', 'neighborhood', 'city', 'state'];
+    const isValid = await form.trigger(fields);
     if (!isValid) return;
     setCurrentStep(2);
-  }, [form]);
+  }, [form, isInternational]);
 
   const handleBack = useCallback(() => {
     setCurrentStep(1);
@@ -137,9 +143,9 @@ export default function AddCardModal() {
 
   async function handleSubmit(data: CardFormData) {
     const newStripeErrors: Record<string, string | undefined> = {};
-    if (!stripeStatus.cardNumber) newStripeErrors.cardNumber = 'Número do cartão é obrigatório';
-    if (!stripeStatus.cardExpiry) newStripeErrors.cardExpiry = 'Data de validade é obrigatória';
-    if (!stripeStatus.cardCvc) newStripeErrors.cardCvc = 'Código de segurança é obrigatório';
+    if (!stripeStatus.cardNumber) newStripeErrors.cardNumber = translate('common.cards.form.cardNumberRequired');
+    if (!stripeStatus.cardExpiry) newStripeErrors.cardExpiry = translate('common.cards.form.cardExpiryRequired');
+    if (!stripeStatus.cardCvc) newStripeErrors.cardCvc = translate('common.cards.form.cardCvcRequired');
     setStripeErrors(newStripeErrors);
 
     const stripeValid =
@@ -159,7 +165,7 @@ export default function AddCardModal() {
           (t) => (
             <Toast
               variant="error"
-              message="Não foi possível iniciar a autenticação do cartão, tente novamente."
+              message={translate('common.cards.add.errorInitAuth')}
               toastId={t}
             />
           ),
@@ -168,10 +174,24 @@ export default function AddCardModal() {
         return;
       }
 
+      const billingDetails = isInternational
+        ? {
+            name: data.name,
+            address: {
+              line1: data.street,
+              line2: data.complement || undefined,
+              city: data.city,
+              state: data.state,
+              postal_code: data.cep,
+              country: data.country,
+            },
+          }
+        : { name: data.name };
+
       const { setupIntent, error } = await stripe.confirmCardSetup(intent.client_secret, {
         payment_method: {
           card: cardElement,
-          billing_details: { name: data.name },
+          billing_details: billingDetails,
         },
       });
 
@@ -180,7 +200,7 @@ export default function AddCardModal() {
           (t) => (
             <Toast
               variant="error"
-              message={error.message || 'Falha na autenticação do cartão.'}
+              message={error.message || translate('common.cards.add.errorAuth')}
               toastId={t}
             />
           ),
@@ -194,7 +214,7 @@ export default function AddCardModal() {
           (t) => (
             <Toast
               variant="error"
-              message={`Autenticação não concluída (status: ${setupIntent?.status ?? 'desconhecido'}).`}
+              message={translate('common.cards.add.errorAuthStatus', { status: setupIntent?.status ?? translate('common.cards.add.statusUnknown') })}
               toastId={t}
             />
           ),
@@ -210,14 +230,18 @@ export default function AddCardModal() {
           set_default: true,
         }),
         updateAccountMutation.mutateAsync({
-          financial_document_type: data.personType === 'pf' ? 1 : 2,
-          financial_document: data.personType === 'pf' ? data.cpf : data.cnpj,
+          ...(isInternational
+            ? {}
+            : {
+                financial_document_type: data.personType === 'pf' ? 1 : 2,
+                financial_document: data.personType === 'pf' ? data.cpf : data.cnpj,
+              }),
           financial_name: data.fullName,
           zipcode: data.cep,
           address: data.street,
-          address_number: data.streetNumber,
+          address_number: data.streetNumber || '',
           address_complement: data.complement || '',
-          neighborhood: data.neighborhood,
+          neighborhood: data.neighborhood || '',
           city: data.city,
           state: data.state,
           country: data.country,
@@ -229,7 +253,7 @@ export default function AddCardModal() {
       }
 
       toast.custom(
-        (t) => <Toast variant="success" message="Cartão adicionado com sucesso." toastId={t} />,
+        (t) => <Toast variant="success" message={translate('common.cards.add.successToast')} toastId={t} />,
         { duration: 5000 }
       );
       handleClose();
@@ -238,7 +262,7 @@ export default function AddCardModal() {
         (t) => (
           <Toast
             variant="error"
-            message="Não foi possível salvar o seu novo cartão, tente novamente."
+            message={translate('common.cards.add.errorSave')}
             toastId={t}
           />
         ),
@@ -256,22 +280,24 @@ export default function AddCardModal() {
 
   const watchedValues = form.watch(['name', 'country', 'personType', 'cpf', 'cnpj', 'fullName', 'cep', 'street', 'streetNumber', 'neighborhood', 'city', 'state']);
   const [name, country, personType, cpf, cnpj, fullName, cep, street, streetNumber, neighborhood, city, state] = watchedValues;
-  const isBillingValid =
-    !!fullName &&
-    !!cep && cep.length >= 9 &&
-    !!street &&
-    !!streetNumber &&
-    !!neighborhood &&
-    !!city &&
-    !!state;
-  const isCardValid =
-    !!name &&
-    !!country &&
-    !!personType &&
-    (personType === 'pf' ? !!cpf && cpf.length >= 14 : !!cnpj && cnpj.length >= 18) &&
-    stripeStatus.cardNumber &&
-    stripeStatus.cardExpiry &&
-    stripeStatus.cardCvc;
+  const isBillingValid = isInternational
+    ? !!fullName && !!cep && !!street && !!city && !!state
+    : !!fullName &&
+      !!cep && cep.length >= 9 &&
+      !!street &&
+      !!streetNumber &&
+      !!neighborhood &&
+      !!city &&
+      !!state;
+  const isCardValid = isInternational
+    ? !!name && !!country && stripeStatus.cardNumber && stripeStatus.cardExpiry && stripeStatus.cardCvc
+    : !!name &&
+      !!country &&
+      !!personType &&
+      (personType === 'pf' ? !!cpf && cpf.length >= 14 : !!cnpj && cnpj.length >= 18) &&
+      stripeStatus.cardNumber &&
+      stripeStatus.cardExpiry &&
+      stripeStatus.cardCvc;
 
   if (isExternalContracting) {
     return (
@@ -283,10 +309,10 @@ export default function AddCardModal() {
             </div>
             <div className="flex flex-col gap-2">
               <DialogTitle className="paragraph-medium-semibold text-zinc-950">
-                Gerenciamento de cartões indisponível
+                {translate('common.cards.add.externalTitle')}
               </DialogTitle>
               <span className="paragraph-small-regular text-zinc-600">
-                Acesse sua área de assinatura para gerenciar formas de pagamento.
+                {translate('common.cards.add.externalDescription')}
               </span>
             </div>
           </DialogHeader>
@@ -298,7 +324,7 @@ export default function AddCardModal() {
                 redirectToExternal('contracting');
               }}
             >
-              Acessar área de assinatura
+              {translate('common.cards.add.externalButton')}
             </Button>
           </div>
         </DialogContent>
@@ -315,7 +341,7 @@ export default function AddCardModal() {
         <DialogHeader className="p-0">
           <div className="flex items-center justify-center px-4 py-3 relative border-b border-zinc-200 lg:border-b-0">
             <DialogTitle className="paragraph-medium-semibold text-zinc-950 text-center">
-              Adicionar cartão
+              {translate('common.cards.add.title')}
             </DialogTitle>
             <Button
               type="button"
@@ -336,18 +362,19 @@ export default function AddCardModal() {
         >
           <div className={`flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none ${currentStep !== 1 ? 'hidden' : ''}`}>
             <h2 className="font-[family-name:var(--font-outfit)] text-[18px] leading-tight font-semibold text-zinc-950">
-              Adicione suas informações de cobrança
+              {translate('common.cards.add.billingHeading')}
             </h2>
-            <BillingFormFields form={form} />
+            <BillingFormFields form={form} isInternational={isInternational} />
           </div>
           <div className={`flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none ${currentStep !== 2 ? 'hidden' : ''}`}>
             <h2 className="font-[family-name:var(--font-outfit)] text-[18px] leading-tight font-semibold text-zinc-950">
-              Adicione informações do seu cartão
+              {translate('common.cards.add.cardHeading')}
             </h2>
             <CardFormFields
               form={form}
               onStripeChange={handleStripeChange}
               stripeErrors={stripeErrors}
+              isInternational={isInternational}
             />
           </div>
 
@@ -355,7 +382,7 @@ export default function AddCardModal() {
             {currentStep === 1 ? (
               <>
                 <Button variant="secondary" type="button" onClick={handleClose} className="h-10!">
-                  Cancelar
+                  {translate('common.actions.cancel')}
                 </Button>
                 <Button
                   type="button"
@@ -363,13 +390,13 @@ export default function AddCardModal() {
                   onClick={handleContinue}
                   disabled={!isBillingValid}
                 >
-                  Continuar
+                  {translate('common.actions.continue')}
                 </Button>
               </>
             ) : (
               <>
                 <Button variant="secondary" type="button" onClick={handleBack} className="h-10!">
-                  Voltar
+                  {translate('common.actions.back')}
                 </Button>
                 <Button
                   type="submit"
@@ -378,10 +405,10 @@ export default function AddCardModal() {
                   loading={isAuthenticating || isSubmitting}
                 >
                   {isAuthenticating
-                    ? 'Autenticando...'
+                    ? translate('common.cards.add.authenticating')
                     : isSubmitting
-                      ? 'Adicionando cartão...'
-                      : 'Adicionar cartão'}
+                      ? translate('common.cards.add.submitting')
+                      : translate('common.cards.add.submit')}
                 </Button>
               </>
             )}

package/src/components/modals/cards/CannotDeleteCardModal.tsx

@@ -12,8 +12,10 @@ import { useCards } from '../../../modules/cards/hooks/cards.hook';
 import { useActiveSubscription } from '../../../modules/subscriptions/hooks/find-active-subscription.hook';
 import { useUpdateSubscriptionPayment } from '../../../modules/subscriptions/hooks/update-subscription-payment.hook';
 import type { Card } from '../../../modules/cards/types';
+import { useTranslations } from 'next-intl';
 
 export function CannotDeleteCardModal() {
+  const translate = useTranslations();
   const { activeModal, modalData, closeModal, openModal } = useModalManager();
   const { data: cardsData } = useCards();
   const { mutateAsync: updatePayment } = useUpdateSubscriptionPayment();
@@ -49,7 +51,7 @@ export function CannotDeleteCardModal() {
               message={
                 error instanceof Error
                   ? error.message
-                  : 'Erro ao atualizar cartão da assinatura'
+                  : translate('common.cards.cannotDelete.errorUpdateCard')
               }
               toastId={t}
             />
@@ -69,7 +71,7 @@ export function CannotDeleteCardModal() {
   return (
     <Dialog open={isOpen} onOpenChange={(open) => !open && closeModal()}>
       <DialogTitle className="sr-only">
-        Não é possível excluir este cartão
+        {translate('common.cards.cannotDelete.title')}
       </DialogTitle>
       <DialogContent className="flex flex-col p-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[436px] lg:h-auto lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%] overflow-hidden">
         <div className="flex flex-col gap-5 p-4 lg:p-5">
@@ -79,11 +81,10 @@ export function CannotDeleteCardModal() {
 
           <div className="flex flex-col gap-2">
             <h2 className="paragraph-medium-semibold text-zinc-950">
-              Não é possível excluir este cartão
+              {translate('common.cards.cannotDelete.title')}
             </h2>
             <p className="paragraph-small-regular text-zinc-600">
-              Este cartão está em uso e tem uma assinatura ativa vinculada a ele.
-              Selecione outro cartão como padrão ou adicione um novo.
+              {translate('common.cards.cannotDelete.description')}
             </p>
           </div>
         </div>
@@ -91,7 +92,7 @@ export function CannotDeleteCardModal() {
         {availableCards.length > 0 && (
           <div className="flex flex-col gap-3 px-4 lg:px-5 pb-4 lg:pb-5 overflow-y-auto max-h-[200px] flex-1 lg:flex-none">
             <span className="paragraph-xsmall-semibold text-zinc-600">
-              Selecione um cartão como padrão:
+              {translate('common.cards.cannotDelete.selectDefault')}
             </span>
             {availableCards.map((card) => (
               <CardItem
@@ -107,14 +108,14 @@ export function CannotDeleteCardModal() {
         <div className="flex flex-row gap-2 p-4 lg:p-5 border-t border-zinc-200 mt-auto lg:mt-0">
           <Button onClick={handleAddCard} className="h-10! flex-1">
             <IconPlus size={20} />
-            Adicionar novo cartão
+            {translate('common.cards.cannotDelete.addNewCard')}
           </Button>
           <Button
             variant="secondary"
             onClick={() => closeModal()}
             className="h-10! flex-1"
           >
-            Cancelar
+            {translate('common.actions.cancel')}
           </Button>
         </div>
       </DialogContent>