From b9fdf8822d63f56139bbafdaa11bfd16da1961b6 Mon Sep 17 00:00:00 2001
From: Claudiu <claudiu@iviteb.com>
Date: Thu, 26 Nov 2020 14:53:07 +0200
Subject: [PATCH] added css handler for pickupa address select message

---
 docs/README.md                           |  1 +
 react/components/AddressInput.tsx        |  8 ++++----
 react/components/AddressInputMessage.tsx | 16 ++++++++++++++++
 3 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 react/components/AddressInputMessage.tsx

diff --git a/docs/README.md b/docs/README.md
index 9bf7ada..e3ba26e 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -20,6 +20,7 @@ In order to apply CSS customizations on this and other blocks, follow the instru
 | `container`                         |
 | `innerContainer`                    |
 | `shippingEstimate[--]{timeModifier}`|
+| `addressMessage                    `|
 
 ## Contributors ✨
 
diff --git a/react/components/AddressInput.tsx b/react/components/AddressInput.tsx
index 0447418..0365c8f 100644
--- a/react/components/AddressInput.tsx
+++ b/react/components/AddressInput.tsx
@@ -2,11 +2,13 @@ import React, { Fragment, PureComponent } from 'react'
 import { withScriptjs, WithScriptjsProps } from 'react-google-maps'
 import { withRuntimeContext, RenderContextProps } from 'vtex.render-runtime'
 import ReactGoogleAutocomplete from './ReactGooogleAutocomplete'
-import { FormattedMessage, injectIntl, InjectedIntlProps } from 'react-intl'
+import { injectIntl, InjectedIntlProps } from 'react-intl'
+import AddressInputMessage from './AddressInputMessage'
 
 const GEOLOCATION_TIMEOUT = 30 * 1000
 const MAXIMUM_AGE = 3 * 1000
 
+
 const getCurrentPositionPromise = (): Promise<Position> => {
   const geolocationOptions = {
     enableHighAccuracy: true,
@@ -110,9 +112,7 @@ class AddressInput extends PureComponent<Props & WithScriptjsProps & RenderConte
 
     return (
       <Fragment>
-        <div className="t-body c-on-base mv4">
-          <FormattedMessage id="store/pickup-availability.input-form-header" />
-        </div>
+        <AddressInputMessage />
         <ReactGoogleAutocomplete
           isLoading={false}
           isFetchingPosition={this.state.isFetchingPosition}
diff --git a/react/components/AddressInputMessage.tsx b/react/components/AddressInputMessage.tsx
new file mode 100644
index 0000000..759e14f
--- /dev/null
+++ b/react/components/AddressInputMessage.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { FormattedMessage } from 'react-intl'
+import { useCssHandles } from 'vtex.css-handles'
+
+const CSS_HANDLES = ['addressMessage']
+
+const AddressInputMessage = () => {
+  const handles = useCssHandles(CSS_HANDLES)
+  return (
+    <div className={`t-body c-on-base mv4 ${handles.addressMessage}`}>
+      <FormattedMessage id="store/pickup-availability.input-form-header" />
+    </div>
+  )
+}
+
+export default AddressInputMessage