How to use @shopify/app-bridge - 10 common examples

if (appBridge == null) {
      showToast({id, ...props});
    } else {
      // eslint-disable-next-line no-console
      console.warn(
        'Deprecation: Using `Toast` in an embedded app is deprecated and will be removed in v5.0. Use `Toast` from `@shopify/app-bridge-react` instead: https://help.shopify.com/en/api/embedded-apps/app-bridge/react-components/toast',
      );

      appBridgeToast.current = AppBridgeToast.create(appBridge, {
        message: content,
        duration,
        isError: error,
      });

      appBridgeToast.current.subscribe(AppBridgeToast.Action.CLEAR, onDismiss);
      appBridgeToast.current.dispatch(AppBridgeToast.Action.SHOW);
    }

    return () => {
      if (appBridge == null) {
        hideToast({id});
      } else if (appBridgeToast.current != null) {
        appBridgeToast.current.unsubscribe();
      }
    };
  }, [appBridge, props]);

if (appBridge == null) {
      showToast({id, ...props});
    } else {
      // eslint-disable-next-line no-console
      console.warn(
        'Deprecation: Using `Toast` in an embedded app is deprecated and will be removed in v5.0. Use `Toast` from `@shopify/app-bridge-react` instead: https://help.shopify.com/en/api/embedded-apps/app-bridge/react-components/toast',
      );

      appBridgeToast.current = AppBridgeToast.create(appBridge, {
        message: content,
        duration,
        isError: error,
      });

      appBridgeToast.current.subscribe(AppBridgeToast.Action.CLEAR, onDismiss);
      appBridgeToast.current.dispatch(AppBridgeToast.Action.SHOW);
    }

    return () => {
      if (appBridge == null) {
        hideToast({id});
      } else if (appBridgeToast.current != null) {
        appBridgeToast.current.unsubscribe();
      }
    };
  }, [appBridge, props]);

useEffect(() => {
    if (appBridge == null) {
      startLoading();
    } else {
      // eslint-disable-next-line no-console
      console.warn(
        'Deprecation: Using `Loading` in an embedded app is deprecated and will be removed in v5.0. Use `Loading` from `@shopify/app-bridge-react` instead: https://help.shopify.com/en/api/embedded-apps/app-bridge/react-components/loading',
      );

      appBridgeLoading.current = AppBridgeLoading.create(appBridge);
      appBridgeLoading.current.dispatch(AppBridgeLoading.Action.START);
    }

    return () => {
      if (appBridge == null) {
        stopLoading();
      } else {
        appBridgeLoading.current &&
          appBridgeLoading.current.dispatch(AppBridgeLoading.Action.STOP);
      }
    };
  }, [appBridge, startLoading, stopLoading]);

componentDidMount() {
    if (this.props.polaris.appBridge == null) {
      return;
    }

    // eslint-disable-next-line no-console
    console.warn(
      'Deprecation: Using `Modal` in an embedded app is deprecated and will be removed in v5.0. Use `Modal` from `@shopify/app-bridge-react` instead: https://help.shopify.com/en/api/embedded-apps/app-bridge/react-components/modal',
    );

    const transformProps = this.transformProps();
    if (transformProps) {
      this.appBridgeModal = AppBridgeModal.create(
        this.props.polaris.appBridge,
        transformProps,
      );
    }

    if (this.appBridgeModal) {
      this.appBridgeModal.subscribe(
        AppBridgeModal.Action.CLOSE,
        this.props.onClose,
      );
    }

    const {open} = this.props;

    if (open) {
      this.focusReturnPointNode = document.activeElement as HTMLElement;

private transformProps() {
    const {
      title,
      size,
      message,
      src,
      primaryAction,
      secondaryActions,
      polaris,
    } = this.props;
    const {appBridge} = polaris;

    if (!appBridge) return;

    const safeTitle = typeof title === 'string' ? title : undefined;
    const safeSize = size != null ? AppBridgeModal.Size[size] : undefined;
    const srcPayload: {url?: string; path?: string} = {};

    if (src != null) {
      if (/^https?:\/\//.test(src)) {
        srcPayload.url = src;
      } else {
        srcPayload.path = src;
      }
    }

    return {
      title: safeTitle,
      message,
      size: safeSize,
      ...srcPayload,
      footer: {

function transformAction(
  appBridge: ClientApplication<{}>,
  action: ComplexAction,
) {
  const style = action.destructive === true ? Button.Style.Danger : undefined;

  const button = Button.create(appBridge, {
    label: action.content || '',
    disabled: action.disabled,
    style,
  });

  if (action.onAction) {
    button.subscribe(Button.Action.CLICK, action.onAction);
  }

  const redirect = generateRedirect(
    appBridge,
    action.url,
    action.target,
    action.external,
  );

private transformBreadcrumbs(): AppBridgeButton.Button | undefined {
    const {appBridge} = this.props.polaris;
    if (!appBridge) return;
    const {breadcrumbs} = this.props;

    if (breadcrumbs != null && breadcrumbs.length > 0) {
      const breadcrumb = breadcrumbs[breadcrumbs.length - 1];
      const button = AppBridgeButton.create(appBridge, {
        label: breadcrumb.content || '',
      });

      const callback = !('url' in breadcrumb)
        ? breadcrumb.onAction
        : generateRedirect(appBridge, breadcrumb.url, breadcrumb.target);

      if (callback != null) {
        button.subscribe(AppBridgeButton.Action.CLICK, callback);
      }

      return button;
    } else {
      return undefined;
    }
  }

export function generateRedirect(
  appBridge: ClientApplication<{}>,
  url?: string,
  target: AppBridgeTarget = 'APP',
  external?: boolean,
) {
  if (url == null) {
    return undefined;
  }

  const redirect = Redirect.create(appBridge);
  const payload =
    external === true
      ? {
          url,
          newContext: true,
        }
      : url;

  return () => {
    redirect.dispatch(redirectAction(target, external), payload);
  };
}

redirectToProduct = () => {
    const redirect = Redirect.create(this.context.polaris.appBridge);
    redirect.dispatch(
      Redirect.Action.APP,
      '/edit-products'
    );
  };

export function createAppProviderContext({
  i18n,
  linkComponent,
  apiKey,
  shopOrigin,
  forceRedirect,
  stickyManager,
  scrollLockManager,
  subscribe = noop,
  unsubscribe = noop,
}: CreateAppProviderContext = {}): Context {
  const intl = new Intl(i18n);
  const link = new Link(linkComponent);
  const appBridge = apiKey
    ? createApp({
        apiKey,
        shopOrigin: shopOrigin || getShopOrigin(),
        forceRedirect,
      })
    : undefined;

  return {
    polaris: {
      intl,
      link,
      stickyManager: stickyManager || new StickyManager(),
      scrollLockManager: scrollLockManager || new ScrollLockManager(),
      subscribe,
      unsubscribe,
      appBridge,
    },