Merge branch 'test' into fix/mm2-1209/fix-ts-errors

Author: sylwia-werner

src/components/authentication/protected-route/protected-route.tsx

@@ -7,7 +7,6 @@ import { TalkjsProvider } from "../../../providers/talkjs-provider"
 
 export const ProtectedRoute = () => {
   const { seller, isPending, error } = useMe()
-  const isSuspended = seller?.store_status === "SUSPENDED"
 
   const location = useLocation()
   if (isPending) {
@@ -32,11 +31,6 @@ export const ProtectedRoute = () => {
     <TalkjsProvider>
       <SidebarProvider>
         <SearchProvider>
-          {isSuspended && (
-            <div className="w-full bg-red-600 text-white p-1 text-center text-sm">
-              Your store is <b>suspended</b>. Please contact support.
-            </div>
-          )}
           <Outlet />
         </SearchProvider>
       </SidebarProvider>

src/components/data-grid/components/data-grid-toggleable-number-cell.tsx

@@ -79,7 +79,7 @@ const OuterComponent = ({
       newValue.quantity = ""
     }
 
-    if (update && newValue.quantity === "") {
+    if (update) {
       newValue.quantity = 0
     }
 
@@ -101,7 +101,7 @@ const OuterComponent = ({
 
   return (
     <ConditionalTooltip
-      showTooltip={localValue.disabledToggle && tooltip}
+      showTooltip={localValue.disabledToggle && !!tooltip}
       content={tooltip}
     >
       <div className="absolute inset-y-0 left-4 z-[3] flex w-fit items-center justify-center">
@@ -155,12 +155,6 @@ const Inner = ({
     const ensuredValue = updatedValue !== undefined ? updatedValue : ""
     const newValue = { ...localValue, quantity: ensuredValue }
 
-    /**
-     * If the value is not empty, then the location should be enabled.
-     *
-     * Else, if the value is empty and the location is enabled, then the
-     * location should be disabled, unless toggling the location is disabled.
-     */
     if (ensuredValue !== "") {
       newValue.checked = true
     } else if (newValue.checked && newValue.disabledToggle === false) {
@@ -186,7 +180,7 @@ const Inner = ({
         {...props}
         ref={combinedRefs}
         className="txt-compact-small w-full flex-1 cursor-default appearance-none bg-transparent pl-8 text-right outline-none"
-        value={localValue?.quantity}
+        value={localValue?.quantity ?? undefined}
         onValueChange={handleInputChange}
         formatValueOnBlur
         onBlur={() => {
@@ -195,7 +189,6 @@ const Inner = ({
           handleOnChange()
         }}
         onFocus={onFocus}
-        decimalsLimit={0}
         autoComplete="off"
         tabIndex={-1}
         placeholder={!localValue.checked ? placeholder : undefined}

src/components/data-grid/helpers/create-data-grid-location-stock-columns.tsx

@@ -0,0 +1,77 @@
+import { HttpTypes } from "@medusajs/types"
+import { ColumnDef } from "@tanstack/react-table"
+import { TFunction } from "i18next"
+import { FieldPath, FieldValues } from "react-hook-form"
+import { DataGridReadonlyCell } from "../components/data-grid-readonly-cell"
+import { DataGridTogglableNumberCell } from "../components/data-grid-toggleable-number-cell"
+import { FieldContext } from "../types"
+import { createDataGridHelper } from "./create-data-grid-column-helper"
+
+type CreateDataGridLocationStockColumnsProps<
+  TData,
+  TFieldValues extends FieldValues,
+> = {
+  stockLocations: HttpTypes.AdminStockLocation[]
+  isReadyOnly?: (context: FieldContext<TData>) => boolean
+  getFieldName: (
+    context: FieldContext<TData>,
+    stockLocationIndex: number
+  ) => FieldPath<TFieldValues> | null
+  t: TFunction
+}
+
+export const createDataGridLocationStockColumns = <
+  TData,
+  TFieldValues extends FieldValues,
+>({
+  stockLocations,
+  isReadyOnly,
+  getFieldName,
+  t,
+}: CreateDataGridLocationStockColumnsProps<TData, TFieldValues>): ColumnDef<
+  TData,
+  unknown
+>[] => {
+  const columnHelper = createDataGridHelper<TData, TFieldValues>()
+
+  return [
+    ...(stockLocations.map((stockLocation, index) => {
+      const translatedStockLocationName = t("fields.stockTemplate", {
+        stockLocation: index + 1,
+      })
+
+      return columnHelper.column({
+        id: `stock_locations.${stockLocation.id}`,
+        name: translatedStockLocationName,
+        field: (context) => {
+          const isReadyOnlyValue = isReadyOnly?.(context)
+          if (isReadyOnlyValue) {
+            return null
+          }
+          return getFieldName(context, index)
+        },
+        type: "togglable-number",
+        header: () => (
+          <div className="flex w-full items-center justify-between gap-3">
+            <span className="truncate" title={translatedStockLocationName}>
+              {translatedStockLocationName}
+            </span>
+          </div>
+        ),
+        cell: (context) => {
+          if (isReadyOnly?.(context)) {
+            return <DataGridReadonlyCell context={context} />
+          }
+
+          return (
+            <DataGridTogglableNumberCell
+              context={context}
+              disabledToggleTooltip={t("inventory.stock.disabledToggleTooltip")}
+              placeholder={t("inventory.stock.placeholder")}
+            />
+          )
+        },
+      })
+    }) ?? []),
+  ]
+}

src/components/data-grid/helpers/create-data-grid-price-columns.tsx

@@ -7,6 +7,7 @@ import { DataGridCurrencyCell } from "../components/data-grid-currency-cell"
 import { DataGridReadonlyCell } from "../components/data-grid-readonly-cell"
 import { FieldContext } from "../types"
 import { createDataGridHelper } from "./create-data-grid-column-helper"
+import { formatCurrency } from "../../../lib/format-currency"
 
 type CreateDataGridPriceColumnsProps<
   TData,
@@ -20,6 +21,7 @@ type CreateDataGridPriceColumnsProps<
     value: string
   ) => FieldPath<TFieldValues> | null
   t: TFunction
+  showCurrentPriceCell?: boolean
 }
 
 export const createDataGridPriceColumns = <
@@ -31,14 +33,15 @@ export const createDataGridPriceColumns = <
   isReadyOnly,
   getFieldName,
   t,
+  showCurrentPriceCell = false,
 }: CreateDataGridPriceColumnsProps<TData, TFieldValues>): ColumnDef<
   TData,
   unknown
 >[] => {
   const columnHelper = createDataGridHelper<TData, TFieldValues>()
 
   return [
-    ...(currencies?.map((currency) => {
+    ...(currencies?.flatMap((currency) => {
       const preference = pricePreferences?.find(
         (p) => p.attribute === "currency_code" && p.value === currency
       )
@@ -47,7 +50,11 @@ export const createDataGridPriceColumns = <
         regionOrCurrency: currency.toUpperCase(),
       })
 
-      return columnHelper.column({
+      const translatedCurrentCurrencyName = t("fields.currentPriceTemplate", {
+        regionOrCurrency: currency.toUpperCase(),
+      })
+
+      const editableCol = columnHelper.column({
         id: `currency_prices.${currency}`,
         name: t("fields.priceTemplate", {
           regionOrCurrency: currency.toUpperCase(),
@@ -78,6 +85,51 @@ export const createDataGridPriceColumns = <
           return <DataGridCurrencyCell code={currency} context={context} />
         },
       })
+
+      const currentPriceCol = showCurrentPriceCell
+        ? columnHelper.column({
+            id: `currency_current_price.${currency}`,
+            name: translatedCurrentCurrencyName,
+            field: () => null,
+            type: "number",
+            header: () => (
+              <div className="flex w-full items-center justify-between gap-3">
+                <span
+                  className="truncate"
+                  title={translatedCurrentCurrencyName}
+                >
+                  {translatedCurrentCurrencyName}
+                </span>
+              </div>
+            ),
+            cell: (context) => {
+              const prices = (
+                context.row.original as HttpTypes.AdminProductVariant
+              ).prices
+
+              const currentPrice = prices?.find(
+                ({ currency_code }) => currency_code === currency
+              )
+
+              const amount = currentPrice?.amount
+
+              return (
+                <DataGridReadonlyCell context={context}>
+                  {typeof amount === "number"
+                    ? formatCurrency(amount, currency.toUpperCase())
+                    : isReadyOnly?.(context)
+                      ? ""
+                      : "—"}
+                </DataGridReadonlyCell>
+              )
+            },
+          })
+        : null
+
+      return [editableCol, currentPriceCol].filter(Boolean) as ColumnDef<
+        TData,
+        unknown
+      >[]
     }) ?? []),
   ]
 }

src/components/data-grid/helpers/index.ts

@@ -1,2 +1,3 @@
 export * from "./create-data-grid-column-helper"
 export * from "./create-data-grid-price-columns"
+export * from "./create-data-grid-location-stock-columns"

src/components/data-table/data-table-with-sticky-footer.tsx

@@ -0,0 +1,78 @@
+import { clx, Container, Heading } from "@medusajs/ui"
+import React, { useLayoutEffect, useRef, useState } from "react"
+
+import { _DataTable } from "../table/data-table/data-table"
+import { TableSkeleton } from "../common/skeleton"
+
+type InnerDataTableProps<TData> = Parameters<typeof _DataTable<TData>>[0]
+
+type DataTableWithStickyFooterProps<TData> = InnerDataTableProps<TData> & {
+  heading: string | React.ReactNode
+  className?: string
+  marginPx?: number
+}
+
+export function DataTableWithStickyFooter<TData>({
+  heading,
+  className,
+  marginPx = 16,
+  isLoading,
+  ...dataTableProps
+}: DataTableWithStickyFooterProps<TData>) {
+  const [containerMaxHeight, setContainerMaxHeight] = useState<number | null>(
+    null
+  )
+
+  const containerRef = useRef<HTMLDivElement | null>(null)
+
+  function handleCalcMaxHeight() {
+    const container = containerRef.current
+    if (!container) {
+      return
+    }
+
+    const rect = container?.getBoundingClientRect()
+    const availableVerticalSpace = Math.max(
+      0,
+      window.innerHeight - rect.top - marginPx
+    )
+    setContainerMaxHeight(availableVerticalSpace)
+  }
+
+  useLayoutEffect(() => {
+    handleCalcMaxHeight()
+
+    window.addEventListener("resize", handleCalcMaxHeight)
+    window.addEventListener("scroll", handleCalcMaxHeight)
+
+    return () => {
+      window.removeEventListener("resize", handleCalcMaxHeight)
+      window.removeEventListener("scroll", handleCalcMaxHeight)
+    }
+  }, [])
+
+  return (
+    <Container
+      ref={containerRef}
+      className={clx("divide-y p-0 flex flex-col", className)}
+      style={{
+        maxHeight: containerMaxHeight ? `${containerMaxHeight}px` : undefined,
+      }}
+    >
+      {isLoading ? (
+        <TableSkeleton layout="fit" />
+      ) : (
+        <>
+          <div className="flex items-center justify-between px-6 py-4">
+            <Heading>{heading}</Heading>
+          </div>
+          <_DataTable
+            {...(dataTableProps as InnerDataTableProps<TData>)}
+            layout="fill"
+            isLoading={false}
+          />
+        </>
+      )}
+    </Container>
+  )
+}