refactor: separate badge components and wrappers, general cleanup

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

@@ -188,13 +188,15 @@ export class Client {
 			siteId: params.siteId || this.globals.siteId,
 		};
 
-		const [profile, recommendations] = await Promise.all([
+		const [meta, profile, recommendations] = await Promise.all([
+			this.meta({ siteId: params.siteId || '' }),
 			this.requesters.recommend.getProfile(profileParams),
 			this.requesters.recommend.batchRecommendations(recommendParams),
 		]);
 
 		return {
 			...profile,
+			meta,
 			results: recommendations[0].results,
 		};
 	}

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

@@ -149,7 +149,7 @@ export class HybridAPI extends API {
 				},
 				tags: {
 					'on-sale': {
-						location: 'left-middle',
+						location: 'left-middle-upper',
 						component: 'BadgePill',
 						parameters: {
 							color: '#0000FF',

packages/snap-client/src/types.ts

@@ -1,5 +1,11 @@
 import { AppMode } from '@searchspring/snap-toolbox';
-import type { MetaRequestModel, SearchResponseModelResult, SearchRequestModel, AutocompleteRequestModel } from '@searchspring/snapi-types';
+import type {
+	MetaRequestModel,
+	SearchResponseModelResult,
+	SearchRequestModel,
+	AutocompleteRequestModel,
+	MetaResponseModel,
+} from '@searchspring/snapi-types';
 
 export type HTTPHeaders = { [key: string]: string };
 
@@ -192,4 +198,4 @@ type RecommendationRequestValueFilterModel = {
 	value: string | number;
 };
 
-export type RecommendCombinedResponseModel = ProfileResponseModel & { results: SearchResponseModelResult[] };
+export type RecommendCombinedResponseModel = ProfileResponseModel & { results: SearchResponseModelResult[] } & { meta: MetaResponseModel };

packages/snap-preact-components/src/components/Atoms/BadgeImage/BadgeImage.stories.tsx

@@ -0,0 +1 @@
+// TODO

packages/snap-preact-components/src/components/Atoms/BadgeImage/BadgeImage.test.tsx

@@ -0,0 +1 @@
+// TODO

packages/snap-preact-components/src/components/Atoms/BadgeImage/BadgeImage.tsx

@@ -0,0 +1,61 @@
+/** @jsx jsx */
+import { Fragment, h } from 'preact';
+
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+
+import { Theme, useTheme, CacheProvider } from '../../../providers';
+import { ComponentProps, StylingCSS } from '../../../types';
+import type { ResultBadge, OverlayResultBadge } from '@searchspring/snap-store-mobx';
+
+const CSS = {
+	BadgeImage: ({}: BadgeImageProps) => {
+		return css({});
+	},
+};
+
+export const BadgeImage = observer((properties: BadgeImageProps): JSX.Element => {
+	const globalTheme: Theme = useTheme();
+
+	const props: BadgeImageProps = {
+		// default props
+		// global theme
+		...globalTheme?.components?.badgeImage,
+		// props
+		...properties,
+		...properties.theme?.components?.badgeImage,
+	};
+	const { badge, disableStyles, className, style } = props;
+
+	const styling: { css?: StylingCSS } = {};
+
+	if (!disableStyles) {
+		styling.css = [CSS.BadgeImage(props), style];
+	} else if (style) {
+		styling.css = [style];
+	}
+
+	return badge?.parameters?.url ? (
+		<CacheProvider>
+			<img
+				{...styling}
+				className={classnames(
+					'ss__badge-image',
+					`ss__badge-image--${badge.component}`,
+					`ss__badge-image--${badge.location}`,
+					`ss__badge-image--${badge.tag}`,
+					className
+				)}
+				alt={badge.label}
+				src={badge.parameters.url}
+			/>
+		</CacheProvider>
+	) : (
+		<Fragment />
+	);
+});
+
+export interface BadgeImageProps extends ComponentProps {
+	badge: ResultBadge | OverlayResultBadge;
+}

packages/snap-preact-components/src/components/Atoms/BadgeImage/index.ts

@@ -0,0 +1 @@
+export * from './BadgeImage';

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

@@ -0,0 +1 @@
+# BadgeImage // TODO

packages/snap-preact-components/src/components/Atoms/BadgePill/BadgePill.stories.tsx

@@ -0,0 +1 @@
+// TODO

packages/snap-preact-components/src/components/Atoms/BadgePill/BadgePill.test.tsx

@@ -0,0 +1 @@
+// TODO

packages/snap-preact-components/src/components/Atoms/BadgePill/BadgePill.tsx

@@ -0,0 +1,68 @@
+/** @jsx jsx */
+import { Fragment, h } from 'preact';
+
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+
+import { Theme, useTheme, CacheProvider } from '../../../providers';
+import { ComponentProps, StylingCSS } from '../../../types';
+import type { ResultBadge, OverlayResultBadge } from '@searchspring/snap-store-mobx';
+
+const CSS = {
+	BadgePill: (props: BadgePillProps) => {
+		const { parameters } = props.badge;
+		const { color, colorText } = parameters;
+		return css({
+			padding: '0.2em 0.5em',
+
+			background: color || 'rgba(255, 255, 255, 0.5)',
+			color: colorText || '#000000',
+		});
+	},
+};
+
+export const BadgePill = observer((properties: BadgePillProps): JSX.Element => {
+	const globalTheme: Theme = useTheme();
+
+	const props: BadgePillProps = {
+		// default props
+		// global theme
+		...globalTheme?.components?.badgePill,
+		// props
+		...properties,
+		...properties.theme?.components?.badgePill,
+	};
+	const { badge, disableStyles, className, style } = props;
+
+	const styling: { css?: StylingCSS } = {};
+
+	if (!disableStyles) {
+		styling.css = [CSS.BadgePill(props), style];
+	} else if (style) {
+		styling.css = [style];
+	}
+
+	return badge ? (
+		<CacheProvider>
+			<div
+				{...styling}
+				className={classnames(
+					'ss__badge-pill',
+					`ss__badge-pill--${badge.component}`,
+					`ss__badge-pill--${badge.location}`,
+					`ss__badge-pill--${badge.tag}`,
+					className
+				)}
+			>
+				{badge.label}
+			</div>
+		</CacheProvider>
+	) : (
+		<Fragment />
+	);
+});
+
+export interface BadgePillProps extends ComponentProps {
+	badge: ResultBadge | OverlayResultBadge;
+}

packages/snap-preact-components/src/components/Atoms/BadgePill/index.ts

@@ -0,0 +1 @@
+export * from './BadgePill';

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

@@ -0,0 +1,2 @@
+# BadgePill // TODO
+