93 lines
2.2 KiB
TypeScript
93 lines
2.2 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { __ } from '@wordpress/i18n';
|
|
import { ALLOWED_COUNTRIES, ALLOWED_STATES } from '@woocommerce/block-settings';
|
|
import {
|
|
type CartShippingAddress,
|
|
type CartBillingAddress,
|
|
isObject,
|
|
isString,
|
|
} from '@woocommerce/types';
|
|
import { FormFieldsConfig } from '@woocommerce/settings';
|
|
import { decodeEntities } from '@wordpress/html-entities';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import './style.scss';
|
|
|
|
const AddressCard = ( {
|
|
address,
|
|
onEdit,
|
|
target,
|
|
fieldConfig,
|
|
}: {
|
|
address: CartShippingAddress | CartBillingAddress;
|
|
onEdit: () => void;
|
|
target: string;
|
|
fieldConfig: FormFieldsConfig;
|
|
} ): JSX.Element | null => {
|
|
const formattedCountry = isString( ALLOWED_COUNTRIES[ address.country ] )
|
|
? decodeEntities( ALLOWED_COUNTRIES[ address.country ] )
|
|
: '';
|
|
|
|
const formattedState =
|
|
isObject( ALLOWED_STATES[ address.country ] ) &&
|
|
isString( ALLOWED_STATES[ address.country ][ address.state ] )
|
|
? decodeEntities(
|
|
ALLOWED_STATES[ address.country ][ address.state ]
|
|
)
|
|
: address.state;
|
|
|
|
return (
|
|
<div className="wc-block-components-address-card">
|
|
<address>
|
|
<span className="wc-block-components-address-card__address-section">
|
|
{ address.first_name + ' ' + address.last_name }
|
|
</span>
|
|
<div className="wc-block-components-address-card__address-section">
|
|
{ [
|
|
address.address_1,
|
|
! fieldConfig.address_2.hidden && address.address_2,
|
|
address.city,
|
|
formattedState,
|
|
address.postcode,
|
|
formattedCountry,
|
|
]
|
|
.filter( ( field ) => !! field )
|
|
.map( ( field, index ) => (
|
|
<span key={ `address-` + index }>{ field }</span>
|
|
) ) }
|
|
</div>
|
|
{ address.phone && ! fieldConfig.phone.hidden ? (
|
|
<div
|
|
key={ `address-phone` }
|
|
className="wc-block-components-address-card__address-section"
|
|
>
|
|
{ address.phone }
|
|
</div>
|
|
) : (
|
|
''
|
|
) }
|
|
</address>
|
|
{ onEdit && (
|
|
<a
|
|
role="button"
|
|
href={ '#' + target }
|
|
className="wc-block-components-address-card__edit"
|
|
aria-label={ __( 'Edit address', 'woocommerce' ) }
|
|
onClick={ ( e ) => {
|
|
onEdit();
|
|
e.preventDefault();
|
|
} }
|
|
>
|
|
{ __( 'Edit', 'woocommerce' ) }
|
|
</a>
|
|
) }
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AddressCard;
|