META-INF.resources.components.multishipping.OrderItemDetailModal.tsx Maven / Gradle / Ivy

Go to download
/**
 * SPDX-FileCopyrightText: (c) 2024 Liferay, Inc. https://liferay.com
 * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
 */

import ClayModal from '@clayui/modal';
import {Observer} from '@clayui/modal/lib/types';
import React from 'react';

import {IOrderItem} from './Types';

interface IOrderItemModalDetailProps {
	observer: Observer;
	orderItem: IOrderItem;
	spritemap?: string;
}

const parseValue = (value: any) => {
	return Array.isArray(value)
		? value.filter((item) => item === 0 || item).join(', ')
		: value;
};

const OrderItemDetailModal = ({
	observer,
	orderItem: orderItem,
	spritemap = '',
}: IOrderItemModalDetailProps) => {
	return (
		
			
				{`${Liferay.Language.get('view')} ${orderItem.sku} ${Liferay.Language.get('details')}`}
			

			
				{orderItem.name}

				{(orderItem.skuUnitOfMeasure?.key || '') !== '' && (
					
						{`${Liferay.Language.get('uom')}: ${orderItem.skuUnitOfMeasure?.key || ''}`}
					
				)}

				{(orderItem.options || '[]') !== '[]' && (
					
						{`${Liferay.Language.get('options')}:`}

						
							{(
								JSON.parse(
									orderItem.options || '[]'
								) as Array
							).map((option, index) => {
								const {
									skuId,
									skuOptionName,
									skuOptionValueNames,
									value,
								} = option;

								const childItem = (
									orderItem.cartItems || []
								).find(
									(childItem) =>
										childItem.skuId === parseInt(skuId, 10)
								);

								const {name, quantity, skuUnitOfMeasure} =
									childItem || {};

								return (
									
										
											{skuOptionName}
										

										
											
												{parseValue(
													skuOptionValueNames
												) || parseValue(value)}
											

											{name && (
												
													{`(${quantity} \u00D7 ${name} ${
														skuUnitOfMeasure?.key ||
														''
													})`}
												
											)}
										
									
								);
							})}
						
					
				)}
			
		
	);
};

export default OrderItemDetailModal;