SaveBar LeaveConfirmation

[Vishnu_P_P]

Hi, I am using saveBar for my editor page and im calling leaveConfirmation on any change on it and a modal activates. I want to know how to specify the functions for the onClick of the modal buttons

[Sabin_Bhattarai]

Can you explain a bit more about your problem?

[kyle_liu]

import {SaveBar} from '@shopify/app-bridge-react';
import {useAppBridge} from '@shopify/app-bridge-react';

export function MyEditorPage() {
  const app = useAppBridge();

  const handleSave = () => {
    console.log('click Save button');
    app.saveBar.hide('my-save-bar');
  };

  const handleDiscard = () => {
    console.log('click Discard button');
    app.saveBar.hide('my-save-bar');
  };

  return (
    <>
      <SaveBar id="my-save-bar">
        <button variant="primary" onClick={handleSave}>
          Save
        </button>
        <button onClick={handleDiscard}>
          Discard
        </button>
      </SaveBar>
    </>
  );
}

Is that the logic?

[Vishnu_P_P]

import {SaveBar} from '@shopify/app-bridge-react';
import {useAppBridge} from '@shopify/app-bridge-react';

export function MyEditorPage() {
  const app = useAppBridge();

  const handleSave = () => {
    console.log('click Save button');
    app.saveBar.hide('my-save-bar');
  };

  const handleDiscard = () => {
    console.log('click Discard button');
    app.saveBar.hide('my-save-bar');
  };

  return (
    <>
      <SaveBar id="my-save-bar" discardConfirmation>
        <button variant="primary" onClick={handleSave}>
          Save
        </button>
        <button onClick={handleDiscard}>
          Discard
        </button>
      </SaveBar>
    </>
  );
}

same logic but i’ve added discardConfirmation attributte which activates an discard modal.

just like that when i call

shopify.saveBar.leaveConfirmation("my-save-bar")

here when this is called an leave confirmation modal activates.
In both cases how is the modal cancel/Stay or Discard/Leave buttons function is specified?