META-INF.resources.js.components.StorefrontTooltipContent.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of com.liferay.commerce.shop.by.diagram.web
Liferay Commerce Shop by Diagram Web
There is a newer version: 1.0.97
Show newest version
/**
 * SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
 * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
 */

import ClayAlert from '@clayui/alert';
import ClayLabel from '@clayui/label';
import ClayLoadingIndicator from '@clayui/loading-indicator';
import ClaySticker from '@clayui/sticker';
import {useIsMounted} from '@liferay/frontend-js-react-web';
import {AddToCartComponent, isProductPurchasable} from 'commerce-frontend-js';
import {sub} from 'frontend-js-web';
import React, {useEffect, useState} from 'react';

import {getCartItems} from '../utilities/data';
import {
	formatProductOptions,
	getProductName,
	getProductURL,
} from '../utilities/index';
import Price from './Price';

function SkuContent({
	accountId,
	cartId,
	channelGroupId,
	channelId,
	currencyCode,
	orderUUID,
	product: mappedProduct,
	productBaseURL,
}) {
	const product =
		mappedProduct.firstAvailableReplacementMappedProduct || mappedProduct;
	const isMounted = useIsMounted();
	const productURL = getProductURL(productBaseURL, product.urls);
	const productName = getProductName(product);
	const [inCart, setInCart] = useState(false);
	const [loading, setLoading] = useState(true);

	useEffect(() => {
		if (!cartId) {
			setInCart(false);

			setLoading(false);

			return;
		}

		setLoading(true);

		getCartItems(cartId, product.skuId)
			.then((jsonResponse) => {
				if (isMounted()) {
					setInCart(Boolean(jsonResponse.items?.length));

					setLoading(false);
				}
			})
			.catch(() => {
				if (isMounted()) {
					setLoading(false);
				}
			});
	}, [cartId, isMounted, product.skuId]);

	const productPurchasable = isProductPurchasable(
		product.availability,
		product.productConfiguration,
		product.purchasable
	);

	return (
		
			{mappedProduct.firstAvailableReplacementMappedProduct && (
				
					
						{sub(
							Liferay.Language.get('x-has-been-replaced-by-x'),
							mappedProduct.sku,
							product.sku
						)}
					
				
			)}

			{product.thumbnail && (
				
					
						
					
				
			)}

			
				
					
						{productPurchasable
							? Liferay.Language.get('available')
							: Liferay.Language.get('unavailable')}
					
				

				
					{product.sku}
				

				
					{productName}
				

				
					{Liferay.Language.get('quantity')}: {product.quantity}
				
			

			
				{loading ? (
					
				) : (
					<>
						

						
					
				)}
			
		
	);
}

function DiagramContent({product, productBaseURL}) {
	const productURL = getProductURL(productBaseURL, product.urls);
	const productName = getProductName(product);

	return (
		
			{product.thumbnail && (
				
					
						
					
				
			)}

			
				
					{productName}
				
			

			
				
					{Liferay.Language.get('view')}
				
			
		
	);
}

function ExternalContent({product}) {
	return (
		<>
			{product.sku || product.name}

			{!!product.quantity && (
				
					{Liferay.Language.get('quantity')}: {product.quantity}
				
			)}
		
	);
}

const ContentsMap = {
	diagram: DiagramContent,
	external: ExternalContent,
	sku: SkuContent,
};

function StorefrontTooltipContent({
	accountId,
	cartId,
	channelGroupId,
	channelId,
	currencyCode,
	orderUUID,
	productBaseURL,
	selectedPin,
}) {
	const Renderer = ContentsMap[selectedPin.mappedProduct.type];

	return (
		
			
		
	);
}

export default StorefrontTooltipContent;