OrderSearch container

The OrderSearch container enables order searches using email, last name, and order number. It is available to both guest and registered users for quick access to order details.

Configurations

The OrderSearch container provides the following configuration options:

Options	Type	Req?	Description
className	string	No	Allows custom CSS classes to be applied to the form for styling.
isAuth	boolean	No	Indicates whether the user is authenticated.
renderSignIn	function	No	A function responsible for rendering the sign-in form for the user.
routeGuestOrder	function	No	A function that returns the URL for the guest (unauthenticated user) order route.
onError	function	No	A function executed when an error occurs. It receives an errorInformation object containing details about the error.

Example

The following example demonstrates how to render the OrderSearch container:

const renderSignIn = async (element, email, orderNumber) => authRenderer.render(SignIn, {
  initialEmailValue: email,
  renderSignUpLink: false,
  labels: {
    formTitleText: email
      ? 'Enter your password to view order details'
      : 'Sign in to view order details',
    primaryButtonText: 'View order',
  },
  routeForgotPassword: () => 'reset-password.html',
  routeRedirectOnSignIn: () => `${CUSTOMER_ORDER_DETAILS_PATH}?orderRef=${orderNumber}`,
})(element);

export default async function decorate(block) {
  block.innerHTML = '';

  events.on('order/data', async (order) => {
    if (!order) return;

    block.innerHTML = '';

    await orderRenderer.render(OrderSearch, {
      isAuth: checkIsAuthenticated(),
      renderSignIn: async ({ render, formValues }) => {
        if (render) {
          renderSignIn(
            block,
            formValues?.email ?? '',
            formValues?.number ?? '',
          );

          return false;
        }
        return true;
      },
      routeCustomerOrder: () => CUSTOMER_ORDER_DETAILS_PATH,
      routeGuestOrder: () => ORDER_DETAILS_PATH,
      onError: async (errorInformation) => {
        console.info('errorInformation', errorInformation);
      },
    })(block);
  });

  await orderRenderer.render(OrderSearch, {
    isAuth: checkIsAuthenticated(),
    renderSignIn: async ({ render, formValues }) => {
      if (render) {
        renderSignIn(block, formValues?.email ?? '', formValues?.number ?? '');

        return false;
      }

      return true;
    },
    routeCustomerOrder: () => CUSTOMER_ORDER_DETAILS_PATH,
    routeGuestOrder: () => ORDER_DETAILS_PATH,
    onError: async (errorInformation) => {
      console.info('errorInformation', errorInformation);
    },
  })(block);
}