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

<!-- Domain Search Modal -->
<div class="domain-search-modal"
     ng-class="{'domain-search-modal--overlay-open': purchaseConfirmation || redirectFailed || redirectSucceeded}">

    <!-- Modal body (inert while a purchase overlay is open) -->
    <div class="domain-search-modal__body"
         ng-attr-inert="{{ (purchaseConfirmation || redirectFailed || redirectSucceeded) ? '' : undefined }}">

    <!-- Success banner: shown when the searched-for domain matched a result -->
    <div class="domain-search-modal__success"
         ng-if="matchedDomain"
         data-testid="domain-search-success-banner"
         role="status"
         aria-live="polite">
        <div class="domain-search-modal__success-content">
            <div class="domain-search-modal__success-heading">
                <i class="fas fa-check-circle domain-search-modal__success-check" aria-hidden="true"></i>
                <p class="domain-search-modal__success-title">
                    [% locale.maketext('“[_1]” is available.', '{{ matchedDomain.domain }}') %]
                </p>
            </div>
            <p class="domain-search-modal__success-subtitle">
                [% locale.maketext('Secure your place on the web!') %]
            </p>
            <p class="domain-search-modal__success-price">
                [% locale.maketext('[_1] / year', '{{ matchedDomain.price }}') %]
            </p>
            <button type="button"
                    class="btn domain-search-modal__purchase-btn domain-search-modal__purchase-btn--outline domain-search-modal__success-purchase"
                    ng-click="purchaseDomain(matchedDomain, $event)"
                    data-purchase-domain="{{ matchedDomain.domain }}"
                    data-testid="domain-search-success-purchase-btn">
                [% locale.maketext('Purchase') %]
            </button>
        </div>
        <button type="button"
                class="domain-search-modal__success-close"
                ng-click="closeModal()"
                aria-label="[% locale.maketext('Close') %]"
                data-testid="domain-search-success-close">
            <i class="fas fa-times" aria-hidden="true"></i>
        </button>
        <img class="domain-search-modal__success-graphic"
             src="images/check.svg"
             alt="" />
    </div>

    <!-- Featured Recommendations Header -->
    <div class="domain-search-modal__header" ng-if="!matchedDomain">
        <div class="domain-search-modal__title-row"
             ng-if="!unavailableDomain">
            <h2 class="domain-search-modal__title"
                id="domainSearchModalTitle"
                ng-if="!pendingSearchDomain && !noResults">
                [% locale.maketext("We Think You’ll Like …") %]
            </h2>
            <h2 class="domain-search-modal__title"
                id="domainSearchModalNoResultsTitle"
                ng-if="!pendingSearchDomain && noResults"
                role="status"
                aria-live="polite"
                data-testid="domain-search-no-results-title">
                [% locale.maketext("No Domains Found") %]
            </h2>
            <h2 class="domain-search-modal__title"
                id="domainSearchModalPendingTitle"
                ng-if="pendingSearchDomain"
                data-testid="domain-search-pending-title">
                [% locale.maketext('Searching for “[_1]” …', '{{ pendingSearchDomain }}') %]
            </h2>
            <button type="button"
                    class="domain-search-modal__close"
                    ng-click="closeModal()"
                    aria-label="[% locale.maketext('Close') %]">
                <i class="fas fa-times" aria-hidden="true"></i>
            </button>
        </div>

        <!-- Unavailable banner: shown when the user searched an exact domain
             (with a TLD) that is not available -->
        <div class="domain-search-modal__unavailable"
             ng-if="unavailableDomain"
             data-testid="domain-search-unavailable-banner"
             role="status"
             aria-live="polite">
            <div class="domain-search-modal__unavailable-content">
                <h2 class="domain-search-modal__unavailable-title"
                    id="domainSearchModalUnavailableTitle">
                    [% locale.maketext("We’re sorry …") %]
                </h2>
                <p class="domain-search-modal__unavailable-subtitle">
                    [% locale.maketext('“[_1]” is not available.', '{{ unavailableDomain }}') %]
                </p>
                <p class="domain-search-modal__unavailable-prompt">
                    [% locale.maketext('But you might be interested in:') %]
                </p>
            </div>
            <button type="button"
                    class="domain-search-modal__close domain-search-modal__unavailable-close"
                    ng-click="closeModal()"
                    aria-label="[% locale.maketext('Close') %]"
                    data-testid="domain-search-unavailable-close">
                <i class="fas fa-times" aria-hidden="true"></i>
            </button>
        </div>

        <!-- Loading state -->
        <div class="domain-search-modal__featured"
             ng-if="loading"
             aria-busy="true"
             aria-label="[% locale.maketext('Loading domain recommendations …') %]">
            <div class="domain-search-modal__featured-card domain-search-modal__featured-card--skeleton">
                <span class="domain-search-modal__skeleton-block domain-search-modal__skeleton-block--domain"></span>
                <span class="domain-search-modal__skeleton-block domain-search-modal__skeleton-block--price"></span>
                <span class="domain-search-modal__skeleton-block domain-search-modal__skeleton-block--button"></span>
            </div>
            <div class="domain-search-modal__featured-card domain-search-modal__featured-card--skeleton">
                <span class="domain-search-modal__skeleton-block domain-search-modal__skeleton-block--domain"></span>
                <span class="domain-search-modal__skeleton-block domain-search-modal__skeleton-block--price"></span>
                <span class="domain-search-modal__skeleton-block domain-search-modal__skeleton-block--button"></span>
            </div>
        </div>

        <!-- Loaded featured cards -->
        <div class="domain-search-modal__featured" ng-if="!loading">
            <div class="domain-search-modal__featured-card"
                 ng-repeat="rec in featured track by rec.domain"
                 data-testid="domain-search-featured-card">
                <div class="domain-search-modal__premium-badge"
                     ng-if="rec.isPremium">
                    [% locale.maketext('Premium') %]
                </div>
                <div class="domain-search-modal__card-content">
                    <div class="domain-search-modal__card-domain">
                        <i class="fas fa-check-circle domain-search-modal__check-icon" aria-hidden="true"></i>
                        <span class="domain-search-modal__domain-name"
                              ng-bind-html="highlightTld(rec.domain)"></span>
                    </div>
                    <p class="domain-search-modal__card-price">
                        [% locale.maketext('Only [_1] / year.', '{{ rec.price }}') %]
                    </p>
                </div>
                <button type="button"
                        class="btn domain-search-modal__purchase-btn domain-search-modal__purchase-btn--accent"
                        ng-click="purchaseDomain(rec, $event)"
                        data-purchase-domain="{{ rec.domain }}"
                        data-testid="domain-search-purchase-btn">
                    [% locale.maketext('Purchase') %]
                </button>
            </div>
        </div>
    </div>

    <!-- Search Section -->
    <div class="domain-search-modal__search-section">
        <label class="domain-search-modal__search-label"
               for="domainSearchInput">
            [% locale.maketext('Search for a domain') %]
        </label>
        <div class="domain-search-modal__search-row">
            <div class="domain-search-modal__search-bar">
                <i class="fas fa-search domain-search-modal__search-icon" aria-hidden="true"></i>
                <input type="text"
                       id="domainSearchInput"
                       class="form-control domain-search-modal__search-input"
                       ng-model="searchQuery"
                       ng-keydown="handleSearchKeydown($event)"
                       autocomplete="off"
                       aria-describedby="domainSearchInputHint"
                       placeholder="[% locale.maketext('Use exact terms or let our AI find unique suggestions based on your input.') %]" />
            </div>
            <button type="button"
                    class="btn domain-search-modal__search-btn"
                    ng-click="searchDomains()"
                    ng-disabled="searching || !searchQuery"
                    data-testid="domain-search-search-btn">
                <i class="fas fa-magic" aria-hidden="true"></i>
                [% locale.maketext('Search Domains') %]
            </button>
        </div>
        <!-- Keep this hint in the DOM (toggle visibility, not existence) so the
             input's aria-describedby reference stays valid for screen readers. -->
        <p class="domain-search-modal__search-hint"
           id="domainSearchInputHint"
           ng-show="!searchQuery"
           data-testid="domain-search-hint">
            [% locale.maketext('Enter a domain name or keyword to search.') %]
        </p>
        <button type="button"
                class="domain-search-modal__search-options-link"
                ng-click="toggleSearchOptions()"
                aria-expanded="{{ showSearchOptions }}">
            {{ showSearchOptions
                ? '[% locale.maketext("Hide Options") %]'
                : '[% locale.maketext("Show Options") %]' }}
        </button>
        <div class="domain-search-modal__search-options" ng-if="showSearchOptions">
            <tld-priority-input priorities="tldFilters"
                                supported-tlds="supportedTlds"
                                disabled="purchasingDomain"
                                input-id="domainSearchModalTldInput">
            </tld-priority-input>
        </div>
    </div>

    <!-- Also Available Table -->
    <div class="domain-search-modal__results"
         ng-if="available.length || searching">
        <div class="domain-search-modal__results-header">
            <strong id="domain-search-modal-results-heading">[% locale.maketext('Also available') %]</strong>
        </div>

        <div class="domain-search-modal__results-scroll"
             tabindex="{{ (!searching && available.length) ? 0 : -1 }}"
             role="region"
             aria-labelledby="domain-search-modal-results-heading">

            <!-- Searching state -->
            <div class="domain-search-modal__results-loading"
                 ng-if="searching"
                 aria-busy="true">
                <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                [% locale.maketext('Searching for available domains …') %]
            </div>

            <!-- Results table -->
            <div class="domain-search-modal__table" ng-if="!searching">
                <div class="domain-search-modal__row"
                     ng-repeat="rec in available track by rec.domain"
                     data-testid="domain-search-available-row">
                    <div class="domain-search-modal__row-domain">
                        <span>{{ rec.domain }}</span>
                    </div>
                    <div class="domain-search-modal__row-price">
                        <span class="domain-search-modal__premium-tag"
                              ng-if="rec.isPremium">
                            [% locale.maketext('Premium') %]
                        </span>
                        {{ rec.price }} / [% locale.maketext('year') %]
                    </div>
                    <button type="button"
                            class="btn domain-search-modal__purchase-btn domain-search-modal__purchase-btn--outline"
                            ng-click="purchaseDomain(rec, $event)"
                            data-purchase-domain="{{ rec.domain }}"
                            data-testid="domain-search-purchase-btn">
                        [% locale.maketext('Purchase') %]
                    </button>
                </div>
            </div>

        </div>
    </div>

    <!-- No results message -->
    <div class="domain-search-modal__no-results"
         ng-if="!loading && !searching && !available.length && searchPerformed">
        <p>[% locale.maketext('No additional domains found. Try a different search term.') %]</p>
    </div>

    <!-- Go Back Footer -->
    <div class="domain-search-modal__footer">
        <button type="button"
                class="btn btn-link domain-search-modal__go-back"
                ng-click="closeModal()"
                data-testid="domain-search-go-back">
            <i class="fas fa-arrow-left" aria-hidden="true"></i>
            [% locale.maketext('Go Back') %]
        </button>
    </div>
    </div><!-- /.domain-search-modal__body -->

    <!-- Purchase Confirmation overlay -->
    <div class="domain-search-modal__overlay"
         ng-if="purchaseConfirmation && !redirectFailed && !redirectSucceeded"
         ng-keydown="handleConfirmationKeydown($event)"
         data-testid="domain-search-confirmation-overlay">
        <div class="domain-search-modal__confirmation"
             role="dialog"
             aria-modal="true"
             aria-labelledby="domainSearchModalConfirmationTitle"
             aria-describedby="domainSearchModalConfirmationDesc"
             data-testid="domain-search-confirmation">
            <div class="domain-search-modal__confirmation-header">
                <span class="domain-search-modal__confirmation-icon" aria-hidden="true">
                    <img class="domain-search-modal__confirmation-icon-img"
                         src="images/redirect-arrow.svg"
                         alt="" />
                </span>
                <h2 id="domainSearchModalConfirmationTitle"
                    class="domain-search-modal__confirmation-title"
                    tabindex="-1">
                    [% locale.maketext('Redirecting to Store') %]
                </h2>
                <button type="button"
                        class="domain-search-modal__close domain-search-modal__confirmation-close"
                        ng-click="cancelPurchaseConfirmation()"
                        aria-label="[% locale.maketext('Close') %]"
                        data-testid="domain-search-confirmation-close">
                    <i class="fas fa-times" aria-hidden="true"></i>
                </button>
            </div>
            <div class="domain-search-modal__confirmation-body">
                <p id="domainSearchModalConfirmationDesc"
                   class="domain-search-modal__confirmation-intro">
                    [% locale.maketext("We’re redirecting you to your hosting provider’s store to complete your purchase of:") %]
                </p>
                <div class="domain-search-modal__confirmation-domain"
                     data-testid="domain-search-confirmation-domain">
                    {{ purchaseConfirmation.domain }}
                </div>
                <p class="domain-search-modal__confirmation-note">
                    [% locale.maketext('After your purchase, return to [asis,cPanel] to view your domain.') %]
                </p>
                <div class="domain-search-modal__popup-blocked"
                     ng-if="blockedPurchaseUrl"
                     data-testid="domain-search-popup-blocked-banner"
                     role="alert">
                    <i class="fas fa-exclamation-triangle domain-search-modal__popup-blocked-icon"
                       aria-hidden="true"
                       data-testid="domain-search-popup-blocked-icon"></i>
                    <div class="domain-search-modal__popup-blocked-body">
                        <h3 class="domain-search-modal__popup-blocked-title"
                            data-testid="domain-search-popup-blocked-title">
                            [% locale.maketext('Your browser blocked the store tab.') %]
                        </h3>
                        <p class="domain-search-modal__popup-blocked-message"
                           data-testid="domain-search-popup-blocked-message">
                            [% locale.maketext('Your browser prevented the new tab from opening automatically. Click the button below to continue to your provider’s store and finish your purchase.') %]
                        </p>
                        <a id="domainSearchPopupBlockedLink"
                           class="btn btn-primary domain-search-modal__popup-blocked-link"
                           ng-href="{{ blockedPurchaseUrl }}"
                           target="_blank"
                           rel="noopener noreferrer"
                           ng-click="dismissBlockedPurchaseUrl()"
                           data-testid="domain-search-popup-blocked-link">
                            [% locale.maketext('Continue to Store') %]
                            <i class="fas fa-external-link-alt" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="domain-search-modal__confirmation-actions">
                <button type="button"
                        class="btn btn-link domain-search-modal__go-back"
                        ng-click="cancelPurchaseConfirmation()"
                        ng-disabled="purchasingDomain"
                        data-testid="domain-search-confirmation-cancel">
                    <i class="fas fa-arrow-left" aria-hidden="true"></i>
                    [% locale.maketext('Go Back') %]
                </button>
                <button type="button"
                        class="btn btn-primary domain-search-modal__confirmation-continue"
                        ng-click="confirmPurchase()"
                        ng-disabled="purchasingDomain || blockedPurchaseUrl"
                        aria-busy="{{ !!purchasingDomain }}"
                        data-testid="domain-search-confirmation-purchase-btn">
                    <i class="fas fa-spinner fa-spin" aria-hidden="true" ng-if="purchasingDomain"></i>
                    [% locale.maketext('Continue') %]
                </button>
            </div>
        </div>
    </div>

    <div class="domain-search-modal__overlay"
         ng-if="redirectSucceeded"
         ng-keydown="handleSuccessKeydown($event)"
         data-testid="domain-search-redirect-success-overlay">
        <div class="domain-search-modal__confirmation domain-search-modal__confirmation--wide"
             role="dialog"
             aria-modal="true"
             aria-labelledby="domainSearchModalSuccessTitle"
             aria-describedby="domainSearchModalSuccessDesc domainSearchModalSuccessDomain domainSearchModalSuccessNextStepLabel {{ canAddDomain ? 'domainSearchModalSuccessNoteAdd' : 'domainSearchModalSuccessNote' }}"
             data-testid="domain-search-redirect-success">
            <div class="domain-search-modal__confirmation-header">
                <span class="domain-search-modal__confirmation-icon" aria-hidden="true">
                    <img class="domain-search-modal__confirmation-icon-img"
                         src="images/redirect-success.svg"
                         alt="" />
                </span>
                <h2 id="domainSearchModalSuccessTitle"
                    class="domain-search-modal__confirmation-title"
                    tabindex="-1">
                    [% locale.maketext('Let’s connect your domain!') %]
                </h2>
                <button type="button"
                        class="domain-search-modal__close domain-search-modal__confirmation-close"
                        ng-click="dismissRedirectSuccess()"
                        aria-label="[% locale.maketext('Close') %]"
                        data-testid="domain-search-redirect-success-close">
                    <i class="fas fa-times" aria-hidden="true"></i>
                </button>
            </div>
            <div class="domain-search-modal__confirmation-body">
                <p id="domainSearchModalSuccessDesc"
                   class="domain-search-modal__confirmation-intro">
                    [% locale.maketext("You have been redirected to your hosting provider’s store to complete your purchase of:") %]
                </p>
                <div id="domainSearchModalSuccessDomain"
                     class="domain-search-modal__confirmation-domain"
                     data-testid="domain-search-redirect-success-domain">
                    {{ purchaseConfirmation.domain }}
                </div>
                <div class="domain-search-modal__next-step"
                     data-testid="domain-search-redirect-success-next-step">
                    <i class="fas fa-arrow-circle-right domain-search-modal__next-step-icon"
                       aria-hidden="true"></i>
                    <div class="domain-search-modal__next-step-content">
                        <p id="domainSearchModalSuccessNextStepLabel"
                           class="domain-search-modal__next-step-label">
                            [% locale.maketext('Next step[comment,Label introducing the required post-purchase action]') %]
                        </p>
                        <p id="domainSearchModalSuccessNoteAdd"
                           class="domain-search-modal__next-step-text"
                           ng-if="canAddDomain">
                            [% locale.maketext('After you’ve purchased your domain, make sure to add it to [asis,cPanel] to start using it.') %]
                        </p>
                        <p id="domainSearchModalSuccessNote"
                           class="domain-search-modal__next-step-text"
                           ng-if="!canAddDomain">
                            [% locale.maketext('After you’ve purchased your domain, return to [asis,cPanel] to add it and start using it.') %]
                        </p>
                    </div>
                </div>
            </div>
            <!-- "Go Back" returns to the search results so the user can buy
                 another domain; it does not add the just-purchased one, which
                 they can still add manually later. "Add Domain" adds it now.
                 The header ✕ and Escape close the whole modal. The "Done"
                 fallback replaces "Add Domain" only when no add-domain handler
                 was supplied, so the panel always offers a forward
                 action. -->
            <div class="domain-search-modal__confirmation-actions">
                <button type="button"
                        class="btn btn-link domain-search-modal__go-back"
                        ng-click="cancelPurchaseConfirmation()"
                        data-testid="domain-search-redirect-success-back">
                    <i class="fas fa-arrow-left" aria-hidden="true"></i>
                    [% locale.maketext('Go Back') %]
                </button>
                <button type="button"
                        ng-if="canAddDomain"
                        class="btn btn-primary domain-search-modal__confirmation-continue"
                        ng-click="addPurchasedDomain()"
                        data-testid="domain-search-redirect-success-add-btn">
                    <i class="fas fa-plus" aria-hidden="true"></i>
                    [% locale.maketext('Add Domain') %]
                </button>
                <button type="button"
                        ng-if="!canAddDomain"
                        class="btn btn-primary domain-search-modal__confirmation-continue"
                        ng-click="dismissRedirectSuccess()"
                        data-testid="domain-search-redirect-success-done-btn">
                    [% locale.maketext('Done') %]
                </button>
            </div>
        </div>
    </div>

    <!-- Redirection Failed overlay -->
    <div class="domain-search-modal__overlay"
         ng-if="redirectFailed"
         ng-keydown="handleFailureKeydown($event)"
         data-testid="domain-search-failure-overlay">
        <div class="domain-search-modal__confirmation domain-search-modal__confirmation--error"
             role="alertdialog"
             aria-modal="true"
             aria-labelledby="domainSearchModalFailureTitle"
             aria-describedby="domainSearchModalFailureDesc"
             data-testid="domain-search-failure">
            <div class="domain-search-modal__confirmation-header">
                <span class="domain-search-modal__confirmation-icon"
                      aria-hidden="true">
                    <img class="domain-search-modal__confirmation-icon-img"
                         src="images/redirect-error.svg"
                         alt="" />
                </span>
                <h2 id="domainSearchModalFailureTitle"
                    class="domain-search-modal__confirmation-title"
                    tabindex="-1">
                    [% locale.maketext('Redirection Failed') %]
                </h2>
            </div>
            <div class="domain-search-modal__confirmation-body">
                <p id="domainSearchModalFailureDesc"
                   class="domain-search-modal__confirmation-intro">
                    [% locale.maketext('Try again.') %]
                </p>
            </div>
            <div class="domain-search-modal__confirmation-actions domain-search-modal__confirmation-actions--end">
                <button type="button"
                        class="btn btn-primary domain-search-modal__confirmation-continue"
                        ng-click="dismissRedirectFailure()"
                        data-testid="domain-search-failure-continue-btn">
                    [% locale.maketext('Continue') %]
                </button>
            </div>
        </div>
    </div>
</div>