Viewing File: /usr/local/cpanel/base/frontend/jupiter/domains/domainRecommendationsBanner.ptt

<!-- Domain Recommendations Banner -->
<div class="domain-recommendations-banner"
     ng-if="domainRecommendationsEnabled && (domainRecsLoading || domainRecommendations.length) && !workingDomain.is_temporary && !domainRecsBannerDismissed"
     data-testid="domain-recommendations-banner"
     role="region"
     ng-attr-aria-busy="{{ domainRecsLoading ? 'true' : undefined }}"
     aria-label="[% locale.maketext('Domain Recommendations') %]">

    <div class="domain-recommendations-banner__illustration" aria-hidden="true">
        <img ng-src="views/assets/promotional/domain-rec-banner.svg"
             alt=""
             width="166"
             height="96" />
    </div>

    <div class="domain-recommendations-banner__content">
        <div class="domain-recommendations-banner__header-row">
            <p class="domain-recommendations-banner__heading">
                [% locale.maketext("Protect your brand with matching domains and increase traffic to your website!") %]
            </p>

            <button type="button"
                    class="domain-recommendations-banner__close"
                    ng-click="dismissDomainRecommendations()"
                    data-testid="domain-recommendations-dismiss"
                    aria-label="[% locale.maketext('Dismiss Domain Recommendations') %]">
                <i class="fas fa-times" aria-hidden="true"></i>
            </button>
        </div>

        <!-- Persistent live region. It stays in the DOM across both the
             loading and results states so screen readers reliably announce
             the searching-to-results transition. A live region inserted at
             the same moment as its content is not announced by many screen
             reader and browser combinations, so the polite/atomic semantics
             live on this always-present wrapper rather than on the
             individually toggled children. -->
        <div class="domain-recommendations-banner__live-region"
             aria-live="polite"
             aria-atomic="true">

            <div class="domain-recommendations-banner__suggestions"
                 ng-if="!domainRecsLoading"
                 data-testid="domain-recommendations-suggestions">
                <span class="domain-recommendations-banner__suggestion"
                      ng-repeat="rec in domainRecommendations track by rec.domain"
                      data-testid="domain-recommendation-item">
                    <i class="fas fa-check-circle domain-recommendations-banner__check-icon" aria-hidden="true"></i>
                    {{ rec.domain }}
                </span>
            </div>

            <p class="domain-recommendations-banner__status"
               ng-if="domainRecsLoading"
               data-testid="domain-recommendations-status">
                [% locale.maketext('Searching for matching domains …') %]
            </p>
        </div>

        <div class="domain-recommendations-banner__footer-row">
            <p class="domain-recommendations-banner__pricing" ng-if="!domainRecsLoading">
                [% locale.maketext('Available now starting at [output,strong,_1]', '{{ domainRecommendationPrice }}') %]
            </p>

            <div class="domain-recommendations-banner__progress"
                 ng-if="domainRecsLoading"
                 aria-hidden="true">
                <span class="domain-recommendations-banner__progress-bar" aria-hidden="true"></span>
            </div>

            <button type="button"
                    class="btn domain-recommendations-banner__explore-btn"
                    ng-click="openExploreDomains()"
                    data-testid="domain-recommendations-explore-btn">
                <i class="fas fa-search" aria-hidden="true"></i>
                [% locale.maketext('Explore Domains') %]
            </button>
        </div>
    </div>
</div>
<!-- / Domain Recommendations Banner -->