react-native-klarna-inapp-sdk 2.2.4 → 2.3.0

package/lib/typescript/specs/KlarnaCheckoutViewNativeComponent.d.ts

@@ -0,0 +1,33 @@
+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 React from 'react';
+export interface RNKlarnaCheckoutViewProps extends ViewProps {
+    readonly returnUrl: string;
+    readonly onEvent: DirectEventHandler<Readonly<{
+        readonly productEvent: Readonly<{
+            readonly action: string;
+            readonly params: string;
+        }>;
+    }>>;
+    readonly onError: DirectEventHandler<Readonly<{
+        readonly error: Readonly<{
+            readonly isFatal: boolean;
+            readonly message: string;
+            readonly name: string;
+        }>;
+    }>>;
+    readonly onResized: DirectEventHandler<Readonly<{
+        readonly height: string;
+    }>>;
+}
+type KlarnaCheckoutViewNativeComponentType = HostComponent<RNKlarnaCheckoutViewProps>;
+interface RNKlarnaCheckoutViewNativeCommands {
+    setSnippet: (viewRef: React.ElementRef<KlarnaCheckoutViewNativeComponentType>, snippet: string) => void;
+    suspend: (viewRef: React.ElementRef<KlarnaCheckoutViewNativeComponentType>) => void;
+    resume: (viewRef: React.ElementRef<KlarnaCheckoutViewNativeComponentType>) => void;
+}
+export declare const RNKlarnaCheckoutViewCommands: RNKlarnaCheckoutViewNativeCommands;
+declare const _default: KlarnaCheckoutViewNativeComponentType;
+export default _default;
+//# sourceMappingURL=KlarnaCheckoutViewNativeComponent.d.ts.map

package/lib/typescript/specs/KlarnaCheckoutViewNativeComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KlarnaCheckoutViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/specs/KlarnaCheckoutViewNativeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sDAAsD,CAAC;AACtF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AACpF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,yBAA0B,SAAQ,SAAS;IAC1D,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,OAAO,EAAE,kBAAkB,CAClC,QAAQ,CAAC;QACP,QAAQ,CAAC,YAAY,EAAE,QAAQ,CAAC;YAC9B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;YACxB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;SACzB,CAAC,CAAC;KACJ,CAAC,CACH,CAAC;IACF,QAAQ,CAAC,OAAO,EAAE,kBAAkB,CAClC,QAAQ,CAAC;QACP,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC;YACvB,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;YAC1B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;YACzB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;SACvB,CAAC,CAAC;KACJ,CAAC,CACH,CAAC;IACF,QAAQ,CAAC,SAAS,EAAE,kBAAkB,CACpC,QAAQ,CAAC;QAEP,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;KACzB,CAAC,CACH,CAAC;CACH;AAED,KAAK,qCAAqC,GACxC,aAAa,CAAC,yBAAyB,CAAC,CAAC;AAE3C,UAAU,kCAAkC;IAC1C,UAAU,EAAE,CACV,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,qCAAqC,CAAC,EAChE,OAAO,EAAE,MAAM,KACZ,IAAI,CAAC;IACV,OAAO,EAAE,CACP,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,qCAAqC,CAAC,KAC7D,IAAI,CAAC;IACV,MAAM,EAAE,CACN,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,qCAAqC,CAAC,KAC7D,IAAI,CAAC;CACX;AAED,eAAO,MAAM,4BAA4B,EAAE,kCAGvC,CAAC;;AAEL,wBAE2C"}

package/lib/typescript/types/common/KlarnaMobileSDKError.d.ts

@@ -0,0 +1,6 @@
+export interface KlarnaMobileSDKError {
+    readonly isFatal: boolean;
+    readonly message: string;
+    readonly name: string;
+}
+//# sourceMappingURL=KlarnaMobileSDKError.d.ts.map

package/lib/typescript/types/common/KlarnaMobileSDKError.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KlarnaMobileSDKError.d.ts","sourceRoot":"","sources":["../../../../src/types/common/KlarnaMobileSDKError.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB"}

package/lib/typescript/types/common/KlarnaProductEvent.d.ts

@@ -0,0 +1,7 @@
+export interface KlarnaProductEvent {
+    readonly action: string;
+    readonly params: {
+        [key: string]: any;
+    };
+}
+//# sourceMappingURL=KlarnaProductEvent.d.ts.map

package/lib/typescript/types/common/KlarnaProductEvent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KlarnaProductEvent.d.ts","sourceRoot":"","sources":["../../../../src/types/common/KlarnaProductEvent.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;CACzC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-klarna-inapp-sdk",
   "title": "Klarna Mobile SDK React Native",
-  "version": "2.2.4",
+  "version": "2.3.0",
   "description": "This library wraps Klarna Mobile SDK and exposes its functionality as React Native components.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -86,10 +86,10 @@
     "turbo": "^1.10.7",
     "typescript": "^5.0.2"
   },
-  "dependencies": {},
   "engines": {
     "node": ">=16"
   },
+  "packageManager": "yarn@1.22.22",
   "react-native-builder-bob": {
     "source": "src",
     "output": "lib",

package/react-native-klarna-inapp-sdk.podspec

@@ -46,5 +46,5 @@ Pod::Spec.new do |s|
    end
   end
 
-  s.dependency 'KlarnaMobileSDK', '2.6.17'
+  s.dependency 'KlarnaMobileSDK', '2.6.19'
 end

package/src/KlarnaCheckoutView.tsx

@@ -0,0 +1,130 @@
+import React, { Component, type RefObject } from 'react';
+import type {
+  NativeMethods,
+  NativeSyntheticEvent,
+  ViewStyle,
+} from 'react-native';
+import type { KlarnaProductEvent } from './types/common/KlarnaProductEvent';
+import type { KlarnaMobileSDKError } from './types/common/KlarnaMobileSDKError';
+import RNKlarnaCheckoutView, {
+  RNKlarnaCheckoutViewCommands,
+  type RNKlarnaCheckoutViewProps,
+} from './specs/KlarnaCheckoutViewNativeComponent';
+
+export interface KlarnaCheckoutViewProps {
+  style?: ViewStyle;
+  readonly returnUrl: string;
+  readonly onEvent?: (klarnaProductEvent: KlarnaProductEvent) => void;
+  readonly onError?: (error: KlarnaMobileSDKError) => void;
+}
+
+interface KlarnaCheckoutViewState {
+  nativeViewHeight: number;
+}
+
+export class KlarnaCheckoutView extends Component<
+  KlarnaCheckoutViewProps,
+  KlarnaCheckoutViewState
+> {
+  checkoutViewRef: RefObject<
+    Component<RNKlarnaCheckoutViewProps> & Readonly<NativeMethods>
+  >;
+
+  constructor(props: KlarnaCheckoutViewProps) {
+    super(props);
+    this.state = {
+      nativeViewHeight: 0,
+    };
+    this.checkoutViewRef = React.createRef();
+  }
+
+  render() {
+    return (
+      <RNKlarnaCheckoutView
+        ref={this.checkoutViewRef}
+        /* eslint-disable-next-line react-native/no-inline-styles */
+        style={{
+          width: '100%',
+          height: this.state.nativeViewHeight,
+        }}
+        returnUrl={this.props.returnUrl || ''}
+        onEvent={(
+          event: NativeSyntheticEvent<
+            Readonly<{
+              readonly productEvent: Readonly<{
+                readonly action: string;
+                readonly params: string;
+              }>;
+            }>
+          >
+        ) => {
+          let params = {};
+          try {
+            params = JSON.parse(event.nativeEvent.productEvent.params);
+          } catch (e) {
+            console.error('Failed to parse productEvent.params', e);
+          }
+          const productEvent: KlarnaProductEvent = {
+            action: event.nativeEvent.productEvent.action,
+            params: params,
+          };
+          this.props.onEvent?.(productEvent);
+        }}
+        onError={(
+          event: NativeSyntheticEvent<
+            Readonly<{
+              readonly error: Readonly<{
+                readonly isFatal: boolean;
+                readonly message: string;
+                readonly name: string;
+              }>;
+            }>
+          >
+        ) => {
+          const mobileSdkError: KlarnaMobileSDKError = {
+            isFatal: event.nativeEvent.error.isFatal,
+            message: event.nativeEvent.error.message,
+            name: event.nativeEvent.error.name,
+          };
+          this.props.onError?.(mobileSdkError);
+        }}
+        onResized={(
+          event: NativeSyntheticEvent<
+            Readonly<{
+              readonly height: string;
+            }>
+          >
+        ) => {
+          const newHeight = Number(event.nativeEvent.height);
+          if (newHeight !== this.state.nativeViewHeight) {
+            console.log('onResized', newHeight);
+            this.setState({ nativeViewHeight: newHeight });
+          }
+        }}
+      />
+    );
+  }
+
+  setSnippet = (snippet: string) => {
+    const view = this.checkoutViewRef.current;
+    if (view != null) {
+      RNKlarnaCheckoutViewCommands.setSnippet(view, snippet);
+    }
+  };
+
+  suspend = () => {
+    const view = this.checkoutViewRef.current;
+    if (view != null) {
+      RNKlarnaCheckoutViewCommands.suspend(view);
+    }
+  };
+
+  resume = () => {
+    const view = this.checkoutViewRef.current;
+    if (view != null) {
+      RNKlarnaCheckoutViewCommands.resume(view);
+    }
+  };
+}
+
+export default KlarnaCheckoutView;

package/src/index.tsx

@@ -1,2 +1,3 @@
 export * from './KlarnaPaymentView';
 export * from './KlarnaStandaloneWebView';
+export * from './KlarnaCheckoutView';

package/src/specs/KlarnaCheckoutViewNativeComponent.ts

@@ -0,0 +1,58 @@
+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 React from 'react';
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface RNKlarnaCheckoutViewProps extends ViewProps {
+  readonly returnUrl: string;
+  readonly onEvent: DirectEventHandler<
+    Readonly<{
+      readonly productEvent: Readonly<{
+        readonly action: string;
+        readonly params: string;
+      }>;
+    }>
+  >;
+  readonly onError: DirectEventHandler<
+    Readonly<{
+      readonly error: Readonly<{
+        readonly isFatal: boolean;
+        readonly message: string;
+        readonly name: string;
+      }>;
+    }>
+  >;
+  readonly onResized: DirectEventHandler<
+    Readonly<{
+      // number not supported for events
+      readonly height: string;
+    }>
+  >;
+}
+
+type KlarnaCheckoutViewNativeComponentType =
+  HostComponent<RNKlarnaCheckoutViewProps>;
+
+interface RNKlarnaCheckoutViewNativeCommands {
+  setSnippet: (
+    viewRef: React.ElementRef<KlarnaCheckoutViewNativeComponentType>,
+    snippet: string
+  ) => void;
+  suspend: (
+    viewRef: React.ElementRef<KlarnaCheckoutViewNativeComponentType>
+  ) => void;
+  resume: (
+    viewRef: React.ElementRef<KlarnaCheckoutViewNativeComponentType>
+  ) => void;
+}
+
+export const RNKlarnaCheckoutViewCommands: RNKlarnaCheckoutViewNativeCommands =
+  codegenNativeCommands<RNKlarnaCheckoutViewNativeCommands>({
+    supportedCommands: ['setSnippet', 'suspend', 'resume'],
+  });
+
+export default codegenNativeComponent<RNKlarnaCheckoutViewProps>(
+  'RNKlarnaCheckoutView'
+) as KlarnaCheckoutViewNativeComponentType;

package/src/types/common/KlarnaMobileSDKError.ts

@@ -0,0 +1,5 @@
+export interface KlarnaMobileSDKError {
+  readonly isFatal: boolean;
+  readonly message: string;
+  readonly name: string;
+}

package/src/types/common/KlarnaProductEvent.ts

@@ -0,0 +1,4 @@
+export interface KlarnaProductEvent {
+  readonly action: string;
+  readonly params: { [key: string]: any };
+}