Discussion

Suggest a Collection Point in the Payment step if Home Delivery was selected

• FE: Does the "Suggestion" only appear if customer is "recurring"?
• FE: What happens if no collection point is avalable in Shipping Option?
• FE: Which attribute is choosen? Does it come out of Shipping Policies?

@Mike: Nope, it appears for all the customers however the "nature of the feature" targets more the returning users, since first timers who have already spent time filling out their shipping data as home delivery for a specific order are probably less likely to use it.

People "returning" on the other hand, landing straight at the payment step, might be more prone to put a bit more additional effort with changing the "preselected" delivery method, especially if additionally convinced with an "environmental friendly badge"

• FE: What happens if no collection point is avalable in Shipping Option?

@Mike: We simply hide the entire "bottom part of the component", so the suggestion of collection points, rendering only delivery address summary and "changer" button part. That's why I wrote in bulletpoints that component is rendered when a Collection Point is available as a delivery option (even just one) - it's one of the necessary prerequisites.

In code terms it looks like this:

typescriptreact

Copy

 const areCollectionPointsAvailable =
    !!orderOptions?.shipping && getAvailableDeliveryTypes(orderOptions.shipping).includes('collectionPoint');
  const canSuggestCP = !isCollectionPoint && areCollectionPointsAvailable;

So we check if collectionPoints are available for this order by looking through checkoutState.orderOptions.shipping. Then we check if the user selected already Collection Points. If he didn't and collectionPoints are available - suggestion will show up

FE: Which attribute is choosen? Does it come out of Shipping Policies?

@Mike: On click, user is redirected to the "collection point" view on the shipping step. So he gets to interact with a map. After selecting specific collection point - the logics that I described in Frontend Technical Documetation is executed - we execute a setCollectionPoint mutation passing all the underlying data

typescriptreact

Copy

collectionPoint: {
      id: '',
      type: {
        carrierGroupKey: '',
        carrierKey: '',
        shippingOptionKey: '',
        collectionPointType: '',
        deliveryOptionKey: ''
      },
      additionalFields: getInitialDynamicFieldValues(checkoutState, 'collectionPoint')
    }

as a PUT under following endpoint:

typescript

Copy

/state/order/delivery/option

so shippingPolicies (shippingOptionKey) is one of the passed properties, but just one of many.

Feature

Another valuable feature for promoting Collection Points is the Suggest Collection Point option. During the Payment step of the Checkout flow, a Collection Point can be suggested if the customer selects Home Delivery.

This feature applies to all customers, whether they are new or returning to the checkout flow, but it is particularly beneficial for those with a pre-selected carrier and address, allowing them to skip directly to the Payment step.

The Suggest Collection Point component is rendered on the Payment step if

• the customer has not selected "Collection Point" as Delivery Option
• a Collection Point is available as a Delivery Option.

If the customer chooses to switch the delivery option from Home Delivery to Collection Points, the system will automatically update the order and set a Collection Point as the preferred delivery option.

Configuration steps

To enable the Collection Point component within the Shipping step of Checkout, enable the toggle under Suggest Collection Point.

Preview

Suggest Collection Point on Shipping step

Copy