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 | 7x 7x 7x 7x 7x 7x 7x 7x 7x 9x 7x 9x 18x 7x 1x 2x 9x 9x 9x 9x 9x 9x 60x 9x 9x 24x 24x 1x 1x 7x 7x | import { Address, CheckoutSelectors, FormField, ShippingInitializeOptions, ShippingRequestOptions } from '@bigcommerce/checkout-sdk';
import { noop } from 'lodash';
import React, { PureComponent, ReactNode } from 'react';
import { StaticAddress } from '../address/';
import { preventDefault } from '../common/dom';
import { TranslatedString } from '../locale';
import { Button, ButtonSize, ButtonVariant } from '../ui/button';
import { DynamicFormField, Fieldset } from '../ui/form';
import { LoadingOverlay } from '../ui/loading';
import './StaticAddressEditable.scss';
export interface StaticAddressEditableProps {
address: Address;
buttonId: string;
formFields: FormField[];
isLoading: boolean;
methodId?: string;
deinitialize(options?: ShippingRequestOptions): Promise<CheckoutSelectors>;
initialize(options?: ShippingInitializeOptions): Promise<CheckoutSelectors>;
onFieldChange(fieldName: string, value: string): void;
onUnhandledError?(error: Error): void;
}
class StaticAddressEditable extends PureComponent<StaticAddressEditableProps> {
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 {
address,
buttonId,
formFields,
isLoading,
} = this.props;
const customFormFields = formFields.filter(({ custom }) => custom);
const shouldShowCustomFormFields = customFormFields.length > 0;
return (
<LoadingOverlay isLoading={ isLoading }>
<div className="stepHeader" style={ { padding: 0 } }>
<div className="stepHeader-body subheader">
<StaticAddress
address={ address }
/>
</div>
<div className="stepHeader-actions subheader">
<Button
id={ buttonId }
onClick={ preventDefault() }
size={ ButtonSize.Tiny }
testId="step-edit-button"
variant={ ButtonVariant.Secondary }
>
<TranslatedString id="common.edit_action" />
</Button>
</div>
</div>
{ shouldShowCustomFormFields && <Fieldset id="customFieldset">
{
customFormFields.map(field => (
<DynamicFormField
field={ field }
key={ `${field.id}-${field.name}` }
onChange={ this.handleFieldValueChange(field.name) }
parentFieldName="shippingAddress.customFields"
/>
))
}
</Fieldset> }
</LoadingOverlay>
);
}
private handleFieldValueChange: (name: string) => (value: string) => void = name => value => {
const { onFieldChange } = this.props;
onFieldChange(name, value);
};
}
export default StaticAddressEditable;
|