kontenhumas-fe/config/swal.ts

import { Router } from "next/router";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";

type SweetAlertIcon = "success" | "error" | "warning" | "info" | "question";

const MySwal = withReactContent(Swal);

export function loading(): void {
  let timerInterval: NodeJS.Timeout;
  MySwal.fire({
    title: '<p class="text-lg font-bold">Loading</p>',
    allowOutsideClick: false,
    timerProgressBar: true,
    didOpen: () => {
      MySwal.showLoading();
      timerInterval = setInterval(() => {}, 100);
    },
    willClose: () => {
      clearInterval(timerInterval);
    },
  });
}

export function error(msg: string): void {
  MySwal.fire({
    title: '<p class="text-red-600 font-semibold">Gagal</p>',
    html: `<p class="text-gray-700">${msg}</p>`,
    icon: "error",
  });
}

export function success(router: Router, redirect: string): void {
  MySwal.fire({
    title: '<p class="text-green-600 font-bold">Sukses</p>',
    icon: "success",
    confirmButtonColor: "#3085d6",
    confirmButtonText: '<span class="text-white">OK</span>',
    allowOutsideClick: false,
  }).then((result) => {
    if (result.isConfirmed) {
      router.push(redirect);
    }
  });
}

export function successCallback(title?: string): Promise<boolean> {
  return MySwal.fire({
    title: `<p class="text-green-600 font-bold">${title || "Sukses"}</p>`,
    icon: "success",
    confirmButtonColor: "#3085d6",
    confirmButtonText: '<span class="text-white">OK</span>',
  }).then((result) => result.isConfirmed);
}

export function successCallbackContent(title?: string): Promise<boolean> {
  return MySwal.fire({
    title: `<p class="text-green-600 font-bold">${title || "Konten Telah Berhasil Disimpan"}</p>`,
    icon: "success",
    confirmButtonColor: "#3085d6",
    confirmButtonText: '<span class="text-white">OK</span>',
  }).then((result) => result.isConfirmed);
}

export function close(): void {
  MySwal.close();
}

export function welcome(name: string): Promise<boolean> {
  let timerInterval: NodeJS.Timeout;
  timerInterval = setInterval(() => {}, 100);
  return MySwal.fire({
    title: `<p class="text-green-600 font-bold">Selamat Datang ${name} \nDi Mediahub</p>`,
    icon: "success",
    confirmButtonColor: "#3085d6",
    confirmButtonText: '<span class="text-white">OK</span>',
    timer: 2000,
    timerProgressBar: false,
    willClose: () => {
      clearInterval(timerInterval);
    },
  }).then((result) => result.isConfirmed);
}

export function welcomeGuest(name: string): Promise<boolean> {
  let timerInterval: NodeJS.Timeout;
  timerInterval = setInterval(() => {}, 100);
  return MySwal.fire({
    title: `<p class="text-green-600 font-bold">Selamat Datang ${name} \nDi Mediahub</p>`,
    icon: "success",
    confirmButtonColor: "#3085d6",
    confirmButtonText: '<span class="text-white">OK</span>',
    timer: 2000,
    timerProgressBar: false,
    willClose: () => {
      clearInterval(timerInterval);
    },
  }).then((result) => result.isConfirmed);
}

export function registerConfirm(): void {
  MySwal.fire({
    title: '<p class="text-green-600 font-bold">Selamat Anda Telah Terdaftar</p>',
    html: '<p class="text-gray-700">Mohon Menunggu Email Konfirmasi Untuk Bisa Melakukan Login</p>',
    icon: "success",
    confirmButtonColor: "#3085d6",
    confirmButtonText: '<span class="text-white">OK</span>',
  }).then((result) => {
    if (result.isConfirmed) {
      window.location.href = "/auth";
    }
  });
}

export function warning(text: string, redirect?: string): Promise<boolean> {
  return MySwal.fire({
    title: `<p class="text-yellow-600 font-bold">${text}</p>`,
    icon: "warning",
    confirmButtonColor: "#3085d6",
    confirmButtonText: '<span class="text-white">OK</span>',
  }).then((result) => {
    if (redirect && result.isConfirmed) {
      window.location.href = redirect;
    }
    return result.isConfirmed;
  });
}