Skip to content

Commit

Permalink
feat: adicionado review de produto
Browse files Browse the repository at this point in the history
  • Loading branch information
caioprogrammer committed Mar 8, 2024
1 parent 90425ae commit 816e594
Showing 4 changed files with 98 additions and 137 deletions.
17 changes: 8 additions & 9 deletions components/product/ProductInfo.tsx
Original file line number Diff line number Diff line change
@@ -19,8 +19,11 @@ import Icon from "deco-sites/tools-dna/components/ui/Icon.tsx";
import Image from "https://denopkg.com/deco-cx/apps@0.32.26/website/components/Image.tsx";
import Shipping from "$store/islands/Shipping.tsx";
import { calculate } from "deco-sites/tools-dna/components/product/ProductCardCustom.tsx";
import ProductReview from "deco-sites/tools-dna/islands/ProductReview.tsx";
import ProductReview from "$store/islands/ProductReview.tsx";
import Breadcrumb from "deco-sites/tools-dna/components/ui/Breadcrumb.tsx";
import { useSignal } from "@preact/signals";
import Modal from "deco-sites/tools-dna/components/ui/Modal.tsx";
import Button from "$store/components/ui/Button.tsx";

interface Props {
page: ProductDetailsPage | null;
@@ -41,6 +44,7 @@ function range(start: number, end: number) {
function ProductInfo({ page, layout }: Props) {
const platform = usePlatform();
const id = useId();
const openReview = useSignal(false);

if (page === null) {
throw new Error("Missing Product Details Page Info");
@@ -519,14 +523,9 @@ function ProductInfo({ page, layout }: Props) {
</span>
</div>
</h3>
<div>
<button
type="button"
class="font-semibold text-white text-2xl bg-[#15AD40] min-h-[70px] rounded-xl w-full px-4"
>
Avaliar este produto
</button>
{/* <ProductReview productId={product.productID} /> */}

<div id={id}>
<ProductReview IDProduct={productID}/>
</div>
</div>

204 changes: 85 additions & 119 deletions components/product/ProductReview.tsx
Original file line number Diff line number Diff line change
@@ -1,133 +1,99 @@
import { Signal, useSignal } from "@preact/signals";
import { useCallback, useState } from "preact/hooks";
import { useSignal } from "@preact/signals";
import { invoke } from "$store/runtime.ts";
import type { JSX } from "preact";
import Button from "deco-sites/tools-dna/components/ui/Button.tsx";

function ProductReview(productId: number) {
const reviewRating = 5;
const reviewName = "";
const reviewEmail = "";
const reviewContent = "";
export interface Form {
placeholder?: string;
buttonText?: string;
/** @format html */
helpText?: string;
}

export interface Props {
IDProduct: string;
layout?: {
tiled?: boolean;
};
}

function ProductReview({ IDProduct, layout = {} }: Props) {
const { tiled = false } = layout;
const loading = useSignal(false);

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

// const handleReview = useCallback(async () => {
// try {
// const createReview = invoke.wake.actions.review.create({
// email: reviewEmail,
// name: reviewName,
// productVariantId: productId,
// rating: reviewRating,
// review: reviewContent,
// });
// console.log(createReview);
// } catch (e) {
// console.log(e);
// return;
// } finally {
// console.log("deu erro total");
// }
// }, []);
try {
loading.value = true;

const name = (e.currentTarget.elements.namedItem("name") as RadioNodeList)?.value;
const email = (e.currentTarget.elements.namedItem("email") as RadioNodeList)?.value;
const review = (e.currentTarget.elements.namedItem("review") as RadioNodeList)?.value;
const rating = (e.currentTarget.elements.namedItem("ddlNota") as RadioNodeList)?.value;

await invoke.wake.actions.review.create({
email,
name,
productVariantId: Number(IDProduct),
rating: Number(rating),
review,
})
} finally {
loading.value = false;
}
};

return (
<>
<h2>
Avalie esse produto
</h2>
<form
id="formAvaliacao"
class="form-antispam"
method="post"
onSubmit={(e) => {
e.preventDefault();
// handleReview();
}}
>
<div class="avaliainputs">
<div class="left">
<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">
<h3 class={tiled ? "text-2xl lg:text-3xl" : "text-lg"}>
Titulo
</h3>
<div>Descrição</div>
</div>
<div class="flex flex-col gap-4">
<form
class="form-control"
onSubmit={handleSubmit}
>
<div class="flex flex-wrap gap-3">
<input
class="input inputAvaliacao"
id="txtAvaliacaoNome"
name="txtAvaliacaoNome"
type={"text"}
value="Nome"
name="name"
class="flex-auto md:flex-none input input-bordered md:w-80 text-base-content"
placeholder={"Digite seu nome"}
/>
</div>
<div class="left">
<input
class="input inputAvaliacao"
value={reviewEmail}
// onChange={(e) => {
// reviewEmail.value = e.currentTarget.value;
// }}
id="txtAvaliacaoEmail"
name="txtAvaliacaoEmail"
type={"text"}
name="email"
class="flex-auto md:flex-none input input-bordered md:w-80 text-base-content"
placeholder={"Digite seu email"}
/>
</div>
</div>
<textarea name="review" placeholder={"O que achou do produto?"}></textarea>

<div class="avaliacoment">
<textarea
class="input textAreaAvaliacao valid"
id="txtAvaliacaoDescricao"
name="txtAvaliacaoDescricao"
>
Comentários
</textarea>
<div style="display: none;">
Número maximo de caracteres atingido (4000)
<select name="ddlNota">
<option selected value="5">Excelente</option>
<option value="4">Muito Bom</option>
<option value="3">Bom</option>
<option value="2">Ruim</option>
<option value="1">Muito Ruim</option>
</select>
<Button
type="submit"
disabled={loading}
class="font-semibold text-white text-2xl bg-[#15AD40] min-h-[70px] rounded-xl w-full px-4"
>
Avaliar este produto
</Button>
</div>
</div>

<div class="pontosAvaliacao clear">
<a href="javascript:Avaliar(1)">
<img
src="https://recursos.WORLDTOOLS.com.br/i/aval_on.png"
id="aval1"
alt="Muito Ruim"
/>
</a>
<a href="javascript:Avaliar(2)">
<img
src="https://recursos.WORLDTOOLS.com.br/i/aval_on.png"
id="aval2"
alt="Ruim"
/>
</a>
<a href="javascript:Avaliar(3)">
<img
src="https://recursos.WORLDTOOLS.com.br/i/aval_on.png"
id="aval3"
alt="Bom"
/>
</a>
<a href="javascript:Avaliar(4)">
<img
src="https://recursos.WORLDTOOLS.com.br/i/aval_on.png"
id="aval4"
alt="Muito Bom"
/>
</a>
<a href="javascript:Avaliar(5)">
<img
src="https://recursos.WORLDTOOLS.com.br/i/aval_on.png"
id="aval5"
alt="Excelente"
/>
</a>

<select id="ddlNota">
<option selected={true} value="5">Excelente</option>
<option value="4">Muito Bom</option>
<option value="3">Bom</option>
<option value="2">Ruim</option>
<option value="1">Muito Ruim</option>
</select>
</div>

<div class="">
<button>Avaliar Produto</button>
</div>
</form>
</>
</form>
</div>
</div>
);
}

10 changes: 3 additions & 7 deletions components/search/Controls.tsx
Original file line number Diff line number Diff line change
@@ -9,9 +9,6 @@ import type { ProductListingPage } from "apps/commerce/types.ts";
import { ImageWidget } from "apps/admin/widgets.ts";
import type { SectionProps } from "deco/types.ts";




/**
* @titleBy matcher
*/
@@ -48,12 +45,12 @@ export type Props =
>
& {
displayFilter?: boolean;
banners?: Banner[]
banners?: Banner[];
};

function SearchControls(
{ filters, breadcrumb, displayFilter, sortOptions, pageInfo}: Props,
props: SectionProps<ReturnType<typeof loader>>
{ filters, breadcrumb, displayFilter, sortOptions, pageInfo }: Props,
props: SectionProps<ReturnType<typeof loader>>,
) {
const open = useSignal(false);
const itemName = breadcrumb.itemListElement.slice(-1);
@@ -127,5 +124,4 @@ export const loader = (props: Props, req: Request) => {
return { banner };
};


export default SearchControls;
4 changes: 2 additions & 2 deletions deno.json
Original file line number Diff line number Diff line change
@@ -2,8 +2,8 @@
"imports": {
"deco-sites/tools-dna/": "./",
"$store/": "./",
"deco/": "https://denopkg.com/deco-cx/deco@1.57.2/",
"apps/": "https://denopkg.com/deco-cx/apps@0.35.2/",
"deco/": "https://denopkg.com/deco-cx/deco@1.57.3/",
"apps/": "https://denopkg.com/deco-cx/apps@0.35.3/",
"$fresh/": "https://deno.land/x/fresh@1.6.1/",
"preact": "https://esm.sh/preact@10.19.2",
"preact/": "https://esm.sh/preact@10.19.2/",

0 comments on commit 816e594

Please sign in to comment.