@mobielnl/elements 0.13.3 → 0.13.5

package/dist/{index-Hz7Cp6-d.js → index-D5K8YEVP.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-DqXrmLgh.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-CrTnLElc.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];
@@ -691,6 +704,18 @@ declare type GeneralClassNames = {
     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
+     * @example 'odido' */
+    fixedProviderSlug?: string;
+    /** 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
  */
@@ -1845,7 +1870,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 +1883,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 +1960,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 +1969,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 +1978,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 */
@@ -1960,7 +1997,8 @@ export declare type PropositionSelectorProps = {
     addClickoutSearchParams?: (searchParams: URLSearchParams) => URLSearchParams;
     /** Callback function called when an error occurs */
     onError?: (error: Error) => void;
-    /** Callback function to handle return click */
+    /** Callback function to handle return click
+     * @note The return link will not be displayed if this function is not provided */
     onReturnClick?: () => void;
     /**
      * Callback function fired when user actions occur.
@@ -2001,8 +2039,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 = {
@@ -2180,6 +2216,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" */
@@ -2799,6 +2848,8 @@ export declare type Translations = {
         return: string;
         sameFixedProviderTitle: string;
         sameFixedProviderDescription: string;
+        noMatchingPropositionTitle: string;
+        noMatchingPropositionDescription: string;
         productVersionTitle: string;
         benefitsTitle: string;
         moreBundleInfo: string;

package/package.json

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