@xola/ui-kit 1.4.2

package/src/components/DatePicker/DatePicker.js

@@ -0,0 +1,80 @@
+import React from "react";
+import { Fragment } from "react";
+import DayPicker, { DateUtils } from "react-day-picker";
+import DayPickerInput from "react-day-picker/DayPickerInput";
+import dateFnsFormat from "date-fns/format";
+import _ from "lodash";
+import classNames from "classnames";
+import "react-day-picker/lib/style.css";
+import "./DatePicker.scss"; // Not using CSS modules here since we need to override styles from react-day-picker.
+import styles from "./DatePicker.module.scss";
+
+export const formatDate = (date, format, locale) => {
+    return dateFnsFormat(date, format, { locale });
+};
+
+const DatePicker = ({
+    isDatePicker,
+    isMultiple = false,
+    value,
+    minDate,
+    maxDate,
+    placeholder,
+    onChange,
+    format = "MM-dd-yyyy",
+}) => {
+    const disableDays = {};
+    const dayPickerProps = {};
+    if (minDate) {
+        disableDays["before"] = minDate;
+    }
+    if (maxDate) {
+        disableDays["after"] = maxDate;
+    }
+    dayPickerProps["disabledDays"] = disableDays;
+
+    if (_.isArray(value)) {
+        isMultiple = true;
+    }
+
+    if (isDatePicker) {
+        dayPickerProps["selectedDays"] = value;
+    }
+
+    const handleChange = (v) => {
+        if (isMultiple) {
+            if (value) {
+                if (_.some(value, (item) => DateUtils.isSameDay(item, v))) {
+                    _.remove(value, (item) => DateUtils.isSameDay(item, v));
+                } else {
+                    value.push(v);
+                }
+            } else {
+                value = [v];
+            }
+            onChange(value);
+        } else {
+            onChange(v);
+        }
+    };
+
+    return (
+        <Fragment>
+            {isDatePicker ? (
+                <DayPickerInput
+                    component={(props) => <input className={classNames(styles.input, "form-control")} {...props} />}
+                    value={value}
+                    placeholder={placeholder}
+                    format={format}
+                    formatDate={formatDate}
+                    onDayChange={(v) => handleChange(v)}
+                    dayPickerProps={dayPickerProps}
+                />
+            ) : (
+                <DayPicker selectedDays={value} onDayClick={(v) => handleChange(v)} dayPickerProps={dayPickerProps} />
+            )}
+        </Fragment>
+    );
+};
+
+export default DatePicker;

package/src/components/DatePicker/DatePicker.module.scss

@@ -0,0 +1,3 @@
+.input {
+    width: 150px;
+}

package/src/components/DatePicker/DatePicker.scss

@@ -0,0 +1,18 @@
+@import "../../styles/variables.scss";
+
+.DayPicker-Day {
+    line-height: normal !important;
+}
+
+.DayPicker-Day--selected {
+    background-color: theme-color("primary") !important;
+}
+
+.DayPicker-Caption,
+.DayPicker-Day:not(.DayPicker-Day--disabled) {
+    color: $body-color;
+}
+
+.DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--disabled) {
+    color: theme-color("danger");
+}

package/src/components/DatePicker/index.js

@@ -0,0 +1,3 @@
+import DatePicker, { formatDate } from "./DatePicker";
+
+export { DatePicker, formatDate };

package/src/components/FormInput/FormInput.js

@@ -0,0 +1,23 @@
+import classNames from "classnames";
+import React, { cloneElement } from "react";
+import { FormGroup, Input, Label } from "reactstrap";
+
+const FormInput = ({ label, error, children, ...rest }) => {
+    return (
+        <FormGroup>
+            <Label htmlFor={rest.id} className={classNames({ "text-danger": error })}>
+                <span className={classNames({ "font-weight-bold": error })}>{label}</span> {error}
+            </Label>
+
+            {rest.type === "select" || !children ? (
+                <Input id={rest.id} invalid={!!error} {...rest}>
+                    {children}
+                </Input>
+            ) : (
+                cloneElement(children, rest)
+            )}
+        </FormGroup>
+    );
+};
+
+export default FormInput;

package/src/components/FormInput/index.js

@@ -0,0 +1,3 @@
+import FormInput from "./FormInput";
+
+export { FormInput };

package/src/components/MiniStepper/MiniStepper.js

@@ -0,0 +1,39 @@
+import classNames from "classnames";
+import PropTypes from "prop-types";
+import React from "react";
+import styles from "./MiniStepper.module.scss";
+
+export const MiniStepper = ({ count, value, size, ...rest }) => {
+    const dots = [];
+
+    for (let i = 0; i < count; i++) {
+        dots.push(
+            <span
+                style={{ fontSize: size }}
+                key={i}
+                className={classNames(styles.dot, { [styles.done]: i < value }, "mr-1")}
+            >
+                &bull;
+            </span>,
+        );
+    }
+
+    return <div {...rest}>{dots}</div>;
+};
+
+MiniStepper.propTypes = {
+    /**
+     * Total number of steps
+     */
+    count: PropTypes.number.isRequired,
+
+    /**
+     * Current step index
+     */
+    value: PropTypes.number.isRequired,
+
+    /**
+     * Size (font size) of each dot
+     */
+    size: PropTypes.number,
+};

package/src/components/MiniStepper/MiniStepper.module.scss

@@ -0,0 +1,9 @@
+@import "../../styles/variables.scss";
+
+.dot {
+    color: $gray-300;
+}
+
+.done {
+    color: $gray-900;
+}

package/src/components/MiniStepper/index.js

@@ -0,0 +1 @@
+export * from "./MiniStepper";

package/src/components/PhoneInput/PhoneInput.js

@@ -0,0 +1,44 @@
+import { AsYouType, getCountryCallingCode } from "libphonenumber-js";
+import PropTypes from "prop-types";
+import React, { useRef, useState } from "react";
+import { Input, InputGroup } from "reactstrap";
+import { CountrySelect } from "../CountrySelect";
+
+const getCountry = (value) => {
+    const asYouType = new AsYouType();
+    asYouType.input(value);
+    const phoneNumber = asYouType.getNumber();
+    return phoneNumber && phoneNumber.country ? phoneNumber.country : null;
+};
+
+export const PhoneInput = ({ value, onChange, error, defaultCountry = "", ...rest }) => {
+    const [country, setCountry] = useState(defaultCountry);
+    const inputRef = useRef();
+    const invalid = !!error;
+
+    const handleValueChange = (e) => {
+        onChange(e.target.value);
+        setCountry(getCountry(value) || country);
+    };
+
+    const handleCountryChange = (e) => {
+        const country = e.target.value;
+        setCountry(country);
+        const value = "+" + getCountryCallingCode(country);
+        onChange(value);
+        inputRef.current.focus();
+    };
+
+    return (
+        <InputGroup>
+            <CountrySelect invalid={invalid} style={{ maxWidth: 60 }} value={country} onChange={handleCountryChange} />
+            <Input invalid={invalid} {...rest} innerRef={inputRef} onChange={handleValueChange} value={value} />
+        </InputGroup>
+    );
+};
+
+PhoneInput.propTypes = {
+    onChange: PropTypes.func,
+    value: PropTypes.any,
+    defaultCountry: PropTypes.string,
+};

package/src/components/PhoneInput/index.js

@@ -0,0 +1 @@
+export * from "./PhoneInput";

package/src/components/ProductSelector/ProductListItem/ProductListItem.js

@@ -0,0 +1,41 @@
+import classNames from "classnames";
+import React from "react";
+import { Col, Row } from "reactstrap";
+import { CheckIcon } from "../../../";
+import styles from "./ProductListItem.module.scss";
+
+const ProductListItem = ({ product, isSelected, onProductSelect }) => {
+    return (
+        <Col
+            xs={12}
+            md={6}
+            className={classNames(styles.item, "cursor-pointer px-0 my-2")}
+            onClick={() => onProductSelect(product.id)}
+        >
+            <Row className={classNames({ [styles.selected]: isSelected }, styles.row, "mx-3 p-3")}>
+                <Col xs={3} md={2} className={classNames(styles.thumbnailContainer, "p-0")}>
+                    <div className={classNames(styles.thumbnail, "w-100 m-0")}>
+                        {product.photo?.src ? (
+                            <img className="mw-100" alt="experience" src={product.photo.src} />
+                        ) : null}
+                        {isSelected ? (
+                            <div
+                                className={classNames(
+                                    styles.selected,
+                                    "w-100 h-100 text-white d-flex text-center align-items-center justify-content-center",
+                                )}
+                            >
+                                <CheckIcon style={{ width: 28, height: 28 }} />
+                            </div>
+                        ) : null}
+                    </div>
+                </Col>
+                <Col xs={9} md={10}>
+                    <span className={styles.title}>{product.name}</span>
+                </Col>
+            </Row>
+        </Col>
+    );
+};
+
+export default ProductListItem;

package/src/components/ProductSelector/ProductListItem/ProductListItem.module.scss

@@ -0,0 +1,32 @@
+@import "../../../styles/variables.scss";
+
+.title {
+    font-size: 16px;
+}
+
+.item {
+    .row {
+        opacity: 0.6;
+    }
+    .selected {
+        opacity: 1;
+    }
+    &:hover {
+        .row {
+            background-color: $hover-background;
+            opacity: 1;
+        }
+    }
+}
+
+.thumbnailContainer {
+    min-height: 30px;
+    height: fit-content;
+}
+
+.thumbnail .selected {
+    position: absolute;
+    font-size: 24px;
+    background-color: rgba($color: theme-color("success"), $alpha: 0.7);
+    top: 0;
+}

package/src/components/ProductSelector/ProductSelector.js

@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import classNames from "classnames";
+import _ from "lodash";
+import { Container, Row, Col, Label, Input } from "reactstrap";
+import ProductListItem from "./ProductListItem/ProductListItem";
+
+const filterProductsBySearch = (searchQuery = "", products = []) => {
+    return products.filter((product) => {
+        return product.name.toLowerCase().includes(searchQuery.trim().toLowerCase());
+    });
+};
+
+const ProductSelector = ({ products = [], value = [], onChange }) => {
+    const [searchQuery, setSearchQuery] = useState("");
+    const filteredProducts = filterProductsBySearch(searchQuery, products);
+
+    const isProductSelected = (productId) => {
+        return value.some((selectedProduct) => selectedProduct.id === productId);
+    };
+
+    const onProductSelect = (productId) => {
+        if (isProductSelected(productId)) {
+            onChange(value.filter((v) => productId !== v.id));
+        } else {
+            onChange([...value, products.find((p) => p.id === productId)]);
+        }
+    };
+
+    const onSelectAll = (e) => {
+        onChange(e.target.checked ? products : []);
+    };
+
+    return (
+        <Container className={classNames("p-0")}>
+            <Row className={classNames("d-flex align-items-center bg-light mb-1 p-3")}>
+                <Col md={8}>
+                    <Label check>
+                        <Input
+                            type="checkbox"
+                            checked={products.length === value.length}
+                            onChange={(e) => onSelectAll(e)}
+                        />{" "}
+                        {value.length} Listing(s) selected updated
+                    </Label>
+                </Col>
+                <Col md={4}>
+                    <Input
+                        type="text"
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                        placeholder="Search"
+                        className="float-right"
+                    />
+                </Col>
+            </Row>
+            <Row>
+                {filteredProducts.map((product) => {
+                    return (
+                        <ProductListItem
+                            key={product.id}
+                            onProductSelect={onProductSelect}
+                            isSelected={isProductSelected(product.id)}
+                            product={product}
+                        />
+                    );
+                })}
+            </Row>
+        </Container>
+    );
+};
+
+export default ProductSelector;

package/src/components/ProductSelector/index.js

@@ -0,0 +1,3 @@
+import ProductSelector from "./ProductSelector";
+
+export { ProductSelector };

package/src/components/ScheduleEditor/ScheduleEditor.js

@@ -0,0 +1,277 @@
+import React, { Fragment } from "react";
+import { CustomInput, Input, InputGroup, InputGroupAddon, InputGroupText } from "reactstrap";
+import _ from "lodash";
+import classNames from "classnames";
+import ScheduleEditorRow from "./ScheduleEditorRow";
+import { DatePicker } from "../..";
+import WeekSelector from "./WeekSelector/WeekSelector";
+import TimeSlotSelector from "./TimeSlotSelector/TimeSlotSelector";
+import TimeRangeSelector from "./TimeRangeSelector/TimeRangeSelector";
+import { getScheduleSummary } from "./helpers/scheduleSummary";
+import { getScheduleDefaultValues } from "./helpers/schedule";
+
+const ScheduleEditor = ({ value = {}, errors = {}, price = 0, isNew = true, onChange }) => {
+    value = JSON.parse(JSON.stringify(value));
+    if (value.dates?.length > 0) {
+        value.dates = value.dates.map((date) => new Date(date));
+    }
+    if (value.start) {
+        value.start = new Date(value.start);
+    }
+    if (value.end) {
+        value.end = new Date(value.end);
+    }
+    const today = new Date();
+    const defaultScheduleEditorValues = getScheduleDefaultValues();
+    const schedule = _.extend(defaultScheduleEditorValues, value);
+
+    const handleChange = (value, key) => {
+        let updatedSchedule = { ...schedule };
+        updatedSchedule[key] = value;
+        onChange({ ...updatedSchedule, summary: getScheduleSummary(updatedSchedule) });
+    };
+
+    const handleAllowedPrivaciesChange = (privacy) => {
+        let updatedPrivacies = [...schedule.allowedPrivacies];
+        if (updatedPrivacies.includes(privacy)) {
+            updatedPrivacies = updatedPrivacies.filter((p) => p !== privacy);
+        } else {
+            updatedPrivacies.push(privacy);
+        }
+        handleChange(updatedPrivacies, "allowedPrivacies");
+    };
+
+    return (
+        <div>
+            <ScheduleEditorRow label="Name" htmlFor="scheduleName">
+                <Input
+                    value={schedule.name}
+                    onChange={(e) => handleChange(e.target.value, "name")}
+                    className="w-50"
+                    type="name"
+                    name="scheduleName"
+                    id="scheduleName"
+                    placeholder="Daily"
+                />
+            </ScheduleEditorRow>
+            <ScheduleEditorRow
+                label="Allowed Privacies"
+                htmlFor="allowedPrivacies"
+                error={errors && errors.allowedPrivacies}
+            >
+                <div>
+                    <CustomInput
+                        inline
+                        type="checkbox"
+                        name="allowedPrivacies"
+                        id="privacy-public"
+                        label="Public"
+                        value="public"
+                        checked={schedule.allowedPrivacies.includes("public")}
+                        onChange={(e) => handleAllowedPrivaciesChange("public")}
+                    />
+                    <CustomInput
+                        inline
+                        type="checkbox"
+                        name="allowedPrivacies"
+                        id="privacy-private"
+                        label="Private"
+                        value="private"
+                        checked={schedule.allowedPrivacies.includes("private")}
+                        onChange={(e) => handleAllowedPrivaciesChange("private")}
+                    />
+                </div>
+            </ScheduleEditorRow>
+            <ScheduleEditorRow label="Availability">
+                {isNew ? (
+                    <div>
+                        <CustomInput
+                            inline
+                            type="radio"
+                            name="type"
+                            id="type-available"
+                            label="Open"
+                            value="available"
+                            checked={schedule.type === "available"}
+                            onChange={(e) => handleChange(e.target.value, "type")}
+                        />
+                        <CustomInput
+                            inline
+                            type="radio"
+                            name="type"
+                            id="type-unavailable"
+                            label="Blackout"
+                            value="unavailable"
+                            checked={schedule.type === "unavailable"}
+                            onChange={(e) => handleChange(e.target.value, "type")}
+                        />
+                    </div>
+                ) : (
+                    <div className="pl-1">{schedule.type === "available" ? "Open" : "Blackout"}</div>
+                )}
+            </ScheduleEditorRow>
+            <ScheduleEditorRow label="Repeats">
+                {isNew ? (
+                    <div>
+                        <CustomInput
+                            inline
+                            type="radio"
+                            name="repeat"
+                            id="repeat-weekly"
+                            label="Weekly"
+                            value="weekly"
+                            checked={schedule.repeat === "weekly"}
+                            onChange={(e) => handleChange(e.target.value, "repeat")}
+                        />
+                        <CustomInput
+                            inline
+                            type="radio"
+                            name="repeat"
+                            id="repeat-custom"
+                            label="Custom"
+                            value="custom"
+                            checked={schedule.repeat === "custom"}
+                            onChange={(e) => handleChange(e.target.value, "repeat")}
+                        />
+                    </div>
+                ) : (
+                    <div className="pl-1">{schedule.repeat === "weekly" ? "Weekly" : "Custom"}</div>
+                )}
+            </ScheduleEditorRow>
+            {schedule.repeat === "weekly" && (
+                <ScheduleEditorRow error={errors && errors.days} label="Repeat on">
+                    <WeekSelector name="days" value={schedule.days} onChange={handleChange} />
+                </ScheduleEditorRow>
+            )}
+            {schedule.repeat === "custom" && (
+                <ScheduleEditorRow error={errors && errors.dates} label="Select dates">
+                    <DatePicker
+                        isDatePicker={false}
+                        isMultiple={true}
+                        onChange={(dates) => handleChange(dates, "dates")}
+                        value={schedule.dates}
+                        datePickerType="calendar"
+                        format="YYYY-MM-DD"
+                    />
+                </ScheduleEditorRow>
+            )}
+            {schedule.type === "available" && (
+                <Fragment>
+                    <ScheduleEditorRow label="Time Slots">
+                        {isNew ? (
+                            <div>
+                                <CustomInput
+                                    inline
+                                    type="radio"
+                                    name="departure"
+                                    id="departure-fixed"
+                                    label="Fixed Times"
+                                    value="fixed"
+                                    checked={schedule.departure === "fixed"}
+                                    onChange={(e) => handleChange(e.target.value, "departure")}
+                                />
+                                <CustomInput
+                                    inline
+                                    type="radio"
+                                    name="departure"
+                                    id="departure-varies"
+                                    label="No Fixed Times"
+                                    value="varies"
+                                    checked={schedule.departure === "varies"}
+                                    onChange={(e) => handleChange(e.target.value, "departure")}
+                                />
+                            </div>
+                        ) : (
+                            <div className="pl-1">{schedule.departure === "fixed" ? "Fixed Times" : "No Varies"} </div>
+                        )}
+                    </ScheduleEditorRow>
+                    {schedule.departure === "fixed" && (
+                        <ScheduleEditorRow error={errors && errors.times} label="">
+                            <TimeSlotSelector
+                                name="times"
+                                value={schedule.times}
+                                onChange={(v) => handleChange(v, "times")}
+                            />
+                        </ScheduleEditorRow>
+                    )}
+                </Fragment>
+            )}
+            {schedule.type === "unavailable" && (
+                <ScheduleEditorRow label="Time ranges">
+                    <TimeRangeSelector
+                        error={errors && errors.timeRanges}
+                        name="timeRanges"
+                        value={schedule.timeRanges}
+                        onChange={(v) => handleChange(v, "timeRanges")}
+                    />
+                </ScheduleEditorRow>
+            )}
+            {schedule.repeat === "weekly" && (
+                <ScheduleEditorRow label="Valid from">
+                    <div>
+                        <DatePicker
+                            isDatePicker={true}
+                            onChange={(v) => handleChange(v, "start")}
+                            minDate={today}
+                            maxDate={new Date(schedule.end)}
+                            value={schedule.start ? new Date(schedule.start) : null}
+                            format="dd MMM, yyyy"
+                            placeholder="Now"
+                            clearButtonText="Now"
+                        />
+                        <span className="mx-2"> until </span>
+                        <DatePicker
+                            isDatePicker={true}
+                            onChange={(v) => handleChange(v, "end")}
+                            minDate={new Date(schedule.start)}
+                            value={schedule.end ? new Date(schedule.end) : null}
+                            format="dd MMM, yyyy"
+                            placeholder="Forever"
+                            clearButtonText="Forever"
+                        />
+                    </div>
+                </ScheduleEditorRow>
+            )}
+            {schedule.type === "available" && (
+                <ScheduleEditorRow label="Price" error={errors && errors.priceDelta}>
+                    <div className="w-75 form-check-inline">
+                        <Input
+                            className="w-50"
+                            type="select"
+                            value={schedule.priceDeltaType}
+                            onChange={(e) => handleChange(e.target.value, "priceDeltaType")}
+                            name="priceDeltaType"
+                        >
+                            <option value="">No change</option>
+                            <option value="increase">Increase by</option>
+                            <option value="decrease">Decrease by</option>
+                        </Input>{" "}
+                        &nbsp;
+                        <InputGroup
+                            className={classNames("w-50", {
+                                invisible: schedule.priceDeltaType === "",
+                            })}
+                        >
+                            <InputGroupAddon addonType="prepend">
+                                <InputGroupText className="bg-white">$</InputGroupText>
+                            </InputGroupAddon>
+                            <Input
+                                className="border-left-0"
+                                type="text"
+                                name="pricedelta"
+                                value={schedule.priceDelta}
+                                onChange={(e) => handleChange(e.target.value, "priceDelta")}
+                                name="priceDelta"
+                            />
+                        </InputGroup>
+                    </div>
+                </ScheduleEditorRow>
+            )}
+            <ScheduleEditorRow label="Summary">
+                <span>{getScheduleSummary(schedule, price)}</span>
+            </ScheduleEditorRow>
+        </div>
+    );
+};
+
+export default ScheduleEditor;