From 5c07c58b108082a1b80e1b090b151e959e4bb311 Mon Sep 17 00:00:00 2001 From: rodolfo-ferreira Date: Wed, 10 Apr 2024 16:39:03 -0300 Subject: [PATCH] fix: ajustes parte lV MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit enviar dados newsletter p/ master data; validação do campo da newsletter;hover nos botões accent; diminuição do hover cases de sucesso --- components/footer/Newsletter.tsx | 124 +++++++++++++++--- components/ui/CasesComponentDesktop.tsx | 4 +- .../ui/LinkTelephoneWithOptionArrow.tsx | 10 +- fresh.gen.ts | 2 + routes/api/newsletterform.tsx | 43 ++++++ sections/Content/Hero.tsx | 15 +-- sections/Content/TextWithImageAnimation.tsx | 2 +- tailwind.css | 17 +++ 8 files changed, 182 insertions(+), 35 deletions(-) create mode 100644 routes/api/newsletterform.tsx diff --git a/components/footer/Newsletter.tsx b/components/footer/Newsletter.tsx index 8424f31..75848ac 100644 --- a/components/footer/Newsletter.tsx +++ b/components/footer/Newsletter.tsx @@ -1,4 +1,3 @@ -import { useSignal } from "@preact/signals"; import { invoke } from "$store/runtime.ts"; import type { JSX } from "preact"; import { clx } from "$store/sdk/clx.ts"; @@ -26,20 +25,105 @@ function Newsletter( { content, layout = {} }: Props, ) { const { tiled = false } = layout; - const loading = useSignal(false); + function validateEmail(target: HTMLElement, typeEvent?:string){ + if (!target) return; + + console.log('typeEvent ----> ', typeEvent) + + let field; + + if( typeEvent === 'submit' ){ + field = target?.querySelector('.n1-input--error'); + } else { + field = target + } + + const inputError = field && field?.nextElementSibling; + + if( field && field instanceof HTMLInputElement ){ + if(field?.value === ''){ + field?.classList.add("is-active"); + inputError?.classList.remove("hidden"); + + return null; + } else { + field?.classList.remove("is-active"); + inputError?.classList.add("hidden"); + + return field.value; + } + } + } + + function handleOnChange(e: Event){ + const { target } = e; + if (!target) return; + if (target && target instanceof HTMLInputElement) { + const inputField = target; + + inputField && validateEmail(inputField); + } + } + + function handleOnBlur(e: Event){ + const { target } = e; + if (!target) return; + if (target && target instanceof HTMLInputElement) { + const inputField = target; + + inputField && validateEmail(inputField); + } + } + const handleSubmit: JSX.GenericEventHandler = async (e) => { e.preventDefault(); + + const { target } = e; + const typeEvent = e.type; - try { - loading.value = true; + if (!target) return; - const email = - (e.currentTarget.elements.namedItem("email") as RadioNodeList)?.value; + if (target && target instanceof HTMLElement) { + const email = validateEmail(target, typeEvent); - await invoke.vtex.actions.newsletter.subscribe({ email }); - } finally { - loading.value = false; + const news = target.closest('.news'); + const inputElement = news?.querySelector('input'); + const loadingElement = news?.querySelector('.is-loading'); + const message = news?.querySelector('.is-sucess'); + + console.log('isValidEmail --> ', JSON.stringify({email})) + + if( email ){ + try { + loadingElement?.classList.remove('hidden'); + + const response = await fetch("/api/newsletterform", { + method: "POST", + body: JSON.stringify({email}), + headers: { + "content-type": "application/json", + "accept": "application/json", + }, + }); + + } catch(err){ + loadingElement?.classList.add('hidden'); + console.log('error: ', err.message) + } finally { + + if(inputElement instanceof HTMLInputElement) inputElement.value = ''; + target?.classList.add('hidden'); + loadingElement?.classList.add('hidden'); + message?.classList.remove('hidden'); + + setTimeout(()=>{ + target.classList.remove('hidden'); + message?.classList.add('hidden'); + }, 5000) + + } + } } }; @@ -58,7 +142,7 @@ function Newsletter(

{content?.title} @@ -76,26 +160,36 @@ function Newsletter( )} -
+
-
+
+
+ + {content?.form?.helpText && (
{ + const SUBDOMAIN = PORTAL_SUBDOMAIN; + + const data = await req.json(); + + const response = await fetch(SUBDOMAIN + "/api/dataentities/NE/documents", { + method: "POST", + body: JSON.stringify(data), + headers: { + "content-type": "application/json", + "accept": "application/json", + }, + }); + + const headers = new Headers(response.headers); + headers.set("access-control-allow-origin", "*"); + + return new Response(response.body, { + status: response.status, + statusText: response.statusText, + headers, + }); + }, +}; diff --git a/sections/Content/Hero.tsx b/sections/Content/Hero.tsx index e6aa0a1..223d84e 100644 --- a/sections/Content/Hero.tsx +++ b/sections/Content/Hero.tsx @@ -166,11 +166,6 @@ export default function HeroFlats( : "mobile:w-full" }`, )} - // class={`mx-6 lg:mx-auto lg:w-full space-y-4 gap-4 ${ - // image - // ? "lg:w-1/2 lg:max-w-xl" - // : "flex flex-col items-center justify-center lg:max-w-3xl" - // }`} > {title && (
)} {descriptionAnimation && ( -
+
- +