fix: [quick order] adjust validation of skus and show better status

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+- Fixes validation of SKU codes in the quickorder and styles of the ReviewBlock component
+
 ## [3.15.4] - 2024-06-13
 
 ## [3.15.3] - 2024-06-10

react/components/ReviewBlock.tsx

@@ -7,10 +7,9 @@ import {
   Input,
   ButtonWithIcon,
   IconDelete,
-  IconInfo,
-  Tooltip,
   Dropdown,
   ToastContext,
+  Tag,
 } from 'vtex.styleguide'
 import type { WrappedComponentProps } from 'react-intl'
 import { injectIntl } from 'react-intl'
@@ -32,8 +31,8 @@ const ReviewBlock: FunctionComponent<WrappedComponentProps & any> = ({
   hiddenColumns,
   reviewedItems,
   onRefidLoading,
-  backList,
   intl,
+  backList,
 }: any) => {
   const client = useApolloClient()
   const { showToast } = useContext(ToastContext)
@@ -128,11 +127,11 @@ const ReviewBlock: FunctionComponent<WrappedComponentProps & any> = ({
 
     // drops sellers without stock from refidData
     refidData?.skuFromRefIds.items.forEach((item: any) => {
-      if (!item.sellers) return
+      if (!item?.sellers) return
       item.sellers = item.sellers.filter(
         (seller: any) =>
-          seller.availability === 'available' ||
-          seller.availability === 'partiallyAvailable'
+          seller?.availability === 'available' ||
+          seller?.availability === 'partiallyAvailable'
       )
     })
 
@@ -192,19 +191,20 @@ const ReviewBlock: FunctionComponent<WrappedComponentProps & any> = ({
 
         let selectedSellerHasPartialStock
         const foundHasStock =
-          found?.sellers?.length &&
-          found.sellers.filter((seller: any) => {
-            if (seller.id === sellerWithStock) {
-              selectedSellerHasPartialStock =
-                seller.availability === 'partiallyAvailable'
-            }
-
-            return (
-              seller.availability &&
-              (seller.availability === 'available' ||
-                seller.availability === 'partiallyAvailable')
-            )
-          }).length
+          (found?.sellers?.length &&
+            found.sellers.filter((seller: any) => {
+              if (seller?.id === sellerWithStock) {
+                selectedSellerHasPartialStock =
+                  seller?.availability === 'partiallyAvailable'
+              }
+
+              return (
+                seller?.availability &&
+                (seller?.availability === 'available' ||
+                  seller?.availability === 'partiallyAvailable')
+              )
+            })?.length) ||
+          0
 
         const itemRestricted = sellerWithStock
           ? null
@@ -281,6 +281,7 @@ const ReviewBlock: FunctionComponent<WrappedComponentProps & any> = ({
       })
 
       onReviewItems(updated)
+
       if (JSON.stringify(reviewItems) !== JSON.stringify(updated)) {
         setReviewState({
           ...state,
@@ -475,7 +476,7 @@ const ReviewBlock: FunctionComponent<WrappedComponentProps & any> = ({
       tableSchema.properties.sku = {
         type: 'string',
         title: intl.formatMessage({ id: 'store/quickorder.review.label.sku' }),
-        width: 125,
+        width: 112,
       }
     }
 
@@ -485,7 +486,7 @@ const ReviewBlock: FunctionComponent<WrappedComponentProps & any> = ({
         title: intl.formatMessage({
           id: 'store/quickorder.review.label.quantity',
         }),
-        width: 75,
+        width: 72,
       }
     }
 
@@ -502,10 +503,14 @@ const ReviewBlock: FunctionComponent<WrappedComponentProps & any> = ({
     if (columnsToBeHidden.indexOf('totalQuantity') === -1) {
       tableSchema.properties.totalQuantity = {
         type: 'float',
-        title: intl.formatMessage({
-          id: 'store/quickorder.review.label.totalQuantity',
-        }),
-        width: 100,
+        title: (
+          <div style={{ whiteSpace: 'break-spaces' }}>
+            {intl.formatMessage({
+              id: 'store/quickorder.review.label.totalQuantity',
+            })}
+          </div>
+        ),
+        width: 82,
       }
     }
 
@@ -546,7 +551,6 @@ const ReviewBlock: FunctionComponent<WrappedComponentProps & any> = ({
         title: intl.formatMessage({
           id: 'store/quickorder.review.label.status',
         }),
-        width: 75,
         cellRenderer: ({ cellData, rowData }: any) => {
           if (rowData.error) {
             const errMsg = errorMessage[cellData || 'store/quickorder.valid']
@@ -560,12 +564,10 @@ const ReviewBlock: FunctionComponent<WrappedComponentProps & any> = ({
                 : intl.formatMessage(errMsg)
 
             return (
-              <span className="pa3 br2 dib mr5 mv0">
-                <Tooltip label={text}>
-                  <span className="c-danger pointer">
-                    <IconInfo />
-                  </span>
-                </Tooltip>
+              <span>
+                <Tag type="error" variation="low" size="small">
+                  {text}
+                </Tag>
               </span>
             )
           }
@@ -579,7 +581,7 @@ const ReviewBlock: FunctionComponent<WrappedComponentProps & any> = ({
       tableSchema.properties.delete = {
         type: 'object',
         title: ' ',
-        width: 75,
+        width: 58,
         // eslint-disable-next-line react/display-name
         cellRenderer: ({ rowData }: any) => {
           return (