WooCommerce Labels - fix the build errors (#17755)

* Fixed the PropTypes imports

* Conditionally rendering the labels UI in order details

* Fixed some of the imports

* Copied over ActionButtons component

* Fixed ActionButtons imports

* Fixed /lib imports

* Fixed build errors for missing components

* Fixed the rest of the imports and copied over missing components

* Tweaked the main label view and purchase label to work

* Merged the selectors files, removed reselect usages

* Minor fix

* Added siteId and orderId to all action definitions

* Made the modal render

* Address normalization fix

* Made the packages step work

* Tweaked the rates step

* Made the label items not throw errors

* Added CSS import for the label

* Fixed print url and cross-browser warnings

* Style fixes

* Fixed the spinners

* Replaced formatDate with moment's format method

* Fixed a typo in CSS class selector

* Made the refund and reprint dialogs render

* Changed the order of orderId, siteId arguments in actions to match selectors

client/extensions/woocommerce/app/order/index.js

@@ -21,7 +21,6 @@ import OrderCustomer from './order-customer';
 import OrderDetails from './order-details';
 import OrderNotes from './order-notes';
 import { updateOrder } from 'woocommerce/state/sites/orders/actions';
-import QueryLabels from 'woocommerce/woocommerce-services/components/query-labels';
 
 class Order extends Component {
 	state = {
@@ -78,7 +77,6 @@ class Order extends Component {
 				</ActionHeader>
 
 				<div className="order__container">
-					<QueryLabels orderId={ order.id } />
 					<OrderDetails order={ order } onUpdate={ this.onUpdate } site={ site } />
 					<OrderNotes orderId={ order.id } siteId={ site.ID } />
 					<OrderCustomer order={ order } />

client/extensions/woocommerce/app/order/order-details/index.js

@@ -9,6 +9,7 @@ import { localize } from 'i18n-calypso';
  * Internal dependencies
  */
 import Card from 'components/card';
+import config from 'config';
 import { isOrderWaitingPayment } from 'woocommerce/lib/order-status';
 import OrderCreated from '../order-created';
 import OrderDetailsTable from './table';
@@ -17,6 +18,7 @@ import OrderRefundCard from '../order-refund';
 import OrderStatus from 'woocommerce/components/order-status';
 import OrderStatusSelect from 'woocommerce/components/order-status/select';
 import SectionHeader from 'components/section-header';
+import ShippingLabel from 'woocommerce/woocommerce-services/views/shipping-label';
 
 class OrderDetails extends Component {
 	static propTypes = {
@@ -55,6 +57,8 @@ class OrderDetails extends Component {
 			return null;
 		}
 
+		const wcsEnabled = config.isEnabled( 'woocommerce/extension-wcservices' );
+
 		return (
 			<div className="order-details">
 				<SectionHeader label={ translate( 'Order %(orderId)s Details', { args: { orderId: `#${ order.id }` } } ) }>
@@ -65,6 +69,7 @@ class OrderDetails extends Component {
 					<OrderDetailsTable order={ order } site={ site } />
 					<OrderRefundCard order={ order } site={ site } />
 					<OrderFulfillment order={ order } site={ site } />
+					{ wcsEnabled && <ShippingLabel siteId={ site.ID } orderId={ order.id } /> }
 				</Card>
 			</div>
 		);

client/extensions/woocommerce/woocommerce-services/components/action-buttons/index.js

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import FormButton from 'components/forms/form-button';
+import FormButtonsBar from 'components/forms/form-buttons-bar';
+
+const ActionButtons = ( { buttons, className } ) => {
+	return (
+		<FormButtonsBar className={ className }>
+			{ buttons.map( ( button, idx ) => (
+				<FormButton
+					type="button"
+					key={ idx }
+					disabled={ button.isDisabled }
+					onClick={ button.onClick }
+					isPrimary={ Boolean( button.isPrimary ) }>
+					{ button.label }
+				</FormButton>
+			) ) }
+		</FormButtonsBar>
+	);
+};
+
+ActionButtons.propTypes = {
+	buttons: PropTypes.arrayOf(
+		PropTypes.shape( {
+			label: PropTypes.node.isRequired,
+			onClick: PropTypes.func.isRequired,
+			isPrimary: PropTypes.bool,
+			isDisabled: PropTypes.bool,
+		} )
+	).isRequired,
+	className: PropTypes.string,
+};
+
+export default ActionButtons;

client/extensions/woocommerce/woocommerce-services/components/country-dropdown/index.js

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import Dropdown from '../dropdown';
+
+const CountryDropdown = ( props ) => {
+	const valuesMap = {};
+	Object.keys( props.countriesData ).forEach( ( countryCode ) => {
+		valuesMap[ countryCode ] = props.countriesData[ countryCode ].name;
+	} );
+	return (
+		<Dropdown
+			{ ...props }
+			valuesMap={ valuesMap }
+			/>
+	);
+};
+
+CountryDropdown.propTypes = {
+	id: PropTypes.string.isRequired,
+	countriesData: PropTypes.object.isRequired,
+	title: PropTypes.string,
+	description: PropTypes.string,
+	value: PropTypes.string.isRequired,
+	updateValue: PropTypes.func.isRequired,
+	error: PropTypes.oneOfType( [
+		PropTypes.string,
+		PropTypes.bool,
+	] ),
+	className: PropTypes.string,
+};
+
+export default CountryDropdown;

client/extensions/woocommerce/woocommerce-services/components/dropdown/index.js

@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import FormFieldset from 'components/forms/form-fieldset';
+import FormSelect from 'components/forms/form-select';
+import FormLegend from 'components/forms/form-legend';
+import FieldError from '../field-error';
+import FieldDescription from '../field-description';
+
+const Dropdown = ( { id, valuesMap, title, description, value, updateValue, error, disabled, className } ) => {
+	const onChange = ( event ) => updateValue( event.target.value );
+
+	return (
+		<FormFieldset className={ className }>
+			<FormLegend>{ title }</FormLegend>
+			<FormSelect
+				id={ id }
+				name={ id }
+				value={ value }
+				onChange={ onChange }
+				disabled={ Boolean( disabled ) }
+				isError={ Boolean( error ) } >
+				{ Object.keys( valuesMap ).map( key => {
+					return (
+						<option
+							key={ key }
+							value={ key }>
+							{ valuesMap[ key ] }
+						</option>
+					);
+				} ) }
+			</FormSelect>
+			{ error ? <FieldError text={ error } /> : <FieldDescription text={ description } /> }
+		</FormFieldset>
+	);
+};
+
+Dropdown.propTypes = {
+	id: PropTypes.string.isRequired,
+	valuesMap: PropTypes.object.isRequired,
+	title: PropTypes.string,
+	description: PropTypes.string,
+	value: PropTypes.string.isRequired,
+	updateValue: PropTypes.func.isRequired,
+	error: PropTypes.oneOfType( [
+		PropTypes.string,
+		PropTypes.bool,
+	] ),
+	disabled: PropTypes.bool,
+	className: PropTypes.string,
+};
+
+export default Dropdown;

client/extensions/woocommerce/woocommerce-services/components/field-description/index.js

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import FormSettingExplanation from 'components/forms/form-setting-explanation';
+
+const FieldDescription = ( { text } ) => {
+	return (
+		text ? <FormSettingExplanation>{ text }</FormSettingExplanation> : null
+	);
+};
+
+FieldDescription.propTypes = {
+	text: PropTypes.string,
+};
+
+export default FieldDescription;

client/extensions/woocommerce/woocommerce-services/components/field-error/style.scss

@@ -3,7 +3,7 @@
 }
 
 .field-error__input-validation {
-	padding: 4px 0 4px 32px;
+	padding: 4px 0;
 	.gridicon {
 		float: none;
 		vertical-align: middle;

client/extensions/woocommerce/woocommerce-services/components/number-field/index.js

@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import FormFieldset from 'components/forms/form-fieldset';
+import FormLabel from 'components/forms/form-label';
+import NumberInput from './number-input';
+import FieldError from '../field-error';
+import FieldDescription from '../field-description';
+
+const parseNumber = ( value ) => {
+	if ( '' === value ) {
+		return 0;
+	}
+	const float = Number.parseFloat( value );
+	return isNaN( float ) ? value : float;
+};
+
+const NumberField = ( { id, title, description, value, placeholder, updateValue, error, className } ) => {
+	const onChange = ( event ) => updateValue( parseNumber( event.target.value ) );
+
+	return (
+		<FormFieldset className={ className }>
+			<FormLabel htmlFor={ id }>{ title }</FormLabel>
+			<NumberInput
+				id={ id }
+				name={ id }
+				placeholder={ placeholder }
+				value={ value }
+				onChange={ onChange }
+				isError={ Boolean( error ) }
+			/>
+			{ error ? <FieldError text={ error } /> : <FieldDescription text={ description } /> }
+		</FormFieldset>
+	);
+};
+
+NumberField.propTypes = {
+	id: PropTypes.string.isRequired,
+	title: PropTypes.string,
+	description: PropTypes.string,
+	value: PropTypes.oneOfType( [
+		PropTypes.string,
+		PropTypes.number,
+	] ).isRequired,
+	updateValue: PropTypes.func,
+	error: PropTypes.oneOfType( [
+		PropTypes.string,
+		PropTypes.bool,
+	] ),
+	className: PropTypes.string,
+};
+
+export default NumberField;

client/extensions/woocommerce/woocommerce-services/components/number-field/number-input.js

@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import FormTextInput from 'components/forms/form-text-input';
+
+export default class NumberInput extends Component {
+	static propTypes = {
+		onChange: PropTypes.func,
+	};
+
+	static defaultProps = {
+		onChange: () => {},
+	};
+
+	state = {
+		focused: false,
+		text: this.props.value,
+	};
+
+	componentWillReceiveProps( nextProps ) {
+		if ( ! this.state.focused && nextProps.value !== this.props.value ) {
+			this.setState( { text: nextProps.value } );
+		}
+	}
+
+	handleChange = ( event ) => {
+		this.setState( { text: event.target.value } );
+		this.props.onChange( event );
+	}
+
+	handleBlur = ( event ) => {
+		this.setState( {
+			focused: false,
+			text: this.props.value,
+		} );
+		this.props.onChange( event );
+	}
+
+	handleFocus = () => {
+		this.setState( { focused: true } );
+	}
+
+	render() {
+		return (
+			<FormTextInput
+				{ ...this.props }
+				value={ this.state.text }
+				onChange={ this.handleChange }
+				onBlur={ this.handleBlur }
+				onFocus={ this.handleFocus }
+			/>
+		);
+	}
+}

client/extensions/woocommerce/woocommerce-services/components/query-labels/index.js

@@ -15,8 +15,8 @@ import { getSelectedSiteId } from 'state/ui/selectors';
 
 class QueryLabels extends Component {
 	fetch() {
-		const { siteId, orderId } = this.props;
-		this.props.fetchLabelsData( siteId, orderId );
+		const { orderId, siteId } = this.props;
+		this.props.fetchLabelsData( orderId, siteId );
 	}
 
 	componentWillMount() {