# Promotion-dialog


## Examples

### Default

```html
<m-button id="example-open">Open dialog</m-button>
    <m-promotion-dialog
      open=${args.open}
      @close=${args.onclose}
      id="example-dialog"
    >
      <p><m-tag>Category information</m-tag></p>
      <h2 slot="header">Accessible header for dialog</h2>
      <h1 tabindex="-1" autofocus>Visual header</h1>
      <p>Short description of the promotion.</p>
      <h2>Key benefits and features (optional)</h2>

      <m-icon-list label="New Features">
        <m-icon-list-item icon="calendar-plus"
          >Simple feature description</m-icon-list-item
        >
        <m-icon-list-item icon="check"
          >Feature with **markdown** support</m-icon-list-item
        >
      </m-icon-list>
      <m-button-group slot="footer" alignment="space-between">
        <m-button id="example-cancel">Cancel</m-button>
        <m-button id="example-learn-more" variant="primary"
          >Learn more</m-button
        >
      </m-button-group>
    </m-promotion-dialog>
    <script>
      /** example dialog */
      const exampleDialog = document.querySelector("#example-dialog");
      const exampleCancelButton = document.querySelector("#example-cancel");
      const exampleLearnMoreButton = document.querySelector(
        "#example-learn-more"
      );
      const exampleOpenButton = document.querySelector("#example-open");

      exampleOpenButton.addEventListener("click", () => {
        exampleDialog.openModal();
      });
      exampleCancelButton.addEventListener("click", () => {
        exampleDialog.closeModal();
      });
      exampleLearnMoreButton.addEventListener("click", () => {
        exampleDialog.closeModal();
      });
    </script>
```

### WithAppMenu

```html
<m-app-menu id="app-menu"></m-app-menu>
    <m-promotion-dialog @close=${args.onclose} id="promotion-dialog">
      <p><m-tag>Additional service!</m-tag></p>
      <h2 slot="header">Learn about our additional service</h2>
      <h1 tabindex="-1" autofocus>Effortless onboarding with Intro</h1>
      <p>
        Welcome new employees with ease using Intro’s smart and engaging
        onboarding solution. Automate repetitive tasks, ensure a consistent
        experience, and help new hires feel at home from day one. Say goodbye to
        manual processes—Intro does the heavy lifting for you.
      </p>
      <h2>Key features</h2>

      <m-icon-list label="New Features">
        <m-icon-list-item icon="check"
          ><strong>Tailored onboarding flows</strong> – Create personalized
          journeys that reflect your company culture.</m-icon-list-item
        >
        <m-icon-list-item icon="check"
          ><strong>Automated task management</strong> – Keep new hires on track
          with structured guidance.</m-icon-list-item
        >
        <m-icon-list-item icon="check"
          ><strong>Seamless integrations</strong> – Connect effortlessly with
          your existing HR tools.</m-icon-list-item
        >
      </m-icon-list>

      <m-product-lead-form
        id="promotion-form"
        email="test@grade.com"
        company="Test company"
        country="Test country"
        formId="bedbdec7-9b56-464e-93d3-d66899222ead"
      >
        <h2 slot="title">Ready to elevate your onboarding?</h2>
        <p slot="description">
          Discover how Intro can transform your onboarding experience. Fill out
          the form below, and our team will be in touch!
        </p>
      </m-product-lead-form>
      <m-button-group slot="footer" alignment="right">
        <m-button id="promotion-cancel">Cancel</m-button>
      </m-button-group>
    </m-promotion-dialog>
    <script type="module">
      /**
       * Remember to handle mark localization with the translation registry
       * @see https://https://grade.design/?path=/docs/info-localization--docs
       */

      /**
       * Handles app selection events from the app menu
       * @param {CustomEvent<NavGroupAppClickDetail>} e - The app selection event containing app details
       */
      const handleAppSelected = (e) => {
        console.log("handleAppSelected", e.detail);
        switch (e.detail.id) {
          case "additional-service":
            promotionDialog.openModal();
            break;
          case "second-additional-service":
            promotionDialog.openModal();
            break;
          default:
            console.log("Other app selected:", e.detail.name);
        }
      };

      /** application menu */
      const appMenu = document.querySelector("#app-menu");

      appMenu.addEventListener("app-selected", handleAppSelected);
      appMenu.items = [
        {
          heading: "Your applications",
          apps: [
            {
              name: "Varbi",
              id: "varbi",
              description: "Rekryteringsverktyg",
              href: "https://varbi.com",
              selected: true,
            },
            {
              name: "Refensa",
              id: "refensa",
              description: "Digital referenstagning",
              href: "https://refensa.se",
            },
          ],
        },
        {
          heading: "More services",
          apps: [
            {
              name: "Additional service",
              description: "Information about the service",
              id: "additional-service",
              purchase: true,
              brandHidden: true,
            },
            {
              name: "Second additional service",
              description: "Information about the second service",
              id: "second-additional-service",
              purchase: true,
              brandHidden: true,
            },
          ],
        },
      ];

      /** promotion dialog */
      const promotionDialog = document.querySelector("#promotion-dialog");
      const cancelDialogButton = document.querySelector("#promotion-cancel");

      cancelDialogButton.addEventListener("click", () => {
        console.log("cancel");
        promotionDialog.closeModal();
      });
    </script>
```