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

Shopgate's ENGAGE library.

import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import { Grid, I18n, ContextMenu, SurroundPortals, TextLink } from '@shopgate/engage/components';
import { CART_ITEM_CONTEXT_MENU, CART_ITEM_CONTEXT_MENU_ITEM_REMOVE, CART_ITEM_NAME } from '@shopgate/engage/cart';
import { CartContextMenuItemChangeLocation, CartContextMenuItemChangeFulfillment } from '@shopgate/engage/locations';
import { ITEM_PATH, ProductName } from '@shopgate/engage/product';
import { bin2hex } from '@shopgate/pwa-common/helpers/data';
import { useCartItem, useCartItemProduct } from "./CartItem.hooks";
import { menuToggleButton, menuToggleContainer, title, menuContainer } from "./CartItemProductTitle.style";
import { ConditionalWrapper } from "../../../components";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const contextMenuClasses = {
  button: menuToggleButton,
  container: menuToggleContainer
};

/**
 * The Cart Product Title component.
 * @param {Object} props The component properties.
 * @param {string} props.value The product name
 * @param {string} props.productId The product id
 * @returns {JSX.Element}
 */
export function CartItemProductTitle({
  value,
  productId
}) {
  const {
    invokeFulfillmentAction
  } = useCartItem();
  const context = useCartItemProduct();
  const {
    handleRemove,
    toggleEditMode,
    cartItem,
    isEditable,
    isLinkable
  } = context;
  const handleChangeLocationClick = useCallback(() => {
    if (!cartItem || !cartItem.fulfillment || !cartItem.fulfillment.method) {
      return;
    }
    const {
      fulfillment: {
        method
      }
    } = cartItem;
    invokeFulfillmentAction('changeLocation', method);
  }, [cartItem, invokeFulfillmentAction]);
  const handleChangeFulfillmentClick = useCallback(() => {
    invokeFulfillmentAction('changeFulfillment');
  }, [invokeFulfillmentAction]);
  return /*#__PURE__*/_jsxs(Grid, {
    children: [/*#__PURE__*/_jsx(Grid.Item, {
      grow: 1,
      children: /*#__PURE__*/_jsx(ConditionalWrapper, {
        condition: isEditable && isLinkable,
        wrapper: children => /*#__PURE__*/_jsx(TextLink, {
          href: `${ITEM_PATH}/${bin2hex(productId)}`,
          children: children
        }),
        children: /*#__PURE__*/_jsx(ProductName, {
          name: value,
          className: title,
          portalName: CART_ITEM_NAME,
          portalProps: context,
          testId: value,
          ellipsis: false
        })
      })
    }), isEditable && /*#__PURE__*/_jsx(Grid.Item, {
      className: menuContainer,
      shrink: 0,
      children: /*#__PURE__*/_jsx(SurroundPortals, {
        portalName: CART_ITEM_CONTEXT_MENU,
        portalProps: {
          context,
          handleRemove,
          toggleEditMode
        },
        children: /*#__PURE__*/_jsxs(ContextMenu, {
          classes: contextMenuClasses,
          children: [/*#__PURE__*/_jsx(SurroundPortals, {
            portalName: CART_ITEM_CONTEXT_MENU_ITEM_REMOVE,
            portalProps: {
              context,
              handleRemove
            },
            children: /*#__PURE__*/_jsx("div", {
              "data-test-id": "cartItemContextMenuItemRemove",
              children: /*#__PURE__*/_jsx(ContextMenu.Item, {
                onClick: handleRemove,
                children: /*#__PURE__*/_jsx(I18n.Text, {
                  string: "cart.remove"
                })
              })
            })
          }), /*#__PURE__*/_jsx(CartContextMenuItemChangeLocation, {
            cartItem: context.cartItem,
            onClick: handleChangeLocationClick
          }), /*#__PURE__*/_jsx(CartContextMenuItemChangeFulfillment, {
            cartItem: context.cartItem,
            onClick: handleChangeFulfillmentClick
          })]
        })
      })
    })]
  });
}