fix: salesforce commerce cloud when there is a untitled product listing from salesforce (#10070)

Author: ryunsong-contentful

apps/salesforce-commerce-cloud/src/components/dialog/CategoryPreview.tsx

@@ -13,7 +13,7 @@ const CategoryPreview = (props: { category: any }) => {
           <Text as="span" fontWeight="fontWeightDemiBold">
             {category.name?.default}
           </Text>{' '}
-          (Catalog: {catalogInfo?.name?.default ? catalogInfo.name.default : category.catalogId})
+          (Catalog: {catalogInfo?.name?.default || category.catalogId})
         </Text>
         {category.pageDescription?.default && (
           <Text as="div">{category.pageDescription.default}</Text>

apps/salesforce-commerce-cloud/src/components/dialog/CategorySearchResults.tsx

@@ -17,10 +17,7 @@ const CategorySearchResults = (props: SearchResultsProps) => {
   const resultsWrapperStyle = css`
     max-height: ${height}px;
     padding: ${tokens.spacingL};
-    padding-bottom: 0;
-    @media screen and (min-height: ${stickyHeaderBreakpoint}px;) {
-      padding-top: ${tokens.spacingL + headerHeight}px;
-    }
+    overflow-y: auto;
   `;
 
   return (
@@ -58,7 +55,7 @@ const CategorySearchResult = (props: SearchResultProps) => {
           <TagsIcon />
           <Flex flexDirection="column" marginLeft="spacingS">
             <Text as="div" fontWeight="fontWeightDemiBold" fontSize="fontSizeM">
-              {result.name.default}
+              {result.name?.default || 'Untitled Category'}
             </Text>
             <Text as="div" fontWeight="fontWeightMedium" fontSize="fontSizeS" fontColor="gray600">
               ID: {result.id}
@@ -70,7 +67,7 @@ const CategorySearchResult = (props: SearchResultProps) => {
                 |
               </Box>
               <Box as="span" css={categoryStyle}>
-                Catalog: {result.name?.default ? result.name.default : result.catalogId}
+                Catalog: {result.name?.default || result.catalogId}
               </Box>
             </Text>
           </Flex>

apps/salesforce-commerce-cloud/src/components/dialog/ProductPreview.tsx

@@ -7,7 +7,7 @@ const ProductPreview = (props: { product: any }) => {
   const { product } = props;
 
   let description = 'Description';
-  if (product.shortDescription.default) {
+  if (product.shortDescription?.default) {
     description =
       product.shortDescription.default.markup.length > descriptionLength
         ? `${product.shortDescription.default.markup.substring(0, descriptionLength)}...`
@@ -18,10 +18,17 @@ const ProductPreview = (props: { product: any }) => {
 
   return (
     <>
-      {imageUrl && <img src={imageUrl} alt={product.image.alt.default} height="75" width="75" />}
+      {imageUrl && (
+        <img
+          src={imageUrl}
+          alt={product.image?.alt?.default || 'Product image'}
+          height="75"
+          width="75"
+        />
+      )}
       <Flex flexDirection="column" marginLeft="spacingS">
         <Text as="div" fontWeight="fontWeightDemiBold">
-          {product.name.default} (ID: {product.id})
+          {product.name?.default || 'Untitled Product'} (ID: {product.id})
         </Text>
         <Text as="div">{description}</Text>
       </Flex>

apps/salesforce-commerce-cloud/src/components/dialog/ProductSearchResults.tsx

@@ -16,10 +16,8 @@ import {
 const ProductSearchResults = (props: SearchResultsProps) => {
   const resultsStyles = css`
     max-height: ${height}px;
-    padding: ${tokens.spacingL} ${tokens.spacingL} 0 ${tokens.spacingL};
-    @media screen and (min-height: ${stickyHeaderBreakpoint}px;) {
-      padding: calc(${tokens.spacingL + headerHeight}px) ${tokens.spacingL} 0 ${tokens.spacingL};
-    }
+    padding: ${tokens.spacingL};
+    overflow-y: auto;
   `;
 
   return (
@@ -147,12 +145,12 @@ const ProductSearchResult = (props: SearchResultProps) => {
               onError={() => setImageHasErrored(true)}
               style={{ display: imageHasLoaded ? 'block' : 'none' }}
               src={result.image?.absUrl}
-              alt={result.image?.alt.default}
+              alt={result.image?.alt?.default || 'Product image'}
               data-test-id="image"
             />
           </div>
         )}
-        <p css={resultNameStyles}>{result.name.default}</p>
+        <p css={resultNameStyles}>{result.name?.default || 'Untitled Product'}</p>
         <p css={resultIdStyles}>ID: {result.id}</p>
         {fieldType === 'category' && <p css={resultIdStyles}>Catalog ID: {result.catalogId}</p>}
       </div>

apps/salesforce-commerce-cloud/src/components/dialog/SearchBar.tsx

@@ -42,20 +42,17 @@ const SearchBar = (props: SearchBarProps) => {
 
   const headerStyles = css`
     border-bottom: 1px solid ${tokens.gray300};
-    padding-bottom: ${tokens.spacingL};
-    @media screen and (min-height: ${props.stickyHeaderBreakpoint}px) {
-      background-color: white;
-      position: fixed;
-      top: 0;
-      z-index: 1;
-      width: calc(100% - 2rem);
-    }
+    padding: ${tokens.spacingM} ${tokens.spacingL} ${tokens.spacingL} ${tokens.spacingL};
+    background-color: white;
+    position: sticky;
+    top: 0;
+    z-index: 1;
   `;
 
   const controlProps = { ...props, fieldType };
 
   return (
-    <Flex as="header" justifyContent="space-between" alignItems="flex-start" css={headerStyles}>
+    <Flex as="header" justifyContent="space-between" alignItems="center" css={headerStyles}>
       <LeftSideControls {...controlProps} />
       <RightSideControls {...controlProps} />
     </Flex>
@@ -112,7 +109,7 @@ const LeftSideControls = (props: SearchControlProps) => {
 
 const RightSideControls = (props: SearchControlProps) => {
   return (
-    <Flex justifyContent="flex-end" flexGrow={1}>
+    <Flex justifyContent="flex-end" alignItems="center" flexGrow={1} gap="spacingM">
       <SelectionList
         items={props.selectedItems}
         itemsInfo={props.selectedData}
@@ -148,12 +145,7 @@ const SelectionList = (props: SelectionListProps) => {
   };
 
   return (
-    <Grid
-      columns={9}
-      justifyContent="space-between"
-      columnGap="spacingXs"
-      rowGap="spacingXs"
-      marginRight="spacingXs">
+    <Flex gap="spacingXs" flexWrap="wrap" alignItems="center">
       {items &&
         items.map((itemId: string) => (
           <SelectionListItem
@@ -164,7 +156,7 @@ const SelectionList = (props: SelectionListProps) => {
             fieldType={props.fieldType}
           />
         ))}
-    </Grid>
+    </Flex>
   );
 };
 

apps/salesforce-commerce-cloud/src/components/field/ItemCard.tsx

@@ -89,11 +89,16 @@ const ItemPreview = (props: ItemPreviewProps) => {
   return (
     <>
       {useImage && imageUrl && (
-        <img src={imageUrl} alt={itemData.image.alt.default} height="75" width="75" />
+        <img
+          src={imageUrl}
+          alt={itemData.image?.alt?.default || 'Product image'}
+          height="75"
+          width="75"
+        />
       )}
       <Flex flexDirection="column" marginLeft="spacingS">
         <Text as="div" fontWeight="fontWeightDemiBold" fontSize="fontSizeM">
-          {itemData.name.default}
+          {itemData.name?.default || 'Untitled Item'}
         </Text>
         <Text as="div" fontWeight="fontWeightMedium" fontSize="fontSizeS" fontColor="gray600">
           ID: {itemData.id}
@@ -107,7 +112,7 @@ const ItemPreview = (props: ItemPreviewProps) => {
                 |
               </Box>
               <Box as="span" css={categoryStyle}>
-                Catalog: {itemData.name?.default ? itemData.name.default : itemData.catalogId}
+                Catalog: {itemData.name?.default || itemData.catalogId}
               </Box>
             </>
           )}

apps/salesforce-commerce-cloud/src/locations/Dialog.tsx

@@ -32,10 +32,10 @@ const Dialog = () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <>
       <Modal.Header title={makeTitle(selectMultiple, fieldType)} onClose={() => sdk.close()} />
       <SearchPicker />
-    </Flex>
+    </>
   );
 };