/** * 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' ); } }