diff --git a/CHANGELOG.md b/CHANGELOG.md index e0a9a3b..4f3a459 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/docs/README.md b/docs/README.md index 9bf7ada..50cff50 100644 --- a/docs/README.md +++ b/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). diff --git a/react/components/ContainerStateSelector.tsx b/react/components/ContainerStateSelector.tsx index 642f1eb..97013dc 100644 --- a/react/components/ContainerStateSelector.tsx +++ b/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 = ({ showSelectSkuMessage, googleMapsKey, + initialOpen }) => { const handles = useCssHandles(CSS_HANDLES) - const [showAddressForm, setShowForm] = useState(false) + const [showAddressForm, setShowForm] = useState(initialOpen) const { favoritePickup, setFavoritePickup } = usePickupFromSession() if (showSelectSkuMessage) { diff --git a/react/index.tsx b/react/index.tsx index fc4af2f..6278dc5 100644 --- a/react/index.tsx +++ b/react/index.tsx @@ -14,9 +14,10 @@ type LogisticsQuery = DataValue 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 }) => { )