fix: pickup selected is changing when page reloads

react/hooks/useShippingOptions.ts

@@ -4,7 +4,7 @@ import { useRuntime, useSSR } from 'vtex.render-runtime'
 import { useIntl } from 'react-intl'
 import { usePixel } from 'vtex.pixel-manager'
 
-import { getCountryCode, getOrderFormId, getZipCode } from '../utils/cookie'
+import { getCountryCode, getOrderFormId, getFacetsData } from '../utils/cookie'
 import messages from '../messages'
 import {
   getAddress,
@@ -37,15 +37,25 @@ const useShippingOptions = () => {
 
       setPickups(responsePickups.items)
 
-      if (responsePickups.items.length === 0) {
+      if (responsePickups?.items?.length === 0) {
         setIsLoading(false)
 
         return
       }
 
-      setSelectecPickup(responsePickups.items[0])
+      let [pickup] = responsePickups.items
 
-      await updateSession(zipCode, coordinates, responsePickups.items[0])
+      const pickupPointId = getFacetsData('pickupPoint')
+
+      if (pickupPointId) {
+        pickup = responsePickups.items.find(
+          (p: any) => p.pickupPoint.id === pickupPointId
+        )
+      }
+
+      setSelectecPickup(pickup)
+
+      await updateSession(zipCode, coordinates, pickup)
 
       setIsLoading(false)
     },
@@ -57,7 +67,7 @@ const useShippingOptions = () => {
       return
     }
 
-    const segmentZipCode = getZipCode()
+    const segmentZipCode = getFacetsData('zip-code')
     const segmentCountryCode = getCountryCode()
 
     setSelectedZipCode(segmentZipCode)

react/utils/cookie.ts

@@ -9,7 +9,7 @@ export function getCookie(name: string) {
   return undefined
 }
 
-export function getZipCode() {
+export function getFacetsData(facetsDataTarget: string) {
   const segment = (window as any)?.__RUNTIME__.segmentToken
 
   if (!segment) {
@@ -22,21 +22,21 @@ export function getZipCode() {
     return
   }
 
-  const zipCodeFacet = facets
+  const facetsTarget = facets
     .split(';')
-    .find((facet: string) => facet.indexOf('zip-code') > -1)
+    .find((facet: string) => facet.indexOf(facetsDataTarget) > -1)
 
-  if (!zipCodeFacet) {
+  if (!facetsTarget) {
     return
   }
 
-  const [, zipCode] = zipCodeFacet.split('=')
+  const [, data] = facetsTarget.split('=')
 
-  if (zipCode && zipCode[zipCode.length - 1] === ';') {
-    return zipCode.substring(0, zipCode.length - 1)
+  if (data && data[data.length - 1] === ';') {
+    return data.substring(0, data.length - 1)
   }
 
-  return zipCode
+  return data
 }
 
 export function getCountryCode() {