84f5e74f00
Feat/SW-104 add card * feat: add api endpoints for adding and removing credit card * feat(SW-104): Added Sonner toast lib * feat(SW-104): Add route handlers for add card flow * feat(SW-104): Added link to route handler and trigger toast when query params from callback is set * feat(SW-104): Added translations for add card success toast * feat(SW-104): Refactored to use client request for initiate save card * fix(SW-104): Return proper status codes when initiating save card fails * fix(SW-104): remove delete card endpoint because it was added in SW-245 * fix(SW-104): remove console.log * fix(SW-104): Use api.post for save card request * fix(SW-104): move function declaration above export * fix(SW-104): handle response of save card and use Lang enum * fix(SW-104): added comment for why setTimeout is needed for toast and also removed lang prop * fix(SW-104): added type for AddCreditCardButton props * feat: add toasts * fix(SW-104): start using toasts from ToastHandler and fix problem with duplicate toasts * fix(SW-104): remove unnecessary wrapping div Approved-by: Michael Zetterberg
97 lines
2.2 KiB
TypeScript
97 lines
2.2 KiB
TypeScript
import { ExternalToast, toast as sonnerToast, Toaster } from "sonner"
|
|
|
|
import {
|
|
CheckCircleIcon,
|
|
CloseLarge,
|
|
CrossCircle,
|
|
InfoCircleIcon,
|
|
WarningTriangle,
|
|
} from "@/components/Icons"
|
|
|
|
import Button from "../Button"
|
|
import Body from "../Text/Body"
|
|
import { ToastsProps } from "./toasts"
|
|
import { toastVariants } from "./variants"
|
|
|
|
import styles from "./toasts.module.css"
|
|
|
|
export function ToastHandler() {
|
|
return <Toaster />
|
|
}
|
|
|
|
function getIcon(variant: ToastsProps["variant"]) {
|
|
switch (variant) {
|
|
case "error":
|
|
return CrossCircle
|
|
case "info":
|
|
return InfoCircleIcon
|
|
case "success":
|
|
return CheckCircleIcon
|
|
case "warning":
|
|
return WarningTriangle
|
|
}
|
|
}
|
|
|
|
export function Toast({ message, onClose, variant }: ToastsProps) {
|
|
const className = toastVariants({ variant })
|
|
const Icon = getIcon(variant)
|
|
return (
|
|
<div className={className}>
|
|
<div className={styles.iconContainer}>
|
|
{Icon && <Icon color="white" height={24} width={24} />}
|
|
</div>
|
|
<Body className={styles.message}>{message}</Body>
|
|
<Button onClick={onClose} variant="icon" intent="text">
|
|
<CloseLarge />
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export const toast = {
|
|
success: (message: string, options?: ExternalToast) =>
|
|
sonnerToast.custom(
|
|
(t) => (
|
|
<Toast
|
|
variant="success"
|
|
message={message}
|
|
onClose={() => sonnerToast.dismiss(t)}
|
|
/>
|
|
),
|
|
options
|
|
),
|
|
info: (message: string, options?: ExternalToast) =>
|
|
sonnerToast.custom(
|
|
(t) => (
|
|
<Toast
|
|
variant="info"
|
|
message={message}
|
|
onClose={() => sonnerToast.dismiss(t)}
|
|
/>
|
|
),
|
|
options
|
|
),
|
|
error: (message: string, options?: ExternalToast) =>
|
|
sonnerToast.custom(
|
|
(t) => (
|
|
<Toast
|
|
variant="error"
|
|
message={message}
|
|
onClose={() => sonnerToast.dismiss(t)}
|
|
/>
|
|
),
|
|
options
|
|
),
|
|
warning: (message: string, options?: ExternalToast) =>
|
|
sonnerToast.custom(
|
|
(t) => (
|
|
<Toast
|
|
variant="warning"
|
|
message={message}
|
|
onClose={() => sonnerToast.dismiss(t)}
|
|
/>
|
|
),
|
|
options
|
|
),
|
|
}
|