Feat/contact responses (#215)

* extract common tasks aliases

* feat: contact response pages

* Update config.exs

---------

Co-authored-by: Zoey de Souza Pessanha <[email protected]>

assets/css/contact.scss

@@ -2,9 +2,38 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    max-width: 100vw;
     margin-bottom: 40px;
     padding: 80px 120px;
 
+    .contact-message {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        width: 50%;
+
+        h2 {
+            margin-bottom: 20px;
+        }
+
+        .text-black-80 {
+            margin-bottom: 20px;
+        }
+
+        .return-button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #0064C8;
+            border-radius: 4px;
+            gap: 8px;
+            padding: 16px 24px;
+            width: 267px;
+            cursor: pointer;
+        }
+
+    }
+
     .contact-form {
         width: 50%;
         .form-inputs {
@@ -51,4 +80,24 @@
             }
         }
     }
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+    .contact-area {
+        margin: 20px 40px;
+    }
+}
+
+@media (min-width: 360px) and (max-width: 768px) {
+    .contact-area {
+        display: flex;
+        padding: 10px 5px;
+        flex-direction: column;
+        text-align: center;
+        gap: 40px;
+
+        .contact-message {
+            align-items: center;
+        }
+    }
 }

lib/pescarte_web/controllers/contact_controller.ex

@@ -6,6 +6,16 @@ defmodule PescarteWeb.ContactController do
   @sender_email Application.compile_env!(:pescarte, [PescarteWeb, :sender_email])
   @receiver_email Application.compile_env!(:pescarte, [PescarteWeb, :receiver_email])
 
+  def success(conn, _params) do
+    current_path = conn.request_path
+    render(conn, :success, current_path: current_path, error_message: nil)
+  end
+
+  def failed(conn, _params) do
+    current_path = conn.request_path
+    render(conn, :failed, current_path: current_path, error_message: nil)
+  end
+
   def show(conn, _params) do
     changeset = ContactForm.changeset(%{})
     current_path = conn.request_path
@@ -21,7 +31,7 @@ defmodule PescarteWeb.ContactController do
              {:ok, _} <- send_confirmation_email(client, contact_form) do
           conn
           |> put_flash(:info, "Email enviado com sucesso!")
-          |> redirect(to: ~p"/")
+          |> redirect(to: ~p"/contato/success")
         else
           {:error, reason} ->
             Logger.error("""
@@ -32,13 +42,13 @@ defmodule PescarteWeb.ContactController do
 
             conn
             |> put_flash(:error, "Erro ao enviar email.")
-            |> redirect(to: ~p"/")
+            |> redirect(to: ~p"/contato/failed")
         end
 
       {:error, _changeset} ->
         conn
         |> put_flash(:error, "Erro na validação do formulário.")
-        |> redirect(to: ~p"/")
+        |> redirect(to: ~p"/contato/failed")
     end
   end
 

lib/pescarte_web/router.ex

@@ -64,6 +64,8 @@ defmodule PescarteWeb.Router do
 
     scope "/contato" do
       get "/", ContactController, :show
+      get "/success", ContactController, :success
+      get "/failed", ContactController, :failed
       post "/", ContactController, :send_email
     end
   end

lib/pescarte_web/templates/contact_html/failed.html.heex

@@ -0,0 +1,24 @@
+<main>
+  <div class="contact-area">
+    <div class="contact-message">
+      <.text size="h2" color="text-blue-100">
+        Ops! Algo deu errado...
+      </.text>
+      <.text size="lg" color="text-black-80">
+        Não pudemos receber sua mensagem por conta de um erro. Mas não se preocupe, você pode tentar novamente mais tarde!
+      </.text>
+
+      <DesignSystem.link navigate="/" styless>
+        <div class="return-button">
+          <img src={~p"/images/contato/fish.png"} />
+          <.text size="base" color="text-white-100">
+            Voltar para a homepage
+          </.text>
+        </div>
+      </DesignSystem.link>
+    </div>
+    <img src={~p"/images/contato/fishing2.svg"} />
+  </div>
+
+  <PescarteWeb.DesignSystem.GetInTouch.render />
+</main>

lib/pescarte_web/templates/contact_html/success.html.heex

@@ -0,0 +1,24 @@
+<main>
+  <div class="contact-area">
+    <div class="contact-message">
+      <.text size="h2" color="text-blue-100">
+        Recebemos sua mensagem!
+      </.text>
+      <.text size="lg" color="text-black-80">
+        Agradecemos seu contato. Em breve, um membro da nossa equipe irá lhe retornar. Enquanto isso, fique à vontade para conferir mais conteúdos no nosso site.
+      </.text>
+
+      <DesignSystem.link navigate="/" styless>
+        <div class="return-button">
+          <img src={~p"/images/contato/fish.png"} />
+          <.text size="base" color="text-white-100">
+            Voltar para a homepage
+          </.text>
+        </div>
+      </DesignSystem.link>
+    </div>
+    <img src={~p"/images/contato/fishing.svg"} />
+  </div>
+
+  <PescarteWeb.DesignSystem.GetInTouch.render />
+</main>