hello-theme/modules/admin-home/assets/js/components/paper/welcome.js

import Typography from '@elementor/ui/Typography';
import { __ } from '@wordpress/i18n';
import { useAdminContext } from '../../hooks/use-admin-context';
import Stack from '@elementor/ui/Stack';
import Button from '@elementor/ui/Button';
import { BaseAdminPaper } from './base-admin-paper';
import { useEffect, useRef, useState } from 'react';
import Box from '@elementor/ui/Box';
import CircularProgress from '@elementor/ui/CircularProgress';

export const Welcome = ( { sx, dismissable = false } ) => {
	const { adminSettings: {
		config: { nonceInstall = '', disclaimer = '', slug = '' } = {},
		welcome: { title = '', text = '', buttons = [], image: { src = '', alt = '' } = {} } = {},
	} = {},
	} = useAdminContext();

	const [ isLoading, setIsLoading ] = useState( false );
	const [ visible, setVisible ] = useState( true );
	const [ imageWidth, setImageWidth ] = useState( 578 );
	const parentRef = useRef( null );

	useEffect( () => {
		const handleResize = () => {
			if ( parentRef.current ) {
				const parentWidth = parentRef.current.offsetWidth;
				setImageWidth( parentWidth < 800 ? 400 : 578 );
			}
		};

		handleResize();
		window.addEventListener( 'resize', handleResize );

		return () => {
			window.removeEventListener( 'resize', handleResize );
		};
	}, [] );

	if ( ! title || ! visible ) {
		return null;
	}

	return (
		<BaseAdminPaper sx={ sx }>
			{ dismissable && (
				<Box component="button" className="notice-dismiss" onClick={ async () => {
					try {
						await wp.ajax.post( 'ehe_dismiss_theme_notice', { nonce: window.ehe_cb.nonce } );
						setVisible( false );
					} catch ( e ) {
					}
				} }>
					<Box component="span" className="screen-reader-text">{ __( 'Dismiss this notice.', 'hello-elementor' ) }</Box>
				</Box>
			) }
			<Stack ref={ parentRef } direction={ { xs: 'column', md: 'row' } } alignItems="center" justifyContent="space-between" sx={ { width: '100%', gap: 9 } }>
				<Stack direction="column" sx={ { flex: 1 } }>
					<Typography variant="h6" sx={ { color: 'text.primary', fontWeight: 500 } }>{ title }</Typography>
					<Typography variant="body2" sx={ { mb: 3, color: 'text.secondary' } }>
						{ text }
					</Typography>
					<Stack gap={ 1 } direction="row" sx={ { mb: 2 } }>
						{
					buttons.map( ( { linkText, link, variant, color, target = '' } ) => {
						const onClick = async () => {
							if ( 'install' === link ) {
								try {
									const data = {
										_wpnonce: nonceInstall,
										slug,
									};

									setIsLoading( true );

									const response = await wp.ajax.post( 'ehe_install_elementor', data );

									if ( response.activateUrl ) {
										window.location.href = response.activateUrl;
									} else {
										throw new Error();
									}
								} catch ( error ) {
									// eslint-disable-next-line no-alert
									alert( __( 'Currently the plugin isn’t available. Please try again later. You can also contact our support at: wordpress.org/plugins/hello-plus', 'hello-elementor' ) );
								} finally {
									setIsLoading( false );
								}
							} else {
								window.open( link, target || '_self' );
							}
						};

						return (
							<Button key={ linkText } onClick={ onClick } variant={ variant } color={ color } >
								{ isLoading
									? (
										<>
											<CircularProgress size={ 12 } sx={ { verticalAlign: 'middle', display: 'inline-flex' } } />
											{ __( 'Installing Elementor', 'hello-elementor' ) }
										</>
									)
								: linkText }
							</Button>
						);
					} )
				}
					</Stack>
					{ disclaimer && ( <Typography variant="body2" sx={ { color: 'text.tertiary' } }>
						{ disclaimer }
					</Typography> ) }
				</Stack>
				{ src && ( <Box
					component="img"
					src={ src }
					alt={ alt }
					sx={ {
						width: { sm: 350, md: 450, lg: imageWidth },
						aspectRatio: '289/98',
						flex: 1,
					} }
				/> ) }
			</Stack>
		</BaseAdminPaper>
	);
};