Add initialOpen prop

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [0.3.0] - 2020-07-14
+
+### Added
+- Prop for the component already starting open
+
 ## [0.2.0] - 2020-05-06
 
 ### Added

docs/README.md

@@ -7,6 +7,12 @@
 Use this component to check the availability in-store pickup for selected SKU.
 This component uses the `ProductContext` and is meant to be used inside the `store.product` block.
 
+## Configuration
+
+| Prop name               | Type      | Description                                                                       | Default value        |
+| ----------------------- | --------- | --------------------------------------------------------------------------------- | -------------------- |
+| `initialOpen`           | `boolean` | Makes the component open by default, without having to click on the button.       | `false`              |
+
 #### Customization
 
 In order to apply CSS customizations on this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).

react/components/ContainerStateSelector.tsx

@@ -18,6 +18,7 @@ const CSS_HANDLES = [
 interface Props {
   googleMapsKey?: string
   showSelectSkuMessage: boolean
+  initialOpen: boolean
 }
 
 function usePickupFromSession() {
@@ -58,9 +59,10 @@ function usePickupFromSession() {
 const ContainerStateSelector: FC<Props> = ({
   showSelectSkuMessage,
   googleMapsKey,
+  initialOpen
 }) => {
   const handles = useCssHandles(CSS_HANDLES)
-  const [showAddressForm, setShowForm] = useState(false)
+  const [showAddressForm, setShowForm] = useState(initialOpen)
   const { favoritePickup, setFavoritePickup } = usePickupFromSession()
 
   if (showSelectSkuMessage) {

react/index.tsx

@@ -14,9 +14,10 @@ type LogisticsQuery = DataValue<LogisticsResponse>
 
 interface InjectedProps {
   logisticsQuery: LogisticsQuery
+  initialOpen: boolean
 }
 
-const StorePickup: FC<{} & InjectedProps> = ({ logisticsQuery }) => {
+const StorePickup: FC<{} & InjectedProps> = ({ logisticsQuery, initialOpen }) => {
   const { skuSelector } = useProduct()
   const handles = useCssHandles(CSS_HANDLES)
 
@@ -29,6 +30,7 @@ const StorePickup: FC<{} & InjectedProps> = ({ logisticsQuery }) => {
       <ContainerStateSelector
         showSelectSkuMessage={skuSelector.isVisible && !skuSelector.areAllVariationsSelected}
         googleMapsKey={logisticsQuery.logistics && logisticsQuery.logistics.googleMapsKey}
+        initialOpen={initialOpen}
       />
     </div>
   )