fix(dashboard,types): Fix TS errors (#10457)

**What**
- Fixes TS erros in dashboard project
- Updates incorrect HTTP Invite types
- Fixes incorrectly formatted dates in dashboard

packages/admin/dashboard/src/components/common/action-menu/action-menu.tsx

@@ -1,7 +1,7 @@
 import { DropdownMenu, IconButton, clx } from "@medusajs/ui"
 
 import { EllipsisHorizontal } from "@medusajs/icons"
-import { ReactNode } from "react"
+import { PropsWithChildren, ReactNode } from "react"
 import { Link } from "react-router-dom"
 import { ConditionalTooltip } from "../conditional-tooltip"
 
@@ -28,18 +28,20 @@ export type ActionGroup = {
   actions: Action[]
 }
 
-type ActionMenuProps = {
+type ActionMenuProps = PropsWithChildren<{
   groups: ActionGroup[]
-}
+}>
+
+export const ActionMenu = ({ groups, children }: ActionMenuProps) => {
+  const inner = children ?? (
+    <IconButton size="small" variant="transparent">
+      <EllipsisHorizontal />
+    </IconButton>
+  )
 
-export const ActionMenu = ({ groups }: ActionMenuProps) => {
   return (
     <DropdownMenu>
-      <DropdownMenu.Trigger asChild>
-        <IconButton size="small" variant="transparent">
-          <EllipsisHorizontal />
-        </IconButton>
-      </DropdownMenu.Trigger>
+      <DropdownMenu.Trigger asChild>{inner}</DropdownMenu.Trigger>
       <DropdownMenu.Content>
         {groups.map((group, index) => {
           if (!group.actions.length) {

packages/admin/dashboard/src/components/common/button-menu/button-menu.tsx

@@ -1,96 +0,0 @@
-import { DropdownMenu, clx } from "@medusajs/ui"
-
-import { PropsWithChildren, ReactNode } from "react"
-import { Link } from "react-router-dom"
-
-type Action = {
-  icon: ReactNode
-  label: string
-  disabled?: boolean
-} & (
-  | {
-      to: string
-      onClick?: never
-    }
-  | {
-      onClick: () => void
-      to?: never
-    }
-)
-
-type ActionGroup = {
-  actions: Action[]
-}
-
-type ActionMenuProps = {
-  groups: ActionGroup[]
-}
-
-export const ButtonMenu = ({
-  groups,
-  children,
-}: PropsWithChildren<ActionMenuProps>) => {
-  return (
-    <DropdownMenu>
-      <DropdownMenu.Trigger asChild>{children}</DropdownMenu.Trigger>
-      <DropdownMenu.Content>
-        {groups.map((group, index) => {
-          if (!group.actions.length) {
-            return null
-          }
-
-          const isLast = index === groups.length - 1
-
-          return (
-            <DropdownMenu.Group key={index}>
-              {group.actions.map((action, index) => {
-                if (action.onClick) {
-                  return (
-                    <DropdownMenu.Item
-                      disabled={action.disabled}
-                      key={index}
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        action.onClick()
-                      }}
-                      className={clx(
-                        "[&_svg]:text-ui-fg-subtle flex items-center gap-x-2",
-                        {
-                          "[&_svg]:text-ui-fg-disabled": action.disabled,
-                        }
-                      )}
-                    >
-                      {action.icon}
-                      <span>{action.label}</span>
-                    </DropdownMenu.Item>
-                  )
-                }
-
-                return (
-                  <div key={index}>
-                    <DropdownMenu.Item
-                      className={clx(
-                        "[&_svg]:text-ui-fg-subtle flex items-center gap-x-2",
-                        {
-                          "[&_svg]:text-ui-fg-disabled": action.disabled,
-                        }
-                      )}
-                      asChild
-                      disabled={action.disabled}
-                    >
-                      <Link to={action.to} onClick={(e) => e.stopPropagation()}>
-                        {action.icon}
-                        <span>{action.label}</span>
-                      </Link>
-                    </DropdownMenu.Item>
-                  </div>
-                )
-              })}
-              {!isLast && <DropdownMenu.Separator />}
-            </DropdownMenu.Group>
-          )
-        })}
-      </DropdownMenu.Content>
-    </DropdownMenu>
-  )
-}

packages/admin/dashboard/src/components/common/button-menu/index.ts

@@ -1 +0,0 @@
-export * from "./action-menu"

packages/admin/dashboard/src/components/common/date/index.ts

@@ -1,11 +0,0 @@
-import format from "date-fns/format"
-
-export function formatDate(date: string | Date) {
-  const value = new Date(date)
-  value.setMinutes(value.getMinutes() - value.getTimezoneOffset())
-
-  const hour12 = Intl.DateTimeFormat().resolvedOptions().hour12
-  const timestampFormat = hour12 ? "dd MMM yyyy hh:MM a" : "dd MMM yyyy HH:MM"
-
-  return format(value, timestampFormat)
-}

packages/admin/dashboard/src/components/forms/address-form/address-form.tsx

@@ -2,11 +2,11 @@ import { Heading, Input, Select, clx } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { z } from "zod"
 
+import { HttpTypes } from "@medusajs/types"
 import { Control } from "react-hook-form"
 import { AddressSchema } from "../../../lib/schemas"
 import { Form } from "../../common/form"
 import { CountrySelect } from "../../inputs/country-select"
-import { HttpTypes } from "@medusajs/types"
 
 type AddressFieldValues = z.infer<typeof AddressSchema>
 
@@ -187,14 +187,24 @@ export const AddressForm = ({
                           <Select.Value />
                         </Select.Trigger>
                         <Select.Content>
-                          {countries.map((country) => (
-                            <Select.Item
-                              key={country.iso_2}
-                              value={country.iso_2}
-                            >
-                              {country.display_name}
-                            </Select.Item>
-                          ))}
+                          {countries.map((country) => {
+                            /**
+                             * If a country does not have an ISO 2 code, it is not
+                             * a valid country and should not be selectable.
+                             */
+                            if (!country.iso_2) {
+                              return null
+                            }
+
+                            return (
+                              <Select.Item
+                                key={country.iso_2}
+                                value={country.iso_2}
+                              >
+                                {country.display_name}
+                              </Select.Item>
+                            )
+                          })}
                         </Select.Content>
                       </Select>
                     ) : (

packages/admin/dashboard/src/components/forms/metadata-form/metadata-form.tsx

@@ -18,7 +18,7 @@ import {
   Trash,
 } from "@medusajs/icons"
 import { FetchError } from "@medusajs/js-sdk"
-import { ComponentPropsWithoutRef, forwardRef, useRef } from "react"
+import { ComponentPropsWithoutRef, forwardRef } from "react"
 import { ConditionalTooltip } from "../../common/conditional-tooltip"
 import { Form } from "../../common/form"
 import { InlineTip } from "../../common/inline-tip"
@@ -78,7 +78,6 @@ const InnerForm = <TRes,>({
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
 
-  const deletedOriginalRows = useRef<string[]>([])
   const hasUneditableRows = getHasUneditableRows(metadata)
 
   const form = useForm<z.infer<typeof MetadataSchema>>({

packages/admin/dashboard/src/components/table/table-cells/common/created-at-cell/created-at-cell.tsx

@@ -1,6 +1,6 @@
 import { Tooltip } from "@medusajs/ui"
-import format from "date-fns/format"
 import { useTranslation } from "react-i18next"
+import { useDate } from "../../../../../hooks/use-date"
 import { PlaceholderCell } from "../placeholder-cell"
 
 type DateCellProps = {
@@ -8,28 +8,26 @@ type DateCellProps = {
 }
 
 export const CreatedAtCell = ({ date }: DateCellProps) => {
+  const { getFullDate } = useDate()
+
   if (!date) {
     return <PlaceholderCell />
   }
 
-  const value = new Date(date)
-  value.setMinutes(value.getMinutes() - value.getTimezoneOffset())
-
-  const hour12 = Intl.DateTimeFormat().resolvedOptions().hour12
-  const timestampFormat = hour12 ? "dd MMM yyyy hh:MM a" : "dd MMM yyyy HH:MM"
-
   return (
     <div className="flex h-full w-full items-center overflow-hidden">
       <Tooltip
         className="z-10"
         content={
-          <span className="text-pretty">{`${format(
-            value,
-            timestampFormat
-          )}`}</span>
+          <span className="text-pretty">{`${getFullDate({
+            date,
+            includeTime: true,
+          })}`}</span>
         }
       >
-        <span className="truncate">{format(value, "dd MMM yyyy")}</span>
+        <span className="truncate">
+          {getFullDate({ date, includeTime: true })}
+        </span>
       </Tooltip>
     </div>
   )

packages/admin/dashboard/src/components/table/table-cells/order/customer-cell/customer-cell.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next"
 export const CustomerCell = ({
   customer,
 }: {
-  customer: HttpTypes.AdminCustomer | null
+  customer?: HttpTypes.AdminCustomer | null
 }) => {
   if (!customer) {
     return <span className="text-ui-fg-muted">-</span>

packages/admin/dashboard/src/components/table/table-cells/order/payment-status-cell/payment-status-cell.tsx

@@ -1,9 +1,10 @@
+import { HttpTypes } from "@medusajs/types"
 import { useTranslation } from "react-i18next"
 import { getOrderPaymentStatus } from "../../../../../lib/order-helpers"
 import { StatusCell } from "../../common/status-cell"
 
 type PaymentStatusCellProps = {
-  status: PaymentStatus
+  status: HttpTypes.AdminOrder["payment_status"]
 }
 
 export const PaymentStatusCell = ({ status }: PaymentStatusCellProps) => {

packages/admin/dashboard/src/components/table/table-cells/order/sales-channel-cell/sales-channel-cell.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next"
 export const SalesChannelCell = ({
   channel,
 }: {
-  channel: HttpTypes.AdminSalesChannel | null
+  channel?: HttpTypes.AdminSalesChannel | null
 }) => {
   if (!channel) {
     return <span className="text-ui-fg-muted">-</span>

packages/admin/dashboard/src/components/table/table-cells/region/countries-cell/countries-cell.tsx

@@ -1,4 +1,4 @@
-import { RegionCountryDTO } from "@medusajs/types"
+import { HttpTypes } from "@medusajs/types"
 import { useTranslation } from "react-i18next"
 
 import { countries as COUNTRIES } from "../../../../../lib/data/countries"
@@ -6,24 +6,24 @@ import { ListSummary } from "../../../../common/list-summary"
 import { PlaceholderCell } from "../../common/placeholder-cell"
 
 type CountriesCellProps = {
-  countries?: RegionCountryDTO[] | null
+  countries?: HttpTypes.AdminRegionCountry[] | null
 }
 
 export const CountriesCell = ({ countries }: CountriesCellProps) => {
-  const { t } = useTranslation()
-
   if (!countries || countries.length === 0) {
     return <PlaceholderCell />
   }
 
+  const list = countries
+    .map(
+      (country) =>
+        COUNTRIES.find((c) => c.iso_2 === country.iso_2)?.display_name
+    )
+    .filter(Boolean) as string[]
+
   return (
     <div className="flex size-full items-center overflow-hidden">
-      <ListSummary
-        list={countries.map(
-          (country) =>
-            COUNTRIES.find((c) => c.iso_2 === country.iso_2)!.display_name
-        )}
-      />
+      <ListSummary list={list} />
     </div>
   )
 }