How to use the @shopgate/pwa-common/actions/modal/showModal function in @shopgate/pwa-common

}

  if (status === STATUS_GRANTED) {
    resolve(true);
    return;
  }

  // The user permanently denied the permissions before.
  if (status === STATUS_DENIED) {
    if (!useSettingsModal) {
      resolve(false);
      return;
    }

    // Present a modal that describes the situation, and allows the user to enter the app settings.
    const openSettings = await dispatch(showModal({
      title: modalOptions.title || null,
      message: modalOptions.message,
      confirm: modalOptions.confirm,
      dismiss: modalOptions.dismiss,
      params: modalOptions.params,
    }));

    // The user just closed the modal.
    if (!openSettings) {
      resolve(false);
      return;
    }

    /**
     * Handler for the app event.
     */

const pipelineErrorDialog = ({ name, input, error }) => (dispatch) => {
  dispatch(showModal({
    // Show an 'OK' instead of a 'dismiss' button.
    dismiss: 'modal.ok',
    // Do not show the confirm button.
    confirm: null,
    // Give the template a clue about how to show this modal.
    type: MODAL_PIPELINE_ERROR,
    // Set the message param if users shall see the error message
    message: getErrorMessage(name, error),
    params: {
      // Expose the error details as params.
      pipelineName: name,
      request: input,
      errorCode: error.code,
      message: error.message,
    },
  }));

/**
     * @type {PipelineErrorElement[]} errors
     */
    const { errors = [] } = action;

    if (Array.isArray(errors) && errors.length) {
      // Supports only one error, because none of the pipelines is ever called with multiple items.
      // Multiple errors would cause the this to overlay multiple modals on top of each other.
      const { message, handled } = errors[0];

      // Some errors are already handled automatically before
      if (handled) {
        return;
      }

      dispatch(showModal({
        confirm: 'modal.ok',
        dismiss: null,
        title: 'modal.title_error',
        message,
        type: MODAL_PIPELINE_ERROR,
        params: {
          ...errors[0],
        },
      }));
    }
  });

  showVariantModal: productId => dispatch(showModal({
    title: null,
    type: MODAL_VARIANT_SELECT,
    message: 'favorites.modal.message',
    confirm: 'favorites.modal.confirm',
    dismiss: 'common.cancel',
    params: {
      productId,
    },
  })),
});

subscribe(successfullyAddedCouponsToCart$, ({ dispatch }) => {
    dispatch(showModal({
      dismiss: null,
      confirm: 'modal.ok',
      title: 'cart.coupon_was_added',
    }));
  });
}

  showVariantModal: productId => dispatch(showModal({
    title: null,
    type: MODAL_VARIANT_SELECT,
    message: 'favorites.modal.message',
    confirm: 'favorites.modal.confirm',
    dismiss: 'common.cancel',
    params: {
      productId,
    },
  })),
});

.catch((error) => {
      if (error.code === EEXIST) {
        dispatch(showModal({
          confirm: null,
          title: 'modal.title_error',
          message: 'modal.body_error',
        }));
      }
      logger.error(error);
      dispatch(errorSubmitReview(newReview.productId));
    });

subscribe(successfullyAddedCouponsToCart$, ({ dispatch }) => {
    dispatch(showModal({
      dismiss: null,
      confirm: 'modal.ok',
      title: 'cart.coupon_was_added',
    }));
  });
}

  showForgotPasswordPopup: () => dispatch(showModal({
    confirm: 'modal.ok',
    dismiss: null,
    title: null,
    message: 'login.forgot_password_popup',
  })),
});

subscribe(deleteAccountRequested$, async ({ dispatch }) => {
    const confirmed = await dispatch(showModal({
      message: 'user.delete_account_confirm',
      title: null,
    }));
    if (confirmed) {
      deleteAccountAction()(dispatch);
    }
  });