+
+ {!hideBadge && (
+ = {};
+
+ constructor(metaData?: MetaResponseModel) {
+ // 'overlay' group is created by default - could support additional groups via config in the future
+ const groups = { overlay: { sections: ['left', 'right'] } };
+
+ // process groups - create the grid for each group
+ Object.keys(groups).map((name) => {
+ const group = groups[name as keyof typeof groups];
+ const sections: { areas: string[]; grid: string[] }[] = group.sections.map((section) => ({
+ areas: metaData?.badges?.locations?.[section as keyof typeof metaData.badges.locations]?.map((area) => area.tag) || [],
+ grid: [],
+ }));
+
+ // find lcm of sections
+ const lcmSections = sections.map((section) => section.areas.length).reduce(lcm);
+
+ sections.forEach((section) => {
+ section.grid = Array.from({ length: lcmSections }).map((_, index) => section.areas[Math.floor(index / (lcmSections / section.areas.length))]);
+ });
+
+ // set the grid by creating rows of columns
+ const grid = Array.from({ length: lcmSections }).map((_, i) => {
+ return sections.map((section) => section.grid[i]);
+ });
+
+ this.groups[name] = {
+ sections: group.sections,
+ grid,
+ };
+ });
+ }
+}
+
+function gcd(a: number, b: number): number {
+ if (!b) {
+ return a;
+ }
+ return gcd(b, a % b);
+}
+
+function lcm(a: number, b: number): number {
+ const gcdValue = gcd(a, b);
+ return (a * b) / gcdValue;
+}
diff --git a/packages/snap-store-mobx/src/Recommendation/RecommendationStore.ts b/packages/snap-store-mobx/src/Recommendation/RecommendationStore.ts
index fc17e0079..d42e0c6c1 100644
--- a/packages/snap-store-mobx/src/Recommendation/RecommendationStore.ts
+++ b/packages/snap-store-mobx/src/Recommendation/RecommendationStore.ts
@@ -5,9 +5,12 @@ import { CartStore } from '../Cart/CartStore';
import { RecommendationProfileStore } from './Stores';
import type { RecommendationStoreConfig, StoreServices } from '../types';
import type { RecommendCombinedResponseModel } from '@searchspring/snap-client';
+import { MetaResponseModel } from '@searchspring/snapi-types';
+import { MetaStore } from '../Meta/MetaStore';
export class RecommendationStore extends AbstractStore {
public services: StoreServices;
+ public meta!: MetaStore;
public loaded = false;
public profile!: RecommendationProfileStore;
public results!: Product[];
@@ -34,11 +37,12 @@ export class RecommendationStore extends AbstractStore {
this.update();
}
- public update(data?: RecommendCombinedResponseModel): void {
+ public update(data?: RecommendCombinedResponseModel & { meta?: MetaResponseModel }): void {
this.error = undefined;
this.loaded = !!data?.profile;
+ this.meta = new MetaStore(data?.meta);
this.profile = new RecommendationProfileStore(this.services, data);
- this.results = new SearchResultStore(this.config, this.services, data?.results) as Product[];
+ this.results = new SearchResultStore(this.config, this.services, this.meta.data, data?.results) as Product[];
// only create a cart store when type is bundle
if (this.profile.type == 'bundle') {
diff --git a/packages/snap-store-mobx/src/Search/SearchStore.test.ts b/packages/snap-store-mobx/src/Search/SearchStore.test.ts
index cc2401bf7..f11e5d0da 100644
--- a/packages/snap-store-mobx/src/Search/SearchStore.test.ts
+++ b/packages/snap-store-mobx/src/Search/SearchStore.test.ts
@@ -27,7 +27,7 @@ describe('Search Store', () => {
expect(searchStore.loading).toBe(false);
expect(searchStore.meta).toBeDefined();
- expect(searchStore.meta).toStrictEqual({});
+ expect(searchStore.meta.data).toStrictEqual({});
expect(searchStore.merchandising).toBeDefined();
expect(searchStore.merchandising).toEqual({ redirect: '', content: {}, campaigns: [] });
@@ -53,10 +53,10 @@ describe('Search Store', () => {
it('update function updates all of the stores', () => {
const searchStore = new SearchStore(searchConfig, services);
- searchStore.update(searchData);
+ searchStore.update(searchData as SearchResponseModel);
expect(searchStore.meta).toBeDefined();
- expect(searchStore.meta).toStrictEqual(searchData.meta);
+ expect(searchStore.meta.data).toStrictEqual(searchData.meta);
expect(searchStore.search).toBeDefined();
expect(searchStore.search?.query).toStrictEqual(searchData.search?.query);
diff --git a/packages/snap-store-mobx/src/Search/SearchStore.ts b/packages/snap-store-mobx/src/Search/SearchStore.ts
index df85d28f3..aa19e3bbc 100644
--- a/packages/snap-store-mobx/src/Search/SearchStore.ts
+++ b/packages/snap-store-mobx/src/Search/SearchStore.ts
@@ -15,10 +15,11 @@ import {
import type { HistoryStoreConfig } from './Stores/SearchHistoryStore';
import { AbstractStore } from '../Abstract/AbstractStore';
import { StorageStore } from '../Storage/StorageStore';
+import { MetaStore } from '../Meta/MetaStore';
export class SearchStore extends AbstractStore {
public services: StoreServices;
- public meta!: MetaResponseModel;
+ public meta!: MetaStore;
public merchandising!: SearchMerchandisingStore;
public search!: SearchQueryStore;
public facets!: SearchFacetStore;
@@ -85,7 +86,7 @@ export class SearchStore extends AbstractStore {
public update(data: SearchResponseModel & { meta?: MetaResponseModel } = {}): void {
this.error = undefined;
this.loaded = !!data.pagination;
- this.meta = data.meta || {};
+ this.meta = new MetaStore(data.meta);
this.merchandising = new SearchMerchandisingStore(this.services, data?.merchandising || {});
this.search = new SearchQueryStore(this.services, data?.search || {});
this.facets = new SearchFacetStore(
@@ -94,12 +95,12 @@ export class SearchStore extends AbstractStore {
this.storage,
data.facets,
data?.pagination || {},
- this.meta,
+ this.meta.data,
data?.merchandising || {}
);
- this.filters = new SearchFilterStore(this.services, data.filters, this.meta);
- this.results = new SearchResultStore(this.config, this.services, data?.results || [], data.pagination, data.merchandising);
- this.pagination = new SearchPaginationStore(this.config, this.services, data.pagination, this.meta);
- this.sorting = new SearchSortingStore(this.services, data?.sorting || [], data?.search || {}, this.meta);
+ this.filters = new SearchFilterStore(this.services, data.filters, this.meta.data);
+ this.results = new SearchResultStore(this.config, this.services, this.meta.data, data?.results || [], data.pagination, data.merchandising);
+ this.pagination = new SearchPaginationStore(this.config, this.services, data.pagination, this.meta.data);
+ this.sorting = new SearchSortingStore(this.services, data?.sorting || [], data?.search || {}, this.meta.data);
}
}
diff --git a/packages/snap-store-mobx/src/Search/Stores/SearchHistoryStore.ts b/packages/snap-store-mobx/src/Search/Stores/SearchHistoryStore.ts
index 0ad593217..16c4ec600 100644
--- a/packages/snap-store-mobx/src/Search/Stores/SearchHistoryStore.ts
+++ b/packages/snap-store-mobx/src/Search/Stores/SearchHistoryStore.ts
@@ -1,4 +1,4 @@
-import { StorageStore, StorageType } from '../../Storage/StorageStore';
+import { StorageStore } from '../../Storage/StorageStore';
import type { StoreServices } from '../../types';
import { Query } from './SearchQueryStore';
@@ -30,7 +30,7 @@ export class SearchHistoryStore {
}
this.storage = new StorageStore({
- type: StorageType.LOCAL,
+ type: 'local',
key: `ss-history${this.config.siteId ? `-${this.config.siteId}` : ``}`,
});
diff --git a/packages/snap-store-mobx/src/Search/Stores/SearchResultStore.test.ts b/packages/snap-store-mobx/src/Search/Stores/SearchResultStore.test.ts
index 30e27e195..027aa215f 100644
--- a/packages/snap-store-mobx/src/Search/Stores/SearchResultStore.test.ts
+++ b/packages/snap-store-mobx/src/Search/Stores/SearchResultStore.test.ts
@@ -27,13 +27,13 @@ describe('SearchResultStore', () => {
it('returns an empty array when nothing is passed to the constructor', () => {
// @ts-ignore
- const results = new SearchResultStore(undefined, undefined, undefined, undefined, undefined);
+ const results = new SearchResultStore(undefined, undefined, undefined, undefined, undefined, undefined);
expect(results.length).toBe(0);
});
it('returns an empty array when passed an empty array [] of results', () => {
- const results = new SearchResultStore(searchConfig, services, [], undefined, undefined);
+ const results = new SearchResultStore(searchConfig, services, {}, [], undefined, undefined);
expect(results.length).toBe(0);
});
@@ -41,7 +41,7 @@ describe('SearchResultStore', () => {
it('returns an array the same length as the results passed in', () => {
const searchData = mockData.searchMeta();
- const results = new SearchResultStore(searchConfig, services, searchData.results, searchData.pagination, searchData.merchandising);
+ const results = new SearchResultStore(searchConfig, services, {}, searchData.results, searchData.pagination, searchData.merchandising);
expect(results.length).toBe(searchData.results?.length);
});
@@ -49,7 +49,7 @@ describe('SearchResultStore', () => {
it('has result data that matches what was passed in', () => {
const searchData = mockData.searchMeta();
- const results = new SearchResultStore(searchConfig, services, searchData.results, searchData.pagination, searchData.merchandising);
+ const results = new SearchResultStore(searchConfig, services, {}, searchData.results, searchData.pagination, searchData.merchandising);
results.forEach((result, index) => {
// check id
@@ -126,7 +126,14 @@ describe('SearchResultStore', () => {
it('has a mask property and also a display property that "masks"" the core fields and attributes', () => {
const searchData = mockData.searchMeta();
- const results = new SearchResultStore(searchConfig, services, searchData.results, searchData.pagination, searchData.merchandising);
+ const results = new SearchResultStore(
+ searchConfig,
+ services,
+ searchData.meta,
+ searchData.results,
+ searchData.pagination,
+ searchData.merchandising
+ );
results.forEach((result, index) => {
// check display properties
@@ -169,7 +176,14 @@ describe('SearchResultStore', () => {
it('can use the mask with the display property', () => {
const searchData = mockData.searchMeta();
- const results = new SearchResultStore(searchConfig, services, searchData.results, searchData.pagination, searchData.merchandising);
+ const results = new SearchResultStore(
+ searchConfig,
+ services,
+ searchData.meta,
+ searchData.results,
+ searchData.pagination,
+ searchData.merchandising
+ );
const firstProduct = results[0] as Product;
const maskData = { mappings: { core: { name: 'new name', price: 1.0 } }, attributes: { special: 'thing' } };
@@ -194,7 +208,14 @@ describe('SearchResultStore', () => {
},
};
- const results = new SearchResultStore(variantSearchConfig, services, searchData.results, searchData.pagination, searchData.merchandising);
+ const results = new SearchResultStore(
+ variantSearchConfig,
+ services,
+ searchData.meta,
+ searchData.results,
+ searchData.pagination,
+ searchData.merchandising
+ );
expect(results.length).toBe(searchData.pagination?.pageSize);
results.forEach((result, index) => {
@@ -222,7 +243,14 @@ describe('SearchResultStore', () => {
},
};
- const results = new SearchResultStore(variantSearchConfig, services, searchData.results, searchData.pagination, searchData.merchandising);
+ const results = new SearchResultStore(
+ variantSearchConfig,
+ services,
+ searchData.meta,
+ searchData.results,
+ searchData.pagination,
+ searchData.merchandising
+ );
expect(results.length).toBe(searchData.pagination?.pageSize);
const variantDataToUse = results[2].attributes.ss_variants;
@@ -271,7 +299,14 @@ describe('SearchResultStore', () => {
},
};
- const results = new SearchResultStore(variantSearchConfig, services, searchData.results, searchData.pagination, searchData.merchandising);
+ const results = new SearchResultStore(
+ variantSearchConfig,
+ services,
+ searchData.meta,
+ searchData.results,
+ searchData.pagination,
+ searchData.merchandising
+ );
expect(results.length).toBe(searchData.pagination?.pageSize);
results.forEach((result, index) => {
@@ -318,7 +353,14 @@ describe('SearchResultStore', () => {
},
};
- const results = new SearchResultStore(variantSearchConfig, services, searchData.results, searchData.pagination, searchData.merchandising);
+ const results = new SearchResultStore(
+ variantSearchConfig,
+ services,
+ searchData.meta,
+ searchData.results,
+ searchData.pagination,
+ searchData.merchandising
+ );
expect(results.length).toBe(searchData.pagination?.pageSize);
const variantDataToUse = results[0].attributes.ss_variants;
@@ -378,7 +420,14 @@ describe('SearchResultStore', () => {
},
};
- const results = new SearchResultStore(variantSearchConfig, services, searchData.results, searchData.pagination, searchData.merchandising);
+ const results = new SearchResultStore(
+ variantSearchConfig,
+ services,
+ searchData.meta,
+ searchData.results,
+ searchData.pagination,
+ searchData.merchandising
+ );
expect(results.length).toBe(searchData.pagination?.pageSize);
const variantDataToUse = results[0].attributes.ss_variants;
@@ -635,7 +684,7 @@ describe('SearchResultStore', () => {
it('splices inline banners into the results array', () => {
const searchData = mockData.updateConfig({ siteId: '8uyt2m' }).searchMeta('inlineBanners');
- const results = new SearchResultStore(searchConfig, services, searchData.results, searchData.pagination, searchData.merchandising);
+ const results = new SearchResultStore(searchConfig, services, {}, searchData.results, searchData.pagination, searchData.merchandising);
expect(results.length).toBe(searchData.pagination?.pageSize);
expect((results[1] as Banner).value).toBe(searchData.merchandising?.content?.inline && searchData.merchandising.content.inline[0].value);
@@ -644,7 +693,7 @@ describe('SearchResultStore', () => {
it('splices inline banners into the results array', () => {
const searchData = mockData.updateConfig({ siteId: 'ga9kq2' }).searchMeta('merchandising_page1');
- const results = new SearchResultStore(searchConfig, services, searchData.results, searchData.pagination, searchData.merchandising);
+ const results = new SearchResultStore(searchConfig, services, {}, searchData.results, searchData.pagination, searchData.merchandising);
expect(results.length).toBe(searchData.pagination?.pageSize);
const inlineData = searchData.merchandising?.content?.inline!;
@@ -657,7 +706,7 @@ describe('SearchResultStore', () => {
it('splices inline banners into the results array', () => {
const searchData = mockData.updateConfig({ siteId: 'ga9kq2' }).searchMeta('merchandising_page2');
- const results = new SearchResultStore(searchConfig, services, searchData.results, searchData.pagination, searchData.merchandising);
+ const results = new SearchResultStore(searchConfig, services, {}, searchData.results, searchData.pagination, searchData.merchandising);
expect(results.length).toBe(1);
const inlineData = searchData.merchandising?.content?.inline!;
@@ -668,7 +717,7 @@ describe('SearchResultStore', () => {
it('correctly splices four inline banners into the results array with low numbers of results', () => {
const searchData = mockData.updateConfig({ siteId: '8uyt2m' }).searchMeta('inlineBanners-x4');
- const results = new SearchResultStore(searchConfig, services, searchData.results, searchData.pagination, searchData.merchandising);
+ const results = new SearchResultStore(searchConfig, services, {}, searchData.results, searchData.pagination, searchData.merchandising);
expect(results.length).toBe(11);
const inlineData = searchData.merchandising?.content?.inline!;
@@ -724,11 +773,159 @@ describe('SearchResultStore', () => {
},
},
};
- const results = new SearchResultStore(searchConfig, services, searchData.results, searchData.pagination, searchData.merchandising);
+ const results = new SearchResultStore(searchConfig, services, {}, searchData.results, searchData.pagination, searchData.merchandising);
expect(results.length).toBe(1);
expect(results[0].id).toBe(`ss-ib-${searchData.merchandising.content.inline[2].config.position.index}`);
expect((results[0] as Banner).value).toBe(searchData.merchandising.content.inline[2].value);
});
});
+ describe('with badges', () => {
+ it('has overlay result badges', () => {
+ const searchData = mockData.updateConfig({ siteId: '8uyt2m' }).searchMeta();
+ const results = new SearchResultStore(
+ searchConfig,
+ services,
+ searchData.meta,
+ searchData.results,
+ searchData.pagination,
+ searchData.merchandising
+ );
+
+ expect(results.length).toBe(searchData.pagination?.pageSize);
+
+ const indexOfOverlayBadge = 0;
+ const result = results[indexOfOverlayBadge] as Product;
+ expect(result.badges?.all).toBeDefined();
+
+ const resultBadges = searchData.results![indexOfOverlayBadge].badges!;
+ expect(resultBadges).toBeDefined();
+ expect(result.badges.all.length).toStrictEqual(resultBadges?.length);
+
+ expect(result.badges.all[0]).toHaveProperty('tag');
+ expect(result.badges.all[0]).toHaveProperty('location');
+ expect(result.badges.all[0]).toHaveProperty('component');
+ expect(result.badges.all[0]).toHaveProperty('priority');
+ expect(result.badges.all[0]).toHaveProperty('enabled');
+ expect(result.badges.all[0]).toHaveProperty('parameters');
+
+ const badgeMeta = searchData.meta?.badges?.tags?.[resultBadges[0].tag]!;
+ expect(badgeMeta).toBeDefined();
+
+ expect(result.badges.all[0]).toStrictEqual({
+ tag: resultBadges[0].tag,
+ value: resultBadges[0].value,
+ location: badgeMeta.location,
+ component: badgeMeta.component,
+ priority: badgeMeta.priority,
+ enabled: badgeMeta.enabled,
+ parameters: badgeMeta.parameters,
+ });
+
+ expect(result.badges.atLocation(['left', 'right'])).toStrictEqual([result.badges.all[0]]);
+ });
+
+ it('has callout result badges', () => {
+ const searchData = mockData.updateConfig({ siteId: '8uyt2m' }).searchMeta();
+ const results = new SearchResultStore(
+ searchConfig,
+ services,
+ searchData.meta,
+ searchData.results,
+ searchData.pagination,
+ searchData.merchandising
+ );
+
+ expect(results.length).toBe(searchData.pagination?.pageSize);
+
+ const indexOfOverlayBadge = 2;
+ const result = results[indexOfOverlayBadge] as Product;
+ expect(result.badges?.all).toBeDefined();
+
+ const resultBadges = searchData.results![indexOfOverlayBadge].badges!;
+ expect(resultBadges).toBeDefined();
+ expect(result.badges.all.length).toStrictEqual(resultBadges?.length);
+
+ expect(result.badges.all[0]).toHaveProperty('tag');
+ expect(result.badges.all[0]).toHaveProperty('location');
+ expect(result.badges.all[0]).toHaveProperty('component');
+ expect(result.badges.all[0]).toHaveProperty('priority');
+ expect(result.badges.all[0]).toHaveProperty('enabled');
+ expect(result.badges.all[0]).toHaveProperty('parameters');
+
+ const badgeMeta = searchData.meta?.badges?.tags?.[resultBadges[0].tag]!;
+ expect(badgeMeta).toBeDefined();
+
+ expect(result.badges.all[0]).toStrictEqual({
+ tag: resultBadges[0].tag,
+ value: resultBadges[0].value,
+ location: badgeMeta.location,
+ component: badgeMeta.component,
+ priority: badgeMeta.priority,
+ enabled: badgeMeta.enabled,
+ parameters: badgeMeta.parameters,
+ });
+
+ expect(result.badges.locations.callout).toStrictEqual({
+ [badgeMeta.location.split('/')[1]]: [result.badges.all[0]],
+ });
+ });
+
+ it('has sorted badges based on priority', () => {
+ const searchData = mockData.updateConfig({ siteId: '8uyt2m' }).searchMeta();
+ const results = new SearchResultStore(
+ searchConfig,
+ services,
+ searchData.meta,
+ searchData.results,
+ searchData.pagination,
+ searchData.merchandising
+ );
+
+ const indexOfOverlayBadge = 1;
+ const result = results[indexOfOverlayBadge] as Product;
+ expect(result.badges?.all).toBeDefined();
+
+ const resultBadges = searchData.results![indexOfOverlayBadge].badges!;
+ expect(resultBadges).toBeDefined();
+ expect(result.badges.all.length).toStrictEqual(resultBadges?.length);
+
+ const badgeMeta = searchData.meta?.badges?.tags!;
+ expect(badgeMeta).toBeDefined();
+
+ // raw result badges should have two badges, first one with priority 2, second one with priority 1
+ expect(badgeMeta[resultBadges[0].tag].priority).toBeGreaterThan(badgeMeta[resultBadges[1].tag].priority);
+
+ // result badges should be sorted by priority in the store
+ expect(result.badges.all[0].priority).toBeLessThan(result.badges.all[1].priority);
+
+ // mock data should have two overlay badges with the same same location
+ expect(result.badges.all[0].location).toBe(result.badges.all[1].location);
+ expect(result.badges.all[0].priority).not.toBe(result.badges.all[1].priority);
+
+ // result.overlay should only return 1 badge per location based on priority
+ expect(result.badges.atLocation(['left', 'right'])).toStrictEqual(result.badges.all);
+ });
+
+ it('has helper method atLocation and tags getter', () => {
+ const searchData = mockData.updateConfig({ siteId: '8uyt2m' }).searchMeta();
+ const results = new SearchResultStore(
+ searchConfig,
+ services,
+ searchData.meta,
+ searchData.results,
+ searchData.pagination,
+ searchData.merchandising
+ );
+
+ const result = results[0] as Product;
+ expect(result.badges.all.length).toBe(1);
+
+ const badge = result.badges.all[0];
+ expect(result.badges.atLocation(badge.location)).toStrictEqual(result.badges.all);
+ expect(result.badges.tags).toStrictEqual({
+ [badge.tag]: badge,
+ });
+ });
+ });
});
diff --git a/packages/snap-store-mobx/src/Search/Stores/SearchResultStore.ts b/packages/snap-store-mobx/src/Search/Stores/SearchResultStore.ts
index 5998cedcf..8afc6f142 100644
--- a/packages/snap-store-mobx/src/Search/Stores/SearchResultStore.ts
+++ b/packages/snap-store-mobx/src/Search/Stores/SearchResultStore.ts
@@ -1,7 +1,7 @@
import { computed, makeObservable, observable } from 'mobx';
import deepmerge from 'deepmerge';
import { isPlainObject } from 'is-plain-object';
-import type { SearchStoreConfig, StoreServices, StoreConfigs, VariantSelectionOptions, VariantConfig } from '../../types';
+import type { SearchStoreConfig, StoreServices, StoreConfigs, VariantSelectionOptions, ResultBadge, VariantConfig } from '../../types';
import type {
SearchResponseModelResult,
SearchResponseModelPagination,
@@ -9,6 +9,7 @@ import type {
SearchResponseModelResultMappings,
SearchResponseModelMerchandisingContentInline,
SearchResponseModelMerchandisingContentConfig,
+ MetaResponseModel,
} from '@searchspring/snapi-types';
export class SearchResultStore extends Array {
@@ -19,12 +20,13 @@ export class SearchResultStore extends Array {
constructor(
config: StoreConfigs,
services: StoreServices,
+ metaData: MetaResponseModel,
resultData?: SearchResponseModelResult[],
paginationData?: SearchResponseModelPagination,
merchData?: SearchResponseModelMerchandising
) {
let results: (Product | Banner)[] = (resultData || []).map((result) => {
- return new Product(services, result, config);
+ return new Product(services, result, metaData, config);
});
if (merchData?.content?.inline) {
@@ -96,15 +98,19 @@ export class Product {
};
public custom = {};
public children?: Array = [];
+ public badges: Badges;
+
public quantity = 1;
public mask = new ProductMask();
public variants?: Variants;
- constructor(services: StoreServices, result: SearchResponseModelResult, config?: StoreConfigs) {
+ constructor(services: StoreServices, result: SearchResponseModelResult, metaData: MetaResponseModel, config?: StoreConfigs) {
this.id = result.id!;
this.attributes = result.attributes!;
this.mappings = result.mappings!;
+ this.badges = new Badges(result, metaData);
+
const variantsField = (config as SearchStoreConfig)?.settings?.variants?.field;
if (config && variantsField && this.attributes && this.attributes[variantsField]) {
try {
@@ -151,6 +157,62 @@ export class Product {
}
}
+export class Badges {
+ public all: ResultBadge[] = [];
+
+ constructor(result: SearchResponseModelResult, metaData: MetaResponseModel) {
+ this.all = (result.badges || [])
+ .filter((badge) => {
+ // remove badges that are not in the meta or are disabled
+ return !!(badge?.tag && metaData?.badges?.tags && metaData?.badges?.tags[badge.tag] && metaData?.badges?.tags[badge.tag].enabled);
+ })
+ .map((badge) => {
+ // merge badge with badge meta data
+ const metaBadgeData = metaData?.badges?.tags?.[badge.tag]!;
+
+ return {
+ ...badge,
+ ...metaBadgeData,
+ };
+ })
+ .sort((a, b) => {
+ return a.priority - b.priority;
+ }) as ResultBadge[];
+
+ makeObservable(this, {
+ all: observable,
+ tags: computed,
+ locations: computed,
+ });
+ }
+
+ // get all the result badges that are in a specific location
+ public atLocation(location?: string[] | string): ResultBadge[] {
+ const locations = Array.isArray(location) ? location : [location];
+ return this.all.filter((badge) => {
+ // filter location
+ return locations.some((location) => badge.location.startsWith(`${location}/`) || badge.location == location);
+ });
+ }
+
+ public get tags(): Record {
+ return this.all.reduce((badgeMap: Record, badge) => {
+ badgeMap[badge.tag] = badge;
+ return badgeMap;
+ }, {});
+ }
+
+ public get locations(): Record> {
+ return this.all.reduce((locationMap: Record>, badge) => {
+ // put badge in location by path
+ const [section, tag] = badge.location.split('/');
+ locationMap[section] = locationMap[section] || {};
+ locationMap[section][tag] = (locationMap[section][tag] || []).concat(badge);
+ return locationMap;
+ }, {});
+ }
+}
+
// Mask is used to power the product display for quick attribute swapping
export class ProductMask {
public data: Partial = {};
diff --git a/packages/snap-store-mobx/src/Storage/StorageStore.test.ts b/packages/snap-store-mobx/src/Storage/StorageStore.test.ts
index bcb536239..5ed64382a 100644
--- a/packages/snap-store-mobx/src/Storage/StorageStore.test.ts
+++ b/packages/snap-store-mobx/src/Storage/StorageStore.test.ts
@@ -213,7 +213,7 @@ describe('Storage Store', () => {
describe('Storage Store sets custom config', () => {
const config = {
- type: StorageType.SESSION,
+ type: StorageType.session,
cookie: {
expiration: 100000,
sameSite: 'sameSite',
@@ -233,7 +233,7 @@ describe('Storage Store', () => {
});
});
- [StorageType.SESSION, StorageType.LOCAL, StorageType.COOKIE].forEach((storageType) => {
+ [StorageType.session, StorageType.local, StorageType.cookie].forEach((storageType) => {
describe(`Storage Store using ${storageType} storage`, () => {
describe('set functionality', () => {
it('does nothing when you pass undefined for both path and value', () => {
diff --git a/packages/snap-store-mobx/src/Storage/StorageStore.ts b/packages/snap-store-mobx/src/Storage/StorageStore.ts
index ae870ebaa..7508d6bd4 100644
--- a/packages/snap-store-mobx/src/Storage/StorageStore.ts
+++ b/packages/snap-store-mobx/src/Storage/StorageStore.ts
@@ -24,25 +24,25 @@ export class StorageStore {
}
switch (config.type) {
- case StorageType.SESSION: {
- this.type = featureFlags.storage ? config.type : null;
+ case StorageType.session: {
+ this.type = featureFlags.storage ? (config.type as StorageType) : null;
if (this.type) {
this.state = JSON.parse(window.sessionStorage.getItem(this.key) || '{}');
window.sessionStorage.setItem(this.key, JSON.stringify(this.state));
}
break;
}
- case StorageType.LOCAL: {
- this.type = featureFlags.storage ? config.type : null;
+ case StorageType.local: {
+ this.type = featureFlags.storage ? (config.type as StorageType) : null;
if (this.type) {
this.state = JSON.parse(window.localStorage.getItem(this.key) || '{}');
window.localStorage.setItem(this.key, JSON.stringify(this.state));
}
break;
}
- case StorageType.COOKIE: {
+ case StorageType.cookie: {
if (featureFlags.cookies) {
- this.type = config.type;
+ this.type = config.type as StorageType;
const data = utils.cookies.get(this.key);
if (data) {
this.state = JSON.parse(data);
@@ -51,7 +51,7 @@ export class StorageStore {
break;
}
default: {
- this.type = StorageType.MEMORY;
+ this.type = StorageType.memory;
}
}
}
@@ -70,13 +70,13 @@ export class StorageStore {
}
});
switch (this.type) {
- case StorageType.SESSION:
+ case StorageType.session:
window.sessionStorage.setItem(this.key, JSON.stringify(this.state));
break;
- case StorageType.LOCAL:
+ case StorageType.local:
window.localStorage.setItem(this.key, JSON.stringify(this.state));
break;
- case StorageType.COOKIE:
+ case StorageType.cookie:
utils.cookies.set(this.key, JSON.stringify(this.state), this.sameSite, this.expiration);
break;
}
@@ -84,15 +84,15 @@ export class StorageStore {
public get(path: string): any | undefined {
switch (this.type) {
- case StorageType.SESSION:
+ case StorageType.session:
const sessionData = window.sessionStorage.getItem(this.key);
this.state = sessionData ? JSON.parse(sessionData) : {};
break;
- case StorageType.LOCAL:
+ case StorageType.local:
const localData = window.localStorage.getItem(this.key);
this.state = localData ? JSON.parse(localData) : {};
break;
- case StorageType.COOKIE:
+ case StorageType.cookie:
const data = utils.cookies.get(this.key);
if (data) {
this.state = JSON.parse(data) || {};
@@ -117,13 +117,13 @@ export class StorageStore {
public clear(): void {
switch (this.type) {
- case StorageType.SESSION:
+ case StorageType.session:
window.sessionStorage.removeItem(this.key);
break;
- case StorageType.LOCAL:
+ case StorageType.local:
window.localStorage.removeItem(this.key);
break;
- case StorageType.COOKIE:
+ case StorageType.cookie:
utils.cookies.unset(this.key);
break;
}
@@ -132,7 +132,7 @@ export class StorageStore {
}
export type StorageConfig = {
- type: StorageType;
+ type: StorageType | keyof typeof StorageType;
cookie?: {
expiration?: number;
sameSite?: string;
@@ -141,8 +141,8 @@ export type StorageConfig = {
};
export enum StorageType {
- SESSION = 'session',
- LOCAL = 'local',
- COOKIE = 'cookie',
- MEMORY = 'memory',
+ session = 'session',
+ local = 'local',
+ cookie = 'cookie',
+ memory = 'memory',
}
diff --git a/packages/snap-store-mobx/src/index.ts b/packages/snap-store-mobx/src/index.ts
index 8d3074fca..7eca97ced 100644
--- a/packages/snap-store-mobx/src/index.ts
+++ b/packages/snap-store-mobx/src/index.ts
@@ -6,5 +6,5 @@ export * from './Search/Stores/';
export { RecommendationStore } from './Recommendation/RecommendationStore';
export { CartStore } from './Cart/CartStore';
export { StorageStore, StorageConfig, StorageType } from './Storage/StorageStore';
-
+export { MetaStore } from './Meta/MetaStore';
export * from './types';
diff --git a/packages/snap-store-mobx/src/types.ts b/packages/snap-store-mobx/src/types.ts
index b0b3a01d5..1f974b22b 100644
--- a/packages/snap-store-mobx/src/types.ts
+++ b/packages/snap-store-mobx/src/types.ts
@@ -1,5 +1,11 @@
import type { UrlManager } from '@searchspring/snap-url-manager';
-import type { SearchResponseModelFacetValueAllOfValues, AutocompleteRequestModel, SearchRequestModel } from '@searchspring/snapi-types';
+import type {
+ SearchResponseModelFacetValueAllOfValues,
+ AutocompleteRequestModel,
+ SearchRequestModel,
+ MetaResponseModelBadgeTag,
+ SearchResponseModelResultBadges,
+} from '@searchspring/snapi-types';
// Abstract
export type StoreConfig = {
id: string;
@@ -146,3 +152,5 @@ export type SelectedSelection = {
export type FinderStoreState = {
persisted: boolean;
};
+
+export type ResultBadge = MetaResponseModelBadgeTag & SearchResponseModelResultBadges;
diff --git a/packages/snap-tracker/src/Tracker.ts b/packages/snap-tracker/src/Tracker.ts
index 7fc6a1b6e..84b3f6da9 100644
--- a/packages/snap-tracker/src/Tracker.ts
+++ b/packages/snap-tracker/src/Tracker.ts
@@ -1,7 +1,7 @@
import deepmerge from 'deepmerge';
import { v4 as uuidv4 } from 'uuid';
-import { StorageStore, StorageType } from '@searchspring/snap-store-mobx';
+import { StorageStore } from '@searchspring/snap-store-mobx';
import { cookies, getFlags, version, DomTargeter, getContext, charsParams } from '@searchspring/snap-toolbox';
import { AppMode } from '@searchspring/snap-toolbox';
@@ -73,7 +73,7 @@ export class Tracker {
this.globals = globals;
this.localStorage = new StorageStore({
- type: StorageType.LOCAL,
+ type: 'local',
key: `ss-${this.config.id}`,
});
-