Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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 2022-05-03 19:13:26 -07:00 committed by GitHub
parent 6553de469b 8219510fc5
commit 4a6c3300aa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 220 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/CardList.tsx
View File

@ -11,7 +11,7 @@ import './cards.scss';
type Card = {
key: string;
title: string;
content: string;
content: string | JSX.Element;
before: JSX.Element;
};

3
plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/cards.scss
View File

@ -23,6 +23,9 @@
&:hover {
background-color: #fff;
border: 1.5px solid #007cba;
.woocommerce-list__item-title {
color: #1e1e1e;
}
}
.woocommerce-list__item-inner {

22
plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/importTypes.tsx
View File

@ -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 />,
},
];

29
plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/index.tsx
View File

@ -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>
);
};

59
plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/style.scss Normal file
View File

@ -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;
}
}
}
}
}

12
plugins/woocommerce-admin/client/tasks/fills/experimental-products/constants.tsx
View File

@ -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',
};

33
plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/lightbulb_24px.js Normal file
View File

@ -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;

8
plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/lightbulb_24px.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 798 B

32
plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/link_24px.js Normal file
View File

@ -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;

8
plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/link_24px.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 680 B

33
plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/widgets_24px.js Normal file
View File

@ -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;

8
plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/widgets_24px.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 769 B

4
plugins/woocommerce-admin/client/tasks/fills/experimental-products/index.tsx
View File

@ -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
plugins/woocommerce-admin/client/tasks/fills/experimental-products/use-product-types-list-items.tsx
View File

@ -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 ),
} ) ),

4
plugins/woocommerce/changelog/add-32143-add-experimental-import-products Normal file
View File

@ -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.