Merge pull request #32835 from woocommerce/add/32788-add-experimental-import-products-task-followup
Add experimental import products task
This commit is contained in:
Moon
GitHub
commit
4a6c3300aa
|
|
@ -11,7 +11,7 @@ import './cards.scss';
|
|||
type Card = {
|
||||
key: string;
|
||||
title: string;
|
||||
content: string;
|
||||
content: string | JSX.Element;
|
||||
before: JSX.Element;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -23,6 +23,9 @@
|
|||
&:hover {
|
||||
background-color: #fff;
|
||||
border: 1.5px solid #007cba;
|
||||
.woocommerce-list__item-title {
|
||||
color: #1e1e1e;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-list__item-inner {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,9 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
import PageIcon from 'gridicons/dist/pages';
|
||||
import ReblogIcon from 'gridicons/dist/reblog';
|
||||
import { getAdminLink } from '@woocommerce/settings';
|
||||
import interpolateComponents from '@automattic/interpolate-components';
|
||||
import { ExternalLink } from '@wordpress/components';
|
||||
|
||||
export const importTypes = [
|
||||
{
|
||||
|
|
@ -14,14 +17,25 @@ export const importTypes = [
|
|||
'woocommerce'
|
||||
),
|
||||
before: <PageIcon />,
|
||||
href: getAdminLink(
|
||||
'edit.php?post_type=product&page=product_importer&wc_onboarding_active_task=products'
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'from-cart2cart' as const,
|
||||
title: __( 'FROM CART2CART', 'woocommerce' ),
|
||||
content: __(
|
||||
'Migrate all store data like products, customers, orders and much more in no time and in a fully automated way',
|
||||
'woocommerce'
|
||||
),
|
||||
href: 'https://woocommerce.com/products/cart2cart/?utm_medium=product',
|
||||
content: interpolateComponents( {
|
||||
mixedString: __(
|
||||
'Migrate all store data like products, customers, and orders in no time with this 3rd party plugin. {{link}}Learn more{{/link}}',
|
||||
'woocommerce'
|
||||
),
|
||||
components: {
|
||||
link: (
|
||||
<ExternalLink href="https://woocommerce.com/products/cart2cart/?utm_medium=product"></ExternalLink>
|
||||
),
|
||||
},
|
||||
} ),
|
||||
before: <ReblogIcon />,
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -3,18 +3,41 @@
|
|||
*/
|
||||
import { WooOnboardingTask } from '@woocommerce/onboarding';
|
||||
import { registerPlugin } from '@wordpress/plugins';
|
||||
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Icon, chevronUp, chevronDown } from '@wordpress/icons';
|
||||
import { Button } from '@wordpress/components';
|
||||
import { useState } from '@wordpress/element';
|
||||
import { find } from 'lodash';
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Stacks from '../experimental-products/stack';
|
||||
import CardList from './CardList';
|
||||
import { importTypes } from './importTypes';
|
||||
import './style.scss';
|
||||
import useProductTypeListItems from '../experimental-products/use-product-types-list-items';
|
||||
import { getProductTypes } from '../experimental-products/utils';
|
||||
|
||||
const Products = () => {
|
||||
const [ showStacks, setStackVisibility ] = useState< boolean >( false );
|
||||
const StacksComponent = (
|
||||
<Stacks
|
||||
items={ useProductTypeListItems(
|
||||
getProductTypes( [ 'subscription' ] )
|
||||
) }
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
<h1>Import products</h1>
|
||||
<div className="woocommerce-task-import-products">
|
||||
<h1>{ __( 'Import your products', 'woocommerce' ) }</h1>
|
||||
<CardList items={ importTypes } />
|
||||
<div className="woocommerce-task-import-products-stacks">
|
||||
<Button onClick={ () => setStackVisibility( ! showStacks ) }>
|
||||
{ __( 'Or add your products from scratch', 'woocommerce' ) }
|
||||
<Icon icon={ showStacks ? chevronUp : chevronDown } />
|
||||
</Button>
|
||||
{ showStacks && StacksComponent }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,59 @@
|
|||
.woocommerce-products-card-list {
|
||||
.woocommerce-list__item-content {
|
||||
a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
ul li:nth-child(2) {
|
||||
.woocommerce-list__item-inner {
|
||||
padding: 40px 17px 16px 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-task-import-products {
|
||||
max-width: 544px;
|
||||
margin: auto;
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
padding: 0 0 32px 0;
|
||||
}
|
||||
|
||||
button {
|
||||
color: var(--wp-admin-theme-color);
|
||||
&:focus:not(:disabled) {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-task-import-products-stacks {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
padding: 25px 0 12px 0;
|
||||
.woocommerce-list__item {
|
||||
.woocommerce-list__item-title {
|
||||
color: #1e1e1e;
|
||||
}
|
||||
.woocommerce-list__item-content {
|
||||
color: #757575;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-list__item-before {
|
||||
border: 0;
|
||||
background: none;
|
||||
svg {
|
||||
fill: #bbb;
|
||||
rect {
|
||||
fill: #bbb;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -11,9 +11,9 @@ import { Icon, chevronRight } from '@wordpress/icons';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Link from './icon/link_24px.svg';
|
||||
import Widget from './icon/widgets_24px.svg';
|
||||
import LightBulb from './icon/lightbulb_24px.svg';
|
||||
import Link from './icon/link_24px.js';
|
||||
import Widget from './icon/widgets_24px.js';
|
||||
import LightBulb from './icon/lightbulb_24px.js';
|
||||
|
||||
export const productTypes = Object.freeze( [
|
||||
{
|
||||
|
|
@ -60,14 +60,14 @@ export const productTypes = Object.freeze( [
|
|||
key: 'grouped' as const,
|
||||
title: __( 'Grouped product', 'woocommerce' ),
|
||||
content: __( 'A collection of related products.', 'woocommerce' ),
|
||||
before: <img src={ Widget } alt="Widget" />,
|
||||
before: <Widget />,
|
||||
after: <Icon icon={ chevronRight } />,
|
||||
},
|
||||
{
|
||||
key: 'external' as const,
|
||||
title: __( 'External product', 'woocommerce' ),
|
||||
content: __( 'Link a product to an external website.', 'woocommerce' ),
|
||||
before: <img src={ Link } alt="Link" />,
|
||||
before: <Link />,
|
||||
after: <Icon icon={ chevronRight } />,
|
||||
},
|
||||
] );
|
||||
|
|
@ -78,7 +78,7 @@ export const LoadSampleProductType = {
|
|||
content: __(
|
||||
'Load sample products and see what they look like in your store.'
|
||||
),
|
||||
before: <img src={ LightBulb } alt="Light Bulb" />,
|
||||
before: <LightBulb />,
|
||||
after: <Icon icon={ chevronRight } />,
|
||||
className: 'woocommerce-products-list__item-load-sample-product',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
const Lightbulb = () => {
|
||||
return (
|
||||
<svg
|
||||
width="25"
|
||||
height="24"
|
||||
viewBox="0 0 25 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<mask
|
||||
id="mask0_1133_132689"
|
||||
style={ { maskType: 'alpha' } }
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="5"
|
||||
y="2"
|
||||
width="15"
|
||||
height="20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M12.5 2C8.64 2 5.5 5.14 5.5 9C5.5 11.38 6.69 13.47 8.5 14.74V17C8.5 17.55 8.95 18 9.5 18H15.5C16.05 18 16.5 17.55 16.5 17V14.74C18.31 13.47 19.5 11.38 19.5 9C19.5 5.14 16.36 2 12.5 2ZM9.5 21C9.5 21.55 9.95 22 10.5 22H14.5C15.05 22 15.5 21.55 15.5 21V20H9.5V21ZM14.5 13.7L15.35 13.1C16.7 12.16 17.5 10.63 17.5 9C17.5 6.24 15.26 4 12.5 4C9.74 4 7.5 6.24 7.5 9C7.5 10.63 8.3 12.16 9.65 13.1L10.5 13.7V16H14.5V13.7Z"
|
||||
fill="white"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_1133_132689)">
|
||||
<rect x="0.5" width="24" height="24" fill="#757575" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default Lightbulb;
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_1133_132689" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="5" y="2" width="15" height="20">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 2C8.64 2 5.5 5.14 5.5 9C5.5 11.38 6.69 13.47 8.5 14.74V17C8.5 17.55 8.95 18 9.5 18H15.5C16.05 18 16.5 17.55 16.5 17V14.74C18.31 13.47 19.5 11.38 19.5 9C19.5 5.14 16.36 2 12.5 2ZM9.5 21C9.5 21.55 9.95 22 10.5 22H14.5C15.05 22 15.5 21.55 15.5 21V20H9.5V21ZM14.5 13.7L15.35 13.1C16.7 12.16 17.5 10.63 17.5 9C17.5 6.24 15.26 4 12.5 4C9.74 4 7.5 6.24 7.5 9C7.5 10.63 8.3 12.16 9.65 13.1L10.5 13.7V16H14.5V13.7Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_1133_132689)">
|
||||
<rect x="0.5" width="24" height="24" fill="#757575"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 798 B |
|
|
@ -0,0 +1,32 @@
|
|||
const Link = () => {
|
||||
return (
|
||||
<svg
|
||||
width="25"
|
||||
height="24"
|
||||
viewBox="0 0 25 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<mask
|
||||
id="mask0_1133_132681"
|
||||
style={ { maskType: 'alpha' } }
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="2"
|
||||
y="7"
|
||||
width="21"
|
||||
height="10"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M11.5 15H7.5C5.85 15 4.5 13.65 4.5 12C4.5 10.35 5.85 9 7.5 9H11.5V7H7.5C4.74 7 2.5 9.24 2.5 12C2.5 14.76 4.74 17 7.5 17H11.5V15ZM17.5 7H13.5V9H17.5C19.15 9 20.5 10.35 20.5 12C20.5 13.65 19.15 15 17.5 15H13.5V17H17.5C20.26 17 22.5 14.76 22.5 12C22.5 9.24 20.26 7 17.5 7ZM16.5 11H8.5V13H16.5V11Z"
|
||||
fill="white"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_1133_132681)">
|
||||
<rect x="0.5" width="24" height="24" fill="#007CBA" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
export default Link;
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_1133_132681" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="7" width="21" height="10">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 15H7.5C5.85 15 4.5 13.65 4.5 12C4.5 10.35 5.85 9 7.5 9H11.5V7H7.5C4.74 7 2.5 9.24 2.5 12C2.5 14.76 4.74 17 7.5 17H11.5V15ZM17.5 7H13.5V9H17.5C19.15 9 20.5 10.35 20.5 12C20.5 13.65 19.15 15 17.5 15H13.5V17H17.5C20.26 17 22.5 14.76 22.5 12C22.5 9.24 20.26 7 17.5 7ZM16.5 11H8.5V13H16.5V11Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_1133_132681)">
|
||||
<rect x="0.5" width="24" height="24" fill="#007CBA"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 680 B |
|
|
@ -0,0 +1,33 @@
|
|||
const Widget = () => {
|
||||
return (
|
||||
<svg
|
||||
width="25"
|
||||
height="24"
|
||||
viewBox="0 0 25 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<mask
|
||||
id="mask0_1133_132667"
|
||||
style={ { maskType: 'alpha' } }
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="2"
|
||||
y="2"
|
||||
width="21"
|
||||
height="20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M16.5 2.34497L10.84 7.99497V3.65497H2.84003V11.655H10.84V7.99497L16.5 13.655H12.84V21.655H20.84V13.655H16.5L22.16 7.99497L16.5 2.34497ZM19.33 8.00497L16.5 5.17497L13.67 8.00497L16.5 10.835L19.33 8.00497ZM8.84003 9.65497V5.65497H4.84003V9.65497H8.84003ZM18.84 15.655V19.655H14.84V15.655H18.84ZM8.84003 19.655V15.655H4.84003V19.655H8.84003ZM2.84003 13.655H10.84V21.655H2.84003V13.655Z"
|
||||
fill="white"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_1133_132667)">
|
||||
<rect x="0.5" width="24" height="24" fill="#007CBA" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default Widget;
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_1133_132667" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="21" height="20">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 2.34497L10.84 7.99497V3.65497H2.84003V11.655H10.84V7.99497L16.5 13.655H12.84V21.655H20.84V13.655H16.5L22.16 7.99497L16.5 2.34497ZM19.33 8.00497L16.5 5.17497L13.67 8.00497L16.5 10.835L19.33 8.00497ZM8.84003 9.65497V5.65497H4.84003V9.65497H8.84003ZM18.84 15.655V19.655H14.84V15.655H18.84ZM8.84003 19.655V15.655H4.84003V19.655H8.84003ZM2.84003 13.655H10.84V21.655H2.84003V13.655Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_1133_132667)">
|
||||
<rect x="0.5" width="24" height="24" fill="#007CBA"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 769 B |
|
|
@ -14,7 +14,7 @@ import { Icon, chevronDown, chevronUp } from '@wordpress/icons';
|
|||
*/
|
||||
import './index.scss';
|
||||
import { getAdminSetting } from '~/utils/admin-settings';
|
||||
import { getSurfacedProductTypeKeys } from './utils';
|
||||
import { getSurfacedProductTypeKeys, getProductTypes } from './utils';
|
||||
import useProductTypeListItems from './use-product-types-list-items';
|
||||
import Stack from './stack';
|
||||
import Footer from './footer';
|
||||
|
|
@ -50,7 +50,7 @@ const ViewControlButton: React.FC< {
|
|||
export const Products = () => {
|
||||
const [ isExpanded, setIsExpanded ] = useState< boolean >( false );
|
||||
|
||||
const productTypes = useProductTypeListItems();
|
||||
const productTypes = useProductTypeListItems( getProductTypes() );
|
||||
const surfacedProductTypeKeys = getSurfacedProductTypeKeys(
|
||||
getOnboardingProductType()
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,15 +6,15 @@ import { useMemo } from '@wordpress/element';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { getProductTypes } from './utils';
|
||||
import useCreateProductByType from './use-create-product-by-type';
|
||||
import { ProductType } from './constants';
|
||||
|
||||
const useProductTypeListItems = () => {
|
||||
const useProductTypeListItems = ( _productTypes: ProductType[] ) => {
|
||||
const { createProductByType } = useCreateProductByType();
|
||||
|
||||
const productTypes = useMemo(
|
||||
() =>
|
||||
getProductTypes().map( ( productType ) => ( {
|
||||
_productTypes.map( ( productType ) => ( {
|
||||
...productType,
|
||||
onClick: () => createProductByType( productType.key ),
|
||||
} ) ),
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: add
|
||||
|
||||
Add experimental import product task, which replaces the default add products task when selling elsewhere is selected during the OBW.
|
||||
Loading…
Reference in New Issue