# Headless React

This package is a set of fully customizable React components that can be used to build a headless UI for a Firmhouse Storefront. For now, it only supports building a custom checkout page, but we are planning to add more components in the future.

### Installation <a href="#installation-1" id="installation-1"></a>

To install the package, you can run the following command:

```bash
npm install @firmhouse/firmhouse-sdk @firmhouse/headless-react
```

### Usage <a href="#usage-1" id="usage-1"></a>

To use the components, you need to wrap them in a `FirmhouseCartProvider` component and pass the `apiToken` prop. You should provide a storefront access token that you can get from the Firmhouse Portal.

```jsx

import { 
  CheckoutForm, 
  FirmhouseCartProvider, 
  OrderedProductsList, 
  OrderSummary,
  defaultCheckoutFields,
} from '@firmhouse/headless-react';

const fields = [
  ...defaultCheckoutFields.slice(0, 3),
  {
    fields: [
      {
        name: "termsAccepted",
        label: <Translated value="checkout.fields.termsAccepted.label" />,
        inputProps: {
          className: styles.checkbox,
        },
      },
    ],
  },
  ...defaultCheckoutFields.slice(3),
];

export default function CheckoutPage({apiToken, cartToken, locale}) {
  return (
    <FirmhouseCartProvider 
      apiToken={apiToken} 
      cartToken={cartToken} 
      locale={locale ?? 'en'}
      fallback={<div>Loading...</div>}
      availableCountries={["BE", "NL"]}
      translations={{
        en: {
          checkout: {
            title: "Checkout",
            fields: {
              termsAccepted: {
                label: "I accept the terms and conditions",
              },
              
            },
          },
        },
        nl: {
          checkout: {
            title: "Afrekenen",
            fields: {
              termsAccepted: {
                label: "Ik accepteer de algemene voorwaarden",
              },
              email: {
                label: "Emailadres",
                placeholder: "Emailadres",
              },
            },
          },
        }
      }}
    >
      <h1><Translated value="checkout.title" /></h1>
      <div>
        <CheckoutForm fields={fields} inputClassName="input" />
      </div>
      <div>
        <OrderedProductsList onlyOneTimeProducts />
        <br />
        <OrderedProductsList onlyRecurringProducts />
        <OrderSummary />
      </div>
    </FirmhouseCartProvider>;
  );
}
```

### Components <a href="#components" id="components"></a>

* [`FirmhouseCartProvider`](https://developer.firmhouse.com/sdks/headless-react/components/firmhousecartprovider): A provider component that wraps the other components and provides them with the necessary data and functionality.
* [`CheckoutForm`](https://developer.firmhouse.com/sdks/headless-react/components/checkoutform): A form component that allows users to fill in their details and place an order. This is the main component that you need to use to build a custom checkout page.
* [`OrderedProductsList`](https://developer.firmhouse.com/sdks/headless-react/components/orderedproductlist): A list component that displays the products that the user has ordered. You can use this component to show the products that the user has added to their cart.
* [`OrderSummary`](https://developer.firmhouse.com/sdks/headless-react/components/ordersummary): A summary component that displays the total price of the order. You can use this component to show the total price of the order.
* [`Translated`](https://developer.firmhouse.com/sdks/headless-react/components/translated): A component that allows you to translate text in your components. You can use this component to provide translations for your components.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.firmhouse.com/sdks/headless-react.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.