@shopgate/engage/locations/components/FulfillmentSlotSwitcher/FulfillmentSlotSwitcherBar.js

Shopgate's ENGAGE library.

import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { RippleButton, I18n } from '@shopgate/engage/components';
import { i18n } from '@shopgate/engage/core';
import { wrapper, inner, innerStandalone, heading, name, button } from "./FulfillmentSlotSwitcherBar.style";
import { getTimeSlotDisplayText } from "./time";

/**
 * @returns {JSX}
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const FulfillmentSlotSwitcherBar = ({
  fulfillmentSlot,
  handleChange,
  standalone,
  editable
}) => {
  const displayTime = useMemo(() => getTimeSlotDisplayText(fulfillmentSlot), [fulfillmentSlot]);
  return /*#__PURE__*/_jsx("div", {
    className: wrapper,
    children: /*#__PURE__*/_jsxs("div", {
      className: classNames(inner, {
        [innerStandalone]: standalone
      }),
      children: [/*#__PURE__*/_jsx("span", {
        className: heading,
        children: i18n.text('locations.your_current_timeslot.heading')
      }), /*#__PURE__*/_jsx("span", {
        className: name,
        children: displayTime
      }), editable && /*#__PURE__*/_jsx(RippleButton, {
        onClick: handleChange,
        type: "secondary",
        className: button,
        flat: true,
        children: /*#__PURE__*/_jsx(I18n.Text, {
          string: "locations.your_current_location.change"
        })
      })]
    })
  });
};
FulfillmentSlotSwitcherBar.defaultProps = {
  fulfillmentSlot: null,
  standalone: false,
  editable: true
};
export default FulfillmentSlotSwitcherBar;