Make Multichannel Marketing the default new UI for Marketing page (#37430)
This commit is contained in:
Gan Eng Chin
GitHub
commit
b2629c03db
|
|
@ -102,20 +102,6 @@
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
@mixin button-style__hover {
|
||||
background-color: $studio-white;
|
||||
color: $gray-900;
|
||||
box-shadow: inset 0 0 0 1px $gray-400, inset 0 0 0 2px $studio-white,
|
||||
0 1px 1px rgba( $gray-900, 0.2 );
|
||||
}
|
||||
|
||||
@mixin button-style__active() {
|
||||
outline: none;
|
||||
background-color: $studio-white;
|
||||
color: $gray-900;
|
||||
box-shadow: inset 0 0 0 1px $gray-400, inset 0 0 0 2px $studio-white;
|
||||
}
|
||||
|
||||
@mixin button-style__focus-active() {
|
||||
background-color: $studio-white;
|
||||
color: $gray-900;
|
||||
|
|
|
|||
|
|
@ -51,11 +51,6 @@ const Dashboard = lazy( () =>
|
|||
const Homescreen = lazy( () =>
|
||||
import( /* webpackChunkName: "homescreen" */ '../homescreen' )
|
||||
);
|
||||
const MarketingOverview = lazy( () =>
|
||||
import(
|
||||
/* webpackChunkName: "marketing-overview" */ '../marketing/overview'
|
||||
)
|
||||
);
|
||||
const MarketingOverviewMultichannel = lazy( () =>
|
||||
import(
|
||||
/* webpackChunkName: "multichannel-marketing" */ '../marketing/overview-multichannel'
|
||||
|
|
@ -157,9 +152,7 @@ export const getPages = () => {
|
|||
|
||||
if ( window.wcAdminFeatures.marketing ) {
|
||||
pages.push( {
|
||||
container: window.wcAdminFeatures[ 'multichannel-marketing' ]
|
||||
? MarketingOverviewMultichannel
|
||||
: MarketingOverview,
|
||||
container: MarketingOverviewMultichannel,
|
||||
path: '/marketing',
|
||||
breadcrumbs: [
|
||||
...initialBreadcrumbs,
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
Button
|
||||
===
|
||||
|
||||
This component creates simple reusable html `<button></button>` element.
|
||||
|
||||
## Usage
|
||||
|
||||
```jsx
|
||||
<Button
|
||||
isSecondary
|
||||
onClick={ this.onActivateClick }
|
||||
disabled={ isLoading }
|
||||
>
|
||||
{ __( 'Activate', 'woocommerce' ) }
|
||||
</Button>
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
Name | Type | Default | Description
|
||||
--- | --- | --- | ---
|
||||
`className` | String | `null` | Additional class name to style the component
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { Button } from '@wordpress/components';
|
||||
import classnames from 'classnames';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
|
||||
export default ( props ) => {
|
||||
return (
|
||||
<Button
|
||||
{ ...props }
|
||||
className={ classnames(
|
||||
props.className,
|
||||
'woocommerce-admin-marketing-button'
|
||||
) }
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
.components-button.woocommerce-admin-marketing-button {
|
||||
&:not([disabled]) {
|
||||
border-color: var(--wp-admin-theme-color) !important;
|
||||
color: var(--wp-admin-theme-color) !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
export { default as Button } from './button';
|
||||
export { default as Card } from './card';
|
||||
export { default as ProductIcon } from './product-icon';
|
||||
export { default as Slider } from './slider';
|
||||
|
|
|
|||
|
|
@ -1,40 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { useUser, withOptionsHydration } from '@woocommerce/data';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
import InstalledExtensions from './installed-extensions';
|
||||
import RecommendedExtensions from '../components/recommended-extensions';
|
||||
import KnowledgeBase from '../components/knowledge-base';
|
||||
import WelcomeCard from './welcome-card';
|
||||
import { getAdminSetting } from '~/utils/admin-settings';
|
||||
import { MarketingOverviewSectionSlot } from './section-slot';
|
||||
import '../data';
|
||||
|
||||
const MarketingOverview = () => {
|
||||
const { currentUserCan } = useUser();
|
||||
|
||||
const shouldShowExtensions =
|
||||
getAdminSetting( 'allowMarketplaceSuggestions', false ) &&
|
||||
currentUserCan( 'install_plugins' );
|
||||
|
||||
return (
|
||||
<div className="woocommerce-marketing-overview">
|
||||
<WelcomeCard />
|
||||
<InstalledExtensions />
|
||||
<MarketingOverviewSectionSlot />
|
||||
{ !! shouldShowExtensions && (
|
||||
<RecommendedExtensions category="marketing" />
|
||||
) }
|
||||
<KnowledgeBase category="marketing" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withOptionsHydration( {
|
||||
...getAdminSetting( 'preloadOptions', {} ),
|
||||
} )( MarketingOverview );
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { Component } from '@wordpress/element';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { compose } from '@wordpress/compose';
|
||||
import { withSelect, withDispatch } from '@wordpress/data';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Card, CardHeader } from '@wordpress/components';
|
||||
import { Text } from '@woocommerce/experimental';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
import InstalledExtensionRow from './row';
|
||||
import { STORE_KEY } from '../../data/constants';
|
||||
|
||||
class InstalledExtensions extends Component {
|
||||
activatePlugin( pluginSlug ) {
|
||||
const { activateInstalledPlugin } = this.props;
|
||||
activateInstalledPlugin( pluginSlug );
|
||||
}
|
||||
|
||||
isActivatingPlugin( pluginSlug ) {
|
||||
const { activatingPlugins } = this.props;
|
||||
return activatingPlugins.includes( pluginSlug );
|
||||
}
|
||||
|
||||
render() {
|
||||
const { plugins } = this.props;
|
||||
|
||||
if ( plugins.length === 0 ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const title = __( 'Installed marketing extensions', 'woocommerce' );
|
||||
|
||||
return (
|
||||
<Card className="woocommerce-marketing-installed-extensions-card">
|
||||
<CardHeader>
|
||||
<Text variant="title.small" size="20" lineHeight="28px">
|
||||
{ title }
|
||||
</Text>
|
||||
</CardHeader>
|
||||
{ plugins.map( ( plugin ) => {
|
||||
return (
|
||||
<InstalledExtensionRow
|
||||
key={ plugin.slug }
|
||||
{ ...plugin }
|
||||
activatePlugin={ () =>
|
||||
this.activatePlugin( plugin.slug )
|
||||
}
|
||||
isLoading={ this.isActivatingPlugin( plugin.slug ) }
|
||||
/>
|
||||
);
|
||||
} ) }
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
InstalledExtensions.propTypes = {
|
||||
/**
|
||||
* Array of installed plugin objects.
|
||||
*/
|
||||
plugins: PropTypes.arrayOf( PropTypes.object ).isRequired,
|
||||
/**
|
||||
* Array of plugins that are currently activating.
|
||||
*/
|
||||
activatingPlugins: PropTypes.arrayOf( PropTypes.string ).isRequired,
|
||||
};
|
||||
|
||||
export default compose(
|
||||
withSelect( ( select ) => {
|
||||
const { getInstalledPlugins, getActivatingPlugins } =
|
||||
select( STORE_KEY );
|
||||
|
||||
return {
|
||||
plugins: getInstalledPlugins(),
|
||||
activatingPlugins: getActivatingPlugins(),
|
||||
};
|
||||
} ),
|
||||
withDispatch( ( dispatch ) => {
|
||||
const { activateInstalledPlugin } = dispatch( STORE_KEY );
|
||||
|
||||
return {
|
||||
activateInstalledPlugin,
|
||||
};
|
||||
} )
|
||||
)( InstalledExtensions );
|
||||
|
|
@ -1,170 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Component } from '@wordpress/element';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Link } from '@woocommerce/components';
|
||||
import { recordEvent } from '@woocommerce/tracks';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { Button, ProductIcon } from '../../components';
|
||||
|
||||
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' ),
|
||||
} );
|
||||
}
|
||||
if ( supportUrl ) {
|
||||
links.push( {
|
||||
key: 'support',
|
||||
href: supportUrl,
|
||||
text: __( 'Get support', 'woocommerce' ),
|
||||
} );
|
||||
}
|
||||
if ( settingsUrl ) {
|
||||
links.push( {
|
||||
key: 'settings',
|
||||
href: settingsUrl,
|
||||
text: __( 'Settings', 'woocommerce' ),
|
||||
} );
|
||||
}
|
||||
if ( dashboardUrl ) {
|
||||
links.push( {
|
||||
key: 'dashboard',
|
||||
href: dashboardUrl,
|
||||
text: __( 'Dashboard', 'woocommerce' ),
|
||||
} );
|
||||
}
|
||||
|
||||
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
|
||||
isSecondary
|
||||
onClick={ this.onActivateClick }
|
||||
disabled={ isLoading }
|
||||
>
|
||||
{ __( 'Activate', 'woocommerce' ) }
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
getFinishSetupButton() {
|
||||
return (
|
||||
<Button
|
||||
isSecondary
|
||||
href={ this.props.settingsUrl }
|
||||
onClick={ this.onFinishSetupClick }
|
||||
>
|
||||
{ __( 'Finish setup', 'woocommerce' ) }
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { name, description, status, slug } = 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 product={ slug } />
|
||||
<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>
|
||||
</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;
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
.woocommerce-marketing-installed-extensions-card {
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 18px 24px;
|
||||
|
||||
h4 {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
margin: 0 0 5px;
|
||||
color: $gray-900;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $gray-700;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__item:not(:last-child) {
|
||||
border-bottom: 1px solid $gray-200;
|
||||
}
|
||||
|
||||
&__item-text-and-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
flex-grow: 2;
|
||||
min-width: 0; // Flexbox truncated text fix
|
||||
|
||||
@include breakpoint( '>600px' ) {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&__item-actions {
|
||||
@include breakpoint( '>600px' ) {
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
padding-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
&__item-description {
|
||||
@include breakpoint( '>960px' ) {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 550px;
|
||||
}
|
||||
}
|
||||
|
||||
&__item-links {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 25px 0 0;
|
||||
|
||||
@include breakpoint( '>600px' ) {
|
||||
margin: 0 0 0 30px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 600;
|
||||
color: var(--wp-admin-theme-color) !important;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-admin-marketing-product-icon {
|
||||
align-self: flex-start;
|
||||
margin-right: 14px;
|
||||
margin-top: 2px; // Align top of image with text
|
||||
}
|
||||
|
||||
&__item-text {
|
||||
min-width: 0; // Flexbox truncated text fix
|
||||
flex-grow: 2;
|
||||
margin: 0 0 10px;
|
||||
width: 100%;
|
||||
|
||||
@include breakpoint( '>600px' ) {
|
||||
margin: 0;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export * from './section-slot';
|
||||
export * from './utils';
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { useSlot } from '@woocommerce/experimental';
|
||||
import classnames from 'classnames';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import {
|
||||
EXPERIMENTAL_WC_MARKETING_OVERVIEW_SECTION_SLOT_NAME,
|
||||
WooMarketingOverviewSection,
|
||||
} from './utils';
|
||||
|
||||
export const MarketingOverviewSectionSlot = ( {
|
||||
className,
|
||||
}: {
|
||||
className: string;
|
||||
} ) => {
|
||||
const slot = useSlot(
|
||||
EXPERIMENTAL_WC_MARKETING_OVERVIEW_SECTION_SLOT_NAME
|
||||
);
|
||||
const hasFills = Boolean( slot?.fills?.length );
|
||||
|
||||
if ( ! hasFills ) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className={ classnames(
|
||||
'woocommerce-marketing-overview__section',
|
||||
className
|
||||
) }
|
||||
>
|
||||
<WooMarketingOverviewSection.Slot />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { Slot, Fill } from '@wordpress/components';
|
||||
import {
|
||||
createOrderedChildren,
|
||||
sortFillsByOrder,
|
||||
} from '@woocommerce/components';
|
||||
|
||||
export const EXPERIMENTAL_WC_MARKETING_OVERVIEW_SECTION_SLOT_NAME =
|
||||
'experimental_woocommerce_marketing_overview_section';
|
||||
/**
|
||||
* Create a Fill for extensions to add a section to the Marketing Overview page.
|
||||
*
|
||||
* @slotFill WooMarketingOverviewSection
|
||||
* @scope woocommerce-admin
|
||||
* @example
|
||||
* const MySection = () => (
|
||||
* <Fill name="experimental_woocommerce_marketing_overview_section">
|
||||
* <div className="woocommerce-experiments-placeholder-slotfill">
|
||||
* <div className="placeholder-slotfill-content">
|
||||
* Slotfill goes in here!
|
||||
* </div>
|
||||
* </div>
|
||||
* </Fill>
|
||||
* );
|
||||
*
|
||||
* registerPlugin( 'my-extension', {
|
||||
* render: MySection,
|
||||
* scope: 'woocommerce-admin',
|
||||
* } );
|
||||
* @param {Object} param0
|
||||
* @param {Array} param0.children - Node children.
|
||||
* @param {Array} param0.order - Node order.
|
||||
*/
|
||||
export const WooMarketingOverviewSection = ( {
|
||||
children,
|
||||
order = 1,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
order?: number;
|
||||
} ) => {
|
||||
return (
|
||||
<Fill name={ EXPERIMENTAL_WC_MARKETING_OVERVIEW_SECTION_SLOT_NAME }>
|
||||
{ ( fillProps: Fill.Props ) => {
|
||||
return createOrderedChildren( children, order, fillProps );
|
||||
} }
|
||||
</Fill>
|
||||
);
|
||||
};
|
||||
|
||||
WooMarketingOverviewSection.Slot = ( {
|
||||
fillProps,
|
||||
}: {
|
||||
fillProps?: Slot.Props;
|
||||
} ) => (
|
||||
<Slot
|
||||
name={ EXPERIMENTAL_WC_MARKETING_OVERVIEW_SECTION_SLOT_NAME }
|
||||
fillProps={ fillProps }
|
||||
>
|
||||
{ sortFillsByOrder }
|
||||
</Slot>
|
||||
);
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
.woocommerce-marketing-overview {
|
||||
max-width: 1032px;
|
||||
margin: 0 auto;
|
||||
|
||||
.components-card {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="231" height="165" fill="none">
|
||||
<defs/>
|
||||
<g clip-path="url(#clip0)">
|
||||
<path fill="#F2F2F2" d="M231 99.263c0 28.829-17.21 38.895-38.438 38.895-21.229 0-38.439-10.066-38.439-38.895 0-28.83 38.439-65.505 38.439-65.505S231 70.433 231 99.263z"/>
|
||||
<path fill="#3F3D56" d="M191.161 133.748l.394-24.127 16.383-29.85-16.321 26.065.177-10.849 11.291-21.596-11.245 18.725.319-19.512 12.091-17.193-12.041 14.125.198-35.778-1.249 47.363.102-1.953-12.293-18.74 12.096 22.49-1.145 21.792-.034-.578-14.172-19.72 14.129 21.763-.143 2.725-.026.041.012.224-2.906 55.287h3.882l.466-28.557 14.094-21.71-14.059 19.563z"/>
|
||||
<path fill="#F2F2F2" d="M20.79 147.025c0 7.796-4.654 10.518-10.395 10.518S0 154.821 0 147.025c0-7.796 10.395-17.714 10.395-17.714s10.394 9.918 10.394 17.714z"/>
|
||||
<path fill="#3F3D56" d="M10.016 156.351l.106-6.525 4.43-8.072-4.413 7.048.048-2.933 3.053-5.84-3.04 5.063.085-5.276 3.27-4.649-3.256 3.819.054-9.675-.338 12.808.027-.528-3.324-5.068 3.271 6.082-.31 5.893-.009-.156-3.832-5.333 3.82 5.885-.038.737-.007.011.003.061-.786 14.951h1.05l.126-7.723 3.812-5.871-3.802 5.291z"/>
|
||||
<path stroke="#3F3D56" stroke-miterlimit="10" stroke-width="2" d="M1 165h230"/>
|
||||
<path fill="#077CB2" d="M210.845 157.666c0 5.273-3.148 7.115-7.031 7.115a12.153 12.153 0 01-.804-.028c-3.504-.247-6.227-2.183-6.227-7.087 0-5.075 6.513-11.479 7.002-11.953l.001-.001.028-.027s7.031 6.708 7.031 11.981z"/>
|
||||
<path fill="#3F3D56" d="M203.557 163.974l2.572-3.579-2.578 3.972-.007.41c-.18-.003-.358-.012-.534-.024l.277-5.276-.002-.041.005-.007.026-.498-2.585-3.982 2.593 3.608.006.106.209-3.987-2.212-4.113 2.239 3.414.218-8.264.001-.028v.027l-.036 6.517 2.202-2.584-2.211 3.145-.058 3.569 2.056-3.425-2.065 3.95-.033 1.984 2.986-4.767-2.997 5.46-.072 4.413zM135.881 37.34h-1.35a.54.54 0 00-.54.538v18.878a.54.54 0 00.54.538h1.35c.299 0 .54-.241.54-.538V37.878a.538.538 0 00-.54-.538zM54.212 21.708h-.656a.354.354 0 00-.354.353v5.863c0 .195.159.353.354.353h.656a.354.354 0 00.354-.353v-5.863a.354.354 0 00-.354-.353zM54.291 33.735h-.738c-.22 0-.4.178-.4.398V44.77c0 .22.18.398.4.398h.738c.22 0 .4-.178.4-.398V34.132a.399.399 0 00-.4-.397zM54.26 49.17h-.702a.38.38 0 00-.38.378v10.775c0 .21.17.379.38.379h.703c.21 0 .38-.17.38-.379V49.548a.38.38 0 00-.38-.379z"/>
|
||||
<path fill="#3F3D56" d="M126.892 0H62.387c-4.645 0-8.411 3.75-8.411 8.377V156.23c0 4.627 3.766 8.377 8.411 8.377h64.505c4.646 0 8.412-3.75 8.412-8.377V8.377c0-4.626-3.766-8.377-8.412-8.377z"/>
|
||||
<path fill="#E6E8EC" d="M97.552 4.916H87.393c-.33 0-.6.267-.6.596v1.104c0 .33.27.596.6.596h10.159c.33 0 .599-.267.599-.596V5.512a.598.598 0 00-.599-.596zM101.176 7.367c.723 0 1.308-.584 1.308-1.303 0-.72-.585-1.303-1.308-1.303-.722 0-1.308.584-1.308 1.303 0 .72.586 1.303 1.308 1.303z"/>
|
||||
<path fill="#fff" d="M130.281 10.72v143.168a6.419 6.419 0 01-1.892 4.548 6.48 6.48 0 01-4.567 1.883H65.457a6.477 6.477 0 01-4.566-1.883 6.42 6.42 0 01-1.893-4.548V10.721a6.41 6.41 0 011.892-4.55 6.462 6.462 0 014.567-1.883h8.734v1.117c0 1.405.561 2.752 1.558 3.745a5.332 5.332 0 003.761 1.552h29.682c1.41 0 2.763-.558 3.761-1.551a5.288 5.288 0 001.558-3.746V4.288h9.311a6.484 6.484 0 014.567 1.884 6.421 6.421 0 011.892 4.549z"/>
|
||||
<path fill="#F2F2F2" d="M130.321 37.477H58.915v81.673h71.406V37.477z"/>
|
||||
<path fill="#FF6584" d="M64.1 130.452l-.377-.338c-1.335-1.221-2.216-2.013-2.216-3a1.393 1.393 0 01.41-1.014 1.413 1.413 0 011.016-.414 1.538 1.538 0 011.166.545 1.54 1.54 0 011.167-.545 1.401 1.401 0 011.016.414 1.394 1.394 0 01.41 1.014c0 .987-.882 1.779-2.217 3l-.376.338z"/>
|
||||
<path fill="#F2F2F2" d="M77.728 129.203l.727.207a2.438 2.438 0 011.665-1.558 2.463 2.463 0 012.232.486l-1.11 1.072h2.77v-2.682l-1.116 1.065a3.226 3.226 0 00-2.964-.679 3.202 3.202 0 00-2.204 2.089z"/>
|
||||
<path fill="#077CB2" d="M63.628 31.375c1.823 0 3.3-1.47 3.3-3.285a3.292 3.292 0 00-3.3-3.286 3.292 3.292 0 00-3.299 3.286 3.292 3.292 0 003.3 3.285zM100.156 26.212H69.519v3.755h30.637v-3.755z"/>
|
||||
<path fill="#F2F2F2" d="M92.144 136.048H61.508v3.755h30.636v-3.755zM126.315 144.234H61.508v3.755h64.807v-3.755zM74.705 130.214l-.812-1.415a2.08 2.08 0 00-.866-2.597 2.1 2.1 0 00-2.704.489 2.085 2.085 0 001.423 3.382 2.1 2.1 0 001.42-.37l1.539.511z"/>
|
||||
<path fill="#2F2E41" d="M88.576 56.632a9.449 9.449 0 00-3.39 1.42 9.408 9.408 0 00-2.587 2.605 9.365 9.365 0 00-1.368 7.054l1.945 9.468 2.178-.444.154-1.003.456.879 13.243-2.7.154-1.003.456.88 1.829-.373-1.945-9.468a9.366 9.366 0 00-1.427-3.376 9.408 9.408 0 00-2.615-2.576 9.45 9.45 0 00-7.083-1.363z"/>
|
||||
<path fill="#9F616A" d="M104.987 85.678l11.312 6.806-1.414 3.286-10.605-4.928.707-5.163z"/>
|
||||
<path fill="#077CB2" d="M90.612 93.423s-22.86 0-26.63 5.868c-3.77 5.867-.707 14.081 11.076 15.959 11.783 1.877 47.604 2.816 50.432-4.225 2.828-7.04.707-11.03.707-11.03s-12.255-8.45-35.585-6.572z"/>
|
||||
<path fill="#077CB2" d="M110.878 99.056l12.491 4.694s5.184-3.755 2.592-7.98c-2.592-4.224-14.376-28.632-14.376-28.632s-3.299-4.694.943-7.276c4.242-2.581 5.892 1.643 5.892 1.643s-.236.939 1.414.235c1.649-.704 4.713 1.643 3.063 5.398-1.649 3.755-2.828 4.694.707 4.459 1.277-.085 2.4-.996 3.313-2.125 1.752-2.165.97-3.91.837-6.686-.227-4.757-.598-7.86-1.793-9.73-1.65-2.581-4.006-4.694-10.134-3.52-6.127 1.173-15.082 7.04-12.961 15.49 2.121 8.449 6.834 17.836 6.834 17.836s3.299 13.143 1.178 16.194z"/>
|
||||
<path fill="#000" d="M110.878 99.056c-2.036.559-4.593.83-7.345.915-4.803.148-10.21-.274-14.526-.753-4.664-.519-8.058-1.1-8.058-1.1 1.577-1.465 4-2.045 6.846-2.256 3.535-.263 7.725.037 11.772-.092a20.41 20.41 0 014.451.334c4.464.847 6.86 2.952 6.86 2.952z" opacity=".1"/>
|
||||
<path fill="#9F616A" d="M90.494 73.826c3.644 0 6.599-2.942 6.599-6.57 0-3.63-2.955-6.572-6.599-6.572s-6.599 2.942-6.599 6.571c0 3.63 2.955 6.572 6.599 6.572z"/>
|
||||
<path fill="#9F616A" d="M89.67 72.536s1.178 4.459 0 4.694c-1.179.234-4.007 1.408-4.007 1.408l3.535 1.408 6.599 6.102 5.655 2.816 2.828-.939v-5.163l-4.242-6.571s-2.828.939-3.534-2.112c-.707-3.051-2.121-4.225-2.121-4.225l-4.714 2.582z"/>
|
||||
<path fill="#9F616A" d="M88.02 78.872H85.19s-4.949 1.643-7.777 5.398c-2.828 3.755-7.305 7.51-7.305 7.51s-3.064 4.225-1.414 10.092c1.65 5.868 4.006 10.092 6.127 8.919 2.121-1.174-3.064-9.623-3.064-9.623l1.414-5.163s7.306-8.449 10.37-8.214c3.063.234 3.299 2.816 3.299 2.816l6.598 1.878 2.121-4.46-1.178-4.693-6.363-4.46z"/>
|
||||
<path fill="#3F3D56" d="M104.987 93.658a8.668 8.668 0 00-.968 2.446 19.018 19.018 0 00-.486 3.867c-4.802.148-10.209-.274-14.526-.753-.382-1.014-.801-2.18-1.211-3.356-1.106-3.178-2.133-6.421-2.133-6.898 0-.939 4.949.704 6.127.47 1.179-.235 1.65-3.99 0-5.868-1.65-1.877-6.48-5.046-6.48-5.046l1.65-.469s3.652 2.699 11.193 7.158c7.541 4.46 4.478-2.581 4.478-2.581l-4.36-6.69h1.885s3.653 6.22 5.538 9.037c1.886 2.816 1.179 5.632-.707 8.683z"/>
|
||||
<path fill="#2F2E41" d="M95.163 58.39l-11.951 2.435 1.5 7.304 11.952-2.436-1.5-7.303z"/>
|
||||
<path fill="#3F3D56" d="M120.894 59.276a3.527 3.527 0 003.535-3.52 3.527 3.527 0 00-3.535-3.521 3.528 3.528 0 00-3.535 3.52 3.528 3.528 0 003.535 3.52z"/>
|
||||
<path fill="#fff" d="M120.894 57.633c1.041 0 1.885-.84 1.885-1.878a1.881 1.881 0 00-1.885-1.877c-1.041 0-1.885.84-1.885 1.877s.844 1.878 1.885 1.878z"/>
|
||||
<path fill="#077CB2" d="M17.142 96.391l-.241 1.852c-.082.627-.163 1.254-.207 1.885-.146 2.098.126 4.205.054 6.307-.055 1.618-.314 3.235-.189 4.849.11 1.428.519 2.815.925 4.189l.58 1.963a.377.377 0 00.175.292c.05.032.106.052.165.058a.38.38 0 00.174-.02l2.566-.232c-.164-.75-.347-1.533-.435-2.296-.07-.604-.112-1.21-.156-1.816a593.73 593.73 0 00-.446-5.664l-.271-3.316c-.118-1.438-.237-2.885-.601-4.282a8.518 8.518 0 00-2.093-3.769z"/>
|
||||
<path fill="#000" d="M17.142 96.391l-.241 1.852c-.082.627-.163 1.254-.207 1.885-.146 2.098.126 4.205.054 6.307-.055 1.618-.314 3.235-.189 4.849.11 1.428.519 2.815.925 4.189l.58 1.963a.377.377 0 00.175.292c.05.032.106.052.165.058a.38.38 0 00.174-.02l2.566-.232c-.164-.75-.347-1.533-.435-2.296-.07-.604-.112-1.21-.156-1.816a593.73 593.73 0 00-.446-5.664l-.271-3.316c-.118-1.438-.237-2.885-.601-4.282a8.518 8.518 0 00-2.093-3.769z" opacity=".1"/>
|
||||
<path fill="#3F3D56" d="M21.714 159.896a7.493 7.493 0 00-.394.912c-.294.861-.34 1.785-.381 2.694-.02.175-.004.353.048.522.126.327.49.492.829.583 1.421.381 2.92.023 4.387-.108 1.439-.128 2.905-.035 4.314-.352.209-.039.41-.108.598-.206.357-.232.624-.578.755-.982.043-.104.072-.212.086-.323.046-.478-.372-.894-.828-1.051-.457-.157-.952-.132-1.433-.181a4.524 4.524 0 01-2.636-1.201 4.493 4.493 0 01-1.358-2.551c-.018-.105-2.374-.043-2.622.092-.29.159-.466.555-.63.823-.264.432-.51.875-.735 1.329z"/>
|
||||
<path fill="#000" d="M21.714 159.896a7.493 7.493 0 00-.394.912c-.294.861-.34 1.785-.381 2.694-.02.175-.004.353.048.522.126.327.49.492.829.583 1.421.381 2.92.023 4.387-.108 1.439-.128 2.905-.035 4.314-.352.209-.039.41-.108.598-.206.357-.232.624-.578.755-.982.043-.104.072-.212.086-.323.046-.478-.372-.894-.828-1.051-.457-.157-.952-.132-1.433-.181a4.524 4.524 0 01-2.636-1.201 4.493 4.493 0 01-1.358-2.551c-.018-.105-2.374-.043-2.622.092-.29.159-.466.555-.63.823-.264.432-.51.875-.735 1.329z" opacity=".1"/>
|
||||
<path fill="#3F3D56" d="M25.621 160.119a7.547 7.547 0 00-.394.911c-.294.862-.339 1.785-.38 2.694a1.28 1.28 0 00.047.522c.126.327.49.493.829.584 1.421.381 2.92.022 4.387-.108 1.439-.129 2.905-.036 4.315-.352.208-.039.41-.109.597-.207a1.85 1.85 0 00.755-.982c.043-.103.072-.212.086-.322.046-.479-.372-.894-.828-1.052-.456-.157-.952-.131-1.432-.18a4.525 4.525 0 01-2.637-1.202 4.49 4.49 0 01-1.358-2.551c-.017-.104-2.374-.043-2.622.093-.29.159-.466.555-.63.822-.264.432-.51.875-.735 1.33z"/>
|
||||
<path fill="#2F2E41" d="M35.813 136.951c.03 4.713-1.346 9.32-2.96 13.75a124.906 124.906 0 01-2.034 5.216c-.425 1.021-.903 2.154-.448 3.162-1.31-.496-2.65-.789-4.033-.56.526-1.068.476-2.312.5-3.501a30.36 30.36 0 01.522-4.81 26.74 26.74 0 012.36-6.954 5.23 5.23 0 00.459-1.465 9.287 9.287 0 00-.195-3.384 20.147 20.147 0 00-2.824-6.892l-.014.141a20.517 20.517 0 01-.355 2.086c-.309 1.46-.67 2.92-.616 4.388a23.52 23.52 0 01-.289 4.653 7.02 7.02 0 01-.47 1.759c-.15.337-.348.654-.467 1.004a4.56 4.56 0 00-.183 1.242c-.176 3.549-.002 8.091.726 11.57a6.806 6.806 0 00-3.53.801c-.88-2.475-1.441-5.989-1.86-8.594a25.337 25.337 0 01.284-9.26c.206-1.016.284-2.053.23-3.088-.094-2.06-.602-4.076-1.108-6.077a13408.387 13408.387 0 01-1.87-7.387c-.243-.963-.488-1.946-.412-2.936a7.301 7.301 0 01.341-1.596 17.816 17.816 0 012.425-4.939c4.22.236 8.49-.157 12.703-.48a.86.86 0 01.597.101.84.84 0 01.24.541l1.583 8.932c.257 1.244.408 2.507.45 3.775.009 1.264-.197 2.524-.15 3.788.065 1.702.388 3.311.398 5.014z"/>
|
||||
<path fill="#000" d="M27.146 131.654c-.082.701-.2 1.397-.355 2.086-.918-1.581-1.907-3.122-2.752-4.742-.218-.418-.425-.841-.634-1.263l-.622-1.266c-.117-.237-.234-.475-.339-.718a5.196 5.196 0 01-.392-1.097c.307-.056 1.064.769 1.292.984.467.458.907.942 1.32 1.449.499.563.957 1.16 1.37 1.788a8.68 8.68 0 011.112 2.779z" opacity=".1"/>
|
||||
<path fill="#EFB7B9" d="M30.663 88.271s-2.345 3.719-1.91 4.497c.433.778-7.382-.692-7.382-.692s4.255-3.718 3.82-5.275c-.433-1.556 5.472 1.47 5.472 1.47z"/>
|
||||
<path fill="#EFB7B9" d="M28.578 89.395c2.926 0 5.297-2.361 5.297-5.275 0-2.913-2.371-5.275-5.297-5.275-2.925 0-5.297 2.362-5.297 5.275 0 2.914 2.372 5.275 5.297 5.275z"/>
|
||||
<path fill="#077CB2" d="M30.74 92.17a5.384 5.384 0 00-2.227-1.79 8.05 8.05 0 00-1.583-.388l-2.113-.37c-.518-.091-1.072-.178-1.553.035-.245.124-.469.286-.662.482-.734.677-1.446 1.422-2.367 1.813-.252.107-.516.186-.767.294-1.03.442-1.801 1.364-2.239 2.393-.459 1.079-.472 2.249-.436 3.42a5.98 5.98 0 00.119 1.204c.107.377.24.746.4 1.104.293.764.537 1.545.733 2.34a73.68 73.68 0 011.365 6.325c.032.306.122.603.267.875.204.271.45.507.73.699.222.183.427.385.612.604.091.094.157.208.194.333.069.314-.21.584-.438.814a3.927 3.927 0 00-.989 1.715.68.68 0 00-.157.474.82.82 0 01.05.374.87.87 0 01-.2.309 1.161 1.161 0 00-.22.932 14.92 14.92 0 005.187 1.21c.438.02.878.02 1.313.074.31.038.616.103.927.139.452.042.906.053 1.359.034 2.358-.046 4.784-.107 6.95-1.038.203-1.106-.236-2.233-.512-3.323-.438-1.734-.548-3.532-.874-5.29-.224-1.204-.548-2.388-.734-3.598-.186-1.21-.23-2.464.105-3.642.296-1.044.385-2.106.692-3.147.306-1.04.521-2.168.175-3.197-.43-1.274-1.758-2.283-3.106-2.213z"/>
|
||||
<path fill="#2F2E41" d="M33.342 81.324c.257-.937-.25-1.912-.855-2.673-.651-.818-1.493-1.555-2.52-1.76-.835-.168-1.7.034-2.549-.033-.752-.06-1.473-.328-2.222-.425a7.067 7.067 0 00-2.03.077 7.58 7.58 0 00-1.852.515c-2.255.995-3.576 3.452-3.883 5.89-.306 2.437.231 4.892.766 7.29l.483 2.167c.502 2.256 1.007 4.524 1.141 6.83.135 2.308-.116 4.676-1.069 6.783a14.607 14.607 0 006.73-7.588c.343-.892.596-1.818.976-2.695.326-.755.744-1.47 1.034-2.24.326-.869.483-1.792.461-2.72-.016-.698-.133-1.392-.113-2.089.02-.697.199-1.425.683-1.93.43-.447 1.041-.663 1.596-.945a6.62 6.62 0 002.23-1.853c.35-.453.368-.647.457-1.17.086-.507.4-.938.536-1.431z"/>
|
||||
<path fill="#EFB7B9" d="M33.35 120.954c.053.542-.046 1.098.073 1.63.09.399.298.763.42 1.154.122.453.184.92.186 1.389.018.393-.013.871-.362 1.056-.153.081-.337.082-.497.15-.16.068-.297.261-.205.408.077.123.251.125.394.154.143.029.3.177.218.297a.252.252 0 01-.128.08 1.485 1.485 0 00-.41.197.413.413 0 00-.169.397.243.243 0 00.137.167.253.253 0 00.215-.005c-.064.136-.099.284-.102.435.559.239 1.188-.074 1.714-.378a6.56 6.56 0 00.66-.418 3.26 3.26 0 001.271-2.784 6.363 6.363 0 00-.124-.796c-.081-.457-.19-.909-.322-1.353-.15-.469-.358-.918-.535-1.377-.377-.979-.62-2.004-.96-2.997a.34.34 0 00-.137-.241.342.342 0 00-.271-.064 4.015 4.015 0 00-1.14.104c-.226.066-.596.21-.697.446-.091.212.061.401.158.583a4.83 4.83 0 01.613 1.766z"/>
|
||||
<path fill="#000" d="M32.99 94.452c.114.114.208.246.281.389.753 1.362.762 2.992.798 4.547.04 1.749.136 3.497.232 5.245l.287 5.226c.028.499.055 1 .126 1.495.338.085.352.52.313.865-.242 2.133-.845 4.328-.214 6.381a.641.641 0 00.148.284 1.709 1.709 0 00-.98-.013c-.314.066-.616.18-.93.252-.399.09-.85.129-1.123.433a21.576 21.576 0 01-.733-2.819c-.149-.868-.19-1.77-.545-2.577-.143-.325-.334-.627-.51-.937-.919-1.632-1.37-3.476-1.81-5.295a7.692 7.692 0 01-.14-2.63c.063-.401.1-.806.11-1.211a9.694 9.694 0 00-.168-1.273 8.525 8.525 0 01.255-3.688c.33-1.11.619-2.279 1.308-3.212.689-.932 2.133-1.446 3.296-1.462z" opacity=".1"/>
|
||||
<path fill="#077CB2" d="M33.251 94.279c.113.114.208.246.28.389.754 1.362.763 2.992.799 4.547.04 1.75.135 3.497.232 5.245l.287 5.226c.028.5.055 1 .126 1.495.338.085.352.52.313.865-.243 2.133-.845 4.328-.214 6.381a.635.635 0 00.147.284 1.709 1.709 0 00-.979-.013c-.314.066-.617.181-.93.252-.399.09-.85.129-1.123.433a21.608 21.608 0 01-.733-2.819c-.15-.868-.19-1.77-.545-2.577-.143-.325-.335-.627-.51-.937-.92-1.631-1.37-3.476-1.81-5.295a7.69 7.69 0 01-.14-2.63c.063-.401.1-.805.11-1.211a9.693 9.693 0 00-.168-1.273 8.523 8.523 0 01.255-3.688c.33-1.11.618-2.279 1.308-3.212.689-.932 2.133-1.446 3.295-1.462z"/>
|
||||
<g fill="#000" opacity=".1">
|
||||
<path d="M32.487 78.651c-.651-.818-1.493-1.555-2.52-1.76-.835-.168-1.7.034-2.549-.033-.752-.06-1.473-.328-2.222-.425a7.067 7.067 0 00-2.03.077 7.58 7.58 0 00-1.852.515c-.32.142-.626.315-.913.515a7.981 7.981 0 011.635-.425 7.07 7.07 0 012.031-.076c.749.096 1.47.365 2.222.424.85.067 1.714-.134 2.55.033 1.027.205 1.868.943 2.519 1.76.606.761 1.113 1.736.855 2.673-.136.493-.45.924-.536 1.432-.09.523-.108.716-.457 1.17a6.639 6.639 0 01-1.608 1.49c.17-.08.34-.158.507-.243a6.62 6.62 0 002.23-1.853c.35-.453.368-.647.457-1.17.086-.507.4-.938.536-1.431.258-.937-.25-1.912-.855-2.673zM28.523 86.724c.09-.094.19-.18.296-.256-.506.244-1.039.459-1.425.861-.484.505-.662 1.232-.683 1.93-.02.697.097 1.39.114 2.088a7.264 7.264 0 01-.462 2.721c-.29.77-.708 1.485-1.034 2.24-.38.876-.633 1.802-.976 2.694a14.617 14.617 0 01-5.564 6.895l-.037.088a14.607 14.607 0 006.73-7.588c.343-.892.596-1.818.976-2.695.326-.755.744-1.47 1.034-2.24.326-.869.483-1.792.461-2.72-.016-.698-.133-1.392-.113-2.089.02-.697.199-1.425.683-1.93z" opacity=".1"/>
|
||||
</g>
|
||||
<path fill="#2F2E41" d="M144.853 164.258c-.252.303-.684.364-1.074.404a6.121 6.121 0 01-1.524.029c-.603-.089-.964.252-1.514-.01-.333-.159-.845.158-1.178 0-.457-.218-2.033-.263-2.31-.687-.278-.425-.25-1.096.189-1.346a2.95 2.95 0 01.385-.15c.736-.292 2.226-2.49 3.008-2.603.388-.018.774.072 1.113.261.772.341 2.134.611 2.471 1.476.262.675.98 1.967.434 2.626zM150.396 164.084c.252.303.684.364 1.074.404a6.121 6.121 0 001.524.029c.603-.089 1.336.426 1.887.164.333-.159.845-.076 1.178-.235.457-.218 2.602.268 2.88-.157.278-.425.249-1.095-.19-1.346a2.896 2.896 0 00-.385-.15c-.735-.291-3.168-2.96-3.95-3.072a2.088 2.088 0 00-1.113.261c-.772.341-2.134.611-2.471 1.476-.262.675-.98 1.967-.434 2.626z"/>
|
||||
<path fill="#2F2E41" d="M152.832 116.161c.241.461.452.938.631 1.427 2.139 5.636 2.318 11.795 2.407 17.82-.008.979.048 1.958.168 2.931.089.616.231 1.24.14 1.856-.079.533-.331 1.059-.231 1.588.045.237.16.457.205.695.034.26.027.524-.022.783l-.286 2.125c-.164 1.21-.541 2.377-.52 3.598.014.833.028 1.668.121 2.496.094.841.271 1.675.28 2.521.006.633-.081 1.264-.137 1.895a19.493 19.493 0 00-.054 2.68c.034.689.113 1.404.48 1.989-.411.586-.818 1.112-1.476 1.399-1.336.584-2.87.386-4.314.177.08-.265.204-.566.088-.818a1.63 1.63 0 00-.248-.336 3.956 3.956 0 01-.643-1.489c-.175-.634-.35-1.317.01-1.926a1.23 1.23 0 00.156-.715c-.299-3.995-1.192-8.129-.37-12.05.088-.419.193-.835.242-1.26.044-.611.051-1.224.022-1.836l-.017-.851c-.043-.909-.006-1.841-.189-2.74-.131-.644-.376-1.291-.074-1.947a1.073 1.073 0 00-.045-.945 17.324 17.324 0 01-1.522-3.498 6.083 6.083 0 00-.32-.996 7.043 7.043 0 00-.633-.969c-.716-1.034-1.144-2.233-1.564-3.417.045-.109.011-.26-.106-.244a.448.448 0 00-.276.205c-.576.77-.624 1.798-.65 2.758-.043.892-.028 1.786.046 2.676.049.467.131.929.173 1.396.055.872.041 1.746-.042 2.615l-.293 4.277c-.04.354-.019.712.063 1.058.188.599.28 1.225.272 1.853a33.277 33.277 0 00.668 7.699c.144.699.31 1.394.432 2.097.287 1.657.326 3.346.365 5.027.023 1.034.04 2.104-.368 3.055-.16.293-.278.607-.349.932a1.992 1.992 0 01-.067.498c-.12.308-.48.439-.804.509a6.514 6.514 0 01-1.853.131 1.08 1.08 0 01-.423-.093c-.231-.12-.354-.373-.53-.565-.38-.413-1.012-.539-1.358-.981-.433-.553-.251-1.353.006-2.005.258-.652.577-1.36.355-2.025-.261-.784-1.188-1.206-1.437-1.994.71-3.177-1.033-6.463-.884-9.714.035-.758.167-1.509.17-2.268.007-1.953-.843-3.853-.703-5.801.355-4.95-1.338-9.892-2.055-14.803a9.639 9.639 0 01-.151-2.224c.106-1.229.679-2.373 1.368-3.399.494-.734 1.088-1.453 1.906-1.797.673-.283 1.428-.282 2.159-.276 1.824.014 3.648.028 5.471.061a18.066 18.066 0 013.699.329c.987.225 1.91.683 2.911.826z"/>
|
||||
<path fill="#A1616A" d="M123.364 93.594c-.176-.861.158-1.782-.104-2.622-.094-.302-.325-.617-.643-.608-.309.008-.518.31-.792.452-.442.23-.979.021-1.42-.21-.441-.23-.933-.49-1.412-.352-.056.298.146.583.366.793.244.184.446.417.593.684.072.29.099.587.081.885.05.682.484 1.269.917 1.8.698.854 1.44 1.673 2.222 2.453-.002-.001 1.186-1.465 1.163-1.72-.021-.242-.421-.467-.566-.662a2.262 2.262 0 01-.405-.893zM158.728 111.618c.106.274.185.557.237.845.306 1.479.499 2.978.69 4.476.05.4.101.801.117 1.203a5.49 5.49 0 01-.573 2.767 3.885 3.885 0 01-2.082 1.868c-.279.098-.667.116-.789-.152a.57.57 0 01.003-.382c.11-.399.333-.757.478-1.144a3.078 3.078 0 00.103-1.809c-.057-.229-.177-.485-.41-.531a2.052 2.052 0 01-.272 1.539.542.542 0 01-.318.268.429.429 0 01-.447-.287 1.237 1.237 0 01-.036-.57c.075-.961.222-1.915.44-2.853.259-1.031.67-2.048.644-3.11-.024-.963-.409-1.908-.301-2.865a.286.286 0 01.055-.164.3.3 0 01.12-.074c.27-.111.548-.203.831-.274.167-.042.738-.24.899-.151.129.071.169.5.234.645.115.257.268.495.377.755zM139.655 83.103a3.939 3.939 0 003.946-3.93c0-2.17-1.767-3.93-3.946-3.93a3.939 3.939 0 00-3.947 3.93c0 2.17 1.767 3.93 3.947 3.93z"/>
|
||||
<path fill="#A1616A" d="M143.191 82.017c0 .25.02.501.06.748.054.25.131.495.23.731.132.385.318.748.553 1.08.238.335.595.566.999.648a28.507 28.507 0 01-8.534 2.456c.466-.308.853-.72 1.132-1.203.148-.31.249-.64.3-.98a8.19 8.19 0 00-.371-4.239c-.049-.134-.097-.298-.004-.406a.38.38 0 01.14-.09 8.832 8.832 0 013.71-.69c.325.002.65.017.975.04.174.013.559-.024.698.103.165.152.082.623.088.83l.024.972z"/>
|
||||
<path fill="#D0CDE1" d="M145.28 84.877a4.24 4.24 0 00-5.052-1.254c-1.879.893-2.804 3.038-4.456 4.299-.376.28-.776.526-1.196.734-.248.136-.513.24-.788.31-.308.068-.631.059-.938.132a2.416 2.416 0 00-1.397 1.08 7.554 7.554 0 01-.514.789c-.172.204-.387.369-.569.564-.657.703-.836 1.713-.986 2.662a12.654 12.654 0 01-1.676 1.472 2.38 2.38 0 01-.622.343c-.578.187-1.216-.05-1.708-.405-.493-.354-.894-.822-1.38-1.185a50.743 50.743 0 01-1.388 1.886.61.61 0 01-.311.254c-.089.299.125.609.286.877l.86 1.44a7.221 7.221 0 001.039 1.45c.411.441.973.713 1.575.763a3.2 3.2 0 001.111-.212c1.639-.549 3.145-1.426 4.705-2.171.283-.161.599-.253.924-.27a.744.744 0 01.731.523c.179.9.356 1.797.602 2.68.232.834.448 1.672.647 2.514.133.515.228 1.04.284 1.569.026.3.028.602.031.904l.033 3.643c.004.393-.221.637-.394.99a2.327 2.327 0 00-.111 1.751c.097.284.249.547.357.827.26.678.25 1.425.236 2.151l-.031 1.662a.358.358 0 00.036.201c.102.158.348.065.503-.042l.781-.539c1.044.144 2.099.194 3.153.152 2.996-.043 5.993.076 8.982.284.998.07 2.029.145 2.972-.187.478-.168.919-.436 1.408-.571.201-.032.393-.11.558-.229.274-.252.201-.695.09-1.049-.098-.31-.209-.615-.333-.916a5.317 5.317 0 01-.311-.857c-.15-.663-.004-1.43-.419-1.97-.928-1.209-.271-3.069-.66-4.54-.126-.476-.313-.935-.431-1.413-.074-.3-.121-.606-.168-.912a10.952 10.952 0 01-.181-2.004c.012-.336.054-.67.097-1.004l.295-2.318c.368.685.624 1.425.758 2.191.269 1.144.599 2.273.99 3.381.222.669.445 1.338.685 2 .152.377.269.767.35 1.165.053.321.054.649.092.972a4.42 4.42 0 00.711 1.941c.071.135.19.24.333.294a.65.65 0 00.291-.012 11.509 11.509 0 002.996-1.032 1.19 1.19 0 00.506-.394c.255-.412-.03-.927-.154-1.395-.132-.502-.101-1.106-.498-1.443-1.382-1.171-.696-3.549-1.388-5.22-.121-.293-.263-.578-.368-.878-.08-.229-.138-.465-.196-.701-.483-1.946-1-3.883-1.551-5.812-.571-2-.509-4.082-1.228-6.034a6.351 6.351 0 00-.527-1.177 3.19 3.19 0 00-.953-.978c-1.043-.687-2.097-1.272-3.322-1.521-1.226-.25-2.552-.21-3.803-.205z"/>
|
||||
<path fill="#2F2E41" d="M136.068 80.135c-.53-.285-.39-1.057-.481-1.65-.185-1.222-1.57-1.946-1.896-3.137.374.045.753-.008 1.099-.155a1.664 1.664 0 00-.221-1.145c1.139-.46 2.061-1.365 3.218-1.78 1.455-.523 3.075-.202 4.542.283.733.243 1.495.557 1.937 1.187.487.69.479 1.6.453 2.444-.041 1.323-.093 2.694-.685 3.88-.753 1.509-2.885 2.907-4.647 2.498-.732-.17-.948-.628-1.257-1.262-.192-.395-.264-.853-.697-1.058-.423-.201-.935.125-1.365-.105z"/>
|
||||
<g fill="#000" opacity=".1">
|
||||
<path d="M152.072 108.316c.005.104.008.209.009.315a8.163 8.163 0 01-.009-.315zM134.978 112.264c.26.678.25 1.425.237 2.15l-.011.569a3.874 3.874 0 00-.226-1.147c-.107-.28-.259-.543-.356-.827a2.32 2.32 0 01.017-1.528c.097.267.237.518.339.783z" opacity=".1"/>
|
||||
</g>
|
||||
<path fill="#000" d="M134.791 74.621l-.004.002a1.65 1.65 0 00-.218-.575 5.12 5.12 0 00.199-.086c.052.216.059.44.023.659z" opacity=".1"/>
|
||||
<path fill="#FF6584" d="M10.42 66.609l-.93-.836c-3.304-3.02-5.485-4.981-5.485-7.423a3.462 3.462 0 011.014-2.51 3.49 3.49 0 012.514-1.025 3.808 3.808 0 012.887 1.35 3.792 3.792 0 012.886-1.35 3.502 3.502 0 012.514 1.025 3.475 3.475 0 011.014 2.51c0 2.442-2.18 4.402-5.484 7.423l-.93.836z"/>
|
||||
<path stroke="#3F3D56" stroke-miterlimit="10" stroke-width="2" d="M12.07 64.496l-.93-.835c-3.303-3.02-5.484-4.981-5.484-7.423a3.462 3.462 0 011.014-2.51 3.49 3.49 0 012.514-1.025 3.808 3.808 0 012.886 1.35 3.792 3.792 0 012.887-1.35 3.502 3.502 0 012.514 1.025 3.474 3.474 0 011.014 2.51c0 2.442-2.181 4.402-5.485 7.423l-.93.835z"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<path fill="#fff" d="M0 0h231v165H0z"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 23 KiB |
|
|
@ -1,85 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Button, Card, CardBody } from '@wordpress/components';
|
||||
import CrossIcon from 'gridicons/dist/cross';
|
||||
import { compose } from '@wordpress/compose';
|
||||
import { withDispatch, withSelect } from '@wordpress/data';
|
||||
import PropTypes from 'prop-types';
|
||||
import { OPTIONS_STORE_NAME } from '@woocommerce/data';
|
||||
import { recordEvent } from '@woocommerce/tracks';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
import WelcomeImage from './images/welcome.svg';
|
||||
|
||||
const WelcomeCard = ( { isHidden, updateOptions } ) => {
|
||||
const hide = () => {
|
||||
updateOptions( {
|
||||
woocommerce_marketing_overview_welcome_hidden: 'yes',
|
||||
} );
|
||||
recordEvent( 'marketing_intro_close', {} );
|
||||
};
|
||||
|
||||
if ( isHidden ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="woocommerce-marketing-overview-welcome-card">
|
||||
<CardBody>
|
||||
<Button
|
||||
label={ __( 'Hide', 'woocommerce' ) }
|
||||
onClick={ hide }
|
||||
className="woocommerce-marketing-overview-welcome-card__hide-button"
|
||||
>
|
||||
<CrossIcon />
|
||||
</Button>
|
||||
<img src={ WelcomeImage } alt="" />
|
||||
<h3>
|
||||
{ __(
|
||||
'Grow your customer base and increase your sales with marketing tools built for WooCommerce',
|
||||
'woocommerce'
|
||||
) }
|
||||
</h3>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
WelcomeCard.propTypes = {
|
||||
/**
|
||||
* Whether the card is hidden.
|
||||
*/
|
||||
isHidden: PropTypes.bool.isRequired,
|
||||
/**
|
||||
* updateOptions function.
|
||||
*/
|
||||
updateOptions: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
// named export
|
||||
export { WelcomeCard };
|
||||
|
||||
// default export
|
||||
export default compose(
|
||||
withSelect( ( select ) => {
|
||||
const { getOption, isOptionsUpdating } = select( OPTIONS_STORE_NAME );
|
||||
const isUpdateRequesting = isOptionsUpdating();
|
||||
|
||||
return {
|
||||
isHidden:
|
||||
getOption( 'woocommerce_marketing_overview_welcome_hidden' ) ===
|
||||
'yes' || isUpdateRequesting,
|
||||
};
|
||||
} ),
|
||||
withDispatch( ( dispatch ) => {
|
||||
const { updateOptions } = dispatch( OPTIONS_STORE_NAME );
|
||||
return {
|
||||
updateOptions,
|
||||
};
|
||||
} )
|
||||
)( WelcomeCard );
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
.woocommerce-marketing-overview-welcome-card {
|
||||
position: relative;
|
||||
|
||||
.components-card__body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 22px;
|
||||
|
||||
@include breakpoint( '>600px' ) {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
@include breakpoint( '>960px' ) {
|
||||
padding: 32px 108px;
|
||||
}
|
||||
}
|
||||
|
||||
&__hide-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px;
|
||||
margin: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
color: $gray-700;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
|
||||
// Ensure that even SVG icons that don't include the .dashicon class are colored.
|
||||
svg {
|
||||
fill: currentColor;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:not(:disabled):not([aria-disabled='true']):not(.is-default):hover {
|
||||
@include button-style__hover;
|
||||
}
|
||||
|
||||
&:not(:disabled):not([aria-disabled='true']):not(.is-default):active {
|
||||
@include button-style__active;
|
||||
}
|
||||
|
||||
&[aria-disabled='true']:focus,
|
||||
&:disabled:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
line-height: 26px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
margin: 1em 0 0;
|
||||
|
||||
@include breakpoint( '>600px' ) {
|
||||
text-align: left;
|
||||
margin: 0 0 0 20px;
|
||||
}
|
||||
|
||||
@include breakpoint( '>960px' ) {
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 231px;
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { recordEvent } from '@woocommerce/tracks';
|
||||
import { render, waitFor } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { createElement } from '@wordpress/element';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { WelcomeCard } from '../index.js';
|
||||
|
||||
jest.mock( '@woocommerce/tracks' );
|
||||
jest.mock( '@woocommerce/settings' );
|
||||
|
||||
describe( 'WelcomeCard hide button', () => {
|
||||
it( 'should record an event when clicked', () => {
|
||||
const { getByRole } = render(
|
||||
<WelcomeCard isHidden={ false } updateOptions={ jest.fn() } />
|
||||
);
|
||||
|
||||
userEvent.click( getByRole( 'button', { name: 'Hide' } ) );
|
||||
|
||||
expect( recordEvent ).toHaveBeenCalledTimes( 1 );
|
||||
expect( recordEvent ).toHaveBeenCalledWith(
|
||||
'marketing_intro_close',
|
||||
{}
|
||||
);
|
||||
} );
|
||||
|
||||
it( 'should update option when clicked', async () => {
|
||||
const mockUpdateOptions = jest.fn();
|
||||
const { getByRole } = render(
|
||||
<WelcomeCard
|
||||
isHidden={ false }
|
||||
updateOptions={ mockUpdateOptions }
|
||||
/>
|
||||
);
|
||||
|
||||
userEvent.click( getByRole( 'button' ) );
|
||||
|
||||
await waitFor( () =>
|
||||
expect( mockUpdateOptions ).toHaveBeenCalledTimes( 1 )
|
||||
);
|
||||
expect( mockUpdateOptions ).toHaveBeenCalledWith( {
|
||||
woocommerce_marketing_overview_welcome_hidden: 'yes',
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
|
||||
describe( 'Component visibility can be toggled', () => {
|
||||
it( 'WelcomeCard should be visible if isHidden is false', () => {
|
||||
const { getByRole } = render(
|
||||
<WelcomeCard isHidden={ false } updateOptions={ jest.fn() } />
|
||||
);
|
||||
|
||||
expect( getByRole( 'button' ) ).toBeInTheDocument();
|
||||
} );
|
||||
|
||||
it( 'WelcomeCard should be hidden if isHidden is true', () => {
|
||||
const { queryByRole } = render(
|
||||
<WelcomeCard isHidden={ true } updateOptions={ jest.fn() } />
|
||||
);
|
||||
|
||||
expect( queryByRole( 'button' ) ).toBeNull();
|
||||
} );
|
||||
} );
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: update
|
||||
|
||||
Make Multichannel Marketing the default new UI for Marketing page; remove classic Marketing page and unused code.
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
"shipping-setting-tour": true,
|
||||
"homescreen": true,
|
||||
"marketing": true,
|
||||
"multichannel-marketing": true,
|
||||
"minified-js": false,
|
||||
"mobile-app-banner": true,
|
||||
"navigation": true,
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
"shipping-setting-tour": true,
|
||||
"homescreen": true,
|
||||
"marketing": true,
|
||||
"multichannel-marketing": true,
|
||||
"minified-js": true,
|
||||
"mobile-app-banner": true,
|
||||
"navigation": true,
|
||||
|
|
|
|||
|
|
@ -167,7 +167,6 @@ class Options extends \WC_REST_Data_Controller {
|
|||
'woocommerce_task_list_dismissed_tasks',
|
||||
'woocommerce_setting_payments_recommendations_hidden',
|
||||
'woocommerce_navigation_favorites_tooltip_hidden',
|
||||
'woocommerce_marketing_overview_welcome_hidden',
|
||||
'woocommerce_admin_transient_notices_queue',
|
||||
'woocommerce_task_list_welcome_modal_dismissed',
|
||||
'woocommerce_welcome_from_calypso_modal_dismissed',
|
||||
|
|
|
|||
|
|
@ -26,7 +26,6 @@ class Features {
|
|||
* @var array
|
||||
*/
|
||||
protected static $optional_features = array(
|
||||
'multichannel-marketing' => array( 'default' => 'no' ),
|
||||
'navigation' => array( 'default' => 'no' ),
|
||||
'settings' => array( 'default' => 'no' ),
|
||||
'analytics' => array( 'default' => 'yes' ),
|
||||
|
|
@ -39,7 +38,6 @@ class Features {
|
|||
* @var array
|
||||
*/
|
||||
protected static $beta_features = array(
|
||||
'multichannel-marketing',
|
||||
'navigation',
|
||||
'new-product-management-experience',
|
||||
'block-editor-feature-enabled',
|
||||
|
|
|
|||
|
|
@ -1,87 +0,0 @@
|
|||
<?php
|
||||
/**
|
||||
* Multichannel Marketing Experience
|
||||
*
|
||||
* @package Woocommerce Admin
|
||||
*/
|
||||
|
||||
namespace Automattic\WooCommerce\Admin\Features\MultichannelMarketing;
|
||||
|
||||
use Automattic\WooCommerce\Internal\Admin\Survey;
|
||||
use Automattic\WooCommerce\Admin\Features\Features;
|
||||
use Automattic\WooCommerce\Internal\Admin\WCAdminAssets;
|
||||
|
||||
/**
|
||||
* Contains logic for Multichannel Marketing.
|
||||
*/
|
||||
class Init {
|
||||
/**
|
||||
* Option name used to toggle this feature.
|
||||
*/
|
||||
const TOGGLE_OPTION_NAME = 'woocommerce_multichannel_marketing_enabled';
|
||||
|
||||
/**
|
||||
* Determines if the feature has been toggled on or off.
|
||||
*
|
||||
* @var boolean
|
||||
*/
|
||||
protected static $is_updated = false;
|
||||
|
||||
/**
|
||||
* Hook into WooCommerce.
|
||||
*/
|
||||
public function __construct() {
|
||||
add_filter( 'woocommerce_settings_features', array( $this, 'add_feature_toggle' ) );
|
||||
add_action( 'update_option_' . self::TOGGLE_OPTION_NAME, array( $this, 'reload_page_on_toggle' ), 10, 2 );
|
||||
add_action( 'woocommerce_settings_saved', array( $this, 'maybe_reload_page' ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the feature toggle to the features settings.
|
||||
*
|
||||
* @param array $features Feature sections.
|
||||
* @return array
|
||||
*/
|
||||
public static function add_feature_toggle( $features ) {
|
||||
$description = __(
|
||||
'Enables the new WooCommerce Multichannel Marketing experience in the Marketing page',
|
||||
'woocommerce'
|
||||
);
|
||||
|
||||
$features[] = array(
|
||||
'title' => __( 'Marketing', 'woocommerce' ),
|
||||
'desc' => $description,
|
||||
'id' => self::TOGGLE_OPTION_NAME,
|
||||
'type' => 'checkbox',
|
||||
'class' => '',
|
||||
);
|
||||
|
||||
return $features;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reloads the page when the option is toggled to make sure all Multichannel Marketing features are loaded.
|
||||
*
|
||||
* @param string $old_value Old value.
|
||||
* @param string $value New value.
|
||||
*/
|
||||
public static function reload_page_on_toggle( $old_value, $value ) {
|
||||
if ( $old_value === $value ) {
|
||||
return;
|
||||
}
|
||||
|
||||
self::$is_updated = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reload the page if the setting has been updated.
|
||||
*/
|
||||
public static function maybe_reload_page() {
|
||||
if ( ! isset( $_SERVER['REQUEST_URI'] ) || ! self::$is_updated ) {
|
||||
return;
|
||||
}
|
||||
|
||||
wp_safe_redirect( wp_unslash( $_SERVER['REQUEST_URI'] ) );
|
||||
exit();
|
||||
}
|
||||
}
|
||||
|
|
@ -44,7 +44,6 @@ class Marketing {
|
|||
add_action( 'admin_menu', array( $this, 'register_pages' ), 5 );
|
||||
add_action( 'admin_menu', array( $this, 'add_parent_menu_item' ), 6 );
|
||||
|
||||
add_filter( 'woocommerce_admin_preload_options', array( $this, 'preload_options' ) );
|
||||
add_filter( 'woocommerce_admin_shared_settings', array( $this, 'component_settings' ), 30 );
|
||||
}
|
||||
|
||||
|
|
@ -141,18 +140,6 @@ class Marketing {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Preload options to prime state of the application.
|
||||
*
|
||||
* @param array $options Array of options to preload.
|
||||
* @return array
|
||||
*/
|
||||
public function preload_options( $options ) {
|
||||
$options[] = 'woocommerce_marketing_overview_welcome_hidden';
|
||||
|
||||
return $options;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add settings for marketing feature.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -1693,15 +1693,6 @@ test.describe('Settings API tests: CRUD', () => {
|
|||
"value": "yes",
|
||||
})
|
||||
]));
|
||||
expect(responseJSON).toEqual(
|
||||
expect.arrayContaining([
|
||||
expect.objectContaining({
|
||||
"id": "woocommerce_multichannel_marketing_enabled",
|
||||
"label": "Marketing",
|
||||
"description": "Enables the new WooCommerce Multichannel Marketing experience in the Marketing page",
|
||||
"type": "checkbox",
|
||||
})
|
||||
]));
|
||||
expect(responseJSON).toEqual(
|
||||
expect.arrayContaining([
|
||||
expect.objectContaining({
|
||||
|
|
|
|||
|
|
@ -3,47 +3,9 @@ const { test, expect } = require( '@playwright/test' );
|
|||
test.describe( 'Marketing page', () => {
|
||||
test.use( { storageState: process.env.ADMINSTATE } );
|
||||
|
||||
test( 'A user can disable the Multichannel Marketing feature in WC Settings and view the Marketing > Overview page without it crashing', async ( {
|
||||
test( 'A user can view the Marketing > Overview page without it crashing', async ( {
|
||||
page,
|
||||
} ) => {
|
||||
// Go to WC Settings > Advanced > Features page.
|
||||
await page.goto(
|
||||
'wp-admin/admin.php?page=wc-settings&tab=advanced§ion=features'
|
||||
);
|
||||
|
||||
// Disable multichannel marketing experience by unchecking the checkbox and clicking on "Save changes" button.
|
||||
await page
|
||||
.locator(
|
||||
'"Enables the new WooCommerce Multichannel Marketing experience in the Marketing page"'
|
||||
)
|
||||
.uncheck();
|
||||
await page.locator( '"Save changes"' ).click();
|
||||
|
||||
// Go to the Marketing page.
|
||||
await page.goto( 'wp-admin/admin.php?page=wc-admin&path=%2Fmarketing' );
|
||||
|
||||
// Users should see the knowledge base card.
|
||||
await expect(
|
||||
page.locator( '"WooCommerce knowledge base"' )
|
||||
).toBeVisible();
|
||||
} );
|
||||
|
||||
test( 'A user can enable the Multichannel Marketing feature in WC Settings and view the Marketing > Overview page without it crashing', async ( {
|
||||
page,
|
||||
} ) => {
|
||||
// Go to WC Settings > Advanced > Features page.
|
||||
await page.goto(
|
||||
'wp-admin/admin.php?page=wc-settings&tab=advanced§ion=features'
|
||||
);
|
||||
|
||||
// Enable multichannel marketing experience by checking the checkbox and clicking on "Save changes" button.
|
||||
await page
|
||||
.locator(
|
||||
'"Enables the new WooCommerce Multichannel Marketing experience in the Marketing page"'
|
||||
)
|
||||
.check();
|
||||
await page.locator( '"Save changes"' ).click();
|
||||
|
||||
// Go to the Marketing page.
|
||||
await page.goto( 'wp-admin/admin.php?page=wc-admin&path=%2Fmarketing' );
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue