@sonic-equipment/ui 0.0.75 → 0.0.77

package/dist/index.d.ts

@@ -4213,7 +4213,7 @@ interface ImageSource {
   fallbackSrc?: string
   fit?: 'contain' | 'cover'
   height?: number
-  image: Image$1 | ResponsiveImage
+  image: Image$1 | ResponsiveImage | undefined
   loading?: 'lazy' | 'eager'
   onError?: () => void
   title: string
@@ -4542,7 +4542,17 @@ interface ProgressCircleProps {
 }
 declare function ProgressCircle({ className }: ProgressCircleProps): react_jsx_runtime.JSX.Element;
 
-type ImageProps = ImageSource;
+interface ImageProps {
+    className?: string;
+    fallbackSrc?: string;
+    fit?: 'contain' | 'cover';
+    height?: number;
+    image: Image$1 | ResponsiveImage | undefined;
+    loading?: 'lazy' | 'eager';
+    onError?: () => void;
+    title: string;
+    width?: number;
+}
 declare function Image({ className, fallbackSrc, fit, height, image, loading, title, width, }: ImageProps): react_jsx_runtime.JSX.Element;
 
 declare function PageContainer({ children, className, }: {

package/dist/index.js

@@ -19,7 +19,7 @@ import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query
 import { createLocalStorageRecentSearchesPlugin, search } from '@algolia/autocomplete-plugin-recent-searches';
 
 const environments = ['sandbox', 'production', 'local'];
-const localUrls = /local.com|localhost:6006/i;
+const localUrls = /localhost:6006/i;
 const sandboxUrls = /local|insitesandbox.com|azurestaticapps|ui.sonic-equipment.com|sandbox|accept|test/i;
 const productionUrls = /sonic-equipment.com|production/i;
 let environmentUrl;
@@ -1597,7 +1597,7 @@ function ProductSku({ sku }) {
 }
 
 function isResponsiveImage(image) {
-    return Boolean(image.lg);
+    return Boolean(image?.lg);
 }
 
 var styles$K = {"image":"image-module-lg7Kj","contain":"image-module-KFEgG","cover":"image-module-tVKFe","has-error":"image-module-LM93B","picture":"image-module-pNYjR"};
@@ -1612,18 +1612,19 @@ function Image({ className, fallbackSrc = 'https://res.cloudinary.com/dkz9eknwh/
         fallbackSrc,
         fit,
         height,
-        image,
         loading,
         onError: handleError,
         title,
         width,
     };
     if (isResponsiveImage(image)) {
-        return jsx(PictureComponent, { ...props, hasError: hasError });
+        return jsx(PictureComponent, { ...props, hasError: hasError, image: image });
     }
-    return jsx(ImageComponent, { ...props, hasError: hasError });
+    return jsx(ImageComponent, { ...props, hasError: hasError, image: image });
 }
 function ImageComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
+    if (!image)
+        return (jsx("img", { className: clsx(styles$K.image, className, styles$K[fit], styles$K['has-error']), src: fallbackSrc, ...rest }));
     const srcSet = !hasError
         ? `${image[1]} 1x, ${image[2]} 2x, ${image[3]} 3x`
         : undefined;
@@ -1632,8 +1633,8 @@ function ImageComponent({ className, fallbackSrc, fit = 'cover', hasError, image
         }), src: !hasError ? image[3] : fallbackSrc, srcSet: srcSet, ...rest }));
 }
 function PictureComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
-    if (!isResponsiveImage(image))
-        return null;
+    if (!image)
+        return (jsx("picture", { className: clsx(styles$K.picture, className), children: jsx("img", { className: clsx(styles$K[fit], styles$K['has-error']), src: fallbackSrc, ...rest }) }));
     return (jsxs("picture", { className: clsx(styles$K.picture, className), children: [jsx("source", { media: "(max-width: 768px)", srcSet: `${image.sm[1]} 1x, ${image.sm[2]} 2x, ${image.sm[3]} 3x` }), jsx("source", { media: "(max-width: 1439px)", srcSet: `${image.md[1]} 1x, ${image.md[2]} 2x, ${image.md[3]} 3x` }), jsx("source", { media: "(min-width: 1440px)", srcSet: `${image.lg[1]} 1x, ${image.lg[2]} 2x, ${image.lg[3]} 3x` }), jsx("img", { className: clsx(styles$K[fit], {
                     [styles$K['has-error']]: hasError,
                 }), src: !hasError ? image.lg[3] : fallbackSrc, ...rest })] }));
@@ -7566,10 +7567,11 @@ function ProductDetailsPanel({ product }) {
                     flexDirection: 'column',
                     gap: '8px',
                 }, children: [jsx(Heading, { size: "xs", children: product.productTitle }), jsx(ProductSku, { sku: product.productNumber })] }), jsxs("div", { style: {
+                    alignItems: 'flex-end',
                     display: 'flex',
                     justifyContent: 'space-between',
                     width: '100%',
-                }, children: [jsx(ProductPrice, { isVatIncluded: false, originalPrice: product.unitListPrice, price: product.unitListPrice }), jsxs("div", { style: { display: 'flex', gap: '8px' }, children: [product.canAddToCart && (jsx(ConnectedAddToCartButton, { productId: product.storefrontId })), product.canAddToWishlist && (jsx(ConnectedFavoriteButton, { productId: product.storefrontId }))] })] }), jsxs("div", { children: [jsx(Heading, { size: "xxs", children: jsx(FormattedMessage, { id: "Product Features" }) }), jsx(ShowAll, { initialHeight: 216, children: jsx("div", { className: styles$l.description, dangerouslySetInnerHTML: {
+                }, children: [jsx(ProductPrice, { isVatIncluded: false, originalPrice: product.unitListPrice, price: product.unitListPrice }), jsxs("div", { style: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [product.canAddToCart && (jsx(ConnectedAddToCartButton, { productId: product.storefrontId })), product.canAddToWishlist && (jsx(ConnectedFavoriteButton, { productId: product.storefrontId }))] })] }), jsxs("div", { children: [jsx(Heading, { size: "xxs", children: jsx(FormattedMessage, { id: "Product Features" }) }), jsx(ShowAll, { initialHeight: 216, children: jsx("div", { className: styles$l.description, dangerouslySetInnerHTML: {
                                 __html: product.content.htmlContent,
                             } }) })] }), jsx("div", { children: jsxs(Accordion, { indented: true, borderType: ['top', 'middle-accentuated'], children: [Boolean(product.attributeTypes.length) && (jsx(AccordionItem, { id: "specification", title: jsx(FormattedMessage, { id: "Specifications" }), children: jsx(FeatureList, { className: styles$l['feature-list'], features: product.attributeTypes.map(attribute => ({
                                     id: `${attribute.id}`,
@@ -7599,15 +7601,17 @@ function ProductDetailsPage({ pageUrl }) {
     if (!data || isFetching)
         return jsx(LoadingPage, {});
     const { breadCrumb, included, product, recentlyViewed } = data;
-    return (jsx(Page, { breadCrumb: breadCrumb, children: jsx(ProductDetailsPageLayout, { imageGallery: jsx(ImagesGrid, { images: product.images }), included: included && (jsxs(Fragment, { children: [jsx(Heading, { size: "s", tag: "h2", children: jsx(FormattedMessage, { id: "Includes" }) }), jsx(ProductCarousel, { allowExpandToGrid: true, hasOverflow: true, productCards: included.map(product => (jsx(ConnectedProductCard, { href: product.href, image: {
+    return (jsx(Page, { breadCrumb: breadCrumb, children: jsx(ProductDetailsPageLayout, { imageGallery: jsx(ImagesGrid, { images: product.images }), included: included !== undefined &&
+                Boolean(included.length) && (jsxs(Fragment, { children: [jsx(Heading, { size: "s", tag: "h2", children: jsx(FormattedMessage, { id: "Includes" }) }), jsx(ProductCarousel, { allowExpandToGrid: true, hasOverflow: true, productCards: included.map(product => (jsx(ConnectedProductCard, { href: product.href, image: {
                                 fit: 'contain',
                                 image: product.image,
-                                title: product.image.altText,
-                            }, price: product.price, productId: product.productId, sku: product.sku, tags: product.tags, title: product.title }, product.storefrontId))) })] })), productInformation: jsx(ProductDetailsPanel, { product: product }), recentlyViewed: recentlyViewed ? (jsxs(Fragment, { children: [jsx(Heading, { size: "s", tag: "h2", children: jsx(FormattedMessage, { id: "Recently viewed" }) }), jsx(ProductCarousel, { hasOverflow: true, productCards: recentlyViewed.map(product => (jsx(ConnectedProductCard, { href: product.href, image: {
+                                title: product.image?.altText || product.title,
+                            }, price: product.price, productId: product.productId, sku: product.sku, tags: product.tags, title: product.title }, product.storefrontId))) })] })), productInformation: jsx(ProductDetailsPanel, { product: product }), recentlyViewed: recentlyViewed !== undefined &&
+                Boolean(recentlyViewed.length) && (jsxs(Fragment, { children: [jsx(Heading, { size: "s", tag: "h2", children: jsx(FormattedMessage, { id: "Recently viewed" }) }), jsx(ProductCarousel, { hasOverflow: true, productCards: recentlyViewed.map(product => (jsx(ConnectedProductCard, { href: product.href, image: {
                                 fit: 'contain',
                                 image: product.image,
-                                title: product.image.altText,
-                            }, price: product.price, productId: product.productId, sku: product.sku, tags: product.tags, title: product.title }, product.storefrontId))) })] })) : undefined, usp: jsx("div", { style: {
+                                title: product.image?.altText || product.title,
+                            }, price: product.price, productId: product.productId, sku: product.sku, tags: product.tags, title: product.title }, product.storefrontId))) })] })), usp: jsx("div", { style: {
                     backgroundColor: '#bcbcbc',
                     display: 'grid',
                     fontWeight: 'bold',

package/dist/src/media/image/image.d.ts

@@ -1,4 +1,14 @@
-import { type ImageSource } from 'shared/model/image';
-type ImageProps = ImageSource;
+import { type Image as ImageType, ResponsiveImage } from 'shared/model/image';
+interface ImageProps {
+    className?: string;
+    fallbackSrc?: string;
+    fit?: 'contain' | 'cover';
+    height?: number;
+    image: ImageType | ResponsiveImage | undefined;
+    loading?: 'lazy' | 'eager';
+    onError?: () => void;
+    title: string;
+    width?: number;
+}
 export declare function Image({ className, fallbackSrc, fit, height, image, loading, title, width, }: ImageProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/shared/api/bff/model/bff.model.d.ts

@@ -58,7 +58,7 @@ interface ProductPrice {
 }
 interface ProductSummary {
     href: string;
-    image: Image;
+    image: Image | undefined;
     price: ProductPrice;
     productId: string;
     sku: string;

package/dist/src/shared/model/image.d.ts

@@ -11,7 +11,7 @@ export interface ImageSource {
     fallbackSrc?: string;
     fit?: 'contain' | 'cover';
     height?: number;
-    image: Image | ResponsiveImage;
+    image: Image | ResponsiveImage | undefined;
     loading?: 'lazy' | 'eager';
     onError?: () => void;
     title: string;
@@ -23,5 +23,5 @@ export interface ResponsiveImage {
     md: DPRSrcSet;
     sm: DPRSrcSet;
 }
-export declare function isResponsiveImage(image: Image | ResponsiveImage): image is ResponsiveImage;
+export declare function isResponsiveImage(image: Image | ResponsiveImage | undefined): image is ResponsiveImage;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "0.0.75",
+  "version": "0.0.77",
   "type": "module",
   "license": "MIT",
   "engines": {