[Bug]: openSession doesn't trigger contentCards refresh

[lvinno]

Braze Web SDK Version

5.2.0

Integration Method

NPM

Browser

Chrome

Steps To Reproduce

import {
  changeUser,
  initialize,
  openSession,
  requestContentCardsRefresh,
  subscribeToContentCardsUpdates,
} from '@braze/web-sdk';

  const subscriber = useCallback(updates => {
    const cards = updates.cards;
    setCards(cards);
  }, []);

  useEffect(() => {
    if (userId && !isBrazeInit) {

      initialize('AN_API_KEY', {
        baseUrl: 'BASE_URL,
        enableLogging: true,
      });
      changeUser(userId);
      subscribeToContentCardsUpdates(cards => subscriber(cards));

      // called openSession but no contentCards updates observed, even wait for some time.
      openSession();

      // have to manually request refresh to update the cards
      requestContentCardsRefresh();
      setIsBrazeInit(true);
    }
  }, [userId, isBrazeInit, subscriber]);

Expected Behavior

Upon calling openSession in this case the content cards should be updated.

Actual Incorrect Behavior

Upon calling openSession, the content cards are not getting updates, even for a long time.

Verbose Logs

No response

Additional Information

No response

[spvismaya]

Thank you for raising the issue @lvinno , we are currently investigating and will get back to you when we have an update.

[spvismaya]

Hi @lvinno , we have a workaround that you could use while we fix this on our end. Please call changeUser(userId) after subscribeToContentCardsUpdates(cards => subscriber(cards)) (and right before openSession()). This should resolve the issue for now and remove the need for manually requesting content cards.

[joaovpmamede]

@lvinno did you try the @spvismaya suggestion? I'm having the same issue and unfortunately that didn't work as expected.

[spvismaya]

@joaovpmamede could you please share code snippets that show the sequence of calls? Curious why the workaround did not help.

[joaovpmamede]

@spvismaya I have been doing a couple of tests. For example with this code

    (async function () {
      const {
        initialize,
        openSession,
        getUser,
        changeUser,
        subscribeToContentCardsUpdates,
      } = await import('@braze/web-sdk');

      initialize(
        process.env.NEXT_PUBLIC_BRAZE_API_KEY,
        {
          baseUrl: process.env.NEXT_PUBLIC_BRAZE_SDK_ENDPOINT,
        },
      );

      subscribeToContentCardsUpdates(cards => console.log(cards));

      const brazeUser = getUser();
      const brazeUserId = brazeUser.getUserId();

      if (!brazeUserId) {
        const id = crypto.randomUUID();
        changeUser(id);
      }

      openSession();
    });
  }, []);

This is what I get on console: ContentCards {cards: Array(0), lastUpdated: Tue Jul 02 2024 19:22:19 GMT+0100 (Western European Summer Time)}

I don't get the content cards on the cards array. But if I clear the localstorage it shows up correctly: ContentCards {cards: Array(3), lastUpdated: Tue Jul 02 2024 19:22:59 GMT+0100 (Western European Summer Time)}

I was also trying with putting all the braze methods that I need in a context so I can share and call them later on specific components. That also does not work, sometimes it does.

Another question that I have is shouldn't the content cards be available everytime I reload the page? Same applies to in app messaging, which works better than the content cards but as soon as I reload the page it doesn't show up anymore.