fix: hideStoreSelection just hides the button but the drawer can be o…

…pened
vtex-apps · Dec 21, 2024 · ec2c5bb · ec2c5bb
1 parent 987cba7
commit ec2c5bb
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 23 deletions.
diff --git a/react/components/PickupDrawer.tsx b/react/components/PickupDrawer.tsx
@@ -1,13 +1,16 @@
 import React from 'react'
 import { useIntl } from 'react-intl'
 import { usePixel } from 'vtex.pixel-manager'
+import { useCssHandles } from 'vtex.css-handles'
 
 import ShippingOptionDrawer from './ShippingOptionDrawer'
 import ShippingOptionButton from './ShippingOptionButton'
 import { STORE_DRAWER_PIXEL_EVENT_ID } from '../constants'
 import messages from '../messages'
 import PickupSelection from './PickupSelection'
 
+const CSS_HANDLES = ['drawerHiddenIcon'] as const
+
 interface Props {
   isLoading: boolean
   addressLabel?: string
@@ -20,6 +23,7 @@ interface Props {
   pickups: Pickup[]
   onSelectPickup: (pickup: Pickup) => void
   compact: boolean
+  hideStoreSelection: boolean
 }
 
 const PikcupDrawer = ({
@@ -34,9 +38,11 @@ const PikcupDrawer = ({
   selectedPickup,
   onSelectPickup,
   compact,
+  hideStoreSelection,
 }: Props) => {
   const intl = useIntl()
   const { push } = usePixel()
+  const handles = useCssHandles(CSS_HANDLES)
 
   const onOpen = () => {
     push({
@@ -56,14 +62,18 @@ const PikcupDrawer = ({
   return (
     <ShippingOptionDrawer
       icon={
-        <ShippingOptionButton
-          onClick={onOpen}
-          loading={isLoading}
-          value={storeLabel}
-          placeholder={intl.formatMessage(messages.storeButtonPlaceHolder)}
-          label={intl.formatMessage(messages.storeButtonLabel)}
-          compact={compact}
-        />
+        hideStoreSelection ? (
+          <div className={`${handles.drawerHiddenIcon}`} />
+        ) : (
+          <ShippingOptionButton
+            onClick={onOpen}
+            loading={isLoading}
+            value={storeLabel}
+            placeholder={intl.formatMessage(messages.storeButtonPlaceHolder)}
+            label={intl.formatMessage(messages.storeButtonLabel)}
+            compact={compact}
+          />
+        )
       }
       title={intl.formatMessage(drawerTitleMessage)}
       customPixelEventId={STORE_DRAWER_PIXEL_EVENT_ID}

diff --git a/react/index.tsx b/react/index.tsx
@@ -65,21 +65,20 @@ function ShippingOptionZipCode({
         compact={compactMode}
         overlayType={overlayType}
       />
-      {!hideStoreSelection && (
-        <PikcupDrawer
-          isLoading={isLoading}
-          onChange={onChange}
-          onSubmit={() => onSubmit(false)}
-          addressLabel={addressLabel}
-          inputErrorMessage={inputErrorMessage}
-          selectedZipCode={selectedZipCode}
-          zipCode={zipCode}
-          pickups={pickups}
-          selectedPickup={selectedPickup}
-          onSelectPickup={onSelectPickup}
-          compact={compactMode}
-        />
-      )}
+      <PikcupDrawer
+        isLoading={isLoading}
+        onChange={onChange}
+        onSubmit={() => onSubmit(false)}
+        addressLabel={addressLabel}
+        inputErrorMessage={inputErrorMessage}
+        selectedZipCode={selectedZipCode}
+        zipCode={zipCode}
+        pickups={pickups}
+        selectedPickup={selectedPickup}
+        onSelectPickup={onSelectPickup}
+        compact={compactMode}
+        hideStoreSelection={hideStoreSelection}
+      />
     </>
   )
 }

diff --git a/react/styles.css b/react/styles.css
@@ -104,6 +104,10 @@
   width: 100%;
 }
 
+.openIconContainer:has(.drawerHiddenIcon) {
+  display: none;
+}
+
 @keyframes fadein {
   from {
     opacity: 0;