@mobielnl/elements 0.13.4 → 0.13.6

package/dist/{index-kkZIQaY5.js → index-DwCs1GvG.js}

@@ -1,5 +1,5 @@
 "use client";
-import { n as ne, i as Ot, a as z, m as ie, r as $e, h as je, b as Ft, w as se, c as Te, d as Ce, e as qe, f as de, g as De, t as L, j as Rt, k as H, l as E, o as $, p as Kt, s as R, v as Lt, M as j, W as ze, q as xe, N as Et, u as Bt, x as Gt, y as Nt, z as Ht, K as Xe, A as _t, B as Ae, C as Wt, D as Ut, E as $t, F as jt, G as Ye, H as qt, I as zt, J as Xt, L as Pe, O as ke, P as Y, Q as Ie, R as Yt, V as Zt, S as Jt, T as Qt, U as en, X as tn, Y as nn, Z as Ze, _ as sn, $ as rn, a0 as on, a1 as an, a2 as cn, a3 as Je, a4 as Qe, a5 as et, a6 as tt, a7 as ln } from "./index-CxWRyhe0.js";
+import { n as ne, i as Ot, a as z, m as ie, r as $e, h as je, b as Ft, w as se, c as Te, d as Ce, e as qe, f as de, g as De, t as L, j as Rt, k as H, l as E, o as $, p as Kt, s as R, v as Lt, M as j, W as ze, q as xe, N as Et, u as Bt, x as Gt, y as Nt, z as Ht, K as Xe, A as _t, B as Ae, C as Wt, D as Ut, E as $t, F as jt, G as Ye, H as qt, I as zt, J as Xt, L as Pe, O as ke, P as Y, Q as Ie, R as Yt, V as Zt, S as Jt, T as Qt, U as en, X as tn, Y as nn, Z as Ze, _ as sn, $ as rn, a0 as on, a1 as an, a2 as cn, a3 as Je, a4 as Qe, a5 as et, a6 as tt, a7 as ln } from "./index-C93P8_P-.js";
 import { Fragment as un } from "react";
 var It = typeof globalThis < "u" && globalThis.process ? globalThis.process : { env: { NODE_ENV: "production" } };
 const re = (...t) => t.reduce((e, n) => (i) => n(e(i))), nt = /* @__NO_SIDE_EFFECTS__ */ (t, e, n) => {

package/dist/index.d.ts

@@ -180,6 +180,19 @@ declare type BundleSelectorClassNames = {
     bundleTypeSetRadioGroup?: RadioGroupClassNames;
     /** Bundle type set checkbox group class styling slots (used when `multiSelect` is true) - see type `CheckboxGroupClassNames` */
     bundleTypeSetCheckboxGroup?: CheckboxGroupClassNames;
+    /** Collapsed bundle summary card (shown for names in `collapsibleBundleTypeSets` after a selection) */
+    collapsedBundleSet?: {
+        /** Clickable card wrapper */
+        base?: string;
+        /** Wrapper around the selected bundle image */
+        imageWrapper?: string;
+        /** Selected bundle image */
+        image?: string;
+        /** Selected bundle set name */
+        title?: string;
+        /** Edit icon */
+        icon?: string;
+    };
 };
 
 export declare type BundleSet = BundleTypeSet['bundleSets'][number];
@@ -686,11 +699,29 @@ export declare type FixedBlock = {
     };
 };
 
+export declare type FixedProviderSlug = Extract<ProviderSlug, 'kpn' | 'ziggo' | 'odido' | 'delta' | 'budget' | 'youfone'>;
+
 declare type GeneralClassNames = {
     /** The base slot of the general section, it is the container of the general section */
     base?: string;
 } & SectionClassNames;
 
+export declare type GiftConfig = {
+    /** Initial bundle set unit key used to find an available fixed proposition
+     * @example '1636-11788' */
+    initialBundleSetUnitKey: string;
+    /** Optional fixed provider slug to narrow the gift proposition search to only one fixed provider
+     * @example 'odido' */
+    fixedProviderSlug?: FixedProviderSlug;
+    /** Locks customer benefit (klantvoordeel) to a single mobile provider. Skips the CombiDeal modal and
+     * mobile provider picker. Yes/No only asks whether the visitor is already a mobile customer of this provider.
+     * @example 'odido' */
+    mobileProviderSlug?: MobileProviderSlug;
+    /** Custom ReactNode content shown when no matching fixed proposition is found for the `initialBundleSetUnitKey` and address
+     * @note This will override the default not found state */
+    notFoundState?: ReactNode;
+};
+
 /**
  * ClassNames for styling different parts of the `HandsetCreditSelector` component
  */
@@ -802,6 +833,8 @@ declare type MainImageClassNames = {
     };
 };
 
+export declare type MobileProviderSlug = Extract<ProviderSlug, 'odido' | 'vodafone' | 'kpn' | 'hollandsnieuwe' | 'ben' | 'simyo' | 'budget' | 'youfone' | 'delta'>;
+
 declare type ModalClassNames = {
     /** The backdrop slot, it is displayed behind the modal */
     backdrop?: string;
@@ -1845,7 +1878,7 @@ declare type PropositionOverviewClassNames = {
     creditInfo?: CreditInfoClassNames_2;
 };
 
-export declare function PropositionSelector({ propositionKey, classNames, initialProfile, onProfileChange, onPropositionKeyChange, onError, onAction, ...props }: PropositionSelectorProps): JSX.Element;
+export declare function PropositionSelector({ propositionKey, giftConfig, classNames, initialProfile, onProfileChange, onPropositionKeyChange, onError, onAction, ...props }: PropositionSelectorProps): JSX.Element;
 
 /**
  * ClassNames for styling different parts of the `PropositionSelector` component
@@ -1858,6 +1891,9 @@ 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;
+    /** Alert class styling slots - see type `AlertClassNames`
+     * @note only visible when `giftConfig.initialBundleSetUnitKey` prop returns no matching fixed proposition for the address */
+    noMatchingPropositionAlert?: AlertClassNames;
     /** ProductHeader class styling slots - see type `ProductHeaderClassNames` */
     productHeader?: ProductHeaderClassNames;
     /** StickySummary component class styling slots - see type `StickySummaryClassNames` */
@@ -1932,11 +1968,7 @@ export declare type PropositionSelectorClassNames = {
     };
 };
 
-export declare type PropositionSelectorProps = {
-    /** Initial proposition key
-     * @example
-     * '1412-10116|1413-10646|plv-398' */
-    propositionKey: string;
+export declare type PropositionSelectorProps = RequiredProps & {
     /** Class slots for styling */
     classNames?: PropositionSelectorClassNames;
     /** Initial user profile */
@@ -1945,6 +1977,8 @@ export declare type PropositionSelectorProps = {
      * @default "cart"
      * @note `"upsell"`: only smartphone propositions have upsell options, other propositions will redirect to the cart */
     clickOutTarget?: 'cart' | 'upsell' | 'checkout';
+    /** Custom loading UI ReactNode content shown during postcode check, proposition search and data fetch */
+    loadingState?: ReactNode;
     /** Custom ReactNode content below the CTA card component
      *
      * @note Desktop: Content will be displayed below the CTA card component in the sidebar/second column
@@ -1952,6 +1986,17 @@ export declare type PropositionSelectorProps = {
      * @default null
      */
     contentBelowCTA?: ReactNode;
+    /** Boolean to hide number retention question when profile if filled. Does not apply to fixed propositions */
+    hideRetentionOnFilledProfile?: boolean;
+    /**
+     * Collapse designated bundle type set options; only displays selected bundle option with edit icon
+     *
+     * Matching is exact on `bundleTypeSet.name`. Bundle type sets that are not listed keep their existing expanded selection UI.
+     *
+     * @note Only applicable for radio button bundle type sets (single selection).
+     *
+     * @example collapsibleBundleTypeSets={['Kies je welkomstcadeau']} */
+    collapsibleBundleTypeSets?: string[];
     /** Callback function to handle proposition key changes */
     onPropositionKeyChange?: (propositionKey: string) => void;
     /** Callback function to handle profile changes */
@@ -2002,8 +2047,6 @@ export declare type PropositionSelectorProps = {
      * }}
      */
     onRender?: () => void;
-    /** Boolean to hide number retention question when profile if filled. Does not apply to fixed propositions */
-    hideRetentionOnFilledProfile?: boolean;
 };
 
 declare type PropositionSelectorQuery = {
@@ -2097,6 +2140,8 @@ declare type PropositionSelectorQuery = {
     } | null;
 };
 
+export declare type ProviderName = Providers[ProviderSlug];
+
 export declare type ProviderOption = {
     slug: string;
     name: string;
@@ -2104,7 +2149,29 @@ export declare type ProviderOption = {
     Icon?: ElementType;
 };
 
-export declare const PROVIDERS: Record<string, string>;
+export declare const PROVIDERS: {
+    readonly odido: "Odido";
+    readonly kpn: "KPN";
+    readonly vodafone: "Vodafone";
+    readonly ben: "Ben";
+    readonly hollandsnieuwe: "hollandsnieuwe";
+    readonly lebara: "Lebara";
+    readonly youfone: "Youfone";
+    readonly simyo: "Simyo";
+    readonly delta: "Delta";
+    readonly caiway: "Caiway";
+    readonly budget: "Budget Mobiel";
+    readonly 'budget-alles-in-1': "Budget Alles-in-1";
+    readonly 'budget-internet': "Budget Internet";
+    readonly '50plusmobiel': "50+ Mobiel";
+    readonly ziggo: "Ziggo";
+    readonly other: "Andere / geen provider";
+    readonly 'other/moving': "Geen i.v.m. verhuizing";
+};
+
+declare type Providers = typeof PROVIDERS;
+
+export declare type ProviderSlug = keyof Providers;
 
 /**
  * ClassNames for styling different parts of the `RadioFilter` component
@@ -2181,6 +2248,19 @@ declare type RadioGroupClassNames = {
     };
 };
 
+declare type RequiredProps = {
+    /** Initial proposition key
+     * @example '1412-10116|1413-10646|plv-398'
+     * @note Required unless `giftConfig` is provided with a valid address in `initialProfile` */
+    propositionKey: string;
+    giftConfig?: never;
+} | {
+    propositionKey?: never;
+    /** Configuration for pre-selected gift bundle set unit key and provider used to find an available fixed proposition
+     * @note Cannot be used together with `propositionKey` prop. Only applicable for fixed propositions */
+    giftConfig: GiftConfig;
+};
+
 declare type ResultsClassNames = {
     /** Title above top propositions (only shown when `showTopPropositions` is set to `true`)
      * @example "Beste providers voor jou" */
@@ -2800,6 +2880,8 @@ export declare type Translations = {
         return: string;
         sameFixedProviderTitle: string;
         sameFixedProviderDescription: string;
+        noMatchingPropositionTitle: string;
+        noMatchingPropositionDescription: string;
         productVersionTitle: string;
         benefitsTitle: string;
         moreBundleInfo: string;
@@ -2821,6 +2903,7 @@ export declare type Translations = {
         modificationTitle: string;
         modificationDescription: string;
         modificationFixedDescription: string;
+        modificationLockedDescription: string;
         modificationYes: string;
         modificationNo: string;
     };

package/package.json

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