@greatapps/common 1.1.261 → 1.1.262

package/src/components/ui/data-display/PaymentInfoCard.tsx

@@ -1,186 +1,186 @@
-'use client';
-
-import { IconChevronDown, IconPlus } from '@tabler/icons-react';
-import { CardBrandIcon } from './CardBrandIcons';
-import { CardItem } from './CardItem';
-import useIsMobile from '../../../hooks/useIsMobile';
-import { useCards } from '../../../modules/cards/hooks/cards.hook';
-import { useCallback, useState } from 'react';
-import { useModalManager } from '../../../store/useModalManager';
-import type { Card } from '../../../modules/cards/types';
-
-type PaymentInfoCardProps = {
-  email?: string;
-  selectedCardId: string;
-  onCardSelect: (cardId: string) => void;
-  onManageCards?: () => void;
-  onOpenAddCard?: () => void;
-};
-
-export function PaymentInfoCard({
-  email,
-  selectedCardId,
-  onCardSelect,
-  onManageCards,
-  onOpenAddCard,
-}: PaymentInfoCardProps) {
-  const isMobile = useIsMobile();
-  const { openModal } = useModalManager();
-
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  const { data: cardsData } = useCards();
-  const cards = cardsData?.data ?? [];
-
-  const selectedCard = cards.find((card) => card.id.toString() === selectedCardId.toString());
-
-  const canDeleteCards = cards.length > 1;
-  const hasCards = cards.length > 0;
-
-  const hasMoreThan3Cards = cards.length > 3;
-  const shouldShowManageButton = isMobile && hasMoreThan3Cards;
-  const displayedCards = shouldShowManageButton ? cards.slice(0, 3) : cards;
-
-  const handleOpenAddCardModal = useCallback(() => {
-    if (onOpenAddCard) {
-      onOpenAddCard();
-      return;
-    }
-    openModal('addCardModal', {
-      onCardAdded: (cardId: string) => onCardSelect(cardId),
-    });
-  }, [openModal, onOpenAddCard, onCardSelect]);
-
-  const handleDeleteCard = useCallback(
-    (card: Card) => {
-      if (canDeleteCards) {
-        openModal('deleteCardModal', {
-          cardId: card.id.toString(),
-          cardLastDigits: card.number.replaceAll(/\D/g, '').slice(-4),
-          onSuccess: () => {
-            if (card.id === selectedCardId && cards.length > 1) {
-              const remainingCards = cards.filter((c) => c.id !== card.id);
-              if (remainingCards.length > 0) {
-                onCardSelect(remainingCards[0].id.toString());
-              }
-            }
-          },
-        });
-      }
-    },
-    [canDeleteCards, openModal, selectedCardId, cards, onCardSelect]
-  );
-
-  const handleSelectCard = useCallback(
-    (cardId: string) => {
-      onCardSelect(cardId);
-      setIsExpanded(false);
-    },
-    [onCardSelect]
-  );
-
-  if (!hasCards) {
-    return (
-      <div className="border border-zinc-200 rounded-lg overflow-hidden">
-        {email && (
-          <div className="flex items-center h-[60px] px-4 border-b border-zinc-200 gap-3">
-            <span className="paragraph-small-medium text-zinc-500 w-[100px]">E-mail</span>
-            <span className="paragraph-small-medium text-zinc-950 flex-1">{email}</span>
-          </div>
-        )}
-        <div className="flex items-center h-[60px] px-4 gap-3">
-          <span className="paragraph-small-medium text-zinc-500 w-[100px]">Pagamento</span>
-          <button
-            type="button"
-            onClick={handleOpenAddCardModal}
-            className="flex items-center h-8 px-2 paragraph-small-semibold text-zinc-950 border border-zinc-200 rounded-md hover:border-zinc-400 transition-colors cursor-pointer w-fit"
-          >
-            <IconPlus className="size-[18px]" />
-            <span className="px-1.5">Adicionar cartão</span>
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col gap-3">
-      <div className="border border-zinc-200 rounded-lg overflow-hidden">
-        {email && (
-          <div className="flex items-center h-[60px] px-4 border-b border-zinc-200 gap-3">
-            <span className="paragraph-small-medium text-zinc-500 w-[100px]">E-mail</span>
-            <span className="paragraph-small-medium text-zinc-950 flex-1">{email}</span>
-          </div>
-        )}
-
-        <div
-          className="flex items-center px-4 py-4 cursor-pointer gap-3"
-          onClick={() => setIsExpanded((prev) => !prev)}
-        >
-          {!isExpanded ? (
-            <>
-              <span className="paragraph-small-medium text-zinc-500 w-[100px]">Pagamento</span>
-              <div className="flex flex-col gap-0.5 flex-1 min-w-0">
-                <span className="paragraph-small-semibold text-zinc-950 truncate">{selectedCard?.name}</span>
-                <span className="paragraph-small-medium text-zinc-950">
-                  •••• {selectedCard?.number?.replaceAll(/\D/g, '')?.slice(-4)}
-                </span>
-              </div>
-              {selectedCard && <CardBrandIcon brand={selectedCard.brand} />}
-              <div className="size-8 flex items-center justify-center rounded-lg">
-                <IconChevronDown className="size-[18px] text-zinc-500" />
-              </div>
-            </>
-          ) : (
-            <>
-              <span className="paragraph-small-semibold text-zinc-950 flex-1">
-                Selecione a forma de pagamento
-              </span>
-              <div className="size-8 flex items-center justify-center rounded-lg">
-                <IconChevronDown className="size-[18px] text-zinc-500 rotate-180" />
-              </div>
-            </>
-          )}
-        </div>
-
-        <div
-          className={`flex flex-col gap-2 px-4 overflow-hidden transition-all duration-300 ease-in-out ${
-            isExpanded ? 'max-h-[500px] pb-4 opacity-100' : 'max-h-0 pb-0 opacity-0'
-          }`}
-        >
-          {displayedCards.map((card) => (
-            <CardItem
-              key={card.id}
-              card={card}
-              isSelected={card.id.toString() === selectedCardId.toString()}
-              onSelect={() => handleSelectCard(card.id.toString())}
-              showMenu
-              canDelete={canDeleteCards}
-              onDelete={() => handleDeleteCard(card)}
-            />
-          ))}
-          {shouldShowManageButton && onManageCards && (
-            <button
-              type="button"
-              onClick={onManageCards}
-              className="flex items-center justify-center h-10 px-4 paragraph-small-semibold text-cyan-600 border border-cyan-200 rounded-lg hover:bg-cyan-50 transition-colors cursor-pointer mt-2"
-            >
-              Gerenciar cartões
-            </button>
-          )}
-        </div>
-      </div>
-
-      <button
-        type="button"
-        onClick={handleOpenAddCardModal}
-        className="flex items-center h-8 px-2 paragraph-small-semibold text-zinc-950 border border-zinc-200 rounded-md hover:border-zinc-400 transition-colors cursor-pointer w-fit"
-      >
-        <IconPlus className="size-[18px]" />
-        <span className="px-1.5">
-          {isExpanded ? 'Adicionar cartão' : 'Nova forma de pagamento'}
-        </span>
-      </button>
-    </div>
-  );
-}
+'use client';
+
+import { IconChevronDown, IconPlus } from '@tabler/icons-react';
+import { CardBrandIcon } from './CardBrandIcons';
+import { CardItem } from './CardItem';
+import useIsMobile from '../../../hooks/useIsMobile';
+import { useCards } from '../../../modules/cards/hooks/cards.hook';
+import { useCallback, useState } from 'react';
+import { useModalManager } from '../../../store/useModalManager';
+import type { Card } from '../../../modules/cards/types';
+
+type PaymentInfoCardProps = {
+  email?: string;
+  selectedCardId: string;
+  onCardSelect: (cardId: string) => void;
+  onManageCards?: () => void;
+  onOpenAddCard?: () => void;
+};
+
+export function PaymentInfoCard({
+  email,
+  selectedCardId,
+  onCardSelect,
+  onManageCards,
+  onOpenAddCard,
+}: PaymentInfoCardProps) {
+  const isMobile = useIsMobile();
+  const { openModal } = useModalManager();
+
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const { data: cardsData } = useCards();
+  const cards = cardsData?.data ?? [];
+
+  const selectedCard = cards.find((card) => card.id.toString() === selectedCardId.toString());
+
+  const canDeleteCards = cards.length > 1;
+  const hasCards = cards.length > 0;
+
+  const hasMoreThan3Cards = cards.length > 3;
+  const shouldShowManageButton = isMobile && hasMoreThan3Cards;
+  const displayedCards = shouldShowManageButton ? cards.slice(0, 3) : cards;
+
+  const handleOpenAddCardModal = useCallback(() => {
+    if (onOpenAddCard) {
+      onOpenAddCard();
+      return;
+    }
+    openModal('addCardModal', {
+      onCardAdded: (cardId: string) => onCardSelect(cardId),
+    });
+  }, [openModal, onOpenAddCard, onCardSelect]);
+
+  const handleDeleteCard = useCallback(
+    (card: Card) => {
+      if (canDeleteCards) {
+        openModal('deleteCardModal', {
+          cardId: card.id.toString(),
+          cardLastDigits: card.number.replaceAll(/\D/g, '').slice(-4),
+          onSuccess: () => {
+            if (card.id === selectedCardId && cards.length > 1) {
+              const remainingCards = cards.filter((c) => c.id !== card.id);
+              if (remainingCards.length > 0) {
+                onCardSelect(remainingCards[0].id.toString());
+              }
+            }
+          },
+        });
+      }
+    },
+    [canDeleteCards, openModal, selectedCardId, cards, onCardSelect]
+  );
+
+  const handleSelectCard = useCallback(
+    (cardId: string) => {
+      onCardSelect(cardId);
+      setIsExpanded(false);
+    },
+    [onCardSelect]
+  );
+
+  if (!hasCards) {
+    return (
+      <div className="border border-zinc-200 rounded-lg overflow-hidden">
+        {email && (
+          <div className="flex items-center h-[60px] px-4 border-b border-zinc-200 gap-3">
+            <span className="paragraph-small-medium text-zinc-500 w-[100px]">E-mail</span>
+            <span className="paragraph-small-medium text-zinc-950 flex-1">{email}</span>
+          </div>
+        )}
+        <div className="flex items-center h-[60px] px-4 gap-3">
+          <span className="paragraph-small-medium text-zinc-500 w-[100px]">Pagamento</span>
+          <button
+            type="button"
+            onClick={handleOpenAddCardModal}
+            className="flex items-center h-8 px-2 paragraph-small-semibold text-zinc-950 border border-zinc-200 rounded-md hover:border-zinc-400 transition-colors cursor-pointer w-fit"
+          >
+            <IconPlus className="size-[18px]" />
+            <span className="px-1.5">Adicionar cartão</span>
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="border border-zinc-200 rounded-lg overflow-hidden">
+        {email && (
+          <div className="flex items-center h-[60px] px-4 border-b border-zinc-200 gap-3">
+            <span className="paragraph-small-medium text-zinc-500 w-[100px]">E-mail</span>
+            <span className="paragraph-small-medium text-zinc-950 flex-1">{email}</span>
+          </div>
+        )}
+
+        <div
+          className="flex items-center px-4 py-4 cursor-pointer gap-3"
+          onClick={() => setIsExpanded((prev) => !prev)}
+        >
+          {!isExpanded ? (
+            <>
+              <span className="paragraph-small-medium text-zinc-500 w-[100px]">Pagamento</span>
+              <div className="flex flex-col gap-0.5 flex-1 min-w-0">
+                <span className="paragraph-small-semibold text-zinc-950 truncate">{selectedCard?.name}</span>
+                <span className="paragraph-small-medium text-zinc-950">
+                  •••• {selectedCard?.number?.replaceAll(/\D/g, '')?.slice(-4)}
+                </span>
+              </div>
+              {selectedCard && <CardBrandIcon brand={selectedCard.brand} />}
+              <div className="size-8 flex items-center justify-center rounded-lg">
+                <IconChevronDown className="size-[18px] text-zinc-500" />
+              </div>
+            </>
+          ) : (
+            <>
+              <span className="paragraph-small-semibold text-zinc-950 flex-1">
+                Selecione a forma de pagamento
+              </span>
+              <div className="size-8 flex items-center justify-center rounded-lg">
+                <IconChevronDown className="size-[18px] text-zinc-500 rotate-180" />
+              </div>
+            </>
+          )}
+        </div>
+
+        <div
+          className={`flex flex-col gap-2 px-4 overflow-hidden transition-all duration-300 ease-in-out ${
+            isExpanded ? 'max-h-[500px] pb-4 opacity-100' : 'max-h-0 pb-0 opacity-0'
+          }`}
+        >
+          {displayedCards.map((card) => (
+            <CardItem
+              key={card.id}
+              card={card}
+              isSelected={card.id.toString() === selectedCardId.toString()}
+              onSelect={() => handleSelectCard(card.id.toString())}
+              showMenu
+              canDelete={canDeleteCards}
+              onDelete={() => handleDeleteCard(card)}
+            />
+          ))}
+          {shouldShowManageButton && onManageCards && (
+            <button
+              type="button"
+              onClick={onManageCards}
+              className="flex items-center justify-center h-10 px-4 paragraph-small-semibold text-cyan-600 border border-cyan-200 rounded-lg hover:bg-cyan-50 transition-colors cursor-pointer mt-2"
+            >
+              Gerenciar cartões
+            </button>
+          )}
+        </div>
+      </div>
+
+      <button
+        type="button"
+        onClick={handleOpenAddCardModal}
+        className="flex items-center h-8 px-2 paragraph-small-semibold text-zinc-950 border border-zinc-200 rounded-md hover:border-zinc-400 transition-colors cursor-pointer w-fit"
+      >
+        <IconPlus className="size-[18px]" />
+        <span className="px-1.5">
+          {isExpanded ? 'Adicionar cartão' : 'Nova forma de pagamento'}
+        </span>
+      </button>
+    </div>
+  );
+}

package/src/components/ui/data-display/ScrollArea.tsx

@@ -1,59 +1,59 @@
-'use client';
-
-"use client"
-
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
-import { cn } from "../../../infra/utils/clsx"
-
-function ScrollArea({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
-  return (
-    <ScrollAreaPrimitive.Root
-      data-slot="scroll-area"
-      className={cn("relative", className)}
-      {...props}
-    >
-      <ScrollAreaPrimitive.Viewport
-        data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
-      >
-        {children}
-      </ScrollAreaPrimitive.Viewport>
-      <ScrollBar />
-      <ScrollAreaPrimitive.Corner />
-    </ScrollAreaPrimitive.Root>
-  )
-}
-
-function ScrollBar({
-  className,
-  orientation = "vertical",
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
-  return (
-    <ScrollAreaPrimitive.ScrollAreaScrollbar
-      data-slot="scroll-area-scrollbar"
-      orientation={orientation}
-      className={cn(
-        "flex touch-none p-px transition-colors select-none",
-        orientation === "vertical" &&
-          "h-full w-2.5 border-l border-l-transparent",
-        orientation === "horizontal" &&
-          "h-2.5 flex-col border-t border-t-transparent",
-        className
-      )}
-      {...props}
-    >
-      <ScrollAreaPrimitive.ScrollAreaThumb
-        data-slot="scroll-area-thumb"
-        className="bg-border relative flex-1 rounded-full"
-      />
-    </ScrollAreaPrimitive.ScrollAreaScrollbar>
-  )
-}
-
-export { ScrollArea, ScrollBar }
+'use client';
+
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import { cn } from "../../../infra/utils/clsx"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

package/src/components/ui/data-display/Separator.tsx

@@ -1,29 +1,29 @@
-'use client';
-
-"use client"
-
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
-import { cn } from "../../../infra/utils/clsx"
-
-function Separator({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
-}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
-  return (
-    <SeparatorPrimitive.Root
-      data-slot="separator"
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Separator }
+'use client';
+
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import { cn } from "../../../infra/utils/clsx"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }