Skip to content

Forms: Polish integration modal style and copy #43252

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 28, 2025
Merged

Forms: Polish integration modal style and copy #43252

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7881cd4
style and copy updates
dhasilva Apr 25, 2025
6512a91
changelog
dhasilva Apr 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions projects/packages/forms/changelog/update-forms-integration-modal-polishing
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: changed

Forms: Polish integration modal style and copy
8 changes: 4 additions & 4 deletions ...kages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/akismet-card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const AkismetCard = ( { isExpanded, onToggle, data, refreshStatus } ) => {
}
),
notActivatedMessage: __(
'Akismet is installed! Just activate the plugin to start blocking spam.',
'Akismet is installed. Just activate the plugin to start blocking spam.',
'jetpack-forms'
),
};
Expand All @@ -45,10 +45,10 @@ const AkismetCard = ( { isExpanded, onToggle, data, refreshStatus } ) => {
>
{ ! akismetActiveWithKey ? (
<div>
<p>
<p className="integration-card__description">
{ createInterpolateElement(
__(
'Akismet is active! There is one step left. Please add your <a>Akismet key</a>.',
'Akismet is active. There is one step left. Please add your <a>Akismet key</a>.',
'jetpack-forms'
),
{
Expand All @@ -68,7 +68,7 @@ const AkismetCard = ( { isExpanded, onToggle, data, refreshStatus } ) => {
</div>
) : (
<div>
<p>{ __( 'Your forms are automatically protected with Akismet!', 'jetpack-forms' ) }</p>
<p>{ __( 'Your forms are automatically protected with Akismet.', 'jetpack-forms' ) }</p>
<div className="integration-card__links">
<Button
variant="link"
Expand Down
20 changes: 16 additions & 4 deletions ...forms/src/blocks/contact-form/components/jetpack-integrations-modal/creative-mail-card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n';
import CreativeMailIcon from '../../../../icons/creative-mail-icon';
import IntegrationCard from './integration-card';

const CreativeMailCard = ( { isExpanded, onToggle, data, refreshStatus } ) => {
const CreativeMailCard = ( { isExpanded, onToggle, data, refreshStatus, borderBottom = true } ) => {
const { settingsUrl = '' } = data || {};

const selectedBlock = useSelect( select => select( blockEditorStore ).getSelectedBlock(), [] );
Expand All @@ -32,7 +32,7 @@ const CreativeMailCard = ( { isExpanded, onToggle, data, refreshStatus } ) => {
'jetpack-forms'
),
notActivatedMessage: __(
'Creative Mail is installed! To start sending email campaigns, simply activate the plugin.',
'Creative Mail is installed. To start sending email campaigns, simply activate the plugin.',
'jetpack-forms'
),
};
Expand All @@ -57,17 +57,29 @@ const CreativeMailCard = ( { isExpanded, onToggle, data, refreshStatus } ) => {
isExpanded={ isExpanded }
onToggle={ onToggle }
cardData={ cardData }
borderBottom={ borderBottom }
>
<div>
<p>{ __( "You're all setup for email marketing with Creative Mail.", 'jetpack-forms' ) }</p>
<p>
{ __(
"You're all setup for email marketing with Creative Mail. Please manage your marketing from Creative Mail panel.",
'jetpack-forms'
) }
</p>
{ hasEmailBlock && (
<ToggleControl
label={ __( 'Add email permission request before submit button', 'jetpack-forms' ) }
checked={ !! consentBlock }
onChange={ toggleConsent }
/>
) }
<Button variant="link" href={ settingsUrl } target="_blank" rel="noopener noreferrer">
<Button
variant="link"
href={ settingsUrl }
target="_blank"
rel="noopener noreferrer"
className="jetpack-forms-creative-mail-settings-button"
>
{ __( 'Open Creative Mail settings', 'jetpack-forms' ) }
</Button>
</div>
Expand Down
3 changes: 3 additions & 0 deletions ...cts/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
import AkismetCard from './akismet-card';
import CreativeMailCard from './creative-mail-card';
import JetpackCRMCard from './jetpack-crm-card';
import './style.scss';

const IntegrationsModal = ( {
isOpen,
Expand Down Expand Up @@ -38,6 +39,7 @@ const IntegrationsModal = ( {
title={ __( 'Manage integrations', 'jetpack-forms' ) }
onRequestClose={ onClose }
style={ { width: '700px' } }
className="jetpack-forms-integrations-modal"
>
<VStack spacing="4">
<AkismetCard
Expand All @@ -59,6 +61,7 @@ const IntegrationsModal = ( {
onToggle={ () => toggleCard( 'creativemail' ) }
data={ findIntegrationById( 'creative-mail-by-constant-contact' ) }
refreshStatus={ refreshIntegrations }
borderBottom={ false }
/>
</VStack>
</Modal>
Expand Down
8 changes: 7 additions & 1 deletion ...s/src/blocks/contact-form/components/jetpack-integrations-modal/integration-card/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,15 @@ const IntegrationCard = ( {
children,
cardData = {},
toggleTooltip,
borderBottom = true,
} ) => {
return (
<Card className="integration-card">
<Card
className="integration-card"
isBorderless={ true }
borderBottom={ borderBottom }
isRounded={ false }
>
<IntegrationCardHeader
title={ title }
description={ description }
Expand Down
8 changes: 6 additions & 2 deletions ...tact-form/components/jetpack-integrations-modal/integration-card/integration-card-body.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,12 @@ const IntegrationCardBody = ( { isExpanded, children, cardData = {} } ) => {
return (
<CardBody>
{ isLoading && <Spinner /> }
{ ! isLoading && ! isInstalled && <p>{ notInstalledMessage }</p> }
{ ! isLoading && isInstalled && ! isActive && <p>{ notActivatedMessage }</p> }
{ ! isLoading && ! isInstalled && (
<p className="integration-card__description">{ notInstalledMessage }</p>
) }
{ ! isLoading && isInstalled && ! isActive && (
<p className="integration-card__description">{ notActivatedMessage }</p>
) }
{ ! isLoading && isInstalled && isActive && children }
</CardBody>
);
Expand Down
26 changes: 18 additions & 8 deletions ...src/blocks/contact-form/components/jetpack-integrations-modal/integration-card/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
&__title-row {
display: flex;
align-items: center;
gap: 8px;
gap: 10px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no need to increase to 10px if we remove the margin-left from the __connected-badge

}

&__service-icon-container {
Expand All @@ -46,18 +46,17 @@

&__title {
margin: 0;
font-size: var(--font-body);
font-weight: 600;
font-size: 15px;
font-weight: 400;
line-height: 1.4;
}

&__plugin-badge,
&__connected-badge {
font-size: 11px;
font-size: 12px;
padding: 4px 8px;
border-radius: 3px;
margin-left: 8px;
font-weight: 500;
font-weight: 400;
line-height: 16px;
}

Expand All @@ -81,7 +80,7 @@
&__description {
color: var(--jp-gray-50);
font-size: 13px;
line-height: 1.4;
line-height: 1.5;
}

&__links {
Expand All @@ -98,5 +97,16 @@

.components-card__body {
padding-bottom: 30px;
padding-left: 0;
padding-right: 0;
}

.components-card-header {
padding-left: 0;
padding-right: 0;
}

.jetpack-forms-creative-mail-settings-button {
margin-top: 12px;
}
}
}
6 changes: 3 additions & 3 deletions ...s/forms/src/blocks/contact-form/components/jetpack-integrations-modal/jetpack-crm-card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const JetpackCRMCard = ( {
const crmVersion = semver.coerce( version );
const isRecentVersion = crmVersion && semver.gte( crmVersion, '4.9.1' );

const connectedMessage = __( 'This form is connected to Jetpack CRM!', 'jetpack-forms' );
const connectedMessage = __( 'This form is connected to Jetpack CRM.', 'jetpack-forms' );
const disconnectedMessage = __(
'To connect this form to Jetpack CRM, enable the toggle above.',
'jetpack-forms'
Expand All @@ -38,11 +38,11 @@ const JetpackCRMCard = ( {
refreshStatus,
trackEventName: 'jetpack_forms_upsell_crm_click',
notInstalledMessage: __(
'You can save your form contacts in Jetpack CRM! To get started, please install the plugin.',
'You can save your form contacts in Jetpack CRM. To get started, please install the plugin.',
'jetpack-forms'
),
notActivatedMessage: __(
'Jetpack CRM is installed! To start saving contacts, simply activate the plugin.',
'Jetpack CRM is installed. To start saving contacts, simply activate the plugin.',
'jetpack-forms'
),
};
Expand Down
3 changes: 3 additions & 0 deletions ...s/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.jetpack-forms-integrations-modal .components-modal__header-heading {
font-weight: 400;
}
Loading