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

Shopgate's ENGAGE library.

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

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