@xola/ui-kit 1.4.2

package/src/components/ScheduleEditor/ScheduleEditorRow.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { Col, FormFeedback, FormGroup, Input, Label } from "reactstrap";
+import classNames from "classnames";
+
+const ScheduleEditorRow = ({ label, error, htmlFor, children }) => {
+    return (
+        <FormGroup row>
+            <Col className={classNames("d-flex py-1 align-items-center")} sm={2}>
+                <Label className="font-14 m-0" for={htmlFor}>
+                    {label}
+                </Label>
+            </Col>
+            <Col className={classNames("font-14 d-flex py-1 align-items-center")} sm={10}>
+                {children}
+            </Col>
+            {error && (
+                <Col sm={{ size: 12, offset: 2 }}>
+                    <Input className="d-none" invalid />
+                    <FormFeedback valid={false}> {error}</FormFeedback>
+                </Col>
+            )}
+        </FormGroup>
+    );
+};
+
+export default ScheduleEditorRow;

package/src/components/ScheduleEditor/TimeRangeSelector/TimeRangeSelector.js

@@ -0,0 +1,94 @@
+import classNames from "classnames";
+import React, { Fragment } from "react";
+import { TimePicker, TrashIcon } from "../../../";
+import styles from "./TimeRangeSelector.module.scss";
+
+const TimeRangeSelector = ({ value = [{}], name, onChange, error }) => {
+    const handleAddNewRow = () => {
+        onChange([...value, { startTime: null, endTime: null }], name);
+    };
+
+    const handleDeleteRow = (event, index) => {
+        let timeRanges = [...value];
+        timeRanges.splice(index, 1);
+        onChange(timeRanges, name);
+        event.preventDefault();
+    };
+
+    const handleChange = (v, index, key) => {
+        let timeRanges = [...value];
+        timeRanges[index][key] = v;
+        onChange(timeRanges, name);
+    };
+
+    return (
+        <Fragment>
+            <div>
+                <div className="d-block">
+                    {value.map((timeRange, index) => (
+                        <div key={index} className={classNames("mb-2", styles.row)}>
+                            <div className={classNames("d-inline-block")}>
+                                <div className="d-flex align-items-center">
+                                    <span className="mr-2">Start Time</span>
+                                    <span className="mr-4">
+                                        <TimePicker
+                                            value={timeRange.startTime}
+                                            onChange={(v) => handleChange(v, index, "startTime")}
+                                        />
+                                    </span>
+                                </div>
+                                {error && error[index] && (
+                                    <Fragment>
+                                        <div className="invalid-feedback d-block">
+                                            {error[index].startTime ? (
+                                                <span>{error[index].startTime}</span>
+                                            ) : (
+                                                <span>&nbsp;</span>
+                                            )}
+                                        </div>
+                                    </Fragment>
+                                )}
+                            </div>
+                            <div className={classNames("d-inline-block")}>
+                                <div className="d-flex align-items-center">
+                                    <span className="mr-2">End Time</span>
+                                    <span className="mr-4">
+                                        <TimePicker
+                                            value={timeRange.endTime}
+                                            onChange={(v) => handleChange(v, index, "endTime")}
+                                        />
+                                    </span>
+                                    <span
+                                        onClick={(e) => handleDeleteRow(e, index)}
+                                        className={classNames(
+                                            styles.delete,
+                                            "cursor-pointer ml-2 text-center p-1 rounded-circle bg-danger text-white",
+                                        )}
+                                    >
+                                        <TrashIcon />
+                                    </span>
+                                </div>
+                                {error && error[index] && (
+                                    <Fragment>
+                                        <div className="invalid-feedback d-block">
+                                            {error[index].endTime ? (
+                                                <span>{error[index].endTime}</span>
+                                            ) : (
+                                                <span>&nbsp;</span>
+                                            )}
+                                        </div>
+                                    </Fragment>
+                                )}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+                <a onClick={handleAddNewRow} className={classNames("cursor-pointer d-block")}>
+                    + add time range
+                </a>
+            </div>
+        </Fragment>
+    );
+};
+
+export default TimeRangeSelector;

package/src/components/ScheduleEditor/TimeRangeSelector/TimeRangeSelector.module.scss

@@ -0,0 +1,13 @@
+.row {
+    align-items: center;
+    .delete {
+        width: 28px;
+        height: 28px;
+        display: none;
+    }
+    &:hover {
+        .delete {
+            display: block;
+        }
+    }
+}

package/src/components/ScheduleEditor/TimeSlotSelector/TimeSlotSelector.js

@@ -0,0 +1,62 @@
+import React from "react";
+import _ from "lodash";
+import classNames from "classnames";
+import { TimePicker } from "../../../";
+import styles from "./TimeSlotSelector.module.scss";
+
+const TimeSlotSelector = ({ name, value, onChange }) => {
+    const initialDisplayCount = 4;
+    let selectedValues;
+
+    const handleAddEmptySlot = () => {
+        let undefinedCount = [...value].filter((v) => _.isNull(v)).length;
+        if (undefinedCount === 0) {
+            selectedValues.push(null);
+        }
+    };
+
+    const handleChange = (value, index) => {
+        let currentValues = [...selectedValues];
+        currentValues[index] = value;
+        onChange(currentValues, name);
+        handleAddEmptySlot();
+    };
+
+    const handleDeleteTimeSlot = (index) => {
+        let currentValues = [...selectedValues].filter((v, i) => i !== index);
+        onChange(currentValues, name);
+    };
+
+    if (value && _.isArray(value) && value.length > 0) {
+        selectedValues = value;
+        handleAddEmptySlot();
+    } else {
+        selectedValues = new Array(initialDisplayCount).fill(null);
+    }
+
+    return (
+        <div>
+            {selectedValues.map((selectedValue, index) => (
+                <div
+                    className={classNames(styles.slot, "position-relative d-inline-block mr-2")}
+                    key={index}
+                    id={`timeslot-${index}`}
+                >
+                    <span
+                        onClick={() => handleDeleteTimeSlot(index)}
+                        className={classNames(
+                            styles.clearButton,
+                            "position-absolute cursor-pointer text-white rounded-circle bg-secondary text-center",
+                        )}
+                    >
+                        &times;
+                    </span>
+
+                    <TimePicker value={selectedValue} onChange={(v) => handleChange(v, index)} />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default TimeSlotSelector;

package/src/components/ScheduleEditor/TimeSlotSelector/TimeSlotSelector.module.scss

@@ -0,0 +1,21 @@
+@import "../../../styles/variables.scss";
+
+.slot {
+    .clearButton {
+        $size: 15px;
+        display: none;
+        top: -$size / 2;
+        right: -$size / 2;
+        width: $size;
+        height: $size;
+        font-size: $size;
+        line-height: $size;
+        z-index: 10;
+    }
+
+    &:hover {
+        .clearButton {
+            display: block;
+        }
+    }
+}

package/src/components/ScheduleEditor/WeekSelector/WeekSelector.js

@@ -0,0 +1,50 @@
+import React from "react";
+import { CustomInput } from "reactstrap";
+
+const WeekSelector = ({ value, name, onChange }) => {
+    const weekConfig = [
+        { label: "S", value: 0 },
+        { label: "M", value: 1 },
+        { label: "T", value: 2 },
+        { label: "W", value: 3 },
+        { label: "T", value: 4 },
+        { label: "F", value: 5 },
+        { label: "S", value: 6 },
+    ];
+
+    let values = value ? value : [];
+
+    const handleChange = (value) => {
+        let selectedValues = [...values];
+        let index = selectedValues.indexOf(value);
+        if (index >= 0) {
+            selectedValues.splice(index, 1);
+        } else {
+            selectedValues.push(value);
+        }
+        selectedValues.sort((a, b) => a - b);
+        onChange(selectedValues, name);
+    };
+
+    return (
+        <div className="d-inline-block float-left w-100 position-relative">
+            {weekConfig.map((week, index) => {
+                return (
+                    <CustomInput
+                        inline
+                        type="checkbox"
+                        name={name}
+                        key={index}
+                        id={`day-${index}`}
+                        label={week.label}
+                        value={week.value}
+                        checked={values.indexOf(week.value) >= 0}
+                        onChange={(e) => handleChange(week.value)}
+                    />
+                );
+            })}
+        </div>
+    );
+};
+
+export default WeekSelector;

package/src/components/ScheduleEditor/helpers/schedule.js

@@ -0,0 +1,15 @@
+export const getScheduleDefaultValues = () => {
+    return {
+        name: "",
+        type: "available",
+        repeat: "weekly",
+        days: [0, 1, 2, 3, 4, 5, 6],
+        dates: [],
+        departure: "fixed",
+        priceDelta: "",
+        priceDeltaType: "",
+        times: [],
+        timeRanges: [],
+        allowedPrivacies: ["public", "private"],
+    };
+};

package/src/components/ScheduleEditor/helpers/scheduleSummary.js

@@ -0,0 +1,128 @@
+import _ from "lodash";
+import { formatDate } from "../../../";
+
+function getDateRangeDescription(schedule) {
+    let dateRangeDescription = "";
+    if (!schedule.start && !schedule.end) {
+        return dateRangeDescription;
+    }
+    if (schedule.start) {
+        dateRangeDescription += ` Starting on ${formatDate(new Date(schedule.start), "MM/dd/yyyy")}`;
+    }
+    if (schedule.end) {
+        dateRangeDescription += ` untill ${formatDate(new Date(schedule.end), "MM/dd/yyyy")}`;
+    }
+    return dateRangeDescription;
+}
+
+function getWeeklyDescription(selectedWeekNumbers) {
+    let weekDescription = "";
+    let weekNameArr = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+    selectedWeekNumbers.forEach((weekNumber, index) => {
+        weekDescription += weekNameArr[weekNumber];
+        if (index < selectedWeekNumbers.length - 1) {
+            weekDescription += ", ";
+        }
+    });
+    return weekDescription;
+}
+
+function getCustomDateDescription(selectedDates) {
+    let displayDates = selectedDates.slice(0, 4);
+    let customDateDescription = "";
+    displayDates.forEach((displayDate, index) => {
+        customDateDescription += new Date(displayDate).toLocaleDateString("en-US");
+        if (index < displayDates.length - 1) {
+            customDateDescription += ", ";
+        }
+    });
+    customDateDescription += selectedDates.length - 4 > 0 ? ` and ${selectedDates.length - 4} more dates` : "";
+    return customDateDescription;
+}
+
+function getPriceDescription(schedule, basePrice) {
+    if (schedule.type === "unavailable" || !basePrice) {
+        return "";
+    }
+    const { priceDelta, priceDeltaType } = schedule;
+    if (priceDeltaType === "increase") {
+        basePrice += parseFloat(priceDelta);
+    } else if (priceDeltaType === "decrease") {
+        basePrice -= parseFloat(priceDelta);
+    }
+    return ` for $ ${basePrice}`;
+}
+
+function formatNumberToTime(time) {
+    const minute = time % 100;
+    let meridian = "AM";
+    let hour = parseInt(time / 100);
+    if (hour === 0) {
+        hour = 12;
+    } else if (hour === 12) {
+        meridian = "PM";
+    } else if (hour > 12) {
+        hour -= 12;
+        meridian = "PM";
+    }
+    return `${hour}:${minute < 10 ? "0" + minute : minute} ${meridian}`;
+}
+
+function getTimesDescription(schedule) {
+    let times = _.sortBy(_.filter(schedule.times, (time) => time !== null));
+    if (schedule.type === "unavailable" || schedule.departure !== "fixed" || !times || times.length === 0) {
+        return "";
+    }
+    let timesDescription = " at ";
+    let timesArray = _.map(times, (time) => formatNumberToTime(time));
+    return timesDescription + timesArray.join(", ");
+}
+
+function getTimeRangeDescription(schedule) {
+    if (schedule.type === "available" || !schedule.timeRanges || schedule.timeRanges.length === 0) {
+        return "";
+    }
+    let timeRangeArray = [];
+    schedule.timeRanges.forEach((timeRange, index) => {
+        if (timeRange.startTime && timeRange.endTime) {
+            timeRangeArray.push(
+                `${index === 0 ? "between" : ""} ${formatNumberToTime(timeRange.startTime)} - ${formatNumberToTime(
+                    timeRange.endTime,
+                )}`,
+            );
+        } else if (timeRange.startTime) {
+            timeRangeArray.push(` after ${formatNumberToTime(timeRange.startTime)}`);
+        } else if (timeRange.endTime) {
+            timeRangeArray.push(` before ${formatNumberToTime(timeRange.endTime)}`);
+        }
+    });
+    return ` for trips ${timeRangeArray.join(", ")}`;
+}
+
+function getPrefixDescription(schedule) {
+    let prefixDescription = "";
+    let availableDescription = "";
+    if (schedule.repeat === "weekly") {
+        prefixDescription = schedule.days.length === 7 ? `Daily` : `Every ${getWeeklyDescription(schedule.days)}`;
+        availableDescription = schedule.type === "available" ? "" : "Blackout ";
+    } else {
+        if (schedule.dates.length === 0) {
+            prefixDescription = "Custom dates (no dates selected)";
+            availableDescription = schedule.type === "available" ? "" : "Blackout ";
+        } else {
+            prefixDescription = ` ${getCustomDateDescription(schedule.dates)}`;
+            availableDescription = schedule.type === "available" ? "Occurs on" : "Blackout for trips departing on";
+        }
+    }
+    return availableDescription + prefixDescription;
+}
+
+export function getScheduleSummary(schedule, price = 0) {
+    return (
+        getPrefixDescription(schedule) +
+        getTimesDescription(schedule) +
+        getPriceDescription(schedule, price) +
+        getDateRangeDescription(schedule) +
+        getTimeRangeDescription(schedule)
+    );
+}

package/src/components/ScheduleEditor/index.js

@@ -0,0 +1,4 @@
+import ScheduleEditor from "./ScheduleEditor";
+import { getScheduleSummary } from "./helpers/scheduleSummary";
+
+export { ScheduleEditor, getScheduleSummary };

package/src/components/Stepper/Step.js

@@ -0,0 +1,31 @@
+import classNames from "classnames";
+import React, { Fragment } from "react";
+import styles from "./Step.module.scss";
+import PropTypes from "prop-types";
+
+const Step = ({ children, last, label, current, done, size }) => {
+    return (
+        <Fragment>
+            <div
+                style={{ width: size, height: size, maxWidth: size, maxHeight: size }}
+                className={classNames(
+                    styles.circle,
+                    "d-flex align-items-center justify-content-center rounded-circle border mr-2",
+                    { "border-primary bg-primary text-white": current, "border-success bg-success text-white": done },
+                )}
+            >
+                {children}
+            </div>
+
+            <div className={classNames(styles.label, { [styles.current]: current, "text-dark": current })}>{label}</div>
+            {last ? null : <div className={classNames(styles.line, "mx-4", { "bg-primary": done })} />}
+        </Fragment>
+    );
+};
+
+Step.propTypes = {
+    done: PropTypes.bool,
+    last: PropTypes.bool,
+};
+
+export default Step;

package/src/components/Stepper/Step.module.scss

@@ -0,0 +1,25 @@
+@import "../../styles/variables.scss";
+
+.circle {
+    font-size: 12px;
+    font-weight: bold;
+    flex-shrink: 0;
+}
+
+.label {
+    text-transform: uppercase;
+    font-size: 11px;
+    font-weight: bold;
+}
+
+@include media-breakpoint-down(xs) {
+    .label:not(.current) {
+        display: none;
+    }
+}
+
+.line {
+    background-color: $gray-300;
+    height: 1px;
+    flex: 1;
+}

package/src/components/Stepper/Stepper.js

@@ -0,0 +1,25 @@
+import classNames from "classnames";
+import PropTypes from "prop-types";
+import React, { Children, cloneElement } from "react";
+import styles from "./Stepper.module.scss";
+
+const Stepper = ({ children, size = 26, className, ...rest }) => {
+    return (
+        <div className={classNames(className, "mx-auto")} {...rest}>
+            <div className={classNames(styles.text, "d-flex align-items-center justify-content-between")}>
+                {Children.map(children, (child, index) =>
+                    cloneElement(child, { size, last: Children.count(children) === index + 1 }),
+                )}
+            </div>
+        </div>
+    );
+};
+
+Stepper.propTypes = {
+    /**
+     * Size of the circle.
+     */
+    size: PropTypes.number,
+};
+
+export default Stepper;

package/src/components/Stepper/Stepper.module.scss

@@ -0,0 +1,5 @@
+@import "../../styles/variables.scss";
+
+.text {
+    color: $gray-500;
+}

package/src/components/Stepper/index.js

@@ -0,0 +1,4 @@
+import Stepper from "./Stepper";
+import Step from "./Step";
+
+export { Stepper, Step };

package/src/components/TimePicker/TimePicker.js

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from "react";
+import classNames from "classnames";
+import { Dropdown, DropdownToggle, DropdownMenu } from "reactstrap";
+import TimeSlotPopOver from "./TimePickerPopover";
+import styles from "./TimePicker.module.scss";
+
+const formatValue = (value) => {
+    if (_.isNil(value)) {
+        return null;
+    }
+
+    return parseInt(value / 100) + ":" + (value % 100 < 10 ? "0" + (value % 100) : value % 100);
+};
+
+const TimePicker = ({ value, onChange }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedValue, setSelectedValue] = useState(value);
+
+    useEffect(() => {
+        setSelectedValue(value);
+    }, [value]);
+
+    const handleChange = (updatedValue) => {
+        setSelectedValue(updatedValue);
+        if (onChange) {
+            onChange(updatedValue);
+        }
+    };
+
+    const handleToggle = () => {
+        setIsOpen(!isOpen);
+    };
+
+    return (
+        <Dropdown isOpen={isOpen} toggle={handleToggle}>
+            <DropdownToggle
+                color="primary"
+                className={classNames(styles.button, "p-0 bg-white rounded text-center")}
+                outline
+            >
+                {formatValue(selectedValue)}
+            </DropdownToggle>
+
+            <DropdownMenu className={classNames(styles.dropdownMenu, "p-4")}>
+                <TimeSlotPopOver value={selectedValue} onChange={handleChange} onClose={() => setIsOpen(false)} />
+            </DropdownMenu>
+        </Dropdown>
+    );
+};
+
+export default TimePicker;

package/src/components/TimePicker/TimePicker.module.scss

@@ -0,0 +1,16 @@
+@import "../../styles/variables.scss";
+
+.button {
+    width: 50px;
+    height: 35px; // Same height as form inputs.
+    border: solid 1px $input-border;
+
+    &,
+    &:hover {
+        color: $input-color;
+    }
+}
+
+.dropdownMenu {
+    width: 500px;
+}

package/src/components/TimePicker/TimePickerPopover.js

@@ -0,0 +1,94 @@
+import React, { useState } from "react";
+import classNames from "classnames";
+import { Row, Button } from "reactstrap";
+import styles from "./TimePickerPopover.module.scss";
+
+const TimePickerPopover = ({ value, onChange, onClose }) => {
+    const hourArray = Array.from(Array(24).keys());
+    const minuteArray = Array.from([...Array(12).keys()].map((m) => m * 5));
+    let selectedValue = {};
+
+    if (value && !isNaN(value)) {
+        const inputValue = parseInt(value);
+        selectedValue = {
+            minute: inputValue % 100,
+            hour: parseInt(inputValue / 100),
+        };
+    }
+
+    const initialActions = {
+        minute: false,
+        hour: false,
+    };
+
+    const [actions, setActions] = useState(initialActions);
+
+    const handleClick = (value, key) => {
+        selectedValue[key] = value;
+        if (!selectedValue.minute) {
+            selectedValue.minute = 0;
+        }
+        if (!selectedValue.hour) {
+            selectedValue.hour = 0;
+        }
+        actions[key] = true;
+        setActions(actions);
+        onChange(selectedValue.hour * 100 + selectedValue.minute);
+        if (actions.hour && actions.minute) {
+            onClose();
+        }
+    };
+
+    return (
+        <Row>
+            <div className={styles.hourContainer}>
+                <div className="p-1 text-center">HOUR</div>
+                <div className={classNames(styles.content, "d-inline-block")}>
+                    <div className={classNames(styles.meridian, "float-left text-center")}>
+                        <p>AM</p>
+                        <p>PM</p>
+                    </div>
+                    <div className={classNames(styles.hours, "float-left")}>
+                        {hourArray.map((hour) => (
+                            <Button
+                                key={hour}
+                                onClick={(e) => handleClick(hour, "hour")}
+                                className={classNames(
+                                    styles.slotButton,
+                                    "d-inline-flex align-items-center justify-content-center",
+                                    { [styles.selected]: hour === selectedValue.hour },
+                                )}
+                            >
+                                {hour}
+                            </Button>
+                        ))}
+                    </div>
+                </div>
+            </div>
+            <div className={styles.minuteContainer}>
+                <div className="p-1 text-center">MINUTE</div>
+                <div className={classNames(styles.content, "d-inline-block")}>
+                    <div className={classNames(styles.minutes, "float-left")}>
+                        {minuteArray.map((minute) => (
+                            <Button
+                                className={classNames(
+                                    styles.slotButton,
+                                    "rounded border-secondary d-inline-flex align-items-center justify-content-center",
+                                    {
+                                        [styles.selected]: minute === selectedValue.minute,
+                                    },
+                                )}
+                                key={minute}
+                                onClick={(e) => handleClick(minute, "minute")}
+                            >
+                                {minute < 10 ? "0" + minute : minute}
+                            </Button>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </Row>
+    );
+};
+
+export default TimePickerPopover;