Skip to content

Commit

Permalink
feat: varias alterações e adição do zoom na PDP
Browse files Browse the repository at this point in the history
  • Loading branch information
@caioprogrammer
caioprogrammer committed Apr 24, 2024
1 parent 9cdefd0 commit 7f7ff4a
Show file tree
Hide file tree
Showing 16 changed files with 328 additions and 219 deletions.
12 changes: 9 additions & 3 deletions components/footer/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,7 @@ function Footer({
<Divider />
<div class="flex flex-col items-center md:items-start md:flex-row md:justify-between md:flex-wrap lg:flex-nowrap gap-8 lg:gap-12">
<div class="flex flex-col">
<div class="flex flex-row gap-4">
<a href="tel://554730271106" target={"_blank"} class="flex flex-row gap-4 mb-2">
<svg
width="32"
height="32"
Expand All @@ -259,9 +259,15 @@ function Footer({
</g>
</svg>
<h2 class="text-lg telefone-contatos">
47 3027-1106 / 47 3027-1106
47 3027-1106
</h2>
</div>
</a>
<a target="_blank" href="https://api.whatsapp.com/send?phone=554730271106&text=Contato%20via%20E-commerce%20World%20Tools" class="flex flex-row gap-4">
<svg height="32" fill="#164195" width="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 3.5C18.25 1.25 15.2 0 12 0 5.41 0 0 5.41 0 12c0 2.11.65 4.11 1.7 5.92L0 24l6.33-1.55C8.08 23.41 10 24 12 24c6.59 0 12-5.41 12-12 0-3.19-1.24-6.24-3.5-8.5M12 22c-1.78 0-3.48-.59-5.01-1.49l-.36-.22-3.76.99 1-3.67-.24-.38C2.64 15.65 2 13.88 2 12 2 6.52 6.52 2 12 2c2.65 0 5.2 1.05 7.08 2.93S22 9.35 22 12c0 5.48-4.53 10-10 10m5.5-7.55c-.3-.15-1.77-.87-2.04-.97s-.47-.15-.67.15-.77.97-.95 1.17c-.17.2-.35.22-.65.07s-1.26-.46-2.4-1.48c-.89-.79-1.49-1.77-1.66-2.07s-.02-.46.13-.61c.13-.13.3-.35.45-.52s.2-.3.3-.5.05-.37-.02-.52c-.08-.15-.68-1.62-.93-2.22-.24-.58-.49-.5-.67-.51-.17-.01-.37-.01-.57-.01s-.52.08-.8.37c-.27.3-1.04 1.03-1.04 2.5s1.07 2.89 1.22 3.09 2.11 3.22 5.1 4.51c.71.31 1.27.49 1.7.63.72.23 1.37.2 1.88.12.57-.09 1.77-.72 2.02-1.42s.25-1.3.17-1.42c-.07-.13-.27-.21-.57-.36"/></svg>
<h2 class="text-lg telefone-contatos">
47 3027-1106
</h2>
</a>
<div class="flex flex-row">
<p class="endereco-new">
Rua Desembargador Guilherme Abry, 667 - Saguaçú -
Expand Down
287 changes: 232 additions & 55 deletions components/footer/Newsletter.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,112 @@
// import { useSignal } from "@preact/signals";
// import { invoke } from "$store/runtime.ts";
// import type { JSX } from "preact";

// export interface Form {
// placeholder?: string;
// buttonText?: string;
// /** @format html */
// helpText?: string;
// }

// export interface Props {
// content: {
// title?: string;
// /** @format textarea */
// description?: string;
// form?: Form;
// };
// layout?: {
// tiled?: boolean;
// };
// }

// function Newsletter(
// { content, layout = {} }: Props,
// ) {
// const { tiled = false } = layout;
// const loading = useSignal(false);

// const handleSubmit: JSX.GenericEventHandler<HTMLFormElement> = async (e) => {
// e.preventDefault();

// try {
// loading.value = true;
// const name = "";
// const email =
// (e.currentTarget.elements.namedItem("email") as RadioNodeList)?.value;
// await invoke.wake.actions.newsletter.register({ email, name });

// // await invoke.vtex.actions.newsletter.subscribe({ email });
// } finally {
// setTimeout(() => {
// loading.value = false;
// }, 3000);
// }
// };

// return (
// <div
// class={`flex ${
// tiled
// ? "flex-col gap-4 lg:flex-row lg:w-full lg:justify-between"
// : "flex-col gap-4"
// }`}
// >
// <div class="flex flex-col gap-4">
// {content?.title && (
// <h3 class={tiled ? "text-2xl lg:text-3xl" : "text-lg"}>
// {content?.title}
// </h3>
// )}
// {content?.description && <div>{content?.description}</div>}
// </div>
// <div class="flex flex-col gap-4">
// <form
// class="form-control"
// onSubmit={handleSubmit}
// >
// <div class="flex flex-wrap gap-3">
// <input
// name="email"
// class="flex-auto md:flex-none input input-bordered md:w-80 text-base-content"
// placeholder={content?.form?.placeholder || "Digite seu email"}
// />
// <button
// type="submit"
// class="btn disabled:loading"
// disabled={loading}
// >

// {loading.value
// ? (
// <span>
// Assinado com sucesso!{" "}
// <span class="loading loading-spinner loading-xs" />
// </span>
// )
// : <span>{content?.form?.buttonText || "Inscrever"}</span>
// }

// </button>
// </div>
// </form>
// {content?.form?.helpText && (
// <div
// class="text-sm"
// dangerouslySetInnerHTML={{ __html: content?.form?.helpText }}
// />
// )}
// </div>
// </div>
// );
// }

// export default Newsletter;



import Header from "$store/components/ui/SectionHeader.tsx";
import { useSignal } from "@preact/signals";
import { invoke } from "$store/runtime.ts";
import type { JSX } from "preact";
Expand All @@ -10,84 +119,152 @@ export interface Form {
}

export interface Props {
content: {
title?: string;
/** @format textarea */
description?: string;
form?: Form;
};
title?: string;
/** @format textarea */
description?: string;
form?: Form;
layout?: {
tiled?: boolean;
headerFontSize?: "Large" | "Normal";
content?: {
border?: boolean;
alignment?: "Center" | "Left" | "Side to side";
bgColor?: "Normal" | "Reverse";
};
};
}

function Newsletter(
{ content, layout = {} }: Props,
) {
const { tiled = false } = layout;
const DEFAULT_PROPS: Props = {
title: "",
description: "",
form: {
placeholder: "Digite seu email",
buttonText: "Inscrever",
helpText:
'Ao se inscrever, você concorda com nossa <a class="link" href="/politica-de-privacidade">Política de privacidade</a>.',
},
layout: {
headerFontSize: "Large",
content: {
border: false,
alignment: "Center",
},
},
};

export default function Newsletter(props: Props) {
const { title, description, form, layout } = { ...DEFAULT_PROPS, ...props };
const isReverse = layout?.content?.bgColor === "Reverse";
const bordered = Boolean(layout?.content?.border);

const loading = useSignal(false);

const handleSubmit: JSX.GenericEventHandler<HTMLFormElement> = async (e) => {
e.preventDefault();

try {
loading.value = true;
const name = "";
const email =
(e.currentTarget.elements.namedItem("email") as RadioNodeList)?.value;
const name = (e.currentTarget.elements.namedItem("name") as RadioNodeList)?.value;
const email = (e.currentTarget.elements.namedItem("email") as RadioNodeList)?.value;
console.log("Email do cliente: ", email, name)
await invoke.wake.actions.newsletter.register({ email, name });

// await invoke.vtex.actions.newsletter.subscribe({ email });
} finally {
loading.value = false;
setTimeout(() => {
loading.value = false;
}, 2000);
}
};

const headerLayout = (
<Header
title={title}
description={description}
alignment={layout?.content?.alignment === "Left" ? "left" : "center"}
colorReverse={isReverse}
fontSize={layout?.headerFontSize}
/>
);

const formLayout = form && (
<form onSubmit={handleSubmit} class="w-full flex flex-col gap-4">
<div class="relative flex flex-col lg:flex-row gap-3">
<input
class="w-full input input-bordered"
type="text"
name="email"
placeholder={form.placeholder}
/>
<input type={"hidden"} value={"."} name={"name"}/>
<button
class={`btn ${isReverse ? "btn-accent" : ""}`}
type="submit"
>
{loading.value
? (
<span>
Assinado com sucesso!{" "}
<span class="loading loading-spinner loading-xs" />
</span>
)
: <span>{form.buttonText}</span>
}
</button>
</div>
{
/* {form.helpText && (
<div
class="text-sm"
dangerouslySetInnerHTML={{ __html: form.helpText }}
/>
)} */
}
</form>
);

const bgLayout = isReverse
? "bg-secondary text-secondary-content"
: "bg-transparent";

return (
<div
class={`flex ${
tiled
? "flex-col gap-4 lg:flex-row lg:w-full lg:justify-between"
: "flex-col gap-4"
}`}
class={`${
bordered
? isReverse ? "bg-secondary-content" : "bg-secondary"
: bgLayout
} ${bordered ? "p-4 lg:p-16" : "p-0"}`}
>
<div class="flex flex-col gap-4">
{content?.title && (
<h3 class={tiled ? "text-2xl lg:text-3xl" : "text-lg"}>
{content?.title}
</h3>
)}
{content?.description && <div>{content?.description}</div>}
</div>
<div class="flex flex-col gap-4">
<form
class="form-control"
onSubmit={handleSubmit}
{(!layout?.content?.alignment ||
layout?.content?.alignment === "Center") && (
<div
class={`newsletter-content container flex flex-col rounded p-4 gap-6 lg:p-16 lg:gap-12 ${bgLayout}`}
>
<div class="flex flex-wrap gap-3">
<input
name="email"
class="flex-auto md:flex-none input input-bordered md:w-80 text-base-content"
placeholder={content?.form?.placeholder || "Digite seu email"}
/>
<button
type="submit"
class="btn disabled:loading"
disabled={loading}
>
{content?.form?.buttonText || "Inscrever"}
</button>
{headerLayout}
<div class="flex justify-center form-content">
{formLayout}
</div>
</form>
{content?.form?.helpText && (
<div
class="text-sm"
dangerouslySetInnerHTML={{ __html: content?.form?.helpText }}
/>
)}
</div>
</div>
)}
{layout?.content?.alignment === "Left" && (
<div
class={`newsletter-content container flex flex-col rounded p-4 gap-6 lg:p-16 lg:gap-12 ${bgLayout}`}
>
{headerLayout}
<div class="flex justify-start">
{formLayout}
</div>
</div>
)}
{layout?.content?.alignment === "Side to side" && (
<div
class={`newsletter-content container flex flex-col rounded justify-between lg:flex-row p-4 gap-6 lg:p-16 lg:gap-12 ${bgLayout}`}
>
{headerLayout}
<div class="form-content w-full flex justify-center">
{formLayout}
</div>
</div>
)}
</div>
);
}

export default Newsletter;
13 changes: 12 additions & 1 deletion components/footer/PaymentMethods.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,18 @@
import Icon from "$store/components/ui/Icon.tsx";

export interface PaymentItem {
label: "Diners" | "Elo" | "Mastercard" | "Pix" | "Visa";
label: "Diners" |
"Elo" |
"Mastercard" |
"Pix" |
"Visa" |
"Boleto" |
"JCB" |
"Aura" |
"American Express" |
"Discover" |
"Hipercard"
;
}

export default function PaymentMethods(
Expand Down
2 changes: 1 addition & 1 deletion components/product/CustomShelfSlider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ function CustomShelfSlider({
id={id}
class="container relative grid grid-cols-[48px_1fr_48px] px-0 sm:px-5"
>
<Slider class="carousel carousel-center gap-6 col-span-full row-start-2 row-end-5">
<Slider class="carousel gap-6 col-span-full row-start-2 row-end-5">
{products?.map((product, index) => (
<Slider.Item
index={index}
Expand Down
Loading

0 comments on commit 7f7ff4a

Please sign in to comment.