diff --git a/assets/img/bf-bg.jpg b/assets/img/bf-bg.jpg new file mode 100644 index 00000000..6f273beb Binary files /dev/null and b/assets/img/bf-bg.jpg differ diff --git a/assets/src/dashboard/parts/components/BlackFridayBanner.js b/assets/src/dashboard/parts/components/BlackFridayBanner.js new file mode 100644 index 00000000..abd7d342 --- /dev/null +++ b/assets/src/dashboard/parts/components/BlackFridayBanner.js @@ -0,0 +1,62 @@ +import { Button } from '@wordpress/components'; +import { close } from '@wordpress/icons'; +import { useEffect, useState } from '@wordpress/element'; +import classNames from 'classnames'; +import { dismissNotice } from '../../utils/api'; + +export default () => { + const { urgency, title, subtitle, cta_link, cta_text, dismiss_key } = optimoleDashboardApp.bf_notices.banner; + const [ isVisible, setIsVisible ] = useState( true ); + const [ shouldRender, setShouldRender ] = useState( true ); + + const onClose = () => { + dismissNotice( dismiss_key, () => { + setIsVisible( false ); + }); + }; + + useEffect( () => { + if ( ! isVisible ) { + const timer = setTimeout( () => { + setShouldRender( false ); + }, 300 ); + return () => clearTimeout( timer ); + } + }, [ isVisible ]); + + const wrapClasses = classNames( + 'relative flex flex-col items-center text-center xl:flex-row gap-5 justify-between xl:items-center bg-black text-white p-5 py-4 pr-7 box-border rounded-lg mt-5 bg-no-repeat transition-all duration-300', + { + 'opacity-0': ! isVisible, + 'opacity-100': isVisible + } + ); + + if ( ! shouldRender ) { + return null; + } + + return ( +
+ + {optimoleDashboardApp?.bf_notices?.sidebar && ( + + + + + )} + +
+

{ optimoleDashboardApp.strings.upgrade.title_long }

+ + + +
) : (