FPSMS-frontend/src/components/Swal/CustomAlerts.tsx

import Swal, { SweetAlertOptions } from "sweetalert2";
import "./sweetalert2.css";
import { TFunction } from "i18next";

export type SweetAlertTitle = string | HTMLElement | JQuery | undefined;
export type SweetAlertHtml = string | HTMLElement | JQuery | undefined;
export type SweetAlertConfirmButtonText = string | undefined;

type Transaction = TFunction<["translation", ...string[]], undefined>;

export const msg = (title: SweetAlertTitle) => {
  Swal.mixin({
    toast: true,
    position: "bottom-end",
    showConfirmButton: false,
    timer: 3000,
    timerProgressBar: true,
    didOpen: (toast) => {
      toast.onmouseenter = Swal.stopTimer;
      toast.onmouseleave = Swal.resumeTimer;
    },
    customClass: {
      container: 'swal2-custom-zindex',
    },
  }).fire({
    icon: "success",
    title: title,
  });
};

export const msgError = (title: SweetAlertTitle) => {
  Swal.mixin({
    toast: true,
    position: "bottom-end",
    showConfirmButton: false,
    timer: 3000,
    timerProgressBar: true,
    didOpen: (toast) => {
      toast.onmouseenter = Swal.stopTimer;
      toast.onmouseleave = Swal.resumeTimer;
    },
    customClass: {
      container: 'swal2-custom-zindex',
    },
  }).fire({
    icon: "error",
    title: title,
  });
};

export const popup = (options: SweetAlertOptions) => {
  Swal.fire(options);
};

export const successDialog = async (
  title: SweetAlertTitle,
  t: Transaction,
  confirmAction?: () => void,
) => {
  const result = await Swal.fire({
    icon: "success",
    title: title,
    confirmButtonText: t("Confirm"),
    showConfirmButton: true,
  });

  if (result.isConfirmed && confirmAction) {
    confirmAction();
  }
};

export const successDialogWithContent = (
  title: SweetAlertTitle,
  html: SweetAlertHtml,
  t: Transaction,
) => {
  return Swal.fire({
    icon: "success",
    title: title,
    html: html,
    confirmButtonText: t("Confirm"),
    showConfirmButton: true,
  });
};

export const errorDialog = (title: SweetAlertTitle, t: Transaction) => {
  return Swal.fire({
    icon: "error",
    title: title,
    confirmButtonText: t("Confirm"),
    showConfirmButton: true,
  });
};

export const errorDialogWithContent = (
  title: SweetAlertTitle,
  html: SweetAlertHtml,
  t: Transaction,
) => {
  return Swal.fire({
    icon: "error",
    title: title,
    html: html,
    confirmButtonText: t("Confirm"),
    showConfirmButton: true,
  });
};

export const warningDialog = (title: SweetAlertTitle, t: Transaction) => {
  return Swal.fire({
    icon: "warning",
    title: title,
    confirmButtonText: t("Confirm"),
    showConfirmButton: true,
  });
};

export const submitDialog = async (
  confirmAction: () => void,
  t: Transaction,
  { ...props } = {
    title: t("Do you want to submit?") as SweetAlertTitle,
    confirmButtonText: t("Submit") as SweetAlertConfirmButtonText,
  },
) => {
  // console.log(props)
  // const { t } = useTranslation("common")
  const result = await Swal.fire({
    icon: "question",
    title: props?.title,
    cancelButtonText: t("Cancel"),
    confirmButtonText: props?.confirmButtonText,
    showCancelButton: true,
    showConfirmButton: true,
    customClass: {
      container: "swal-container-class", // Add a custom class to the Swal.fire container element
      popup: "swal-popup-class", // Add a custom class to the Swal.fire popup element
    },
  });
  if (result.isConfirmed) {
    confirmAction();
  }
};

export const submitDialogWithWarning = async (
  confirmAction: () => void,
  t: Transaction,
  { ...props } = {
    title: t("Do you want to submit?") as SweetAlertTitle,
    html: t("Warning!") as SweetAlertHtml,
    confirmButtonText: t("Submit") as SweetAlertConfirmButtonText,
    // cancelButtonText: t("Cancel") as SweetAlertConfirmButtonText,
  },
) => {
  // console.log(props)
  // const { t } = useTranslation("common")
  const result = await Swal.fire({
    icon: "warning",
    title: props?.title,
    html: props?.html,
    cancelButtonText: t("Cancel"),
    confirmButtonText: props?.confirmButtonText,
    showCancelButton: true,
    showConfirmButton: true,
    customClass: {
      container: "swal-container-class", // Add a custom class to the Swal.fire container element
      popup: "swal-popup-class", // Add a custom class to the Swal.fire popup element
    },
  });
  if (result.isConfirmed) {
    confirmAction();
  }
};

export const deleteDialog = async (
  confirmAction: () => void,
  t: Transaction,
) => {
  // const { t } = useTranslation("common")
  const result = await Swal.fire({
    icon: "question",
    title: t("Do you want to delete?"),
    cancelButtonText: t("Cancel"),
    confirmButtonText: t("Delete"),
    showCancelButton: true,
    showConfirmButton: true,
    customClass: {
      container: "swal-container-class", // Add a custom class to the Swal.fire container element
      popup: "swal-popup-class", // Add a custom class to the Swal.fire popup element
    },
  });
  if (result.isConfirmed) {
    confirmAction();
  }
};