/**
* 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;