import Link from '@docusaurus/Link';
import {
  ArrowRightOutlined,
  BugOutlined,
  CustomerServiceOutlined,
  DashboardOutlined,
} from '@ant-design/icons';
import BeforeYouBegin from '_core/components/BeforeYouBegin/BeforeYouBegin';
import EventNotificationsIcon from '_core/static/img/event-notifications-icon.svg';
import mainStyles from '_core/components/MainSection/MainSection.module.css';
import styles from '_core/components/DeveloperPortalOverview/DeveloperPortalOverview.module.css';

# noon Developer Portal

<section className={styles.hero}>
  <p className={styles.heroLede}>
    Manage webhook destinations, debug live API calls, watch your rate limits, and raise support cases for your integration — right from your browser, no code required.
  </p>
  <div className={styles.heroCtaRow}>
    <a
      className={styles.ctaPrimary}
      href="https://developer.noon.partners"
      target="_blank"
      rel="noopener noreferrer">
      <span>Open Developer Portal</span> <ArrowRightOutlined />
    </a>
  </div>
  <BeforeYouBegin className={styles.heroPrereq} />
</section>

## What you can do

<section className={`${mainStyles.quickLinks} ${styles.cardGrid}`}>
  <Link to="/docs/developer-portal/event-notifications/overview" className={`${mainStyles.quickCard} ${styles.portalCard}`}>
    <div className={styles.cardMain}>
      <span className={styles.cardIconTile}><EventNotificationsIcon /></span>
      <div className={styles.cardBody}>
        <h2>Event Notifications</h2>
        <p>Create webhook destinations, subscribe them to event types, and review every delivery attempt.</p>
        <div className={styles.cardChips}>
          <span className={styles.chip}>Destinations</span>
          <span className={styles.chip}>Analytics</span>
          <span className={styles.chip}>Logs</span>
        </div>
      </div>
    </div>
    <span className={styles.cardAction} aria-hidden="true">
      <ArrowRightOutlined />
    </span>
  </Link>
  <Link to="/docs/developer-portal/debugging-session" className={`${mainStyles.quickCard} ${styles.portalCard}`}>
    <div className={styles.cardMain}>
      <span className={styles.cardIconTile}><BugOutlined /></span>
      <div className={styles.cardBody}>
        <h2>Debugging Session</h2>
        <p>Capture the request and response of live API calls for a service and inspect them call by call.</p>
      </div>
    </div>
    <span className={styles.cardAction} aria-hidden="true">
      <ArrowRightOutlined />
    </span>
  </Link>
  <Link to="/docs/developer-portal/rate-limit" className={`${mainStyles.quickCard} ${styles.portalCard}`}>
    <div className={styles.cardMain}>
      <span className={styles.cardIconTile}><DashboardOutlined /></span>
      <div className={styles.cardBody}>
        <h2>Rate Limit</h2>
        <p>See usage against your limits per marketplace, service, and endpoint — before you get throttled.</p>
      </div>
    </div>
    <span className={styles.cardAction} aria-hidden="true">
      <ArrowRightOutlined />
    </span>
  </Link>
  <Link to="/docs/developer-portal/support-cases" className={`${mainStyles.quickCard} ${styles.portalCard}`}>
    <div className={styles.cardMain}>
      <span className={styles.cardIconTile}><CustomerServiceOutlined /></span>
      <div className={styles.cardBody}>
        <h2>Support Cases</h2>
        <p>Raise a case, attach evidence, and track it to resolution without the email back-and-forth.</p>
      </div>
    </div>
    <span className={styles.cardAction} aria-hidden="true">
      <ArrowRightOutlined />
    </span>
  </Link>
</section>

## In the portal vs. via API

Most Developer Portal tools are portal-only. Event Notifications is the exception — its webhook destinations can also be managed programmatically.

<div className={styles.compareTable}>
  <div className={`${styles.compareRow} ${styles.compareRowHead}`}>
    <span>Task</span><span>In the portal</span><span>Via API</span>
  </div>
  <div className={styles.compareRow}>
    <span>Create and manage webhook destinations</span>
    <span><Link className={styles.comparePortalLink} to="/docs/developer-portal/event-notifications/destinations">Destinations</Link></span>
    <span className={styles.compareMono}>
      <Link to="/docs/api-reference/event-notifications/event-notifications-service-create-https-destination">CreateHttpsDestination</Link>,{' '}
      <Link to="/docs/api-reference/event-notifications/event-notifications-service-update-destination">UpdateDestination</Link>
    </span>
  </div>
  <div className={styles.compareRow}>
    <span>List destinations and event types</span>
    <span><Link className={styles.comparePortalLink} to="/docs/developer-portal/event-notifications/destinations">Destinations</Link></span>
    <span className={styles.compareMono}>
      <Link to="/docs/api-reference/event-notifications/event-notifications-service-list-destinations">ListDestinations</Link>,{' '}
      <Link to="/docs/api-reference/event-notifications/event-notifications-service-list-event-types">ListEventTypes</Link>
    </span>
  </div>
  <div className={styles.compareRow}>
    <span>Search and inspect delivery attempts</span>
    <span><Link className={styles.comparePortalLink} to="/docs/developer-portal/event-notifications/logs">Logs</Link></span>
    <span className={styles.compareMuted}>Portal only</span>
  </div>
  <div className={styles.compareRow}>
    <span>Check usage against rate limits</span>
    <span><Link className={styles.comparePortalLink} to="/docs/developer-portal/rate-limit">Rate Limit → Analytics</Link></span>
    <span className={styles.compareMuted}>Portal only</span>
  </div>
  <div className={styles.compareRow}>
    <span>Capture and inspect live API calls</span>
    <span><Link className={styles.comparePortalLink} to="/docs/developer-portal/debugging-session">Debugging Session</Link></span>
    <span className={styles.compareMuted}>Portal only</span>
  </div>
  <div className={styles.compareRow}>
    <span>Raise and track a support case</span>
    <span><Link className={styles.comparePortalLink} to="/docs/developer-portal/support-cases">Support Cases</Link></span>
    <span className={styles.compareMuted}>Portal only</span>
  </div>
</div>