Add custom alert bar to primo, populated by Back Office

main.css

primo-explore-top-alert .bar.alert-bar {
  font-size: 18px;
  font-weight: 700;
  border-color: #F89763;
  background-color: #F89763 !important;
}

main.js

app.component('prmTopbarAfter', { 
    template: /*html*/ `
      <primo-explore-top-alert>
        <div class="bar alert-bar" layout="row" layout-align="center center">
          <span class="bar-text">
          <span translate="custom.banner_value1"></span>
            <a ng-href="{{ 'custom.banner_value2' | translate}}" target="_blank" class="arrow-link md-primoExplore-theme">
              <span>See more</span>
              <span class="sr-only">(opens in a new window)</span>
              <prm-icon external-link icon-type="svg" svg-icon-set="primo-ui" icon-definition="open-in-new">
              </prm-icon>
            </a>
          </span>
        </div>
      </primo-explore-top-alert>`,
    controller: ['$element', function ($element) {
      this.$postLink = function () {
        const $primoExploreMain = $element.parent().parent().parent();
        const $el = $element.query(`primo-explore-top-alert`).detach();
        $primoExploreMain.prepend($el);
      };
    }]
  });