feat(SW-245): Delete credit card

This commit is contained in:
Tobias Johansson
2024-08-13 10:20:59 +02:00
committed by Michael Zetterberg
parent 2af17ef4d8
commit e9a6499086
33 changed files with 603 additions and 208 deletions

View File

@@ -14,17 +14,6 @@
gap: var(--Spacing-x1);
}
.card {
display: grid;
align-items: center;
column-gap: var(--Spacing-x1);
grid-template-columns: auto auto auto 1fr;
justify-items: flex-end;
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half,);
border-radius: var(--Corner-radius-Small);
background-color: var(--Base-Background-Primary-Normal);
}
@media screen and (min-width: 768px) {
.container {
gap: var(--Spacing-x3);

View File

@@ -1,11 +1,9 @@
import { env } from "@/env/server"
import { serverClient } from "@/lib/trpc/server"
import { CreditCard, Delete } from "@/components/Icons"
import AddCreditCardButton from "@/components/Profile/AddCreditCardButton"
import Button from "@/components/TempDesignSystem/Button"
import CreditCardList from "@/components/Profile/CreditCardList"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"
import { setLang } from "@/i18n/serverContext"
@@ -33,38 +31,8 @@ export default async function CreditCardSlot({ params }: PageArgs<LangParams>) {
})}
</Body>
</article>
{creditCards?.length ? (
<div className={styles.cardContainer}>
{creditCards.map((card, idx) => (
<CreditCardRow
key={idx}
cardType={card.attribute.cardType}
truncatedNumber={card.attribute.truncatedNumber}
/>
))}
</div>
) : null}
<CreditCardList initialData={creditCards} />
<AddCreditCardButton />
</section>
)
}
function CreditCardRow({
truncatedNumber,
cardType,
}: {
truncatedNumber: string
cardType: string
}) {
const maskedCardNumber = `**** ${truncatedNumber.slice(12, 16)}`
return (
<div className={styles.card}>
<CreditCard color="black" />
<Body textTransform="bold">{cardType}</Body>
<Caption color="textMediumContrast">{maskedCardNumber}</Caption>
<Button variant="icon" theme="base" intent="text">
<Delete color="burgundy" />
</Button>
</div>
)
}

View File

@@ -2,46 +2,46 @@ import { NextRequest } from "next/server"
import { env } from "process"
import { Lang } from "@/constants/languages"
import { profile } from "@/constants/routes/myPages"
import { serverClient } from "@/lib/trpc/server"
import { badRequest, internalServerError } from "@/server/errors/next"
export async function GET(
request: NextRequest,
{ params }: { params: { lang: string } }
) {
try {
const lang = params.lang as Lang
const lang = params.lang as Lang
const returnUrl = new URL(`${env.PUBLIC_URL}/${profile[lang ?? Lang.en]}`)
try {
const searchParams = request.nextUrl.searchParams
const success = searchParams.get("success")
const failure = searchParams.get("failure")
const cancel = searchParams.get("cancel")
const trxId = searchParams.get("datatransTrxId")
const returnUrl = new URL(
`${env.PUBLIC_URL}/${lang ?? Lang.en}/scandic-friends/my-pages/profile`
)
if (success) {
if (!trxId) {
return badRequest("Missing datatransTrxId param")
}
if (trxId) {
const saveCardSuccess = await serverClient().user.creditCard.save({
transactionId: trxId,
})
const saveCardSuccess = await serverClient().user.saveCard({
transactionId: trxId,
})
if (saveCardSuccess) {
returnUrl.searchParams.set("success", "true")
if (saveCardSuccess) {
returnUrl.searchParams.set("success", "true")
} else {
returnUrl.searchParams.set("failure", "true")
}
} else {
returnUrl.searchParams.set("failure", "true")
returnUrl.searchParams.set("error", "true")
}
} else if (failure) {
returnUrl.searchParams.set("failure", "true")
} else if (cancel) {
returnUrl.searchParams.set("cancel", "true")
}
return Response.redirect(returnUrl, 307)
} catch (error) {
console.error(error)
return internalServerError()
console.error("Error saving credit card", error)
returnUrl.searchParams.set("error", "true")
}
return Response.redirect(returnUrl, 307)
}