@greatapps/common 1.1.805 → 1.1.806

package/src/components/account/sections/subscription/PixPaymentDialog.tsx

@@ -10,7 +10,7 @@ import { Toast } from '../../../ui/feedback/Toast';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../../ui/overlay/Dialog';
 import { useCurrencyFormatter } from '../../../../modules/accounts/hooks/use-currency-formatter.hook';
 import { usePendingPixStatus } from '../../../../modules/subscriptions/hooks/pending-pix-status.hook';
-import useCountdownTimer from '../../../../hooks/useCountdownTimer';
+import useSecondsUntil from '../../../../hooks/useSecondsUntil';
 import { copyToClipboard } from '../../../../utils/browser/clipboard';
 import { qrCodeToDataUrl } from '../../../../utils/qrcode/to-data-url';
 import { useSubscriptionFlows } from '../../../../store/useSubscriptionFlows';
@@ -39,20 +39,11 @@ export function PixPaymentDialog() {
   const close = useSubscriptionFlows((state) => state.closePixPayment);
   const openPlansCatalog = useSubscriptionFlows((state) => state.openPlansCatalog);
 
-  const [mountedAt, setMountedAt] = useState<number | null>(null);
   const [generatedQrImage, setGeneratedQrImage] = useState<string | null>(null);
 
   const { data: statusData } = usePendingPixStatus(pixPayment?.correlationId);
   const phase = statusData?.data?.phase;
 
-  useEffect(() => {
-    if (!pixPayment) {
-      setMountedAt(null);
-      return;
-    }
-    setMountedAt(Date.now());
-  }, [pixPayment]);
-
   useEffect(() => {
     const qrCode = pixPayment?.qrCode;
     if (!qrCode) {
@@ -79,19 +70,22 @@ export function PixPaymentDialog() {
     };
   }, [pixPayment?.qrCode]);
 
-  const isPaid = phase === 'completed';
+  const isCompleted = phase === 'completed';
+  const isAuthorizedOnly = statusData?.data?.payment_collected === false;
+  const completedTitle = isAuthorizedOnly ? translate('authorizedTitle') : translate('paidTitle');
+  const completedMessage = isAuthorizedOnly ? translate('authorizedMessage') : translate('paidToast');
   const isRejected = phase === 'rejected';
   const isExpired = phase === 'expired';
 
   // Pago avisa uma vez; a janela fica com a confirmação na tela, como a página do gapps fazia.
   const paidNotifiedRef = useRef(false);
   useEffect(() => {
-    if (!isPaid || paidNotifiedRef.current) return;
+    if (!isCompleted || paidNotifiedRef.current) return;
     paidNotifiedRef.current = true;
     toast.custom((toastId) => (
-      <Toast variant="success" message={translate('paidToast')} toastId={toastId} />
+      <Toast variant="success" message={completedMessage} toastId={toastId} />
     ));
-  }, [isPaid, translate]);
+  }, [isCompleted, completedMessage]);
 
   useEffect(() => {
     if (!pixPayment) paidNotifiedRef.current = false;
@@ -102,12 +96,7 @@ export function PixPaymentDialog() {
     openPlansCatalog();
   };
 
-  const expiresInSeconds =
-    pixPayment?.expiresAt && mountedAt
-      ? Math.max(0, Math.floor((new Date(pixPayment.expiresAt).getTime() - mountedAt) / 1000))
-      : null;
-  const shouldShowCountdown = typeof expiresInSeconds === 'number' && expiresInSeconds > 0;
-  const { seconds } = useCountdownTimer({ initialSeconds: shouldShowCountdown ? expiresInSeconds : 1 });
+  const secondsUntilExpiry = useSecondsUntil(pixPayment?.expiresAt);
 
   const handleCopyCode = async () => {
     if (!pixPayment?.qrCode) return;
@@ -141,15 +130,15 @@ export function PixPaymentDialog() {
 
         {/* Fechado o ciclo (pago, recusado ou expirado), o QR perde a função: a janela vira o
             desfecho, como a página de pix do gapps. */}
-        {isPaid || isRejected || isExpired ? (
+        {isCompleted || isRejected || isExpired ? (
           <div className="flex flex-col items-center justify-center gap-4 p-8 text-center">
             <div
               className={cn(
                 'size-12 rounded-full flex items-center justify-center',
-                isPaid ? 'bg-green-50' : 'bg-red-50'
+                isCompleted ? 'bg-green-50' : 'bg-red-50'
               )}
             >
-              {isPaid ? (
+              {isCompleted ? (
                 <IconCircleCheck size={24} className="text-green-500" />
               ) : (
                 <IconAlertTriangle size={24} className="text-red-500" />
@@ -158,18 +147,18 @@ export function PixPaymentDialog() {
 
             <div className="flex flex-col gap-1">
               <span className="paragraph-xlarge-semibold text-zinc-950">
-                {isPaid
-                  ? translate('paidTitle')
+                {isCompleted
+                  ? completedTitle
                   : isRejected
                     ? translate('rejectedTitle')
                     : translate('expiredTitle')}
               </span>
               <span className="paragraph-small-regular text-zinc-500">
-                {isPaid ? translate('paidToast') : translate('rejectedOrExpiredDescription')}
+                {isCompleted ? completedMessage : translate('rejectedOrExpiredDescription')}
               </span>
             </div>
 
-            {isPaid ? (
+            {isCompleted ? (
               <Button variant="secondary" className="h-10" onClick={close}>
                 {translateActions('common.actions.close')}
               </Button>
@@ -189,9 +178,9 @@ export function PixPaymentDialog() {
           )}
 
           <div className="flex flex-col gap-6 p-5 border border-zinc-200 rounded-lg bg-white items-center">
-            {shouldShowCountdown && (
+            {!!secondsUntilExpiry && (
               <p className="paragraph-small-semibold text-zinc-950 text-center">
-                {translate('payIn')} <span className="text-red-600">{formatCountdown(seconds)}</span>
+                {translate('payIn')} <span className="text-red-600">{formatCountdown(secondsUntilExpiry)}</span>
               </p>
             )}
 

package/src/hooks/useSecondsUntil.ts

@@ -0,0 +1,17 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export default function useSecondsUntil(deadline: string | null | undefined): number | null {
+  const [now, setNow] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (!deadline) return;
+    setNow(Date.now());
+    const interval = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(interval);
+  }, [deadline]);
+
+  if (!deadline || now === null) return null;
+  return Math.max(0, Math.floor((new Date(deadline).getTime() - now) / 1000));
+}

package/src/i18n/messages/en-us.ts

@@ -1092,6 +1092,8 @@ const messages = {
           paidToast: 'Payment processed successfully.',
           waitingPayment: 'Waiting for payment confirmation...',
           paidTitle: 'PIX paid',
+          authorizedTitle: 'Automatic PIX authorized',
+          authorizedMessage: 'The charge will be made automatically on the due date.',
           rejectedTitle: 'PIX rejected',
           expiredTitle: 'PIX code expired',
           rejectedOrExpiredDescription: 'Click below to generate a new PIX code',

package/src/i18n/messages/es-es.ts

@@ -1098,6 +1098,8 @@ const messages = {
           paidToast: 'Pago realizado exitosamente.',
           waitingPayment: 'Esperando la confirmación del pago...',
           paidTitle: 'PIX pagado',
+          authorizedTitle: 'PIX automático autorizado',
+          authorizedMessage: 'El cobro se realizará automáticamente en la fecha de vencimiento.',
           rejectedTitle: 'PIX rechazado',
           expiredTitle: 'Código PIX expirado',
           rejectedOrExpiredDescription: 'Haz clic abajo para generar un nuevo código PIX',

package/src/i18n/messages/pt-br.ts

@@ -1105,6 +1105,8 @@ const messages = {
           paidToast: 'Pagamento efetuado com sucesso.',
           waitingPayment: 'Aguardando a confirmação do pagamento...',
           paidTitle: 'PIX pago',
+          authorizedTitle: 'PIX automático autorizado',
+          authorizedMessage: 'A cobrança será feita automaticamente na data de vencimento.',
           rejectedTitle: 'Pix recusado',
           expiredTitle: 'Código PIX expirado',
           rejectedOrExpiredDescription: 'Clique abaixo para gerar um novo código PIX',

package/src/modules/subscriptions/types/pending-pix-status.type.ts

@@ -16,6 +16,7 @@ export const PendingPixStatusDataSchema = z
     payment_method: z.number().nullable().optional(),
     subscription_id: z.union([z.number(), z.string()]).optional(),
     completed_at: z.string().nullable().optional(),
+    payment_collected: z.boolean().optional(),
     pix: z
       .object({
         qr_code: z.string().nullable().optional(),