| 1 |
import { ValidatedTextInput } from '@woocommerce/blocks-components'; |
| 2 |
import { PacketaWidget } from './PacketaWidget'; |
| 3 |
import { useView } from "./useView"; |
| 4 |
|
| 5 |
export const View = ( { cart } ) => { |
| 6 |
|
| 7 |
const view = useView( cart ); |
| 8 |
if ( null === view ) { |
| 9 |
return null; |
| 10 |
} |
| 11 |
|
| 12 |
const { |
| 13 |
buttonCallback, |
| 14 |
buttonLabel, |
| 15 |
buttonInfo, |
| 16 |
inputValue, |
| 17 |
inputRequired, |
| 18 |
errorMessage, |
| 19 |
logo, |
| 20 |
translations, |
| 21 |
loading, |
| 22 |
} = view; |
| 23 |
|
| 24 |
// translations are sometimes unexpectedly undefined |
| 25 |
if ( ! translations ) { |
| 26 |
return null; |
| 27 |
} |
| 28 |
|
| 29 |
return ( |
| 30 |
<PacketaWidget |
| 31 |
onClick={ buttonCallback } |
| 32 |
buttonLabel={ buttonLabel } |
| 33 |
logoSrc={ logo } |
| 34 |
logoAlt={ translations.packeta } |
| 35 |
info={ buttonInfo } |
| 36 |
loading={ loading } |
| 37 |
placeholderText={ translations.placeholderText } |
| 38 |
> |
| 39 |
<ValidatedTextInput |
| 40 |
key={ inputRequired ? 'required' : 'optional' } |
| 41 |
value={ inputValue } |
| 42 |
required={ inputRequired } |
| 43 |
errorMessage={ errorMessage } |
| 44 |
/> |
| 45 |
</PacketaWidget> |
| 46 |
); |
| 47 |
|
| 48 |
}; |
| 49 |
|
