open up useOrderContainer() useCustomerContainer()

[JuHwon]

Is your feature request related to a problem? Please describe

A shop of our customers requires to use "pre verified" addresses only for the checkout billing/shipping address. Our approach to solve this is to for the mfe-checkout repo and change the checkout to our requirements.

First off, i have to say that the experience to get everything up and running was quite nice and fast to achieve first results. Awesome work.

The problem we see with the current components lib, it's everything very very tightly coupled to the Input/UI elements. Whereas i sometimes just want to update something via code without UI inputs. We implemented our custom address picker, since we are using 3rd party pre verified addresses, so the addresses are not synced with commerce-layer.
To get this working with the component lib, the only way for us was to use the existing form elements, control their values, and put them into a hidden div. But then there is also the input element, which requires a blur event to update things.

// a ShippingAddressFormNew.tsx child component from the mfe-checkout repo
  ...
  const clAddress = mapToClAddress(address)
  return (
    <>
      <AddressesContainer shipToDifferentAddress={false}>
        <div className={""}>
          {/* we don't want this to be visible, but it is required due to the need of the blur event */
          <AddressSectionEmail
            emailAddress={clAddress?.email}
            setCustomerEmail={appCtx?.setCustomerEmail}
          />
          <div className={"hidden"}>
            <BillingAddressForm>
              <BillingAddressFormNew
                billingAddress={clAddress}
                openShippingAddress={() => {}}
              />
            </BillingAddressForm>
          </div>
        </div>
    ...

Describe the solution you'd like

Just expose some additional methods of the container hooks to update things without the UI compnents.

// customer
const customerCtx = useCustomerContainer()
customerCtx.setCustomerEmail(...) 


// order
const orderCtx = useOrderContainer()
orderCtx.updateOrder(...) // so we are able to set billing/shipping address

To open up the context a little bit would help a lot to achieve less coupled code when more flexibility is required.

Describe alternatives you've considered

We tried to patch the order with the required updates ourself with the commerce layer client. the update worked well, though the approach was not interoperable with the whole commercelayer compoennt lib, since we were unable to update the order within the OrderContainer without a full page reload. For this appraoch a simple oderCtx.reloadOrder() or oderCtx.updateOrder(..) would have been good enough.

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

For us we see 3 different solutions:

1. we can open up the commerce layer components useContainer methods and work together to achieve a more flexible way of using it
2. we fork this component lib and do our own thing from here
3. we just use the commerce layer client and do not use the component lib at all

It would be nice to know if you are open for option 1. We would be happy to provide some PR to achieve results.