Add shipping options context

manifest.json

@@ -38,7 +38,8 @@
     "vtex.css-handles": "0.x",
     "vtex.store-drawer": "0.x",
     "vtex.product-list-context": "0.x",
-    "vtex.structured-data": "0.x"
+    "vtex.structured-data": "0.x",
+    "vtex.shipping-option-components": "0.x"
   },
   "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
 }

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/components/SearchQuery.js

@@ -217,7 +217,11 @@ const useQueries = (variables, facetsArgs, price) => {
 
   const detachedFilters =
     facets && facets.facets
-      ? detachFiltersByType(facets.facets)
+      ? detachFiltersByType(
+          facets.facets,
+          !!productSearchResult.data?.productSearch?.options
+            ?.deliveryPromisesEnabled
+        )
       : {
           brands: [],
           brandsQuantity: 0,

react/hooks/useShippingActions.js

@@ -1,6 +1,5 @@
-import { useCallback, useEffect, useState } from 'react'
-import { usePixel, usePixelEventCallback } from 'vtex.pixel-manager'
-import { useSSR } from 'vtex.render-runtime/react/components/NoSSR'
+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,45 +38,19 @@ const useShippingActions = facet => {
   const isAddressDependent =
     addressDependentValues.findIndex(value => facet.value === value) > -1
 
-  const isSSR = useSSR()
-  const { push } = usePixel()
-
-  usePixelEventCallback({
-    eventId: `shipping-option-${eventIdentifier}`,
-    handler: e => {
-      if (e?.data?.label) {
-        setActionLabel(e.data.label)
-
-        if (isAddressDependent) {
-          setIsAddressSet(true)
-        }
-
-        if (eventIdentifier === 'pickupPointLabel') {
-          setIsPickupSet(true)
-        }
-      } else {
-        setActionLabel(placeHolders[actionType])
-
-        if (isAddressDependent) {
-          setIsAddressSet(false)
-        }
-
-        if (eventIdentifier === 'pickupPointLabel') {
-          setIsPickupSet(false)
-        }
-      }
-    },
-  })
+  const { zipcode, selectedPickup, city, addressLabel } =
+    useShippingOptionState()
 
   useEffect(() => {
-    if (!isSSR) {
-      return
-    }
+    const pickupPointLabel = selectedPickup
+      ? selectedPickup.pickupPoint.friendlyName
+      : ''
 
-    const windowLabel = window[eventIdentifier]
+    const label =
+      eventIdentifier === 'pickupPointLabel' ? pickupPointLabel : addressLabel
 
-    if (windowLabel) {
-      setActionLabel(windowLabel)
+    if (label) {
+      setActionLabel(label)
 
       if (isAddressDependent) {
         setIsAddressSet(true)
@@ -102,29 +70,29 @@ const useShippingActions = facet => {
         setIsPickupSet(false)
       }
     }
-  }, [actionType, eventIdentifier, isSSR, isAddressDependent])
-
-  const openDrawer = useCallback(() => {
-    push({
-      id: drawerEvent[actionType],
-    })
-  }, [actionType, push])
+  }, [
+    actionType,
+    city,
+    eventIdentifier,
+    isAddressDependent,
+    zipcode,
+    selectedPickup,
+    addressLabel,
+  ])
 
   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,
   }
 }

react/utils/compatibilityLayer.js

@@ -78,7 +78,10 @@ const addMap = facet => {
   }
 }
 
-export const detachFiltersByType = facets => {
+export const detachFiltersByType = (
+  facets,
+  deliveryPromisesEnabled = false
+) => {
   facets.forEach(facet => facet.facets.forEach(value => addMap(value)))
 
   const byType = groupBy(filter => filter.type)
@@ -96,7 +99,9 @@ export const detachFiltersByType = facets => {
     groupedFilters.TEXT || []
   )
 
-  const deliveries = getFormattedDeliveries(groupedFilters.DELIVERY || [])
+  const deliveries = deliveryPromisesEnabled
+    ? getFormattedDeliveries(groupedFilters.DELIVERY || [])
+    : []
 
   const categoriesTrees = pathOr(
     [],