woocommerce/plugins/woocommerce-admin/client/marketing/overview/installed-extensions/row.js

174 lines
3.8 KiB
JavaScript
Raw Normal View History

Marketing Tab MVP (https://github.com/woocommerce/woocommerce-admin/pull/3953) * Add Marketing feature flag * Add marketing page and menu item * Register marketing page with layout controller * Add initial marketing cards * Add max-width to marketing overview page * Add initial marketing WelcomeCard component * Make marketing welcome card permanently dismiss * Add a readme for the marketing page components * Record tracks event when marketing welcome dismissed * Match design width * Add welcome image and initial styles * Use gridicon for close button * Fix whitespace * Add PluginsHelper::get_plugin_data() * Add initial Marketing\InstalledExtensions class * Preload installed marketing extensions data * Tweak extension statuses * Add InstalledExtensionRow component * Add initial extension data to InstalledExtensions card * Refactor PluginsHelper::get_plugin_data method Using the new get_plugin_path_from_slug method * Ensure get_plugins() function is available for PluginsHelper * Simplify using PluginsHelper method * Add MailChimp configured status logic * Add links to InstalledExtensionRow component * Add key prop to extensions list * Setup styles for InstalledExtensions card * Display nothing if no installed extensions * Add InstalledExtensions::get_allowed_plugins() * Setup Marketing Overview API controller * Add /activate-plugin marketing endpoint * Add more extensions URL props * Add Facebook extension configured status logic * Update Facebook extension URL props * Fix extenion data logic * Move component into it’s own directory * Setup /marketing/overview/recommended endpoint * Initial marketing page card header styles * Add basic extension data to RecommendedExtensions * Use color as variable * Tweak card header padding for design * Add basic styling to RecommendedExtensions card * settingsUrl is not available if the plugin is not active * Add /marketing/overview/installed-plugins REST endpoint * Add basic activation functionality to InstalledExtensions component * Don’t throw error on success * Add MVP data store for installed extensions card * Add core dark blue color variable * Add styles for installed extensions card * Move knowledge-base component to its own directory * Pull recommended marketing plugins from remote test site * Hide description when configured As per design * Tweak colors based on design * Finish off styling for RecommendedExtensions * Limit recommended extensions to 6 items * Add error handling to RecommendedExtensions card * Rename ‘copy’ extension prop * Add marketing button component to match design * Create ProductIcon component for marketing * Add InstalledExtension icons * Fix icon image paths * Add ProductIcon to InstallExtensionRow * Final styling to installed extensions card row * Knowledge base card placeholders * Fix missing icons when plugin not activated * Remove logging * Tweak array structure to ensure we have an array in JS and not an object * Refactor KnowledgeBase marketing component - We don’t need loop through every post when rendering, just pick the posts we need - Remove unused classes * Move padding from each slide to the container * Improve slider animations by absolute positioning the slides * Reduce the slider animation timeout and add a note * Add in-app purchase flow url params for recommended extensions * Fix slider animation * Reset slider height on window resize * Short slider animation, fix double margin on smaller screens * Add initial marketing/knowledge-base endpoint * Pull knowledge base posts from API * Rename welcome card dismiss tracks event * Record event on recommended product click * Recond onclick events for installed extensions card * Record event when carousel navigation clicked * img elements must have an alt prop * Remove import that is never used * use camelCase * Decode HTML entities from API call * Remove unused container div * Add card loading state * Add images to knowledge base card * Link knowledge base posts * Use the Pagination component rather than duplicate it’s functionality * Clean up and rename knowledge base slider * Clean knowledge base CSS and update responsive styles for single post slide * Add a README for button component * Add README for product icon component * Add initial readme for Slider component * Add correct image sizes to knowledge base slider, finalize styles * Fix extension link urls * Resolve some code formatting issue * Bind class click methods to this * Wrap nodes in Fragment * Fix wccom-back path * Add placeholder author and gravatar Default avatar url size returned from the API is currently set to 96 so I’ve done a simple replace with 16 * Fix style-lint expected new line * Add docblock for get_knowledge_base_posts() * Setup data store for marketing to handle installedExtensions card * Fix function names “Activating” not “installing” * Move welcome card component to its own dir * IconButton component is going to be deprecated ref: https://github.com/WordPress/gutenberg/pull/19299 * Support multiple activating plugins in the data store * Rename extension to plugin for consistency * Add propTypes to component * Rename data-store/ to data/ * Fix import paths * Extract isActivatingPlugin logic into datastore * Move data store selectors into own file * POST requests are not cached * Export apiFetch action * Don’t wrap API response in object * Implement data store for recommended extensions * Implement data store for marketing knowledge base * Tidy getRecommendedPlugins resolver * Try a cross browser cover/crop image effect to fit proposed design And help fit longer titles in * Add caught errors to handler * Adjust positioning so watermater is displayed * InstalledExtensions phpcs fixes * Marketing phpcs fixes * Alignment fix * MarketingOverview phpcs fixes * Missing full stop * Update breadcrumbs to use new approach * Fix style lint issues * Record `marketing_knowledge_article` track event on knowledge base post click * Import apiFetch and controls from @wordpress/data-controls * Hex color to lowercase * Remove duplicate method after rebase * Use new showPageArrowsLabel rather than hide with CSS * Fix blurry avatars on hidpi displays * Hide avatar if URL is falsy * Replace test author data with live data * Combine conditionals into ternary * Combine conditionals into ternary * Simplify class column logic * Only preload option and component settings in the admin * Fix isActivatingPlugin not updating Component was not re-rendeding. * Use querySelector over getElementsByClassName * Hide Marketing Welcome Card immediately on click * Use create-a-ticket url for supportUrl and make that the default * Add getInstalledPlugins resolver with preloaded data * Revert "Add getInstalledPlugins resolver with preloaded data" This reverts commit b8b127ec6411bef15616576b3bb189dc31777c13. * Load plugin data in a separate request after activation * Update welcome image * Don’t return plugin data in the activation request. * A space is required before closing bracket * Update Jest config to gracefully handle static assets Ref: https://jestjs.io/docs/en/webpack#handling-static-assets * Remove unused onExit property * Remove placeholder README * Use prop directly * yield createNotice * Add note to indicate which Category * Increase transient time to 3 days * Use $gap-small * Add proptype * Add debounce to slider height resize listener * Clean up isLoading logic * Dont show image elements if image data is empty * Open knowledge base posts in a new window * Add “noreferrer” * Turn the tab on in all env Co-authored-by: Daniel Bitzer <danielbitzer@gmail.com>
2020-03-28 13:48:27 +00:00
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import PropTypes from 'prop-types';
/**
* WooCommerce dependencies
*/
import { Link } from '@woocommerce/components';
/**
* Internal dependencies
*/
import { Button, ProductIcon } from '../../components';
import { recordEvent } from 'lib/tracks';
class InstalledExtensionRow extends Component {
constructor( props ) {
super( props );
this.onActivateClick = this.onActivateClick.bind( this );
this.onFinishSetupClick = this.onFinishSetupClick.bind( this );
}
getLinks() {
const { docsUrl, settingsUrl, supportUrl, dashboardUrl } = this.props;
const links = [];
if ( docsUrl ) {
links.push( {
key: 'docs',
href: docsUrl,
text: __( 'Docs', 'woocommerce-admin' ),
} );
}
if ( supportUrl ) {
links.push( {
key: 'support',
href: supportUrl,
text: __( 'Get support', 'woocommerce-admin' ),
} );
}
if ( settingsUrl ) {
links.push( {
key: 'settings',
href: settingsUrl,
text: __( 'Settings', 'woocommerce-admin' ),
} );
}
if ( dashboardUrl ) {
links.push( {
key: 'dashboard',
href: dashboardUrl,
text: __( 'Dashboard', 'woocommerce-admin' ),
} );
}
return (
<ul className="woocommerce-marketing-installed-extensions-card__item-links">
{ links.map( ( link ) => {
return (
<li key={ link.key }>
<Link
href={ link.href }
type="external"
onClick={ this.onLinkClick.bind( this, link ) }
>
{ link.text }
</Link>
</li>
)
} ) }
</ul>
)
}
onLinkClick( link ) {
const { name } = this.props;
recordEvent( 'marketing_installed_options', { name, link: link.key } );
}
onActivateClick() {
const { activatePlugin, name } = this.props;
recordEvent( 'marketing_installed_activate', { name } );
activatePlugin();
}
onFinishSetupClick() {
const { name } = this.props;
recordEvent( 'marketing_installed_finish_setup', { name } );
}
getActivateButton() {
const { isLoading } = this.props;
return (
<Button
isDefault
onClick={ this.onActivateClick }
disabled={ isLoading }
>
{ __( 'Activate', 'woocommerce-admin' ) }
</Button>
)
}
getFinishSetupButton() {
return (
<Button
isDefault
href={ this.props.settingsUrl }
onClick={ this.onFinishSetupClick }
>
{ __( 'Finish setup', 'woocommerce-admin' ) }
</Button>
)
}
render() {
const { name, description, status, icon } = this.props;
let actions = null;
switch ( status ) {
case 'installed':
actions = this.getActivateButton();
break;
case 'activated':
actions = this.getFinishSetupButton();
break;
case 'configured':
actions = this.getLinks();
break;
}
return (
<div className="woocommerce-marketing-installed-extensions-card__item">
<ProductIcon src={ icon } />
<div className="woocommerce-marketing-installed-extensions-card__item-text-and-actions">
<div className="woocommerce-marketing-installed-extensions-card__item-text">
<h4>{ name }</h4>
{ status === 'configured' || (
<p className="woocommerce-marketing-installed-extensions-card__item-description">{ description }</p>
) }
</div>
<div className="woocommerce-marketing-installed-extensions-card__item-actions">
{ actions }
</div>
Marketing Tab MVP (https://github.com/woocommerce/woocommerce-admin/pull/3953) * Add Marketing feature flag * Add marketing page and menu item * Register marketing page with layout controller * Add initial marketing cards * Add max-width to marketing overview page * Add initial marketing WelcomeCard component * Make marketing welcome card permanently dismiss * Add a readme for the marketing page components * Record tracks event when marketing welcome dismissed * Match design width * Add welcome image and initial styles * Use gridicon for close button * Fix whitespace * Add PluginsHelper::get_plugin_data() * Add initial Marketing\InstalledExtensions class * Preload installed marketing extensions data * Tweak extension statuses * Add InstalledExtensionRow component * Add initial extension data to InstalledExtensions card * Refactor PluginsHelper::get_plugin_data method Using the new get_plugin_path_from_slug method * Ensure get_plugins() function is available for PluginsHelper * Simplify using PluginsHelper method * Add MailChimp configured status logic * Add links to InstalledExtensionRow component * Add key prop to extensions list * Setup styles for InstalledExtensions card * Display nothing if no installed extensions * Add InstalledExtensions::get_allowed_plugins() * Setup Marketing Overview API controller * Add /activate-plugin marketing endpoint * Add more extensions URL props * Add Facebook extension configured status logic * Update Facebook extension URL props * Fix extenion data logic * Move component into it’s own directory * Setup /marketing/overview/recommended endpoint * Initial marketing page card header styles * Add basic extension data to RecommendedExtensions * Use color as variable * Tweak card header padding for design * Add basic styling to RecommendedExtensions card * settingsUrl is not available if the plugin is not active * Add /marketing/overview/installed-plugins REST endpoint * Add basic activation functionality to InstalledExtensions component * Don’t throw error on success * Add MVP data store for installed extensions card * Add core dark blue color variable * Add styles for installed extensions card * Move knowledge-base component to its own directory * Pull recommended marketing plugins from remote test site * Hide description when configured As per design * Tweak colors based on design * Finish off styling for RecommendedExtensions * Limit recommended extensions to 6 items * Add error handling to RecommendedExtensions card * Rename ‘copy’ extension prop * Add marketing button component to match design * Create ProductIcon component for marketing * Add InstalledExtension icons * Fix icon image paths * Add ProductIcon to InstallExtensionRow * Final styling to installed extensions card row * Knowledge base card placeholders * Fix missing icons when plugin not activated * Remove logging * Tweak array structure to ensure we have an array in JS and not an object * Refactor KnowledgeBase marketing component - We don’t need loop through every post when rendering, just pick the posts we need - Remove unused classes * Move padding from each slide to the container * Improve slider animations by absolute positioning the slides * Reduce the slider animation timeout and add a note * Add in-app purchase flow url params for recommended extensions * Fix slider animation * Reset slider height on window resize * Short slider animation, fix double margin on smaller screens * Add initial marketing/knowledge-base endpoint * Pull knowledge base posts from API * Rename welcome card dismiss tracks event * Record event on recommended product click * Recond onclick events for installed extensions card * Record event when carousel navigation clicked * img elements must have an alt prop * Remove import that is never used * use camelCase * Decode HTML entities from API call * Remove unused container div * Add card loading state * Add images to knowledge base card * Link knowledge base posts * Use the Pagination component rather than duplicate it’s functionality * Clean up and rename knowledge base slider * Clean knowledge base CSS and update responsive styles for single post slide * Add a README for button component * Add README for product icon component * Add initial readme for Slider component * Add correct image sizes to knowledge base slider, finalize styles * Fix extension link urls * Resolve some code formatting issue * Bind class click methods to this * Wrap nodes in Fragment * Fix wccom-back path * Add placeholder author and gravatar Default avatar url size returned from the API is currently set to 96 so I’ve done a simple replace with 16 * Fix style-lint expected new line * Add docblock for get_knowledge_base_posts() * Setup data store for marketing to handle installedExtensions card * Fix function names “Activating” not “installing” * Move welcome card component to its own dir * IconButton component is going to be deprecated ref: https://github.com/WordPress/gutenberg/pull/19299 * Support multiple activating plugins in the data store * Rename extension to plugin for consistency * Add propTypes to component * Rename data-store/ to data/ * Fix import paths * Extract isActivatingPlugin logic into datastore * Move data store selectors into own file * POST requests are not cached * Export apiFetch action * Don’t wrap API response in object * Implement data store for recommended extensions * Implement data store for marketing knowledge base * Tidy getRecommendedPlugins resolver * Try a cross browser cover/crop image effect to fit proposed design And help fit longer titles in * Add caught errors to handler * Adjust positioning so watermater is displayed * InstalledExtensions phpcs fixes * Marketing phpcs fixes * Alignment fix * MarketingOverview phpcs fixes * Missing full stop * Update breadcrumbs to use new approach * Fix style lint issues * Record `marketing_knowledge_article` track event on knowledge base post click * Import apiFetch and controls from @wordpress/data-controls * Hex color to lowercase * Remove duplicate method after rebase * Use new showPageArrowsLabel rather than hide with CSS * Fix blurry avatars on hidpi displays * Hide avatar if URL is falsy * Replace test author data with live data * Combine conditionals into ternary * Combine conditionals into ternary * Simplify class column logic * Only preload option and component settings in the admin * Fix isActivatingPlugin not updating Component was not re-rendeding. * Use querySelector over getElementsByClassName * Hide Marketing Welcome Card immediately on click * Use create-a-ticket url for supportUrl and make that the default * Add getInstalledPlugins resolver with preloaded data * Revert "Add getInstalledPlugins resolver with preloaded data" This reverts commit b8b127ec6411bef15616576b3bb189dc31777c13. * Load plugin data in a separate request after activation * Update welcome image * Don’t return plugin data in the activation request. * A space is required before closing bracket * Update Jest config to gracefully handle static assets Ref: https://jestjs.io/docs/en/webpack#handling-static-assets * Remove unused onExit property * Remove placeholder README * Use prop directly * yield createNotice * Add note to indicate which Category * Increase transient time to 3 days * Use $gap-small * Add proptype * Add debounce to slider height resize listener * Clean up isLoading logic * Dont show image elements if image data is empty * Open knowledge base posts in a new window * Add “noreferrer” * Turn the tab on in all env Co-authored-by: Daniel Bitzer <danielbitzer@gmail.com>
2020-03-28 13:48:27 +00:00
</div>
</div>
)
}
}
InstalledExtensionRow.defaultProps = {
isLoading: false,
};
InstalledExtensionRow.propTypes = {
name: PropTypes.string.isRequired,
slug: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
status: PropTypes.string.isRequired,
settingsUrl: PropTypes.string,
docsUrl: PropTypes.string,
supportUrl: PropTypes.string,
dashboardUrl: PropTypes.string,
activatePlugin: PropTypes.func.isRequired,
};
export default InstalledExtensionRow;