ecomplus / admin-marketplace Goto Github PK
View Code? Open in Web Editor NEWApps marketplace for E-Com Plus admin with Vue SPA
Home Page: https://ecomplus-marketplace.netlify.app
License: GNU Affero General Public License v3.0
Apps marketplace for E-Com Plus admin with Vue SPA
Home Page: https://ecomplus-marketplace.netlify.app
License: GNU Affero General Public License v3.0
Ainda temos fetch
diretamente para a API do Market ou Store API, aqui por exemplo:
https://github.com/ecomclub/admin-marketplace/blob/master/src/views/js/Applications.js#L69
Devemos usar sempre o ecomApps
neste caso, nos casos de requisições à Store API é necessário verificar o login do admin (com ecomAuth
):
methods: {
fetchInstalledApps () {
ecomApps.fetchStoreApplications().then(apps => {
// ...
})
},
// ...
created () {
if (this.ecomAuth.isLogged()) {
this.fetchInstalledApps()
} else {
EcomAuth.once('login', this.fetchInstalledApps())
}
}
}
O código acima é só um exemplo feito às pressas, pode haver algum erro 😛
Hoje não existe aviso para min_amount, então se a loja colocar ele como float, dará erro no checkout, por isso é necessário avisar, caso coloque float ao inves de interger
🥇
Thiago, preciso que no discoverer.js os imports não sejam dinâmicos, para que eu consiga importa-los no painel da e-com plus para que funcione corretamente os inputs
Apenas um lembrete, logo depois daqui ecomplus/admin#107 as views de apps específicos poderão (e deverão) ser importadas dinamicamente.
InputText
should check field name to render type="password"
by default when admin settings field seems to be an access key, token or password.
Temos algumas views implementadas que precisam ser alteradas para usar o Ant Design Vue Pro. Gostaria de abrir uma discussão para que possamos apontar as views mais adequada pra cada view que temos hoje. Segue print de views
Arrays não estão sendo renderizado, possivelmente isso só ocorra em array dentro de array de objetos. Um exemplo é no app discounts, onde não está renderizando a lista de ids de produtos e outra de clientes.
Ja havia reportado anteriormente que booleanos que estão setados como default no schema do admin_setttings não eram salvos no data do app ao menos que fossem alterados. Porém acontece com qualquer tipo, string, number, etc..
caso feche a window do oauth (no app mercado livre) antes dela fechar sozinha, ela fica carregando o tempo todo.
Abaixo, fiz um teste na loja USETRUCCO que vem reclamando bastante disso recentemente, fui testar e conforme mostra a imagem abaixo:
Na criação do cupom, ele considera mês 05, mesmo digitando mes 04. Isso ocorre apenas ao criar o cupom, se editar, ele funciona. Então, os que relataram erro, estou sugerindo criar e conferir posteriormente a data para fazer possível edição, antes de disparar campanha e passar para cliente
Substituindo #14 (em conjunto de #17)
@matheusgnreis pode me ajudar aqui?
This app should be a part of ecomplus-admin (microfrontend, not so micro 😛), on some admin route it'll be loaded (JS only with Webpack dynamic import), then it'll also load nested routes (Vue Router) bundles dynamically (some of them).
As a reference, storefront-app has the same approach (but for storefront-template).
/#/apps
Default route must list all apps from public E-Com Plus Market API (https://github.com/ecomclub/market/issues/11), and installed apps (highlighted), listed from Store API /applications;/#/apps/:category
List apps from public E-Com Plus Market API with category
filter;/#/apps/edit/:slug
And the last view is to install/configure respective app (by slug):
slug
param value) to load (dynamic import) specific forms by app slug, for correios
we'll have a defined form, for paghiper
we'll have another...admin-settings
(if present) field to form using some JSON Schema to form parser.data
/hidden_data
;To GET and PATCH installed applications and from Store API we need My-ID and Access-Token, of course we already have those credentials on admin (from login), but they're not set globally for security reasons (and I don't like this idea), ideas to solve it?
Remember that admin-marketplace
is an SPA, not a component (can't be because of dynamic imports).
I'm thinking about using localStorage
temporarily to pass them, on startup admin-marketplace
would read those localStorage.getItem
and then clear.
Na loja 1011 o app CPM foi instalado milhares de vezes 😛
É importante antes de instalar o app verificar se já existe um instalado com o mesmo app_id
, se existir abre um prompt que informe a duplicação e solicitando a confirmação antes de instalar novamente.
ow, a parada com range de cep só funciona se colocar 00000-001
vc coloca tudo zerado ele não salva
ai ela e o mateus batendo cabeça
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
Warning
These dependencies are deprecated:
Datasource | Name | Replacement PR? |
---|---|---|
npm | babel-eslint |
|
npm | popper.js |
|
npm | vue-bootstrap-typeahead |
These updates are awaiting their schedule. Click on a checkbox to get an update now.
node
, sass
)These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.
vue
, vue-template-compiler
)@commitlint/cli
, @commitlint/config-conventional
)@vue/cli-plugin-babel
, @vue/cli-plugin-router
, @vue/cli-plugin-vuex
, @vue/cli-service
).github/workflows/create-release.yml
actions/checkout v4
actions/create-release v1
.github/workflows/publish.yml
actions/checkout v4
actions/setup-node v4
actions/cache v4
package.json
@ecomplus/apps-manager ^1.0.1
@ecomplus/auth ^1.0.1
@ecomplus/client ^2.3.1
@ecomplus/i18n ^1.32.2
@ecomplus/utils ^1.4.1
babel-runtime ^6.26.0
bootstrap-vue ^2.23.1
core-js ^3.37.1
dot-object ^2.1.5
lodash.clonedeep ^4.5.0
papaparse ^5.4.1
popper.js ^1.16.1
vue 2.6.x
vue-bootstrap-typeahead ^0.2.6
vue-cleave-component ^2.1.3
vue-markdown ^2.2.4
vue-router ^3.6.5
vue2-transitions ^0.3.0
@commitlint/cli ^17.8.1
@commitlint/config-conventional ^17.8.1
@vue/cli-plugin-babel ^4.5.19
@vue/cli-plugin-router ^4.5.19
@vue/cli-plugin-vuex ^4.5.19
@vue/cli-service ^4.5.19
@vue/eslint-config-standard ^6.1.0
babel-eslint ^10.1.0
eslint ^7.32.0
eslint-plugin-vue ^7.20.0
husky ^4.3.8
lint-staged ^11.2.6
sass ^1.77.4
sass-loader ^10.5.2
standard ^17.1.0
commit-and-tag-version ^9.6.0
vue-template-compiler 2.6.x
.nvmrc
node 16
Ao tentar instalar Pagseguro ou Wirecard, que deveria me direcionar para Wirecard ou Pagseguro, mas não está ocorrendo isso, apenas instala o aplicativo
Should have simplified UX to create discounts coupons specially.
Other custom app views as exemples.
Em teste, um lojista tentou notificações inteligentes, depois tentei o mesmo app no celular e não funcionou. Após tentar no pc funcionou. Depois testei o app pagar.me no celular e não funcionou, logo constando o problema de instalação pelo celular
Alguns lojistas tem extensas regras de frete, muitas vezes fornecidas de transportadoras. Subir todas essas regras pelo formulário do app custom shipping fica inviável, então o ideal seria subir essas regras por uma tabela.
Criando cupom e brinde que foram os testes, como input deve ser o mesmo, estou colocando aqui só o de brinde. Abaixo eu coloco a data 15/09/2020 00:00:00 até 15/09/2020 23:59:59, conforme mostra a imagem:
No PATCH do network já vemos as informações enviadas como erradas.
Abaixo vemos apenas a confirmação do erro.
Com 1 mês para frente, isso deve ter passado batido porque o mês 1, deve ser considerado como 0, como no exemplo:
new Date(2020, 0, 6)
Gera a data como janeiro, então a solução deve ser simples
On top of default "advanced" options, we should add quick config buttons for:
May set pick_up
and delivery_instructions
shipping line fields on rule object to be handled on app response.
Doesnt appear mask input for start and end date
Os inputs de tipo number
estão com limite de 99999999, se eu tento utilizar um número maior no input como é o caso do bling que onde o id da loja a ser setado tem mais de oito dígitos ex 203389598
ele deixa o input com o padrão máximo que é 99999999.
Após atualização no admin-marketplace não é mais possível minimizar as seções de configuração dos apps. Isso atrapalha um pouco a usabilidade em apps com seções longas, como o caso do discounts
If is input type password, must be an icon to click to change type password to text
Some clients asked a possibility to apply discount in to a specific category. So, we can list all categories and get all products from selected category(ies) to apply on checkout
Check installed and available app versions, when new path or minor (semver) is available, send a PATCH to update current instalation admin_settings
.
On major versions merchant may be notified to reinstall the app.
Don't PATCH fields starting with __
from admin to prevent user overwriting app internal data.
Nos fields do admin_settings
a propriedade hide
não é obrigatória, é um booleano e deve ser considerado false se não estiver definido, no entando estamos tendo um erro fatal quando isto acontece em algum app.
O EcAdminSettingsForm
preseta objetos vazios ({}
) pra facilitar no preenchimento do formulário e reatividade, o problema é que isto pode causar problemas com os apps atuais (ou exigir uma verificação a mais), então precisamor previnir isto limpando o data
/hidden_data
antes de perpetuar submit do formulário.
O método handleSubmit()
deverá vasculhar recursivamente (deep) o formData
, remover todos os empty objects e só depois emitir os eventos:
// ...
handleSubmit () {
const formData = cloneDeep({
data: this.data,
hidden_data: this.hiddenData
})
// TODO: REMOVER EMPTY OBJECTS DO `formData` AQUI
this.$emit('submit', formData)
this.$emit('update:application', {
...this.application,
...formData
})
}
// ...
Note que eu passei a clonar o objeto com
cloneDeep
('lodash.clonedeep'
) também, não está assim no código atual mas é necessário fazer isto pra não alterar o data da intância Vue (componente), queremos editar apenas o objetoformData
.
Abaixo mostra eu instalando o app e sendo direcionado para a home, ao invés de ficar no app
https://user-images.githubusercontent.com/35343551/108391255-49d94e80-71f0-11eb-9279-6a96dc35efa7.mp4
O Admin já está bastante pesado e também é complicado alterar a UI dele, ao mesmo tempo é ruim o marketplace com uma UI totalmente diferente dentro do Admin, até pra começarmos a reutilizar componentes.
Então minha sugestão é passarmos a utilizar Bootstrap 4 aqui também.
Em geral acho desnecessário já que já estaremos em um ambiente com Bootstrap 4 + jQuery (assim como no Storefront), mas for agilizar podemos usar BootstrapVue também.
Atualmente os inputs para inserção de cep no admin marketplace não permitem inserir zero à esquerda, ou seja, se você tenta salvar 00000000, ele muda e salva 10000, se tentar 01000000, ele muda e salva 1000000. Ou seja, o zero antes de qualquer número, ele não permite salvar e se cadastrar como nulo, ou seja, apenas com limite máximo, ele não considera aquele nulo como zero.
A resposta que tive é:
{"status":400,"error_code":8129998,"message":"Bad-formatted JSON body, details in user_message","user_message":{"en_us":"data should NOT have less than 1 properties","pt_br":"data não deve ter menos que 1 propriedade"},"more_info":"/applications/schema/data.json"}
Já ocorreu em mais de um aplicativo. O data está indo vazio quando a alteração é no hidden_data por exemplo e ai dá esse erro, porque precisa ter algo.
Ao editar por exemplo opção de acumulativo, o campo de data reseta, ficando com ano 1899
Ao instalar aplicativo está ficando carregamento infinito, funcionando somente se recarregar a página.
Testei Gerencianet, Bling, Jadlog e todos deram mesmo erro, então deve ser geral
Segue um modelo que acredito ser bacana conforme o Ant Design Pro, onde há apenas um filtro de categorias via seleção (OR).
Teremos uma aba que existe todos os aplicativos e outra apenas os instalados pela loja. Abaixo segue o print da aba dos aplicativos a serem visuaizados, onde no card existe a imagem que representa o app, nome do app e uma pequena descrição do mesmo. Logo abaixo um contador de curtidas do app, se acharem necessário, mas acredito que seja legal devido ao cliente procurar instalar aquele que foi mais utilizado.
Isso é apenas uma demonstração obviamente, se puderem dar opiniões sobre.
Agora sobre a aba de meus aplicativos, pensei em algo como:
Onde mostra apenas um ícone e nome do aplicativo, seguido da versão do mesmo, junto com o seu respectivo status, pois o mesmo pode estar instalado, mas desativado, logo não funcionará ou instalado e ativo para uso.
No card actions coloquei um ícone de edição juntamente com uma tooltip para facilitar o entendimento pelo lojista, assim como um icone de deletar e outro de compartilhar aplicativo. Se por ventura achar que deva ter mais icone, por padrão ele tem 4, retirei.
Ao acessar o app da lista inicial, checar se há object ID e mostrar as configurações na aba. Se não houver, esconder a aba Configurações, para que seja mostrado somente quando o app estiver instalado.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.