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 | 6x 6x 6x 6x 6x 6x 6x 6x 6x 72x 72x 72x 72x 72x 72x 72x 72x 6x 6x | import React, { PureComponent, ReactNode } from 'react';
import { TranslatedString } from '../locale';
import { OrderComments } from '../orderComments';
import { Alert, AlertType } from '../ui/alert';
import { Button, ButtonVariant } from '../ui/button';
import { Fieldset, Legend } from '../ui/form';
import { ShippingOptions } from './shippingOption';
export interface ShippingFormFooterProps {
cartHasChanged: boolean;
isMultiShippingMode: boolean;
shouldShowOrderComments: boolean;
shouldShowShippingOptions?: boolean;
shouldDisableSubmit: boolean;
isLoading: boolean;
}
class ShippingFormFooter extends PureComponent<ShippingFormFooterProps> {
render(): ReactNode {
const {
cartHasChanged,
isMultiShippingMode,
shouldShowOrderComments,
shouldShowShippingOptions = true,
shouldDisableSubmit,
isLoading,
} = this.props;
return <>
<Fieldset
id="checkout-shipping-options"
legend={
<>
<Legend>
<TranslatedString id="shipping.shipping_method_label" />
</Legend>
{ cartHasChanged &&
<Alert type={ AlertType.Error }>
<strong>
<TranslatedString id="shipping.cart_change_error" />
</strong>
</Alert> }
</>
}
>
<ShippingOptions
isMultiShippingMode={ isMultiShippingMode }
isUpdatingAddress={ isLoading }
shouldShowShippingOptions={ shouldShowShippingOptions }
/>
</Fieldset>
{ shouldShowOrderComments &&
<OrderComments /> }
<div className="form-actions">
<Button
disabled={ shouldDisableSubmit }
id="checkout-shipping-continue"
isLoading={ isLoading }
type="submit"
variant={ ButtonVariant.Primary }
>
<TranslatedString id="common.continue_action" />
</Button>
</div>
</>;
}
}
export default ShippingFormFooter;
|