Bug: Shipping details are cleared/erased when auth route is queried at checkout

[felipemullen]

trafficstars

I have consistently been able to reproduce this bug, it appears that the checkout provider is recreated when the user auth session is queried (see video below)

1. Clear cookies/session data
2. Add an item to bag
3. go to checkout page
4. begin filling out form
5. when auth is queried, the form is erased

I am guessing that when the checkout provider is recreated, the entire <CheckoutForm> component is remounted, causing the data loss.

No workaround at the moment

https://github.com/medusajs/nextjs-starter-medusa/assets/3488482/37282339-bd00-458a-bbf1-70343a72538b

[omarghader]

Same here

[felipemullen]

while trying to diagnose the issue I have found that there is a difference in the cart object returned from useCheckout() on the 2nd load of the checkout component. It appears that the property payment_sessions is an empty array on first load, and later populated, and a payment_session prop is filled in with the active session (from stripe, in my case).

Still unsure why the Checkout component does not hold the values between renders

[felipemullen]

I am guessing that the payment session causes the entire component tree to be mounted again when the data changes, looking at CheckoutProvider:

[felipemullen]

I have implemented a workaround for now:

change CheckoutForm to call useCheckout instead of useCart

const CheckoutForm = () => {
    const { cart } = useCheckout();
   ...
}

also render a spinner where <Addresses /> was until the payment_session prop has a value to prevent customer frustration

<div>
    {!cart?.payment_session &&
        <StepContainer index={1} title="Shipping" closedState={
            <div className="w-100 px-8 pb-8 text-small-regular flex content-center">
                <Spinner />
            </div>
        } />
    }
    {cart?.payment_session && <Addresses />}
</div>

If someone from the medusa team has any insights, I am still uncertain as to why the component is unstable. I read through the payment docs but it did not shed any light on why the this storefront implementation behaves this way. The system is still very new to my knowledge to be clear.

Customers are unhappy with their carts being cleared after ~1 sec of typing, as one might expect

[GitQuist]

Would be great to have some more eyes on this issue.

Can confirm the we are experiencing it as well.

Removing the useEffect from the <Payment /> component in the checkout "fixes" the problem, but then we don't get the intended fallback:

const Payment = () => {
  const {
    cart,
    setPaymentSession,
    initPayment,
    sameAsBilling: { state: isSame },
  } = useCheckout()
  
    /**
   * Fallback if the payment session are not loaded properly we
   * retry to load them after a 5 second delay.
   */
  /* useEffect(() => {
    let timeout: NodeJS.Timeout | null = null
    if (cart?.shipping_address && cart?.payment_sessions) {
      timeout = setTimeout(() => {
        initPayment()
      }, 5000)
    }

    return () => {
      if (timeout) {
        clearTimeout(timeout)
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [cart]) */

  return (.....

Anyone else have a good fix for this bug?

[rkmcdonnell]

This is still an issue as far as I can tell - anyone know if there is any roadmap fix for this?