Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
veroglez committed Sep 25, 2023
1 parent 731dbff commit 38f9679
Show file tree
Hide file tree
Showing 4 changed files with 139 additions and 172 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import React, {
useContext,
useEffect,
useMemo,
useState
useState,
} from 'react';

import ServiceProvider from '../../ServiceProvider/index';
Expand Down Expand Up @@ -55,9 +55,7 @@ function EditItem() {

const {miniCartErrors} = skuOptionsAtomState;

const disabled = useMemo(() => miniCartErrors?.length, [
miniCartErrors,
]);
const disabled = useMemo(() => miniCartErrors?.length, [miniCartErrors]);

const {
cartState: {
Expand Down Expand Up @@ -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())
Expand All @@ -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);
Expand Down Expand Up @@ -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>
Expand All @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,9 @@ const ProductOptionCheckboxMultiple = ({
);

useEffect(() => {
console.log('A', skuOptionsAtomState);
let hasPreselected = false;
let initialSkuOptions = skuOptionsAtomState.skuOptions;
let initialSkuOptions = skuOptionsAtomState.skuOptions || [];

const newProductOptionValues = productOptionValues.map(
(productOptionValue) => {
Expand Down Expand Up @@ -114,7 +115,9 @@ const ProductOptionCheckboxMultiple = ({
skuOptionsAtomState
),
namespace,
skuOptions: initialSkuOptions,
[skuOptionsKey]: isFromMiniCart
? JSON.parse(json)
: initialSkuOptions,
});

return () =>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -82,15 +82,15 @@ const ProductOptionSelect = ({

useEffect(
() =>
setSkuOptionsAtomState((prevState) => ({
...prevState,
setSkuOptionsAtomState({
...skuOptionsAtomState,
[errorsKey]: getSkuOptionsErrors(
hasErrors,
isFromMiniCart,
productOption,
prevState
skuOptionsAtomState
),
})),
}),
// eslint-disable-next-line react-hooks/exhaustive-deps
[hasErrors]
);
Expand All @@ -106,56 +106,31 @@ const ProductOptionSelect = ({
setHasErrors(true);
}

if (isFromMiniCart) {

setSkuOptionsAtomState((prevState) => ({
...prevState,
miniCartErrors: getSkuOptionsErrors(
required,
isFromMiniCart,
productOption,
prevState
),
miniCartSkuOptions: [
...prevState.miniCartSkuOptions || [],
{
key: productOption.key,
price: initialProductOptionValue?.price,
priceType: initialProductOptionValue?.priceType,
quantity: initialProductOptionValue?.quantity,
skuId: initialProductOptionValue?.skuId,
skuOptionKey: productOption.key,
skuOptionValueKey: initialProductOptionValue?.key,
value: initialProductOptionValue?.key || '',
},
],
}));
}
else {
setSkuOptionsAtomState({
...skuOptionsAtomState,
errors: getSkuOptionsErrors(
required,
isFromMiniCart,
productOption,
skuOptionsAtomState
),
namespace,
skuOptions: [
...skuOptionsAtomState.skuOptions,
{
key: productOption.key,
price: initialProductOptionValue?.price,
priceType: initialProductOptionValue?.priceType,
quantity: initialProductOptionValue?.quantity,
skuId: initialProductOptionValue?.skuId,
skuOptionKey: productOption.key,
skuOptionValueKey: initialProductOptionValue?.key,
value: initialProductOptionValue?.key || '',
},
],
});
}
setSkuOptionsAtomState({
...skuOptionsAtomState,
[errorsKey]: getSkuOptionsErrors(
required,
isFromMiniCart,
productOption,
skuOptionsAtomState
),
namespace,
[skuOptionsKey]: isFromMiniCart
? JSON.parse(json)
: [
...(skuOptionsAtomState[skuOptionsKey] || []),
{
key: productOption.key,
price: initialProductOptionValue?.price,
priceType: initialProductOptionValue?.priceType,
quantity: initialProductOptionValue?.quantity,
skuId: initialProductOptionValue?.skuId,
skuOptionKey: productOption.key,
skuOptionValueKey: initialProductOptionValue?.key,
value: initialProductOptionValue?.key || '',
},
],
});

return () =>
isFromMiniCart
Expand All @@ -173,7 +148,7 @@ const ProductOptionSelect = ({
return;
}

setSkuOptionsAtomState((prevState) => ({...prevState, updating: true}));
setSkuOptionsAtomState({...skuOptionsAtomState, updating: true});

const valueArray = value.split('[$SEPARATOR$]');

Expand All @@ -184,16 +159,16 @@ const ProductOptionSelect = ({

setHasErrors(required);

return setSkuOptionsAtomState((prevState) => ({
...prevState,
return setSkuOptionsAtomState({
...skuOptionsAtomState,
[errorsKey]: getSkuOptionsErrors(
required,
isFromMiniCart,
productOption,
prevState
skuOptionsAtomState
),
updating: false,
}));
});
}

const currentProductOptionValue = productOptionValues.filter(
Expand All @@ -208,16 +183,16 @@ const ProductOptionSelect = ({

setHasErrors(required);

return setSkuOptionsAtomState((prevState) => ({
...prevState,
return setSkuOptionsAtomState({
...skuOptionsAtomState,
[errorsKey]: getSkuOptionsErrors(
required,
isFromMiniCart,
productOption,
prevState
skuOptionsAtomState
),
updating: false,
}));
});
}

setSelectedProductOptionValueKey(valueArray[1]);
Expand Down Expand Up @@ -265,17 +240,17 @@ const ProductOptionSelect = ({
if (!productOption.skuContributor && !currentProductOptionValue.skuId) {
setHasErrors(false);

return setSkuOptionsAtomState((prevState) => ({
...prevState,
return setSkuOptionsAtomState({
...skuOptionsAtomState,
[errorsKey]: getSkuOptionsErrors(
false,
isFromMiniCart,
productOption,
prevState
skuOptionsAtomState
),
[skuOptionsKey]: currentSkuOptions,
updating: false,
}));
});
}

DeliveryCatalogAPIServiceProvider.postChannelProductSkuBySkuOption(
Expand Down Expand Up @@ -308,10 +283,10 @@ const ProductOptionSelect = ({
};
}

setSkuOptionsAtomState((prevState) => ({
...prevState,
setSkuOptionsAtomState({
...skuOptionsAtomState,
[skuOptionsKey]: currentSkuOptions,
}));
});

cpInstance.skuOptions = currentSkuOptions;
cpInstance.skuId = parseInt(cpInstance.id, 10);
Expand All @@ -329,17 +304,17 @@ const ProductOptionSelect = ({
.finally(() => {
if (isMounted()) {
setHasErrors(false);
setSkuOptionsAtomState((prevState) => ({
...prevState,
setSkuOptionsAtomState({
...skuOptionsAtomState,
[errorsKey]: getSkuOptionsErrors(
false,
isFromMiniCart,
productOption,
prevState
skuOptionsAtomState
),
[skuOptionsKey]: currentSkuOptions,
updating: false,
}));
});
}
});
};
Expand Down
Loading

0 comments on commit 38f9679

Please sign in to comment.