in-app-messages.js

import { memo } from 'react'
import PropTypes from 'prop-types'

import renderInAppMessage from './render-in-app-message.js'
import sections from './sections.js'
import useFetchInAppMessages from './hooks'

const InAppMessages = ({ section, onMessageClose, onMessageOpen, displayMessage, campaign }) => {
  const { message, onClose, refetch } = useFetchInAppMessages(section, campaign)
  const hasUnpublishedChanges = useSelector(hasUnpublishedChangesSelector)

  // Will refetch when `hasUnpublishedChanges` changes to `true`
  useEffect(() => {
    if (hasUnpublishedChanges) {
      refetch()
    }
  }, [refetch, hasUnpublishedChanges])

  // When the app acomplish the rules to display the message, provide `displayMessage: true`
  if (!message || !displayMessage) {
    return null
  }

  const onCloseHandler = () => {
    onClose()
    // Call SharePopup
    onMessageClose && onMessageClose()
  }

  const onOpenHandler = () => {
    // Hide SharePopup
    onMessageOpen && onMessageOpen(message)
  }

  // support render for embed typeforms type of message
  return renderInAppMessage(message, onCloseHandler, onOpenHandler)
}

InAppMessages.propTypes = {
  section: PropTypes.string.isRequired,
  onMessageClose: PropTypes.func,
  onMessageOpen: PropTypes.func,
}

module.exports = {
  InAppMessages: memo(InAppMessages),
  sections,
}