/**
* WordPress dependencies
*/
import { useSelect } from '@safe-wordpress/data';
import { createInterpolateElement } from '@safe-wordpress/element';
import { sprintf, _x } from '@safe-wordpress/i18n';
/**
* External dependencies
*/
import { ConversionActionScopeView } from '@nab/components';
import { store as NAB_DATA } from '@nab/data';
import type {
CAViewProps,
ConversionActionScope,
EntityKindName,
} from '@nab/types';
/**
* Internal dependencies
*/
import { isNamedForm } from './helpers';
import type { Attributes } from './types';
export const View = ( props: CAViewProps< Attributes > ): JSX.Element => (
<>
>
);
const ActualView = ( {
attributes,
scope,
}: CAViewProps< Attributes > ): JSX.Element => {
const formTitle = useFormTitle( attributes );
const formPluginName = useFormPluginName( attributes );
if ( ! formTitle ) {
return <>{ getLabelForUnknownForm( scope, formPluginName ) }>;
}
return (
<>
{ createInterpolateElement(
sprintf(
getLabelForKnownForm( scope, formPluginName ),
`${ formTitle }`
),
{ strong: }
) }
>
);
};
// =====
// HOOKS
// =====
const useFormTitle = ( attributes: Attributes ): string =>
useSelect(
( select ) => {
select( NAB_DATA );
const name = isNamedForm( attributes )
? attributes.formName
: select( NAB_DATA ).getEntityRecord(
attributes.formType,
attributes.formId
)?.title;
return name || '';
},
[ attributes ]
);
const FORM_PLUGIN_NAMES: Record< EntityKindName, string > = {
nelio_form: 'Nelio Forms',
wpcf7_contact_form: 'Contact Forms 7',
nab_elementor_form: 'Elementor',
nab_hubspot_form: 'HubSpot',
nab_gravity_form: 'Gravity Forms',
nab_ninja_form: 'Ninja Forms',
nab_formidable_form: 'Formidable Forms',
sureforms_form: 'SureForms',
wpforms: 'WPForms',
'jet-form-builder': 'JetFormBuilder',
'metform-form': 'MetForm',
'mw-wp-form': 'MW WP Form',
nab_forminator_form: 'Forminator Forms',
nab_fluent_form: 'Fluent Forms',
nab_formcraft_form: 'FormCraft',
};
const useFormPluginName = ( { formType }: Attributes ): string =>
useSelect(
( select ): string => {
const multi =
select( NAB_DATA )
.getKindEntities()
.filter( ( e ) => e.kind === 'form' ).length > 1;
return multi ? FORM_PLUGIN_NAMES[ formType ] ?? '' : '';
},
[ formType ]
);
// =======
// HELPERS
// =======
function getLabelForKnownForm(
scope: ConversionActionScope,
plugin: string
): string {
switch ( scope.type ) {
case 'all-pages':
return plugin
? sprintf(
/* translators: %1$s: Form name. %2$s: Form plugin name. */
_x(
'A visitor successfully submits the %1$s form (%2$s) on any page.',
'text',
'nelio-ab-testing'
),
'%s',
plugin
)
: /* translators: %s: Form name. */
_x(
'A visitor successfully submits the %s form on any page.',
'text',
'nelio-ab-testing'
);
case 'test-scope':
return plugin
? sprintf(
/* translators: %1$s: Form name. %2$s: Form plugin name. */
_x(
'A visitor successfully submits the %1$s form (%2$s) on a tested page.',
'text',
'nelio-ab-testing'
),
'%s',
plugin
)
: /* translators: %s: Form name. */
_x(
'A visitor successfully submits the %s form on a tested page.',
'text',
'nelio-ab-testing'
);
case 'urls':
case 'post-ids':
case 'php-function':
return plugin
? sprintf(
/* translators: %1$s: Form name. %2$s: Form plugin name. */
_x(
'A visitor successfully submits the %1$s form (%2$s) on certain pages.',
'text',
'nelio-ab-testing'
),
'%s',
plugin
)
: /* translators: %s: Form name. */
_x(
'A visitor successfully submits the %s form on certain pages.',
'text',
'nelio-ab-testing'
);
}
}
function getLabelForUnknownForm(
scope: ConversionActionScope,
plugin: string
): string {
switch ( scope.type ) {
case 'all-pages':
return plugin
? sprintf(
/* translators: %s: Form plugin name. */
_x(
'A visitor successfully submits a specific form (%s) on any page.',
'text',
'nelio-ab-testing'
),
plugin
)
: _x(
'A visitor successfully submits a specific form on any page.',
'text',
'nelio-ab-testing'
);
case 'test-scope':
return plugin
? sprintf(
/* translators: %s: Form plugin name. */
_x(
'A visitor successfully submits a specific form (%s) on a tested page.',
'text',
'nelio-ab-testing'
),
plugin
)
: _x(
'A visitor successfully submits a specific form on a tested page.',
'text',
'nelio-ab-testing'
);
case 'urls':
case 'post-ids':
case 'php-function':
return plugin
? sprintf(
/* translators: %s: Form plugin name. */
_x(
'A visitor successfully submits a specific form (%s) on certain pages.',
'text',
'nelio-ab-testing'
),
plugin
)
: _x(
'A visitor successfully submits a specific form on certain pages.',
'text',
'nelio-ab-testing'
);
}
}