+ { __( 'This variant will be shown as a fallback if no audiences are matched. You can leave the content empty if you do not wish to show anything.', 'altis-experiments' ) } +
++ { __( 'You must select an audience for this variant.', 'altis-experiments' ) } +
+ ) } + + ); +}; + +export default VariantPanel; diff --git a/inc/features/blocks/personalization/components/variant-title.js b/inc/features/blocks/personalization/components/variant-title.js new file mode 100644 index 0000000..2be2af3 --- /dev/null +++ b/inc/features/blocks/personalization/components/variant-title.js @@ -0,0 +1,45 @@ +const { useSelect } = wp.data; +const { __ } = wp.i18n; + +// Component for fetching and displaying the variant title string. +const VariantTitle = ( { variant } ) => { + const audience = useSelect( select => { + return select( 'audience' ).getPost( variant.attributes.audience ); + }, [ variant.attributes.audience ] ); + + const isLoading = useSelect( select => select( 'audience' ).getIsLoading(), [] ); + + if ( variant.attributes.fallback ) { + return __( 'Fallback', 'altis-experiments' ); + } + + if ( ! variant.attributes.audience ) { + return __( 'Select audience', 'altis-experiments' ); + } + + const status = ( audience && audience.status ) || 'draft'; + const title = audience && audience.title && audience.title.rendered; + + // Audience is valid and has a title. + if ( status !== 'trash' && title ) { + return audience.title.rendered; + } + + // Audience has been deleted. + if ( status === 'trash' ) { + return __( '(deleted)', 'altis-experiments' ); + } + + // Check if audience reponse is a REST API error. + if ( audience && audience.error && audience.error.message ) { + return audience.error.message; + } + + if ( isLoading ) { + return __( 'Loading...', 'altis-experiments' ); + } + + return ''; +}; + +export default VariantTitle; diff --git a/inc/features/blocks/personalization/components/variant-toolbar.js b/inc/features/blocks/personalization/components/variant-toolbar.js new file mode 100644 index 0000000..57180a7 --- /dev/null +++ b/inc/features/blocks/personalization/components/variant-toolbar.js @@ -0,0 +1,35 @@ +import React from 'react'; + +const { IconButton } = wp.components; +const { __ } = wp.i18n; + +const VariantToolbar = props => { + const { + canRemove, + isFallback, + onCopy, + onRemove, + } = props; + + return ( +