Skip to content

Commit 6e8bf39

Browse files
vianaswvianasw
authored
Forms: merge email and push notifications settings panel (#45548)
* Form notification settings copy changes * Merge email and push notification settings I merged the forms email and push notification settings panels. I've added an external link to the notifications documentation and adjusted the copy and some margins. * changelog * Refactor feature flag check I've moved the push notifications flag check to the panel subsection so that it doesn't hide the email notifications when the flag is disabled. * Support notifications link rendering logic Show Jetpack support docs for self-hosted sites and WordPress.com support docs for WordPress.com sites. * Update tests
1 parent bccd421 commit 6e8bf39

File tree

6 files changed

+171
-86
lines changed

6 files changed

+171
-86
lines changed

‎projects/packages/forms/changelog/update-form-notifications-ui‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
Significance: minor
2+
Type: changed
3+
4+
Forms: merged email and push notification settings panels.

‎projects/packages/forms/src/blocks/contact-form/components/jetpack-email-connection-settings.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { TextControl, ToggleControl } from '@wordpress/components';
22
import { useState } from '@wordpress/element';
33
import { __, sprintf } from '@wordpress/i18n';
44
import { validate as emailValidatorValidate } from 'email-validator';
5-
import InspectorHint from '../../shared/components/inspector-hint';
65
import HelpMessage from '../components/help-message';
76

87
const JetpackEmailConnectionSettings = ( {
@@ -91,14 +90,12 @@ const JetpackEmailConnectionSettings = ( {
9190
<ToggleControl
9291
label={ __( 'Send responses to email', 'jetpack-forms' ) }
9392
checked={ emailNotifications }
93+
help={ __( 'Get incoming form responses sent to your email inbox.', 'jetpack-forms' ) }
9494
onChange={ value => setAttributes( { emailNotifications: value } ) }
9595
__nextHasNoMarginBottom={ true }
9696
/>
9797
{ emailNotifications && (
9898
<>
99-
<InspectorHint>
100-
{ __( 'Get incoming form responses sent to your email inbox:', 'jetpack-forms' ) }
101-
</InspectorHint>
10299
<TextControl
103100
aria-describedby={ `contact-form-${ instanceId }-email-${
104101
hasEmailErrors() ? 'error' : 'help'

‎projects/packages/forms/src/blocks/contact-form/components/notifications-settings.js‎

Lines changed: 80 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
1-
import { FormTokenField, ToggleControl } from '@wordpress/components';
1+
import { isWpcomPlatformSite } from '@automattic/jetpack-script-data';
2+
import { hasFeatureFlag } from '@automattic/jetpack-shared-extension-utils';
3+
import { FormTokenField, ToggleControl, ExternalLink } from '@wordpress/components';
24
import { store as coreStore } from '@wordpress/core-data';
35
import { useSelect } from '@wordpress/data';
46
import { store as editorStore } from '@wordpress/editor';
5-
import { useState } from '@wordpress/element';
7+
import { useState, createInterpolateElement } from '@wordpress/element';
68
import { __ } from '@wordpress/i18n';
7-
import InspectorHint from '../../shared/components/inspector-hint';
9+
import JetpackEmailConnectionSettings from './jetpack-email-connection-settings';
810

9-
const NotificationsSettings = ( { setAttributes, notificationRecipients } ) => {
11+
const NotificationsSettings = ( {
12+
setAttributes,
13+
notificationRecipients,
14+
emailAddress,
15+
emailSubject,
16+
emailNotifications,
17+
instanceId,
18+
postAuthorEmail,
19+
} ) => {
1020
const [ localNotificationRecipients, setLocalNotificationRecipients ] =
1121
useState( notificationRecipients );
1222
const [ localFormNotifications, setLocalFormNotifications ] = useState(
@@ -47,57 +57,79 @@ const NotificationsSettings = ( { setAttributes, notificationRecipients } ) => {
4757
// All available user names for suggestions
4858
const allUserNames = eligibleUsers.map( user => user.name || user.slug );
4959

60+
const supportNotificationsLink = isWpcomPlatformSite()
61+
? 'https://jetpack.com/support/notifications/'
62+
: 'https://wordpress.com/support/notifications/';
63+
5064
return (
5165
<>
52-
<ToggleControl
53-
label={ __( 'Enable form response notifications', 'jetpack-forms' ) }
54-
checked={ localFormNotifications }
55-
onChange={ value => {
56-
if ( value ) {
57-
// Auto-select post author when enabling notifications
58-
const authorIdStr = postAuthorId?.toString();
59-
let recipientsToSet = localNotificationRecipients;
60-
61-
if (
62-
recipientsToSet.length === 0 &&
63-
authorIdStr &&
64-
eligibleUsers.some( user => user.id === postAuthorId )
65-
) {
66-
recipientsToSet = [ authorIdStr ];
67-
}
68-
69-
setLocalNotificationRecipients( recipientsToSet );
70-
setAttributes( { notificationRecipients: recipientsToSet } );
71-
} else {
72-
setAttributes( { notificationRecipients: [] } );
73-
}
74-
setLocalFormNotifications( value );
75-
} }
76-
__nextHasNoMarginBottom={ true }
66+
<JetpackEmailConnectionSettings
67+
emailAddress={ emailAddress }
68+
emailSubject={ emailSubject }
69+
emailNotifications={ emailNotifications }
70+
instanceId={ instanceId }
71+
postAuthorEmail={ postAuthorEmail }
72+
setAttributes={ setAttributes }
7773
/>
78-
{ localFormNotifications && (
74+
{ hasFeatureFlag( 'form-notifications' ) && (
7975
<>
80-
<InspectorHint>
81-
{ __( 'Select users who can receive form response notifications:', 'jetpack-forms' ) }
82-
</InspectorHint>
83-
<FormTokenField
84-
label={ __( 'Send notifications to', 'jetpack-forms' ) }
85-
value={ selectedUserNames }
86-
suggestions={ allUserNames }
87-
onChange={ selectedNames => {
88-
// Convert user names back to IDs
89-
const newRecipients = selectedNames
90-
.map( name => {
91-
const user = eligibleUsers.find( u => ( u.name || u.slug ) === name );
92-
return user ? user.id.toString() : null;
93-
} )
94-
.filter( Boolean );
95-
setLocalNotificationRecipients( newRecipients );
96-
setAttributes( { notificationRecipients: newRecipients } );
76+
<ToggleControl
77+
label={ __( 'Enable notifications for responses', 'jetpack-forms' ) }
78+
help={ createInterpolateElement(
79+
__(
80+
'Receive push notifications when someone fills out your form. <pushNotificationsLink>Learn more.</pushNotificationsLink>',
81+
'jetpack-forms'
82+
),
83+
{
84+
pushNotificationsLink: <ExternalLink href={ supportNotificationsLink } />,
85+
}
86+
) }
87+
checked={ localFormNotifications }
88+
onChange={ value => {
89+
if ( value ) {
90+
// Auto-select post author when enabling notifications
91+
const authorIdStr = postAuthorId?.toString();
92+
let recipientsToSet = localNotificationRecipients;
93+
94+
if (
95+
recipientsToSet.length === 0 &&
96+
authorIdStr &&
97+
eligibleUsers.some( user => user.id === postAuthorId )
98+
) {
99+
recipientsToSet = [ authorIdStr ];
100+
}
101+
102+
setLocalNotificationRecipients( recipientsToSet );
103+
setAttributes( { notificationRecipients: recipientsToSet } );
104+
} else {
105+
setAttributes( { notificationRecipients: [] } );
106+
}
107+
setLocalFormNotifications( value );
97108
} }
98109
__nextHasNoMarginBottom={ true }
99-
__next40pxDefaultSize={ true }
100110
/>
111+
{ localFormNotifications && (
112+
<>
113+
<FormTokenField
114+
label={ __( 'Send notifications to', 'jetpack-forms' ) }
115+
value={ selectedUserNames }
116+
suggestions={ allUserNames }
117+
onChange={ selectedNames => {
118+
// Convert user names back to IDs
119+
const newRecipients = selectedNames
120+
.map( name => {
121+
const user = eligibleUsers.find( u => ( u.name || u.slug ) === name );
122+
return user ? user.id.toString() : null;
123+
} )
124+
.filter( Boolean );
125+
setLocalNotificationRecipients( newRecipients );
126+
setAttributes( { notificationRecipients: newRecipients } );
127+
} }
128+
__nextHasNoMarginBottom={ true }
129+
__next40pxDefaultSize={ true }
130+
/>
131+
</>
132+
) }
101133
</>
102134
) }
103135
</>

‎projects/packages/forms/src/blocks/contact-form/edit.tsx‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* External dependencies
33
*/
44
import { ThemeProvider } from '@automattic/jetpack-components';
5-
import { hasFeatureFlag, useModuleStatus } from '@automattic/jetpack-shared-extension-utils';
5+
import { useModuleStatus } from '@automattic/jetpack-shared-extension-utils';
66
import {
77
URLInput,
88
InspectorAdvancedControls,
@@ -49,7 +49,6 @@ import { CORE_BLOCKS } from '../shared/util/constants';
4949
import { childBlocks } from './child-blocks';
5050
import { ContactFormPlaceholder } from './components/jetpack-contact-form-placeholder';
5151
import ContactFormSkeletonLoader from './components/jetpack-contact-form-skeleton-loader';
52-
import JetpackEmailConnectionSettings from './components/jetpack-email-connection-settings';
5352
import NotificationsSettings from './components/notifications-settings';
5453
import useFormBlockDefaults from './shared/hooks/use-form-block-defaults';
5554
import VariationPicker from './variation-picker';
@@ -890,11 +889,12 @@ function JetpackContactFormEdit( {
890889
) }
891890
</PanelBody>
892891
<PanelBody
893-
title={ __( 'Email responses', 'jetpack-forms' ) }
892+
title={ __( 'Form notifications', 'jetpack-forms' ) }
894893
initialOpen={ false }
895894
className="jetpack-contact-form__panel"
896895
>
897-
<JetpackEmailConnectionSettings
896+
<NotificationsSettings
897+
notificationRecipients={ notificationRecipients }
898898
emailAddress={ to }
899899
emailSubject={ subject }
900900
emailNotifications={ emailNotifications }
@@ -903,18 +903,6 @@ function JetpackContactFormEdit( {
903903
setAttributes={ setAttributes }
904904
/>
905905
</PanelBody>
906-
{ hasFeatureFlag( 'form-notifications' ) && (
907-
<PanelBody
908-
title={ __( 'Form notifications', 'jetpack-forms' ) }
909-
initialOpen={ false }
910-
className="jetpack-contact-form__panel"
911-
>
912-
<NotificationsSettings
913-
notificationRecipients={ notificationRecipients }
914-
setAttributes={ setAttributes }
915-
/>
916-
</PanelBody>
917-
) }
918906
{ showFormIntegrations && (
919907
<Suspense fallback={ <div /> }>
920908
<IntegrationControls attributes={ attributes } setAttributes={ setAttributes } />

0 commit comments

Comments
 (0)