Include address fields in the AddressForm component (https://github.com/woocommerce/woocommerce-blocks/pull/1892)
* Move default address fields to blocks; normalise address i18n * Use optionalLabel and other props from addressFields * Fix apartment field display * Country address fields * Fix default field order * Update for countries with no states * Add type defs
This commit is contained in:
parent
02b3f2fccc
commit
168ce52935
|
@ -0,0 +1,546 @@
|
|||
/** @typedef { import('@woocommerce/type-defs/address-fields').CountryAddressFields } CountryAddressFields */
|
||||
/** @typedef { import('@woocommerce/type-defs/address-fields').AddressFieldKey } AddressFieldKey */
|
||||
/** @typedef { import('@woocommerce/type-defs/address-fields').AddressField } AddressField */
|
||||
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
/**
|
||||
* Used to render postcode before the city field.
|
||||
*
|
||||
* @type {Object <AddressFieldKey, AddressField>}
|
||||
*/
|
||||
const postcodeBeforeCity = {
|
||||
city: {
|
||||
index: 9,
|
||||
},
|
||||
postcode: {
|
||||
index: 7,
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Used to make the state field optional.
|
||||
*
|
||||
* @type {Object <AddressFieldKey, AddressField>}
|
||||
*/
|
||||
const optionalState = {
|
||||
state: {
|
||||
required: false,
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Used to hide the state field.
|
||||
*
|
||||
* @type {Object <AddressFieldKey, AddressField>}
|
||||
*/
|
||||
const hiddenState = {
|
||||
state: {
|
||||
required: false,
|
||||
hidden: true,
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Used to hide the postcode field.
|
||||
*
|
||||
* @type {Object <AddressFieldKey, AddressField>}
|
||||
*/
|
||||
const hiddenPostcode = {
|
||||
postcode: {
|
||||
required: false,
|
||||
hidden: true,
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Country specific address field properties.
|
||||
*
|
||||
* @type {CountryAddressFields}
|
||||
*/
|
||||
const countryAddressFields = {
|
||||
AE: {
|
||||
...hiddenPostcode,
|
||||
...optionalState,
|
||||
},
|
||||
AF: hiddenState,
|
||||
AO: {
|
||||
...hiddenPostcode,
|
||||
state: {
|
||||
label: __( 'Province', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Province (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
},
|
||||
AT: {
|
||||
...postcodeBeforeCity,
|
||||
...hiddenState,
|
||||
},
|
||||
AU: {
|
||||
city: {
|
||||
label: __( 'Suburb', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Suburb (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
postcode: {
|
||||
label: __( 'Postcode', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Postcode (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
state: {
|
||||
label: __( 'State', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'State (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
},
|
||||
AX: {
|
||||
...postcodeBeforeCity,
|
||||
...hiddenState,
|
||||
},
|
||||
BD: {
|
||||
postcode: {
|
||||
required: false,
|
||||
},
|
||||
state: {
|
||||
label: __( 'District', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'District (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
},
|
||||
BE: {
|
||||
...postcodeBeforeCity,
|
||||
...hiddenState,
|
||||
},
|
||||
BH: {
|
||||
postcode: {
|
||||
required: false,
|
||||
},
|
||||
...hiddenState,
|
||||
},
|
||||
BI: hiddenState,
|
||||
BO: hiddenPostcode,
|
||||
BS: hiddenPostcode,
|
||||
CA: {
|
||||
state: {
|
||||
label: __( 'Province', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Province (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
},
|
||||
CH: {
|
||||
...postcodeBeforeCity,
|
||||
state: {
|
||||
label: __( 'Canton', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Canton (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
CL: {
|
||||
city: {
|
||||
require: true,
|
||||
},
|
||||
postcode: {
|
||||
required: false,
|
||||
},
|
||||
state: {
|
||||
label: __( 'Region', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Region (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
},
|
||||
CN: {
|
||||
state: {
|
||||
label: __( 'Province', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Province (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
},
|
||||
CO: {
|
||||
postcode: {
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
CZ: hiddenState,
|
||||
DE: {
|
||||
...postcodeBeforeCity,
|
||||
...hiddenState,
|
||||
},
|
||||
DK: {
|
||||
...postcodeBeforeCity,
|
||||
...hiddenState,
|
||||
},
|
||||
EE: {
|
||||
...postcodeBeforeCity,
|
||||
...hiddenState,
|
||||
},
|
||||
ES: {
|
||||
...postcodeBeforeCity,
|
||||
state: {
|
||||
label: __( 'State', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'State (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
},
|
||||
FI: {
|
||||
...postcodeBeforeCity,
|
||||
...hiddenState,
|
||||
},
|
||||
FR: {
|
||||
...postcodeBeforeCity,
|
||||
...hiddenState,
|
||||
},
|
||||
GB: {
|
||||
postcode: {
|
||||
label: __( 'Postcode', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Postcode (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
state: {
|
||||
label: __( 'County', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'County (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
},
|
||||
GP: hiddenState,
|
||||
GF: hiddenState,
|
||||
GR: optionalState,
|
||||
HK: {
|
||||
postcode: {
|
||||
required: false,
|
||||
},
|
||||
city: {
|
||||
label: __( 'Town/District', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Town/District (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
state: {
|
||||
label: __( 'Region', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Region (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
},
|
||||
HU: {
|
||||
state: {
|
||||
label: __( 'County', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'County (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
},
|
||||
ID: {
|
||||
state: {
|
||||
label: __( 'Province', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Province (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
},
|
||||
IE: {
|
||||
postcode: {
|
||||
label: __( 'Eircode', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Eircode (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
required: false,
|
||||
},
|
||||
state: {
|
||||
label: __( 'County', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'County (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
},
|
||||
IS: {
|
||||
...postcodeBeforeCity,
|
||||
...hiddenState,
|
||||
},
|
||||
IL: {
|
||||
...postcodeBeforeCity,
|
||||
...hiddenState,
|
||||
},
|
||||
IM: hiddenState,
|
||||
IT: {
|
||||
...postcodeBeforeCity,
|
||||
state: {
|
||||
label: __( 'Province', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Province (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
},
|
||||
JP: {
|
||||
first_name: {
|
||||
index: 2,
|
||||
},
|
||||
last_name: {
|
||||
index: 1,
|
||||
},
|
||||
address_1: {
|
||||
index: 7,
|
||||
},
|
||||
address_2: {
|
||||
index: 8,
|
||||
},
|
||||
postcode: {
|
||||
index: 4,
|
||||
},
|
||||
city: {
|
||||
index: 6,
|
||||
},
|
||||
state: {
|
||||
label: __( 'Prefecture', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Prefecture (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
index: 5,
|
||||
},
|
||||
},
|
||||
KR: hiddenState,
|
||||
KW: hiddenState,
|
||||
LB: hiddenState,
|
||||
LI: {
|
||||
...postcodeBeforeCity,
|
||||
state: {
|
||||
label: __( 'Municipality', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Municipality (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
LK: hiddenState,
|
||||
LU: hiddenState,
|
||||
LV: {
|
||||
state: {
|
||||
label: __( 'Municipality', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Municipality (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
MQ: hiddenState,
|
||||
MT: hiddenState,
|
||||
MZ: {
|
||||
...hiddenPostcode,
|
||||
state: {
|
||||
label: __( 'Province', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Province (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
},
|
||||
NL: {
|
||||
...postcodeBeforeCity,
|
||||
...hiddenState,
|
||||
},
|
||||
NG: {
|
||||
...hiddenPostcode,
|
||||
state: {
|
||||
label: __( 'State', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'State (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
},
|
||||
NO: {
|
||||
...postcodeBeforeCity,
|
||||
...hiddenState,
|
||||
},
|
||||
NP: {
|
||||
postcode: {
|
||||
required: false,
|
||||
},
|
||||
state: {
|
||||
label: __( 'State', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'State (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
},
|
||||
NZ: {
|
||||
postcode: {
|
||||
label: __( 'Postcode', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Postcode (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
state: {
|
||||
label: __( 'Region', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Region (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
},
|
||||
PL: {
|
||||
...postcodeBeforeCity,
|
||||
...hiddenState,
|
||||
},
|
||||
PT: hiddenState,
|
||||
RE: hiddenState,
|
||||
RO: {
|
||||
state: {
|
||||
label: __( 'County', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'County (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
},
|
||||
RS: hiddenState,
|
||||
SE: {
|
||||
...postcodeBeforeCity,
|
||||
...hiddenState,
|
||||
},
|
||||
SG: {
|
||||
city: {
|
||||
required: false,
|
||||
},
|
||||
...hiddenState,
|
||||
},
|
||||
SK: {
|
||||
...postcodeBeforeCity,
|
||||
...hiddenState,
|
||||
},
|
||||
SI: {
|
||||
...postcodeBeforeCity,
|
||||
...hiddenState,
|
||||
},
|
||||
SR: {
|
||||
...hiddenPostcode,
|
||||
},
|
||||
ST: {
|
||||
...hiddenPostcode,
|
||||
state: {
|
||||
label: __( 'District', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'District (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
},
|
||||
MD: {
|
||||
state: {
|
||||
label: __(
|
||||
'Municipality/District',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
optionalLabel: __(
|
||||
'Municipality/District (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
},
|
||||
TR: {
|
||||
...postcodeBeforeCity,
|
||||
state: {
|
||||
label: __( 'Province', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Province (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
},
|
||||
UG: {
|
||||
...hiddenPostcode,
|
||||
city: {
|
||||
label: __( 'Town/Village', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Town/Village (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
state: {
|
||||
label: __( 'District', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'District (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
},
|
||||
US: {
|
||||
postcode: {
|
||||
label: __( 'ZIP', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'ZIP (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
state: {
|
||||
label: __( 'State', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'State (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
},
|
||||
VN: {
|
||||
city: {
|
||||
index: 8,
|
||||
},
|
||||
postcode: {
|
||||
index: 7,
|
||||
required: false,
|
||||
},
|
||||
...hiddenState,
|
||||
},
|
||||
WS: hiddenPostcode,
|
||||
YT: hiddenState,
|
||||
ZA: {
|
||||
state: {
|
||||
label: __( 'Province', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Province (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
},
|
||||
ZW: hiddenPostcode,
|
||||
};
|
||||
|
||||
export default countryAddressFields;
|
|
@ -0,0 +1,123 @@
|
|||
/** @typedef { import('@woocommerce/type-defs/address-fields').AddressField } AddressField */
|
||||
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
/**
|
||||
* Default address field properties.
|
||||
*
|
||||
* @property {AddressField} first_name Customer first name.
|
||||
* @property {AddressField} last_name Customer last name.
|
||||
* @property {AddressField} company Company name.
|
||||
* @property {AddressField} address_1 Street address.
|
||||
* @property {AddressField} address_2 Second line of address.
|
||||
* @property {AddressField} country Country code.
|
||||
* @property {AddressField} city City name.
|
||||
* @property {AddressField} state State name or code.
|
||||
* @property {AddressField} postcode Postal code.
|
||||
*/
|
||||
const AddressFields = {
|
||||
first_name: {
|
||||
label: __( 'First name', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'First name (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
autocomplete: 'given-name',
|
||||
required: true,
|
||||
hidden: false,
|
||||
index: 1,
|
||||
},
|
||||
last_name: {
|
||||
label: __( 'Last name', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Last name (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
autocomplete: 'family-name',
|
||||
required: true,
|
||||
hidden: false,
|
||||
index: 2,
|
||||
},
|
||||
company: {
|
||||
label: __( 'Company', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Company (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
autocomplete: 'organization',
|
||||
required: false,
|
||||
hidden: false,
|
||||
index: 3,
|
||||
},
|
||||
address_1: {
|
||||
label: __( 'Address', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Address (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
autocomplete: 'address-line1',
|
||||
required: true,
|
||||
hidden: false,
|
||||
index: 4,
|
||||
},
|
||||
address_2: {
|
||||
label: __( 'Apartment, suite, etc.', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Apartment, suite, etc. (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
autocomplete: 'address-line2',
|
||||
required: false,
|
||||
hidden: false,
|
||||
index: 5,
|
||||
},
|
||||
country: {
|
||||
label: __( 'Country/Region', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Country/Region (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
autocomplete: 'country',
|
||||
required: true,
|
||||
hidden: false,
|
||||
index: 6,
|
||||
},
|
||||
city: {
|
||||
label: __( 'City', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Apartment, suite, etc. (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
autocomplete: 'address-level2',
|
||||
required: true,
|
||||
hidden: false,
|
||||
index: 7,
|
||||
},
|
||||
state: {
|
||||
label: __( 'State/County', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'State/County (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
autocomplete: 'address-level1',
|
||||
required: true,
|
||||
hidden: false,
|
||||
index: 8,
|
||||
},
|
||||
postcode: {
|
||||
label: __( 'Postal code', 'woo-gutenberg-products-block' ),
|
||||
optionalLabel: __(
|
||||
'Postal code (optional)',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
autocomplete: 'postal-code',
|
||||
required: true,
|
||||
hidden: false,
|
||||
index: 9,
|
||||
},
|
||||
};
|
||||
|
||||
export default AddressFields;
|
|
@ -1,7 +1,6 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import PropTypes from 'prop-types';
|
||||
import TextInput from '@woocommerce/base-components/text-input';
|
||||
import {
|
||||
|
@ -12,91 +11,56 @@ import {
|
|||
BillingStateInput,
|
||||
ShippingStateInput,
|
||||
} from '@woocommerce/base-components/state-input';
|
||||
import {
|
||||
COUNTRY_LOCALE,
|
||||
DEFAULT_ADDRESS_FIELDS,
|
||||
} from '@woocommerce/block-settings';
|
||||
|
||||
export const defaultFieldConfig = {
|
||||
first_name: {
|
||||
autocomplete: 'given-name',
|
||||
},
|
||||
last_name: {
|
||||
autocomplete: 'family-name',
|
||||
},
|
||||
company: {
|
||||
autocomplete: 'organization',
|
||||
},
|
||||
address_1: {
|
||||
autocomplete: 'address-line1',
|
||||
},
|
||||
address_2: {
|
||||
autocomplete: 'address-line2',
|
||||
},
|
||||
country: {
|
||||
autocomplete: 'country',
|
||||
priority: 65,
|
||||
required: true,
|
||||
},
|
||||
city: {
|
||||
autocomplete: 'address-level2',
|
||||
},
|
||||
postcode: {
|
||||
autocomplete: 'postal-code',
|
||||
},
|
||||
state: {
|
||||
autocomplete: 'address-level1',
|
||||
},
|
||||
};
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import defaultAddressFields from './default-address-fields';
|
||||
import countryAddressFields from './country-address-fields';
|
||||
|
||||
/**
|
||||
* Checkout address form.
|
||||
*/
|
||||
const AddressForm = ( {
|
||||
fields = Object.keys( defaultFieldConfig ),
|
||||
fieldConfig = defaultFieldConfig,
|
||||
fields = Object.keys( defaultAddressFields ),
|
||||
fieldConfig = {},
|
||||
onChange,
|
||||
type = 'shipping',
|
||||
values,
|
||||
} ) => {
|
||||
const countryLocale = COUNTRY_LOCALE[ values.country ] || {};
|
||||
const countryLocale = countryAddressFields[ values.country ] || {};
|
||||
const addressFields = fields.map( ( field ) => ( {
|
||||
key: field,
|
||||
...DEFAULT_ADDRESS_FIELDS[ field ],
|
||||
...countryLocale[ field ],
|
||||
...defaultAddressFields[ field ],
|
||||
...fieldConfig[ field ],
|
||||
...countryLocale[ field ],
|
||||
} ) );
|
||||
const sortedAddressFields = addressFields.sort(
|
||||
( a, b ) => a.priority - b.priority
|
||||
( a, b ) => a.index - b.index
|
||||
);
|
||||
|
||||
const optionalText = __( '(optional)', 'woo-gutenberg-products-block' );
|
||||
|
||||
return (
|
||||
<div className="wc-block-address-form">
|
||||
{ sortedAddressFields.map( ( addressField ) => {
|
||||
if ( addressField.hidden ) {
|
||||
{ sortedAddressFields.map( ( field ) => {
|
||||
if ( field.hidden ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const requiredField = addressField.required;
|
||||
let fieldLabel = addressField.label || addressField.placeholder;
|
||||
|
||||
if (
|
||||
! addressField.required &&
|
||||
! fieldLabel.includes( optionalText )
|
||||
) {
|
||||
fieldLabel = fieldLabel + ' ' + optionalText;
|
||||
}
|
||||
|
||||
if ( addressField.key === 'country' ) {
|
||||
if ( field.key === 'country' ) {
|
||||
const Tag =
|
||||
type === 'shipping'
|
||||
? ShippingCountryInput
|
||||
: BillingCountryInput;
|
||||
return (
|
||||
<Tag
|
||||
key={ addressField.key }
|
||||
label={ fieldLabel }
|
||||
key={ field.key }
|
||||
label={
|
||||
field.required
|
||||
? field.label
|
||||
: field.optionalLabel
|
||||
}
|
||||
value={ values.country }
|
||||
autoComplete={ addressField.autocomplete }
|
||||
autoComplete={ field.autocomplete }
|
||||
onChange={ ( newValue ) =>
|
||||
onChange( {
|
||||
...values,
|
||||
|
@ -104,48 +68,54 @@ const AddressForm = ( {
|
|||
state: '',
|
||||
} )
|
||||
}
|
||||
required={ requiredField }
|
||||
required={ field.required }
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if ( addressField.key === 'state' ) {
|
||||
if ( field.key === 'state' ) {
|
||||
const Tag =
|
||||
type === 'shipping'
|
||||
? ShippingStateInput
|
||||
: BillingStateInput;
|
||||
return (
|
||||
<Tag
|
||||
key={ addressField.key }
|
||||
key={ field.key }
|
||||
country={ values.country }
|
||||
label={ fieldLabel }
|
||||
label={
|
||||
field.required
|
||||
? field.label
|
||||
: field.optionalLabel
|
||||
}
|
||||
value={ values.state }
|
||||
autoComplete={ addressField.autocomplete }
|
||||
autoComplete={ field.autocomplete }
|
||||
onChange={ ( newValue ) =>
|
||||
onChange( {
|
||||
...values,
|
||||
state: newValue,
|
||||
} )
|
||||
}
|
||||
required={ requiredField }
|
||||
required={ field.required }
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<TextInput
|
||||
key={ addressField.key }
|
||||
className={ `wc-block-address-form__${ addressField.key }` }
|
||||
label={ fieldLabel }
|
||||
value={ values[ addressField.key ] }
|
||||
autoComplete={ addressField.autocomplete }
|
||||
key={ field.key }
|
||||
className={ `wc-block-address-form__${ field.key }` }
|
||||
label={
|
||||
field.required ? field.label : field.optionalLabel
|
||||
}
|
||||
value={ values[ field.key ] }
|
||||
autoComplete={ field.autocomplete }
|
||||
onChange={ ( newValue ) =>
|
||||
onChange( {
|
||||
...values,
|
||||
[ addressField.key ]: newValue,
|
||||
[ field.key ]: newValue,
|
||||
} )
|
||||
}
|
||||
required={ requiredField }
|
||||
required={ field.required }
|
||||
/>
|
||||
);
|
||||
} ) }
|
||||
|
@ -157,7 +127,7 @@ AddressForm.propTypes = {
|
|||
onChange: PropTypes.func.isRequired,
|
||||
values: PropTypes.object.isRequired,
|
||||
fields: PropTypes.arrayOf(
|
||||
PropTypes.oneOf( Object.keys( defaultFieldConfig ) )
|
||||
PropTypes.oneOf( Object.keys( defaultAddressFields ) )
|
||||
),
|
||||
fieldConfig: PropTypes.object,
|
||||
type: PropTypes.oneOf( [ 'billing', 'shipping' ] ),
|
||||
|
|
|
@ -3,9 +3,8 @@
|
|||
*/
|
||||
import { Fragment, useState } from '@wordpress/element';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import AddressForm, {
|
||||
defaultFieldConfig,
|
||||
} from '@woocommerce/base-components/address-form';
|
||||
import AddressForm from '@woocommerce/base-components/address-form';
|
||||
import defaultAddressFields from '@woocommerce/base-components/address-form/default-address-fields';
|
||||
import {
|
||||
FormStep,
|
||||
CheckoutForm,
|
||||
|
@ -63,14 +62,14 @@ const Block = ( { attributes, isEditor = false, shippingRates = [] } ) => {
|
|||
! SHIPPING_ENABLED || ! useShippingAddressAsBilling;
|
||||
|
||||
const addressFields = {
|
||||
...defaultFieldConfig,
|
||||
...defaultAddressFields,
|
||||
company: {
|
||||
...defaultFieldConfig.company,
|
||||
...defaultAddressFields.company,
|
||||
hidden: ! attributes.showCompanyField,
|
||||
required: attributes.requireCompanyField,
|
||||
},
|
||||
address_2: {
|
||||
...defaultFieldConfig.address_2,
|
||||
...defaultAddressFields.address_2,
|
||||
hidden: ! attributes.showAddress2Field,
|
||||
},
|
||||
};
|
||||
|
|
|
@ -54,7 +54,7 @@ const CheckoutEditor = ( { attributes, setAttributes } ) => {
|
|||
</p>
|
||||
<ToggleControl
|
||||
label={ __(
|
||||
'Company name',
|
||||
'Company',
|
||||
'woo-gutenberg-products-block'
|
||||
) }
|
||||
checked={ showCompanyField }
|
||||
|
@ -81,7 +81,7 @@ const CheckoutEditor = ( { attributes, setAttributes } ) => {
|
|||
) }
|
||||
<ToggleControl
|
||||
label={ __(
|
||||
'Apartment, suite, unit etc',
|
||||
'Apartment, suite, etc.',
|
||||
'woo-gutenberg-products-block'
|
||||
) }
|
||||
checked={ showAddress2Field }
|
||||
|
@ -92,10 +92,7 @@ const CheckoutEditor = ( { attributes, setAttributes } ) => {
|
|||
}
|
||||
/>
|
||||
<ToggleControl
|
||||
label={ __(
|
||||
'Phone number',
|
||||
'woo-gutenberg-products-block'
|
||||
) }
|
||||
label={ __( 'Phone', 'woo-gutenberg-products-block' ) }
|
||||
checked={ showPhoneField }
|
||||
onChange={ () =>
|
||||
setAttributes( {
|
||||
|
|
|
@ -60,6 +60,8 @@ const getProps = ( el ) => {
|
|||
} else {
|
||||
attributes[ key ] = el.dataset[ key ];
|
||||
}
|
||||
} else {
|
||||
attributes[ key ] = blockAttributes[ key ].default;
|
||||
}
|
||||
} );
|
||||
|
||||
|
|
|
@ -53,8 +53,6 @@ export const SHIPPING_METHODS_EXIST = getSetting(
|
|||
'shippingMethodsExist',
|
||||
false
|
||||
);
|
||||
export const COUNTRY_LOCALE = getSetting( 'countryLocale', {} );
|
||||
export const DEFAULT_ADDRESS_FIELDS = getSetting( 'defaultAddressFields', {} );
|
||||
|
||||
const defaultPage = {
|
||||
name: '',
|
||||
|
|
|
@ -0,0 +1,27 @@
|
|||
/**
|
||||
* @typedef {Object} AddressField
|
||||
*
|
||||
* @property {string} label The label for the field.
|
||||
* @property {string} optionalLabel The label for the field if made optional.
|
||||
* @property {string} autocomplete The HTML autocomplete attribute value. See
|
||||
* https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
|
||||
* @property {boolean} required Set to true if the field is required.
|
||||
* @property {boolean} hidden Set to true if the field should not be
|
||||
* rendered.
|
||||
* @property {number} index Fields will be sorted and render in this
|
||||
* order, lowest to highest.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef {string} CountryCode ISO 3166 Country code.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef {string} AddressFieldKey Key for an address field, e.g. first_name.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef {Object <CountryCode, Object <AddressFieldKey, AddressField>>} CountryAddressFields
|
||||
*/
|
||||
|
||||
export {};
|
|
@ -55,12 +55,6 @@ class Cart extends AbstractBlock {
|
|||
if ( ! $data_registry->exists( 'shippingStates' ) ) {
|
||||
$data_registry->add( 'shippingStates', WC()->countries->get_shipping_country_states() );
|
||||
}
|
||||
if ( ! $data_registry->exists( 'countryLocale' ) ) {
|
||||
$data_registry->add( 'countryLocale', WC()->countries->get_country_locale() );
|
||||
}
|
||||
if ( ! $data_registry->exists( 'defaultAddressFields' ) ) {
|
||||
$data_registry->add( 'defaultAddressFields', WC()->countries->get_default_address_fields() );
|
||||
}
|
||||
if ( ! $data_registry->exists( 'cartData' ) ) {
|
||||
$data_registry->add( 'cartData', WC()->api->get_endpoint_data( '/wc/store/cart' ) );
|
||||
}
|
||||
|
|
|
@ -69,12 +69,6 @@ class Checkout extends AbstractBlock {
|
|||
$data_registry->add( 'shippingMethodsExist', $methods_exist );
|
||||
}
|
||||
}
|
||||
if ( ! $data_registry->exists( 'countryLocale' ) ) {
|
||||
$data_registry->add( 'countryLocale', WC()->countries->get_country_locale() );
|
||||
}
|
||||
if ( ! $data_registry->exists( 'defaultAddressFields' ) ) {
|
||||
$data_registry->add( 'defaultAddressFields', WC()->countries->get_default_address_fields() );
|
||||
}
|
||||
\Automattic\WooCommerce\Blocks\Assets::register_block_script( $this->block_name . '-frontend', $this->block_name . '-block-frontend' );
|
||||
return $content;
|
||||
}
|
||||
|
|
|
@ -158,58 +158,58 @@ class OrderSchema extends AbstractSchema {
|
|||
'context' => [ 'view', 'edit' ],
|
||||
'properties' => [
|
||||
'first_name' => [
|
||||
'description' => __( 'First name.', 'woo-gutenberg-products-block' ),
|
||||
'description' => __( 'First name', 'woo-gutenberg-products-block' ),
|
||||
'type' => 'string',
|
||||
'context' => [ 'view', 'edit' ],
|
||||
],
|
||||
'last_name' => [
|
||||
'description' => __( 'Last name.', 'woo-gutenberg-products-block' ),
|
||||
'description' => __( 'Last name', 'woo-gutenberg-products-block' ),
|
||||
'type' => 'string',
|
||||
'context' => [ 'view', 'edit' ],
|
||||
],
|
||||
'company' => [
|
||||
'description' => __( 'Company name.', 'woo-gutenberg-products-block' ),
|
||||
'description' => __( 'Company', 'woo-gutenberg-products-block' ),
|
||||
'type' => 'string',
|
||||
'context' => [ 'view', 'edit' ],
|
||||
],
|
||||
'address_1' => [
|
||||
'description' => __( 'Address line 1', 'woo-gutenberg-products-block' ),
|
||||
'description' => __( 'Address', 'woo-gutenberg-products-block' ),
|
||||
'type' => 'string',
|
||||
'context' => [ 'view', 'edit' ],
|
||||
],
|
||||
'address_2' => [
|
||||
'description' => __( 'Address line 2', 'woo-gutenberg-products-block' ),
|
||||
'description' => __( 'Apartment, suite, etc.', 'woo-gutenberg-products-block' ),
|
||||
'type' => 'string',
|
||||
'context' => [ 'view', 'edit' ],
|
||||
],
|
||||
'city' => [
|
||||
'description' => __( 'City name.', 'woo-gutenberg-products-block' ),
|
||||
'description' => __( 'City', 'woo-gutenberg-products-block' ),
|
||||
'type' => 'string',
|
||||
'context' => [ 'view', 'edit' ],
|
||||
],
|
||||
'state' => [
|
||||
'description' => __( 'ISO code or name of the state, province or district.', 'woo-gutenberg-products-block' ),
|
||||
'description' => __( 'State/County code, or name of the state, county, province, or district.', 'woo-gutenberg-products-block' ),
|
||||
'type' => 'string',
|
||||
'context' => [ 'view', 'edit' ],
|
||||
],
|
||||
'postcode' => [
|
||||
'description' => __( 'Postal code.', 'woo-gutenberg-products-block' ),
|
||||
'description' => __( 'Postal code', 'woo-gutenberg-products-block' ),
|
||||
'type' => 'string',
|
||||
'context' => [ 'view', 'edit' ],
|
||||
],
|
||||
'country' => [
|
||||
'description' => __( 'Country code in ISO 3166-1 alpha-2 format.', 'woo-gutenberg-products-block' ),
|
||||
'description' => __( 'Country/Region code in ISO 3166-1 alpha-2 format.', 'woo-gutenberg-products-block' ),
|
||||
'type' => 'string',
|
||||
'context' => [ 'view', 'edit' ],
|
||||
],
|
||||
'email' => [
|
||||
'description' => __( 'Email address.', 'woo-gutenberg-products-block' ),
|
||||
'description' => __( 'Email', 'woo-gutenberg-products-block' ),
|
||||
'type' => 'string',
|
||||
'format' => 'email',
|
||||
'context' => [ 'view', 'edit' ],
|
||||
],
|
||||
'phone' => [
|
||||
'description' => __( 'Phone number.', 'woo-gutenberg-products-block' ),
|
||||
'description' => __( 'Phone', 'woo-gutenberg-products-block' ),
|
||||
'type' => 'string',
|
||||
'context' => [ 'view', 'edit' ],
|
||||
],
|
||||
|
@ -221,47 +221,47 @@ class OrderSchema extends AbstractSchema {
|
|||
'context' => [ 'view', 'edit' ],
|
||||
'properties' => [
|
||||
'first_name' => [
|
||||
'description' => __( 'First name.', 'woo-gutenberg-products-block' ),
|
||||
'description' => __( 'First name', 'woo-gutenberg-products-block' ),
|
||||
'type' => 'string',
|
||||
'context' => [ 'view', 'edit' ],
|
||||
],
|
||||
'last_name' => [
|
||||
'description' => __( 'Last name.', 'woo-gutenberg-products-block' ),
|
||||
'description' => __( 'Last name', 'woo-gutenberg-products-block' ),
|
||||
'type' => 'string',
|
||||
'context' => [ 'view', 'edit' ],
|
||||
],
|
||||
'company' => [
|
||||
'description' => __( 'Company name.', 'woo-gutenberg-products-block' ),
|
||||
'description' => __( 'Company', 'woo-gutenberg-products-block' ),
|
||||
'type' => 'string',
|
||||
'context' => [ 'view', 'edit' ],
|
||||
],
|
||||
'address_1' => [
|
||||
'description' => __( 'Address line 1', 'woo-gutenberg-products-block' ),
|
||||
'description' => __( 'Address', 'woo-gutenberg-products-block' ),
|
||||
'type' => 'string',
|
||||
'context' => [ 'view', 'edit' ],
|
||||
],
|
||||
'address_2' => [
|
||||
'description' => __( 'Address line 2', 'woo-gutenberg-products-block' ),
|
||||
'description' => __( 'Apartment, suite, etc.', 'woo-gutenberg-products-block' ),
|
||||
'type' => 'string',
|
||||
'context' => [ 'view', 'edit' ],
|
||||
],
|
||||
'city' => [
|
||||
'description' => __( 'City name.', 'woo-gutenberg-products-block' ),
|
||||
'description' => __( 'City', 'woo-gutenberg-products-block' ),
|
||||
'type' => 'string',
|
||||
'context' => [ 'view', 'edit' ],
|
||||
],
|
||||
'state' => [
|
||||
'description' => __( 'ISO code or name of the state, province or district.', 'woo-gutenberg-products-block' ),
|
||||
'description' => __( 'State/County code, or name of the state, county, province, or district.', 'woo-gutenberg-products-block' ),
|
||||
'type' => 'string',
|
||||
'context' => [ 'view', 'edit' ],
|
||||
],
|
||||
'postcode' => [
|
||||
'description' => __( 'Postal code.', 'woo-gutenberg-products-block' ),
|
||||
'description' => __( 'Postal code', 'woo-gutenberg-products-block' ),
|
||||
'type' => 'string',
|
||||
'context' => [ 'view', 'edit' ],
|
||||
],
|
||||
'country' => [
|
||||
'description' => __( 'Country code in ISO 3166-1 alpha-2 format.', 'woo-gutenberg-products-block' ),
|
||||
'description' => __( 'Country/Region code in ISO 3166-1 alpha-2 format.', 'woo-gutenberg-products-block' ),
|
||||
'type' => 'string',
|
||||
'context' => [ 'view', 'edit' ],
|
||||
],
|
||||
|
|
Loading…
Reference in New Issue