Back

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * External dependencies
 */
import jetpackAnalytics from '@automattic/jetpack-analytics';
import { Button } from '@wordpress/components';
import { useCallback, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { plus } from '@wordpress/icons';
/**
 * Internal dependencies
 */
import useCreateForm from '../../hooks/use-create-form.ts';
import { FormNameModal } from '../form-name-modal';
 
type CreateFormButtonProps = {
	label?: string;
	showPatterns?: boolean;
	variant?: 'primary' | 'secondary';
	showIcon?: boolean;
	showNameModal?: boolean;
	source?: 'forms_header' | 'forms_empty_state' | 'responses_header' | 'responses_empty_state';
};
 
/**
 * Renders a button to create a new form.
 *
 * @param {object}  props               - The component props.
 * @param {string}  props.label         - The label for the button.
 * @param {boolean} props.showPatterns  - Whether to show the patterns on the editor immediately.
 * @param {string}  props.variant       - The button variant (primary or secondary).
 * @param {boolean} props.showIcon      - Whether to show the plus icon.
 * @param {boolean} props.showNameModal - Whether to show a modal asking for the form name before creating.
 * @param {string}  props.source        - The source identifier for tracking where the button was clicked.
 * @return {JSX.Element}                  The button to create a new form.
 */
export default function CreateFormButton( {
	label = __( 'Create a form', 'jetpack-forms' ),
	showPatterns = false,
	variant = 'secondary',
	showIcon = true,
	showNameModal = false,
	source,
}: CreateFormButtonProps ): JSX.Element {
	const { openNewForm } = useCreateForm();
	const [ isModalOpen, setIsModalOpen ] = useState( false );
 
	const onButtonClickHandler = useCallback( () => {
		if ( source ) {
			jetpackAnalytics.tracks.recordEvent( 'jetpack_forms_create_form_click', { source } );
		}
		if ( showNameModal ) {
			setIsModalOpen( true );
			return;
		}
		openNewForm( {
			showPatterns,
			analyticsEvent: () => {
				jetpackAnalytics.tracks.recordEvent( 'jetpack_wpa_forms_landing_page_cta_click', {
					button: 'forms',
				} );
			},
		} );
	}, [ showNameModal, openNewForm, showPatterns, source ] );
 
	const handleModalClose = useCallback( () => {
		if ( source ) {
			jetpackAnalytics.tracks.recordEvent( 'jetpack_forms_create_form_modal_close', { source } );
		}
		setIsModalOpen( false );
	}, [ source ] );
 
	const handleModalSave = useCallback(
		async ( formTitle: string ) => {
			if ( source ) {
				jetpackAnalytics.tracks.recordEvent( 'jetpack_forms_create_form_modal_create', { source } );
			}
			await openNewForm( {
				showPatterns,
				formTitle,
				analyticsEvent: () => {
					jetpackAnalytics.tracks.recordEvent( 'jetpack_wpa_forms_landing_page_cta_click', {
						button: 'forms',
					} );
				},
			} );
		},
		[ openNewForm, showPatterns, source ]
	);
 
	return (
		<>
			<Button
				size="compact"
				variant={ variant }
				onClick={ onButtonClickHandler }
				icon={ showIcon ? plus : undefined }
				className="create-form-button"
			>
				{ label }
			</Button>
			<FormNameModal
				isOpen={ isModalOpen }
				onClose={ handleModalClose }
				onSave={ handleModalSave }
				title={ __( 'Create form', 'jetpack-forms' ) }
				primaryButtonLabel={ __( 'Create', 'jetpack-forms' ) }
				secondaryButtonLabel={ __( 'Cancel', 'jetpack-forms' ) }
				placeholder={ __( 'Enter form title', 'jetpack-forms' ) }
			/>
		</>
	);
}