@wlloyalty/wll-react-sdk 1.0.108 → 1.0.109

package/dist/types/components/organisms/PointsTile/PointsTile.stories.d.ts

@@ -31,3 +31,9 @@ export declare const HalfWithMultiplier: import("@storybook/csf").AnnotatedStory
 export declare const FullWithMultiplier: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
     tile: import("../../../types/tile").Tile;
 }, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const WithCtaLink: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../../types/tile").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const WithCtaLinkHalf: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../../types/tile").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;

package/dist/types/components/organisms/PointsTile/index.d.ts

@@ -12,6 +12,7 @@ export declare const PointsTile: (({ tile }: PointsTileProps) => JSX.Element | n
     Media: ({ isFullSize, }: {
         isFullSize: boolean;
     }) => JSX.Element | null;
+    Chevron: () => JSX.Element | null;
 };
 declare const _default: (props: Omit<PointsTileProps, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps) => React.JSX.Element;
 export default _default;

package/dist/types/components/organisms/PointsTile/points-tile-chevron.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Renders a chevron icon for a Roundup Tile.
+ *
+ * @returns JSX.Element
+ */
+export declare const PointsTileChevron: () => JSX.Element | null;

package/dist/types/components/organisms/PointsTile/styles.d.ts

@@ -8,6 +8,9 @@ import { ImageStyle, TextStyle, ViewStyle } from 'react-native';
 export declare const usePointsTileStyles: (isFullSize?: boolean) => {
     container: ViewStyle;
     contentContainer: ViewStyle;
+    contentColumn: ViewStyle;
+    mediaColumn: ViewStyle;
+    chevronContainer: ViewStyle;
     suffix: TextStyle;
     pointsWithSuffix: ViewStyle;
     imageContainer: ViewStyle;

package/dist/types/components/organisms/RoundupTile/RoundupTile.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/components/organisms/RoundupTile/RoundupTile.stories.d.ts

@@ -0,0 +1,33 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta;
+export default _default;
+export declare const ZeroBalance: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
+    tile: import("../../../types/tile").Tile;
+}>;
+export declare const StandardBalance: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
+    tile: import("../../../types/tile").Tile;
+}>;
+export declare const CashbackRewards: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
+    tile: import("../../../types/tile").Tile;
+}>;
+export declare const StarRewards: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
+    tile: import("../../../types/tile").Tile;
+}>;
+export declare const MileageProgram: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
+    tile: import("../../../types/tile").Tile;
+}>;
+export declare const AccountBalance: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
+    tile: import("../../../types/tile").Tile;
+}>;
+export declare const RewardBalance: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
+    tile: import("../../../types/tile").Tile;
+}>;
+export declare const EliteBalance: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
+    tile: import("../../../types/tile").Tile;
+}>;
+export declare const WithCtaLink: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
+    tile: import("../../../types/tile").Tile;
+}>;
+export declare const WithCtaLinkHalf: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
+    tile: import("../../../types/tile").Tile;
+}>;

package/dist/types/components/organisms/RoundupTile/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Tile } from '../../../types/tile';
+type RoundupTileProps = {
+    tile: Tile;
+};
+/**
+ * The PointsTile component with subcomponents attached.
+ */
+export declare const RoundupTile: (({ tile }: RoundupTileProps) => JSX.Element | null) & {
+    Title: () => JSX.Element | null;
+    Points: () => JSX.Element | null;
+    Media: ({ isFullSize, }: {
+        isFullSize: boolean;
+    }) => JSX.Element | null;
+    Chevron: () => JSX.Element | null;
+};
+declare const _default: (props: Omit<RoundupTileProps, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps) => React.JSX.Element;
+export default _default;

package/dist/types/components/organisms/RoundupTile/roundup-tile-chevron.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Renders a chevron icon for a Roundup Tile.
+ *
+ * @returns JSX.Element
+ */
+export declare const RoundupTileChevron: () => JSX.Element | null;

package/dist/types/components/organisms/RoundupTile/roundup-tile-formatted-points.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Renders formatted points value for a Roundup Tile.
+ *
+ * @returns JSX.Element or null if points are undefined or zero
+ */
+export declare const RoundupTileFormattedPoints: () => JSX.Element | null;

package/dist/types/components/organisms/RoundupTile/roundup-tile-media.d.ts

@@ -0,0 +1,10 @@
+type RoundupTileMediaProps = {
+    isFullSize: boolean;
+};
+/**
+ * Renders the media of a Points Tile.
+ *
+ * @returns JSX.Element or null if media is not present
+ */
+export declare const RoundupTileMedia: ({ isFullSize, }: RoundupTileMediaProps) => JSX.Element | null;
+export {};

package/dist/types/components/organisms/RoundupTile/roundup-tile-title.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Renders the title of a Roundup Tile.
+ *
+ * @returns JSX.Element or null if no title is present
+ */
+export declare const RoundupTileTitle: () => JSX.Element | null;

package/dist/types/components/organisms/RoundupTile/styles.d.ts

@@ -0,0 +1,18 @@
+import { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+/**
+ * Custom hook that returns the styles for the RoundupTile component.
+ * Applies responsive styling based on the current device.
+ *
+ * @returns StyleSheet styles for the RoundupTile component
+ */
+export declare const useRoundupTileStyles: (isFullSize?: boolean) => {
+    container: ViewStyle;
+    contentContainer: ViewStyle;
+    contentColumn: ViewStyle;
+    mediaColumn: ViewStyle;
+    chevronContainer: ViewStyle;
+    suffix: TextStyle;
+    pointsWithSuffix: ViewStyle;
+    imageContainer: ViewStyle;
+    image: ImageStyle;
+};

package/dist/types/components/organisms/index.d.ts

@@ -7,3 +7,4 @@ export { default as RewardCategoryTile } from './RewardCategoryTile';
 export { default as RewardTile } from './RewardTile';
 export { default as Section } from './Section';
 export { default as TierTileUpdated } from './TierTileUpdated';
+export { default as RoundupTile } from './RoundupTile';

package/dist/types/mocks/tiles/pointsTile.d.ts

@@ -18,5 +18,7 @@ export declare const createPointsTileMock: (config?: PointsTileMockConfig) => {
         pointsPrefix: string | null;
         pointsSuffix: string | null;
         artworkUrl: string | null;
+        ctaLink: string | null | undefined;
+        ctaLinkTarget: import("../../types/tile").CTALinkTarget | undefined;
     };
 };

package/dist/types/mocks/tiles/roundupTile.d.ts

@@ -0,0 +1,23 @@
+import { CTALinkTarget, RoundupTileConfig, TileHeight, TileType } from '../../types/tile';
+export type RoundupTileMockConfig = Partial<RoundupTileConfig> & {
+    active?: boolean;
+    tileHeight?: TileHeight;
+};
+export declare const createRoundupTileMock: (config?: RoundupTileMockConfig) => {
+    id: string;
+    type: TileType;
+    active: boolean;
+    createdAt: string;
+    updatedAt: string;
+    tileHeight: TileHeight;
+    priority: number;
+    configuration: {
+        title: string | null;
+        amount: number;
+        amountPrefix: string | null;
+        amountSuffix: string | null;
+        artworkUrl: string | null;
+        ctaLink: string | null | undefined;
+        ctaLinkTarget: CTALinkTarget | undefined;
+    };
+};

package/dist/types/types/tile.d.ts

@@ -18,7 +18,8 @@ export declare enum TileType {
     Reward = "REWARD",
     Badge = "BADGE",
     RewardCategory = "REWARD_CATEGORY",
-    Tier = "TIER"
+    Tier = "TIER",
+    Roundup = "ROUND_UP_BALANCE"
 }
 export declare enum TileHeight {
     Half = "HALF",
@@ -40,6 +41,17 @@ export declare class PointsTileConfig {
     pointsSuffix?: string | null;
     artworkUrl?: string | null;
     points?: number;
+    ctaLink?: string | null;
+    ctaLinkTarget?: CTALinkTarget;
+}
+export declare class RoundupTileConfig {
+    title?: string | null;
+    amountPrefix?: string | null;
+    amountSuffix?: string | null;
+    artworkUrl?: string | null;
+    amount?: number;
+    ctaLink?: string | null;
+    ctaLinkTarget?: CTALinkTarget;
 }
 export declare class ContentTileConfig {
     title?: string | null;

package/dist/web.js

@@ -19091,6 +19091,7 @@ exports.TileType = void 0;
   TileType["Badge"] = "BADGE";
   TileType["RewardCategory"] = "REWARD_CATEGORY";
   TileType["Tier"] = "TIER";
+  TileType["Roundup"] = "ROUND_UP_BALANCE";
 })(exports.TileType || (exports.TileType = {}));
 exports.TileHeight = void 0;
 (function (TileHeight) {
@@ -19105,6 +19106,10 @@ var PointsTileConfig = /** @class */function () {
   function PointsTileConfig() {}
   return PointsTileConfig;
 }();
+var RoundupTileConfig = /** @class */function () {
+  function RoundupTileConfig() {}
+  return RoundupTileConfig;
+}();
 var ContentTileConfig = /** @class */function () {
   function ContentTileConfig() {}
   return ContentTileConfig;
@@ -21739,7 +21744,14 @@ var usePointsTileStyles = function (isFullSize) {
       justifyContent: 'space-between'
     },
     contentContainer: {
-      width: isFullSize ? '100%' : 'auto'
+      width: '100%'
+    },
+    contentColumn: {
+      flexGrow: 1
+    },
+    mediaColumn: {
+      flexDirection: 'row',
+      alignItems: 'center'
     },
     suffix: {
       fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet),
@@ -21750,6 +21762,9 @@ var usePointsTileStyles = function (isFullSize) {
       alignItems: 'center',
       justifyContent: 'center'
     },
+    chevronContainer: {
+      marginLeft: !isFullSize ? useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet) : 0
+    },
     imageContainer: {
       width: isFullSize ? '100%' : isDesktop ? 57 : 40,
       height: isFullSize ? '50%' : isDesktop ? 57 : 40,
@@ -21856,6 +21871,30 @@ var PointsTileTitle = function () {
   }, title);
 };
 
+/**
+ * Renders a chevron icon for a Roundup Tile.
+ *
+ * @returns JSX.Element
+ */
+var PointsTileChevron = function () {
+  var _a, _b;
+  var tileContext = useTileContext();
+  var sdk = useWllSdk();
+  var styles = usePointsTileStyles();
+  if (!isContextValid(tileContext)) return null;
+  var ctaLink = tileContext.configuration.ctaLink;
+  if (!ctaLink) return null;
+  return /*#__PURE__*/React.createElement(View$2, {
+    style: styles.chevronContainer
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ChevronRight",
+    size: 16,
+    color: ((_b = (_a = sdk.theme) === null || _a === void 0 ? void 0 : _a.derivedSurfaceText) === null || _b === void 0 ? void 0 : _b[20]) || '#000000',
+    role: "img",
+    accessibilityLabel: "View balance"
+  }));
+};
+
 /**
  * The PointsTile component renders a tile with media, title, and formatted points.
  *
@@ -21875,11 +21914,15 @@ var PointsTileRoot = function (_a) {
     isFullSize: true
   }), /*#__PURE__*/React.createElement(View$2, {
     style: styles.container
+  }, /*#__PURE__*/React.createElement(Row, {
+    style: styles.contentContainer
+  }, /*#__PURE__*/React.createElement(Column, {
+    style: styles.contentColumn
+  }, /*#__PURE__*/React.createElement(PointsTile.Title, null), /*#__PURE__*/React.createElement(PointsTile.Points, null)), /*#__PURE__*/React.createElement(Column, {
+    style: styles.mediaColumn
   }, !isFullSize && /*#__PURE__*/React.createElement(PointsTile.Media, {
     isFullSize: false
-  }), /*#__PURE__*/React.createElement(Column, {
-    style: styles.contentContainer
-  }, /*#__PURE__*/React.createElement(PointsTile.Title, null), /*#__PURE__*/React.createElement(PointsTile.Points, null))));
+  }), /*#__PURE__*/React.createElement(PointsTile.Chevron, null)))));
 };
 /**
  * The PointsTile component with subcomponents attached.
@@ -21887,7 +21930,8 @@ var PointsTileRoot = function (_a) {
 var PointsTile = Object.assign(PointsTileRoot, {
   Title: PointsTileTitle,
   Points: PointsTileFormattedPoints,
-  Media: PointsTileMedia
+  Media: PointsTileMedia,
+  Chevron: PointsTileChevron
 });
 var PointsTile$1 = withTileFetching(PointsTile);
 
@@ -22438,8 +22482,217 @@ TierTile.Full = TierTileFull;
 TierTile.Half = TierTileHalf;
 TierTile.Empty = TierTileEmpty;
 
+/**
+ * Custom hook that returns the styles for the RoundupTile component.
+ * Applies responsive styling based on the current device.
+ *
+ * @returns StyleSheet styles for the RoundupTile component
+ */
+var useRoundupTileStyles = function (isFullSize) {
+  var _a = useResponsive$1(),
+    isDesktop = _a.isDesktop,
+    isTablet = _a.isTablet;
+  var theme = useWllSdk().theme;
+  return StyleSheet$1.create({
+    container: {
+      paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
+      width: '100%',
+      flexDirection: isFullSize ? 'row' : 'row-reverse',
+      alignItems: 'center',
+      justifyContent: 'space-between'
+    },
+    contentContainer: {
+      width: '100%',
+      marginTop: isFullSize ? useResponsiveValue(theme.sizes.xxl, theme.sizes.md, isDesktop, isTablet) : 0
+    },
+    contentColumn: {
+      flexGrow: 1
+    },
+    mediaColumn: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    suffix: {
+      fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet),
+      color: theme.primary
+    },
+    pointsWithSuffix: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    chevronContainer: {
+      marginLeft: !isFullSize ? useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet) : 0
+    },
+    imageContainer: {
+      width: isFullSize ? '100%' : isDesktop ? 57 : 40,
+      height: isFullSize ? '50%' : isDesktop ? 57 : 40,
+      marginBottom: isFullSize ? useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet) : 0,
+      backgroundColor: isFullSize ? theme.alphaDerivedPrimary[20] : theme.surface,
+      justifyContent: 'center',
+      alignItems: 'center',
+      overflow: 'hidden'
+    },
+    image: {
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      resizeMode: 'contain'
+    }
+  });
+};
+
+/**
+ * Renders formatted points value for a Roundup Tile.
+ *
+ * @returns JSX.Element or null if points are undefined or zero
+ */
+var RoundupTileFormattedPoints = function () {
+  var styles = useRoundupTileStyles();
+  var tileContext = useTileContext();
+  if (!isContextValid(tileContext)) return null;
+  var _a = tileContext.configuration,
+    _b = _a.amountPrefix,
+    amountPrefix = _b === void 0 ? '' : _b,
+    _c = _a.amountSuffix,
+    amountSuffix = _c === void 0 ? '' : _c,
+    _d = _a.amount,
+    amount = _d === void 0 ? 0 : _d;
+  if (amount === undefined) return null;
+  var fullPointsText = "".concat(amountPrefix).concat(amount, " ").concat(amountSuffix).trim();
+  return /*#__PURE__*/React.createElement(View$2, {
+    testID: "roundup-tile-amount",
+    role: "article",
+    accessibilityLabel: "Amount: ".concat(fullPointsText)
+  }, /*#__PURE__*/React.createElement(Row, {
+    align: "center",
+    justify: "start"
+  }, amountPrefix ? (/*#__PURE__*/React.createElement(Text, {
+    variant: "caption",
+    testID: "roundup-tile-prefix"
+  }, amountPrefix)) : null, /*#__PURE__*/React.createElement(Text, {
+    variant: "caption",
+    testID: "roundup-tile-value"
+  }, amount), amountSuffix ? (/*#__PURE__*/React.createElement(Text, {
+    variant: "caption",
+    style: styles.suffix,
+    testID: "roundup-tile-suffix"
+  }, amountSuffix)) : null));
+};
+
+/**
+ * Renders the media of a Points Tile.
+ *
+ * @returns JSX.Element or null if media is not present
+ */
+var RoundupTileMedia = function (_a) {
+  var isFullSize = _a.isFullSize;
+  var tileContext = useTileContext();
+  if (!isContextValid(tileContext)) return null;
+  var _b = tileContext.configuration,
+    artworkUrl = _b.artworkUrl,
+    _c = _b.title,
+    title = _c === void 0 ? 'Balance' : _c;
+  var styles = useRoundupTileStyles(isFullSize);
+  if (!artworkUrl) return null;
+  return /*#__PURE__*/React.createElement(View$2, {
+    testID: "roundup-tile-media",
+    style: styles.imageContainer,
+    role: "img",
+    accessibilityLabel: "Roundup tile image for ".concat(title)
+  }, /*#__PURE__*/React.createElement(Image$2, {
+    source: {
+      uri: artworkUrl
+    },
+    style: styles.image,
+    resizeMode: isFullSize ? 'cover' : 'contain'
+  }));
+};
+
+/**
+ * Renders the title of a Roundup Tile.
+ *
+ * @returns JSX.Element or null if no title is present
+ */
+var RoundupTileTitle = function () {
+  var tileContext = useTileContext();
+  if (!isContextValid(tileContext)) return null;
+  var title = tileContext.configuration.title;
+  if (!title) return null;
+  return /*#__PURE__*/React.createElement(Text, {
+    variant: "eyebrow",
+    testID: "roundup-tile-title",
+    role: "heading",
+    accessibilityLabel: title
+  }, title);
+};
+
+/**
+ * Renders a chevron icon for a Roundup Tile.
+ *
+ * @returns JSX.Element
+ */
+var RoundupTileChevron = function () {
+  var _a, _b;
+  var tileContext = useTileContext();
+  var sdk = useWllSdk();
+  var styles = useRoundupTileStyles();
+  if (!isContextValid(tileContext)) return null;
+  var ctaLink = tileContext.configuration.ctaLink;
+  if (!ctaLink) return null;
+  return /*#__PURE__*/React.createElement(View$2, {
+    style: styles.chevronContainer
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ChevronRight",
+    size: 16,
+    color: ((_b = (_a = sdk.theme) === null || _a === void 0 ? void 0 : _a.derivedSurfaceText) === null || _b === void 0 ? void 0 : _b[20]) || '#000000',
+    role: "img",
+    accessibilityLabel: "View balance"
+  }));
+};
+
+/**
+ * The PointsTile component renders a tile with media, title, and formatted points.
+ *
+ * @param props - Component props
+ * @returns JSX.Element or null if tile is inactive or missing required props
+ */
+var RoundupTileRoot = function (_a) {
+  var tile = _a.tile;
+  if (!tile || !tile.active || !tile.configuration) return null;
+  var config = tile.configuration;
+  if (!config) return null;
+  var isFullSize = useTileSize(tile).isFullSize;
+  var styles = useRoundupTileStyles(isFullSize);
+  return /*#__PURE__*/React.createElement(BaseTile, {
+    tile: tile
+  }, isFullSize && /*#__PURE__*/React.createElement(RoundupTile.Media, {
+    isFullSize: true
+  }), /*#__PURE__*/React.createElement(View$2, {
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(Row, {
+    style: styles.contentContainer
+  }, /*#__PURE__*/React.createElement(Column, {
+    style: styles.contentColumn
+  }, /*#__PURE__*/React.createElement(RoundupTile.Title, null), /*#__PURE__*/React.createElement(RoundupTile.Points, null)), /*#__PURE__*/React.createElement(Column, {
+    style: styles.mediaColumn
+  }, !isFullSize && /*#__PURE__*/React.createElement(RoundupTile.Media, {
+    isFullSize: false
+  }), /*#__PURE__*/React.createElement(RoundupTile.Chevron, null)))));
+};
+/**
+ * The PointsTile component with subcomponents attached.
+ */
+var RoundupTile = Object.assign(RoundupTileRoot, {
+  Title: RoundupTileTitle,
+  Points: RoundupTileFormattedPoints,
+  Media: RoundupTileMedia,
+  Chevron: RoundupTileChevron
+});
+var RoundupTile$1 = withTileFetching(RoundupTile);
+
 var _a;
-var TILE_COMPONENTS = (_a = {}, _a[exports.TileType.Content] = ContentTile$1, _a[exports.TileType.Badge] = BadgeTile$1, _a[exports.TileType.Tier] = TierTile, _a[exports.TileType.Points] = PointsTile$1, _a[exports.TileType.Reward] = RewardTile$1, _a[exports.TileType.RewardCategory] = RewardCategoryTile$1, _a[exports.TileType.Banner] = BannerTile$1, _a);
+var TILE_COMPONENTS = (_a = {}, _a[exports.TileType.Content] = ContentTile$1, _a[exports.TileType.Badge] = BadgeTile$1, _a[exports.TileType.Tier] = TierTile, _a[exports.TileType.Points] = PointsTile$1, _a[exports.TileType.Reward] = RewardTile$1, _a[exports.TileType.RewardCategory] = RewardCategoryTile$1, _a[exports.TileType.Banner] = BannerTile$1, _a[exports.TileType.Roundup] = RoundupTile$1, _a);
 /**
  * TileContainer component to render a list of tiles with proper layout and spacing.
  */
@@ -22516,6 +22769,8 @@ exports.RewardCategoryTile = RewardCategoryTile$1;
 exports.RewardCategoryTileConfig = RewardCategoryTileConfig;
 exports.RewardTile = RewardTile$1;
 exports.RewardTileConfig = RewardTileConfig;
+exports.RoundupTile = RoundupTile$1;
+exports.RoundupTileConfig = RoundupTileConfig;
 exports.Row = Row;
 exports.Section = Section;
 exports.SectionHeader = SectionHeader;