@mobielnl/elements 0.12.24 → 0.12.26

package/dist/index.d.ts

@@ -30,6 +30,23 @@ export declare type AddToCartEvent = {
     proposition: ProductCardPropositionFragment;
 };
 
+declare type AlertClassNames = {
+    /** Alert container */
+    base?: string;
+    /** Alert title text */
+    title?: string;
+    /** Alert description text */
+    description?: string;
+    /** Alert main content wrapper */
+    mainWrapper?: string;
+    /** Alert close button */
+    closeButton?: string;
+    /** Alert icon wrapper */
+    iconWrapper?: string;
+    /** Alert icon */
+    alertIcon?: string;
+};
+
 declare type AverageSectionClassNames = {
     /** Container for the average per month section */
     container?: string;
@@ -88,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
  */
@@ -156,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
  */
@@ -232,6 +262,10 @@ declare type CheckboxGroupClassNames = {
         label?: string;
         /** Bundle Price component class styling slots - see type `BundlePriceClassNames` */
         bundlePrice?: BundlePriceClassNames;
+        /** Image wrapper */
+        imgWrapper?: string;
+        /** Image */
+        img?: string;
     };
 };
 
@@ -572,22 +606,7 @@ declare type ErrorAlertClassNames = {
     /** Main wrapper container for the error component */
     base?: string;
     /** Alert component class styling slots */
-    alert?: {
-        /** Alert container */
-        base?: string;
-        /** Alert title text */
-        title?: string;
-        /** Alert description text */
-        description?: string;
-        /** Alert main content wrapper */
-        mainWrapper?: string;
-        /** Alert close button */
-        closeButton?: string;
-        /** Alert icon wrapper */
-        iconWrapper?: string;
-        /** Alert icon */
-        alertIcon?: string;
-    };
+    alert?: AlertClassNames;
     /** Refresh page button */
     button?: string;
 };
@@ -1832,6 +1851,11 @@ export declare function PropositionSelector({ propositionKey, classNames, initia
 export declare type PropositionSelectorClassNames = {
     /** Wrapper container for the entire proposition selector */
     base?: string;
+    /** Main content wrapper container */
+    mainContentWrapper?: string;
+    /** 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` */
@@ -1884,6 +1908,10 @@ export declare type PropositionSelectorClassNames = {
     };
     /** BundleSelector component class styling slots - see type `BundleSelectorClassNames` */
     bundleSelector?: BundleSelectorClassNames;
+    /** Retention section class styling slots - see type `SectionClassNames` */
+    retentionSelector?: SectionClassNames_2;
+    /** Modification section class styling slots - see type `SectionClassNames` */
+    modificationSelector?: SectionClassNames_2;
     /** BundleModal component class styling slots - see type `BundleModalClassNames` */
     bundleModal?: BundleModalClassNames;
     /** Profile buttons component class styling slots - see type `SelectorClassNames` */
@@ -1936,22 +1964,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
      *   }
      * }}
      */
@@ -1967,6 +1999,99 @@ 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 = {
+    __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 = {
@@ -2046,6 +2171,10 @@ declare type RadioGroupClassNames = {
         description?: string;
         /** Bundle Price component class styling slots - see type `BundlePriceClassNames` */
         bundlePrice?: BundlePriceClassNames;
+        /** Image wrapper */
+        imgWrapper?: string;
+        /** Image */
+        img?: string;
     };
 };
 
@@ -2114,6 +2243,20 @@ declare type SectionClassNames = {
     table?: TableClassNames;
 };
 
+/**
+ * ClassNames for styling different parts of the `Section` component
+ */
+declare type SectionClassNames_2 = {
+    /** Root container */
+    base?: string;
+    /** Section title */
+    title?: string;
+    /** Section number pill */
+    number?: string;
+    /** Section description */
+    description?: string;
+};
+
 /**
  * ClassNames for styling different parts of the `SelectFilter` component
  */
@@ -2154,10 +2297,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
@@ -2654,6 +2795,8 @@ export declare type Translations = {
     };
     propositionSelector: {
         return: string;
+        sameFixedProviderTitle: string;
+        sameFixedProviderDescription: string;
         productVersionTitle: string;
         benefitsTitle: string;
         bundleSelectorTitle: string;
@@ -2669,6 +2812,14 @@ export declare type Translations = {
         installationFee: string;
         none: string;
         showMore: string;
+        retentionTitle: string;
+        retentionDescription: string;
+        retentionYes: string;
+        retentionNo: string;
+        modificationTitle: string;
+        modificationDescription: string;
+        modificationYes: string;
+        modificationNo: string;
     };
     handsetCreditSelector: {
         handsetPriceInfo: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobielnl/elements",
-  "version": "0.12.24",
+  "version": "0.12.26",
   "description": "Mobiel.nl Elements - React component library for partner websites",
   "private": false,
   "type": "module",
@@ -50,14 +50,14 @@
     "@graphql-codegen/typescript-operations": "^4.4.0",
     "@heroui/accordion": "^2.2.29",
     "@heroui/alert": "^2.2.29",
-    "@heroui/avatar": "^2.2.24",
+    "@heroui/avatar": "^2.2.25",
     "@heroui/badge": "^2.2.18",
     "@heroui/button": "^2.2.29",
     "@heroui/card": "^2.2.27",
     "@heroui/checkbox": "^2.3.29",
     "@heroui/chip": "^2.2.24",
     "@heroui/divider": "^2.2.21",
-    "@heroui/image": "^2.2.18",
+    "@heroui/image": "^2.2.19",
     "@heroui/input": "^2.4.30",
     "@heroui/link": "^2.2.25",
     "@heroui/listbox": "^2.3.28",