@mobielnl/elements 0.12.25 → 0.13.0

package/dist/index.d.ts

@@ -105,6 +105,15 @@ export declare type Block = {
     amount: number;
 };
 
+export declare type BundleInfoViewedEvent = {
+    type: 'bundle_info_viewed';
+    /** The bundle group with bundle options */
+    bundleTypeSet: BundleTypeSet;
+    /** The bundle option within the bundle group
+     * @note if this is `undefined`, the user clicked the info icon for the bundle group label */
+    bundleSet?: BundleSet;
+};
+
 /**
  * ClassNames for styling different parts of the `BundleModal` component
  */
@@ -173,6 +182,10 @@ declare type BundleSelectorClassNames = {
     bundleTypeSetCheckboxGroup?: CheckboxGroupClassNames;
 };
 
+export declare type BundleSet = BundleTypeSet['bundleSets'][number];
+
+export declare type BundleTypeSet = NonNullable<NonNullable<PropositionSelectorQuery['propositionSelector']>['bundleTypeSets']>[number];
+
 /**
  * ClassNames for styling different parts of the `Carousel` component
  */
@@ -1440,7 +1453,7 @@ declare type ProductHeaderClassNames = {
     };
     /** Stock status indicator – see ProductStockStatus */
     productStockStatus?: NonNullable<MainImageClassNames['phoneImage']>['stockIndicator'];
-    /** Wrapper container for the proposition header and promotion list */
+    /** Wrapper container for the proposition header and promotion list and more bundle info link */
     propositionHeaderPromotionListWrapper?: string;
     /** Proposition header class styling slots */
     propositionHeader?: PropositionHeaderClassNames;
@@ -1448,6 +1461,8 @@ declare type ProductHeaderClassNames = {
     carousel?: CarouselClassNames;
     /** PromotionList class styling slots (special promotions in header) - see type `PromotionListClassNames` */
     promotionList?: PromotionListClassNames;
+    /** More bundle info link class styling slots */
+    moreBundleInfoLink?: string;
 };
 
 export declare function ProductResults({ classNames, initialSelectedFilters, initialProfile, onProfileChange, onError, onAction, ...props }: ProductResultsProps): JSX.Element;
@@ -1843,8 +1858,6 @@ export declare type PropositionSelectorClassNames = {
     /** Alert class styling slots - see type `AlertClassNames`
      * @note only visible for fixed propositions with the same fixed provider in profile */
     sameFixedProviderAlert?: AlertClassNames;
-    /** HandsetCreditSelector component class styling slots - see type `HandsetCreditSelectorClassNames` */
-    handsetCreditSelector?: HandsetCreditSelectorClassNames;
     /** ProductHeader class styling slots - see type `ProductHeaderClassNames` */
     productHeader?: ProductHeaderClassNames;
     /** StickySummary component class styling slots - see type `StickySummaryClassNames` */
@@ -1853,23 +1866,6 @@ export declare type PropositionSelectorClassNames = {
     costOverview?: CostOverviewClassNames;
     /** PromotionList component class styling slots (benefits section) - see type `PromotionListClassNames` */
     promotionList?: PromotionListClassNames;
-    /** PropositionSpecifications class styling slots (bundle info section) */
-    propositionSpecifications?: {
-        /** Base container for the bundle info section */
-        base?: string;
-        /** Title for the bundle info section */
-        title?: string;
-        /** Link for the bundle info section */
-        link?: string;
-        /** 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 */
@@ -1895,10 +1891,28 @@ export declare type PropositionSelectorClassNames = {
     };
     /** BundleSelector component class styling slots - see type `BundleSelectorClassNames` */
     bundleSelector?: BundleSelectorClassNames;
+    /** VersionSelect component class styling slots (smartphone product version selector) - see type `VersionSelectClassNames`
+     * @note only visible for smartphone propositions */
+    versionSelect?: VersionSelectClassNames & {
+        /** Section class styling slots - see type `SectionClassNames` */
+        section?: SectionClassNames_2;
+    };
     /** Retention section class styling slots - see type `SectionClassNames` */
-    retentionSelector?: SectionClassNames_2;
+    retentionSelector?: SectionClassNames_2 & {
+        /** Radio group class styling slots - see type `RadioGroupClassNames` */
+        radioGroup?: RadioGroupClassNames;
+    };
     /** Modification section class styling slots - see type `SectionClassNames` */
-    modificationSelector?: SectionClassNames_2;
+    modificationSelector?: SectionClassNames_2 & {
+        /** Radio group class styling slots - see type `RadioGroupClassNames` */
+        radioGroup?: RadioGroupClassNames;
+    };
+    /** HandsetCreditSelector component class styling slots - see type `HandsetCreditSelectorClassNames`
+     * @note only visible for smartphone propositions with handset credits */
+    handsetCreditSelector?: HandsetCreditSelectorClassNames & {
+        /** Section class styling slots - see type `SectionClassNames` */
+        section?: SectionClassNames_2;
+    };
     /** BundleModal component class styling slots - see type `BundleModalClassNames` */
     bundleModal?: BundleModalClassNames;
     /** Profile buttons component class styling slots - see type `SelectorClassNames` */
@@ -1928,8 +1942,9 @@ export declare type PropositionSelectorProps = {
     /** Initial user profile */
     initialProfile?: Partial<Profile>;
     /** Target for the click-out URL on mobiel.nl
-     * @default 'cart' */
-    clickOutTarget?: 'cart' | 'checkout';
+     * @default "cart"
+     * @note `"upsell"`: only smartphone propositions have upsell options, other propositions will redirect to the cart */
+    clickOutTarget?: 'cart' | 'upsell' | 'checkout';
     /** Custom ReactNode content below the CTA card component
      *
      * @note Desktop: Content will be displayed below the CTA card component in the sidebar/second column
@@ -1951,22 +1966,26 @@ export declare type PropositionSelectorProps = {
      * 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
+     * - `bundle_info_viewed`: User clicked the info icon for the bundle group or bundle option
+     * - `details_viewed`: User opened proposition details modal
      * - `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
+     *    case 'add_to_cart':
+     *      console.log(event.proposition)
+     *      break
+     *    case 'bundle_info_viewed':
+     *      console.log(event.bundleTypeSet, event.bundleSet)
+     *      break
+     *    case 'details_viewed':
+     *      console.log(event.proposition, event.tab)
+     *      break
+     *    case 'profile_changed':
+     *      console.log(event.from, event.to)
+     *      break
      *   }
      * }}
      */
@@ -1986,6 +2005,97 @@ export declare type PropositionSelectorProps = {
     hideRetentionOnFilledProfile?: boolean;
 };
 
+declare type PropositionSelectorQuery = {
+    __typename?: 'RootQueryType';
+    propositionSelector?: {
+        __typename?: 'BundleSelector';
+        key: string;
+        planVariantKey: string;
+        phoneVariantKey?: string | null;
+        modificationKey?: string | null;
+        providerSlug: string;
+        handsetCreditKeys: Array<string>;
+        phoneVariantKeys: Array<string>;
+        modificationDescription?: string | null;
+        modificationInfoUrl?: string | null;
+        hasModifications: boolean;
+        basePrice: number;
+        creditFee: number;
+        planVariant: {
+            __typename?: 'BundleSelectorPlanVariant';
+            contractType: string;
+        };
+        alternatePlanVariant?: {
+            __typename?: 'BundleSelectorPlanVariant';
+            unitKey: string;
+        } | null;
+        provider: {
+            __typename?: 'Provider';
+            name: string;
+            slug: string;
+        };
+        planVariants: Array<{
+            __typename?: 'BundleSelectorPlanVariant';
+            unitKey: string;
+            contractTerm: number;
+            contractType: string;
+            plan: string;
+        }>;
+        bundleTypeSets: Array<{
+            __typename?: 'BundleSelectorBundleTypeSet';
+            unitKey: string;
+            name: string;
+            required: boolean;
+            multiSelect: boolean;
+            requiredBundleTypeSetId?: string | null;
+            infoUrl?: string | null;
+            bundleTypes: Array<string>;
+            bundleSets: Array<{
+                __typename?: 'BundleSelectorBundleSet';
+                infoUrl?: string | null;
+                imageUrl?: string | null;
+                unitKey: string;
+                name: string;
+                label: string;
+                usps: Array<string>;
+                requiredBundleTypeSetId?: string | null;
+                requiredModificationGroupId?: string | null;
+                baseMonthlyFee: number;
+                lifetimeMonthlyFee: number;
+                monthlyFees: Array<number>;
+                content: {
+                    __typename?: 'PropositionContent';
+                    data: number;
+                    minutes: number;
+                    sms: number;
+                    sharedCredits?: Array<string | null> | null;
+                    dataSpeedDown: number;
+                    dataSpeedUp: number;
+                    channels: Array<string>;
+                    hdChannels: Array<string>;
+                    receivers: number;
+                };
+                modifications?: {
+                    __typename?: 'BundleSelectorModifications';
+                    name?: string | null;
+                    monthlyFees: Array<number>;
+                    content: {
+                        __typename?: 'PropositionContent';
+                        data: number;
+                        minutes: number;
+                        sms: number;
+                    };
+                } | null;
+            }>;
+        }>;
+        blacklists: Array<{
+            __typename?: 'BundleSelectorBlacklist';
+            unitKey: string;
+            blacklist: Array<string>;
+        }>;
+    } | null;
+};
+
 export declare type ProviderOption = {
     slug: string;
     name: string;
@@ -2189,10 +2299,8 @@ declare type SelectFilterClassNames = {
 /**
  * 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;
+ * Re-uses `DetailsViewedEvent` and `ProfileChangedEvent` from `ProductResults` */
+export declare type SelectorActionEvent = AddToCartEvent | BundleInfoViewedEvent | DetailsViewedEvent | ProfileChangedEvent;
 
 /**
  * ClassNames for styling different parts of the `Selector` component
@@ -2693,7 +2801,6 @@ export declare type Translations = {
         sameFixedProviderDescription: string;
         productVersionTitle: string;
         benefitsTitle: string;
-        bundleSelectorTitle: string;
         moreBundleInfo: string;
         totalCostsOverviewTitle: string;
         cta: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobielnl/elements",
-  "version": "0.12.25",
+  "version": "0.13.0",
   "description": "Mobiel.nl Elements - React component library for partner websites",
   "private": false,
   "type": "module",
@@ -86,12 +86,14 @@
     "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react-swc": "^4.0.0",
+    "@vitest/coverage-v8": "4.1.10",
     "chromatic": "^13.3.5",
     "cross-env": "^7.0.3",
     "dotenv": "^17.4.2",
     "globals": "^16.3.0",
     "graphql": "^16.11.0",
     "graphql-request": "^7.2.0",
+    "happy-dom": "^20.10.6",
     "i18next": "^25.7.3",
     "js-cookie": "^3.0.7",
     "lodash": "^4.18.1",
@@ -110,7 +112,7 @@
     "typescript": "~5.8.3",
     "vite": "7.3.5",
     "vite-plugin-dts": "^4.5.0",
-    "vitest": "^4.1.8",
+    "vitest": "4.1.10",
     "zod": "^4.1.12"
   },
   "msw": {