Migrate @woocommerce/onboarding to TS

This commit is contained in:
Chi-Hsuan Huang 2022-05-23 13:25:08 +08:00
parent bad3444438
commit 76737b12f7
20 changed files with 89 additions and 23 deletions

View File

@ -28,8 +28,8 @@
"@automattic/interpolate-components": "^1.2.0", "@automattic/interpolate-components": "^1.2.0",
"@woocommerce/components": "workspace:*", "@woocommerce/components": "workspace:*",
"@woocommerce/experimental": "workspace:*", "@woocommerce/experimental": "workspace:*",
"@woocommerce/tracks": "workspace:*",
"@woocommerce/explat": "workspace:*", "@woocommerce/explat": "workspace:*",
"@woocommerce/tracks": "workspace:*",
"@wordpress/components": "^19.5.0", "@wordpress/components": "^19.5.0",
"@wordpress/element": "^4.1.1", "@wordpress/element": "^4.1.1",
"@wordpress/i18n": "^4.3.1", "@wordpress/i18n": "^4.3.1",
@ -38,6 +38,7 @@
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.17.5", "@babel/core": "^7.17.5",
"@types/wordpress__data": "^6.0.0",
"@woocommerce/eslint-plugin": "workspace:*", "@woocommerce/eslint-plugin": "workspace:*",
"@woocommerce/style-build": "workspace:*", "@woocommerce/style-build": "workspace:*",
"@wordpress/browserslist-config": "^4.1.1", "@wordpress/browserslist-config": "^4.1.1",

View File

@ -4,7 +4,13 @@
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { createElement } from '@wordpress/element'; import { createElement } from '@wordpress/element';
export const RecommendedRibbon = ( { isLocalPartner = false } ) => { type RecommendedRibbonProps = {
isLocalPartner?: boolean;
};
export const RecommendedRibbon: React.VFC< RecommendedRibbonProps > = ( {
isLocalPartner = false,
} ) => {
const text = isLocalPartner const text = isLocalPartner
? __( 'Local Partner', 'woocommerce' ) ? __( 'Local Partner', 'woocommerce' )
: __( 'Recommended', 'woocommerce' ); : __( 'Recommended', 'woocommerce' );

View File

@ -6,7 +6,7 @@ import NoticeOutlineIcon from 'gridicons/dist/notice-outline';
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { Text } from '@woocommerce/experimental'; import { Text } from '@woocommerce/experimental';
export const SetupRequired = () => { export const SetupRequired: React.VFC = () => {
return ( return (
<span className="woocommerce-task-payment__setup_required"> <span className="woocommerce-task-payment__setup_required">
<NoticeOutlineIcon /> <NoticeOutlineIcon />

View File

@ -19,7 +19,7 @@ import Discover from '../images/cards/discover.js';
import JCB from '../images/cards/jcb.js'; import JCB from '../images/cards/jcb.js';
import UnionPay from '../images/cards/unionpay.js'; import UnionPay from '../images/cards/unionpay.js';
export const WCPayAcceptedMethods = () => ( export const WCPayAcceptedMethods: React.VFC = () => (
<> <>
<Text as="h3" variant="label" weight="600" size="12" lineHeight="16px"> <Text as="h3" variant="label" weight="600" size="12" lineHeight="16px">
{ __( 'Accepted payment methods', 'woocommerce' ) } { __( 'Accepted payment methods', 'woocommerce' ) }

View File

@ -13,7 +13,12 @@ import { __ } from '@wordpress/i18n';
import { WCPayAcceptedMethods } from '../WCPayAcceptedMethods'; import { WCPayAcceptedMethods } from '../WCPayAcceptedMethods';
import WCPayLogo from '../../images/wcpay-logo'; import WCPayLogo from '../../images/wcpay-logo';
export const WCPayCardHeader = ( { type WCPayCardHeaderProps = {
logoWidth?: number;
logoHeight?: number;
};
export const WCPayCardHeader: React.FC< WCPayCardHeaderProps > = ( {
logoWidth = 196, logoWidth = 196,
logoHeight = 41, logoHeight = 41,
children, children,
@ -24,7 +29,13 @@ export const WCPayCardHeader = ( {
</CardHeader> </CardHeader>
); );
export const WCPayCardBody = ( { type WCPayCardBodyProps = {
description: string;
heading: string;
onLinkClick?: () => void;
};
export const WCPayCardBody: React.VFC< WCPayCardBodyProps > = ( {
description, description,
heading, heading,
onLinkClick = () => {}, onLinkClick = () => {},
@ -54,10 +65,10 @@ export const WCPayCardBody = ( {
</CardBody> </CardBody>
); );
export const WCPayCardFooter = ( { children } ) => ( export const WCPayCardFooter: React.FC = ( { children } ) => (
<CardFooter>{ children }</CardFooter> <CardFooter>{ children }</CardFooter>
); );
export const WCPayCard = ( { children } ) => { export const WCPayCard: React.FC = ( { children } ) => {
return <Card className="woocommerce-task-payment-wcpay">{ children }</Card>; return <Card className="woocommerce-task-payment-wcpay">{ children }</Card>;
}; };

View File

@ -11,16 +11,16 @@ import { Slot, Fill } from '@wordpress/components';
* @param {string} taskId Task id. * @param {string} taskId Task id.
* @param {string} variant The variant of the task. * @param {string} variant The variant of the task.
*/ */
export const trackView = async ( taskId, variant ) => { export const trackView = async ( taskId: string, variant?: string ) => {
const activePlugins = wp.data const activePlugins: string[] = wp.data
.select( 'wc/admin/plugins' ) .select( 'wc/admin/plugins' )
.getActivePlugins(); .getActivePlugins();
const installedPlugins = wp.data const installedPlugins: string[] = wp.data
.select( 'wc/admin/plugins' ) .select( 'wc/admin/plugins' )
.getInstalledPlugins(); .getInstalledPlugins();
const isJetpackConnected = wp.data const isJetpackConnected: boolean = wp.data
.select( 'wc/admin/plugins' ) .select( 'wc/admin/plugins' )
.isJetpackConnected(); .isJetpackConnected();
@ -35,18 +35,29 @@ export const trackView = async ( taskId, variant ) => {
} ); } );
}; };
let experimentalVariant; let experimentalVariant: string | undefined;
type WooOnboardingTaskProps = {
id: string;
variant?: string;
};
type WooOnboardingTaskSlotProps = Slot.Props & {
id: string;
};
/** /**
* A Fill for adding Onboarding tasks. * A Fill for adding Onboarding tasks.
* *
* @slotFill WooOnboardingTask * @slotFill WooOnboardingTask
* @scope woocommerce-tasks * @scope woocommerce-tasks
* @param {Object} props React props. * @param {Object} props React props.
* @param {string} props.variant The variant of the task. * @param {string} [props.variant] The variant of the task.
* @param {Object} props.children React component children * @param {Object} props.children React component children
* @param {string} props.id Task id. * @param {string} props.id Task id.
*/ */
const WooOnboardingTask = ( { id, variant, ...props } ) => { const WooOnboardingTask: React.FC< WooOnboardingTaskProps > & {
Slot: React.VFC< WooOnboardingTaskSlotProps >;
} = ( { id, variant, ...props } ) => {
useEffect( () => { useEffect( () => {
if ( id === 'products' ) { if ( id === 'products' ) {
experimentalVariant = variant; experimentalVariant = variant;
@ -58,7 +69,7 @@ const WooOnboardingTask = ( { id, variant, ...props } ) => {
// We need this here just in case the experiment assignment takes awhile to load, so that we don't fire trackView with a blank experimentalVariant // We need this here just in case the experiment assignment takes awhile to load, so that we don't fire trackView with a blank experimentalVariant
// Remove all of the code in this file related to experiments and variants when the product task experiment concludes and never speak of the existence of this code to anyone // Remove all of the code in this file related to experiments and variants when the product task experiment concludes and never speak of the existence of this code to anyone
const pollForExperimentalVariant = ( id, count ) => { const pollForExperimentalVariant = ( id: string, count: number ) => {
if ( count > 20 ) { if ( count > 20 ) {
trackView( id, 'experiment_timed_out' ); // if we can't fetch experiment after 4 seconds, give up trackView( id, 'experiment_timed_out' ); // if we can't fetch experiment after 4 seconds, give up
} else if ( experimentalVariant ) { } else if ( experimentalVariant ) {

View File

@ -4,6 +4,10 @@
import { createElement } from '@wordpress/element'; import { createElement } from '@wordpress/element';
import { Slot, Fill } from '@wordpress/components'; import { Slot, Fill } from '@wordpress/components';
type WooOnboardingTaskListItemProps = {
id: string;
};
/** /**
* A Fill for adding Onboarding Task List items. * A Fill for adding Onboarding Task List items.
* *
@ -12,7 +16,9 @@ import { Slot, Fill } from '@wordpress/components';
* @param {Object} props React props. * @param {Object} props React props.
* @param {string} props.id Task id. * @param {string} props.id Task id.
*/ */
export const WooOnboardingTaskListItem = ( { id, ...props } ) => ( export const WooOnboardingTaskListItem: React.FC< WooOnboardingTaskListItemProps > & {
Slot: React.VFC< Slot.Props & { id: string } >;
} = ( { id, ...props } ) => (
<Fill name={ 'woocommerce_onboarding_task_list_item_' + id } { ...props } /> <Fill name={ 'woocommerce_onboarding_task_list_item_' + id } { ...props } />
); );

View File

@ -4,6 +4,10 @@
import { createElement } from '@wordpress/element'; import { createElement } from '@wordpress/element';
import { Slot, Fill } from '@wordpress/components'; import { Slot, Fill } from '@wordpress/components';
type WooPaymentGatewayConfigureProps = {
id: string;
};
/** /**
* WooCommerce Payment Gateway configuration * WooCommerce Payment Gateway configuration
* *
@ -12,7 +16,9 @@ import { Slot, Fill } from '@wordpress/components';
* @param {Object} props React props. * @param {Object} props React props.
* @param {string} props.id gateway id. * @param {string} props.id gateway id.
*/ */
export const WooPaymentGatewayConfigure = ( { id, ...props } ) => ( export const WooPaymentGatewayConfigure: React.FC< WooPaymentGatewayConfigureProps > & {
Slot: React.VFC< Slot.Props & { id: string } >;
} = ( { id, ...props } ) => (
<Fill name={ 'woocommerce_payment_gateway_configure_' + id } { ...props } /> <Fill name={ 'woocommerce_payment_gateway_configure_' + id } { ...props } />
); );

View File

@ -4,6 +4,9 @@
import { createElement } from '@wordpress/element'; import { createElement } from '@wordpress/element';
import { Slot, Fill } from '@wordpress/components'; import { Slot, Fill } from '@wordpress/components';
type WooPaymentGatewaySetupProps = {
id: string;
};
/** /**
* WooCommerce Payment Gateway setup. * WooCommerce Payment Gateway setup.
* *
@ -12,7 +15,9 @@ import { Slot, Fill } from '@wordpress/components';
* @param {Object} props React props. * @param {Object} props React props.
* @param {string} props.id Setup id. * @param {string} props.id Setup id.
*/ */
export const WooPaymentGatewaySetup = ( { id, ...props } ) => ( export const WooPaymentGatewaySetup: React.FC< WooPaymentGatewaySetupProps > & {
Slot: React.VFC< Slot.Props & { id: string } >;
} = ( { id, ...props } ) => (
<Fill name={ 'woocommerce_payment_gateway_setup_' + id } { ...props } /> <Fill name={ 'woocommerce_payment_gateway_setup_' + id } { ...props } />
); );

View File

@ -0,0 +1,10 @@
import wpData from '@wordpress/data';
declare global {
const wp: {
data: typeof wpData
};
}
/*~ If your module exports nothing, you'll need this line. Otherwise, delete it */
export {};

View File

@ -0,0 +1,7 @@
declare module 'gridicons/dist/*' {
const value: React.ElementType< {
size?: 12 | 18 | 24 | 36 | 48 | 54 | 72;
onClick?: ( event: MouseEvent | KeyboardEvent ) => void;
} >;
export default value;
}

View File

@ -1059,6 +1059,7 @@ importers:
specifiers: specifiers:
'@automattic/interpolate-components': ^1.2.0 '@automattic/interpolate-components': ^1.2.0
'@babel/core': ^7.17.5 '@babel/core': ^7.17.5
'@types/wordpress__data': ^6.0.0
'@woocommerce/components': workspace:* '@woocommerce/components': workspace:*
'@woocommerce/eslint-plugin': workspace:* '@woocommerce/eslint-plugin': workspace:*
'@woocommerce/experimental': workspace:* '@woocommerce/experimental': workspace:*
@ -1095,6 +1096,7 @@ importers:
gridicons: 3.4.0 gridicons: 3.4.0
devDependencies: devDependencies:
'@babel/core': 7.17.8 '@babel/core': 7.17.8
'@types/wordpress__data': 6.0.0
'@woocommerce/eslint-plugin': link:../eslint-plugin '@woocommerce/eslint-plugin': link:../eslint-plugin
'@woocommerce/style-build': link:../style-build '@woocommerce/style-build': link:../style-build
'@wordpress/browserslist-config': 4.1.2 '@wordpress/browserslist-config': 4.1.2
@ -13711,6 +13713,7 @@ packages:
re-resizable: 4.11.0 re-resizable: 4.11.0
transitivePeerDependencies: transitivePeerDependencies:
- react - react
- react-dom
dev: true dev: true
/@types/wordpress__compose/4.0.1: /@types/wordpress__compose/4.0.1:
@ -18577,7 +18580,7 @@ packages:
dev: true dev: true
/buffer-crc32/0.2.13: /buffer-crc32/0.2.13:
resolution: {integrity: sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=} resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
/buffer-fill/1.0.0: /buffer-fill/1.0.0:
resolution: {integrity: sha1-+PeLdniYiO858gXNY39o5wISKyw=} resolution: {integrity: sha1-+PeLdniYiO858gXNY39o5wISKyw=}