@mobielnl/elements 0.8.1 → 0.8.2

package/dist/index.d.ts

@@ -3,6 +3,9 @@ import { ReactNode } from 'react';
 import { z } from 'zod';
 import * as z_2 from 'zod';
 
+/** Union type of all action events */
+declare type ActionEvent = FiltersChangedEvent | SortChangedEvent | ProfileChangedEvent | DealSelectedEvent | DetailsViewedEvent;
+
 declare type ActiveFilterChipsClassNames = {
     /** The container of the filter chips */
     container?: string;
@@ -226,6 +229,13 @@ declare type CreditInfoClassNames_2 = {
     descriptionLink?: string;
 };
 
+/** Event fired when a deal/proposition is selected (clicked) */
+declare type DealSelectedEvent = {
+    type: 'deal_selected';
+    /** The full proposition data */
+    proposition: ProductCardPropositionFragment;
+};
+
 declare type DetailsModalClassNames = {
     /** Modal class names */
     modal?: ModalClassNames_5;
@@ -251,6 +261,17 @@ declare type DetailsModalClassNames = {
     costOverview?: CostOverviewClassNames;
 };
 
+declare type DetailsModalTab = 'general' | 'conditions' | 'channels' | 'costs';
+
+/** Event fired when proposition details are viewed */
+declare type DetailsViewedEvent = {
+    type: 'details_viewed';
+    /** The full proposition data */
+    proposition: ProductCardPropositionFragment;
+    /** Which tab was opened */
+    tab: DetailsModalTab;
+};
+
 declare type DiscountSectionClassNames = {
     /** Container for the discount section */
     container?: string;
@@ -356,6 +377,19 @@ declare type FilterChipClassNames = {
     closeButton?: string;
 };
 
+/** Event fired when filter values change */
+declare type FiltersChangedEvent = {
+    type: 'filters_changed';
+    /** The filter that was changed */
+    filter: {
+        slug: string;
+        from: string | string[] | undefined;
+        to: string | string[] | undefined;
+    };
+    /** All active filters after the change */
+    activeFilters: FilterValue[];
+};
+
 /**
  * ClassNames for styling different parts of the `Filters` component
  */
@@ -777,9 +811,220 @@ declare type PricingClassNames = {
     averagePriceValue?: string;
 };
 
+declare type ProductCardPropositionFragment = {
+    __typename?: 'Proposition';
+    key: string;
+    creditFee: number;
+    baseMonthlyFee: number;
+    lifetimeMonthlyFee: number;
+    tcoPerMonth: number;
+    activationFee: number;
+    tcoTerm: number;
+    tcoCorrection: number;
+    installationFee: number;
+    cashback: number;
+    price: number;
+    productType: string;
+    modificationPromotions: Array<string>;
+    handsetCreditMonthlyFee: number;
+    bundles: Array<{
+        __typename?: 'PropositionBundle';
+        displayName?: string | null;
+        promotionMonthlyFee?: number | null;
+        isExtra?: boolean | null;
+        usps: Array<string>;
+        contentTypes?: Array<string | null> | null;
+        baseMonthlyFee?: number | null;
+    }>;
+    plan: {
+        __typename?: 'PropositionPlan';
+        name?: string | null;
+        bundleExceedanceDataLimitReached?: string | null;
+        bundleExceedanceRate?: string | null;
+        bundleExceedanceRateCeiling?: string | null;
+        bundleExceedanceWarning?: string | null;
+        bundleExceedanceMinutesRounding?: string | null;
+        bundleUpgrade?: string | null;
+        bundleDowngrade?: string | null;
+    };
+    planVariant: {
+        __typename?: 'PropositionPlanVariant';
+        contractTerm: number;
+        contractType: string;
+        name: string;
+    };
+    monthlyFees: Array<{
+        __typename?: 'PropositionMonthlyFee';
+        fee: number;
+        term: number;
+    }>;
+    tags: Array<{
+        __typename?: 'Tag';
+        type?: string | null;
+        label?: string | null;
+        slug: string;
+    }>;
+    content: {
+        __typename?: 'PropositionContent';
+        dataSpeedDown: number;
+        dataAvgSpeedDown: number;
+        dataSpeedUp: number;
+        dataAvgSpeedUp: number;
+        channels: Array<string>;
+        hdChannels: Array<string>;
+        networkGeneration: number;
+        minutesEu: number;
+        minutesToEu: number;
+        dataEu: number;
+        receivers: number;
+        types: Array<string>;
+        data: number;
+        minutes: number;
+        sms: number;
+        sharedCredits?: Array<string | null> | null;
+    };
+    provider: {
+        __typename?: 'Provider';
+        name: string;
+        imageUrl: string;
+        slug: string;
+        network?: string | null;
+        networkCoverage?: string | null;
+        termsAndConditionsUrl?: string | null;
+        creditProviderName?: string | null;
+    };
+    productVersion?: {
+        __typename?: 'ProductVersion';
+        fullName?: string | null;
+        id: string;
+        slug: string;
+        stock: {
+            __typename?: 'ProductStock';
+            status: string;
+            backInStockExpectation?: string | null;
+            expectedDeliveryDate?: string | null;
+            lowOnStock: boolean;
+        };
+        pricing: {
+            __typename?: 'ProductPricing';
+            sellingPriceInclVat: string;
+            suggestedRetailPrice?: string | null;
+            crossSellSellingPriceInclVat: string;
+        };
+        media: {
+            __typename?: 'Media';
+            main?: {
+                __typename?: 'ProductImage';
+                url?: string | null;
+                altText?: string | null;
+            } | null;
+        };
+        distinctProperties: Array<{
+            __typename?: 'VersionDistinctProperty';
+            key: string;
+            label: string;
+            option: {
+                __typename?: 'DistinctPropertyOptionColor';
+                key: string;
+                slug: string;
+                label: string;
+            } | {
+                __typename?: 'DistinctPropertyOptionDefault';
+                key: string;
+                slug: string;
+                label: string;
+            };
+        }>;
+        specifications: Array<{
+            __typename?: 'Specification';
+            value: {
+                __typename?: 'SpecificationValue';
+                descriptiveText?: string | null;
+            };
+        }>;
+        specialPromotions: Array<{
+            __typename?: 'SpecialPromotion';
+            type: string;
+            visualType: string;
+            slideOutDescription?: string | null;
+            publicTitle: string;
+            description: string;
+            weight: number;
+            validUntil: string;
+            showBanner: boolean;
+            shortDescription?: string | null;
+            stickerImageUrl?: string | null;
+        }>;
+        product: {
+            __typename?: 'Product';
+            fullName: string;
+            name: string;
+            slug: string;
+            accessory?: boolean | null;
+            hasAvpTag: boolean;
+            brand: {
+                __typename?: 'Brand';
+                name: string;
+                slug: string;
+            };
+            distinctProperties: Array<{
+                __typename?: 'ProductDistinctProperty';
+                key: string;
+                label: string;
+                options: Array<{
+                    __typename?: 'DistinctPropertyOptionColor';
+                    key: string;
+                    slug: string;
+                    label: string;
+                } | {
+                    __typename?: 'DistinctPropertyOptionDefault';
+                    key: string;
+                    slug: string;
+                    label: string;
+                }>;
+            }>;
+            productVersions: Array<{
+                __typename?: 'ProductVersion';
+                status?: ProductVersionStatusEnum | null;
+                distinctProperties: Array<{
+                    __typename?: 'VersionDistinctProperty';
+                    key: string;
+                    label: string;
+                    option: {
+                        __typename?: 'DistinctPropertyOptionColor';
+                        key: string;
+                        slug: string;
+                        label: string;
+                        hex?: string | null;
+                    } | {
+                        __typename?: 'DistinctPropertyOptionDefault';
+                        key: string;
+                        slug: string;
+                        label: string;
+                        hex?: string | null;
+                    };
+                }>;
+            }>;
+        };
+    } | null;
+    specialPromotions: Array<{
+        __typename?: 'SpecialPromotion';
+        type: string;
+        visualType: string;
+        publicTitle: string;
+        cashback: string;
+        description: string;
+        weight: number;
+        validUntil: string;
+        showBanner: boolean;
+        shortDescription?: string | null;
+        stickerImageUrl?: string | null;
+    }>;
+};
+
 export declare type ProductCategory = 'sim-only-proposition' | 'fixed-proposition' | 'smartphone-proposition' | 'smartphone-proposition-extended';
 
-export declare function ProductResults({ classNames, initialSelectedFilters, initialProfile, onProfileChange, onError, ...props }: ProductResultsProps): JSX.Element;
+export declare function ProductResults({ classNames, initialSelectedFilters, initialProfile, onProfileChange, onError, onAction, ...props }: ProductResultsProps): JSX.Element;
 
 /**
  * ClassNames for styling different parts of the `ProductResults` component
@@ -842,10 +1087,59 @@ export declare type ProductResultsProps = {
     addClickoutSearchParams?: (searchParams: URLSearchParams) => URLSearchParams;
     /** Callback function called when an error occurs */
     onError?: (error: Error) => void;
+    /**
+     * Callback function fired when user actions occur.
+     *
+     * Events:
+     * - `filters_changed`: Filter values changed (includes from/to values)
+     * - `sort_changed`: Sort option changed (includes from/to values)
+     * - `profile_changed`: User profile changed (includes from/to values)
+     * - `deal_selected`: User clicked on a proposition/deal
+     * - `details_viewed`: User opened proposition details modal
+     *
+     * @example
+     * onAction={(event) => {
+     *   switch(event.type) {
+     *     case 'filters_changed':
+     *       console.log(event.filter, event.activeFilters)
+     *       break
+     *     case 'sort_changed':
+     *       console.log(event.from, event.to)
+     *       break
+     *     case 'profile_changed':
+     *       console.log(event.from, event.to)
+     *       break
+     *     case 'deal_selected':
+     *       console.log(event.proposition)
+     *       break
+     *     case 'details_viewed':
+     *       console.log(event.proposition, event.tab)
+     *       break
+     *    }
+     * }}
+     */
+    onAction?: (event: ActionEvent) => void;
 };
 
+/** Product version lifecycle status */
+declare enum ProductVersionStatusEnum {
+    Available = "AVAILABLE",
+    AvailableIfStock = "AVAILABLE_IF_STOCK",
+    Preparing = "PREPARING",
+    Prerelease = "PRERELEASE",
+    Terminated = "TERMINATED",
+    Unavailable = "UNAVAILABLE"
+}
+
 declare type Profile = z.infer<typeof profileSchema>;
 
+/** Event fired when user profile changes */
+declare type ProfileChangedEvent = {
+    type: 'profile_changed';
+    from: Partial<Profile>;
+    to: Partial<Profile>;
+};
+
 declare const profileSchema: z_2.ZodObject<{
     keepCurrentMsisdn: z_2.ZodOptional<z_2.ZodBoolean>;
     currentMsisdn: z_2.ZodOptional<z_2.ZodString>;
@@ -1183,6 +1477,13 @@ declare type SliderFilterClassNames = {
     thumb?: string;
 };
 
+/** Event fired when sort option changes */
+declare type SortChangedEvent = {
+    type: 'sort_changed';
+    from: string | undefined;
+    to: string;
+};
+
 declare type SortSelectClassNames = {
     description?: string;
     errorMessage?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobielnl/elements",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "Mobiel.nl Elements - React component library for partner websites",
   "private": false,
   "type": "module",