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 | 7x 7x 7x 9x 7x 9x 18x 7x 1x 2x 9x 9x 9x 9x 9x 9x 61x 21x 1x 1x 7x 7x | import { CheckoutSelectors, FormField, ShippingInitializeOptions, ShippingRequestOptions } from '@bigcommerce/checkout-sdk';
import { noop } from 'lodash';
import React, { PureComponent, ReactNode } from 'react';
import { DynamicFormField, Fieldset } from '../ui/form';
export interface RemoteShippingAddressProps {
containerId: string;
methodId: string;
formFields: FormField[];
deinitialize(options?: ShippingRequestOptions): Promise<CheckoutSelectors>;
initialize(options?: ShippingInitializeOptions): Promise<CheckoutSelectors>;
onUnhandledError?(error: Error): void;
onFieldChange(fieldName: string, value: string): void;
}
class RemoteShippingAddress extends PureComponent<RemoteShippingAddressProps> {
async componentDidMount(): Promise<void> {
const {
initialize,
methodId,
onUnhandledError = noop,
} = this.props;
try {
await initialize({ methodId });
} catch (error) {
onUnhandledError(error);
}
}
async componentWillUnmount(): Promise<void> {
const {
deinitialize,
methodId,
onUnhandledError = noop,
} = this.props;
try {
await deinitialize({ methodId });
} catch (error) {
onUnhandledError(error);
}
}
render(): ReactNode {
const {
containerId,
formFields,
methodId,
} = this.props;
return (
<>
<div
className={ `widget address-widget widget--${methodId}` }
id={ containerId }
tabIndex={ -1 }
/>
<Fieldset>
{
formFields.filter(({ custom }) => custom).map(field => (
<DynamicFormField
field={ field }
key={ `${field.id}-${field.name}` }
onChange={ this.handleFieldValueChange(field.name) }
parentFieldName="shippingAddress.customFields"
/>
))
}
</Fieldset>
</>
);
}
private handleFieldValueChange: (name: string) => (value: string) => void = name => value => {
const { onFieldChange } = this.props;
onFieldChange(name, value);
};
}
export default RemoteShippingAddress;
|