UI Extensions - Multiple targets using unsupported API's

UI Extensions - Multiple targets using unsupported API's

Cedric834
Shopify Partner
1 0 1

Hi,

 

I've created a UI extensions that contains three different targets as it should be available on all these locations:

target = "purchase.checkout.shipping-option-item.details.render"
target = "purchase.thank-you.block.render"
target = "customer-account.order-status.block.render"
 
I've been struggling making this work for multiple targets as some targets don't support certain API's that are supported in other targets.  For example I have this custom useDeliveryCarrier hook

 

 

 

 

import { useDeliveryGroups, useShippingOptionTarget } from '@shopify/ui-extensions-react/checkout';

import useExtensionTarget from './useExtensionTarget.jsx';

export default function useDeliveryCarrier() {
  const { isCheckoutPage } = useExtensionTarget();

  const deliveryGroups = useDeliveryGroups();
  const { deliveryOptions } = deliveryGroups[0];

  // If on checkout page, use the useShippingOptionTarget API
  if (isCheckoutPage) {
    const { shippingOptionTarget, isTargetSelected } = useShippingOptionTarget();

    return {
      selectedDeliveryMethod: isTargetSelected ? shippingOptionTarget : null,
    };
  }

  // If on thank you page, use the first delivery option
  // as the useShippingOptionTarget API isn't available there
  return {
    selectedDeliveryMethod: deliveryOptions[0],
  };
}​

 

 

 


That is conditionally rendering some API's (which I know is against the rules of hooks), this works but is obviously not the best way to go about this. 

What would the best way of working around this be? I really don't want to create multiple Checkout.jsx (extension) or hooks for each target.

Thanks for your advice!

 

Replies 0 (0)