fix(dashboard): Show SO name in DataGrid (#9554)

**What**
- Adds a Readonly cell with the SO name in the pricing DataGrid.

Resolves CC-555

packages/admin/dashboard/src/routes/locations/common/hooks/use-shipping-option-price-columns.tsx

@@ -1,13 +1,21 @@
 import { HttpTypes } from "@medusajs/types"
 import { useMemo } from "react"
 import { useTranslation } from "react-i18next"
+import {
+  createDataGridHelper,
+  DataGrid,
+} from "../../../../components/data-grid"
 import { createDataGridPriceColumns } from "../../../../components/data-grid/helpers/create-data-grid-price-columns"
 
+const columnHelper = createDataGridHelper()
+
 export const useShippingOptionPriceColumns = ({
+  name,
   currencies = [],
   regions = [],
   pricePreferences = [],
 }: {
+  name: string
   currencies?: string[]
   regions?: HttpTypes.AdminRegion[]
   pricePreferences?: HttpTypes.AdminPricePreference[]
@@ -15,18 +23,31 @@ export const useShippingOptionPriceColumns = ({
   const { t } = useTranslation()
 
   return useMemo(() => {
-    return createDataGridPriceColumns({
-      currencies,
-      regions,
-      pricePreferences,
-      getFieldName: (context, value) => {
-        if (context.column.id.startsWith("currency_prices")) {
-          return `currency_prices.${value}`
-        }
+    return [
+      columnHelper.column({
+        id: "name",
+        header: t("fields.name"),
+        cell: (context) => {
+          return (
+            <DataGrid.ReadonlyCell context={context}>
+              {name}
+            </DataGrid.ReadonlyCell>
+          )
+        },
+      }),
+      ...createDataGridPriceColumns({
+        currencies,
+        regions,
+        pricePreferences,
+        getFieldName: (context, value) => {
+          if (context.column.id?.startsWith("currency_prices")) {
+            return `currency_prices.${value}`
+          }
 
-        return `region_prices.${value}`
-      },
-      t,
-    })
-  }, [t, currencies, regions, pricePreferences])
+          return `region_prices.${value}`
+        },
+        t,
+      }),
+    ]
+  }, [t, currencies, regions, pricePreferences, name])
 }

packages/admin/dashboard/src/routes/locations/location-service-zone-shipping-option-pricing/components/create-shipping-options-form/edit-shipping-options-pricing-form.tsx

@@ -112,6 +112,7 @@ export function EditShippingOptionsPricingForm({
   const { setCloseOnEscape } = useRouteModal()
 
   const columns = useShippingOptionPriceColumns({
+    name: shippingOption.name,
     currencies,
     regions,
     pricePreferences,
@@ -129,7 +130,9 @@ export function EditShippingOptionsPricingForm({
           return undefined
         }
 
-        const currencyExists = currencies.some(currencyCode => currencyCode.toLowerCase() == code.toLowerCase())
+        const currencyExists = currencies.some(
+          (currencyCode) => currencyCode.toLowerCase() == code.toLowerCase()
+        )
         if (!currencyExists) {
           return undefined
         }
@@ -162,8 +165,8 @@ export function EditShippingOptionsPricingForm({
 
         // Check if the region_id exists in the regions array to avoid
         // sending updates of region prices where the region has been
-        // deleted 
-        const regionExists = regions?.some(region => region.id === region_id)
+        // deleted
+        const regionExists = regions?.some((region) => region.id === region_id)
         if (!regionExists) {
           return undefined
         }