feat: add shipping-option-components modals into radio group component

Author: ArthurFerrao

react/SearchResultFlexible.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useEffect, useRef, useState } from 'react'
+import React, { useMemo, useEffect, useRef } from 'react'
 import {
   SearchPageContext,
   SearchPageStateContext,
@@ -9,9 +9,6 @@ import { useCssHandles } from 'vtex.css-handles'
 import { useRuntime } from 'vtex.render-runtime'
 import { generateBlockClass } from '@vtex/css-handles'
 import { pathOr, isEmpty } from 'ramda'
-import PostalCodeModal from 'vtex.shipping-option-components/PostalCodeModal'
-import PickupModal from 'vtex.shipping-option-components/PickupModal'
-import { usePixelEventCallback } from 'vtex.pixel-manager'
 
 import SearchResultContainer from './components/SearchResultContainer'
 import ContextProviders from './components/ContextProviders'
@@ -20,9 +17,6 @@ import LoadingOverlay from './components/LoadingOverlay'
 import { PAGINATION_TYPE } from './constants/paginationType'
 import styles from './searchResult.css'
 
-const DELIVER_DRAWER_PIXEL_EVENT_ID = 'shipping-option-deliver-to'
-const STORE_DRAWER_PIXEL_EVENT_ID = 'shipping-option-store'
-
 const emptyFacets = {
   brands: [],
   priceRanges: [],
@@ -71,21 +65,6 @@ const SearchResultFlexible = ({
   thresholdForFacetSearch,
   lazyItemsRemaining,
 }) => {
-  const [isPostalCodeModalOpen, setIsPostalCodeModalOpen] = useState(false)
-  const [isPickupModalOpen, setisPickupModalOpen] = useState(false)
-
-  usePixelEventCallback({
-    eventId: DELIVER_DRAWER_PIXEL_EVENT_ID,
-    handler: () => setIsPostalCodeModalOpen(true),
-  })
-
-  usePixelEventCallback({
-    eventId: STORE_DRAWER_PIXEL_EVENT_ID,
-    handler: () => {
-      setisPickupModalOpen(true)
-    },
-  })
-
   // This makes infinite scroll unavailable.
   // Infinite scroll was deprecated and we have
   // removed it since the flexible search release
@@ -253,14 +232,6 @@ const SearchResultFlexible = ({
                 >
                   {children}
                 </div>
-                <PostalCodeModal
-                  isOpen={isPostalCodeModalOpen}
-                  onClose={() => setIsPostalCodeModalOpen(false)}
-                />
-                <PickupModal
-                  isOpen={isPickupModalOpen}
-                  onClose={() => setisPickupModalOpen(false)}
-                />
               </LoadingOverlay>
             </SearchResultContainer>
           </ContextProviders>

react/components/RadioFilters.js

@@ -1,22 +1,28 @@
 import React, { useEffect, useState } from 'react'
 import { useIntl } from 'react-intl'
 import { RadioGroup } from 'vtex.styleguide'
+import PostalCodeModal from 'vtex.shipping-option-components/PostalCodeModal'
+import PickupModal from 'vtex.shipping-option-components/PickupModal'
 
 import ShippingActionButton from './ShippingActionButton'
 import useShippingActions from '../hooks/useShippingActions'
 
-const RadioItem = ({ facet }) => {
+const RadioItem = ({ facet, onOpenPostalCodeModal, onOpenPickupModal }) => {
   const intl = useIntl()
 
-  const { actionLabel, actionType, openDrawer } = useShippingActions(facet)
+  const { actionLabel, actionType } = useShippingActions(facet)
 
   return (
     <div>
       <div>{facet.name}</div>
       {actionType ? (
         <ShippingActionButton
           label={intl.formatMessage({ id: actionLabel ?? 'none' })}
-          openDrawer={openDrawer}
+          openDrawer={
+            actionType === 'DELIVERY'
+              ? onOpenPostalCodeModal
+              : onOpenPickupModal
+          }
         />
       ) : undefined}
     </div>
@@ -26,6 +32,8 @@ const RadioItem = ({ facet }) => {
 const RadioFilters = ({ facets, onChange }) => {
   const selectedOption = facets.find(facet => facet.selected)
   const lastValue = selectedOption ? selectedOption.value : undefined
+  const [isPostalCodeModalOpen, setIsPostalCodeModalOpen] = useState(false)
+  const [isPickupModalOpen, setisPickupModalOpen] = useState(false)
 
   const [selectedValue, setSelectedValue] = useState(lastValue)
 
@@ -48,19 +56,35 @@ const RadioFilters = ({ facets, onChange }) => {
   }
 
   return (
-    <RadioGroup
-      hideBorder
-      size="small"
-      name="shipping"
-      options={facets.map(facet => ({
-        id: facet.value,
-        value: facet.value,
-        label: <RadioItem facet={facet} />,
-        disabled: facet.quantity === 0,
-      }))}
-      value={selectedValue}
-      onChange={onRadioSelect}
-    />
+    <>
+      <RadioGroup
+        hideBorder
+        size="small"
+        name="shipping"
+        options={facets.map(facet => ({
+          id: facet.value,
+          value: facet.value,
+          label: (
+            <RadioItem
+              facet={facet}
+              onOpenPostalCodeModal={() => setIsPostalCodeModalOpen(true)}
+              onOpenPickupModal={() => setisPickupModalOpen(true)}
+            />
+          ),
+          disabled: facet.quantity === 0,
+        }))}
+        value={selectedValue}
+        onChange={onRadioSelect}
+      />
+      <PostalCodeModal
+        isOpen={isPostalCodeModalOpen}
+        onClose={() => setIsPostalCodeModalOpen(false)}
+      />
+      <PickupModal
+        isOpen={isPickupModalOpen}
+        onClose={() => setisPickupModalOpen(false)}
+      />
+    </>
   )
 }
 

react/hooks/useShippingActions.js

@@ -1,5 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
-import { usePixel } from 'vtex.pixel-manager'
+import { useEffect, useState } from 'react'
 import { useShippingOptionState } from 'vtex.shipping-option-components/ShippingOptionContext'
 
 import useShouldDisableFacet from './useShouldDisableFacet'
@@ -21,11 +20,6 @@ const placeHolders = {
   PICKUP_POINT: 'store/search.filter.shipping.action-button.pickup-in-point',
 }
 
-const drawerEvent = {
-  DELIVERY: 'shipping-option-deliver-to',
-  PICKUP_POINT: 'shipping-option-store',
-}
-
 const addressDependentValues = [
   'delivery',
   'pickup-in-point',
@@ -44,8 +38,6 @@ const useShippingActions = facet => {
   const isAddressDependent =
     addressDependentValues.findIndex(value => facet.value === value) > -1
 
-  const { push } = usePixel()
-
   const { zipcode, selectedPickup, city, addressLabel } =
     useShippingOptionState()
 
@@ -88,27 +80,19 @@ const useShippingActions = facet => {
     addressLabel,
   ])
 
-  const openDrawer = useCallback(() => {
-    push({
-      id: drawerEvent[actionType],
-    })
-  }, [actionType, push])
-
   const shouldDisable = useShouldDisableFacet(facet, isAddressSet, isPickupSet)
 
   if (facet.value === 'pickup-nearby' || facet.value === 'pickup') {
     return {
       actionLabel: null,
       actionType: null,
-      openDrawer: null,
       shouldDisable,
     }
   }
 
   return {
     actionType,
     actionLabel,
-    openDrawer,
     shouldDisable,
   }
 }