useDeliveryGroup returning empty result

[adearriba-fik]

List the package(s) involved in the issue

@shopify/checkout-ui-extensions-react Version: 0.27.1"

Describe the bug

useDeliveryGroups hook returns empty array even when there are Shipping Methods. This is not something I can reproduce constantly. Normally I need to open the store in a private tab and go to the checkout. Sometimes it happens, sometimes it doesnt.

If I refresh, it works. Seems like there is a dependency missing in the hook so it's not refreshing correctly the value.

Here is a picture of the error where I'm printing the useDeliveryGroups value in a useEffect:

const deliveryGroups = useDeliveryGroups();
useEffect(() => {
    console.log("deliveryGroups changed", deliveryGroups);
}, deliveryGroups);

Steps to reproduce the behavior:

1. Open store in your browser's private window/tab
2. Go to checkout, fill out information page information
3. Continue to Shipping methods

Expected behavior

useDeliveryGroups has the Shipping Methods details.

Additional context

We are using a Shipping Method selector app named: Calcurates

[mleandres]

Hello @adearriba-fik do you have a link to a store where you're seeing this?

[mleandres]

I'm unable to reproduce this myself but I'd like to take a deeper dive.

[peepers-rick]

I'm having the same (or similar) issue. I'm literally copying and pasting from https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/delivery

  const deliveryGroups = useDeliveryGroups();
  const {
    selectedDeliveryOption,
    targetedCartLines,
  } = useDeliveryGroup(deliveryGroups[0]);

and I'm getting this error: Uncaught DeliveryGroupHookError: useDeliveryGroup must be called with a delivery group from the useDeliveryGroups hook. I clearly am, but if I look at the stack trace it's throwing the error due to no deliveryGroup:

function useDeliveryGroup(deliveryGroup) {
    const {
      lines
    } = useApi();
    const cartLines = useSubscription(lines);
    return (0, import_react12.useMemo)(() => {
      if (!deliveryGroup) {
        throw new DeliveryGroupHookError("useDeliveryGroup must be called with a delivery group from the useDeliveryGroups hook");
      }

package.json

"dependencies": {
    "@shopify/ui-extensions": "2023.10.0",
    "@shopify/ui-extensions-react": "2023.10.0",
    "react": "^18.2.0",
    "react-reconciler": "0.29.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.33"
  }

Same behavior in that this doesn't happen every time, but does happen most of the time. This is live on Peepers.com if you want to look at the chrome dev tools console. You can trigger it by changing your shipping country to Canada. This seemed to become more prevalent after we switched from the 3 page to 1 page checkout.

Here is my entire Checkout.jsx in it's entirety. Pretty straightforward:

import {
  Banner,
  useApi,
  useTranslate,
  reactExtension,
  useShippingAddress,
  useSubscription,
  useDeliveryGroups,
  useDeliveryGroup,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.shipping-option-list.render-after',
  () => <Extension />,
);

function Extension() {
  const translate = useTranslate();
  const address = useShippingAddress()

  const {extension, target, isTargetSelected} =
    useApi();
  const deliveryGroups = useDeliveryGroups();
  const {
    selectedDeliveryOption,
    targetedCartLines,
  } = useDeliveryGroup(deliveryGroups[0]);

  const getNextDay = () => {
    const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    const currentLocalDate = new Date();
    const dayOfWeek = currentLocalDate.getUTCDay();

    // If today is Friday, the next day for shipping will be Tuesday
    if (dayOfWeek === 5) return "Tuesday";

    // Otherwise, find the day two days from today
    return days[(dayOfWeek + 2) % 7];
  };

  const isPast1pmCT = () => {
    const currentLocalDate = new Date();
      
    // Central Time is either UTC-5 or UTC-6 depending on Daylight Saving
    const ctOffset = currentLocalDate.getTimezoneOffset() >= 300 ? -5 : -6;
    
    // Convert local time to Central Time
    const ctHours = currentLocalDate.getUTCHours() + ctOffset;
  
    return ctHours >= 13;
  };
  

  let warningMessage = `It is currently after 1PM CT. Your order will not be shipped until tomorrow and will not arrive until ${getNextDay()}.`;
  
  if (getNextDay() === "Tuesday") {
    warningMessage = "It is currently after 1PM CT on Friday. Your order will not be shipped until Monday and will not arrive until Tuesday.";
  }
  
  const shouldShowNextDayAirDisclaimer = selectedDeliveryOption?.title?.toLowerCase().includes('ups next day air') && isPast1pmCT();

  return (
    address?.countryCode !== 'US' ? (
      <Banner title="Customs Disclaimer">
      By continuing to payment method, please note that items shipped outside of the United States may be subject to import duties, taxes and/or charges which are not included in the total cost of my order, nor will they be covered or reimbursed by Peepers.

      Please check with your country's customs office to determine what these additional costs will be prior to placing your order.
    </Banner>
    ) : shouldShowNextDayAirDisclaimer ? (
      <Banner status='warning' title="Next Day Air Warning">
        {warningMessage}
      </Banner>
    ) : null
  );
}

Unfortunately is does not just throw the error and move on, its uncaught, so it bombs the entire app and nothing renders.

To get around this for now, I stole a fake delivery group from a unit test in this package

const fakeDeliveryGroup = {
  selectedDeliveryOption: {
    handle: 'shipping_method_1',
  },
  groupType: 'oneTimePurchase',
  isDeliveryRequired: true,
  targetedCartLines: [
    {
      id: 'gid://shopify/CartLine/stable_id',
    },
  ],
  deliveryOptions: [
    {
      handle: 'shipping_method_1',
      title: 'Shipping method 1',
      description: undefined,
      type: 'shipping',
      carrier: {
        name: 'test carrier',
      },
      cost: {
        amount: 10,
        currencyCode: 'USD',
      },
      costAfterDiscounts: {
        amount: 10,
        currencyCode: 'USD',
      },
      deliveryEstimate: {
        timeInTransit: {
          lower: 10000,
          upper: 10000,
        },
      },
    },
  ],
}

then conditionally use it in my useDeliveryGroup call like so const { selectedDeliveryOption, targetedCartLines, } = useDeliveryGroup(deliveryGroups?.[0] || fakeDeliveryGroup);

[hager-david]

It happens for me, when I first come to a single paged checkout page, and have zero shippping address information filled. If that is the case, Shopify will hide all shipping rates, so that means no shipping rate at all => my app crashes, and won't render again.

If I fill out the shipping address information field, and then reload the page, the app will work again. I think it's definitely a bug.

Thank you @peepers-rick for the temporary solution, it fixes the problem.

[rbarreca]

I'm getting this too. I'm also literally copying and pasting from https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/delivery. It seeeems to happen when I first preview the checkout UI extension but it's hard to find a clean repro. For sure there's a bug here. Thanks @peepers-rick for the workaround, it seems like it's unblocked me, too.

I'm using TypeScript so needed to add a type and the code attribute like so:

const fakeDeliveryGroup: DeliveryGroup = {
  selectedDeliveryOption: {
    handle: 'shipping_method_1',
  },
  groupType: 'oneTimePurchase',
  isDeliveryRequired: true,
  targetedCartLines: [
    {
      id: 'gid://shopify/CartLine/stable_id',
    },
  ],
  deliveryOptions: [
    {
      handle: 'shipping_method_1',
      title: 'Shipping method 1',
      description: undefined,
      type: 'shipping',
      code: 'Shipping method 1',
      carrier: {
        name: 'test carrier',
      },
      cost: {
        amount: 10,
        currencyCode: 'USD',
      },
      costAfterDiscounts: {
        amount: 10,
        currencyCode: 'USD',
      },
      deliveryEstimate: {
        timeInTransit: {
          lower: 10000,
          upper: 10000,
        },
      },
    },
  ],
}

[rbarreca]

Seeing some posts regarding Functions showing empty deliveryGroups unexpectedly as well. Same root cause?

• https://community.shopify.com/c/shopify-functions/product-discount-functions-api-no-deliverygroups-returned/td-p/2184736
• https://community.shopify.com/c/shopify-functions/shopify-functions-bug-delivery-groups-array-is-empty/td-p/2000018

[mleandres]

Just getting back into this thread, I'm gonna be working on a short term fix for useDeliveryGroup only in ui-extensions to allow an undefined delivery group and just return undefined in that case.

I'm not aware of any functions context or what the root cause would be because it seems like "empty deliveryGroups" should be a valid case, especially in one-page.

[mleandres]

Additionally, we've been getting more and more reports of this from larger merchants so I think it's safe to bump this to SEV-3

[kucherenko-ae]

Hello
temporary solution:

const deliveryGroups = useDeliveryGroups()
const { deliveryOptions, selectedDeliveryOption } = deliveryGroups[0] ?? {}
const deliveryOption = deliveryOptions?.find(({ handle }) => {
  return handle === selectedDeliveryOption?.handle
})

[mleandres]

@kucherenko-ae , thanks for the workaround! This fix for this will be pushed to our next stable version (2024-04) since it is technically a breaking change. We'll be allowing an undefined deliveryGroup as valid input to useDeliveryGroup()

[rbarreca]

Opened #2370 with a related Shop Pay-specific issue.