@apps-in-toss/framework 0.0.13 → 0.0.15

package/dist/index.cjs

@@ -32,6 +32,7 @@ var src_exports = {};
 __export(src_exports, {
   Accuracy: () => Accuracy2,
   AppsInToss: () => AppsInToss,
+  TossPay: () => TossPay,
   WebView: () => WebView,
   appLogin: () => appLogin,
   env: () => env,
@@ -48,10 +49,49 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/core/registerApp.tsx
+var import_react_native2 = require("@toss-design-system/react-native");
 var import_react_native_bedrock = require("react-native-bedrock");
+
+// src/core/hooks/useAppsInTossBridge.ts
+var import_react_native = require("@toss-design-system/react-native");
+var import_react = require("react");
+
+// src/core/utils/getAppsInTossGlobals.ts
+function getAppsInTossGlobals() {
+  if (global.__appsInToss == null) {
+    throw new Error("invalid apps-in-toss globals");
+  }
+  return global.__appsInToss;
+}
+
+// src/core/utils/toIcon.ts
+function toIcon(source) {
+  return source.startsWith("http") ? { source: { uri: source } } : { name: source };
+}
+
+// src/core/hooks/useAppsInTossBridge.ts
+function useAppsInTossBridge() {
+  const controller = (0, import_react_native.useBridge)();
+  const appsInTossGlobals2 = getAppsInTossGlobals();
+  (0, import_react.useEffect)(() => {
+    const commonProps = {
+      serviceName: appsInTossGlobals2.brandDisplayName,
+      icon: toIcon(appsInTossGlobals2.brandIcon),
+      color: appsInTossGlobals2.brandPrimaryColor,
+      colorMode: appsInTossGlobals2.brandBridgeColorMode
+    };
+    controller.open({ ...commonProps });
+  }, []);
+}
+
+// src/core/registerApp.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function AppsInTossContainer(Container, { children, ...initialProps }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Container, { ...initialProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Container, { ...initialProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.TDSProvider, { colorPreference: "light", token: { color: { primary: getAppsInTossGlobals().brandPrimaryColor } }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TDSContainer, { ...initialProps, children }) }) });
+}
+function TDSContainer({ children }) {
+  useAppsInTossBridge();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
 }
 function registerApp(container, { context }) {
   return import_react_native_bedrock.Bedrock.registerApp(AppsInTossContainer.bind(null, container), {
@@ -80,8 +120,8 @@ var import_react_native_bedrock3 = require("react-native-bedrock");
 var import_react_native_bedrock2 = require("react-native-bedrock");
 
 // src/native-modules/AppsInTossModule.ts
-var import_react_native = require("react-native");
-var AppsInTossModuleInstance = import_react_native.NativeModules.AppsInTossModule;
+var import_react_native3 = require("react-native");
+var AppsInTossModuleInstance = import_react_native3.NativeModules.AppsInTossModule;
 var AppsInTossModule = AppsInTossModuleInstance;
 
 // src/native-modules/getPermission.ts
@@ -107,8 +147,8 @@ async function requestPermission(permission) {
 }
 
 // src/native-event-emitter/nativeEventEmitter.ts
-var import_react_native2 = require("react-native");
-var nativeEventEmitter = new import_react_native2.NativeEventEmitter(AppsInTossModuleInstance);
+var import_react_native4 = require("react-native");
+var nativeEventEmitter = new import_react_native4.NativeEventEmitter(AppsInTossModuleInstance);
 
 // src/native-event-emitter/event-plugins/UpdateLocationEvent.ts
 var UpdateLocationEvent = class extends import_react_native_bedrock2.BedrockEventDefinition {
@@ -146,6 +186,16 @@ function startUpdateLocation(eventParams) {
   return appsInTossEvent.addEventListener("updateLocationEvent", eventParams);
 }
 
+// src/native-modules/checkoutPayment.ts
+async function checkoutPayment(options) {
+  return AppsInTossModule.checkoutPayment(options);
+}
+
+// src/native-modules/executePayment.ts
+async function executePayment(options) {
+  return AppsInTossModule.executePayment(options);
+}
+
 // src/native-modules/setClipboardText.ts
 async function setClipboardText(text) {
   const permissionStatus = await requestPermission({ name: "clipboard", access: "write" });
@@ -232,17 +282,140 @@ function getOperationalEnvironment() {
   return AppsInTossModule.operationalEnvironment;
 }
 
+// src/native-modules/index.ts
+var TossPay = {
+  checkoutPayment,
+  executePayment
+};
+
 // src/components/WebView.tsx
-var import_react_native_webview = require("@react-native-bedrock/native/react-native-webview");
-var import_react = require("react");
-var import_react_native_bedrock4 = require("react-native-bedrock");
+var import_react_native11 = require("@toss-design-system/react-native");
+var import_react3 = require("react");
+var import_react_native_bedrock5 = require("react-native-bedrock");
 var bedrockAsyncBridges = __toESM(require("react-native-bedrock/async-bridges"), 1);
 var bedrockConstantBridges = __toESM(require("react-native-bedrock/constant-bridges"), 1);
 
+// src/components/GameWebView.tsx
+var import_react_native_webview = require("@react-native-bedrock/native/react-native-webview");
+var import_react2 = require("react");
+var import_react_native10 = require("react-native");
+var import_react_native_bedrock4 = require("react-native-bedrock");
+
+// src/components/GameWebViewNavigationBar/GameNavigationBar.tsx
+var import_react_native_svg = require("@react-native-bedrock/native/react-native-svg");
+var import_react_native8 = require("@toss-design-system/react-native");
+var import_react_native9 = require("react-native");
+
+// src/components/GameWebViewNavigationBar/HeaderRight.tsx
+var import_react_native6 = require("react-native");
+
+// src/components/GameWebViewNavigationBar/byPlatform.ts
+var import_react_native5 = require("react-native");
+function byPlatform({
+  ...props
+}) {
+  return (props[import_react_native5.Platform.OS] ?? props.fallback)();
+}
+
+// src/components/GameWebViewNavigationBar/constants.ts
+var RIGHT_MARGIN = 24;
+var IOS_DEFAULT_MARGIN = 20;
+
+// src/components/GameWebViewNavigationBar/HeaderRight.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function IOSHeaderRight(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native6.View, { style: styles.ios, ...props });
+}
+function AndroidHeaderRight(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native6.View, { style: styles.android, ...props });
+}
+function HeaderRight(props) {
+  return byPlatform({
+    ios: () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IOSHeaderRight, { ...props }),
+    android: () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AndroidHeaderRight, { ...props }),
+    fallback: () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IOSHeaderRight, { ...props })
+  });
+}
+var styles = import_react_native6.StyleSheet.create({
+  ios: {
+    marginRight: -IOS_DEFAULT_MARGIN + RIGHT_MARGIN,
+    flexDirection: "row"
+  },
+  android: {
+    flexDirection: "row"
+  }
+});
+
+// src/components/GameWebViewNavigationBar/useSafeAreaTop.ts
+var import_react_native_safe_area_context = require("@react-native-bedrock/native/react-native-safe-area-context");
+var import_react_native7 = require("react-native");
+function useSafeAreaTop() {
+  const safeAreaInsets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
+  const hasDynamicIsland = import_react_native7.Platform.OS === "ios" && safeAreaInsets.top > 50;
+  const safeAreaTop = hasDynamicIsland ? safeAreaInsets.top - 5 : safeAreaInsets.top;
+  return safeAreaTop;
+}
+
+// src/components/GameWebViewNavigationBar/GameNavigationBar.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var originXML = '<svg fill="none" height="30" viewBox="0 0 30 30" width="30" xmlns="https://www.w3.org/2000/svg"><rect fill="#031832" fill-opacity=".46" height="30" rx="15" width="30"/><rect height="29.5" rx="14.75" stroke="#d9d9ff" stroke-opacity=".11" stroke-width=".5" width="29.5" x=".25" y=".25"/><path clip-rule="evenodd" d="m16.5119 15.0014 4.7092-4.7092c.0929-.0928.1666-.2031.2169-.32441.0503-.12134.0762-.25141.0762-.38276.0001-.13136-.0258-.26144-.076-.38281s-.1239-.23166-.2167-.32457c-.0929-.09291-.2031-.16662-.3245-.21692-.1213-.05031-.2514-.07622-.3827-.07626-.1314-.00004-.2615.0258-.3828.07603-.1214.05023-.2317.12388-.3246.21673l-4.7092 4.70997-4.71-4.70997c-.1897-.17718-.4408-.27373-.70034-.26927s-.5072.10959-.69069.2932c-.1835.1836-.28848.43132-.29279.69087-.00432.25954.09238.51057.26968.70017l4.71004 4.7092-4.71004 4.7092c-.1392.1401-.23385.3183-.27204.5121-.0382.1939-.01823.3946.05739.5771s.20351.3386.36759.4486.35702.169.55456.1697c.25583 0 .51164-.0975.70664-.2925l4.71-4.71 4.7092 4.71c.0927.093.2029.1668.3243.2172.1213.0504.2514.0763.3828.0763s.2614-.0259.3828-.0763c.1213-.0504.2315-.1242.3243-.2172.0929-.0929.1667-.2032.217-.3246s.0762-.2515.0762-.3829-.0259-.2616-.0762-.383-.1241-.2317-.217-.3245z" fill="#fdfdfe" fill-opacity=".89" fill-rule="evenodd"/></svg>';
+function GameNavigationBar({ onClose }) {
+  const safeAreaTop = useSafeAreaTop();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native8.PageNavbar, { preference: { type: "none" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_react_native9.View,
+      {
+        style: {
+          width: "100%",
+          height: import_react_native9.Platform.OS === "ios" ? 44 : 54,
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          position: "absolute",
+          zIndex: 9999,
+          marginTop: safeAreaTop,
+          paddingRight: import_react_native9.Platform.OS === "ios" ? 10 : 8
+        },
+        pointerEvents: "box-none",
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HeaderRight, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_react_native9.TouchableOpacity,
+          {
+            hitSlop: { left: 8, right: 8 },
+            style: {
+              padding: import_react_native9.Platform.OS === "ios" ? 7 : 9
+            },
+            onPress: onClose,
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_svg.SvgXml, { xml: originXML, width: 30, height: 30 })
+          }
+        ) })
+      }
+    )
+  ] });
+}
+
+// src/components/GameWebView.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var GameWebView = (0, import_react2.forwardRef)(function GameWebView2(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      GameNavigationBar,
+      {
+        onClose: () => {
+          (0, import_react_native_bedrock4.closeView)();
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native10.View, { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_webview.WebView, { ref, ...props }) })
+  ] });
+});
+
 // src/async-bridges.ts
 var async_bridges_exports = {};
 __export(async_bridges_exports, {
   appLogin: () => appLogin,
+  checkoutPayment: () => checkoutPayment,
+  executePayment: () => executePayment,
   fetchAlbumPhotos: () => fetchAlbumPhotos,
   fetchContacts: () => fetchContacts,
   getClipboardText: () => getClipboardText,
@@ -269,20 +442,38 @@ __export(event_bridges_exports, {
 });
 
 // src/components/WebView.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function WebView({ local, onMessage, ...props }) {
-  const uri = (0, import_react.useMemo)(() => {
-    if (__DEV__) {
-      return `http://${local.host}:${local.port}`;
-    }
-    const url = new URL(AppsInTossModule.getWebBundleURL({}).url);
-    const deploymentId = env.getDeploymentId();
-    if (deploymentId) {
-      url.searchParams.set("_deploymentId", deploymentId);
-    }
-    return url.toString();
-  }, [local]);
-  const handler = (0, import_react_native_bedrock4.useBridgeHandler)({
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var appsInTossGlobals = getAppsInTossGlobals();
+var WEBVIEW_TYPES = {
+  partner: import_react_native11.PartnerWebViewScreen,
+  external: import_react_native11.ExternalWebViewScreen,
+  game: GameWebView
+};
+function mergeSchemeQueryParamsInto(url) {
+  const baseUrl = new URL(url);
+  const schemeUrl = new URL((0, import_react_native_bedrock5.getSchemeUri)());
+  baseUrl.pathname = schemeUrl.pathname;
+  for (const [key, value] of schemeUrl.searchParams.entries()) {
+    baseUrl.searchParams.set(key, value);
+  }
+  return baseUrl;
+}
+function getWebViewUri(local) {
+  if (__DEV__) {
+    const devUrl = `http://${local.host}:${local.port}`;
+    return mergeSchemeQueryParamsInto(devUrl).toString();
+  }
+  const { url: rawUrl } = AppsInTossModule.getWebBundleURL({});
+  const url = mergeSchemeQueryParamsInto(rawUrl);
+  const deploymentId = env.getDeploymentId();
+  if (deploymentId) {
+    url.searchParams.set("_deploymentId", deploymentId);
+  }
+  return url.toString();
+}
+function WebView({ type, local, onMessage, ...props }) {
+  const uri = (0, import_react3.useMemo)(() => getWebViewUri(local), [local]);
+  const handler = (0, import_react_native_bedrock5.useBridgeHandler)({
     onMessage,
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     eventListenerMap: event_bridges_exports,
@@ -299,14 +490,41 @@ function WebView({ local, onMessage, ...props }) {
       ...async_bridges_exports
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_react_native_webview.WebView,
+  const baseProps = (0, import_react3.useMemo)(() => {
+    switch (type) {
+      case "partner": {
+        return {
+          header: {
+            ...props.header,
+            icon: toIcon(appsInTossGlobals.brandIcon),
+            title: appsInTossGlobals.brandDisplayName,
+            rightButtons: void 0
+            // TODO: onClick 이벤트를 받아야 하기에 런타임에서 설정 받아야 함
+          }
+        };
+      }
+      case "external": {
+        return {
+          header: {
+            ...props.header,
+            icon: toIcon(appsInTossGlobals.brandIcon),
+            title: appsInTossGlobals.brandDisplayName
+          }
+        };
+      }
+      default: {
+        return {};
+      }
+    }
+  }, [type, props]);
+  const BaseWebView = WEBVIEW_TYPES[type];
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    BaseWebView,
     {
       ref: handler.ref,
+      ...baseProps,
       ...props,
-      source: {
-        uri
-      },
+      source: { uri },
       sharedCookiesEnabled: true,
       thirdPartyCookiesEnabled: true,
       cacheEnabled: false,
@@ -319,12 +537,12 @@ function WebView({ local, onMessage, ...props }) {
 }
 
 // src/hooks/useGeolocation.ts
-var import_react2 = require("react");
-var import_react_native_bedrock5 = require("react-native-bedrock");
+var import_react4 = require("react");
+var import_react_native_bedrock6 = require("react-native-bedrock");
 function useGeolocation({ accuracy, distanceInterval, timeInterval }) {
-  const isVisible = (0, import_react_native_bedrock5.useVisibility)();
-  const [location, setLocation] = (0, import_react2.useState)(null);
-  (0, import_react2.useEffect)(() => {
+  const isVisible = (0, import_react_native_bedrock6.useVisibility)();
+  const [location, setLocation] = (0, import_react4.useState)(null);
+  (0, import_react4.useEffect)(() => {
     if (!isVisible) {
       return;
     }
@@ -355,6 +573,7 @@ var Accuracy2 = /* @__PURE__ */ ((Accuracy3) => {
 0 && (module.exports = {
   Accuracy,
   AppsInToss,
+  TossPay,
   WebView,
   appLogin,
   env,