Skip to content

Commit

Permalink
Emailjs logic added
Browse files Browse the repository at this point in the history
  • Loading branch information
@aridane-secretsource
aridane-secretsource committed Jul 3, 2022
1 parent 848a8c7 commit 131f5ae
Show file tree
Hide file tree
Showing 2 changed files with 126 additions and 97 deletions.
183 changes: 110 additions & 73 deletions components/ContactForm/ContactForm.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import React, { useRef } from "react";
import emailjs from "@emailjs/browser";
import React from "react";
import styles from "./ContactForm.module.scss";
import { useForm } from "hooks/useForm";

const initialForm = {
name: "",
email: "",
message: "",
produccion: "",
grabacion: "",
audiovisuales: "",
mezcla: "",
produccion: "NO",
grabacion: "NO",
audiovisuales: "NO",
mezcla: "NO",
};

const validationsForm = (form) => {
Expand Down Expand Up @@ -40,9 +40,17 @@ const validationsForm = (form) => {
};

export const ContactForm = () => {
const { form, errors, loading, handleChange, handleBlur, handleSubmit } =
useForm(initialForm, validationsForm);
const {
form,
errors,
loading,
handleChange,
handleBlur,
handleCheckbox,
handleSubmit,
} = useForm(initialForm, validationsForm);

console.log(form);
return (
<div className={styles.contactFormWrapper}>
<div className={styles.contactForm}>
Expand All @@ -54,73 +62,102 @@ export const ContactForm = () => {
loading="lazy"
></iframe>
</div>
<form ref={form} onSubmit={handleSubmit} className={styles.formWrapper}>
<h1>Contacta con nosotros</h1>
<label className={styles.primaryLabel}>Nombre</label>
<input
type="text"
name="user_name"
onChange={handleChange}
onBlur={handleBlur}
/>
<label className={styles.primaryLabel}>Email</label>
<input
type="email"
name="user_email"
onChange={handleChange}
onBlur={handleBlur}
/>
<label className={styles.primaryLabel}>Mensaje</label>
<p>
Escríbenos aquí tu mensaje y te contactaremos a la mayor brevedad
posible
</p>
<textarea
name="message"
onChange={handleChange}
onBlur={handleBlur}
/>
<fieldset>
<legend>
Selecciona los servicios en los que puedas estar interesado:
</legend>
<div className={styles.checkboxWrapper}>
<div className={styles.checkbox}>
<label className={styles.secondaryLabel} htmlFor="produccion">
Producción Musical
</label>
<input type="checkbox" id="produccion" name="produccion" />
{loading ? (
<h1>'hi'</h1>
) : (
<form
ref={form}
onSubmit={(e) => handleSubmit(e)}
className={styles.formWrapper}
>
<h1>Contacta con nosotros</h1>
<label className={styles.primaryLabel}>Nombre</label>
<input
type="text"
name="name"
onChange={handleChange}
onBlur={handleBlur}
/>
<p>{errors.name}</p>
<label className={styles.primaryLabel}>Email</label>
<input
type="email"
name="email"
onChange={handleChange}
onBlur={handleBlur}
/>
<p>{errors.email}</p>
<label className={styles.primaryLabel}>Mensaje</label>
<p>
Escríbenos aquí tu mensaje y te contactaremos a la mayor brevedad
posible
</p>
<textarea
name="message"
onChange={handleChange}
onBlur={handleBlur}
/>
<p>{errors.message}</p>
<fieldset>
<legend>
Selecciona los servicios en los que puedas estar interesado:
</legend>
<div className={styles.checkboxWrapper}>
<div className={styles.checkbox}>
<label className={styles.secondaryLabel} htmlFor="produccion">
Producción Musical
</label>
<input
type="checkbox"
id="produccion"
name="produccion"
onChange={handleCheckbox}
/>
</div>
<div className={styles.checkbox}>
<label className={styles.secondaryLabel} htmlFor="grabacion">
Grabación de guitarras
</label>
<input
type="checkbox"
id="grabacion"
name="grabacion"
onChange={handleCheckbox}
/>
</div>
<div className={styles.checkbox}>
<label
className={styles.secondaryLabel}
htmlFor="audiovisuales"
>
Música para audiovisuales
</label>
<input
type="checkbox"
id="audiovisuales"
onChange={handleCheckbox}
name="audiovisuales"
/>
</div>
<div className={styles.checkbox}>
<label className={styles.secondaryLabel} htmlFor="mezcla">
Mezcla y Máster
</label>
<input
type="checkbox"
id="mezcla"
name="mezcla"
onChange={handleCheckbox}
/>
</div>
</div>
<div className={styles.checkbox}>
<label className={styles.secondaryLabel} htmlFor="grabacion">
Grabación de guitarras
</label>
<input type="checkbox" id="grabacion" name="grabacion" />
</div>
<div className={styles.checkbox}>
<label
className={styles.secondaryLabel}
htmlFor="audiovisuales"
>
Música para audiovisuales
</label>
<input
type="checkbox"
id="audiovisuales"
name="audiovisuales"
/>
</div>
<div className={styles.checkbox}>
<label className={styles.secondaryLabel} htmlFor="mezcla">
Mezcla y Máster
</label>
<input type="checkbox" id="mezcla" name="mezcla" />
</div>
</div>
</fieldset>
</fieldset>

<button type="submit">Enviar</button>
</form>
<button type="submit" onClick={handleSubmit}>
Enviar
</button>
</form>
)}
</div>
</div>
);
Expand Down
40 changes: 16 additions & 24 deletions hooks/useForm.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useState } from "react";
import emailjs from "emailjs-com";
import emailjs from "@emailjs/browser";

export const useForm = (initialForm, validateForm) => {
const [form, setForm] = useState(initialForm);
Expand All @@ -9,11 +9,20 @@ export const useForm = (initialForm, validateForm) => {
const handleChange = (e) => {
const { name, value } = e.target;
setForm({
...form, //copia de la variable de estado
...form,
[name]: value,
});
};

const handleCheckbox = (e) => {
const { name, checked } = e.target;
{
checked
? setForm({ ...form, [name]: "SÍ" })
: setForm({ ...form, [name]: "NO" });
}
};

const handleBlur = (e) => {
handleChange(e);
setErrors(validateForm(form));
Expand Down Expand Up @@ -49,6 +58,10 @@ export const useForm = (initialForm, validateForm) => {
name: "",
email: "",
message: "",
produccion: "",
grabacion: "",
audiovisuales: "",
mezcla: "",
}),
5000
);
Expand All @@ -63,28 +76,7 @@ export const useForm = (initialForm, validateForm) => {
loading,
handleChange,
handleBlur,
handleCheckbox,
handleSubmit,
};
};

// const sendEmail = (e) => {
// e.preventDefault();
// console.log(e.target);

// emailjs
// .sendForm(
// `${process.env.NEXT_PUBLIC_SERVICE_ID}`,
// `${process.env.NEXT_PUBLIC_TEMPLATE_ID}`,
// form.current,
// `${process.env.NEXT_PUBLIC_PUBLIC_KEY}`
// )
// .then(
// (result) => {
// console.log(result.text);
// },
// (error) => {
// console.log(error.text);
// }
// );
// e.target.reset();
// };

1 comment on commit 131f5ae

@vercel
Copy link

@vercel vercel bot commented on 131f5ae Jul 3, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ratones-nextjs – ./

ratones-nextjs-git-main-aridanemartin.vercel.app
ratones-nextjs.vercel.app
ratones-nextjs-aridanemartin.vercel.app

Please sign in to comment.