1  // SPDX-FileCopyrightText: 2024 Mass Labs
 2  //
 3  // SPDX-License-Identifier: GPL-3.0-or-later
 4  import { Link } from "@tanstack/react-router";
 5  
 6  interface SuccessToastProps {
 7    message: string | null;
 8    onClose: () => void;
 9    cta?: { copy: string; href: string };
10  }
11  
12  export default function SuccessToast(
13    { message, onClose, cta }: SuccessToastProps,
14  ) {
15    if (!message) return null;
16  
17    return (
18      <div
19        className="px-4 py-2 bg-success-green text-white font-thin rounded-lg flex items-center"
20        data-testid="success-toast"
21      >
22        <p>{message}</p>
23        {cta
24          ? (
25            <Link
26              style={{ color: "white" }}
27              className="ml-auto flex gap-2"
28              to={cta.href}
29              search={(prev: Record<string, string>) => ({
30                shopId: prev.shopId,
31              })}
32            >
33              <p>{cta.copy}</p>
34              <img
35                src="/icons/white-arrow.svg"
36                alt="white-arrow"
37                width={7}
38                height={12}
39              />
40            </Link>
41          )
42          : (
43            <button
44              onClick={() => onClose()}
45              className="ml-auto"
46              style={{ backgroundColor: "transparent", padding: 0 }}
47              type="button"
48            >
49              <div className="bg-white rounded-full w-4 h-4 flex justify-center items-center">
50                <img
51                  src="/icons/close-icon.svg"
52                  alt="close-icon"
53                  width={8}
54                  height={8}
55                  className="w-2 h-2"
56                />
57              </div>
58            </button>
59          )}
60      </div>
61    );
62  }