Add Net column to orders list alongside gross Total (#6704)

Show post-discount product value (subtotal.net) as a new optional column
defaulting before Total, with right-aligned money headers and column-order
normalization when toggled via the picker.

Author: mirekm

.changeset/orders-list-net-column.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Added a **Net** column to the orders list showing post-discount product value (excluding tax and shipping), placed before the existing **Total** column. The Net column is shown by default for new layouts and can be enabled from the column picker for customized views.

locale/defaultMessages.json

@@ -10715,6 +10715,10 @@
     "context": "expand refunded line sub-rows",
     "string": "Show all {count} lines"
   },
+  "rU2b3o": {
+    "context": "orders list column: net product value (excludes tax and shipping)",
+    "string": "Net"
+  },
   "rVIlBs": {
     "context": "page header with order number",
     "string": "Order #{orderNumber}"

src/components/Datagrid/ColumnPicker/useColumns.test.ts

@@ -198,6 +198,39 @@ describe("useColumns", () => {
       },
     ]);
   });
+  it("should apply mapColumnsOnSave before calling onSave", () => {
+    // Arrange
+    const mapColumnsOnSave = (columns: string[]) => [...columns].reverse();
+    const { result } = renderHook(() =>
+      useColumns({
+        staticColumns: mockedColumns,
+        selectedColumns: ["name"],
+        onSave,
+        mapColumnsOnSave,
+      }),
+    );
+
+    // Act
+    act(() => result.current.handlers.onToggle("description"));
+
+    // Assert
+    expect(onSave).toHaveBeenCalledWith(["name", "description"]);
+  });
+  it("should apply mapColumnsOnSave to selected columns", () => {
+    // Arrange
+    const mapColumnsOnSave = (columns: string[]) => [...columns].reverse();
+    const { result } = renderHook(() =>
+      useColumns({
+        staticColumns: mockedColumns,
+        selectedColumns: ["name", "description"],
+        onSave,
+        mapColumnsOnSave,
+      }),
+    );
+
+    // Assert
+    expect(result.current.selectedColumns).toEqual(["description", "name"]);
+  });
   it("should call onSave when column is toggled", () => {
     // Arrange
     const { result } = renderHook(() =>

src/components/Datagrid/ColumnPicker/useColumns.ts

@@ -41,6 +41,7 @@ interface UseColumnsProps {
   columnCategories?: ColumnCategory[];
   selectedColumns: string[];
   onSave: (columns: string[]) => void;
+  mapColumnsOnSave?: (columns: string[]) => string[];
 }
 
 export const useColumns = ({
@@ -49,11 +50,16 @@ export const useColumns = ({
   selectedColumns: _selectedColumns,
   columnCategories,
   onSave: handleSave,
+  mapColumnsOnSave,
 }: UseColumnsProps) => {
   const [dynamicColumns, updateDynamicColumns] = useState<AvailableColumn[] | null>(null);
 
   const { columns: persistedColumns, update } = usePersistance(gridName);
-  const selectedColumns = selectedWithPersistance(_selectedColumns, persistedColumns);
+  const selectedColumns = useMemo(() => {
+    const columns = selectedWithPersistance(_selectedColumns, persistedColumns);
+
+    return mapColumnsOnSave ? mapColumnsOnSave(columns) : columns;
+  }, [_selectedColumns, persistedColumns, mapColumnsOnSave]);
 
   // Dynamic columns are loaded from the API, thus they need to be updated
   // after query resolves with data. Then we also sort them by order of addition
@@ -74,7 +80,8 @@ export const useColumns = ({
   const [visibleColumns, setVisibleColumns] = useStateFromProps(initialColumnsState);
 
   const onSave = (columnsIds: string[]) => {
-    const columns = columnsIds.map(columnId => {
+    const normalizedColumnIds = mapColumnsOnSave ? mapColumnsOnSave(columnsIds) : columnsIds;
+    const columns = normalizedColumnIds.map(columnId => {
       const persistentEquivalent = persistedColumns.find(
         persistedColumn => persistedColumn.identifier() === columnId,
       );
@@ -87,7 +94,7 @@ export const useColumns = ({
     });
 
     update(columns);
-    handleSave(columnsIds);
+    handleSave(normalizedColumnIds);
   };
 
   const handleVisibleColumnsChange = (currentColumns: (AvailableColumn | undefined)[]) => {

src/components/Datagrid/Datagrid.tsx

@@ -9,6 +9,7 @@ import DataEditor, {
   type DataEditorRef,
   type DrawHeaderCallback,
   type EditableGridCell,
+  getMiddleCenterBias,
   type GridCell,
   type GridColumn,
   type GridSelection,
@@ -388,6 +389,8 @@ export const Datagrid = ({
   const drawHeader: DrawHeaderCallback = useCallback(
     args => {
       const { ctx, rect, isSelected, spriteManager, theme, column } = args;
+      const columnMeta = availableColumns.find(col => col.id === column.id);
+      const isRightAligned = columnMeta?.headerAlign === "right";
 
       if (isSelected) {
         ctx.fillStyle = themeValues.colors.background.default1;
@@ -403,9 +406,41 @@ export const Datagrid = ({
         spriteManager.drawSprite("gripVertical", "normal", ctx, x, y, iconSize, theme);
       }
 
+      if (isRightAligned && column.id !== "empty") {
+        const xPad = theme.cellHorizontalPadding;
+        const gripReserved = isSelected ? 24 : 0;
+        const drawX = rect.x + rect.width - xPad - gripReserved;
+        const font = `${theme.headerFontStyle} ${theme.fontFamily}`;
+
+        ctx.font = font;
+        ctx.fillStyle = isSelected ? theme.textHeaderSelected : theme.textHeader;
+
+        const textY = rect.y + rect.height / 2 + getMiddleCenterBias(ctx, font);
+
+        ctx.textAlign = "right";
+        ctx.fillText(column.title, drawX, textY);
+        ctx.textAlign = "left";
+
+        if (column.icon !== undefined) {
+          const headerSize = theme.headerIconSize;
+
+          spriteManager.drawSprite(
+            column.icon,
+            isSelected ? "selected" : "normal",
+            ctx,
+            rect.x + xPad,
+            rect.y + (rect.height - headerSize) / 2,
+            headerSize,
+            theme,
+          );
+        }
+
+        return true;
+      }
+
       return false;
     },
-    [themeValues],
+    [themeValues, availableColumns],
   );
   const handleRemoveRows = useCallback(
     (rows: number[]) => {

src/components/Datagrid/types.ts

@@ -11,4 +11,5 @@ export interface AvailableColumn {
   icon?: string;
   themeOverride?: Partial<Theme>;
   action?: (id: string) => boolean;
+  headerAlign?: "left" | "right";
 }

src/config.ts

@@ -129,7 +129,7 @@ export const defaultListSettings: AppListViewSettings = {
   },
   [ListViews.ORDER_LIST]: {
     rowNumber: PAGINATE_BY,
-    columns: ["number", "date", "customer", "payment", "status", "total", "channel"],
+    columns: ["number", "date", "customer", "payment", "status", "net", "total", "channel"],
   },
   [ListViews.PAGES_LIST]: {
     rowNumber: PAGINATE_BY,

src/graphql/hooks.generated.ts

@@ -13467,6 +13467,14 @@ export const OrderListDocument = gql`
         number
         paymentStatus
         status
+        subtotal {
+          __typename
+          net {
+            __typename
+            amount
+            currency
+          }
+        }
         total {
           __typename
           gross {

src/graphql/types.generated.ts

@@ -12591,7 +12591,7 @@ export type OrderListQueryVariables = Exact<{
 }>;
 
 
-export type OrderListQuery = { __typename: 'Query', orders: { __typename: 'OrderCountableConnection', edges: Array<{ __typename: 'OrderCountableEdge', node: { __typename: 'Order', created: any, id: string, number: string, paymentStatus: PaymentChargeStatusEnum, status: OrderStatus, userEmail: string | null, chargeStatus: OrderChargeStatusEnum, billingAddress: { __typename: 'Address', city: string, cityArea: string, companyName: string, countryArea: string, firstName: string, id: string, lastName: string, phone: string | null, postalCode: string, streetAddress1: string, streetAddress2: string, country: { __typename: 'CountryDisplay', code: string, country: string } } | null, channel: { __typename: 'Channel', name: string, id: string }, total: { __typename: 'TaxedMoney', gross: { __typename: 'Money', amount: number, currency: string } } } }>, pageInfo: { __typename: 'PageInfo', hasPreviousPage: boolean, hasNextPage: boolean, startCursor: string | null, endCursor: string | null } } | null };
+export type OrderListQuery = { __typename: 'Query', orders: { __typename: 'OrderCountableConnection', edges: Array<{ __typename: 'OrderCountableEdge', node: { __typename: 'Order', created: any, id: string, number: string, paymentStatus: PaymentChargeStatusEnum, status: OrderStatus, userEmail: string | null, chargeStatus: OrderChargeStatusEnum, billingAddress: { __typename: 'Address', city: string, cityArea: string, companyName: string, countryArea: string, firstName: string, id: string, lastName: string, phone: string | null, postalCode: string, streetAddress1: string, streetAddress2: string, country: { __typename: 'CountryDisplay', code: string, country: string } } | null, channel: { __typename: 'Channel', name: string, id: string }, subtotal: { __typename: 'TaxedMoney', net: { __typename: 'Money', amount: number, currency: string } }, total: { __typename: 'TaxedMoney', gross: { __typename: 'Money', amount: number, currency: string } } } }>, pageInfo: { __typename: 'PageInfo', hasPreviousPage: boolean, hasNextPage: boolean, startCursor: string | null, endCursor: string | null } } | null };
 
 export type OrderDraftListQueryVariables = Exact<{
   first?: InputMaybe<Scalars['Int']['input']>;

src/orders/components/OrderListDatagrid/OrderListDatagrid.stories.tsx

@@ -16,7 +16,7 @@ const meta: Meta<typeof OrderListDatagrid> = {
     sort: { sort: "number" as any, asc: true },
     onSort: fn(),
     settings: {
-      columns: ["number", "date", "customer", "payment", "status", "total", "channel"],
+      columns: ["number", "date", "customer", "payment", "status", "net", "total", "channel"],
       rowsPerPage: 20,
     },
     onUpdateListSettings: fn(),