@saleor/app-sdk/app-bridge/index.mjs

SDK for building great Saleor Apps

import {
  ActionType,
  AppBridge,
  AppBridgeProvider,
  AppContext,
  AppIframeParams,
  DashboardEventFactory,
  EventType,
  actions,
  useAppBridge
} from "../chunk-XWDAZOZC.mjs";
import "../chunk-NHGUNOYT.mjs";
import {
  SALEOR_API_URL_HEADER,
  SALEOR_AUTHORIZATION_BEARER_HEADER
} from "../chunk-FTAQRPFZ.mjs";
import {
  isInIframe,
  useIsMounted
} from "../chunk-2O5AMG7B.mjs";

// src/app-bridge/fetch.ts
import { useMemo } from "react";
var createAuthenticatedFetch = (appBridge, fetch = global.fetch) => (input, init) => {
  const { token, saleorApiUrl } = appBridge.getState();
  const headers = new Headers(init?.headers);
  headers.set(SALEOR_AUTHORIZATION_BEARER_HEADER, token ?? "");
  headers.set(SALEOR_API_URL_HEADER, saleorApiUrl ?? "");
  const clonedInit = {
    ...init ?? {},
    headers
  };
  return fetch(input, clonedInit);
};
var useAuthenticatedFetch = (fetch = window.fetch) => {
  const { appBridge } = useAppBridge();
  if (!appBridge) {
    throw new Error("useAuthenticatedFetch can be used only in browser context");
  }
  return useMemo(() => createAuthenticatedFetch(appBridge, fetch), [appBridge, fetch]);
};

// src/app-bridge/use-dashboard-token.ts
import debugPkg from "debug";
import * as jose from "jose";
import { useMemo as useMemo2 } from "react";
var debug = debugPkg.debug("app-sdk:AppBridge:useDashboardToken");
var useDashboardToken = () => {
  const { appBridgeState } = useAppBridge();
  const tokenClaims = useMemo2(() => {
    try {
      if (appBridgeState?.token) {
        debug("Trying to decode JWT token from dashboard");
        return jose.decodeJwt(appBridgeState?.token);
      }
    } catch (e) {
      debug("Failed decoding JWT token");
      console.error(e);
    }
    return null;
  }, [appBridgeState?.token]);
  return {
    /**
     * TODO: Add tokenClaims.iss validation, when added to Saleor
     * @see: https://github.com/saleor/saleor/pull/10852
     */
    isTokenValid: !!tokenClaims,
    tokenClaims,
    hasAppToken: Boolean(appBridgeState?.token)
  };
};

// src/app-bridge/with-authorization.tsx
import * as React from "react";
function SimpleError({ children }) {
  return /* @__PURE__ */ React.createElement("div", { style: { padding: 32, color: "red" } }, /* @__PURE__ */ React.createElement("p", null, children));
}
var defaultProps = {
  dashboardTokenInvalid: /* @__PURE__ */ React.createElement(SimpleError, null, "Dashboard token is invalid"),
  noDashboardToken: /* @__PURE__ */ React.createElement(SimpleError, null, 'Dashboard token doesn"t exist'),
  notIframe: /* @__PURE__ */ React.createElement(SimpleError, null, "The view can only be displayed inside iframe."),
  unmounted: /* @__PURE__ */ React.createElement("p", null, "Loading")
};
var withAuthorization = (props = defaultProps) => (BaseComponent) => {
  const { dashboardTokenInvalid, noDashboardToken, notIframe, unmounted } = {
    ...defaultProps,
    ...props
  };
  function AuthorizedPage(innerProps) {
    const mounted = useIsMounted();
    const { isTokenValid, hasAppToken } = useDashboardToken();
    if (!mounted) {
      return unmounted;
    }
    if (!isInIframe()) {
      return notIframe;
    }
    if (!hasAppToken) {
      return noDashboardToken;
    }
    if (!isTokenValid) {
      return dashboardTokenInvalid;
    }
    return /* @__PURE__ */ React.createElement(BaseComponent, { ...innerProps });
  }
  return AuthorizedPage;
};
export {
  ActionType,
  AppBridge,
  AppBridgeProvider,
  AppContext,
  AppIframeParams,
  DashboardEventFactory,
  EventType,
  actions,
  createAuthenticatedFetch,
  useAppBridge,
  useAuthenticatedFetch,
  useDashboardToken,
  withAuthorization
};