chore(customization_cart): customizations_replicated_products_in_cart

[oscargross]

Issue-test:
Adicionar um produto com customização no cart, no momento em que voltamos ao produto e adicionamos um segundo produto com outra customização, o primeiro sofre alteração desses campos, ficando com as mesmas customizações do último adicionado ao cart.

Solution:
A prop customizations é adicionada aos items (product) do cart separadamente das demais props, assim, é alterada toda vez que o(s) campo(s) de customização(es) também é alterado. A PR faz com que os produtos que já estavam no carrinho sejam readicionados com suas props "antigas", sem edição, no momento em que um novo produto é adicionado.

[leomp12]

Mas aí você foi na solução mais radical possível @oscargross 😬

Eu acho que o problema é só porque o objeto customizations é o mesmo entre os dois itens, por referência, já que a gente só duplica as props do item no primeiro nível em

shopping-cart/src/methods/add-item.js

Line 67 in 2b837f5

const itemCopy = Object.assign({}, newItem)

nesse caso uma solução deve ser verificar se tem customizations, e nesse caso:

Object.assign(itemCopy.customizations, item.customizations)

em último caso você poderia copiar o objeto customizations deeply com lodash.clonedeep tipo acontece aí https://github.com/ecomplus/search-engine/blob/master/src/methods/reset.js

[oscargross]

@leomp12 entendi
Só tem uma questão, as customizations dos produtos que já estão no cart são alteradas na edição desses campos, não quando o produto é adicionado. Na função setCustomizationOption aqui https://github.com/ecomplus/storefront/blob/master/%40ecomplus/storefront-components/src/js/TheProduct.js

Pode editar as customizations do segundo produto com o cart aberto para ver que já vai alterando o que já está no cart, assim, fazer deeply quando o novo for adicionado não vai adiantar 😬

Por isso pensei em pegar no localStorage , pois nos testes lá só é alterado quando a function addProdcut for chamada.

[leomp12]

Pode editar as customizations do segundo produto com o cart aberto para ver que já vai alterando o que já está no cart, assim, fazer deeply quando o novo for adicionado não vai adiantar

Mas você chegou a testar?
O negócio é descobrir porque o customizations de outro item é editado, eu acho que é porque eles compartilham o mesmo objeto por referência, o que seria resolvido com a sugestão que eu deixei, sacou?

[oscargross]

@leomp12 monstro, tem razão, entendi nos testes a clonagem do estado anterior do cart.
Foi ok.. dá uma olhada se fica show assim pfv

Se passar, vi q tem essa issue sobre isso ecomplus/storefront#556

[leomp12]

Ué, mas agora estamos mantendo o objeto do carrinho duplicado em cada instância ? Acho que não gasta isso não sô 😄

em último caso você poderia copiar o objeto customizations deeply com lodash.clonedeep tipo acontece aí https://github.com/ecomplus/search-engine/blob/master/src/methods/reset.js

O clonedeep seria do customizations apenas, dentro do método addItem mesmo:

if (itemCopy.customizations) {
  itemCopy.customizations = cloneDeep(item.customizations)
}

isso se um assign ainda mais simples não for suficiente:

if (itemCopy.customizations) {
  Object.assign(itemCopy.customizations, item.customizations)
}

[leomp12]

O problema é só com customizations então não tem porque clonar todo o objeto do carrinho, todos os itens e etc, faz sentido? Nas duas implementações você fez isso na verdade 😛

O fato de JSON.parse resolver o problema (entendi que você testou isso e deu certo...) sugere que o issue é só com objetos que deveriam ser diferentes e estão mantidos os mesmos por referência, com o parse você cria um espaço novo em memória para um objeto novo, mas o ponto é que você não precisa fazer isso com o carrinho inteiro sempre que um item é adicionado, não há motivo pra isso (especialmente manipulando JSON e storage sempre), se o problema é só o objeto customizations basta que na adição do item ao carrinho você clone esse objeto no item atual apenas, justamente para "criar outra a referência", já é suficiente para que todos os itens terão customizations com objetos diferentes sempre, faz sentido?

Object.assign já faz isso também, só que só no "primeiro nível", como o customizations é um array de nested objects pode ser que o problema persista, nesse caso o clonedeep deve resolver.

[leomp12]

@oscargross testei aqui e só isso:

if (newItem.customizations) {
  newItem.customizations.forEach((customization, i) => {
    itemCopy.customizations[i] = Object.assign({}, customization)
  })
}

já é suficiente, evita o lodash.clonedeep (portanto deixa de adicionar uma dependência) e principalmente não copia o cart todo...

Comitei no seu branch pra aprovar a PR.

O fato de JSON.parse resolver o problema (entendi que você testou isso e deu certo...) sugere que o issue é só com objetos que deveriam ser diferentes e estão mantidos os mesmos por referência

Valeu por identificar isso pra nós 💜

[oscargross]

@leomp12 Opa meu querido, enviei agr um commit só clonando o customizations do ultimo product como sugeriu, não todo o cart como estava.. mas de qualquer forma seu commit tbm soluciona.

Abração!! 💚