Merge pull request #46 from deco-sites/fix/home

fix: ajustes parte lV

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<HTMLInputElement>('.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<HTMLFormElement> = 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<HTMLInputElement>('input');
+      const loadingElement = news?.querySelector<HTMLElement>('.is-loading');
+      const message = news?.querySelector<HTMLElement>('.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(
           <h4
             class={clx(
               `mobile:max-w-[100%] max-w-[90%] mobile:text-32 md:text-48 mobile:mt-[50px]
-          text-base-150 font-black font-archimoto-medium ${tiled} ? "text-2xl lg:text-3xl" : "text-lg"`,
+            text-base-150 font-black font-archimoto-medium ${tiled} ? "text-2xl lg:text-3xl" : "text-lg"`,
             )}
           >
             {content?.title}
@@ -76,26 +160,36 @@ function Newsletter(
             </div>
           )}
       </div>
-      <div class="flex flex-col">
+      <div class="flex flex-col relative news">
         <form
           class="form-control"
           onSubmit={handleSubmit}
         >
-          <div class="flex flex-wrap gap-[18px]">
+          <div class="grid grid-cols-2-auto gap-[18px] gap-y-[10px]">
             <input
+              onBlur={handleOnBlur}
+              onChange={handleOnChange}
+              id="email"
               name="email"
-              class="bg-[#ffffff] flex-auto md:flex-none input input-bordered md:w-[273px] bg-white text-base-content font-noto-sans rounded-[90px] text-14 n1-text-base-400"
+              type="email"
+              class={clx(`n1-input--error bg-[#ffffff] flex-auto md:flex-none input input-bordered md:w-[273px] bg-white text-base-content font-noto-sans 
+                rounded-[90px] text-14 n1-text-base-400`)}
               placeholder={content?.form?.placeholder || "Digite seu email"}
             />
+            <span class="row-[2] hidden text-error text-[12px] leading-[15.6px]">
+              Insira um e-mail válido
+            </span>   
             <button
               type="submit"
-              class="btn disabled:loading w-[144px] md:w-[123px] border-0 bg-accent n1-btn-header-item--rounded text-16 font-archimoto-medium pt-[3px] uppercase"
-              disabled={loading}
+              class={clx(`btn disabled:loading w-[144px] md:w-[123px] border-0 bg-accent n1-btn-header-item--rounded 
+                text-16 font-archimoto-medium pt-[3px] uppercase hover:bg-[#F8BC33] duration-300`)}
             >
               {content?.form?.buttonText || "Inscrever"}
             </button>
           </div>
         </form>
+        <div class="hidden is-loading"></div> 
+        <span class="is-sucess hidden font-noto-sans text-secondary mobile:text-14 md:text-16">E-mail enviado com sucesso!</span>
         {content?.form?.helpText && (
           <div
             class="text-sm"

components/ui/CasesComponentDesktop.tsx

@@ -202,11 +202,11 @@ function CasesComponentDesktop({ settingsImage }: Props) {
             <>
               <a
                 href={`${href ? href : "javascript:void(0)"}`}
-                class={`relative n1-cases-card ${alt ? 'is-' + alt : '' } notebook:max-w-[500px] ${
+                class={`relative n1-cases-card ${alt ? 'is-' + alt : '' } notebook:max-w-[560px] ${
                   index === 0 ? "is-active" : ""
                 } ${
                   href ? "cursor-pointer" : "cursor-grab"
-                } [transition:all_.375s_linear] md:w-0 mobile:mb-[10px]`}
+                } [transition:all_.575s_linear] md:w-0 mobile:mb-[10px]`}
                 onMouseLeave={handleMouserHover}
                 style={{
                   height: `${

components/ui/LinkTelephoneWithOptionArrow.tsx

@@ -24,11 +24,11 @@ function LinkTelephoneWithOptionArrow(
       target="_blank"
       aria-label="Converse no WhatsApp"
       alt="Converse no WhatsApp"
-      class={clx(`${width ? `mobile:my-0 mobile:mx-auto` : "mobile:w-[130px]"} 
-                mobile:relative mobile:py-[7px] mobile:mr-[20px] px-[10px] py-[10px] group flex items-center relative
-                text-16 uppercase bg-accent n1-btn-header-item--rounded border-none w-[142px] ml-[40px] ${
-        customClass ? customClass : ""
-      }`)}
+      class={
+        clx(`${width ? `mobile:my-0 mobile:mx-auto` : "mobile:w-[130px]"} 
+          mobile:relative mobile:py-[7px] mobile:mr-[20px] px-[10px] py-[10px] group flex items-center relative
+          text-16 uppercase bg-accent n1-btn-header-item--rounded border-none w-[142px] ml-[40px] hover:bg-[#F8BC33] duration-300
+          ${customClass ? customClass : ""}`)}
       style={{ width: `${width ? width + "px" : "130px"}` }}
     >
       <span

fresh.gen.ts

@@ -4,6 +4,7 @@
 
 import * as $_app from "./routes/_app.tsx";
 import * as $api_contactform from "./routes/api/contactform.tsx";
+import * as $api_newsletterform from "./routes/api/newsletterform.tsx";
 import * as $AddToCartButton_linx from "./islands/AddToCartButton/linx.tsx";
 import * as $AddToCartButton_nuvemshop from "./islands/AddToCartButton/nuvemshop.tsx";
 import * as $AddToCartButton_shopify from "./islands/AddToCartButton/shopify.tsx";
@@ -38,6 +39,7 @@ const manifest = {
   routes: {
     "./routes/_app.tsx": $_app,
     "./routes/api/contactform.tsx": $api_contactform,
+    "./routes/api/newsletterform.tsx": $api_newsletterform,
   },
   islands: {
     "./islands/AddToCartButton/linx.tsx": $AddToCartButton_linx,

routes/api/newsletterform.tsx

@@ -0,0 +1,43 @@
+// TODO: Why not using actions?
+
+import { Handlers } from "$fresh/server.ts";
+import { PORTAL_SUBDOMAIN } from "../../constants.tsx";
+// Add here the scripts you want to proxy
+
+export interface ConcactForm {
+  nameUser: string;
+  nameCompany: string;
+  phoneNumber: string;
+  email: string;
+  message: string;
+  commercial: boolean;
+  partnership: boolean;
+  others: boolean;
+  loja: string;
+}
+
+export const handler: Handlers = {
+  POST: async (req) => {
+    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,
+    });
+  },
+};

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 && (
               <div
@@ -182,7 +177,7 @@ export default function HeroFlats(
               </div>
             )}
             {descriptionAnimation && (
-              <div class="n1-typing mobile:[&_*]:!text-24">
+              <div class="n1-typing mobile:[&_*]:!text-24 md:mt-[12px]">
                 <span
                   class="text-animation--typing mobile:h-[28.8px] h-[88px] font-archimoto-medium grid text-secondary font-black text-[80px] leading-[88px] overflow-hidden"
                   data-write={descriptionAnimation}
@@ -216,21 +211,17 @@ export default function HeroFlats(
                     <a
                       key={item?.id}
                       id={item?.id}
-                      href={item?.href}
-                      target={item && item.href && item.href.includes("http")
-                        ? "_blank"
-                        : "_self"}
                       class={clx(
                         `mobile:py-[8px] mobile:px-[6px] lg:w-[240px] lg:min-w-[240px] px-[20px] py-[24px] flex flex-col items-center 
-                        text-center group relative overflow-hidden rounded-[10px] hover:bg-gradient-to-r transition-all duration-300 ease-out 
+                        text-center relative overflow-hidden rounded-[10px] 
                         ${
                           item.variant === "Reverse"
                             ? "bg-secondary text-white"
                             : "text-[#ffffff] bg-[linear-gradient(161deg,_rgba(255,_255,_255,_0.10)_0%,_rgba(255,_255,_255,_0.05)_101.7%)] backdrop-filter backdrop-blur-[18px]"
                         }`,
                       )}
                     >
-                      <span class="ease absolute right-0 -mt-12 h-32 w-8 translate-x-12 rotate-12 transform bg-white opacity-10 transition-all duration-1000 group-hover:-translate-x-40">
+                      <span class="ease absolute right-0 -mt-12 h-32 w-8 translate-x-12 rotate-12 transform bg-white opacity-10">
                       </span>
                       <span
                         class={`mobile:text-20 mobile:leading-[24px] text-secondary font-bold font-archimoto-medium text-50 relative`}

sections/Content/TextWithImageAnimation.tsx

@@ -221,7 +221,7 @@ function TextWithImageAnimation(
                   class={clx(
                     `mobile:col-[2] col-[3] row-[2] flex items-center justify-center relative
                     before:content-[""] before:border-[0.268px] before:border-solid before:border-[rgba(198,_198,_198,_.3)] 
-                    before:opacity-20 before:w-[70%] before:h-[85%] before:absolute before:rounded-[50%] before:top-[25px]
+                    before:opacity-20 before:w-[85%] before:h-[100%] before:absolute before:rounded-[50%] before:top-[10px]
                     after:content-[""] after:border-[0.268px] after:border-solid after:border-[rgba(198,_198,_198,_.3)] 
                     after:opacity-20 after:w-[140%] after:h-[160%] after:absolute after:rounded-[50%] after:-top-[55px]                        
                   `,

tailwind.css

@@ -235,6 +235,23 @@
     animation: overlayText .275s linear forwards;
   }
 
+  .is-loading{
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    border: 5px dotted #cacaca;
+    border-right-color: rgba(255, 255 ,255, .17);
+    position: absolute;
+    left: 25%;
+    top: 10px;    
+    animation: loading 1s infinite;    
+  }
+
+  @keyframes loading {
+    to {
+      transform: rotate(360deg);
+    }
+  }
 
   @keyframes overlayText {
     0%{background: transparent;}