From 90d9abe92bb3d9258de9e77f7f67c5a813766c22 Mon Sep 17 00:00:00 2001 From: Marcus Date: Thu, 18 Apr 2024 17:16:52 -0300 Subject: [PATCH] feat: adicionado novo componente de flag na categoria e pdp --- components/product/ProductCard.tsx | 17 +- components/product/ProductDetails.tsx | 13 +- components/product/ProductDetailsImages.tsx | 12 +- components/product/ProductHighlights.tsx | 176 ++++++++++++++++++++ 4 files changed, 212 insertions(+), 6 deletions(-) create mode 100644 components/product/ProductHighlights.tsx diff --git a/components/product/ProductCard.tsx b/components/product/ProductCard.tsx index adab335..1064d0e 100644 --- a/components/product/ProductCard.tsx +++ b/components/product/ProductCard.tsx @@ -13,6 +13,8 @@ import type { Product } from "apps/commerce/types.ts"; import { mapProductToAnalyticsItem } from "apps/commerce/utils/productToAnalyticsItem.ts"; import Image from "apps/website/components/Image.tsx"; import DiscountBadge from "./DiscountBadge.tsx"; +import ProductHighlights from "$store/components/product/ProductHighlights.tsx"; +import { HighLight } from "$store/components/product/ProductHighlights.tsx"; export interface Layout { basics?: { @@ -61,7 +63,10 @@ interface Props { product: Product; /** Preload card image */ preload?: boolean; - + /** + * @description Flags, displayed when products are found + */ + highlights?: HighLight[]; /** @description used for analytics event */ itemListName?: string; layout?: Layout; @@ -77,7 +82,7 @@ const WIDTH = 279; const HEIGHT = 270; function ProductCard( - { product, preload, itemListName, layout, class: _class }: Props, + { product, preload, itemListName, layout, highlights , class: _class }: Props, ) { const { url, @@ -224,6 +229,14 @@ function ProductCard( variant={l?.discount?.variant} /> )} + {product && ( + + )} + {front.alternateName}; + /** + * @description Flags, displayed when products are found + */ + highlights?: HighLight[]; /** * @title Product view * @description Ask for the developer to remove this option since this is here to help development only and should not be used in production @@ -127,7 +131,7 @@ function ProductInfo(
- + ou {installment?.billingDuration}x de {formatPrice( installment?.billingIncrement, offers!.priceCurrency, @@ -256,11 +260,13 @@ function Details({ variant, shipmentPolitics, shareableNetworks, + highlights, }: { page: ProductDetailsPage; variant: Variant; shipmentPolitics?: Props["shipmentPolitics"]; shareableNetworks?: Props["shareableNetworks"]; + highlights?: HighLight[]; }) { const { product, breadcrumbList } = page; const filteredBreadcrumbList = breadcrumbList.itemListElement.filter((item) => @@ -343,7 +349,7 @@ function Details({ } function ProductDetails( - { page, variant: maybeVar = "auto", shipmentPolitics, shareableNetworks }: + { page, variant: maybeVar = "auto", shipmentPolitics, shareableNetworks, highlights }: Props, ) { /** @@ -366,6 +372,7 @@ function ProductDetails( variant={variant} shipmentPolitics={shipmentPolitics} shareableNetworks={shareableNetworks} + highlights={highlights} /> ) : } diff --git a/components/product/ProductDetailsImages.tsx b/components/product/ProductDetailsImages.tsx index af1fe61..d149222 100644 --- a/components/product/ProductDetailsImages.tsx +++ b/components/product/ProductDetailsImages.tsx @@ -4,6 +4,8 @@ import DiscountBadge from "./DiscountBadge.tsx"; import type { ImageObject, Product } from "apps/commerce/types.ts"; import { useOffer } from "$store/sdk/useOffer.ts"; import Image from "apps/website/components/Image.tsx"; +import { HighLight } from "$store/components/product/ProductHighlights.tsx"; +import ProductHighlights from "$store/components/product/ProductHighlights.tsx"; interface Props { images: ImageObject[]; @@ -11,12 +13,13 @@ interface Props { height: number; aspect: string; product: Product; + highlights?: HighLight[]; } const id = "product-zoom"; function ProductDetailsImages( - { images, width, height, aspect, product }: Props, + { images, width, height, aspect, product, highlights }: Props, ) { const { offers } = product; const { @@ -76,6 +79,13 @@ function ProductDetailsImages( /> ) : null} + + {product && ( + + )}
{/* Dots */} diff --git a/components/product/ProductHighlights.tsx b/components/product/ProductHighlights.tsx new file mode 100644 index 0000000..514f043 --- /dev/null +++ b/components/product/ProductHighlights.tsx @@ -0,0 +1,176 @@ +import type { Product } from "apps/commerce/types.ts"; +import type { ImageWidget } from "apps/admin/widgets.ts"; +import Image from "apps/website/components/Image.tsx"; +import type { ProductDetailsPage } from "apps/commerce/types.ts"; + +export type HighlightsColors = + | "emphasis" + | "primary" + | "secondary" + | "accent" + | "neutral" + | "base" + | "info" + | "success" + | "warning" + | "error"; + +export type AlignHorizontal = + | "end" + | "start" + | "center"; + +export interface HighLight { + icon?: ImageWidget; + label?: string; + collectionId?: string; + /** @default 0 */ + minPrice?: number; + backgorundColor?: string; + color?: string; + /** @title placement column */ + columnStart?: number; + /** @title placement row */ + rowStart?: number; + rowSpan?: number; + colSpan?: number; + alignHorizontal?: AlignHorizontal; +} + +type Props = { + product: ProductDetailsPage["product"]; + className?: string; + highlights?: HighLight[]; + listPrice?: number; +}; + +const GRID_ROWS: Record = { + 1: "grid-rows-1", + 2: "grid-rows-2", + 3: "grid-rows-3", + 4: "grid-rows-4", + 5: "grid-rows-5", + 6: "grid-rows-6", +}; + +const GRID_COLUMNS: Record = { + 1: "grid-cols-1", + 2: "grid-cols-2", + 3: "grid-cols-3", + 4: "grid-cols-4", + 5: "grid-cols-5", + 6: "grid-cols-6", +}; + +export const GRID_COL_START: Record = { + 1: "col-start-1", + 2: "col-start-2", + 3: "col-start-3", + 4: "col-start-4", + 5: "col-start-5", + 6: "col-start-6", +}; + +export const GRID_ROW_START: Record = { + 1: "row-start-1", + 2: "row-start-2", + 3: "row-start-3", + 4: "row-start-4", + 5: "row-start-5", + 6: "row-start-6", +}; + +export const GRID_ROW_SPAN: Record = { + 1: "row-span-1", + 2: "row-span-2", + 3: "row-span-3", + 4: "row-span-4", + 5: "row-span-5", + 6: "row-span-6", +}; + +export const GRID_COL_SPAN: Record = { + 1: "col-span-1", + 2: "col-span-2", + 3: "col-span-3", + 4: "col-span-4", + 5: "col-span-5", + 6: "col-span-6", +}; + +export const GRID_ROW_HORIZONTAL: Record = { + "end": "justify-self-end", + "start": "justify-self-start", + "center": "justify-self-center", +}; + +function ProductHighlights(props: Props) { + const { product, highlights, listPrice } = props; + const additionalProperty = product?.additionalProperty ?? []; + const productHighlights = additionalProperty; + + if (!productHighlights.length) return null; + if (!highlights) return null; + + return ( + <> + {productHighlights.map(({ value, propertyID }) => { + return highlights.map( + ( + { + collectionId, + minPrice = 0, + backgorundColor, + color, + label, + icon, + colSpan, + rowStart, + columnStart, + rowSpan, + alignHorizontal, + }, + ) => { + if ( + propertyID == collectionId && + (listPrice ? listPrice >= minPrice : true) + ) { + return ( +
+ {icon + ? ( + + ) + : label + ? label + : value} +
+ ); + } else { + return null; + } + }, + ); + })} + + ); +} + +export default ProductHighlights;