@klarna/react-native-klarna-network-messaging 0.0.1 → 2.6.0

package/package.json

@@ -1,10 +1,126 @@
 {
   "name": "@klarna/react-native-klarna-network-messaging",
-  "version": "0.0.1",
-  "description": "OIDC trusted publishing setup package for @klarna/react-native-klarna-network-messaging",
+  "version": "2.6.0",
+  "description": "React Native module for Klarna Network Messaging placements",
+  "main": "./src/index.tsx",
+  "codegenConfig": {
+    "name": "KlarnaNetworkMessagingSpec",
+    "type": "components",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "com.klarna.mobile.sdk.reactnative.klarnanetwork.messaging"
+    },
+    "ios": {
+      "componentProvider": {
+        "RNKlarnaMessagingPlacementView": "KlarnaMessagingPlacementViewWrapper"
+      }
+    }
+  },
   "keywords": [
-    "oidc",
-    "trusted-publishing",
-    "setup"
-  ]
+    "react-native",
+    "klarna",
+    "sdk",
+    "messaging"
+  ],
+  "repository": "https://github.com/klarna/react-native-klarna-inapp-sdk",
+  "author": "Mobile SDK <mobile.sdk@klarna.com>",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/klarna/react-native-klarna-inapp-sdk/issues"
+  },
+  "homepage": "https://github.com/klarna/react-native-klarna-inapp-sdk#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "*.podspec",
+    "!ios/build",
+    "!ios/Pods",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "create-react-native-library": {
+    "type": "fabric-view",
+    "languages": "kotlin-objc",
+    "tools": [
+      "eslint"
+    ],
+    "version": "0.62.0"
+  },
+  "types": "./src/index.tsx",
+  "react-native": "./src/index.tsx",
+  "source": "./src/index.tsx",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./src/index.tsx",
+      "react-native": "./src/index.tsx",
+      "default": "./src/index.tsx"
+    },
+    "./package.json": "./package.json"
+  },
+  "packageManager": "yarn@4.4.0",
+  "scripts": {
+    "prepack": "bob build",
+    "test": "jest",
+    "test:ios": "xcodebuild test -workspace ../../TestApp/ios/TestApp.xcworkspace -scheme 'react-native-klarna-network-messaging-Unit-Tests' -destination 'platform=iOS Simulator,name=iPhone 17 Pro' -derivedDataPath build/DerivedData",
+    "lint": "eslint \"src/**/*.{js,ts,tsx}\"",
+    "lint:fix": "eslint \"src/**/*.{js,ts,tsx}\" --fix",
+    "prettier": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
+    "prettier:fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@klarna/react-native-klarna-network-core": "workspace:*",
+    "@types/jest": "^29.5.4",
+    "@types/react": "^18.0.24",
+    "@types/react-native": "^0.72.2",
+    "jest": "^29.2.1",
+    "metro-react-native-babel-preset": "0.76.8",
+    "react": "18.2.0",
+    "react-native": "0.76.0",
+    "react-native-builder-bob": "^0.20.0",
+    "typescript": "^5.0.2"
+  },
+  "peerDependencies": {
+    "@klarna/react-native-klarna-network-core": ">=2.5.1",
+    "react": ">=18.2.0",
+    "react-native": ">=0.76.0 <1.0.x"
+  },
+  "engines": {
+    "node": ">=16"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      "typescript"
+    ]
+  },
+  "jest": {
+    "preset": "react-native",
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "/lib/"
+    ],
+    "transformIgnorePatterns": [
+      "node_modules/(?!(react-native|@react-native)/)"
+    ],
+    "moduleNameMapper": {
+      "^@klarna/react-native-klarna-network-core$": "<rootDir>/../klarna-network-core/src/index.tsx"
+    }
+  }
 }

package/react-native-klarna-network-messaging.podspec

@@ -0,0 +1,28 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-klarna-network-messaging"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.source       = { :git => "https://github.com/klarna/react-native-klarna-inapp-sdk.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/Sources/**/*.{h,m,mm,swift,cpp}"
+  s.private_header_files = "ios/Sources/**/*.h"
+  s.swift_version = '5.0'
+
+  install_modules_dependencies(s)
+
+  s.dependency 'KlarnaMobileSDK/KlarnaNetworkMessaging', '2.11.6'
+  s.dependency 'react-native-klarna-network-core', s.version.to_s
+
+  s.test_spec 'Tests' do |ts|
+    ts.source_files = 'ios/Tests/**/*.swift'
+  end
+end

package/src/KlarnaMessagingPlacementView.tsx

@@ -0,0 +1,139 @@
+import React, { Component } from 'react';
+import {
+  type NativeSyntheticEvent,
+  StyleSheet,
+  type ViewStyle,
+} from 'react-native';
+import type { KlarnaMessagingError } from './types/KlarnaMessagingError';
+import type { KlarnaMessagingPlacementConfiguration } from './types/KlarnaMessagingPlacementConfiguration';
+import { Klarna } from '@klarna/react-native-klarna-network-core';
+import RNKlarnaMessagingPlacementView from './Specs/KlarnaMessagingPlacementViewNativeComponent';
+import { errorFromNativeEvent, nextHeightOnResize } from './internal';
+
+/** Props accepted by {@link KlarnaMessagingPlacementView}. */
+export interface KlarnaMessagingPlacementViewProps {
+  /** Optional custom styles applied to the placement container. */
+  style?: ViewStyle;
+  /** The Klarna SDK instance obtained from {@link Klarna.initialize}. */
+  readonly instance: Klarna;
+  /** Placement type, amount, currency and theme for the messaging view. */
+  readonly configuration: KlarnaMessagingPlacementConfiguration;
+  /** Called when the native placement encounters an error. */
+  readonly onError?: (error: KlarnaMessagingError) => void;
+}
+
+interface KlarnaMessagingPlacementViewState {
+  nativeViewHeight: number;
+  hasReceivedResize: boolean;
+}
+
+/**
+ * Renders a Klarna messaging placement (e.g. credit-promotion banner or badge).
+ *
+ * The view automatically adjusts its height to match the content reported by the
+ * native SDK. Shows a minimum-height fallback while waiting for the first resize
+ * event, then collapses to zero when the native side reports height 0 (no content).
+ */
+export class KlarnaMessagingPlacementView extends Component<
+  KlarnaMessagingPlacementViewProps,
+  KlarnaMessagingPlacementViewState
+> {
+  private hasError = false;
+
+  constructor(props: KlarnaMessagingPlacementViewProps) {
+    super(props);
+    this.state = {
+      nativeViewHeight: 0,
+      hasReceivedResize: false,
+    };
+  }
+
+  /**
+   * Resets the error latch when any configuration prop changes so the view
+   * can accept new height reports from the native side after a recovery.
+   */
+  componentDidUpdate(prevProps: KlarnaMessagingPlacementViewProps) {
+    const prev = prevProps.configuration;
+    const next = this.props.configuration;
+    if (
+      prevProps.instance !== this.props.instance ||
+      prev.type !== next.type ||
+      prev.theme !== next.theme ||
+      prev.amount !== next.amount ||
+      prev.currency !== next.currency
+    ) {
+      this.hasError = false;
+      if (this.state.hasReceivedResize) {
+        this.setState({ hasReceivedResize: false });
+      }
+    }
+  }
+
+  render() {
+    const { configuration } = this.props;
+    return (
+      <RNKlarnaMessagingPlacementView
+        style={[
+          styles.container,
+          this.props.style,
+          this.state.nativeViewHeight > 0
+            ? { height: this.state.nativeViewHeight }
+            : this.state.hasReceivedResize
+              ? styles.collapsed
+              : styles.minHeightFallback,
+        ]}
+        instanceId={this.props.instance.instanceId}
+        placementType={configuration.type}
+        theme={configuration.theme ?? ''}
+        amount={String(configuration.amount)}
+        currency={configuration.currency}
+        onError={(
+          event: NativeSyntheticEvent<
+            Readonly<{
+              readonly error: Readonly<{
+                readonly message: string;
+                readonly name: string;
+              }>;
+            }>
+          >
+        ) => {
+          const error = errorFromNativeEvent(event.nativeEvent);
+          this.hasError = true;
+          this.setState({ nativeViewHeight: 0, hasReceivedResize: true });
+          this.props.onError?.(error);
+        }}
+        onResized={(
+          event: NativeSyntheticEvent<
+            Readonly<{
+              readonly height: string;
+            }>
+          >
+        ) => {
+          const next = nextHeightOnResize({
+            rawHeight: event.nativeEvent.height,
+            prevHeight: this.state.nativeViewHeight,
+            hasError: this.hasError,
+            isFirstResize: !this.state.hasReceivedResize,
+          });
+          if (next !== null) {
+            this.setState({ nativeViewHeight: next, hasReceivedResize: true });
+          }
+        }}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    overflow: 'hidden',
+  },
+  minHeightFallback: {
+    minHeight: 60,
+  },
+  collapsed: {
+    height: 0,
+    minHeight: 0,
+  },
+});

package/src/Specs/KlarnaMessagingPlacementViewNativeComponent.ts

@@ -0,0 +1,32 @@
+import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';
+import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
+import type { HostComponent } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface RNKlarnaMessagingPlacementViewProps extends ViewProps {
+  readonly instanceId: string;
+  readonly placementType: string;
+  readonly theme: string;
+  readonly amount: string;
+  readonly currency: string;
+  readonly onError: DirectEventHandler<
+    Readonly<{
+      readonly error: Readonly<{
+        readonly message: string;
+        readonly name: string;
+      }>;
+    }>
+  >;
+  readonly onResized: DirectEventHandler<
+    Readonly<{
+      readonly height: string;
+    }>
+  >;
+}
+
+type KlarnaMessagingPlacementViewNativeComponentType =
+  HostComponent<RNKlarnaMessagingPlacementViewProps>;
+
+export default codegenNativeComponent<RNKlarnaMessagingPlacementViewProps>(
+  'RNKlarnaMessagingPlacementView'
+) as KlarnaMessagingPlacementViewNativeComponentType;

package/src/index.tsx

@@ -0,0 +1,12 @@
+export {
+  KlarnaMessagingPlacementView,
+  type KlarnaMessagingPlacementViewProps,
+} from './KlarnaMessagingPlacementView';
+export { KlarnaMessagingPlacementType } from './types/KlarnaMessagingPlacementType';
+export type {
+  KlarnaMessagingPlacementConfiguration,
+  KlarnaMessagingCreditPromotionAutoSizeConfiguration,
+  KlarnaMessagingCreditPromotionBadgeConfiguration,
+} from './types/KlarnaMessagingPlacementConfiguration';
+export { KlarnaTheme } from '@klarna/react-native-klarna-network-core';
+export type { KlarnaMessagingError } from './types/KlarnaMessagingError';

package/src/internal.ts

@@ -0,0 +1,48 @@
+import type { KlarnaMessagingError } from './types/KlarnaMessagingError';
+
+interface NextHeightInput {
+  readonly rawHeight: string;
+  readonly prevHeight: number;
+  readonly hasError: boolean;
+  readonly isFirstResize?: boolean;
+}
+
+/**
+ * Derives the next view height from a native `onResized` event. Returns
+ * `null` (skip update) when the view is in an error state, the raw value
+ * is empty/non-finite/negative, or the height hasn't actually changed.
+ *
+ * On the first resize, height 0 is accepted so the view can collapse when
+ * native reports no content. Subsequent 0→0 duplicates are still skipped.
+ */
+export function nextHeightOnResize({
+  rawHeight,
+  prevHeight,
+  hasError,
+  isFirstResize,
+}: NextHeightInput): number | null {
+  if (hasError) {
+    return null;
+  }
+  if (rawHeight.trim() === '') {
+    return null;
+  }
+  const parsed = Number(rawHeight);
+  if (!Number.isFinite(parsed) || parsed < 0) {
+    return null;
+  }
+  if (parsed === prevHeight && !isFirstResize) {
+    return null;
+  }
+  return parsed;
+}
+
+/** Extracts a `KlarnaMessagingError` from the nested native event payload. */
+export function errorFromNativeEvent(event: {
+  readonly error: { readonly message: string; readonly name: string };
+}): KlarnaMessagingError {
+  return {
+    message: event.error.message,
+    name: event.error.name,
+  };
+}

package/src/types/KlarnaMessagingError.ts

@@ -0,0 +1,7 @@
+/** Describes an error reported by a Klarna messaging placement. */
+export interface KlarnaMessagingError {
+  /** A machine-readable error identifier. */
+  readonly name: string;
+  /** A human-readable description of the error. */
+  readonly message: string;
+}

package/src/types/KlarnaMessagingPlacementConfiguration.ts

@@ -0,0 +1,29 @@
+import type { KlarnaTheme } from '@klarna/react-native-klarna-network-core';
+import type { KlarnaMessagingPlacementType } from './KlarnaMessagingPlacementType';
+
+/** Base configuration shared by all messaging placement types. */
+interface KlarnaMessagingPlacementConfigurationBase {
+  /** The visual theme for the placement. Defaults to the system theme when omitted. */
+  readonly theme?: KlarnaTheme;
+  /** The purchase amount in minor units (e.g. cents). */
+  readonly amount: number;
+  /** The ISO 4217 currency code (e.g. "USD", "SEK"). */
+  readonly currency: string;
+}
+
+/** Configuration for a credit-promotion placement that automatically sizes itself to fit its content. */
+export interface KlarnaMessagingCreditPromotionAutoSizeConfiguration extends KlarnaMessagingPlacementConfigurationBase {
+  /** Discriminator identifying this as a credit-promotion auto-size placement. */
+  readonly type: KlarnaMessagingPlacementType.CreditPromotionAutoSize;
+}
+
+/** Configuration for a credit-promotion placement rendered as a compact badge. */
+export interface KlarnaMessagingCreditPromotionBadgeConfiguration extends KlarnaMessagingPlacementConfigurationBase {
+  /** Discriminator identifying this as a credit-promotion badge placement. */
+  readonly type: KlarnaMessagingPlacementType.CreditPromotionBadge;
+}
+
+/** Union of all supported messaging placement configurations. */
+export type KlarnaMessagingPlacementConfiguration =
+  | KlarnaMessagingCreditPromotionAutoSizeConfiguration
+  | KlarnaMessagingCreditPromotionBadgeConfiguration;

package/src/types/KlarnaMessagingPlacementType.ts

@@ -0,0 +1,7 @@
+/** The visual layout style of a Klarna messaging placement. */
+export enum KlarnaMessagingPlacementType {
+  /** A placement that automatically adjusts its size to fit the content. */
+  CreditPromotionAutoSize = 'CreditPromotionAutoSize',
+  /** A compact badge-style placement. */
+  CreditPromotionBadge = 'CreditPromotionBadge',
+}