diff --git a/modules/ppcp-axo-block/resources/js/hooks/useDeleteEmptyKeys.js b/modules/ppcp-axo-block/resources/js/hooks/useDeleteEmptyKeys.js new file mode 100644 index 000000000..04043e0a9 --- /dev/null +++ b/modules/ppcp-axo-block/resources/js/hooks/useDeleteEmptyKeys.js @@ -0,0 +1,27 @@ +import { useCallback } from '@wordpress/element'; + +const isObject = ( value ) => typeof value === 'object' && value !== null; +const isNonEmptyString = ( value ) => value !== ''; + +const removeEmptyValues = ( obj ) => { + if ( ! isObject( obj ) ) { + return obj; + } + + return Object.fromEntries( + Object.entries( obj ) + .map( ( [ key, value ] ) => [ + key, + isObject( value ) ? removeEmptyValues( value ) : value, + ] ) + .filter( ( [ _, value ] ) => + isObject( value ) + ? Object.keys( value ).length > 0 + : isNonEmptyString( value ) + ) + ); +}; + +export const useDeleteEmptyKeys = () => { + return useCallback( removeEmptyValues, [] ); +}; diff --git a/modules/ppcp-axo-block/resources/js/hooks/useFastlaneSdk.js b/modules/ppcp-axo-block/resources/js/hooks/useFastlaneSdk.js index dd62939d1..1ac40e711 100644 --- a/modules/ppcp-axo-block/resources/js/hooks/useFastlaneSdk.js +++ b/modules/ppcp-axo-block/resources/js/hooks/useFastlaneSdk.js @@ -1,11 +1,17 @@ -import { useEffect, useRef, useState } from '@wordpress/element'; +import { useEffect, useRef, useState, useMemo } from '@wordpress/element'; import Fastlane from '../../../../ppcp-axo/resources/js/Connection/Fastlane'; import { log } from '../../../../ppcp-axo/resources/js/Helper/Debug'; +import { useDeleteEmptyKeys } from './useDeleteEmptyKeys'; const useFastlaneSdk = ( axoConfig, ppcpConfig ) => { const [ fastlaneSdk, setFastlaneSdk ] = useState( null ); const initializingRef = useRef( false ); const configRef = useRef( { axoConfig, ppcpConfig } ); + const deleteEmptyKeys = useDeleteEmptyKeys(); + + const styleOptions = useMemo( () => { + return deleteEmptyKeys( configRef.current.axoConfig.style_options ); + }, [ deleteEmptyKeys ] ); useEffect( () => { const initFastlane = async () => { @@ -25,7 +31,7 @@ const useFastlaneSdk = ( axoConfig, ppcpConfig ) => { await fastlane.connect( { locale: configRef.current.ppcpConfig.locale, - styles: configRef.current.ppcpConfig.styles, + styles: styleOptions, } ); fastlane.setLocale( 'en_us' ); @@ -39,7 +45,7 @@ const useFastlaneSdk = ( axoConfig, ppcpConfig ) => { }; initFastlane(); - }, [] ); + }, [ fastlaneSdk, styleOptions ] ); useEffect( () => { configRef.current = { axoConfig, ppcpConfig };