Preorder Date Selector

This component creates a preorder date selector module if the product was set up that the user must choose a preorder date.

It has to be wrapped inside the AddToCartFormik form component on the product page.

Don't forget to also update your product page GraphQL fragment to include

preOrder {
    fromDate
    toDate
}

Props

product: Product The component using the product object to identify if the product is pre-order enabled and to determine the pre-order dates.

dates?: { value: string; name: string }[] You may want to display different dates than what is determined by default. For example displaying entire weeks, rather than every single day. The value has to be a stringified date.

SelectorComponent?: React.FunctionComponent<PreOrderDropdownType> If you want to use a different selector than a dropdown, you can provide your own component. It will receive values, selectedDate, and selectDate props.

intlDateTimeFormat? If you want the dates to be formatted differently, you can provide your own Intl.DateTimeFormat formatter. By default it uses Intl.DateTimeFormat('sv-SE'). You can read more here about how to format dates.

Example

import { PreOrderDateSelector } from '@jetshop/ui/PreOrderDateSelector';

<PreOrderDateSelector product={product} />

Flexible formatting

The PreOrderDateSelector puts the label first, then the selector component, and at the end it puts the errors if there is any. You may want organize these elements differently. If you provide children for PreOrderDateSelector, you will get all the necessary props (values, selectedDate, selectDate, error).

import { PreOrderDateSelector } from '@jetshop/ui/PreOrderDateSelector';

<PreOrderDateSelector product={product}>
    {({ values, selectedDate, selectDate, error }) => (
        ...
    )}
</PreOrderDateSelector>

SelectorComponent

When you create your own selector component you may want to use PreOrderInput exported from PreOrderDateSelector. This component predefined all the function that is needed to make it work with Formik.

PreOrderInput Props

value: string You have to send the value when you are iterating through the values received from PreOrderDateSelector or from SelectorComponent

selectDate: function You also have to send the selectDate function you received from PreOrderDateSelector or SelectorComponent

callback?: function You can send a callback function to be triggered after the user selected an option.

className?: string If you want to add or override styling, you can send a class name or a Linaria CSS component.

import { PreOrderDateSelector, PreOrderInput } from '@jetshop/ui/PreOrderDateSelector';
import { css } from 'linaria';

<PreOrderDateSelector product={product}>
    {({ values, selectedDate, selectDate, error }) => (
        <ul>
            {values.map(value => (
                <li>
                    <PreOrderInput
                        value={value}
                        selectDate={selectDate}
                        className={css`
                            background: red;
                        `}
                    />
                </li>
            ))}
        </ul>
    )}
</PreOrderDateSelector>