Review screen that shows your own offer on the shop

[henriquecbuss]

What we have
When you click on an offer on the shop that is made by you, you see a similar screen to other offers (not created by you), but without your contact information, and with an "Edit" button instead of "Buy"

Proposal
Review this design to:

• Make it clearer it's your offer
• Show the offer the same way other people see it

Why

• It might be confusing to people, and they might not know it's their offer
• It might be useful to know how other people see your offer

How
@lucca65 suggested we show a banner (similar to our Feedback component) on the top saying something like "This offer is made by you. Click here to edit it", while showing the same screen as if it wasn't your offer.

We could also use this issue to display the profile summary somewhere on this page (the one that shows up when you hover over people's names/avatars on other places)

Additional context
Brought up on our Roles & Permissions meeting

[henriquecbuss]

cc @lucca65 @muguika @rafachadud @juramos-2020

[lucca65]

+1 to this topic, i really like the way it is right now, its the best interaction of this screen but we give no tools to the seller, and having a way to better preview their page would be awesome. We can move all relevant buttons (edit, restock, pause, etc) to the top with a big, shiny color that is always visible.

We are going to see a lot of changes to the shop in the next few weeks as this is our main focus now. We are bound to make this screen better

[rafachadud]

@juramos-2020 @NeoVier @lucca65 updated in here: https://www.figma.com/file/OSqvmNO3HSzRJSrp9Of865/New-Shop?node-id=2876%3A49405

[henriquecbuss]

@rafachadud what do you think of making the "This is your offer" element as wide as the image? Something like the one from boosted offers: https://www.figma.com/file/OSqvmNO3HSzRJSrp9Of865/New-Shop?node-id=2722%3A48929

We could say something like "This is how other users view your offer. Click here to edit it".

I'm not sure if this is the appropriate issue (and maybe it would be more significant when we implement orders), but maybe we could also have a separate screen to show some information about the offer in a more condensed format (visible only to the seller, maybe the community admin), such as amount sold, total profit, amount left in stock, price, description, images, etc.

This information is visible on the editing form, but currently there's no way to see it all in one place

[juramos-2020]

@NeoVier @rafachadud

I'm not sure if this is the appropriate issue (and maybe it would be more significant when we implement orders), but maybe we could also have a separate screen to show some information about the offer in a more condensed format (visible only to the seller, maybe the community admin), such as amount sold, total profit, amount left in stock, price, description, images, etc.

Acho que isso poderia ser resolvido em outra issue que pode entrar como prioridade mais a frente.

[rafachadud]

@NeoVier @juramos-2020 I made a version 2 using the same element. Let me know which one it's best. https://www.figma.com/file/OSqvmNO3HSzRJSrp9Of865/New-Shop?node-id=2938%3A49531

I'm not sure if this is the appropriate issue (and maybe it would be more significant when we implement orders), but maybe we could also have a separate screen to show some information about the offer in a more condensed format (visible only to the seller, maybe the community admin), such as amount sold, total profit, amount left in stock, price, description, images, etc.

+1
I really liked this idea to have some statistics, we can even think in the future to do one page with overall statistics for all offers created by one user, so they can check what is performing the best and trace their Mudas earned by time.

[juramos-2020]

Eu gosto da primeira opção, mas com o elemento do "This is your offer" sendo da mesma largura da imagem, que nem vc fez na segunda opção.

O que eu não gostei na segunda opção é que parece que o elemento do "This is your offer" está "brigando" visualmente com o header da pág, devido ter uma altura maior e ser da mesma cor.

E acho que a frase "This is how other users view your offer. Click here to edit it" trás uma redundância pois o elemento em cima já fala que a oferta é do usuário, a tag localizada em abaixo do avatar também identifica isso, e bem ao lado tem o botão bem grande que informa sobre a edição.

[lucca65]

Por mim iriamos por um caminho:

1. Tirar essa tela completamente, criar uma tela nova que mostra o produto visão do usuário com mais detalhes e números como sugerido pelo @NeoVier
2. Colocaria esse banner novo, roxo nessa tela nova, que por sinal ficou lindo! @rafachadud. Inclusive poderíamos usar a cor para informar essa área privada do usuário, pois muitas coisas nós explicamos por texto e nem sempre o pessoal lê tudo.

Meu motivo pra pensar assim é porque estamos usando metade do espaço para algo que não tem sentido:

Outro motivo é que vamos precisar mesmo de um espaço desse, onde o vendedor pode ver seus pedidos para uma oferta, fazer operacionais como pausa do anuncio, re-estocar (coisa que a Muda faz toda semana, por exemplo), ver reviews das compras (usado no campo de compra)

[lucca65]

O que eu não gostei na segunda opção é que parece que o elemento do "This is your offer" está "brigando" visualmente com o header da pág, devido ter uma altura maior e ser da mesma cor.

Eu concordo demais com isso! Talvez possamos ter variações do header, ainda com o mesmo sentido (botão de voltar e título) mas podendo ter mais elementos. Como esse do aviso, ou até mesmo filtros, opções, ilustrações, fundos e cores diferentes dependendo do contexto

[lucca65]

@juramos-2020 um exemplo pode ser visto nessa tela que tem elementos de "aviso" particular pra essa página, que poderia ser colapsável e dois filtros, que funcionam como abas. Todas poderiam estar nesse header, de maneira mais compacta, como colocando esse longo texto dentro de um tooltip/modal/colapse.

Esse é mais um exemplo de como espaço em branco:

[lucca65]

tem muitos assuntos diferentes nos meus comentários, acho que podemos trabalhar eles mirando nessa ideia de buscar componentes que atendam vários casos! Vamos sem pressa!

[juramos-2020]

Primeiramente perdoem a falta de pontuacao mas o teclado nao ta me ajudando 😅

Ainda sugiro dividirmos as issues, pois cada uma resolve um problema diferente e temos seguido essa organizacao com outras issues.

Com essa divisao conseguimos resolver essa Issue #719 que e direcionada para o elemento de "mostrar sua propria oferta" e conseguimos trabalhar melhor a proposta do @NeoVier em uma nova issue. Vamos precisar conversar mais para entender melhor algumas sugestoes ☺️

Por mim iriamos por um caminho:
Tirar essa tela completamente, criar uma tela nova que mostra o produto visão do usuário com mais detalhes e números como sugerido pelo @NeoVier
Colocaria esse banner novo, roxo nessa tela nova, que por sinal ficou lindo! @rafachadud. Inclusive poderíamos usar a cor para informar essa área privada do usuário, pois muitas coisas nós explicamos por texto e nem sempre o pessoal lê tudo.

Sobre esse caminho, podemos seguir tambem se nao tivermos pressa alguma de resolver isso. Vamos precisar de uma reuniao de briefing para entender melhor as sugestoes e as necessidades 😉

[henriquecbuss]

+1 pra resolver essa issue só com o que a @rafachadud já fez, e criar novas issues (ou discussions) pra conversarmos melhor sobre as outras sugestões

[lucca65]

vamos ju! você pode marcar? pra mim qualquer dia é bom, menos nas terças. pode ser pra essa ou pra próxima semana

[juramos-2020]

Sucesso 😀

Acho que na próxima semana é uma boa. Essa semana já tem bastante 😅

Pra mim dá qualquer dia de manhã. De tarde só consigo na quinta depois das 14:30. Terça de tarde consigo entre 15h e 17h.

Ainda temos que agendar aquela reunião com o Helton (que conversamos no rice @lucca65 ) 🏃🏼‍♀️🏃🏼‍♀️ 🏃🏼‍♀️

[lucca65]

Fechado Ju! sua agenda bate com a minha! posso em todas as janelas que especificou! Vamo que vamo 💪

[juramos-2020]

Ola pessoal! @NeoVier @lucca65

Podemos deixar essa reunião mais para frente?

Estava conversando com a @rafachadud sobre o que temos em mãos agora e estamos totalmente sem mãos para pegar esse briefing agora. Estou com muita issue aberta precisando ser finalizada e algumas demandas do shopping que ja foram priorizadas e que tambem precisam ser feitas.

Então não faz sentido termos essa reunião agora se ela vai ficar parada em nosso backlog. S'o teremos retrabalho em ter que refazer essa reunião mais pra frente, pois, muita coisa pode mudar dependendo de quando pergarmos ela.

Nossa sugestão 'e de abrirmos uma nova issue e ir colocando todas as nossas ideias. Podemos compartilhar com os demais membros - Luiz e Karla por exemplo - que certamente tambem terão muitas contribuições.
E quando tivermos perto de pega-la, para faze-la, marcamos uma reunião de alinhamento.

Pode ser?

[henriquecbuss]

Por mim tranquilo Ju! Também já temos coisas pra fazer, e acho que isso não é tão prioritário quanto as outras partes do shop por enquanto.

Nossa sugestão 'e de abrirmos uma nova issue e ir colocando todas as nossas ideias. Podemos compartilhar com os demais membros - Luiz e Karla por exemplo - que certamente tambem terão muitas contribuições.

+1!

[rafachadud]

Olá pessoal!
Como falamos antes, essa tela (https://www.figma.com/file/OSqvmNO3HSzRJSrp9Of865/New-Shop?node-id=2876%3A49405) resolveria essa issue por agora, até termos tempo de fazer um brainstorming com todas as features e discutirmos melhor. O que acham? @muguika @lucca65 @NeoVier @juramos-2020