admesh-ui-sdk
Version:
Beautiful, modern React components for displaying AI-powered product recommendations with citation-based conversation ads, auto-triggered widgets, floating chat, conversational interfaces, persistent sidebar, and built-in tracking. Includes zero-code SDK
88 lines • 3.18 kB
TypeScript
import { default as React } from 'react';
import { AdMeshRecommendation, Product } from '../types/index';
/**
* Props for AdMeshEcommerceCards component.
*
* @remarks
* This component requires BOTH brand information and products to be present.
* - Brand info: Extracted from brand.creative_input (brand_name, assets.logo_url, short_description)
* - Products: Must be provided in brand.products[] array with at least one product
*
* Both brand header and product cards will be displayed when valid data is provided.
*/
export interface AdMeshEcommerceCardsProps {
/**
* Required: Single brand recommendation object containing brand info and products array.
* Both brand information (name, logo, description) and products array must be present.
* Brand info is extracted from creative_input, products from the products[] array.
*/
brand: AdMeshRecommendation;
title?: string;
showTitle?: boolean;
className?: string;
cardClassName?: string;
onProductClick?: (product: Product) => void;
showPricing?: boolean;
showRatings?: boolean;
showBrand?: boolean;
showSource?: boolean;
showShipping?: boolean;
maxCards?: number;
cardWidth?: 'sm' | 'md' | 'lg';
theme?: 'light' | 'dark' | 'auto';
borderRadius?: 'none' | 'sm' | 'md' | 'lg';
shadow?: 'none' | 'sm' | 'md' | 'lg';
sessionId?: string;
onFeedback?: (helpful: boolean, recommendationId: string) => void;
}
/**
* AdMeshEcommerceCards Component
*
* Displays a brand header and horizontal scrolling product cards for ecommerce recommendations.
*
* @remarks
* **Requirements:**
* - Both brand information AND products are required
* - Brand info: brand.creative_input.brand_name, brand.creative_input.assets.logo_url, brand.creative_input.short_description
* - Products: brand.products[] array with at least one product
*
* The component will display:
* 1. Brand header section (logo, name, description) - always shown when brand info exists
* 2. Product cards section (horizontal scroll) - always shown when products exist
*
* @example
* ```tsx
* <AdMeshEcommerceCards
* brand={{
* creative_input: {
* brand_name: "TechCorp",
* assets: { logo_url: "https://..." },
* short_description: "Premium tech products"
* },
* products: [
* {
* product_id: "prod1",
* product_link: "https://techcorp.com/product1",
* product_name: "Laptop Pro",
* product_description: "High-performance laptop",
* product_price: 1299.99,
* product_discount: 15,
* product_cta_label: "Buy Now"
* },
* {
* product_id: "prod2",
* product_click_url: "https://techcorp.com/product2",
* product_name: "Wireless Mouse",
* product_description: "Ergonomic mouse",
* product_price: "49.99",
* product_discount: "10%",
* product_cta_label: "Add to Cart"
* }
* ]
* }}
* />
* ```
*/
export declare const AdMeshEcommerceCards: React.FC<AdMeshEcommerceCardsProps>;
export default AdMeshEcommerceCards;
//# sourceMappingURL=AdMeshEcommerceCards.d.ts.map