From 816e5947d6ea9384a3979b05b9bf2b4392254436 Mon Sep 17 00:00:00 2001 From: Caio Nogueira Date: Thu, 7 Mar 2024 23:50:13 -0300 Subject: [PATCH] feat: adicionado review de produto --- components/product/ProductInfo.tsx | 17 ++- components/product/ProductReview.tsx | 204 +++++++++++---------------- components/search/Controls.tsx | 10 +- deno.json | 4 +- 4 files changed, 98 insertions(+), 137 deletions(-) diff --git a/components/product/ProductInfo.tsx b/components/product/ProductInfo.tsx index b163344..bf730be 100644 --- a/components/product/ProductInfo.tsx +++ b/components/product/ProductInfo.tsx @@ -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) { -
- - {/* */} + +
+
diff --git a/components/product/ProductReview.tsx b/components/product/ProductReview.tsx index 077206d..23d0f03 100644 --- a/components/product/ProductReview.tsx +++ b/components/product/ProductReview.tsx @@ -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 = 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 ( - <> -

- Avalie esse produto -

-
{ - e.preventDefault(); - // handleReview(); - }} - > -
-
+
+
+

+ Titulo +

+
Descrição
+
+
+ +
-
-
{ - // 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"} /> -
-
+ -
- -
- Número maximo de caracteres atingido (4000) + +
-
- -
- - Muito Ruim - - - Ruim - - - Bom - - - Muito Bom - - - Excelente - - - -
- -
- -
- - + +
+
); } diff --git a/components/search/Controls.tsx b/components/search/Controls.tsx index 60031f1..9cddbca 100644 --- a/components/search/Controls.tsx +++ b/components/search/Controls.tsx @@ -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> + { filters, breadcrumb, displayFilter, sortOptions, pageInfo }: Props, + props: SectionProps>, ) { 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; diff --git a/deno.json b/deno.json index 97c8532..8494dc0 100644 --- a/deno.json +++ b/deno.json @@ -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/",