negodesign 0.0.43 → 0.0.44

package/dist/components/pages/product-details/01/ProductDetails01.svelte

@@ -20,17 +20,21 @@
   import ProductDetailReviews from "../shared/ProductDetailReviews.svelte";
   import ProductDetailTags from "../shared/ProductDetailTags.svelte";
   import ProductPurchasePanel from "../shared/ProductPurchasePanel.svelte";
-  import type { ProductDetailsData } from "../types";
+  import type { ProductDetailsData, ProductPromotionDetails } from "../types";
 
   let {
     data,
     isLoading = false,
+    promotions = [],
+    showPriceWithPromotions = false,
     onBuy,
     onFavorite,
     onCart,
   }: {
     data: ProductDetailsData;
     isLoading?: boolean;
+    promotions?: ProductPromotionDetails[];
+    showPriceWithPromotions?: boolean;
     onBuy?: (id: string | number) => void;
     onFavorite?: (id: string | number) => void;
     onCart?: (id: string | number) => void;
@@ -64,7 +68,7 @@
         <ProductDetailFeatures features={data.features} {isLoading} />
       {/if}
 
-      <ProductPurchasePanel {data} {isLoading} {onBuy} {onFavorite} {onCart} />
+      <ProductPurchasePanel {data} {isLoading} {promotions} {showPriceWithPromotions} {onBuy} {onFavorite} {onCart} />
     </div>
   </div>
 

package/dist/components/pages/product-details/01/ProductDetails01.svelte.d.ts

@@ -1,7 +1,9 @@
-import type { ProductDetailsData } from "../types";
+import type { ProductDetailsData, ProductPromotionDetails } from "../types";
 type $$ComponentProps = {
     data: ProductDetailsData;
     isLoading?: boolean;
+    promotions?: ProductPromotionDetails[];
+    showPriceWithPromotions?: boolean;
     onBuy?: (id: string | number) => void;
     onFavorite?: (id: string | number) => void;
     onCart?: (id: string | number) => void;

package/dist/components/pages/product-details/02/ProductDetails02.svelte

@@ -20,17 +20,21 @@
   import ProductDetailReviews from "../shared/ProductDetailReviews.svelte";
   import ProductDetailTags from "../shared/ProductDetailTags.svelte";
   import ProductPurchasePanel from "../shared/ProductPurchasePanel.svelte";
-  import type { ProductDetailsData } from "../types";
+  import type { ProductDetailsData, ProductPromotionDetails } from "../types";
 
   let {
     data,
     isLoading = false,
+    promotions = [],
+    showPriceWithPromotions = false,
     onBuy,
     onFavorite,
     onCart,
   }: {
     data: ProductDetailsData;
     isLoading?: boolean;
+    promotions?: ProductPromotionDetails[];
+    showPriceWithPromotions?: boolean;
     onBuy?: (id: string | number) => void;
     onFavorite?: (id: string | number) => void;
     onCart?: (id: string | number) => void;
@@ -72,6 +76,8 @@
         <ProductPurchasePanel
           {data}
           {isLoading}
+          {promotions}
+          {showPriceWithPromotions}
           {onBuy}
           {onFavorite}
           {onCart}

package/dist/components/pages/product-details/02/ProductDetails02.svelte.d.ts

@@ -1,7 +1,9 @@
-import type { ProductDetailsData } from "../types";
+import type { ProductDetailsData, ProductPromotionDetails } from "../types";
 type $$ComponentProps = {
     data: ProductDetailsData;
     isLoading?: boolean;
+    promotions?: ProductPromotionDetails[];
+    showPriceWithPromotions?: boolean;
     onBuy?: (id: string | number) => void;
     onFavorite?: (id: string | number) => void;
     onCart?: (id: string | number) => void;

package/dist/components/pages/product-details/03/ProductDetails03.svelte

@@ -19,18 +19,22 @@
   import ProductDetailTags from "../shared/ProductDetailTags.svelte";
   import ProductDetailTabs from "../shared/ProductDetailTabs.svelte";
   import ProductPurchasePanel from "../shared/ProductPurchasePanel.svelte";
-  import type { ProductDetailsData } from "../types";
+  import type { ProductDetailsData, ProductPromotionDetails } from "../types";
   import { useDevice } from "../../../../hooks/responsive.svelte";
 
   let {
     data,
     isLoading = false,
+    promotions = [],
+    showPriceWithPromotions = false,
     onBuy,
     onFavorite,
     onCart,
   }: {
     data: ProductDetailsData;
     isLoading?: boolean;
+    promotions?: ProductPromotionDetails[];
+    showPriceWithPromotions?: boolean;
     onBuy?: (id: string | number) => void;
     onFavorite?: (id: string | number) => void;
     onCart?: (id: string | number) => void;
@@ -55,7 +59,7 @@
 
       <ProductDetailTags tags={data.tags} {isLoading} />
 
-      <ProductPurchasePanel {data} {isLoading} {onBuy} {onFavorite} {onCart} />
+      <ProductPurchasePanel {data} {isLoading} {promotions} {showPriceWithPromotions} {onBuy} {onFavorite} {onCart} />
 
       {#if !responsive.isMobile}
         {#if data.location}

package/dist/components/pages/product-details/03/ProductDetails03.svelte.d.ts

@@ -1,7 +1,9 @@
-import type { ProductDetailsData } from "../types";
+import type { ProductDetailsData, ProductPromotionDetails } from "../types";
 type $$ComponentProps = {
     data: ProductDetailsData;
     isLoading?: boolean;
+    promotions?: ProductPromotionDetails[];
+    showPriceWithPromotions?: boolean;
     onBuy?: (id: string | number) => void;
     onFavorite?: (id: string | number) => void;
     onCart?: (id: string | number) => void;

package/dist/components/pages/product-details/ProductDetails.svelte

@@ -20,13 +20,15 @@
 <script lang="ts">
   import type { ProductDetailsProps } from "./types";
   import ProductDetails01 from "./01/ProductDetails01.svelte";
-  import ProductDetails03 from "./02/ProductDetails02.svelte";
-  import ProductDetails04 from "./03/ProductDetails03.svelte";
+  import ProductDetails02 from "./02/ProductDetails02.svelte";
+  import ProductDetails03 from "./03/ProductDetails03.svelte";
 
   let {
     varient = 1,
     data,
     isLoading = false,
+    promotions = [],
+    showPriceWithPromotions = false,
     onBuy,
     onFavorite,
     onCart,
@@ -34,9 +36,33 @@
 </script>
 
 {#if varient === 2}
-  <ProductDetails03 {data} {isLoading} {onBuy} {onFavorite} {onCart} />
+  <ProductDetails02
+    {data}
+    {isLoading}
+    {promotions}
+    {showPriceWithPromotions}
+    {onBuy}
+    {onFavorite}
+    {onCart}
+  />
 {:else if varient === 3}
-  <ProductDetails04 {data} {isLoading} {onBuy} {onFavorite} {onCart} />
+  <ProductDetails03
+    {data}
+    {isLoading}
+    {promotions}
+    {showPriceWithPromotions}
+    {onBuy}
+    {onFavorite}
+    {onCart}
+  />
 {:else}
-  <ProductDetails01 {data} {isLoading} {onBuy} {onFavorite} {onCart} />
+  <ProductDetails01
+    {data}
+    {isLoading}
+    {promotions}
+    {showPriceWithPromotions}
+    {onBuy}
+    {onFavorite}
+    {onCart}
+  />
 {/if}

package/dist/components/pages/product-details/shared/ProductPromotionDetails.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import CardPromotionPrice from "../../../core/card/promotion/CardPromotionPrice.svelte";
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import type { ProductPromotionDetails } from "../types";
+
+  let {
+    promotions = [],
+    isLoading = false,
+  }: {
+    promotions?: ProductPromotionDetails[];
+    isLoading?: boolean;
+  } = $props();
+</script>
+
+{#if isLoading}
+  <div class="flex flex-col gap-2">
+    <Skeleton class="h-5 w-36 rounded-md" />
+    <Skeleton class="h-5 w-28 rounded-md" />
+  </div>
+{:else if promotions.length > 0}
+  <div class="flex flex-col gap-2">
+    <span class="text-sm font-medium text-muted-foreground">Promoções</span>
+    {#each promotions as promo (promo.id)}
+      <div class="flex items-center gap-2">
+        <CardPromotionPrice newPrice={promo.newPrice} oldPrice={promo.oldPrice} />
+      </div>
+    {/each}
+  </div>
+{/if}

package/dist/components/pages/product-details/shared/ProductPromotionDetails.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ProductPromotionDetails } from "../types";
+type $$ComponentProps = {
+    promotions?: ProductPromotionDetails[];
+    isLoading?: boolean;
+};
+declare const ProductPromotionDetails: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProductPromotionDetails = ReturnType<typeof ProductPromotionDetails>;
+export default ProductPromotionDetails;

package/dist/components/pages/product-details/shared/ProductPurchasePanel.svelte

@@ -14,17 +14,22 @@
   import ProductDetailActions from "./ProductDetailActions.svelte";
   import ProductDetailPrice from "./ProductDetailPrice.svelte";
   import ProductDetailRating from "./ProductDetailRating.svelte";
-  import type { ProductDetailsData } from "../types";
+  import ProductPromotionDetails from "./ProductPromotionDetails.svelte";
+  import type { ProductDetailsData, ProductPromotionDetails as ProductPromotionDetailsType } from "../types";
 
   let {
     data,
     isLoading = false,
+    promotions = [],
+    showPriceWithPromotions = false,
     onBuy,
     onFavorite,
     onCart,
   }: {
     data: ProductDetailsData;
     isLoading?: boolean;
+    promotions?: ProductPromotionDetailsType[];
+    showPriceWithPromotions?: boolean;
     onBuy?: (id: string | number) => void;
     onFavorite?: (id: string | number) => void;
     onCart?: (id: string | number) => void;
@@ -38,12 +43,16 @@
     {isLoading}
   />
 
-  <ProductDetailPrice
-    newPrice={data.newPrice}
-    oldPrice={data.oldPrice}
-    currency={data.currency}
-    {isLoading}
-  />
+  {#if !(showPriceWithPromotions && promotions.length > 0)}
+    <ProductDetailPrice
+      newPrice={data.newPrice}
+      oldPrice={data.oldPrice}
+      currency={data.currency}
+      {isLoading}
+    />
+  {/if}
+
+  <ProductPromotionDetails {promotions} {isLoading} />
 
   <ProductDetailActions
     id={data.id}

package/dist/components/pages/product-details/shared/ProductPurchasePanel.svelte.d.ts

@@ -1,7 +1,9 @@
-import type { ProductDetailsData } from "../types";
+import type { ProductDetailsData, ProductPromotionDetails as ProductPromotionDetailsType } from "../types";
 type $$ComponentProps = {
     data: ProductDetailsData;
     isLoading?: boolean;
+    promotions?: ProductPromotionDetailsType[];
+    showPriceWithPromotions?: boolean;
     onBuy?: (id: string | number) => void;
     onFavorite?: (id: string | number) => void;
     onCart?: (id: string | number) => void;

package/dist/components/pages/product-details/types.d.ts

@@ -141,6 +141,11 @@ export interface ProductDetailsData {
  * Propriedades do componente principal ProductDetails.
  * Suporta quatro variantes de layout e callbacks de interação.
  */
+export interface ProductPromotionDetails {
+    id: string | number;
+    newPrice: string | number;
+    oldPrice: string | number;
+}
 export interface ProductDetailsProps {
     /**
      * Variante do layout da página de detalhes.
@@ -159,6 +164,17 @@ export interface ProductDetailsProps {
      * @default false
      */
     isLoading?: boolean;
+    /**
+     * Lista de promoções associadas ao produto.
+     * Cada promoção contém um preço antigo e novo.
+     */
+    promotions?: ProductPromotionDetails[];
+    /**
+     * Quando true, oculta o preço regular do produto
+     * e apresenta apenas os preços das promoções.
+     * @default false
+     */
+    showPriceWithPromotions?: boolean;
     /**
      * Callback executado quando o utilizador clica no botão de compra.
      * Recebe o id do produto como argumento.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "negodesign",
-	"version": "0.0.43",
+	"version": "0.0.44",
 	"type": "module",
 	"license": "MIT",
 	"sideEffects": [