How to use Order Shipping Component?

[srhblacksip]

What are you trying to accomplish? Please describe.
I have created a component to select shipping method, I need to send the selection to checkout

What have you tried so far?
I have tried to use this component without success, I don't understand how to use it, the documentation is not enough

Additional info

Attached image, I am using the test info

| Account | Workspace | | coolboxpe | sebastest |

[klzns]

You should wrap your component in the context providers and then call the function provided by the hook.

Example:

import { OrderFormProvider } from 'vtex.order-manager/OrderForm'
import { OrderQueueProvider } from 'vtex.order-manager/OrderQueue'
import {
  OrderShippingProvider,
  useOrderShipping,
} from 'vtex.order-shipping/OrderShipping'

const MainComponent: FunctionComponent = () => (
  <OrderQueueProvider>
    <OrderFormProvider>
      <OrderShippingProvider>
        <MyComponent />
      </OrderShippingProvider>
    </OrderFormProvider>
  </OrderQueueProvider>
)

const MyComponent: FunctionComponent = () => {
  const { selectDeliveryOption } = useOrderShipping()

  const handleClick = () => {
    const deliveryOptionName = 'PAC'
    selectDeliveryOption(deliveryOptionName)
  }

  return <button onClick={handleClick}>Change delivery option</button>
}

There is no such function addShipping. You can see the functions provided by the app here:

https://github.com/vtex-apps/order-shipping/blob/master/react/OrderShipping.tsx#L39-L48

And here: https://github.com/vtex-apps/order-shipping#api

[srhblacksip]

Hello

Thanks for the reply, it was a great help. I have a question what value the deliveryOptionName should have, I have not been able to configure it.

Does that value have to do with DeliveryChannels?

I need to configure the value of the DeliveryChannel

Which app should I use?