-
Notifications
You must be signed in to change notification settings - Fork 2k
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.
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
My Home: Add "Connect social media accounts" Task #41018
Merged
Merged
Changes from all commits
Commits
Show all changes
16 commits
Select commit
Hold shift + click to select a range
6a85a5c
Starting commit
Aurorum 3a7a60a
Add task and tour
Aurorum 0c4b19a
Typo
Aurorum 6482656
Split into single task
Aurorum e71fe49
Still save preference
Aurorum 56240ab
Update preference name
Aurorum 02b0f04
Use suggested approach
Aurorum 7ba9395
Hide card on click
Aurorum e0539b2
Hide task
Aurorum 1e8ef06
Add a way to use InlineSupportLink
Aurorum 6d2f1d8
Use the support article dialog
Aurorum beaf1fd
Force conflict
Aurorum 3b2a621
Merge branch 'master' into add/customer-home-tasks
Aurorum 8724c1a
Force conflict again (I should really learn how to do this properly...)
Aurorum 00d9e8f
Merge branch 'master' into add/customer-home-tasks
Aurorum ed6fbba
Ensure dialog is above guided tour
Aurorum File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
45 changes: 45 additions & 0 deletions
45
client/layout/guided-tours/tours/marketing-connections-tour/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import React from 'react'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import meta from './meta'; | ||
import { ButtonRow, makeTour, Quit, Link, Step, Tour } from 'layout/guided-tours/config-elements'; | ||
import { localizeUrl } from 'lib/i18n-utils'; | ||
|
||
export const marketingConnectionsTour = makeTour( | ||
<Tour { ...meta }> | ||
<Step | ||
arrow="right-middle" | ||
name="init" | ||
placement="beside" | ||
style={ { | ||
marginLeft: '-24px', | ||
} } | ||
target={ '.sharing-service.not-connected .button.is-compact' } | ||
> | ||
{ ( { translate } ) => ( | ||
<> | ||
<p> | ||
{ translate( | ||
"Select the service which you'd like to connect. " + | ||
'Whenever you publish a new post, your social media followers will receive an update.' | ||
) } | ||
</p> | ||
<ButtonRow> | ||
<Link | ||
supportArticleId={ 4789 } | ||
href={ localizeUrl( 'https://wordpress.com/support/publicize/' ) } | ||
> | ||
{ translate( 'Learn more' ) } | ||
</Link> | ||
<Quit primary>{ translate( 'Got it' ) }</Quit> | ||
</ButtonRow> | ||
</> | ||
) } | ||
</Step> | ||
</Tour> | ||
); |
11 changes: 11 additions & 0 deletions
11
client/layout/guided-tours/tours/marketing-connections-tour/meta.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import { isDesktop } from '@automattic/viewport'; | ||
|
||
export default { | ||
name: 'marketingConnectionsTour', | ||
version: '20200410', | ||
path: [ '/marketing/connections/' ], | ||
when: isDesktop, | ||
}; |
101 changes: 101 additions & 0 deletions
101
client/my-sites/customer-home/cards/tasks/connect-accounts.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,101 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import React, { useState } from 'react'; | ||
import { useTranslate } from 'i18n-calypso'; | ||
import { connect } from 'react-redux'; | ||
import { Button } from '@automattic/components'; | ||
import { isMobile } from '@automattic/viewport'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import ActionPanel from 'components/action-panel'; | ||
import ActionPanelTitle from 'components/action-panel/title'; | ||
import ActionPanelBody from 'components/action-panel/body'; | ||
import ActionPanelFigure from 'components/action-panel/figure'; | ||
import ActionPanelCta from 'components/action-panel/cta'; | ||
import Gridicon from 'components/gridicon'; | ||
import QueryPublicizeConnections from 'components/data/query-publicize-connections'; | ||
import { getSelectedSiteId, getSelectedSiteSlug } from 'state/ui/selectors'; | ||
import { savePreference } from 'state/preferences/actions'; | ||
|
||
/** | ||
* Style dependencies | ||
*/ | ||
import './style.scss'; | ||
|
||
const ConnectAccountsTask = ( { skipTask, siteSlug } ) => { | ||
const translate = useTranslate(); | ||
const [ isVisible, setIsVisible ] = useState( true ); | ||
|
||
if ( ! isVisible ) { | ||
return null; | ||
} | ||
return ( | ||
<ActionPanel className="tasks connect-accounts"> | ||
<QueryPublicizeConnections selectedSite /> | ||
<ActionPanelBody> | ||
{ ! isMobile() && ( | ||
<ActionPanelFigure align="right"> | ||
<img src="/calypso/images/stats/tasks/social-links.svg" alt="" /> | ||
</ActionPanelFigure> | ||
) } | ||
<div className="tasks__timing"> | ||
<Gridicon icon="time" size={ 18 } /> | ||
<p>{ translate( '3 minutes' ) }</p> | ||
</div> | ||
<ActionPanelTitle>{ translate( 'Drive traffic to your site' ) }</ActionPanelTitle> | ||
Aurorum marked this conversation as resolved.
Show resolved
Hide resolved
mmtr marked this conversation as resolved.
Show resolved
Hide resolved
|
||
<p className="tasks__description"> | ||
{ translate( | ||
'Integrate your site with social media to automatically post your content and drive traffic to your site.' | ||
) } | ||
</p> | ||
<ActionPanelCta> | ||
<Button | ||
className="tasks__action" | ||
primary | ||
href={ | ||
isMobile() | ||
mmtr marked this conversation as resolved.
Show resolved
Hide resolved
|
||
? `/marketing/connections/${ siteSlug }` | ||
: `/marketing/connections/${ siteSlug }?tour=marketingConnectionsTour` | ||
} | ||
> | ||
{ translate( 'Connect accounts' ) } | ||
Aurorum marked this conversation as resolved.
Show resolved
Hide resolved
|
||
</Button> | ||
<Button | ||
className="tasks__action-skip is-link" | ||
onClick={ () => { | ||
setIsVisible( false ); | ||
skipTask(); | ||
} } | ||
> | ||
{ translate( 'Skip for now' ) } | ||
</Button> | ||
</ActionPanelCta> | ||
</ActionPanelBody> | ||
</ActionPanel> | ||
); | ||
}; | ||
|
||
const mapStateToProps = state => { | ||
return { | ||
siteId: getSelectedSiteId( state ), | ||
siteSlug: getSelectedSiteSlug( state ), | ||
}; | ||
}; | ||
|
||
const mapDispatchToProps = { | ||
skipTask: siteId => | ||
savePreference( `dismissible-card-home-task-connect-accounts-${ siteId }`, true ), | ||
}; | ||
|
||
const mergeProps = ( stateProps, dispatchProps, ownProps ) => { | ||
return { | ||
...stateProps, | ||
skipTask: () => dispatchProps.skipTask( stateProps.siteId ), | ||
...ownProps, | ||
}; | ||
}; | ||
|
||
export default connect( mapStateToProps, mapDispatchToProps, mergeProps )( ConnectAccountsTask ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
.tasks.action-panel { | ||
.tasks__timing { | ||
display: flex; | ||
|
||
.gridicon { | ||
margin-right: 4px; | ||
} | ||
} | ||
|
||
.action-panel__title { | ||
font-family: 'Recoleta', serif; | ||
Aurorum marked this conversation as resolved.
Show resolved
Hide resolved
|
||
font-size: 36px; | ||
} | ||
|
||
.action-panel__figure { | ||
max-width: 280px; | ||
} | ||
|
||
.tasks__description { | ||
font-size: 16px; | ||
} | ||
|
||
.action-panel__cta { | ||
display: flex; | ||
|
||
.tasks__action-skip { | ||
margin: auto 16px; | ||
} | ||
} | ||
} |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could we please not hardcode values into translatable strings? This should be
like it's done in all the other places where we already do this, for example here: https://github.com/Automattic/wp-calypso/blob/master/client/my-sites/customer-home/cards/tasks/checklist-site-setup/wpcom-checklist/component.jsx#L263
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oops, thank you! I opened #41271 to address that. :)