fix price being undefined issue

Author: jabahum

src/stock-items/stock-item-price-details/stock-item-price-details.component.tsx

@@ -12,37 +12,30 @@ interface OrderPriceDetailsComponentProps {
 
 const OrderPriceDetailsComponent: React.FC<OrderPriceDetailsComponentProps> = ({ orderItemUuid }) => {
   const { t } = useTranslation();
+
   const { item } = useOrderItemDetails(orderItemUuid);
+
   const [results, setResults] = useState<StockItemDTO[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
-    const fetchResults = async () => {
-      if (item?.uuid) {
-        setIsLoading(true);
-        try {
-          const response = await fetchStockItem(item.uuid);
-          setResults(response);
-        } catch (error) {
-          setIsLoading(false);
-        } finally {
-          setIsLoading(false);
+    if (item && item.uuid) {
+      fetchStockItem(item.uuid).then((response) => {
+        if (response?.results) {
+          setResults(response.results);
         }
-      }
-    };
-
-    fetchResults();
-  }, [item?.uuid]);
+      });
+    }
+  }, [item]);
 
   const purchasePrice = results[0]?.purchasePrice;
 
   return (
     <div className={styles.priceDetailsContainer}>
       <span className={styles.priceLabel}>{t('price', 'Price')}:</span>
-      {isLoading ? (
-        <SkeletonText width="100px" role="progressbar" />
+      {purchasePrice !== undefined ? (
+        <span>{purchasePrice}</span>
       ) : (
-        <span>{purchasePrice ? purchasePrice : t('noPrice', 'N/A')}</span>
+        <span>{t('noPriceAvailable', 'Price not available')}</span>
       )}
       <Tooltip
         align="bottom-left"

src/stock-items/stock-items.resource.ts

@@ -84,7 +84,7 @@ export function useStockItems(filter: StockItemFilter) {
 
 // fetch filtered stock item
 export function fetchStockItem(drugUuid: string) {
-  const apiUrl = `${restBaseUrl}/stockmanagement/stockitem?drugUuid=${drugUuid}&limit=1`;
+  const apiUrl = `${restBaseUrl}/stockmanagement/stockitem?drugUuid=${drugUuid}&v=full`;
   return openmrsFetch(apiUrl).then(({ data }) => data);
 }