/** * WordPress dependencies */ import { Button, SelectControl, TextControl } from '@safe-wordpress/components'; import { useDispatch } from '@safe-wordpress/data'; import { _x, sprintf } from '@safe-wordpress/i18n'; /** * External dependencies */ import { CodeEditor } from '@nab/components'; import { usePluginSetting } from '@nab/data'; import { createScopeRule, getLocalUrlError } from '@nab/utils'; import type { CustomPhpScopeRule, CustomUrlScopeRule, Maybe, ScopeRule, } from '@nab/types'; /** * Internal dependencies */ import './style.scss'; import { CustomUrlScope } from '../custom-url-scope'; import { store as NAB_EDITOR } from '../../../../store'; export type UrlsOrPhpScopeProps = { readonly rules: ReadonlyArray< CustomUrlScopeRule | CustomPhpScopeRule >; }; export const UrlsOrPhpScope = ( { rules, }: UrlsOrPhpScopeProps ): JSX.Element => { const { setScopeRules } = useDispatch( NAB_EDITOR ); const [ firstRule ] = rules; if ( isCustomPhpScopeRule( firstRule ) ) { return ; } return (

{ _x( 'Alternatively, you can specify where variants should be visible using PHP.', 'text', 'nelio-ab-testing' ) }

); }; // ============ // HELPER VIEWS // ============ const PhpCode = ( { rule, }: { readonly rule: CustomPhpScopeRule; } ): JSX.Element => { const { setScopeRules } = useDispatch( NAB_EDITOR ); const editRule = ( value: Partial< CustomPhpScopeRule[ 'attributes' ][ 'value' ] > ) => setScopeRules( [ { ...rule, attributes: { ...rule.attributes, value: { ...rule.attributes.value, ...value }, }, }, ] ); const { priority, snippet, errorMessage, warningMessage, previewUrl } = rule.attributes.value; const homeUrl = usePluginSetting( 'homeUrl' ); const previewUrlError = getLocalUrlError( previewUrl, homeUrl ); return (
editRule( { priority: value } ) } />
editRule( { snippet: value, errorMessage: undefined, warningMessage: undefined, validateSnippet: true, } ) } />
{ !! errorMessage && (

{ sprintf( /* translators: %s: Error message. */ 'There’s a problem with your code: %s', errorMessage ) }

) } { !! warningMessage && (

{ sprintf( /* translators: %s: Error message. */ 'There might be a problem with your code: %s', warningMessage ) }

) } editRule( { previewUrl: value } ) } /> { previewUrlError && (

{ previewUrlError }

) }
); }; // ===== // HOOKS // ===== // ======= // HELPERS // ======= const PRIORITY_OPTIONS = [ { value: 'high' as const, label: sprintf( /* translators: %s: Hook name. */ _x( 'Run on “%s”', 'command', 'nelio-ab-testing' ), 'plugins_loaded' ), }, { value: 'mid' as const, label: sprintf( /* translators: %s: Hook name. */ _x( 'Run on “%s”', 'command', 'nelio-ab-testing' ), 'parse_query' ), }, { value: 'low' as const, label: sprintf( /* translators: %s: Hook name. */ _x( 'Run on “%s”', 'command', 'nelio-ab-testing' ), 'wp' ), }, ]; const CHECKER: Record< CustomUrlScopeRule[ 'attributes' ][ 'type' ], true > = { exact: true, partial: true, 'partial-not-included': true, different: true, }; export const isCustomUrlScopeRule = ( r: Maybe< ScopeRule > ): r is CustomUrlScopeRule => ( CHECKER as Record< string, boolean > )[ r?.attributes.type ?? '' ] || false; export const isCustomPhpScopeRule = ( r: Maybe< ScopeRule > ): r is CustomPhpScopeRule => 'php-snippet' === r?.attributes.type;