Strange issue with page reload

Hi Plasmic team,

I’ve encountered an issue on our site that might be related to the Plasmic page build.

On this page: https://www.daymade.co.uk/enternow/1, when selecting 4 entries and refreshing the page, the correct cost is shown, but the selected entries revert to 1 instead of remaining at 4, which might mean our state management is working but ui is not refreshing it’s value

Additionally:

  • After refresh, the text on the right of grey box seems misaligned as well.
    image

  • If I proceed to the next step and then navigate back to this page, the correct values (both the number of entries and the cost) are displayed as expected in the UI.

  • refreshing this another page breaks the grey box below https://www.daymade.co.uk/enternow/2

I’ve tested this locally and on our staging environment, and everything works as expected, so issue might be just the production build?

I wanted to check with your team before going any further to see if this might be an existing or known issue.

Reproduction steps:

  1. Visit https://www.daymade.co.uk/enternow/1.
  2. Select 4 entries.
  3. Refresh the page - selected numbers are wrong but cost is correct
  4. Navigate to the next step, then go back, and notice that this time the UI behaves as expected.

Relevant links:

My project id: jmAtDALSpsSy16iTzMBxFU

Let me know your thoughts, and if this could be related to the build or something else on our side!

Best regards,
Reshat

Hello @reshat_serpek,

Can you share how you are setting entryFlow in the context?

I think issues possibly stated after we’ve changed cathcall page to a serverside rendered page. During local testing, refreshing page, I can see the initial 1 entry before the state is reinstated to 4. If I change to static generated setup and retry, this doesn’t happen anymore.

We use mobx stores to manage state, our enterflow uses values from the store:

export const EnterFlowGlobalContext = observer(
  ({ children }: React.PropsWithChildren<EnterFlowGlobalContextProps>) => {
    const {
      entryMethod,
      entryMethodBundles,
      num_entries,
      lines,
      days,
      boosted,
      discountFirstEntry,
      promo_code,
      promoCodeApplicationResult,
      discountMultiplier,
      discountMicroAmount,
      discountBannerText,
      regularOrderCost,
      payNowCost,
      orderError,
      orderId,
      isValid,
      isReferralFlow,
      promoCodeMessages,
      setEntryMethod,
      setNumEntries,
      setLines,
      removeLine,
      setLineNumber,
      setDays,
      toggleDay,
      setBoosted,
      setPromoCode,
      toggleLineNumber,
      toggleLineBonusNumber,
      generateLineRandomNumbers,
      chooseNumbers,
      navigateToEnterTest,
      navigateToCheckout,
    } = useEnterStore();

    const computedDiscountBannerText = isReferralFlow
      ? '4 weeks free'
      : discountBannerText
        ? discountBannerText
        : discountFirstEntry
          ? '50% off 1st entry'
          : null;

    const actions = useMemo(
      () => ({
        setEntryMethod,
        setNumEntries,
        setLines,
        removeLine,
        setLineNumber,
        setDays,
        toggleDay,
        setBoosted,
        setPromoCode,
        toggleLineNumber,
        toggleLineBonusNumber,
        generateLineRandomNumbers,
        goUpgradeOffer,
        chooseNumbers,
        navigateToEnterTest,
        navigateToCheckout,
      }),
      [
        setEntryMethod,
        setNumEntries,
        setLines,
        removeLine,
        setLineNumber,
        setDays,
        toggleDay,
        setBoosted,
        setPromoCode,
        toggleLineNumber,
        toggleLineBonusNumber,
        generateLineRandomNumbers,
        chooseNumbers,
        navigateToEnterTest,
        navigateToCheckout,
      ]
    );
    const data = {
      entryMethod,
      num_entries,
      lines,
      days,
      boosted,
      entryMethodBundles,
      promo_code,
      promoCodeApplicationResult,
      promoCodeMessages,
      discountMultiplier,
      discountMicroAmount,
      discountBannerText: computedDiscountBannerText,
      regularOrderCost,
      payNowCost: isReferralFlow ? 0 : payNowCost,
      orderError,
      orderId,
      isValid,
      isReferralFlow,
    };

    return (
      <GlobalActionsProvider
        contextName="EnterFlowGlobalContext"
        actions={actions}
      >
        <DataProvider name="enterFlow" data={data}>
          {children}
        </DataProvider>
      </GlobalActionsProvider>
    );
  }
);