@greatapps/common 1.1.485 → 1.1.486
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ui/data-display/CardItem.mjs +1 -1
- package/dist/components/ui/data-display/CardItem.mjs.map +1 -1
- package/dist/components/ui/data-display/PaymentInfoCard.mjs +1 -1
- package/dist/components/ui/data-display/PaymentInfoCard.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/ui/data-display/CardItem.tsx +1 -1
- package/src/components/ui/data-display/PaymentInfoCard.tsx +1 -1
|
@@ -24,7 +24,7 @@ function CardItem({
|
|
|
24
24
|
/* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-950 truncate", children: card.name }),
|
|
25
25
|
/* @__PURE__ */ jsxs("span", { className: "paragraph-small-medium text-zinc-950", children: [
|
|
26
26
|
"\u2022\u2022\u2022\u2022 ",
|
|
27
|
-
card.number.replaceAll(/\D/g, "").slice(-4)
|
|
27
|
+
(card.number ?? "").replaceAll(/\D/g, "").slice(-4)
|
|
28
28
|
] })
|
|
29
29
|
] }),
|
|
30
30
|
/* @__PURE__ */ jsx(CardBrandIcon, { brand: card.brand }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ui/data-display/CardItem.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { IconDotsVertical, IconTrash } from '@tabler/icons-react';\nimport { Popover, PopoverContent, PopoverTrigger } from '../overlay/Popover';\nimport { NavBarItem } from '../../layouts/NavBarItem';\nimport { CardBrandIcon } from './CardBrandIcons';\nimport type { Card } from '../../../modules/cards/types';\n\ntype CardItemProps = {\n card: Card;\n isSelected?: boolean;\n onSelect?: () => void;\n showMenu?: boolean;\n canDelete?: boolean;\n onDelete?: () => void;\n};\n\nexport function CardItem({\n card,\n isSelected,\n onSelect,\n showMenu = false,\n canDelete = true,\n onDelete,\n}: CardItemProps) {\n const [popoverOpen, setPopoverOpen] = useState(false);\n\n return (\n <div\n className={`flex items-center p-4 cursor-pointer transition-colors gap-3 rounded-lg border ${\n isSelected ? 'bg-zinc-50 border-zinc-950' : 'bg-white border-zinc-200 hover:bg-zinc-50'\n }`}\n onClick={onSelect}\n >\n <div className=\"flex flex-col gap-0.5 flex-1 min-w-0\">\n <span className=\"paragraph-small-semibold text-zinc-950 truncate\">\n {card.name}\n </span>\n <span className=\"paragraph-small-medium text-zinc-950\">\n •••• {card.number.replaceAll(/\\D/g, '').slice(-4)}\n </span>\n </div>\n <CardBrandIcon brand={card.brand} />\n {showMenu && (\n <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>\n <PopoverTrigger asChild>\n <button\n className=\"size-10 flex items-center justify-center rounded-lg hover:bg-zinc-100 cursor-pointer\"\n onClick={(e) => e.stopPropagation()}\n >\n <IconDotsVertical className=\"size-5 text-zinc-500\" />\n </button>\n </PopoverTrigger>\n <PopoverContent\n align=\"end\"\n className=\"w-[140px] p-2 bg-white rounded-2xl shadow-md border border-zinc-200\"\n onClick={(e) => e.stopPropagation()}\n >\n {canDelete && (\n <NavBarItem\n icon={<IconTrash size={20} className=\"text-zinc-400\" />}\n label=\"Excluir\"\n onClick={() => {\n setPopoverOpen(false);\n onDelete?.();\n }}\n />\n )}\n </PopoverContent>\n </Popover>\n )}\n </div>\n );\n}\n"],"mappings":";AAoCQ,cAGA,YAHA;AAlCR,SAAS,gBAAgB;AACzB,SAAS,kBAAkB,iBAAiB;AAC5C,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAYvB,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AAAA,EACZ;AACF,GAAkB;AAChB,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,kFACT,aAAa,+BAA+B,2CAC9C;AAAA,MACA,SAAS;AAAA,MAET;AAAA,6BAAC,SAAI,WAAU,wCACb;AAAA,8BAAC,UAAK,WAAU,mDACb,eAAK,MACR;AAAA,UACA,qBAAC,UAAK,WAAU,wCAAuC;AAAA;AAAA,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ui/data-display/CardItem.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { IconDotsVertical, IconTrash } from '@tabler/icons-react';\nimport { Popover, PopoverContent, PopoverTrigger } from '../overlay/Popover';\nimport { NavBarItem } from '../../layouts/NavBarItem';\nimport { CardBrandIcon } from './CardBrandIcons';\nimport type { Card } from '../../../modules/cards/types';\n\ntype CardItemProps = {\n card: Card;\n isSelected?: boolean;\n onSelect?: () => void;\n showMenu?: boolean;\n canDelete?: boolean;\n onDelete?: () => void;\n};\n\nexport function CardItem({\n card,\n isSelected,\n onSelect,\n showMenu = false,\n canDelete = true,\n onDelete,\n}: CardItemProps) {\n const [popoverOpen, setPopoverOpen] = useState(false);\n\n return (\n <div\n className={`flex items-center p-4 cursor-pointer transition-colors gap-3 rounded-lg border ${\n isSelected ? 'bg-zinc-50 border-zinc-950' : 'bg-white border-zinc-200 hover:bg-zinc-50'\n }`}\n onClick={onSelect}\n >\n <div className=\"flex flex-col gap-0.5 flex-1 min-w-0\">\n <span className=\"paragraph-small-semibold text-zinc-950 truncate\">\n {card.name}\n </span>\n <span className=\"paragraph-small-medium text-zinc-950\">\n •••• {(card.number ?? '').replaceAll(/\\D/g, '').slice(-4)}\n </span>\n </div>\n <CardBrandIcon brand={card.brand} />\n {showMenu && (\n <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>\n <PopoverTrigger asChild>\n <button\n className=\"size-10 flex items-center justify-center rounded-lg hover:bg-zinc-100 cursor-pointer\"\n onClick={(e) => e.stopPropagation()}\n >\n <IconDotsVertical className=\"size-5 text-zinc-500\" />\n </button>\n </PopoverTrigger>\n <PopoverContent\n align=\"end\"\n className=\"w-[140px] p-2 bg-white rounded-2xl shadow-md border border-zinc-200\"\n onClick={(e) => e.stopPropagation()}\n >\n {canDelete && (\n <NavBarItem\n icon={<IconTrash size={20} className=\"text-zinc-400\" />}\n label=\"Excluir\"\n onClick={() => {\n setPopoverOpen(false);\n onDelete?.();\n }}\n />\n )}\n </PopoverContent>\n </Popover>\n )}\n </div>\n );\n}\n"],"mappings":";AAoCQ,cAGA,YAHA;AAlCR,SAAS,gBAAgB;AACzB,SAAS,kBAAkB,iBAAiB;AAC5C,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAYvB,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AAAA,EACZ;AACF,GAAkB;AAChB,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,kFACT,aAAa,+BAA+B,2CAC9C;AAAA,MACA,SAAS;AAAA,MAET;AAAA,6BAAC,SAAI,WAAU,wCACb;AAAA,8BAAC,UAAK,WAAU,mDACb,eAAK,MACR;AAAA,UACA,qBAAC,UAAK,WAAU,wCAAuC;AAAA;AAAA,aAC9C,KAAK,UAAU,IAAI,WAAW,OAAO,EAAE,EAAE,MAAM,EAAE;AAAA,aAC1D;AAAA,WACF;AAAA,QACA,oBAAC,iBAAc,OAAO,KAAK,OAAO;AAAA,QACjC,YACC,qBAAC,WAAQ,MAAM,aAAa,cAAc,gBACxC;AAAA,8BAAC,kBAAe,SAAO,MACrB;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,cAElC,8BAAC,oBAAiB,WAAU,wBAAuB;AAAA;AAAA,UACrD,GACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,WAAU;AAAA,cACV,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,cAEjC,uBACC;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,oBAAC,aAAU,MAAM,IAAI,WAAU,iBAAgB;AAAA,kBACrD,OAAM;AAAA,kBACN,SAAS,MAAM;AACb,mCAAe,KAAK;AACpB,+BAAW;AAAA,kBACb;AAAA;AAAA,cACF;AAAA;AAAA,UAEJ;AAAA,WACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
|
|
@@ -39,7 +39,7 @@ function PaymentInfoCard({
|
|
|
39
39
|
if (canDeleteCards) {
|
|
40
40
|
openModal("deleteCardModal", {
|
|
41
41
|
cardId: card.id.toString(),
|
|
42
|
-
cardLastDigits: card.number.replaceAll(/\D/g, "").slice(-4),
|
|
42
|
+
cardLastDigits: (card.number ?? "").replaceAll(/\D/g, "").slice(-4),
|
|
43
43
|
onSuccess: () => {
|
|
44
44
|
if (card.id === selectedCardId && cards.length > 1) {
|
|
45
45
|
const remainingCards = cards.filter((c) => c.id !== card.id);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ui/data-display/PaymentInfoCard.tsx"],"sourcesContent":["'use client';\n\nimport { IconChevronDown, IconPlus } from '@tabler/icons-react';\nimport { CardBrandIcon } from './CardBrandIcons';\nimport { CardItem } from './CardItem';\nimport useIsMobile from '../../../hooks/useIsMobile';\nimport { useCards } from '../../../modules/cards/hooks/cards.hook';\nimport { useCallback, useState } from 'react';\nimport { useModalManager } from '../../../store/useModalManager';\nimport type { Card } from '../../../modules/cards/types';\n\ntype PaymentInfoCardProps = {\n email?: string;\n selectedCardId: string;\n onCardSelect: (cardId: string) => void;\n onManageCards?: () => void;\n onOpenAddCard?: () => void;\n};\n\nexport function PaymentInfoCard({\n email,\n selectedCardId,\n onCardSelect,\n onManageCards,\n onOpenAddCard,\n}: PaymentInfoCardProps) {\n const isMobile = useIsMobile();\n const { openModal } = useModalManager();\n\n const [isExpanded, setIsExpanded] = useState(false);\n\n const { data: cardsData } = useCards();\n const cards = cardsData?.data ?? [];\n\n const selectedCard = cards.find((card) => card.id.toString() === selectedCardId.toString());\n\n const canDeleteCards = cards.length > 1;\n const hasCards = cards.length > 0;\n\n const hasMoreThan3Cards = cards.length > 3;\n const shouldShowManageButton = isMobile && hasMoreThan3Cards;\n const displayedCards = shouldShowManageButton ? cards.slice(0, 3) : cards;\n\n const handleOpenAddCardModal = useCallback(() => {\n if (onOpenAddCard) {\n onOpenAddCard();\n return;\n }\n openModal('addCardModal', {\n onCardAdded: (cardId: string) => onCardSelect(cardId),\n });\n }, [openModal, onOpenAddCard, onCardSelect]);\n\n const handleDeleteCard = useCallback(\n (card: Card) => {\n if (canDeleteCards) {\n openModal('deleteCardModal', {\n cardId: card.id.toString(),\n cardLastDigits: card.number.replaceAll(/\\D/g, '').slice(-4),\n onSuccess: () => {\n if (card.id === selectedCardId && cards.length > 1) {\n const remainingCards = cards.filter((c) => c.id !== card.id);\n if (remainingCards.length > 0) {\n onCardSelect(remainingCards[0].id.toString());\n }\n }\n },\n });\n }\n },\n [canDeleteCards, openModal, selectedCardId, cards, onCardSelect]\n );\n\n const handleSelectCard = useCallback(\n (cardId: string) => {\n onCardSelect(cardId);\n setIsExpanded(false);\n },\n [onCardSelect]\n );\n\n if (!hasCards) {\n return (\n <div className=\"border border-zinc-200 rounded-lg overflow-hidden\">\n {email && (\n <div className=\"flex items-center h-[60px] px-4 border-b border-zinc-200 gap-3\">\n <span className=\"paragraph-small-medium text-zinc-500 w-[100px]\">E-mail</span>\n <span className=\"paragraph-small-medium text-zinc-950 flex-1\">{email}</span>\n </div>\n )}\n <div className=\"flex items-center h-[60px] px-4 gap-3\">\n <span className=\"paragraph-small-medium text-zinc-500 w-[100px]\">Pagamento</span>\n <button\n type=\"button\"\n onClick={handleOpenAddCardModal}\n 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\"\n >\n <IconPlus className=\"size-[18px]\" />\n <span className=\"px-1.5\">Adicionar cartão</span>\n </button>\n </div>\n </div>\n );\n }\n\n return (\n <div className=\"flex flex-col gap-3\">\n <div className=\"border border-zinc-200 rounded-lg overflow-hidden\">\n {email && (\n <div className=\"flex items-center h-[60px] px-4 border-b border-zinc-200 gap-3\">\n <span className=\"paragraph-small-medium text-zinc-500 w-[100px]\">E-mail</span>\n <span className=\"paragraph-small-medium text-zinc-950 flex-1\">{email}</span>\n </div>\n )}\n\n <div\n className=\"flex items-center px-4 py-4 cursor-pointer gap-3\"\n onClick={() => setIsExpanded((prev) => !prev)}\n >\n {!isExpanded ? (\n <>\n <span className=\"paragraph-small-medium text-zinc-500 w-[100px]\">Pagamento</span>\n <div className=\"flex flex-col gap-0.5 flex-1 min-w-0\">\n <span className=\"paragraph-small-semibold text-zinc-950 truncate\">{selectedCard?.name}</span>\n <span className=\"paragraph-small-medium text-zinc-950\">\n •••• {selectedCard?.number?.replaceAll(/\\D/g, '')?.slice(-4)}\n </span>\n </div>\n {selectedCard && <CardBrandIcon brand={selectedCard.brand} />}\n <div className=\"size-8 flex items-center justify-center rounded-lg\">\n <IconChevronDown className=\"size-[18px] text-zinc-500\" />\n </div>\n </>\n ) : (\n <>\n <span className=\"paragraph-small-semibold text-zinc-950 flex-1\">\n Selecione a forma de pagamento\n </span>\n <div className=\"size-8 flex items-center justify-center rounded-lg\">\n <IconChevronDown className=\"size-[18px] text-zinc-500 rotate-180\" />\n </div>\n </>\n )}\n </div>\n\n <div\n className={`flex flex-col gap-2 px-4 overflow-hidden transition-all duration-300 ease-in-out ${\n isExpanded ? 'max-h-[500px] pb-4 opacity-100' : 'max-h-0 pb-0 opacity-0'\n }`}\n >\n {displayedCards.map((card) => (\n <CardItem\n key={card.id}\n card={card}\n isSelected={card.id.toString() === selectedCardId.toString()}\n onSelect={() => handleSelectCard(card.id.toString())}\n showMenu\n canDelete={canDeleteCards}\n onDelete={() => handleDeleteCard(card)}\n />\n ))}\n {shouldShowManageButton && onManageCards && (\n <button\n type=\"button\"\n onClick={onManageCards}\n 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\"\n >\n Gerenciar cartões\n </button>\n )}\n </div>\n </div>\n\n <button\n type=\"button\"\n onClick={handleOpenAddCardModal}\n 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\"\n >\n <IconPlus className=\"size-[18px]\" />\n <span className=\"px-1.5\">\n {isExpanded ? 'Adicionar cartão' : 'Nova forma de pagamento'}\n </span>\n </button>\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ui/data-display/PaymentInfoCard.tsx"],"sourcesContent":["'use client';\n\nimport { IconChevronDown, IconPlus } from '@tabler/icons-react';\nimport { CardBrandIcon } from './CardBrandIcons';\nimport { CardItem } from './CardItem';\nimport useIsMobile from '../../../hooks/useIsMobile';\nimport { useCards } from '../../../modules/cards/hooks/cards.hook';\nimport { useCallback, useState } from 'react';\nimport { useModalManager } from '../../../store/useModalManager';\nimport type { Card } from '../../../modules/cards/types';\n\ntype PaymentInfoCardProps = {\n email?: string;\n selectedCardId: string;\n onCardSelect: (cardId: string) => void;\n onManageCards?: () => void;\n onOpenAddCard?: () => void;\n};\n\nexport function PaymentInfoCard({\n email,\n selectedCardId,\n onCardSelect,\n onManageCards,\n onOpenAddCard,\n}: PaymentInfoCardProps) {\n const isMobile = useIsMobile();\n const { openModal } = useModalManager();\n\n const [isExpanded, setIsExpanded] = useState(false);\n\n const { data: cardsData } = useCards();\n const cards = cardsData?.data ?? [];\n\n const selectedCard = cards.find((card) => card.id.toString() === selectedCardId.toString());\n\n const canDeleteCards = cards.length > 1;\n const hasCards = cards.length > 0;\n\n const hasMoreThan3Cards = cards.length > 3;\n const shouldShowManageButton = isMobile && hasMoreThan3Cards;\n const displayedCards = shouldShowManageButton ? cards.slice(0, 3) : cards;\n\n const handleOpenAddCardModal = useCallback(() => {\n if (onOpenAddCard) {\n onOpenAddCard();\n return;\n }\n openModal('addCardModal', {\n onCardAdded: (cardId: string) => onCardSelect(cardId),\n });\n }, [openModal, onOpenAddCard, onCardSelect]);\n\n const handleDeleteCard = useCallback(\n (card: Card) => {\n if (canDeleteCards) {\n openModal('deleteCardModal', {\n cardId: card.id.toString(),\n cardLastDigits: (card.number ?? '').replaceAll(/\\D/g, '').slice(-4),\n onSuccess: () => {\n if (card.id === selectedCardId && cards.length > 1) {\n const remainingCards = cards.filter((c) => c.id !== card.id);\n if (remainingCards.length > 0) {\n onCardSelect(remainingCards[0].id.toString());\n }\n }\n },\n });\n }\n },\n [canDeleteCards, openModal, selectedCardId, cards, onCardSelect]\n );\n\n const handleSelectCard = useCallback(\n (cardId: string) => {\n onCardSelect(cardId);\n setIsExpanded(false);\n },\n [onCardSelect]\n );\n\n if (!hasCards) {\n return (\n <div className=\"border border-zinc-200 rounded-lg overflow-hidden\">\n {email && (\n <div className=\"flex items-center h-[60px] px-4 border-b border-zinc-200 gap-3\">\n <span className=\"paragraph-small-medium text-zinc-500 w-[100px]\">E-mail</span>\n <span className=\"paragraph-small-medium text-zinc-950 flex-1\">{email}</span>\n </div>\n )}\n <div className=\"flex items-center h-[60px] px-4 gap-3\">\n <span className=\"paragraph-small-medium text-zinc-500 w-[100px]\">Pagamento</span>\n <button\n type=\"button\"\n onClick={handleOpenAddCardModal}\n 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\"\n >\n <IconPlus className=\"size-[18px]\" />\n <span className=\"px-1.5\">Adicionar cartão</span>\n </button>\n </div>\n </div>\n );\n }\n\n return (\n <div className=\"flex flex-col gap-3\">\n <div className=\"border border-zinc-200 rounded-lg overflow-hidden\">\n {email && (\n <div className=\"flex items-center h-[60px] px-4 border-b border-zinc-200 gap-3\">\n <span className=\"paragraph-small-medium text-zinc-500 w-[100px]\">E-mail</span>\n <span className=\"paragraph-small-medium text-zinc-950 flex-1\">{email}</span>\n </div>\n )}\n\n <div\n className=\"flex items-center px-4 py-4 cursor-pointer gap-3\"\n onClick={() => setIsExpanded((prev) => !prev)}\n >\n {!isExpanded ? (\n <>\n <span className=\"paragraph-small-medium text-zinc-500 w-[100px]\">Pagamento</span>\n <div className=\"flex flex-col gap-0.5 flex-1 min-w-0\">\n <span className=\"paragraph-small-semibold text-zinc-950 truncate\">{selectedCard?.name}</span>\n <span className=\"paragraph-small-medium text-zinc-950\">\n •••• {selectedCard?.number?.replaceAll(/\\D/g, '')?.slice(-4)}\n </span>\n </div>\n {selectedCard && <CardBrandIcon brand={selectedCard.brand} />}\n <div className=\"size-8 flex items-center justify-center rounded-lg\">\n <IconChevronDown className=\"size-[18px] text-zinc-500\" />\n </div>\n </>\n ) : (\n <>\n <span className=\"paragraph-small-semibold text-zinc-950 flex-1\">\n Selecione a forma de pagamento\n </span>\n <div className=\"size-8 flex items-center justify-center rounded-lg\">\n <IconChevronDown className=\"size-[18px] text-zinc-500 rotate-180\" />\n </div>\n </>\n )}\n </div>\n\n <div\n className={`flex flex-col gap-2 px-4 overflow-hidden transition-all duration-300 ease-in-out ${\n isExpanded ? 'max-h-[500px] pb-4 opacity-100' : 'max-h-0 pb-0 opacity-0'\n }`}\n >\n {displayedCards.map((card) => (\n <CardItem\n key={card.id}\n card={card}\n isSelected={card.id.toString() === selectedCardId.toString()}\n onSelect={() => handleSelectCard(card.id.toString())}\n showMenu\n canDelete={canDeleteCards}\n onDelete={() => handleDeleteCard(card)}\n />\n ))}\n {shouldShowManageButton && onManageCards && (\n <button\n type=\"button\"\n onClick={onManageCards}\n 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\"\n >\n Gerenciar cartões\n </button>\n )}\n </div>\n </div>\n\n <button\n type=\"button\"\n onClick={handleOpenAddCardModal}\n 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\"\n >\n <IconPlus className=\"size-[18px]\" />\n <span className=\"px-1.5\">\n {isExpanded ? 'Adicionar cartão' : 'Nova forma de pagamento'}\n </span>\n </button>\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
package/package.json
CHANGED
|
@@ -38,7 +38,7 @@ export function CardItem({
|
|
|
38
38
|
{card.name}
|
|
39
39
|
</span>
|
|
40
40
|
<span className="paragraph-small-medium text-zinc-950">
|
|
41
|
-
•••• {card.number.replaceAll(/\D/g, '').slice(-4)}
|
|
41
|
+
•••• {(card.number ?? '').replaceAll(/\D/g, '').slice(-4)}
|
|
42
42
|
</span>
|
|
43
43
|
</div>
|
|
44
44
|
<CardBrandIcon brand={card.brand} />
|
|
@@ -56,7 +56,7 @@ export function PaymentInfoCard({
|
|
|
56
56
|
if (canDeleteCards) {
|
|
57
57
|
openModal('deleteCardModal', {
|
|
58
58
|
cardId: card.id.toString(),
|
|
59
|
-
cardLastDigits: card.number.replaceAll(/\D/g, '').slice(-4),
|
|
59
|
+
cardLastDigits: (card.number ?? '').replaceAll(/\D/g, '').slice(-4),
|
|
60
60
|
onSuccess: () => {
|
|
61
61
|
if (card.id === selectedCardId && cards.length > 1) {
|
|
62
62
|
const remainingCards = cards.filter((c) => c.id !== card.id);
|