feat(SW-245): Delete credit card
This commit is contained in:
committed by
Michael Zetterberg
parent
2af17ef4d8
commit
e9a6499086
@@ -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);
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user