Add order details new column picker (#3934)

Co-authored-by: Renata <renata.gajzlerowicz@gmail.com> Co-authored-by: wojteknowacki <124166231+wojteknowacki@users.noreply.github.com> Co-authored-by: wojteknowacki <wojciech.nowacki@saleor.io>
2023-07-25 15:13:57 +02:00 · 2023-07-25 15:13:57 +02:00 · 8592c6a4dc
commit 8592c6a4dc
parent 9d0233e466
14 changed files with 386 additions and 232 deletions
--- a/.changeset/gold-crews-cry.md
+++ b/.changeset/gold-crews-cry.md
@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Introduce new column picker on order details datagrids
--- a/cypress/e2e/orders/draftOrders.js
+++ b/cypress/e2e/orders/draftOrders.js
@ -13,7 +13,11 @@ import {
  createCustomer,
  updateOrdersSettings,
 } from "../../support/api/requests/";
-import { createShipping, getDefaultChannel } from "../../support/api/utils/";
+import {
+  createShipping,
+  createUnconfirmedOrder,
+  getDefaultChannel,
+} from "../../support/api/utils/";
 import * as productsUtils from "../../support/api/utils/products/productsUtils";
 import { ensureCanvasStatic } from "../../support/customCommands/sharedElementsOperations/canvas";
 import {
@ -24,10 +28,12 @@ import {
 describe("Draft orders", () => {
  const startsWith = "CyDraftOrders-";
  const randomName = startsWith + faker.datatype.number();
-
+  let customer;
  let defaultChannel;
  let warehouse;
  let address;
+  let variantsList;
+  let shippingMethod;

  before(() => {
    cy.clearSessionData().loginUserViaRequest();
@ -46,19 +52,25 @@ describe("Draft orders", () => {
          randomName,
          addresses.plAddress,
          true,
-        );
+        ).then(customerResp => {
+          customer = customerResp.user;
+        });
        createShipping({
          channelId: defaultChannel.id,
          name: randomName,
          address: addresses.plAddress,
        });
      })
-      .then(({ warehouse: warehouseResp }) => {
-        warehouse = warehouseResp;
-        productsUtils.createTypeAttributeAndCategoryForProduct({
-          name: randomName,
-        });
-      })
+      .then(
+        ({ warehouse: warehouseResp, shippingMethod: shippingMethodResp }) => {
+          warehouse = warehouseResp;
+          shippingMethod = shippingMethodResp;
+
+          productsUtils.createTypeAttributeAndCategoryForProduct({
+            name: randomName,
+          });
+        },
+      )
      .then(
        ({
          productType: productTypeResp,
@ -74,8 +86,11 @@ describe("Draft orders", () => {
            categoryId: categoryResp.id,
          });
        },
-        cy.checkIfDataAreNotNull({ defaultChannel, warehouse, address }),
-      );
+      )
+      .then(({ variantsList: variantsResp, product }) => {
+        variantsList = variantsResp;
+        cy.checkIfDataAreNotNull({ defaultChannel, warehouse, address });
+      });
  });

  beforeEach(() => {
@ -115,4 +130,53 @@ describe("Draft orders", () => {
        });
    },
  );
+
+  it(
+    "should be able to turn of all but one static columns on draft orders detail. TC: SALEOR_2135",
+    { tags: ["@orders", "@allEnv", "@stable"] },
+    () => {
+      let order;
+      createUnconfirmedOrder({
+        customerId: customer.id,
+        channelId: defaultChannel.id,
+        shippingMethod,
+        variantsList,
+        address,
+        warehouse: warehouse.id,
+      }).then(({ order: orderResp }) => {
+        order = orderResp;
+        cy.visit(urlList.orders + `${order.id}`);
+        cy.openColumnPicker();
+        cy.get(SHARED_ELEMENTS.staticColumnContainer)
+          .should("contain.text", "Product")
+          .should("contain.text", "SKU")
+          .should("contain.text", "Variant")
+          .should("contain.text", "Quantity")
+          .should("contain.text", "Price")
+          .should("contain.text", "Total")
+          .should("contain.text", "Status");
+        // switching off all but one static columns
+        cy.get(SHARED_ELEMENTS.gridStaticSkuButton).click();
+        cy.get(SHARED_ELEMENTS.gridStaticVariantNameButton).click();
+        cy.get(SHARED_ELEMENTS.gridStaticQuantityButton).click();
+        cy.get(SHARED_ELEMENTS.gridStaticPriceButton).click();
+        cy.get(SHARED_ELEMENTS.gridStaticTotalButton).click();
+        cy.get(SHARED_ELEMENTS.gridStaticStatusButton).click();
+        cy.get(SHARED_ELEMENTS.gridStaticProductButton).should(
+          "have.attr",
+          "data-state",
+          "on",
+        );
+        cy.get(SHARED_ELEMENTS.dataGridTable)
+          .find("th")
+          // on draft first th is empty so length need to be 2
+          .should("have.length", 2)
+          .last()
+          .should("have.text", "Product");
+        //next line hides picker
+        cy.get(SHARED_ELEMENTS.pageHeader).click({ force: true });
+        cy.get(SHARED_ELEMENTS.dynamicColumnContainer).should("not.exist");
+      });
+    },
+  );
 });
--- a/cypress/e2e/orders/orders.js
+++ b/cypress/e2e/orders/orders.js
@ -574,4 +574,47 @@ describe("Orders", () => {
      });
    },
  );
+  it(
+    "should be able to turn off all but one static columns on orders detail. TC: SALEOR_2136",
+    { tags: ["@orders", "@allEnv", "@stable"] },
+    () => {
+      let order;
+      createReadyToFulfillOrder({
+        customerId: customer.id,
+        channelId: defaultChannel.id,
+        shippingMethod,
+        variantsList,
+        address,
+      }).then(({ order: orderResp }) => {
+        order = orderResp;
+        cy.visit(urlList.orders + `${order.id}`);
+        cy.openColumnPicker();
+        cy.get(SHARED_ELEMENTS.staticColumnContainer)
+          .should("contain.text", "Product")
+          .should("contain.text", "SKU")
+          .should("contain.text", "Variant")
+          .should("contain.text", "Quantity")
+          .should("contain.text", "Price")
+          .should("contain.text", "Total");
+        // switching off all but one static columns
+        cy.get(SHARED_ELEMENTS.gridStaticSkuButton).click();
+        cy.get(SHARED_ELEMENTS.gridStaticVariantNameButton).click();
+        cy.get(SHARED_ELEMENTS.gridStaticQuantityButton).click();
+        cy.get(SHARED_ELEMENTS.gridStaticPriceButton).click();
+        cy.get(SHARED_ELEMENTS.gridStaticTotalButton).click();
+        cy.get(SHARED_ELEMENTS.gridStaticProductButton).should(
+          "have.attr",
+          "data-state",
+          "on",
+        );
+        cy.get(SHARED_ELEMENTS.dataGridTable)
+          .find("th")
+          .should("have.length", 1)
+          .should("have.text", "Product");
+        //next line hides picker
+        cy.get(SHARED_ELEMENTS.pageHeader).click({ force: true });
+        cy.get(SHARED_ELEMENTS.dynamicColumnContainer).should("not.exist");
+      });
+    },
+  );
 });
--- a/cypress/elements/shared/sharedElements.js
+++ b/cypress/elements/shared/sharedElements.js
@ -16,11 +16,19 @@ export const SHARED_ELEMENTS = {
  activeStaticColumnOnGridButton: '[data-state="on"]',
  dynamicColumnSelector: '[data-test-id="dynamic-column"]',
  dynamicColumnNameSelector: '[data-test-id^="dynamic-column-name"]',
+  gridStaticSkuButton: '[data-test-id="stat-col-sku"]',
+  gridStaticVariantNameButton: '[data-test-id="stat-col-variantName"]',
+  gridStaticQuantityButton: '[data-test-id="stat-col-quantity"]',
+  gridStaticPriceButton: '[data-test-id="stat-col-price"]',
+  gridStaticStatusButton: '[data-test-id="stat-col-status"]',
+  gridStaticTotalButton: '[data-test-id="stat-col-total"]',
+  gridStaticProductButton: '[data-test-id="stat-col-product"]',
  dynamicColumnSearchInput: '[data-test-id="search-columns"]',
  selectedDynamicColumnNameSelector: '[data-test-id^="column-name-"]',
  removeSelectedDynamicColumnButton:
    '[data-test-id^="remove-dynamic-col-button"]',
  dynamicColumnContainer: '[data-test-id="dynamic-col-container"]',
+  staticColumnContainer: '[data-test-id="static-col-container"]',
  paginationForwardOnColumnPicker: '[data-test-id="pagination-forward"]',
  paginationBackOnColumnPicker: '[data-test-id="pagination-back"]',
  notificationSuccess:
--- a/cypress/support/customCommands/sharedElementsOperations/selects.js
+++ b/cypress/support/customCommands/sharedElementsOperations/selects.js
@ -23,6 +23,9 @@ Cypress.Commands.add("clickSubmitButton", () =>
 Cypress.Commands.add("clickConfirmButton", () =>
  cy.get(BUTTON_SELECTORS.confirm).click(),
 );
+Cypress.Commands.add("openColumnPicker", () =>
+  cy.get(SHARED_ELEMENTS.openColumnPickerButton).click(),
+);

 Cypress.Commands.add("createNewOption", (selectSelector, newOption) => {
  cy.get(selectSelector).type(newOption);
--- a/src/components/Datagrid/ColumnPicker/ColumnPicker.tsx
+++ b/src/components/Datagrid/ColumnPicker/ColumnPicker.tsx
@ -60,7 +60,7 @@ export const ColumnPicker = ({
          }
        />
      </Popover.Trigger>
-      <Popover.Content className={sprinkles({ margin: 1.5 })}>
+      <Popover.Content className={sprinkles({ margin: 1.5 })} align="end">
        <Box
          display="grid"
          gridTemplateColumns={expanded ? 2 : 1}
--- a/src/components/Datagrid/Datagrid.tsx
+++ b/src/components/Datagrid/Datagrid.tsx
@ -182,6 +182,11 @@ export const Datagrid: React.FC<DatagridProps> = ({
      const columnIndex = availableColumns.findIndex(
        column => column.id === recentlyAddedColumn,
      );
+
+      if (columnIndex === -1) {
+        return;
+      }
+
      const datagridScroll = editor.current.scrollTo;
      datagridScroll(columnIndex, 0, "horizontal", 0, 0, { hAlign: "start" });
    }
--- a/src/config.ts
+++ b/src/config.ts
@ -60,6 +60,8 @@ export interface AppListViewSettings {
  [ListViews.WEBHOOK_LIST]: ListSettings;
  [ListViews.TRANSLATION_ATTRIBUTE_VALUE_LIST]: ListSettings;
  [ListViews.GIFT_CARD_LIST]: ListSettings;
+  [ListViews.ORDER_DETAILS_LIST]: ListSettings;
+  [ListViews.ORDER_DRAFT_DETAILS_LIST]: ListSettings;
 }

 export const defaultListSettings: AppListViewSettings = {
@ -138,6 +140,22 @@ export const defaultListSettings: AppListViewSettings = {
    rowNumber: PAGINATE_BY,
    columns: ["giftCardCode", "status", "tag", "product", "usedBy", "balance"],
  },
+  [ListViews.ORDER_DETAILS_LIST]: {
+    rowNumber: PAGINATE_BY,
+    columns: ["product", "sku", "variantName", "quantity", "price", "total"],
+  },
+  [ListViews.ORDER_DRAFT_DETAILS_LIST]: {
+    rowNumber: PAGINATE_BY,
+    columns: [
+      "product",
+      "status",
+      "sku",
+      "variantName",
+      "quantity",
+      "price",
+      "total",
+    ],
+  },
 };

 export const APP_VERSION =
--- a/src/orders/components/OrderDetailsDatagrid/OrderDetailsDatagrid.tsx
+++ b/src/orders/components/OrderDetailsDatagrid/OrderDetailsDatagrid.tsx
@ -1,20 +1,25 @@
 // @ts-strict-ignore
-import ColumnPicker from "@dashboard/components/ColumnPicker";
+import { ColumnPicker } from "@dashboard/components/Datagrid/ColumnPicker/ColumnPicker";
+import { useColumns } from "@dashboard/components/Datagrid/ColumnPicker/useColumns";
 import Datagrid from "@dashboard/components/Datagrid/Datagrid";
-import { useColumnsDefault } from "@dashboard/components/Datagrid/hooks/useColumnsDefault";
 import {
  DatagridChangeStateContext,
  useDatagridChangeState,
 } from "@dashboard/components/Datagrid/hooks/useDatagridChange";
 import { OrderLineFragment } from "@dashboard/graphql";
+import useListSettings from "@dashboard/hooks/useListSettings";
 import { productPath } from "@dashboard/products/urls";
+import { ListViews } from "@dashboard/types";
 import { ExternalLinkIcon } from "@saleor/macaw-ui/next";
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { useIntl } from "react-intl";
 import { Link } from "react-router-dom";

 import { messages as orderMessages } from "../OrderListDatagrid/messages";
-import { useColumns, useGetCellContent } from "./datagrid";
+import {
+  createGetCellContent,
+  orderDetailsStaticColumnsAdapter,
+} from "./datagrid";
 import { messages } from "./messages";

 interface OrderDetailsDatagridProps {
@ -29,25 +34,45 @@ export const OrderDetailsDatagrid = ({
  const intl = useIntl();
  const datagrid = useDatagridChangeState();

-  const availableColumns = useColumns();
+  const { updateListSettings, settings } = useListSettings(
+    ListViews.ORDER_DETAILS_LIST,
+  );
+
+  const orderDetailsStaticColumns = useMemo(
+    () => orderDetailsStaticColumnsAdapter(intl),
+    [intl],
+  );
+
+  const handleColumnChange = useCallback(
+    picked => {
+      if (updateListSettings) {
+        updateListSettings("columns", picked.filter(Boolean));
+      }
+    },
+    [updateListSettings],
+  );

  const {
-    availableColumnsChoices,
-    columnChoices,
-    columns,
-    defaultColumns,
-    onColumnMoved,
-    onColumnResize,
-    onColumnsChange,
-    picker,
-  } = useColumnsDefault(availableColumns);
-
-  const getCellContent = useGetCellContent({
-    columns,
-    data: lines,
-    loading,
+    handlers,
+    visibleColumns,
+    staticColumns,
+    selectedColumns,
+    recentlyAddedColumn,
+  } = useColumns({
+    staticColumns: orderDetailsStaticColumns,
+    selectedColumns: settings?.columns ?? [],
+    onSave: handleColumnChange,
  });

+  const getCellContent = useCallback(
+    createGetCellContent({
+      columns: visibleColumns,
+      data: lines,
+      loading,
+    }),
+    [intl, visibleColumns, loading],
+  );
+
  const getMenuItems = useCallback(
    index => [
      {
@ -76,31 +101,21 @@ export const OrderDetailsDatagrid = ({
        rowMarkers="none"
        columnSelect="single"
        freezeColumns={1}
-        availableColumns={columns}
+        availableColumns={visibleColumns}
        emptyText={intl.formatMessage(orderMessages.emptyText)}
        getCellContent={getCellContent}
        getCellError={() => false}
        menuItems={getMenuItems}
        rows={loading ? 1 : lines.length}
        selectionActions={() => null}
-        onColumnResize={onColumnResize}
-        onColumnMoved={onColumnMoved}
-        renderColumnPicker={defaultProps => (
+        onColumnResize={handlers.onResize}
+        onColumnMoved={handlers.onMove}
+        recentlyAddedColumn={recentlyAddedColumn}
+        renderColumnPicker={() => (
          <ColumnPicker
-            {...defaultProps}
-            IconButtonProps={{
-              ...defaultProps.IconButtonProps,
-              disabled: lines.length === 0,
-            }}
-            availableColumns={availableColumnsChoices}
-            initialColumns={columnChoices}
-            defaultColumns={defaultColumns}
-            onSave={onColumnsChange}
-            hasMore={false}
-            loading={false}
-            onFetchMore={() => undefined}
-            onQueryChange={picker.setQuery}
-            query={picker.query}
+            staticColumns={staticColumns}
+            selectedColumns={selectedColumns}
+            onToggle={handlers.onToggle}
          />
        )}
      />
--- a/src/orders/components/OrderDetailsDatagrid/datagrid.ts
+++ b/src/orders/components/OrderDetailsDatagrid/datagrid.ts
@ -10,52 +10,44 @@ import { AvailableColumn } from "@dashboard/components/Datagrid/types";
 import { OrderLineFragment } from "@dashboard/graphql";
 import { getDatagridRowDataIndex } from "@dashboard/misc";
 import { GridCell, Item } from "@glideapps/glide-data-grid";
-import { useCallback, useMemo } from "react";
-import { useIntl } from "react-intl";
+import { IntlShape } from "react-intl";

 import { columnsMessages } from "./messages";

-export const useColumns = (): AvailableColumn[] => {
-  const intl = useIntl();
-
-  const columns = useMemo(
-    () => [
-      {
-        id: "product",
-        title: intl.formatMessage(columnsMessages.product),
-        width: 300,
-      },
-      {
-        id: "sku",
-        title: intl.formatMessage(columnsMessages.sku),
-        width: 150,
-      },
-      {
-        id: "variantName",
-        title: intl.formatMessage(columnsMessages.variantName),
-        width: 150,
-      },
-      {
-        id: "quantity",
-        title: intl.formatMessage(columnsMessages.quantity),
-        width: 80,
-      },
-      {
-        id: "price",
-        title: intl.formatMessage(columnsMessages.price),
-        width: 150,
-      },
-      {
-        id: "total",
-        title: intl.formatMessage(columnsMessages.total),
-        width: 150,
-      },
-    ],
-    [intl],
-  );
-
-  return columns;
-};
+export const orderDetailsStaticColumnsAdapter = (
+  intl: IntlShape,
+): AvailableColumn[] => [
+  {
+    id: "product",
+    title: intl.formatMessage(columnsMessages.product),
+    width: 300,
+  },
+  {
+    id: "sku",
+    title: intl.formatMessage(columnsMessages.sku),
+    width: 150,
+  },
+  {
+    id: "variantName",
+    title: intl.formatMessage(columnsMessages.variantName),
+    width: 150,
+  },
+  {
+    id: "quantity",
+    title: intl.formatMessage(columnsMessages.quantity),
+    width: 80,
+  },
+  {
+    id: "price",
+    title: intl.formatMessage(columnsMessages.price),
+    width: 150,
+  },
+  {
+    id: "total",
+    title: intl.formatMessage(columnsMessages.total),
+    width: 150,
+  },
+];

 interface GetCellContentProps {
  columns: AvailableColumn[];
@ -63,62 +55,53 @@ interface GetCellContentProps {
  loading: boolean;
 }

-export const useGetCellContent = ({
-  columns,
-  data,
-  loading,
-}: GetCellContentProps) => {
-  const getCellContent = useCallback(
-    ([column, row]: Item, { added, removed }: GetCellContentOpts): GridCell => {
-      if (loading) {
-        return loadingCell();
-      }
+export const createGetCellContent =
+  ({ columns, data, loading }: GetCellContentProps) =>
+  ([column, row]: Item, { added, removed }: GetCellContentOpts): GridCell => {
+    if (loading) {
+      return loadingCell();
+    }

-      const columnId = columns[column].id;
-      const rowData = added.includes(row)
-        ? undefined
-        : data[getDatagridRowDataIndex(row, removed)];
+    const columnId = columns[column]?.id;
+    const rowData = added.includes(row)
+      ? undefined
+      : data[getDatagridRowDataIndex(row, removed)];

-      if (!rowData) {
+    if (!rowData || !columnId) {
+      return readonlyTextCell("", false);
+    }
+
+    switch (columnId) {
+      case "product":
+        return thumbnailCell(
+          rowData?.productName ?? "",
+          rowData.thumbnail?.url ?? "",
+          readonyOptions,
+        );
+      case "sku":
+        return readonlyTextCell(rowData.productSku ?? "", false);
+      case "variantName":
+        return readonlyTextCell(rowData?.variant?.name ?? "-", false);
+      case "quantity":
+        return readonlyTextCell(rowData.quantity.toString(), false);
+      case "price":
+        return moneyCell(
+          rowData.unitPrice.gross.amount,
+          rowData.unitPrice.gross.currency,
+          readonyOptions,
+        );
+
+      case "total":
+        return moneyCell(
+          rowData.totalPrice.gross.amount,
+          rowData.totalPrice.gross.currency,
+          readonyOptions,
+        );
+
+      default:
        return readonlyTextCell("", false);
-      }
-
-      switch (columnId) {
-        case "product":
-          return thumbnailCell(
-            rowData?.productName ?? "",
-            rowData.thumbnail?.url ?? "",
-            readonyOptions,
-          );
-        case "sku":
-          return readonlyTextCell(rowData.productSku ?? "", false);
-        case "variantName":
-          return readonlyTextCell(rowData?.variant?.name ?? "-", false);
-        case "quantity":
-          return readonlyTextCell(rowData.quantity.toString(), false);
-        case "price":
-          return moneyCell(
-            rowData.unitPrice.gross.amount,
-            rowData.unitPrice.gross.currency,
-            readonyOptions,
-          );
-
-        case "total":
-          return moneyCell(
-            rowData.totalPrice.gross.amount,
-            rowData.totalPrice.gross.currency,
-            readonyOptions,
-          );
-
-        default:
-          return readonlyTextCell("", false);
-      }
-    },
-    [columns, data, loading],
-  );
-
-  return getCellContent;
-};
+    }
+  };

 const readonyOptions: Partial<GridCell> = {
  allowOverlay: false,
--- a/src/orders/components/OrderDraftDetailsDatagrid/OrderDraftDetailsDatagrid.tsx
+++ b/src/orders/components/OrderDraftDetailsDatagrid/OrderDraftDetailsDatagrid.tsx
@ -1,26 +1,32 @@
 // @ts-strict-ignore
-import ColumnPicker from "@dashboard/components/ColumnPicker";
+import { ColumnPicker } from "@dashboard/components/Datagrid/ColumnPicker/ColumnPicker";
+import { useColumns } from "@dashboard/components/Datagrid/ColumnPicker/useColumns";
 import Datagrid from "@dashboard/components/Datagrid/Datagrid";
-import { useColumnsDefault } from "@dashboard/components/Datagrid/hooks/useColumnsDefault";
 import {
  DatagridChangeOpts,
  DatagridChangeStateContext,
  useDatagridChangeState,
 } from "@dashboard/components/Datagrid/hooks/useDatagridChange";
+import { useEmptyColumn } from "@dashboard/components/Datagrid/hooks/useEmptyColumn";
 import { OrderDetailsFragment, OrderErrorFragment } from "@dashboard/graphql";
+import useListSettings from "@dashboard/hooks/useListSettings";
 import { productUrl } from "@dashboard/products/urls";
+import { ListViews } from "@dashboard/types";
 import {
  Box,
  ExternalLinkIcon,
  sprinkles,
  TrashBinIcon,
 } from "@saleor/macaw-ui/next";
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { useIntl } from "react-intl";
 import { Link } from "react-router-dom";

 import { FormData } from "../OrderDraftDetailsProducts/OrderDraftDetailsProducts";
-import { useColumns, useGetCellContent } from "./datagrid";
+import {
+  orderDraftDetailsStaticColumnsAdapter,
+  useGetCellContent,
+} from "./datagrid";
 import { messages } from "./messages";

 interface OrderDraftDetailsDatagridProps {
@ -40,21 +46,40 @@ export const OrderDraftDetailsDatagrid = ({
  const intl = useIntl();
  const datagrid = useDatagridChangeState();

-  const { availableColumns } = useColumns();
+  const { updateListSettings, settings } = useListSettings(
+    ListViews.ORDER_DRAFT_DETAILS_LIST,
+  );
+
+  const emptyColumn = useEmptyColumn();
+
+  const orderDraftDetailsStaticColumns = useMemo(
+    () => orderDraftDetailsStaticColumnsAdapter(emptyColumn, intl),
+    [emptyColumn, intl],
+  );
+
+  const handleColumnChange = useCallback(
+    picked => {
+      if (updateListSettings) {
+        updateListSettings("columns", picked.filter(Boolean));
+      }
+    },
+    [updateListSettings],
+  );

  const {
-    availableColumnsChoices,
-    columnChoices,
-    columns,
-    defaultColumns,
-    onColumnMoved,
-    onColumnResize,
-    onColumnsChange,
-    picker,
-  } = useColumnsDefault(availableColumns);
+    handlers,
+    visibleColumns,
+    staticColumns,
+    selectedColumns,
+    recentlyAddedColumn,
+  } = useColumns({
+    staticColumns: orderDraftDetailsStaticColumns,
+    selectedColumns: settings?.columns ?? [],
+    onSave: handleColumnChange,
+  });

  const getCellContent = useGetCellContent({
-    columns,
+    columns: visibleColumns,
    lines,
    errors,
  });
@ -138,31 +163,21 @@ export const OrderDraftDetailsDatagrid = ({
        columnSelect="none"
        freezeColumns={2}
        verticalBorder={col => col > 1}
-        availableColumns={columns}
+        availableColumns={visibleColumns}
        emptyText={intl.formatMessage(messages.emptyText)}
        getCellContent={getCellContent}
        getCellError={() => false}
        menuItems={getMenuItems}
        rows={lines.length}
        selectionActions={() => null}
-        onColumnResize={onColumnResize}
-        onColumnMoved={onColumnMoved}
-        renderColumnPicker={defaultProps => (
+        onColumnResize={handlers.onResize}
+        onColumnMoved={handlers.onMove}
+        recentlyAddedColumn={recentlyAddedColumn}
+        renderColumnPicker={() => (
          <ColumnPicker
-            {...defaultProps}
-            IconButtonProps={{
-              ...defaultProps.IconButtonProps,
-              disabled: lines.length === 0,
-            }}
-            availableColumns={availableColumnsChoices}
-            initialColumns={columnChoices}
-            defaultColumns={defaultColumns}
-            onSave={onColumnsChange}
-            hasMore={false}
-            loading={false}
-            onFetchMore={() => undefined}
-            onQueryChange={picker.setQuery}
-            query={picker.query}
+            selectedColumns={selectedColumns}
+            staticColumns={staticColumns}
+            onToggle={handlers.onToggle}
          />
        )}
        onChange={handleDatagridChange}
--- a/src/orders/components/OrderDraftDetailsDatagrid/datagrid.ts
+++ b/src/orders/components/OrderDraftDetailsDatagrid/datagrid.ts
@ -8,7 +8,6 @@ import {
  thumbnailCell,
 } from "@dashboard/components/Datagrid/customCells/cells";
 import { GetCellContentOpts } from "@dashboard/components/Datagrid/Datagrid";
-import { useEmptyColumn } from "@dashboard/components/Datagrid/hooks/useEmptyColumn";
 import { AvailableColumn } from "@dashboard/components/Datagrid/types";
 import { OrderDetailsFragment, OrderErrorFragment } from "@dashboard/graphql";
 import useLocale from "@dashboard/hooks/useLocale";
@ -21,62 +20,52 @@ import { useOrderLineDiscountContext } from "@dashboard/products/components/Orde
 import getOrderErrorMessage from "@dashboard/utils/errors/order";
 import { GridCell, Item } from "@glideapps/glide-data-grid";
 import { DefaultTheme, useTheme } from "@saleor/macaw-ui/next";
-import { useMemo } from "react";
 import { IntlShape, useIntl } from "react-intl";

 import { lineAlertMessages } from "../OrderDraftDetailsProducts/messages";
 import { columnsMessages } from "./messages";

-export const useColumns = () => {
-  const emptyColumn = useEmptyColumn();
-  const intl = useIntl();
-
-  const availableColumns = useMemo(
-    () => [
-      emptyColumn,
-      {
-        id: "product",
-        title: intl.formatMessage(columnsMessages.product),
-        width: 300,
-      },
-      {
-        id: "sku",
-        title: "SKU",
-        width: 150,
-      },
-      {
-        id: "variantName",
-        title: intl.formatMessage(columnsMessages.variantName),
-        width: 150,
-      },
-      {
-        id: "quantity",
-        title: intl.formatMessage(columnsMessages.quantity),
-        width: 80,
-      },
-      {
-        id: "price",
-        title: intl.formatMessage(columnsMessages.price),
-        width: 150,
-      },
-      {
-        id: "total",
-        title: intl.formatMessage(columnsMessages.total),
-        width: 150,
-      },
-      {
-        id: "status",
-        title: "Status",
-        width: 250,
-      },
-    ],
-    [emptyColumn, intl],
-  );
-
-  return {
-    availableColumns,
-  };
-};
+export const orderDraftDetailsStaticColumnsAdapter = (
+  emptyColumn: AvailableColumn,
+  intl: IntlShape,
+) => [
+  emptyColumn,
+  {
+    id: "product",
+    title: intl.formatMessage(columnsMessages.product),
+    width: 300,
+  },
+  {
+    id: "sku",
+    title: "SKU",
+    width: 150,
+  },
+  {
+    id: "variantName",
+    title: intl.formatMessage(columnsMessages.variantName),
+    width: 150,
+  },
+  {
+    id: "quantity",
+    title: intl.formatMessage(columnsMessages.quantity),
+    width: 80,
+  },
+  {
+    id: "price",
+    title: intl.formatMessage(columnsMessages.price),
+    width: 150,
+  },
+  {
+    id: "total",
+    title: intl.formatMessage(columnsMessages.total),
+    width: 150,
+  },
+  {
+    id: "status",
+    title: intl.formatMessage(columnsMessages.status),
+    width: 250,
+  },
+];

 interface GetCellContentProps {
  columns: AvailableColumn[];
@ -102,13 +91,13 @@ export const useGetCellContent = ({
      return readonlyTextCell("", false);
    }

-    const columnId = columns[column].id;
+    const columnId = columns[column]?.id;
    const change = changes.current[getChangeIndex(columnId, row)]?.data;
    const rowData = added.includes(row)
      ? undefined
      : lines[getDatagridRowDataIndex(row, removed)];

-    if (!rowData) {
+    if (!rowData || !columnId) {
      return readonlyTextCell("", false);
    }

--- a/src/orders/components/OrderDraftDetailsDatagrid/messages.ts
+++ b/src/orders/components/OrderDraftDetailsDatagrid/messages.ts
@ -24,6 +24,10 @@ export const columnsMessages = defineMessages({
    defaultMessage: "Total",
    description: "total price of ordered products",
  },
+  status: {
+    id: "tzMNF3",
+    defaultMessage: "Status",
+  },
 });

 export const messages = defineMessages({
--- a/src/types.ts
+++ b/src/types.ts
@ -30,6 +30,8 @@ export enum ListViews {
  DRAFT_LIST = "DRAFT_LIST",
  NAVIGATION_LIST = "NAVIGATION_LIST",
  ORDER_LIST = "ORDER_LIST",
+  ORDER_DETAILS_LIST = "ORDER_DETAILS_LIST",
+  ORDER_DRAFT_DETAILS_LIST = "ORDER_DRAFT_DETAILS_LIST",
  PAGES_LIST = "PAGES_LIST",
  PAGE_TYPES_LIST = "PAGE_TYPES_LIST",
  PLUGINS_LIST = "PLUGIN_LIST",