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 | 6x 6x 6x 53x 53x 53x 53x 53x 53x 53x 53x 53x 53x 53x 53x 1x 53x 53x 53x 53x 6x | import { Address, CustomerAddress } from '@bigcommerce/checkout-sdk';
import React, { memo, useCallback, FunctionComponent } from 'react';
import { AddressSelect } from '../address';
import ShippableItem from './ShippableItem';
export interface ItemAddressSelectProps {
item: ShippableItem;
addresses: CustomerAddress[];
onSelectAddress(address: Address, itemId: string, itemKey: string): void;
onUseNewAddress(address: Address | undefined, itemId: string, itemKey: string): void;
}
const ItemAddressSelect: FunctionComponent<ItemAddressSelectProps> = ({
item: {
id,
key,
imageUrl,
quantity,
name,
options,
consignment,
},
addresses,
onSelectAddress,
onUseNewAddress,
}) => {
const handleUseNewAddress = useCallback((address: Address) => {
onUseNewAddress(address, id as string, key);
}, [
id,
onUseNewAddress,
key,
]);
const handleSelectAddress = useCallback((address: Address) => {
onSelectAddress(address, id as string, key);
}, [
id,
key,
onSelectAddress,
]);
return <div className="consignment">
<figure className="consignment-product-figure">
{ imageUrl &&
<img alt={ name } src={ imageUrl } /> }
</figure>
<div className="consignment-product-body">
<h5 className="optimizedCheckout-contentPrimary">
{ `${quantity} x ${name}` }
</h5>
{ (options || []).map(({ name: optionName, value, nameId }) =>
<ul
className="product-options optimizedCheckout-contentSecondary"
data-test="consigment-item-product-options"
key={ nameId }
>
<li className="product-option">
{ `${optionName } ${value}` }
</li>
</ul>
) }
<AddressSelect
addresses={ addresses }
onSelectAddress={ handleSelectAddress }
onUseNewAddress={ handleUseNewAddress }
selectedAddress={ consignment && consignment.shippingAddress }
/>
</div>
</div>;
};
export default memo(ItemAddressSelect);
|