@bridgeline-digital/hawksearch-handlebars-ui 1.0.0-beta.0

package/src/scss/includes/_utility-classes.scss

@@ -0,0 +1,85 @@
+@use '../includes/breakpoints';
+
+.display {
+    @include breakpoints.all {
+        &-block {
+            display: block !important;
+        }
+
+        &-none {
+            display: none !important;
+        }
+    }
+}
+
+.flex-vertical {
+    @include breakpoints.all {
+        &-center {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+        }
+    }
+}
+
+.flex-gap {
+    @include breakpoints.all {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--padding);
+
+        &--none {
+            gap: 0;
+        }
+
+        &--xs {
+            gap: var(--padding-xs);
+        }
+
+        &--sm {
+            gap: var(--padding-sm);
+        }
+    }
+}
+
+.margin {
+    @include breakpoints.all {
+        margin-bottom: var(--margin) !important;
+
+        &-small {
+            margin-bottom: var(--margin-sm) !important;
+        }
+
+        &-none {
+            margin-bottom: 0 !important;
+        }
+    }
+}
+
+.width {
+    @include breakpoints.all {
+        &-auto {
+            width: auto;
+        }
+
+        &-full {
+            width: 100%;
+        }
+    }
+}
+
+.text-align {
+    @include breakpoints.all {
+        &-left {
+            text-align: left;
+        }
+
+        &-center {
+            text-align: center;
+        }
+
+        &-right {
+            text-align: right;
+        }
+    }
+}

package/src/services/autocomplete.service.ts

@@ -0,0 +1,104 @@
+import { AutocompleteRequest, AutocompleteResponse, HawksearchGlobal, RawAutocompleteRequest, RawAutocompleteResponse } from '../models';
+import { BaseService } from './base.service';
+
+declare let Hawksearch: HawksearchGlobal;
+
+export class AutocompleteService extends BaseService {
+    protected baseUrl = Hawksearch.config.endpoints?.search || 'https://searchapi-dev.hawksearch.net/api/v2';
+
+    // #region Search Operations
+
+    async query(query: string): Promise<AutocompleteResponse> {
+        const request: AutocompleteRequest = {
+            query: query
+        };
+
+        const response = await this.executeAutocomplete(request);
+
+        return response;
+    }
+
+    private executeAutocomplete(request: AutocompleteRequest): Promise<AutocompleteResponse> {
+        const rawRequest: RawAutocompleteRequest = {
+            ClientGuid: Hawksearch.config.clientId,
+            Keyword: request.query,
+            DisplayFullResponse: true
+        };
+
+        return this.httpPost<RawAutocompleteResponse>('/autocomplete', rawRequest).then((rawSearchResults) => {
+            const autocompleteResponse = this.convertAutocompleteResponse(request.query, rawSearchResults);
+
+            this.bindComponent(autocompleteResponse);
+
+            return autocompleteResponse;
+        });
+    }
+
+    private convertAutocompleteResponse(query: string, autocompleteResponse: RawAutocompleteResponse): AutocompleteResponse {
+        return {
+            query: query,
+            categories: {
+                title: autocompleteResponse.CategoryHeading,
+                results: autocompleteResponse.Categories.map((c) => ({
+                    title: this.stripHtml(c.Value),
+                    field: c.FieldQSName,
+                    value: c.FieldQSValue,
+                    url: `?${this.queryStringParams.facet}-${c.FieldQSName}=${encodeURIComponent(c.FieldQSValue)}`
+                }))
+            },
+            content: {
+                title: autocompleteResponse.ContentHeading,
+                results: autocompleteResponse.Content.map((c) => ({
+                    id: c.Results.DocId,
+                    pinned: c.Results.IsPin,
+                    score: c.Results.Score,
+                    attributes: c.Results.Document,
+                    title: this.stripHtml(c.Value),
+                    url: c.Url
+                })),
+                totalRecords: autocompleteResponse.ContentCount
+            },
+            queries: {
+                title: autocompleteResponse.PopularHeading,
+                results: autocompleteResponse.Popular.map((r) => ({
+                    query: r,
+                    url: `?${this.queryStringParams.query}=${encodeURIComponent(r)}`
+                }))
+            },
+            products: {
+                title: autocompleteResponse.ProductHeading,
+                results: autocompleteResponse.Products.map((p) => ({
+                    id: p.Results.DocId,
+                    pinned: p.Results.IsPin,
+                    score: p.Results.Score,
+                    attributes: p.Results.Document,
+                    title: this.stripHtml(p.ProductName),
+                    sku: p.Sku || undefined,
+                    imageUrl: p.Thumb?.Url,
+                    url: p.Url
+                })),
+                totalRecords: autocompleteResponse.ProductCount
+            },
+            totalRecords: autocompleteResponse.Count,
+            viewAllText: autocompleteResponse.ViewAllButtonLabel
+        };
+    }
+
+    // #endregion Search Operations
+
+    // #region Events
+
+    bindComponent(autocompleteResponse: AutocompleteResponse): void {
+        this.triggerEvent('hawksearch:bind-autocomplete', autocompleteResponse);
+    }
+
+    private triggerEvent<T>(name: string, data: T): void {
+        const event = new CustomEvent(name, { detail: data });
+
+        dispatchEvent(event);
+    }
+
+    // #endregion Events
+}
+
+export const autocompleteService = new AutocompleteService();

package/src/services/base.service.ts

@@ -0,0 +1,93 @@
+import { unescape } from 'lodash';
+import { HawksearchGlobal } from '@models';
+
+declare let Hawksearch: HawksearchGlobal;
+
+export abstract class BaseService {
+    protected abstract baseUrl: string;
+
+    protected fieldMappings = {
+        imageUrl: Hawksearch.config.fieldMappings?.imageUrl || 'image',
+        price: Hawksearch.config.fieldMappings?.price || 'price',
+        salePrice: Hawksearch.config.fieldMappings?.salePrice || 'saleprice',
+        title: Hawksearch.config.fieldMappings?.title || 'itemname',
+        type: Hawksearch.config.fieldMappings?.type || 'contenttype',
+        url: Hawksearch.config.fieldMappings?.url || 'url'
+    };
+
+    protected queryStringParams = {
+        disableSpellcheck: Hawksearch.config.queryStringMappings?.disableSpellcheck || 'disableSpellcheck',
+        facet: Hawksearch.config.queryStringMappings?.facet || 'facet',
+        page: Hawksearch.config.queryStringMappings?.page || 'page',
+        pageSize: Hawksearch.config.queryStringMappings?.pageSize || 'pageSize',
+        query: Hawksearch.config.queryStringMappings?.query || 'query',
+        searchWithin: Hawksearch.config.queryStringMappings?.searchWithin || 'searchWithin',
+        sort: Hawksearch.config.queryStringMappings?.sort || 'sort'
+    };
+
+    protected async httpPost<T>(relativeUrl: string, body?: any): Promise<T> {
+        const url = this.baseUrl + relativeUrl;
+        const headers = this.getHeaders();
+
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: headers,
+            body: JSON.stringify(body)
+        });
+
+        const contentType = response.headers.get('content-type');
+
+        if (contentType?.startsWith('application/json')) {
+            return response.json();
+        } else {
+            return undefined as unknown as T;
+        }
+    }
+
+    protected stripHtml(input: string): string {
+        let output = input.replace(/<[^>]+>/g, '');
+
+        output = unescape(output);
+
+        return output;
+    }
+
+    private getHeaders(): Headers {
+        const headers = new Headers();
+
+        headers.set('Content-Type', 'application/json');
+        headers.set('X-Requested-With', 'XMLHttpRequest');
+
+        return headers;
+    }
+
+    protected getVisitorId(): string {
+        const key = 'VisitorId';
+        let value = localStorage.getItem(key);
+
+        if (!value) {
+            value = this.generateGuid();
+
+            localStorage.setItem(key, value);
+        }
+
+        return value;
+    }
+
+    protected getVisitId(): string {
+        const key = 'VisitId';
+        let value = sessionStorage.getItem(key);
+
+        if (!value) {
+            value = this.generateGuid();
+
+            sessionStorage.setItem(key, value);
+        }
+
+        return value;
+    }
+
+    protected generateGuid(): string {
+        return crypto.randomUUID();
+    }
+}

package/src/services/index.ts

@@ -0,0 +1,3 @@
+export * from './autocomplete.service';
+export * from './search.service';
+export * from './tracking.service';