@greatapps/common 1.1.697 → 1.1.698

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

@@ -1,193 +1,193 @@
-'use client';
-
-import { useCallback, useState } from 'react';
-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 { useModalManager } from '../../../store/useModalManager';
-import { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';
-import type { Card } from '../../../modules/cards/types';
-import { useTranslations } from 'next-intl';
-
-type PaymentInfoCardProps = {
-  email?: string;
-  selectedCardId: string;
-  onCardSelect: (cardId: string) => void;
-  onManageCards?: () => void;
-  onOpenAddCard?: () => void;
-  hideDelete?: boolean;
-  hideSetDefault?: boolean;
-};
-
-export function PaymentInfoCard({
-  email,
-  selectedCardId,
-  onCardSelect,
-  onManageCards,
-  onOpenAddCard,
-  hideDelete,
-  hideSetDefault,
-}: PaymentInfoCardProps) {
-  const translate = useTranslations();
-  const isMobile = useIsMobile();
-  const { openModal } = useModalManager();
-  const isDefaultWl = useIsDefaultWhitelabel();
-
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  const { data: cardsData } = useCards();
-  const cards = cardsData?.data ?? [];
-
-  const selectedCard = cards.find(
-    (card) => card.id.toString() === selectedCardId.toString(),
-  );
-
-  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 handleSelectCard = useCallback(
-    (cardId: string) => {
-      onCardSelect(cardId);
-      setIsExpanded(false);
-    },
-    [onCardSelect],
-  );
-
-  const handleAfterDelete = useCallback(
-    (card: Card) => {
-      if (card.id.toString() === selectedCardId.toString()) {
-        const remaining = cards.filter((c) => c.id !== card.id);
-        if (remaining.length > 0) {
-          onCardSelect(remaining[0].id.toString());
-        }
-      }
-    },
-    [cards, selectedCardId, 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]">{translate('common.cards.paymentInfo.email')}</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]">{translate('common.cards.paymentInfo.payment')}</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">{translate('common.cards.paymentInfo.addCard')}</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]">{translate('common.cards.paymentInfo.email')}</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]">{translate('common.cards.paymentInfo.payment')}</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">
-                {translate('common.cards.paymentInfo.selectPaymentMethod')}
-              </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())}
-              hideDelete={hideDelete}
-              hideSetDefault={hideSetDefault}
-              onAfterDelete={handleAfterDelete}
-            />
-          ))}
-          {shouldShowManageButton && onManageCards && (
-            <button
-              type="button"
-              onClick={onManageCards}
-              className={`flex items-center justify-center h-10 px-4 paragraph-small-semibold rounded-lg transition-colors cursor-pointer mt-2 ${
-                isDefaultWl
-                  ? 'text-cyan-600 border border-cyan-200 hover:bg-cyan-50'
-                  : 'text-zinc-600 border border-zinc-200 hover:bg-zinc-50'
-              }`}
-            >
-              {translate('common.cards.paymentInfo.manageCards')}
-            </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 ? translate('common.cards.paymentInfo.addCard') : translate('common.cards.paymentInfo.newPaymentMethod')}
-        </span>
-      </button>
-    </div>
-  );
-}
+'use client';
+
+import { useCallback, useState } from 'react';
+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 { useModalManager } from '../../../store/useModalManager';
+import { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';
+import type { Card } from '../../../modules/cards/types';
+import { useTranslations } from 'next-intl';
+
+type PaymentInfoCardProps = {
+  email?: string;
+  selectedCardId: string;
+  onCardSelect: (cardId: string) => void;
+  onManageCards?: () => void;
+  onOpenAddCard?: () => void;
+  hideDelete?: boolean;
+  hideSetDefault?: boolean;
+};
+
+export function PaymentInfoCard({
+  email,
+  selectedCardId,
+  onCardSelect,
+  onManageCards,
+  onOpenAddCard,
+  hideDelete,
+  hideSetDefault,
+}: PaymentInfoCardProps) {
+  const translate = useTranslations();
+  const isMobile = useIsMobile();
+  const { openModal } = useModalManager();
+  const isDefaultWl = useIsDefaultWhitelabel();
+
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const { data: cardsData } = useCards();
+  const cards = cardsData?.data ?? [];
+
+  const selectedCard = cards.find(
+    (card) => card.id.toString() === selectedCardId.toString(),
+  );
+
+  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 handleSelectCard = useCallback(
+    (cardId: string) => {
+      onCardSelect(cardId);
+      setIsExpanded(false);
+    },
+    [onCardSelect],
+  );
+
+  const handleAfterDelete = useCallback(
+    (card: Card) => {
+      if (card.id.toString() === selectedCardId.toString()) {
+        const remaining = cards.filter((c) => c.id !== card.id);
+        if (remaining.length > 0) {
+          onCardSelect(remaining[0].id.toString());
+        }
+      }
+    },
+    [cards, selectedCardId, 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]">{translate('common.cards.paymentInfo.email')}</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]">{translate('common.cards.paymentInfo.payment')}</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">{translate('common.cards.paymentInfo.addCard')}</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]">{translate('common.cards.paymentInfo.email')}</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]">{translate('common.cards.paymentInfo.payment')}</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">
+                {translate('common.cards.paymentInfo.selectPaymentMethod')}
+              </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())}
+              hideDelete={hideDelete}
+              hideSetDefault={hideSetDefault}
+              onAfterDelete={handleAfterDelete}
+            />
+          ))}
+          {shouldShowManageButton && onManageCards && (
+            <button
+              type="button"
+              onClick={onManageCards}
+              className={`flex items-center justify-center h-10 px-4 paragraph-small-semibold rounded-lg transition-colors cursor-pointer mt-2 ${
+                isDefaultWl
+                  ? 'text-cyan-600 border border-cyan-200 hover:bg-cyan-50'
+                  : 'text-zinc-600 border border-zinc-200 hover:bg-zinc-50'
+              }`}
+            >
+              {translate('common.cards.paymentInfo.manageCards')}
+            </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 ? translate('common.cards.paymentInfo.addCard') : translate('common.cards.paymentInfo.newPaymentMethod')}
+        </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 }