@mobielnl/elements 0.12.10 → 0.12.12

package/dist/index.d.ts

@@ -23,6 +23,13 @@ declare const addressSchema: z.ZodObject<{
     city: z.ZodString;
 }, z.core.$strip>;
 
+/** Event fired when the add-to-cart CTA is clicked */
+export declare type AddToCartEvent = {
+    type: 'add_to_cart';
+    /** The full proposition data */
+    proposition: ProductCardPropositionFragment;
+};
+
 declare type AverageSectionClassNames = {
     /** Container for the average per month section */
     container?: string;
@@ -81,6 +88,84 @@ export declare type Block = {
     amount: number;
 };
 
+/**
+ * ClassNames for styling different parts of the `BundleModal` component
+ */
+declare type BundleModalClassNames = {
+    /** The backdrop slot, it is displayed behind the modal */
+    backdrop?: string;
+    /** The wrapper slot of the modal. It wraps the base and the backdrop slots */
+    wrapper?: string;
+    /** The main slot of the modal content */
+    base?: string;
+    /** The header of the modal, it is displayed at the top of the modal */
+    header?: string;
+    /** The body of the modal, it is displayed in the middle of the modal */
+    body?: string;
+    /** The footer of the modal, it is displayed at the bottom of the modal */
+    footer?: string;
+    /** The close button (X) of the modal in top-right corner */
+    closeButton?: string;
+};
+
+/**
+ * ClassNames for styling different parts of the `BundleSelector` component
+ */
+declare type BundleSelectorClassNames = {
+    /** Root container wrapping all bundle sections */
+    base?: string;
+    /** Container wrapping the contract term heading and radio group */
+    contractTermGroup?: string;
+    /** Contract term section heading */
+    contractTermLabel?: string;
+    /** Contract term radio group class styling slots - see type `RadioGroupClassNames` */
+    contractTermRadioGroup?: RadioGroupClassNames;
+    /** Container wrapping each bundle type set heading and its radio/checkbox group */
+    bundleTypeSetGroup?: string;
+    /** Bundle type set section heading */
+    bundleTypeSetLabel?: string;
+    /** Bundle type set radio group class styling slots (used when `multiSelect` is false) - see type `RadioGroupClassNames` */
+    bundleTypeSetRadioGroup?: RadioGroupClassNames;
+    /** Bundle type set checkbox group class styling slots (used when `multiSelect` is true) - see type `CheckboxGroupClassNames` */
+    bundleTypeSetCheckboxGroup?: CheckboxGroupClassNames;
+};
+
+/**
+ * ClassNames for styling different parts of the `Carousel` component
+ */
+declare type CarouselClassNames = {
+    /** Root container */
+    base?: string;
+    /** Image */
+    image?: string;
+    /** Image wrapper */
+    imageWrapper?: string;
+    /** Thumbnail Card area */
+    thumbnailCard?: string;
+    /** Thumbnail Image */
+    thumbnailImage?: string;
+    /** Counter for hidden amount of thumbnails */
+    counter?: string;
+    /** Modal class names */
+    modal?: CarouselModalClassNames;
+};
+
+/**
+ * ClassNames for styling different parts of the `Carousel` component
+ */
+declare type CarouselModalClassNames = {
+    /** Image */
+    image?: string;
+    /** Image wrapper */
+    imageWrapper?: string;
+    /** Thumbnail Card area */
+    thumbnailCard?: string;
+    /** Thumbnail Image */
+    thumbnailImage?: string;
+    /** Modal class names */
+    modal?: ModalClassNames_6;
+};
+
 declare type ChannelsClassNames = {
     /** The base slot of the channels section, it is the container of the channels section */
     base?: string;
@@ -96,6 +181,32 @@ declare type ChannelsClassNames = {
     hdIcon?: string;
 };
 
+declare type CheckboxGroupClassNames = {
+    /** Checkbox group root wrapper, it wraps the label and the wrapper */
+    base?: string;
+    /** Checkbox group wrapper, it wraps all checkboxes */
+    wrapper?: string;
+    /** Checkbox group label, it is placed before the wrapper */
+    label?: string;
+    /** The description of the checkbox group */
+    description?: string;
+    /** The error message of the checkbox group */
+    errorMessage?: string;
+    /** Individual checkboxes located within `checkboxGroup` */
+    checkbox?: {
+        /** Checkbox wrapper, it handles alignment, placement, and general appearance */
+        base?: string;
+        /** An inner container that includes styles for relative positioning, flex properties, overflow handling and managing hover and selected states */
+        wrapper?: string;
+        /** The hidden input element that is used to handle the checkbox state */
+        hiddenInput?: string;
+        /** Icon within the checkbox, controlling size, visibility, and changes when checked */
+        icon?: string;
+        /** The text associated with the checkbox */
+        label?: string;
+    };
+};
+
 declare type CombiDealModalClassNames = {
     /** Modal dialog class styling slots - see type `ModalClassNames` */
     modal?: ModalClassNames_3;
@@ -519,6 +630,8 @@ declare type GeneralClassNames = {
 declare type HandsetCreditSelectorClassNames = {
     /** Root container */
     base?: string;
+    /** Info text about the handset price */
+    handsetPriceInfo?: string;
     /** Row containing the one-time and monthly fee display */
     priceRow?: string;
     /** One-time fee label */
@@ -711,6 +824,23 @@ declare type ModalClassNames_5 = {
     closeButton?: string;
 };
 
+declare type ModalClassNames_6 = {
+    /** The backdrop slot, it is displayed behind the modal */
+    backdrop?: string;
+    /** The wrapper slot of the modal. It wraps the base and the backdrop slots */
+    wrapper?: string;
+    /** The main slot of the modal content */
+    base?: string;
+    /** The header of the modal, it is displayed at the top of the modal */
+    header?: string;
+    /** The body of the modal, it is displayed in the middle of the modal */
+    body?: string;
+    /** The footer of the modal, it is displayed at the bottom of the modal */
+    footer?: string;
+    /** The close button (X) of the modal in top-right corner */
+    closeButton?: string;
+};
+
 declare type MonthlyFeeClassNames = {
     /** Container for the monthly fee row */
     container?: string;
@@ -991,6 +1121,37 @@ declare type PricingClassNames = {
     averagePriceValue?: string;
 };
 
+/**
+ * ClassNames for styling the `Pricing` component within `PropositionCard`
+ */
+declare type PricingClassNames_2 = {
+    /** Wrapper container for the pricing section */
+    wrapper?: string;
+    /** Promotion text for monthly fee
+     * @example "12 mnd van 10,- voor:" */
+    promotionText?: string;
+    /** Wrapper container for the monthly fee */
+    monthlyFeeWrapper?: string;
+    /** Monthly fee value text (price per month)
+     * @example "10,-" */
+    monthlyFeeValue?: string;
+    /** Monthly fee label text
+     /* @example "/ maand" */
+    monthlyFeeLabel?: string;
+    /** Product price text (one-time fee for phone)
+     *
+     * Only visible for Smartphone Propositions
+     * @example "+ 100,- eenmalig" */
+    oneTimeFee?: string;
+    /** Wrapper container for the average price */
+    averagePriceWrapper?: string;
+    /** Average price Icon */
+    averagePriceIcon?: string;
+    /** Average price value text (TCO per month)
+     * @example "gem. 54,- / maand" */
+    averagePriceValue?: string;
+};
+
 declare type ProductCardPropositionFragment = {
     __typename?: 'Proposition';
     key: string;
@@ -1220,6 +1381,10 @@ declare type ProductHeaderClassNames = {
     productStockStatus?: NonNullable<MainImageClassNames['phoneImage']>['stockIndicator'];
     /** Proposition header class styling slots */
     propositionHeader?: PropositionHeaderClassNames;
+    /** Carousel class styling slots (smartphone product images) - see type `CarouselClassNames` */
+    carousel?: CarouselClassNames;
+    /** PromotionList class styling slots (special promotions in header) - see type `PromotionListClassNames` */
+    promotionList?: PromotionListClassNames;
 };
 
 export declare function ProductResults({ classNames, initialSelectedFilters, initialProfile, onProfileChange, onError, onAction, ...props }: ProductResultsProps): JSX.Element;
@@ -1600,14 +1765,63 @@ declare type PropositionOverviewClassNames = {
     creditInfo?: CreditInfoClassNames_2;
 };
 
-export declare function PropositionSelector({ propositionKey, classNames, initialProfile, onProfileChange, onError, ...props }: PropositionSelectorProps): JSX.Element;
+export declare function PropositionSelector({ propositionKey, classNames, initialProfile, onProfileChange, onError, onAction, ...props }: PropositionSelectorProps): JSX.Element;
 
+/**
+ * ClassNames for styling different parts of the `PropositionSelector` component
+ */
 export declare type PropositionSelectorClassNames = {
+    /** Wrapper container for the entire proposition selector */
     base?: string;
-    /** HandsetCreditSelector component class styling slots */
+    /** HandsetCreditSelector component class styling slots - see type `HandsetCreditSelectorClassNames` */
     handsetCreditSelector?: HandsetCreditSelectorClassNames;
-    /** ProductHeader class styling slots (base, productImage, providerImage, productStockStatus, propositionHeader) */
+    /** ProductHeader class styling slots - see type `ProductHeaderClassNames` */
     productHeader?: ProductHeaderClassNames;
+    /** StickySummary component class styling slots - see type `StickySummaryClassNames` */
+    stickySummary?: StickySummaryClassNames;
+    /** CostOverview component class styling slots (sticky sidebar card) - see type `CostOverviewClassNames` */
+    costOverview?: CostOverviewClassNames;
+    /** PromotionList component class styling slots (benefits section) - see type `PromotionListClassNames` */
+    promotionList?: PromotionListClassNames;
+    /** PropositionSpecifications class styling slots (bundle info section) */
+    propositionSpecifications?: {
+        /** Wrapper container for the specifications */
+        wrapper?: string;
+        /** Specification item */
+        item?: string;
+        /** Specification icon */
+        icon?: string;
+    };
+    /** VersionSelect component class styling slots (smartphone product version selector) - see type `VersionSelectClassNames` */
+    versionSelect?: VersionSelectClassNames;
+    /** Extra costs section root container class */
+    extraCosts?: string;
+    /** Sidebar card containing the cost overview, CTA button and extra costs */
+    sidebarCard?: {
+        /** The Card wrapper element */
+        base?: string;
+        /** The "Totale kosten overzicht" title heading */
+        title?: string;
+        /** The add-to-cart CTA button */
+        ctaButton?: string;
+    };
+    /** BundleSelector component class styling slots - see type `BundleSelectorClassNames` */
+    bundleSelector?: BundleSelectorClassNames;
+    /** BundleModal component class styling slots - see type `BundleModalClassNames` */
+    bundleModal?: BundleModalClassNames;
+    /** Profile buttons component class styling slots - see type `SelectorClassNames` */
+    profileButton?: SelectorClassNames;
+    /** Profile banner component class styling slots - see type `ProfileBannerClassNames` */
+    profileBanner?: ProfileBannerClassNames;
+    /** Error alert class styling slots - see type `ErrorAlertClassNames` */
+    errorAlert?: ErrorAlertClassNames;
+    /** Proposition results class styling slots (shared sub-keys with ProductResultsClassNames.results) */
+    results?: {
+        /** Details modal class styling slots - see type `DetailsModalClassNames` */
+        detailsModal?: DetailsModalClassNames;
+        /** Credit info class styling slots - see type `CreditInfoClassNames` */
+        creditInfo?: CreditInfoClassNames_2;
+    };
 };
 
 export declare type PropositionSelectorProps = {
@@ -1619,6 +1833,9 @@ export declare type PropositionSelectorProps = {
     classNames?: PropositionSelectorClassNames;
     /** Initial user profile */
     initialProfile?: Partial<Profile>;
+    /** Target for the click-out URL on mobiel.nl
+     * @default 'cart' */
+    clickOutTarget?: 'cart' | 'checkout';
     /** Callback function to handle profile changes */
     onProfileChange?: (profile: Partial<Profile>) => void;
     /** Callback function to add search params for the click-out URL */
@@ -1627,6 +1844,30 @@ export declare type PropositionSelectorProps = {
     onError?: (error: Error) => void;
     /** Callback function to handle return click */
     onReturnClick?: () => void;
+    /**
+     * Callback function fired when user actions occur.
+     *
+     * Events:
+     * - `details_viewed`: User opened proposition details modal
+     * - `add_to_cart`: User clicked the add-to-cart CTA
+     * - `profile_changed`: User profile changed (includes from/to values)
+     *
+     * @example
+     * onAction={(event) => {
+     *   switch(event.type) {
+     *     case 'details_viewed':
+     *       console.log(event.proposition, event.tab)
+     *       break
+     *     case 'add_to_cart':
+     *       console.log(event.proposition)
+     *       break
+     *     case 'profile_changed':
+     *       console.log(event.from, event.to)
+     *       break
+     *   }
+     * }}
+     */
+    onAction?: (event: SelectorActionEvent) => void;
 };
 
 export declare type ProviderOption = {
@@ -1674,6 +1915,39 @@ declare type RadioFilterClassNames = {
     };
 };
 
+/**
+ * ClassNames for styling different parts of the `RadioGroup` component
+ */
+declare type RadioGroupClassNames = {
+    /** Radio group root wrapper, it wraps the label and the wrapper */
+    base?: string;
+    /** Radio group wrapper, it wraps all radio items */
+    wrapper?: string;
+    /** Radio group label, it is placed before the wrapper */
+    label?: string;
+    /** Description slot for the radio group */
+    description?: string;
+    /** Error message slot for the radio group */
+    errorMessage?: string;
+    /** Individual radio items */
+    radio?: {
+        /** Radio root wrapper, it wraps all elements */
+        base?: string;
+        /** Radio wrapper, it wraps the control element */
+        wrapper?: string;
+        /** The hidden input element that is used to handle the radio state */
+        hiddenInput?: string;
+        /** Label and description wrapper */
+        labelWrapper?: string;
+        /** The label text associated with the radio */
+        label?: string;
+        /** Control element, it is the circle element */
+        control?: string;
+        /** Description slot for the radio */
+        description?: string;
+    };
+};
+
 declare type ResultsClassNames = {
     /** Title above top propositions (only shown when `showTopPropositions` is set to `true`)
      * @example "Beste providers voor jou" */
@@ -1774,6 +2048,14 @@ declare type SelectFilterClassNames = {
     collapseLink?: string;
 };
 
+/**
+ * Union type of all PropositionSelector action events.
+ *
+ * Re-uses `DetailsViewedEvent` and `ProfileChangedEvent` from `ProductResults`
+ * since the shape is identical.
+ */
+export declare type SelectorActionEvent = AddToCartEvent | DetailsViewedEvent | ProfileChangedEvent;
+
 /**
  * ClassNames for styling different parts of the `Selector` component
  */
@@ -1862,6 +2144,16 @@ declare type SortSelectClassNames = {
     endWrapper?: string;
 };
 
+/**
+ * ClassNames for styling different parts of the `Sticky` component
+ */
+declare type StickySummaryClassNames = {
+    /** Container */
+    container?: string;
+    /** Pricing section class styling slots - see type `PricingClassNames` */
+    pricing?: PricingClassNames_2;
+};
+
 declare type TableClassNames = {
     /** Defines a flexible column layout and relative positioning for the table component */
     base?: string;
@@ -1943,6 +2235,9 @@ export declare type Translations = {
         subscription: string;
         prepaid: string;
         otherProvider: string;
+        question: string;
+        yes: string;
+        no: string;
     };
     combiDeal: {
         title: string;
@@ -1957,6 +2252,7 @@ export declare type Translations = {
         movingOption: string;
         otherProvider: string;
         question: string;
+        questionOtherSubscriptions: string;
         yes: string;
         no: string;
     };
@@ -2266,6 +2562,7 @@ export declare type Translations = {
         showMore: string;
     };
     handsetCreditSelector: {
+        handsetPriceInfo: string;
         oneTime: string;
         monthly: string;
         decrease: string;
@@ -2275,4 +2572,25 @@ export declare type Translations = {
     };
 };
 
+declare type VersionSelectClassNames = {
+    description?: string;
+    errorMessage?: string;
+    label?: string;
+    base?: string;
+    cardBody?: string;
+    value?: string;
+    selectorIcon?: string;
+    endContent?: string;
+    trigger?: string;
+    mainWrapper?: string;
+    innerWrapper?: string;
+    spinner?: string;
+    listboxWrapper?: string;
+    listbox?: string;
+    popoverContent?: string;
+    helperWrapper?: string;
+    endWrapper?: string;
+    clearButton?: string;
+};
+
 export { }

package/package.json

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