@applicaster/zapp-react-native-utils/alertUtils/index.ts

Applicaster Zapp React Native utilities package

import { Alert } from "react-native";
import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
import { confirmationDialogStore } from "@applicaster/zapp-react-native-ui-components/Contexts/ConfirmDialogState";

// #region "Alert Dialog"

const globalAny: any = global;

const showWebAlertDialog = ({ message, completion }: AlertWebDialog) => {
  globalAny?.alert?.(message);
  completion?.();
};

const showNativeAlertDialog = ({
  title,
  message,
  okButtonText,
  completion,
}: AlertDialogType) => {
  Alert.alert(title, message, [
    {
      text: okButtonText,
      onPress: completion,
    },
  ]);
};

export const showAlertDialog = ({
  title,
  message,
  okButtonText,
  completion,
}: AlertDialogType) => {
  if (isWeb()) {
    showWebAlertDialog({ message, completion });
  } else {
    showNativeAlertDialog({
      title,
      message,
      okButtonText,
      completion,
    });
  }
};

// #endregion "Alert Dialog"

// #region "Confirmation Dialog"

const showWebDialog = ({
  message,
  confirmCompletion,
  cancelCompletion,
}: WebConfirmationDialog) => {
  const isConfirmed = globalAny?.confirm?.(message);

  if (isConfirmed) {
    confirmCompletion?.();
  } else {
    cancelCompletion?.();
  }
};

const showNativeDialog = ({
  title,
  message,
  okButtonText,
  cancelButtonText,
  confirmCompletion,
  cancelCompletion,
}: ConfirmationDialog) => {
  Alert.alert(title, message, [
    {
      text: cancelButtonText,
      onPress: cancelCompletion,
    },
    {
      text: okButtonText,
      style: "destructive",
      onPress: confirmCompletion,
    },
  ]);
};

const handleCustomDialog = (data) => {
  const {
    showDialog,
    hideDialog,
    setConfirmAction,
    setCancelAction,
    setMessages,
  } = confirmationDialogStore.getState();

  setMessages(data.messages);

  if (data?.cancelCompletion) {
    setCancelAction(() => {
      data.cancelCompletion();
      hideDialog();
    });
  }

  if (data?.confirmCompletion) {
    setConfirmAction(() => {
      data.confirmCompletion();
      hideDialog();
    });
  }

  showDialog();
};

export const showConfirmationDialog = ({
  title,
  message,
  okButtonText,
  cancelButtonText,
  confirmCompletion,
  cancelCompletion,
}: CustomConfirmationDialog): void => {
  if (isWeb()) {
    if (cancelCompletion) {
      handleCustomDialog({
        messages: {
          title,
          message,
          okButtonText,
          cancelButtonText,
        },
        confirmCompletion,
        cancelCompletion,
      });
    } else {
      showWebDialog({ message, confirmCompletion, cancelCompletion });
    }
  } else {
    showNativeDialog({
      title,
      message,
      okButtonText,
      cancelButtonText,
      confirmCompletion,
      cancelCompletion,
    });
  }
};

// #endregion "Confirmation Dialog"