Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | 24x 24x 24x 24x 24x 24x 24x 24x 26x 26x 26x 26x 26x 106x 26x 24x 26x 26x 26x 26x 26x 26x 24x | import { Address, CheckoutSelectors, Country, FormField, ShippingInitializeOptions } from '@bigcommerce/checkout-sdk';
import { isEmpty } from 'lodash';
import React, { memo, FunctionComponent } from 'react';
import { withCheckout, CheckoutContextProps } from '../checkout';
import isValidAddress from './isValidAddress';
import localizeAddress from './localizeAddress';
import AddressType from './AddressType';
import './StaticAddress.scss';
export interface StaticAddressProps {
address: Address;
type?: AddressType;
}
export interface StaticAddressEditableProps extends StaticAddressProps {
initialize?(options: ShippingInitializeOptions): Promise<CheckoutSelectors>;
}
interface WithCheckoutStaticAddressProps {
countries?: Country[];
fields?: FormField[];
}
const StaticAddress: FunctionComponent<StaticAddressEditableProps & WithCheckoutStaticAddressProps> = ({
countries,
fields,
address: addressWithoutLocalization,
}) => {
const address = localizeAddress(addressWithoutLocalization, countries);
const isValid = !fields ? !isEmpty(address) : isValidAddress(
address,
fields.filter(field => !field.custom)
);
return !isValid ? null : <div className="vcard checkout-address--static">
{
(address.firstName || address.lastName) &&
<p className="fn address-entry">
<span className="first-name">{ `${address.firstName} ` }</span>
<span className="family-name">{ address.lastName }</span>
</p>
}
{
(address.phone || address.company) &&
<p className="address-entry">
<span className="company-name">{ `${address.company} ` }</span>
<span className="tel">{ address.phone }</span>
</p>
}
<div className="adr">
<p className="street-address address-entry">
<span className="address-line-1">{ `${address.address1} ` }</span>
{
address.address2 &&
<span className="address-line-2">
{ ` / ${address.address2 }` }
</span>
}
</p>
<p className="address-entry">
{
address.city &&
<span className="locality">{ `${address.city}, ` }</span>
}
{
address.localizedProvince &&
<span className="region">{ `${address.localizedProvince}, ` }</span>
}
{
address.postalCode &&
<span className="postal-code">{ `${address.postalCode} / ` }</span>
}
{
address.localizedCountry &&
<span className="country-name">{ `${address.localizedCountry} ` }</span>
}
</p>
</div>
</div>;
};
export function mapToStaticAddressProps(
context: CheckoutContextProps,
{ address, type }: StaticAddressProps
): WithCheckoutStaticAddressProps | null {
const {
checkoutState: {
data: {
getBillingCountries,
getBillingAddressFields,
getShippingAddressFields,
},
},
} = context;
return {
countries: getBillingCountries(),
fields: type === AddressType.Billing ?
getBillingAddressFields(address.countryCode) :
type === AddressType.Shipping ?
getShippingAddressFields(address.countryCode) :
undefined,
};
}
export default withCheckout(mapToStaticAddressProps)(memo(StaticAddress));
|