registerAddon()

This API is usefull to add a custom addon for SureCart admin pages using which you can add UI elements.

registerAddon function can be accessed from window.surecart object, It accepts 2 parameters, name & settings.

name: [string]
Unique name for your addon.
settings: [object]
This object needs to be passed 3 things.

Attribute	Type	Description
`render`	`HTML`	Pass what needs to be rendered. It can be HTML/ React Component.
`scope`	`string`	Context where you want to render the addon.
`title`	`string`	Title for your addon Box, if not passed this defaults to the name of your addon

Example:

In this below example we will add UI element in Main & Sidebar area of the View Order Page.

index.js

import MainComponent from './MainComponent';
import SidebarComponent from './SidebarComponent';

const registerAddon = window.surecart.registerAddon;

registerAddon('custom-main', {
	render: () => <MainComponent />,
	scope: 'main',
	title: 'Custom Main Box',
});

registerAddon('custom-sidebar', {
	render: () => <SidebarComponent />,
	scope: 'sidebar',
	title: 'Custom Sidebar Box',
});

MainComponent.js

import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';

export default () => {
    const getCurrentPage = window.surecart.getCurrentPage;
    const getCurrentPageId = window.surecart.getCurrentPageId;
    const id = getCurrentPageId();
    const page = getCurrentPage();

    if (page !== 'sc-orders') {
        return null;
    }
		
    const { order, hasLoadedOrder, orderError } = useSelect(
      (select) => {
        const queryArgs = [
          'surecart',
          'order',
          id,
          {
            expand: [
              'checkout',
              'checkout.charge',
              'checkout.customer',
              'checkout.tax_identifier',
              'checkout.payment_failures',
              'checkout.shipping_address',
              'checkout.billing_address',
              'checkout.discount',
              'checkout.line_items',
              'checkout.selected_shipping_choice',
              'checkout.invoice',
              'shipping_choice.shipping_method',
              'discount.promotion',
              'line_item.price',
              'line_item.fees',
              'line_item.variant',
              'customer.balances',
              'price.product',
              'product.featured_product_media',
              'product.product_medias',
              'product_media.media',
              'variant.image',
            ],
          },
        ];
        return {
          order: select(coreStore)?.getEntityRecord?.(...queryArgs),
          hasLoadedOrder: select(coreStore)?.hasFinishedResolution?.(
            'getEntityRecord',
            [...queryArgs]
          ),
          orderError: select(coreStore)?.getResolutionError?.(
            'getEntityRecord',
            ...queryArgs
          ),
        };
      },
      [id]
    );

    return (
        <div>
            <h1>Orders - Stats</h1>
            {/* Use the order to display stats. */}
        </div>
    );
};

The SidebarComponent can be similar to the MainComponent.