Adicionado tela de solicitação

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "emmet.includeLanguages":{
+        "jekyll": "html",
+        "scss": "css"
+  }
+}

README.md

@@ -30,13 +30,15 @@ Confirme os dados do estabelecimento.
 - [X] Adicionar itens.
 - [X] Remover itens.
 - [X] Salvar itens na solicitação de compra
-- [ ] Pagina de envio da solicitação de compra
+- [X] Pagina de envio da solicitação de compra
+  - [ ] Envio da solicitação por whatsapp
+  - [ ] Envio da solicitação por e-mail
 - [ ] Cadastrar estabelecimentos com dados reais.
-- [ ] Ajustar os formulários como a página de cadastro
+- [X] Ajustar os formulários como a página de cadastro
   - [X] Seus dados
   - [X] Estabelecimento
   - [X] Itens
-  - [ ] Eviar solicitação de compra
+  - [X] Eviar solicitação de compra
 - [X] Verificar o serviço [Form Submit](https://formsubmit.co/)
 
 ## Rodar localmente

_config.yml

@@ -13,13 +13,15 @@ repository: matheus-vieira/solicitacao-compra
 github: [metadata]
 
 incremental: true
+port: 8081
 host: 0.0.0.0
 
 # Fill in your Google Analytics ID to track your website using GA
 #google_analytics: ""
 
 author:
   name: Matheus Costa Vieira
+  email: [email protected]
 
 plugins:
   - jekyll-github-metadata

_includes/js/solicitacao.js

@@ -27,6 +27,9 @@ const solicitacao = (function Solicitacao(d) {
     addContato: defineProp(c => change({ contato: c })),
     addEstabelecimento: defineProp(e => change({ estabelecimento: e })),
     addItens: defineProp(i => change({ itens: i })),
-    getSolicitacao: defineProp(getSolicitacao)
+    getSolicitacao: defineProp(getSolicitacao),
+    getContato: defineProp(() => getSolicitacao().contato),
+    getEstabelecimento: defineProp(() => getSolicitacao().estabelecimento),
+    getItens: defineProp(() => getSolicitacao().itens)
   });
 })();

_includes/solicitar/contato.html

@@ -0,0 +1,18 @@
+<script type="text/html" id="contato-data-tpl">
+    <div class="Box-row"><strong>Nome: </strong>{nome}</div>
+    <div class="Box-row"><strong>Celular: </strong>{celular}</div>
+    <div class="Box-row"><strong>E-mail: </strong>{email}</div>
+</script>
+<dl class="Box Box--condensed">
+    <div class="Box-header">
+        Seus dados
+    </div>
+    <div class="Box Box--condensed">
+        <div id="contato-data">
+            <div class="Box-row"><strong>Sem informações de contato</strong></div>
+        </div>
+    </div>
+    <div class="Box-footer">
+        <a href="{{ '/contato' | prepend: site.baseurl }}">Editar seus dados</a>
+    </div>
+</dl>

_includes/solicitar/contato.js

@@ -0,0 +1,9 @@
+const buildContato = function(ev) {
+  const data = solicitacao.getContato();
+  if (data) {
+    const toRemove = contatoDataHolder.querySelector(".Box-row");
+    contatoDataHolder.removeChild(toRemove);
+    addHtml(contatoDataHolder, contatoDataTpl, data);
+  }
+};
+window.addEventListener("load", buildContato);

_includes/solicitar/email.js

@@ -0,0 +1,26 @@
+const emailFormTpl = `<form method="POST" action="https://formsubmit.co/{estabelecimento.email}">
+<input type="hidden" name="_subject" value="Solicitação de Compra!">
+<input type="hidden" name="_cc" value="{{ author.email }}">
+<input type="hidden" name="_next" value="{{ '/obrigado/' | absolute_url }}">
+<input type="hidden" name="_template" value="box">
+<input type="email" name="email" placeholder="{contato.em-mail}">
+<textarea name="message">{message}</textarea>
+</form>`;
+const aEmailHandler = function aEmailHandler(ev) {
+  try {
+    console.log("email handler");
+    const sol = solicitacao.getSolicitacao();
+    if (!sol || !sol.contato || !sol.estabelecimento || !sol.itens)
+        throw new Error("informações faltantes");
+
+
+    throw new Error("email");
+  } catch (error) {
+    ev.preventDefault();
+    console.error(error);
+    return false;
+  }
+};
+document
+  .getElementById("aEmail")
+  .addEventListener("click", aEmailHandler, false);

_includes/solicitar/estabelecimento.html

@@ -0,0 +1,22 @@
+<script type="text/html" id="estabelecimento-data-tpl">
+    <div class="Box-row"><strong>Nome: </strong>{Nome}</div>
+    <div class="Box-row"><strong>Telefone: </strong>{Telefone}</div>
+    <div class="Box-row"><strong>Whatsapp: </strong>{Whatsapp}</div>
+    <div class="Box-row"><strong>E-mail: </strong>{Email}</div>
+    <div class="Box-row"><strong>Endereço: </strong>{end}</div>
+</script>
+<dl class="Box Box--condensed">
+    <div class="Box-header">
+        Estabelecimento selecionado
+    </div>
+    <div class="Box Box--condensed">
+        <div id="estabelecimento-data">
+            <div class="Box-row"><strong>Sem estabelecimento selecionado</strong></div>
+        </div>
+    </div>
+    <div>
+    </div>
+    <div class="Box-footer">
+        <a href="{{ '/estabelecimento' | prepend: site.baseurl }}">Editar estabelecimento</a>
+    </div>
+</dl>

_includes/solicitar/estabelecimento.js

@@ -0,0 +1,9 @@
+const buildEstabelecimento = function(ev) {
+  const data = solicitacao.getEstabelecimento();
+  if (data) {
+    const toRemove = estabelecimentoDataHolder.querySelector(".Box-row");
+    estabelecimentoDataHolder.removeChild(toRemove);
+    addHtml(estabelecimentoDataHolder, estabelecimentoDataTpl, data)
+  }
+};
+window.addEventListener("load", buildEstabelecimento);

_includes/solicitar/itens.html

@@ -0,0 +1,22 @@
+<script type="text/html" id="itens-data-tpl">
+<div class="Box-row">
+    <strong>Item {idx}: </strong>
+    <span id="item-quantidade">{quantidade}</span>
+    <span id="item-unidade">{unidade}</span>
+    de
+    <span id="item-nome">{nome}</span>
+</div>
+</script>
+<dl class="Box Box--condensed">
+    <div class="Box-header">
+        Itens solicitados
+    </div>
+    <div class="Box Box--condensed">
+        <div id="itens-data">
+            <div class="Box-row"><strong>Sem itens selecionados</strong></div>
+        </div>
+    </div>
+    <div class="Box-footer">
+        <a href="{{ '/itens' | prepend: site.baseurl }}">Editar Itens</a>
+    </div>
+</dl>

_includes/solicitar/itens.js

@@ -0,0 +1,11 @@
+const buildItens = function(ev) {
+  const data = solicitacao.getItens();
+  if (data && data.length) {
+    const toRemove = itensDataHolder.querySelector(".Box-row");
+    itensDataHolder.removeChild(toRemove);
+    data.forEach((i, idx) =>
+      addHtml(itensDataHolder, itensDataTpl, Object.assign(i, { idx: idx + 1 }))
+    );
+  }
+};
+window.addEventListener("load", buildItens);

_includes/solicitar/main.html

@@ -0,0 +1,15 @@
+{% include js/controller.js %}
+{% include js/define_prop.js %}
+{% include js/guid.js %}
+{% include js/supplant.js %}
+{% include js/insertAdjacent.js %}
+{% include js/addHtml.js %}
+{% include js/domHelpers.js %}
+{% include js/solicitacao.js %}
+{% include itens/Item.js %}
+{% include solicitar/variaveis.js %}
+{% include solicitar/contato.js %}
+{% include solicitar/estabelecimento.js %}
+{% include solicitar/itens.js %}
+{% include solicitar/email.js %}
+{% include solicitar/whatsapp.js %}

_includes/solicitar/scripts.html

@@ -0,0 +1,7 @@
+{% capture scripts %}
+(function () {
+{% include solicitar/main.html %}
+}());
+{% endcapture %}
+
+<script>{{ scripts | uglify | strip }}</script>

_includes/solicitar/variaveis.js

@@ -0,0 +1,6 @@
+const contatoDataTpl = tpl("contato-data-tpl"),
+  itensDataTpl = tpl("itens-data-tpl"),
+  estabelecimentoDataTpl = tpl("estabelecimento-data-tpl"),
+  contatoDataHolder = byId("contato-data"),
+  estabelecimentoDataHolder = byId("estabelecimento-data"),
+  itensDataHolder = byId("itens-data");

_includes/solicitar/whatsapp.js

@@ -0,0 +1,13 @@
+const aWhatsappHandler = function aWhatsappHandler(ev) {
+  try {
+      console.log("whatsapp handler");
+      throw new Error("whatsapp");
+  } catch (error) {
+    ev.preventDefault();
+    console.error(error);
+    return false;
+  }
+};
+document
+  .getElementById("aWhatsapp")
+  .addEventListener("click", aWhatsappHandler, false);

assets/json/estabelecimentos.json

@@ -1,6 +1,7 @@
 [
     {
         "Nome": "Mercado Bizzoto",
+        "Email": "[email protected]",
         "Telefone": "41988024599",
         "Whatsapp": "41988024599",
         "Endereço": {
@@ -13,6 +14,7 @@
     },
     {
         "Nome": "Supermercado condor",
+        "Email": "[email protected]",
         "Telefone": "4138882213",
         "Whatsapp": "",
         "Endereço": {

solicitar/index.md

@@ -2,12 +2,14 @@
 
 Aqui estáo seu resumo de compra
 
-> Seus dados
-> Estabelecimento
-> Items a solicitar
+{% include solicitar/contato.html %}
 
-Encaminhar
+{% include solicitar/estabelecimento.html %}
 
-[Whatsapp](link)
+{% include solicitar/itens.html %}
 
-[E-mail](mailto:[email protected])
+## Encaminhar
+
+[Whatsapp]({{ '/obrigado/' | absolute_url }}){: #aWhatsapp } | [E-mail]({{ '/obrigado/' | absolute_url }}){: #aEmail }
+
+{% include solicitar/scripts.html %}