@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";var 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(_ref){var value=_ref.value,productId=_ref.productId;var _useCartItem=useCartItem(),invokeFulfillmentAction=_useCartItem.invokeFulfillmentAction;var context=useCartItemProduct();var handleRemove=context.handleRemove,toggleEditMode=context.toggleEditMode,cartItem=context.cartItem,isEditable=context.isEditable;var handleChangeLocationClick=useCallback(function(){if(!cartItem||!cartItem.fulfillment||!cartItem.fulfillment.method){return;}var method=cartItem.fulfillment.method;invokeFulfillmentAction('changeLocation',method);},[cartItem,invokeFulfillmentAction]);var handleChangeFulfillmentClick=useCallback(function(){invokeFulfillmentAction('changeFulfillment');},[invokeFulfillmentAction]);return React.createElement(Grid,null,React.createElement(Grid.Item,{grow:1},React.createElement(ConditionalWrapper,{condition:isEditable,wrapper:function wrapper(children){return React.createElement(TextLink,{href:"".concat(ITEM_PATH,"/").concat(bin2hex(productId))},children);}},React.createElement(ProductName,{name:value,className:title,portalName:CART_ITEM_NAME,portalProps:context,testId:value,ellipsis:false}))),isEditable&&React.createElement(Grid.Item,{className:menuContainer,shrink:0},React.createElement(SurroundPortals,{portalName:CART_ITEM_CONTEXT_MENU,portalProps:{context:context,handleRemove:handleRemove,toggleEditMode:toggleEditMode}},React.createElement(ContextMenu,{classes:contextMenuClasses},React.createElement(SurroundPortals,{portalName:CART_ITEM_CONTEXT_MENU_ITEM_REMOVE,portalProps:{context:context,handleRemove:handleRemove}},React.createElement("div",{"data-test-id":"cartItemContextMenuItemRemove"},React.createElement(ContextMenu.Item,{onClick:handleRemove},React.createElement(I18n.Text,{string:"cart.remove"})))),React.createElement(CartContextMenuItemChangeLocation,{cartItem:context.cartItem,onClick:handleChangeLocationClick}),React.createElement(CartContextMenuItemChangeFulfillment,{cartItem:context.cartItem,onClick:handleChangeFulfillmentClick})))));}