WIP

liferay · Sep 25, 2023 · 30e2cf8 · 30e2cf8
1 parent 731dbff
commit 30e2cf8
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 174 deletions.
diff --git a/...mmerce-frontend-js/src/main/resources/META-INF/resources/components/mini_cart/EditItem.js b/...mmerce-frontend-js/src/main/resources/META-INF/resources/components/mini_cart/EditItem.js
@@ -12,7 +12,7 @@ import React, {
 	useContext,
 	useEffect,
 	useMemo,
-	useState
+	useState,
 } from 'react';
 
 import ServiceProvider from '../../ServiceProvider/index';
@@ -55,9 +55,7 @@ function EditItem() {
 
 	const {miniCartErrors} = skuOptionsAtomState;
 
-	const disabled = useMemo(() => miniCartErrors?.length, [
-		miniCartErrors,
-	]);
+	const disabled = useMemo(() => miniCartErrors?.length, [miniCartErrors]);
 
 	const {
 		cartState: {
@@ -104,54 +102,55 @@ function EditItem() {
 		const updatedCartItems = cartItems.map((cartItem) =>
 			cartItem.id === selectedItem.id
 				? {
-					...cartItem,
-					options: formattedCartItem.options,
-					replacedSkuId: formattedCartItem.replacedSkuId,
-					skuId: formattedCartItem.skuId,
-				}
+						...cartItem,
+						options: formattedCartItem.options,
+						replacedSkuId: formattedCartItem.replacedSkuId,
+						skuId: formattedCartItem.skuId,
+				  }
 				: cartItem
 		);
 
 		CartResource.updateCartById(cartId, {
 			cartItems: updatedCartItems,
 		})
-		.then((updatedCart) => {
-			Liferay.fire(CURRENT_ORDER_UPDATED, {order: updatedCart});
-
-			setEditedItem(null);
-			setSkuOptionsAtomState({
-				...skuOptionsAtomState,
-				miniCartErrors: [],
-				miniCartSkuOptions: [],
-				updating: false,
+			.then((updatedCart) => {
+				Liferay.fire(CURRENT_ORDER_UPDATED, {order: updatedCart});
+
+				setEditedItem(null);
+				setSkuOptionsAtomState({
+					...skuOptionsAtomState,
+					miniCartErrors: [],
+					miniCartSkuOptions: [],
+					updating: false,
+				});
+			})
+			.catch((error) => {
+				console.error(error);
 			});
-		})
-		.catch((error) => {
-			console.error(error);
-		});
-	}, [cpInstance, skuOptionsAtomState.miniCartSkuOptions]);
-
-	useEffect(() => {
-		const saveButton = document.getElementById(`${miniCartNamespace}saveButton`);
-
-		if (saveButton) {
-			saveButton.addEventListener('click', handleSave);
-		}
-
-		return () => {
-			saveButton.removeEventListener('click', handleSave);
-		};
-	}, [cpInstance, skuOptionsAtomState.miniCartSkuOptions]);
+	}, [
+		cpInstance,
+		cartState,
+		disabled,
+		selectedItem.id,
+		setEditedItem,
+		setSkuOptionsAtomState,
+		skuOptionsAtomState,
+	]);
 
-	const [price, setPrice] = useState(selectedItem ? selectedItem.price : null);
+	const [price, setPrice] = useState(
+		selectedItem ? selectedItem.price : null
+	);
 
 	const handleCPInstanceChanged = ({cpInstance}) => {
 		setCPInstance(cpInstance);
 		setPrice(adaptLegacyPriceModel(cpInstance.price));
 	};
 
 	useEffect(() => {
-		const productOptionsURL = getProductOptionsURL(channel.id, editedItem.productId);
+		const productOptionsURL = getProductOptionsURL(
+			channel.id,
+			editedItem.productId
+		);
 
 		fetch(productOptionsURL)
 			.then((response) => response.json())
@@ -160,12 +159,18 @@ function EditItem() {
 	}, [channel.id, editedItem.productId]);
 
 	useEffect(() => {
-		Liferay.on(`${miniCartNamespace}${CP_INSTANCE_CHANGED}`, handleCPInstanceChanged);
+		Liferay.on(
+			`${miniCartNamespace}${CP_INSTANCE_CHANGED}`,
+			handleCPInstanceChanged
+		);
 
 		return () => {
-			Liferay.detach(`${miniCartNamespace}${CP_INSTANCE_CHANGED}`, handleCPInstanceChanged);
+			Liferay.detach(
+				`${miniCartNamespace}${CP_INSTANCE_CHANGED}`,
+				handleCPInstanceChanged
+			);
 		};
-	}, [miniCartNamespace]);
+	}, []);
 
 	const hasDiscount = isNonnull(price.discountPercentage);
 	const hasPromoPrice = isNonnull(price.promoPrice);
@@ -251,10 +256,7 @@ function EditItem() {
 						{Liferay.Language.get('cancel')}
 					</ClayButton>
 
-					<ClayButton
-						disabled={disabled}
-						id={`${miniCartNamespace}saveButton`}
-					>
+					<ClayButton disabled={disabled} onClick={handleSave}>
 						{Liferay.Language.get('save')}
 					</ClayButton>
 				</div>
@@ -265,15 +267,21 @@ function EditItem() {
 
 export default EditItem;
 
-const Options = ({cartItemId, channelId, productId, productOptions, selectedItem}) =>
+const Options = ({
+	cartItemId,
+	channelId,
+	productId,
+	productOptions,
+	selectedItem,
+}) =>
 	productOptions.map((productOption) => {
 		let Component = ProductOptionCheckbox;
 		let props = {
 			componentId: `${miniCartNamespace}${cartItemId}_${productOption.id}`,
 			isFromMiniCart: true,
 			json: selectedItem.options,
 			namespace: miniCartNamespace,
-			productOption: productOption,
+			productOption,
 		};
 
 		if (productOption.fieldType === FIELD_TYPE.checkboxMultiple) {

diff --git a/.../resources/META-INF/resources/components/product_options/ProductOptionCheckboxMultiple.js b/.../resources/META-INF/resources/components/product_options/ProductOptionCheckboxMultiple.js
@@ -51,15 +51,15 @@ const ProductOptionCheckboxMultiple = ({
 					productOption,
 					skuOptionsAtomState
 				),
-				namespace,
+				...(!isFromMiniCart && {namespace}),
 			}),
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[hasErrors]
 	);
 
 	useEffect(() => {
 		let hasPreselected = false;
-		let initialSkuOptions = skuOptionsAtomState.skuOptions;
+		let initialSkuOptions = skuOptionsAtomState.skuOptions || [];
 
 		const newProductOptionValues = productOptionValues.map(
 			(productOptionValue) => {
@@ -113,8 +113,10 @@ const ProductOptionCheckboxMultiple = ({
 				productOption,
 				skuOptionsAtomState
 			),
-			namespace,
-			skuOptions: initialSkuOptions,
+			...(!isFromMiniCart && {namespace}),
+			[skuOptionsKey]: isFromMiniCart
+				? JSON.parse(json)
+				: initialSkuOptions,
 		});
 
 		return () =>