docs: add last missing docs, fix failing test

packages/snap-client/src/Client/NetworkCache/NetworkCache.test.ts

@@ -115,7 +115,7 @@ describe('Network Cache', () => {
 		const cacheConfig = {
 			ttl: 1000,
 			enabled: true,
-			maxSize: 2, // KB
+			maxSize: 4, // KB
 			purgeable: true,
 		};
 
@@ -169,7 +169,7 @@ describe('Network Cache', () => {
 			const cacheConfig = {
 				ttl: 1000,
 				enabled: true,
-				maxSize: 2, // KB
+				maxSize: 4, // KB
 				purgeable: false,
 			};
 

packages/snap-client/src/Client/apis/Recommend.ts

@@ -178,34 +178,6 @@ export class RecommendAPI extends API {
 			path + JSON.stringify(queryParameters)
 		);
 
-		const badges = [
-			{
-				tag: 'on-sale',
-				label: '30% Off',
-			},
-			{
-				tag: 'free-shipping',
-				label: 'Free Shipping',
-			},
-			{
-				tag: 'christmas',
-				label: 'On Sale for Christmas',
-			},
-			{
-				tag: 'specialoffer',
-				label: 'Special Offer',
-			},
-		];
-		// @ts-ignore - mock badges
-		response[0].results = response[0].results.map((result: any, index: number) => {
-			return {
-				...result,
-				badges: [
-					badges[index % badges.length],
-					// ...badges
-				],
-			};
-		});
 		return response as unknown as RecommendResponseModel;
 	}
 

packages/snap-preact-components/src/components/Atoms/BadgeText/readme.md

@@ -5,7 +5,7 @@ Renders a text badge. It is expected to be used with `CalloutBadge` and `Overlay
 ## Usage
 
 ### label
-The requires `label` prop specifies the badge text contents.
+The required `label` prop specifies the badge text contents.
 
 ```jsx
 <BadgeText label={'30% Off'} />

packages/snap-preact-components/src/components/Molecules/CalloutBadge/readme.md

@@ -1,2 +1,42 @@
-# CalloutBadge // TODO
+# CalloutBadge
+
+Renders callout badges configured in the Searchspring Management Console and returned from the API. This component is intended to be used within a `Result` component to display callout badges.
+
+## Usage
+
+### name
+The required `name` prop specifies the name of the callout badge to display. 
+
+```jsx
+<CalloutBadge name={'callout'} controller={controller} result={controller.store.results[0]} />
+```
+
+### controller
+The required `controller` prop specifies a reference to the controller.
+
+```jsx
+<CalloutBadge name={'callout'} controller={controller} result={controller.store.results[0]} />
+```
+
+### result
+The required `result` prop specifies a reference to a product object from the `results` store array.
+
+```jsx
+<CalloutBadge name={'callout'} controller={controller} result={controller.store.results[0]} />
+```
+
+### componentMap
+The `componentMap` prop allows for custom badge components. This functionallity requires the component and accompanying files to be synced to the Searchspring Management Console using Snapfu.
+
+```jsx
+<CalloutBadge 
+    name={'callout'} 
+    controller={controller} 
+    result={controller.store.results[0]} 
+    componentMap={{
+        'customOnSaleBadge': () => <div>On Sale</div>
+    }}
+/>
+```
+
 

packages/snap-preact-components/src/components/Molecules/OverlayBadge/readme.md

@@ -1,2 +1,57 @@
-# OverlayBadge // TODO
+# OverlayBadge
+
+Renders overlay badges configured in the Searchspring Management Console and returned from the API. This component is intended to be used within a `Result` component to wrap elements (children) that should have overlay badges.
+
+## Usage
+
+### children
+The required children provided to the component will be wrapped and rendered in a relative div to allow badges to be positioned absolutely. 
+
+```jsx
+<OverlayBadge controller={controller} result={controller.store.results[0]}>
+    <div>
+        <img src='/images/example.png'/>
+    </div>
+</OverlayBadge>
+```
+
+### controller
+The required `controller` prop specifies a reference to the controller.
+
+```jsx
+<OverlayBadge controller={controller} result={controller.store.results[0]}>
+    <div>
+        <img src='/images/example.png'/>
+    </div>
+</OverlayBadge>
+```
+
+### result
+The required `result` prop specifies a reference to a product object from the `results` store array.
+
+```jsx
+<OverlayBadge controller={controller} result={controller.store.results[0]}>
+    <div>
+        <img src='/images/example.png'/>
+    </div>
+</OverlayBadge>
+```
+
+### componentMap
+The `componentMap` prop allows for custom badge components. This functionallity requires the component and accompanying files to be synced to the Searchspring Management Console using Snapfu.
+
+```jsx
+<OverlayBadge 
+    controller={controller} 
+    result={controller.store.results[0]}
+    componentMap={{
+        'customOnSaleBadge': () => <div>On Sale</div>
+    }}
+>
+    <div>
+        <img src='/images/example.png'/>
+    </div>
+</OverlayBadge>
+```
+
 

packages/snap-preact-components/src/components/Molecules/Result/Result.test.tsx

@@ -29,12 +29,6 @@ describe('Result Component', () => {
 		expect(imageElement).toBeInTheDocument();
 	});
 
-	it.skip('renders badge', () => {
-		const rendered = render(<Result result={mockResults[0]} />);
-		const badgeElement = rendered.container.querySelector('.ss__result .ss__result__image-wrapper .ss__badge');
-		expect(badgeElement).toBeInTheDocument();
-	});
-
 	it('renders title', () => {
 		const rendered = render(<Result result={searchResponse.results![0] as Product} />);
 		const title = rendered.container.querySelector('.ss__result .ss__result__details .ss__result__details__title');

packages/snap-store-mobx/src/Search/Stores/SearchBadgeStore.test.ts

@@ -0,0 +1,112 @@
+import { UrlManager, UrlTranslator } from '@searchspring/snap-url-manager';
+import { MockData } from '@searchspring/snap-shared';
+
+import { SearchBadgeStore } from './SearchBadgeStore';
+import type { Product } from './SearchResultStore';
+
+const services = {
+	urlManager: new UrlManager(new UrlTranslator()),
+};
+
+const mockData = new MockData();
+
+describe('Sorting Store', () => {
+	beforeEach(() => {
+		expect.hasAssertions();
+	});
+
+	it('can construct', () => {
+		const searchData = mockData.searchMeta();
+		//  @ts-ignore - badges missing from MetaResponseModel
+		const badgeStore = new SearchBadgeStore(searchData.meta);
+		//  @ts-ignore - private property
+		expect(badgeStore.meta).toStrictEqual(searchData.meta);
+	});
+
+	it('can get callout badge', () => {
+		const searchData = mockData.searchMeta();
+		const meta = searchData.meta as any;
+
+		const badgeStore = new SearchBadgeStore(meta);
+
+		const calloutTag = Object.keys(meta.badges.tags || {}).find((tag) => {
+			return meta.badges.tags[tag].location === 'callout';
+		})!;
+		expect(calloutTag).toBeDefined();
+
+		const index = searchData.results!.findIndex((result: any) => result?.badges?.find((badge: any) => badge.tag === calloutTag))!;
+		expect(index).toBeGreaterThanOrEqual(0);
+
+		// mock a SearchResultStore
+		const result = {
+			...searchData.results![index],
+			badges: [
+				{
+					...(searchData.results![index] as any).badges[0],
+					...(searchData.meta as any).badges.tags[calloutTag],
+				},
+			],
+		} as Product;
+
+		expect(result.badges[0]).toHaveProperty('tag');
+		expect(result.badges[0]).toHaveProperty('label');
+		expect(result.badges[0]).toHaveProperty('location');
+		expect(result.badges[0]).toHaveProperty('component');
+		expect(result.badges[0]).toHaveProperty('parameters');
+
+		const badge = badgeStore.getCalloutBadge(result, 'callout')!;
+
+		expect(badge).toBeDefined();
+		expect(badge.tag).toBe(calloutTag);
+		expect(badge.location).toBe('callout');
+	});
+
+	it('can get overlay badge', () => {
+		const searchData = mockData.searchMeta();
+		const meta = searchData.meta as any;
+
+		const badgeStore = new SearchBadgeStore(meta);
+
+		let overlayTag = '';
+		const index = searchData.results!.findIndex((result: any) => {
+			const tag = result.badges?.[0]?.tag;
+			if (!tag) return false;
+			const metaTag = meta.badges.tags[tag];
+			const location = metaTag.location;
+
+			const hasOverlayBadge =
+				meta.badges.locations.overlay.left.find((overlayLocation: any) => overlayLocation.name === location) ||
+				meta.badges.locations.overlay.right.find((overlayLocation: any) => overlayLocation.name === location);
+
+			if (hasOverlayBadge) {
+				overlayTag = tag;
+				return true;
+			}
+		});
+		expect(index).toBeGreaterThanOrEqual(0);
+		expect(overlayTag.length).toBeGreaterThan(0);
+
+		// mock a SearchResultStore
+		const result = {
+			...searchData.results![index],
+			badges: [
+				{
+					...(searchData.results![index] as any).badges[0],
+					...(searchData.meta as any).badges.tags[overlayTag],
+				},
+			],
+		} as Product;
+
+		expect(result.badges[0]).toHaveProperty('tag');
+		expect(result.badges[0]).toHaveProperty('label');
+		expect(result.badges[0]).toHaveProperty('location');
+		expect(result.badges[0]).toHaveProperty('component');
+		expect(result.badges[0]).toHaveProperty('parameters');
+
+		const badges = badgeStore.getOverlayBadges(result)!;
+
+		expect(badges).toBeDefined();
+		expect(badges.length).toBeGreaterThan(0);
+		expect(badges[0].tag).toBe(overlayTag);
+	});
+});