@vitraun/react-native 0.1.0

package/LICENSE.txt

@@ -0,0 +1,10 @@
+Vitraun — software license
+
+Copyright (c) Vitraun. All rights reserved.
+
+This package is proprietary. Redistribution, modification, sublicensing,
+or use beyond the rights expressly granted in your written agreement with
+Vitraun is prohibited unless Vitraun authorizes otherwise in writing.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND. For
+licensing inquiries, contact Vitraun.

package/README.md

@@ -0,0 +1,90 @@
+# @vitraun/react-native
+
+Official Vitraun Try-On adapter for React Native apps. The SDK calls **embed-init**, loads the returned **`vtoUrl`** in a WebView, and forwards cart events to your app.
+
+The integrator **does not** hardcode the try-on URL.
+
+## Install
+
+```bash
+npm install @vitraun/react-native react-native-webview
+```
+
+Peer dependencies: `react`, `react-native`, `react-native-webview`.
+
+## Prerequisites (Vitraun panel)
+
+- Register **merchant ID** and **widget ID**
+- Enable **`allowWebView`** on the channel
+- Register **iOS bundle ID** and/or **Android package name**
+- Add camera permission:
+  - iOS: `NSCameraUsageDescription` in `Info.plist`
+  - Android: `CAMERA` in `AndroidManifest.xml`
+
+## Usage
+
+```tsx
+import { VitraunTryOn } from '@vitraun/react-native'
+
+export const TryOnScreen = () => (
+  <VitraunTryOn
+    merchantId="vtrn-mch-key-00000000-0000-4000-8000-000000000001"
+    widgetId="vtrn-wdg-key-00000000-0000-4000-8000-000000000002"
+    lang="pt-BR"
+    platform="ios"
+    bundleId="com.sua.loja"
+    packageName="com.sua.loja"
+    isolatedSku="8028997081552"
+    basketOpensIn="event"
+    checkoutOpensIn="event"
+    onEvent={(event) => {
+      switch (event.type) {
+        case 'addToCart':
+          break
+        case 'redirectToCart':
+          break
+        default:
+          break
+      }
+    }}
+  />
+)
+```
+
+## Init without UI
+
+```ts
+import { initializeVitraunSession } from '@vitraun/react-native'
+
+const session = await initializeVitraunSession({
+  state: {
+    merchantId: 'vtrn-mch-key-...',
+    widgetId: 'vtrn-wdg-key-...',
+    lang: 'en-US',
+    app: { platform: 'android', packageName: 'com.sua.loja' },
+  },
+})
+
+// session.vtoUrl — load in your own WebView if needed
+```
+
+## Staging
+
+```tsx
+<VitraunTryOn env="staging" merchantId="..." widgetId="..." />
+```
+
+## Events
+
+Same contract as `@vitraun/webar`:
+
+- `addToCart`
+- `removeFromCart`
+- `redirectToCart`
+- `analysisFinished`
+
+## Related docs
+
+- Mobile HTTP contract: [`../docs/mobile-sdk-contract.md`](../docs/mobile-sdk-contract.md)
+- iOS native stub: [`../ios/README.md`](../ios/README.md)
+- Android native stub: [`../android/README.md`](../android/README.md)

package/dist/index.d.ts

@@ -0,0 +1,116 @@
+import type { StyleProp, ViewStyle } from 'react-native'
+import type {
+  PostEmbedInitOptions,
+  VitraunEmbedInitSession,
+  VitraunEmbedInitState,
+  VitraunVTOEventType,
+} from '@vitraun/core'
+
+export type {
+  PostEmbedInitOptions,
+  VitraunEmbedInitSession,
+  VitraunEmbedInitState,
+  VitraunVTOEventType,
+} from '@vitraun/core'
+
+export {
+  VITRAUN_VTO_DEFAULT_EVENT_TYPES,
+  VITRAUN_VTO_EXTRA_EVENT_TYPES,
+  initializeVitraunSession,
+  postEmbedInit,
+} from '@vitraun/core'
+
+export type VitraunBridgeEvent = {
+  type: VitraunVTOEventType
+  detail?: unknown
+}
+
+export type VitraunTryOnBasketOpensIn = 'blank' | 'self' | 'event'
+export type VitraunTryOnCheckoutOpensIn = 'blank' | 'self' | 'event'
+export type VitraunTryOnFlow = 'checkout' | 'catalog'
+
+export type VitraunTryOnProps = {
+  merchantId: string
+  widgetId: string
+  lang?: string
+  env?: string
+  apiPort?: number | null
+  appPort?: number | null
+  isolatedSku?: string
+  applySkus?: string[]
+  flow?: VitraunTryOnFlow
+  basketOpensIn?: VitraunTryOnBasketOpensIn
+  checkoutOpensIn?: VitraunTryOnCheckoutOpensIn
+  useSimplePage?: boolean
+  showDetails?: boolean
+  showProductPrice?: boolean
+  priceFrom?: number | null
+  priceTo?: number | null
+  currencySymbol?: string | null
+  isSimulationMode?: boolean
+  platform?: string
+  bundleId?: string
+  packageName?: string
+  appId?: string
+  appVersion?: string
+  attestationToken?: string
+  embedParentOrigin?: string | null
+  pageUrl?: string | null
+  referrer?: string | null
+  userAgent?: string | null
+  timezone?: string | null
+  initTimeoutMs?: number
+  autoInit?: boolean
+  onEvent?: (event: VitraunBridgeEvent) => void
+  onError?: (error: Error) => void
+  onReady?: () => void
+  style?: StyleProp<ViewStyle>
+}
+
+export type UseVitraunInitOptions = {
+  enabled?: boolean
+  state: VitraunEmbedInitState
+  sessionStorage?: PostEmbedInitOptions['sessionStorage']
+  sessionInstanceId?: string
+  timeoutMs?: number
+}
+
+export type UseVitraunInitResult = {
+  status: 'idle' | 'loading' | 'ready' | 'error'
+  session: VitraunEmbedInitSession | null
+  error: Error | null
+  reload: () => Promise<VitraunEmbedInitSession | null>
+}
+
+export const handleVitraunWebViewMessage: (
+  raw: string,
+  onEvent?: (event: VitraunBridgeEvent) => void,
+) => void
+
+export const parseVitraunBridgeMessage: (
+  raw: string,
+) => VitraunBridgeEvent | null
+
+export const buildInjectedBridgeScript: () => string
+export const buildNativeConfigInjectScript: (
+  overrides: Record<string, unknown> | null | undefined,
+) => string
+export const buildInjectedJavaScriptBeforeContentLoaded: (
+  nativeOverrides: Record<string, unknown> | null | undefined,
+) => string
+
+export const buildEmbedInitStateFromProps: (
+  props: VitraunTryOnProps,
+) => VitraunEmbedInitState
+
+export const buildNativeConfigOverrides: (
+  props: VitraunTryOnProps,
+) => Record<string, unknown> | null
+
+export const useVitraunInit: (
+  options: UseVitraunInitOptions,
+) => UseVitraunInitResult
+
+export const VitraunTryOn: (
+  props: VitraunTryOnProps,
+) => JSX.Element

package/dist/index.js

@@ -0,0 +1,418 @@
+// src/index.js
+import {
+  VITRAUN_VTO_DEFAULT_EVENT_TYPES as VITRAUN_VTO_DEFAULT_EVENT_TYPES2,
+  VITRAUN_VTO_EXTRA_EVENT_TYPES,
+  initializeVitraunSession,
+  postEmbedInit as postEmbedInit2
+} from "@vitraun/core";
+
+// src/bridge.js
+import { VITRAUN_VTO_DEFAULT_EVENT_TYPES } from "@vitraun/core";
+var DEFAULT_EVENT_TYPES = new Set(VITRAUN_VTO_DEFAULT_EVENT_TYPES);
+var parseVitraunBridgeMessage = (raw) => {
+  if (typeof raw !== "string" || !raw.trim()) {
+    return null;
+  }
+  try {
+    const data = JSON.parse(raw);
+    if (!data || typeof data !== "object") {
+      return null;
+    }
+    const type = typeof data.type === "string" ? data.type.trim() : "";
+    if (!type || !DEFAULT_EVENT_TYPES.has(type)) {
+      return null;
+    }
+    return {
+      type,
+      detail: "detail" in data ? data.detail : void 0
+    };
+  } catch {
+    return null;
+  }
+};
+var handleVitraunWebViewMessage = (raw, onEvent) => {
+  const event = parseVitraunBridgeMessage(raw);
+  if (!event || typeof onEvent !== "function") {
+    return;
+  }
+  onEvent(event);
+};
+
+// src/injected-bridge.js
+var buildInjectedBridgeScript = () => `
+(function() {
+  if (window.__vitraunRnBridgeInstalled) {
+    return true;
+  }
+  window.__vitraunRnBridgeInstalled = true;
+  window.addEventListener('message', function(event) {
+    var data = event.data;
+    if (!data || typeof data !== 'object' || !data.type) {
+      return;
+    }
+    if (window.ReactNativeWebView && typeof window.ReactNativeWebView.postMessage === 'function') {
+      window.ReactNativeWebView.postMessage(JSON.stringify(data));
+    }
+  });
+  true;
+})();`;
+var buildNativeConfigInjectScript = (overrides) => {
+  if (!overrides || Object.keys(overrides).length === 0) {
+    return "";
+  }
+  const serialized = JSON.stringify(overrides);
+  return `
+(function() {
+  window.__TRYON_NATIVE_CONFIG__ = Object.assign(
+    window.__TRYON_NATIVE_CONFIG__ || {},
+    ${serialized}
+  );
+  true;
+})();`;
+};
+var buildInjectedJavaScriptBeforeContentLoaded = (nativeOverrides) => {
+  const parts = [
+    buildNativeConfigInjectScript(nativeOverrides),
+    buildInjectedBridgeScript()
+  ].filter((part) => part.trim().length > 0);
+  return parts.join("\n");
+};
+
+// src/native-config-inject.js
+var buildNativeConfigOverrides = (props) => {
+  const overrides = {};
+  if (props.basketOpensIn) {
+    overrides.basketOpensIn = props.basketOpensIn;
+  }
+  if (props.checkoutOpensIn) {
+    overrides.checkoutOpensIn = props.checkoutOpensIn;
+  }
+  if (props.flow) {
+    overrides.flow = props.flow;
+  }
+  if (props.useSimplePage != null) {
+    overrides.useSimplePage = props.useSimplePage;
+  }
+  if (props.showDetails != null) {
+    overrides.showDetails = props.showDetails;
+  }
+  if (props.showProductPrice != null) {
+    overrides.showProductPrice = props.showProductPrice;
+  }
+  if (props.priceFrom != null) {
+    overrides.priceFrom = props.priceFrom;
+  }
+  if (props.priceTo != null) {
+    overrides.priceTo = props.priceTo;
+  }
+  if (props.currencySymbol != null) {
+    overrides.currencySymbol = props.currencySymbol;
+  }
+  if (props.isolatedSku) {
+    overrides.isolatedSku = props.isolatedSku;
+  }
+  if (Array.isArray(props.applySkus) && props.applySkus.length > 0) {
+    overrides.applySkus = props.applySkus;
+  }
+  if (props.isSimulationMode != null) {
+    overrides.isSimulationMode = props.isSimulationMode;
+  }
+  return Object.keys(overrides).length > 0 ? overrides : null;
+};
+var buildEmbedInitStateFromProps = (props) => {
+  const platform = typeof props.platform === "string" && props.platform.trim() ? props.platform.trim() : void 0;
+  return {
+    merchantId: String(props.merchantId ?? "").trim(),
+    widgetId: String(props.widgetId ?? "").trim(),
+    env: props.env ?? "",
+    apiPort: props.apiPort ?? null,
+    appPort: props.appPort ?? null,
+    lang: props.lang ?? "en-US",
+    isSimulationMode: props.isSimulationMode === true,
+    app: {
+      appId: props.appId ?? null,
+      platform: platform ?? null,
+      bundleId: props.bundleId ?? null,
+      packageName: props.packageName ?? null,
+      appVersion: props.appVersion ?? null,
+      attestationToken: props.attestationToken ?? null
+    },
+    context: {
+      origin: props.embedParentOrigin ?? null,
+      pageUrl: props.pageUrl ?? null,
+      referrer: props.referrer ?? null,
+      userAgent: props.userAgent ?? null,
+      timezone: props.timezone ?? null
+    }
+  };
+};
+
+// src/use-vitraun-init.js
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { postEmbedInit } from "@vitraun/core";
+var useVitraunInit = (options) => {
+  const enabled = options.enabled !== false;
+  const [status, setStatus] = useState(
+    /** @type {'idle' | 'loading' | 'ready' | 'error'} */
+    "idle"
+  );
+  const [session, setSession] = useState(
+    /** @type {VitraunEmbedInitSession | null} */
+    null
+  );
+  const [error, setError] = useState(
+    /** @type {Error | null} */
+    null
+  );
+  const requestIdRef = useRef(0);
+  const initOptions = useMemo(
+    () => ({
+      state: options.state,
+      sessionStorage: options.sessionStorage,
+      sessionInstanceId: options.sessionInstanceId,
+      timeoutMs: options.timeoutMs
+    }),
+    [
+      options.state,
+      options.sessionStorage,
+      options.sessionInstanceId,
+      options.timeoutMs
+    ]
+  );
+  const runInit = useCallback(async () => {
+    if (!enabled) {
+      return null;
+    }
+    const merchantId = initOptions.state.merchantId?.trim();
+    const widgetId = initOptions.state.widgetId?.trim();
+    if (!merchantId || !widgetId) {
+      const validationError = new Error(
+        !merchantId ? "The merchant-id attribute is required." : "The widget-id attribute is required."
+      );
+      setStatus("error");
+      setError(validationError);
+      setSession(null);
+      return null;
+    }
+    const requestId = requestIdRef.current + 1;
+    requestIdRef.current = requestId;
+    setStatus("loading");
+    setError(null);
+    try {
+      const result = await postEmbedInit(fetch, initOptions);
+      if (requestIdRef.current !== requestId) {
+        return null;
+      }
+      setSession(result);
+      setStatus("ready");
+      return result;
+    } catch (initError) {
+      if (requestIdRef.current !== requestId) {
+        return null;
+      }
+      const normalized = initError instanceof Error ? initError : new Error("Could not start the virtual try-on. Please try again.");
+      setSession(null);
+      setStatus("error");
+      setError(normalized);
+      return null;
+    }
+  }, [enabled, initOptions]);
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    void runInit();
+  }, [enabled, runInit]);
+  return {
+    status,
+    session,
+    error,
+    reload: runInit
+  };
+};
+
+// src/vitraun-try-on.jsx
+import { useEffect as useEffect2, useMemo as useMemo2 } from "react";
+import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
+import WebView from "react-native-webview";
+import { jsx } from "react/jsx-runtime";
+var styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  center: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 24
+  },
+  errorText: {
+    color: "#b00020",
+    textAlign: "center"
+  }
+});
+var VitraunTryOn = (props) => {
+  const {
+    merchantId,
+    widgetId,
+    lang,
+    env,
+    apiPort,
+    appPort,
+    isolatedSku,
+    applySkus,
+    flow,
+    basketOpensIn,
+    checkoutOpensIn,
+    useSimplePage,
+    showDetails,
+    showProductPrice,
+    priceFrom,
+    priceTo,
+    currencySymbol,
+    isSimulationMode,
+    platform,
+    bundleId,
+    packageName,
+    appId,
+    appVersion,
+    attestationToken,
+    embedParentOrigin,
+    pageUrl,
+    referrer,
+    userAgent,
+    timezone,
+    initTimeoutMs,
+    autoInit = true,
+    onEvent,
+    onError,
+    onReady,
+    style
+  } = props;
+  const embedState = useMemo2(
+    () => buildEmbedInitStateFromProps({
+      merchantId,
+      widgetId,
+      lang,
+      env,
+      apiPort,
+      appPort,
+      isSimulationMode,
+      platform,
+      bundleId,
+      packageName,
+      appId,
+      appVersion,
+      attestationToken,
+      embedParentOrigin,
+      pageUrl,
+      referrer,
+      userAgent,
+      timezone
+    }),
+    [
+      merchantId,
+      widgetId,
+      lang,
+      env,
+      apiPort,
+      appPort,
+      isSimulationMode,
+      platform,
+      bundleId,
+      packageName,
+      appId,
+      appVersion,
+      attestationToken,
+      embedParentOrigin,
+      pageUrl,
+      referrer,
+      userAgent,
+      timezone
+    ]
+  );
+  const { status, session, error } = useVitraunInit({
+    enabled: autoInit,
+    state: embedState,
+    timeoutMs: initTimeoutMs
+  });
+  const injectedScript = useMemo2(
+    () => buildInjectedJavaScriptBeforeContentLoaded(
+      buildNativeConfigOverrides({
+        basketOpensIn,
+        checkoutOpensIn,
+        flow,
+        useSimplePage,
+        showDetails,
+        showProductPrice,
+        priceFrom,
+        priceTo,
+        currencySymbol,
+        isolatedSku,
+        applySkus,
+        isSimulationMode
+      })
+    ),
+    [
+      basketOpensIn,
+      checkoutOpensIn,
+      flow,
+      useSimplePage,
+      showDetails,
+      showProductPrice,
+      priceFrom,
+      priceTo,
+      currencySymbol,
+      isolatedSku,
+      applySkus,
+      isSimulationMode
+    ]
+  );
+  useEffect2(() => {
+    if (status === "ready" && typeof onReady === "function") {
+      onReady();
+    }
+  }, [status, onReady]);
+  useEffect2(() => {
+    if (status === "error" && error && typeof onError === "function") {
+      onError(error);
+    }
+  }, [status, error, onError]);
+  if (status === "loading" || status === "idle") {
+    return /* @__PURE__ */ jsx(View, { style: [styles.center, style], accessibilityRole: "progressbar", children: /* @__PURE__ */ jsx(ActivityIndicator, { size: "large" }) });
+  }
+  if (status === "error" || !session?.vtoUrl) {
+    const message = error?.message ?? "Could not start the virtual try-on. Please try again.";
+    return /* @__PURE__ */ jsx(View, { style: [styles.center, style], accessibilityRole: "alert", children: /* @__PURE__ */ jsx(Text, { style: styles.errorText, children: message }) });
+  }
+  return /* @__PURE__ */ jsx(View, { style: [styles.container, style], children: /* @__PURE__ */ jsx(
+    WebView,
+    {
+      source: { uri: session.vtoUrl },
+      style: styles.container,
+      mediaPlaybackRequiresUserAction: false,
+      allowsInlineMediaPlayback: true,
+      javaScriptEnabled: true,
+      domStorageEnabled: true,
+      injectedJavaScriptBeforeContentLoaded: injectedScript,
+      onMessage: (event) => {
+        handleVitraunWebViewMessage(event.nativeEvent.data, onEvent);
+      }
+    }
+  ) });
+};
+export {
+  VITRAUN_VTO_DEFAULT_EVENT_TYPES2 as VITRAUN_VTO_DEFAULT_EVENT_TYPES,
+  VITRAUN_VTO_EXTRA_EVENT_TYPES,
+  VitraunTryOn,
+  buildEmbedInitStateFromProps,
+  buildInjectedBridgeScript,
+  buildInjectedJavaScriptBeforeContentLoaded,
+  buildNativeConfigInjectScript,
+  buildNativeConfigOverrides,
+  handleVitraunWebViewMessage,
+  initializeVitraunSession,
+  parseVitraunBridgeMessage,
+  postEmbedInit2 as postEmbedInit,
+  useVitraunInit
+};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@vitraun/react-native",
+  "version": "0.1.0",
+  "description": "Vitraun Try-On React Native adapter (WebView + embed-init bridge)",
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/clagils/tryon-new-version.git",
+    "directory": "vto-npm/react-native"
+  },
+  "homepage": "https://github.com/clagils/tryon-new-version/tree/main/vto-npm/react-native",
+  "bugs": {
+    "url": "https://github.com/clagils/tryon-new-version/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "private": false,
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "LICENSE.txt",
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "node ./scripts/build.mjs",
+    "clean": "rm -rf dist",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@vitraun/core": "^0.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.72",
+    "react-native-webview": ">=13"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.0",
+    "@babel/preset-react": "^7.27.1",
+    "esbuild": "^0.25.9",
+    "react": "^19.2.5",
+    "vitest": "^3.2.4"
+  }
+}