import React, { useEffect, useState } from 'react' import useGlobalConfig from '../Contexts/useGlobalConfig' import styles from './TemplateKitBanner.module.scss' import ActivateButton from '../Buttons/ActivateButton' import DismissBannerButton, { isBannerAlreadyDismissed } from '../Buttons/DismissBanner' import ExternalLinkButton from '../Buttons/ExternalLinkButton' import MainHeading from '../Titles/MainHeading' import ButtonWrapper from '../Buttons/ButtonWrapper' const TemplateKitBanner = () => { const bannerId = 'templateKitBanner' const { subscriptionStatus } = useGlobalConfig() // Figure out if banner is already dismissed const alreadyDismissed = isBannerAlreadyDismissed(bannerId) // Figure out if we should show the banner or not const shouldWeShowTheBanner = !alreadyDismissed && subscriptionStatus !== 'paid' // Use local state here to decide if banner should display or not const [showBanner, setShowBanner] = useState(shouldWeShowTheBanner) useEffect(() => { // If our subscription status is updated from elsewhere, we need to close this modal. if (subscriptionStatus === 'paid') { setShowBanner(false) } }, [subscriptionStatus]) if (!showBanner) { // If our banner is dismissed we return nothing for this component return null } return (
In addition to our Free Template Kits, we now have hundreds of Premium Template Kits that are available to paid, Envato Elements Subscribers!
{ // Once our dismiss action has completed we update our local state to hide our banner. setShowBanner(false) }} />
) } export default TemplateKitBanner