# 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.