@shopgate/engage/cart/components/CartItem/CartItemSubstitution.js

Shopgate's ENGAGE library.

import React from 'react';
import PropTypes from 'prop-types';
import { i18n } from '@shopgate/engage/core';
import { BOPIS, ROPIS } from '@shopgate/engage/locations';
import connect from "./CartItemSubstitution.connector";
import { useCartItem } from "./CartItem.hooks";
import Substitution, { SubstitutionWrapper } from "../Substitution";
import { root } from "./CartItemSubstitution.style";

/**
 * Renders the cart reservation card label.
 * @param {Object} props The component props.
 * @param {Function} props.setSubstitutionAllowed The action to set substitution allowed flag.
 * @param {boolean} props.editable Whether the substitution option is editable.
 * @returns {JSX.Element}
 */
import { jsx as _jsx } from "react/jsx-runtime";
const CartItemSubstitution = ({
  setSubstitutionAllowed,
  editable
}) => {
  const {
    cartItem: {
      id,
      substitutionAllowed,
      fulfillment
    } = {}
  } = useCartItem();
  if (![ROPIS, BOPIS].includes(fulfillment?.method || [])) {
    return null;
  }
  return /*#__PURE__*/_jsx(SubstitutionWrapper, {
    children: /*#__PURE__*/_jsx(Substitution, {
      className: root,
      id: `substitution-${id}`,
      label: i18n.text('cart.allow_substitution'),
      checked: substitutionAllowed,
      onChange: () => setSubstitutionAllowed(id, !substitutionAllowed),
      disabled: !editable
    })
  });
};
CartItemSubstitution.defaultProps = {
  editable: false
};
export default connect(CartItemSubstitution);