add shipping_info cookie

CHANGELOG.md

@@ -7,7 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- sometimes zip code is not updated due to a problem in `__RUNTIME__.segmentToken`
+
 ## [0.5.0] - 2024-12-18
+
 ### Added
 
 - Popover to open the location drawer;

react/client.ts

@@ -1,3 +1,6 @@
+import { SHIPPING_INFO_COOKIE } from './constants'
+import { setCookie } from './utils/cookie'
+
 export const getAddress = (
   countryCode: string,
   zipCode: string,
@@ -11,16 +14,23 @@ export const updateSession = (
   zipCode: string,
   geoCoordinates: number[],
   pickup?: Pickup
-) =>
-  fetch('/api/sessions', {
+) => {
+  const facetsValue = `zip-code=${zipCode};coordinates=${geoCoordinates.join(
+    ','
+  )}${pickup ? `;pickupPoint=${pickup.pickupPoint.id}` : ''}`
+
+  // __RUNTIME__.segmentToken is not reliable for the facets. It might not be updated. For this reason we must try to get the info from our custom cookie first
+  // Replacing ";" by ":" because ";" is not allowed in cookies
+  setCookie(SHIPPING_INFO_COOKIE, facetsValue.replace(';', ':'))
+
+  return fetch('/api/sessions', {
     method: 'POST',
-    body: `{"public":{"facets":{"value":"zip-code=${zipCode};coordinates=${geoCoordinates.join(
-      ','
-    )}${pickup ? `;pickupPoint=${pickup.pickupPoint.id}` : ''}"}}}`,
+    body: `{"public":{"facets":{"value":"${facetsValue}"}}}`,
     headers: {
       'Content-Type': 'application/json',
     },
   })
+}
 
 export const getPickups = (
   countryCode: string,

react/constants.ts

@@ -1,2 +1,3 @@
 export const DELIVER_DRAWER_PIXEL_EVENT_ID = 'shipping-option-deliver-to'
 export const STORE_DRAWER_PIXEL_EVENT_ID = 'shipping-option-store'
+export const SHIPPING_INFO_COOKIE = 'shipping_info'

react/utils/cookie.ts

@@ -1,3 +1,5 @@
+import { SHIPPING_INFO_COOKIE } from '../constants'
+
 export function getCookie(name: string) {
   const value = `; ${document.cookie}`
   const parts = value.split(`; ${name}=`)
@@ -9,20 +11,39 @@ export function getCookie(name: string) {
   return undefined
 }
 
+export function setCookie(name: string, val: string) {
+  const date = new Date()
+  const value = val
+
+  date.setTime(date.getTime() + 30 * 60 * 1000)
+
+  document.cookie = `${name}=${value}; expires=${date.toUTCString()}; path=/`
+}
+
 export function getFacetsData(facetsDataTarget: string) {
-  const segment = (window as any)?.__RUNTIME__.segmentToken
+  // __RUNTIME__.segmentToken is not reliable for the facets. It might not be updated. For this reason we must try to get the info from our custom cookie first
 
-  if (!segment) {
-    return
-  }
+  let facets = getCookie(SHIPPING_INFO_COOKIE)
+
+  if (!facets) {
+    const segment =
+      getCookie(SHIPPING_INFO_COOKIE) ??
+      (window as any)?.__RUNTIME__.segmentToken
+
+    if (!segment) {
+      return
+    }
 
-  const { facets } = JSON.parse(atob(segment))
+    facets = JSON.parse(atob(segment)).facets
+  }
 
   if (!facets) {
     return
   }
 
+  //  In case the facets came from the shipping_info cookie we must replace ":" by ";" because ";" is not allowed in cookies.
   const facetsTarget = facets
+    .replace(':', ';')
     .split(';')
     .find((facet: string) => facet.indexOf(facetsDataTarget) > -1)