import { memo, useEffect, useState } from '@wordpress/element'; import { ArrowPathIcon } from '@heroicons/react/24/outline'; import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { classNames } from '../helpers'; import { FONTS } from '../ui/other-fonts'; import { getHeadingFonts, getFontName } from '../utils/functions'; import { sendPostMessage as dispatchPostMessage } from '../utils/helpers'; import { STORE_KEY } from '../store'; const FontSelector = () => { const { stepData: { selectedTemplate, templateList, activeTypography: aiActiveTypography, }, } = useSelect( ( select ) => { const { getAIStepData } = select( STORE_KEY ); return { stepData: getAIStepData(), }; }, [] ); const { setWebsiteTypography } = useDispatch( STORE_KEY ); const selectedTemplateItem = templateList?.find( ( item ) => item?.uuid === selectedTemplate )?.design_defaults, templateResponse = selectedTemplateItem?.typography; const [ fonts, setFonts ] = useState( FONTS.map( ( font, index ) => ( { ...font, id: index } ) ) ); const headingFonts = getHeadingFonts( templateResponse ); const selectedHeadingFont = getFontName( aiActiveTypography?.[ 'headings-font-family' ] ) || '', selectedBodyFont = getFontName( aiActiveTypography?.[ 'body-font-family' ] ) || ''; /** * Add selected demo typography as default typography */ useEffect( () => { const googleFontsURL = document.getElementById( 'google-fonts-url' ); if ( templateResponse ) { const defaultFonts = []; const defaultTypography = templateResponse; defaultFonts.push( defaultTypography ); if ( ! document.getElementById( 'google-fonts-domain' ) ) { const node = document.createElement( 'link' ); node.id = 'google-fonts-domain'; node.setAttribute( 'rel', 'preconnect' ); node.setAttribute( 'href', 'https://fonts.gstatic.com' ); document.head.appendChild( node ); } // Removes existing Google fonts URL. if ( !! googleFontsURL ) { googleFontsURL.remove(); } const node = document.createElement( 'link' ); node.id = 'google-fonts-url'; node.setAttribute( 'rel', 'stylesheet' ); const fontsName = []; let bodyFont = defaultTypography[ 'body-font-family' ] || ''; let bodyFontWeight = parseInt( defaultTypography[ 'body-font-weight' ] ) || ''; if ( bodyFontWeight ) { bodyFontWeight = `:wght@${ bodyFontWeight }`; } if ( bodyFont ) { bodyFont = getFontName( bodyFont ); bodyFont = undefined !== bodyFont ? bodyFont.replace( ' ', '+' ) : bodyFont; fontsName.push( `family=${ bodyFont }${ bodyFontWeight }` ); } let headingFont = defaultTypography[ 'headings-font-family' ] || ''; let headingFontWeight = parseInt( defaultTypography[ 'headings-font-weight' ] ) || ''; if ( headingFontWeight ) { headingFontWeight = `:wght@${ headingFontWeight }`; } if ( headingFont ) { headingFont = getFontName( headingFont, bodyFont ); headingFont = undefined !== headingFont ? headingFont.replace( ' ', '+' ) : headingFont; fontsName.push( `family=${ headingFont }${ headingFontWeight }` ); } let otherFontsString = ''; if ( !! fonts ) { for ( const font of fonts ) { const fontHeading = getFontName( font[ 'headings-font-family' ] ).replaceAll( ' ', '+' ); const fontHeadingWeight = font[ 'headings-font-weight' ]; const fontBody = getFontName( font[ 'body-font-family' ] ).replaceAll( ' ', '+' ); const fontBodyWeight = font[ 'body-font-weight' ]; otherFontsString += `&family=${ fontHeading }:wght@${ fontHeadingWeight }&family=${ fontBody }:wght@${ fontBodyWeight }`; } otherFontsString = otherFontsString.replace( /[&]{1}$/i, '' ); } // Add Google fonts URL. if ( fontsName ) { const fontUrl = `https://fonts.googleapis.com/css2?${ fontsName.join( '&' ) }${ otherFontsString }&display=swap`; node.setAttribute( 'href', fontUrl ); document.head.insertAdjacentElement( 'afterbegin', node ); } // Add default font. const allFonts = defaultFonts .map( ( defaultItem, indx ) => { const item = { ...defaultItem }; item.id = item?.id ?? `default-${ indx }`; return item; } ) .concat( fonts ); if ( ! aiActiveTypography ) { setWebsiteTypography( allFonts[ 0 ] ); } setFonts( allFonts ); } }, [] ); const sendPostMessage = ( data ) => { dispatchPostMessage( data, 'astra-starter-templates-preview' ); }; const handleChange = ( typography ) => () => { const newTypography = headingFonts ? { ...typography, ...headingFonts } : typography; sendPostMessage( { param: 'siteTypography', data: JSON.parse( JSON.stringify( newTypography ) ), } ); setWebsiteTypography( typography ); }; const handleReset = () => { const defaultTypography = fonts[ 0 ]; sendPostMessage( { param: 'siteTypography', data: JSON.parse( JSON.stringify( defaultTypography ) ), } ); setWebsiteTypography( defaultTypography ); }; return (

{ __( 'Font Pair', 'ai-builder' ) }: { ' ' } { selectedHeadingFont } & { selectedBodyFont }{ ' ' }

{ fonts.map( ( font ) => { const bodyFont = getFontName( font[ 'body-font-family' ] ) || ''; const headingFont = getFontName( font[ 'headings-font-family' ], bodyFont ) || ''; return (
A g
); } ) }
); }; export default memo( FontSelector );