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

.changeset/stale-eyes-float.md

@@ -0,0 +1,6 @@
+---
+"@medusajs/dashboard": patch
+"@medusajs/types": patch
+---
+
+fix(dashboard,types): Fix TS errors

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/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,35 +1,33 @@
 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 = {
   date: Date | string | undefined
 }
 
 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,29 +1,29 @@
-import { RegionCountryDTO } from "@medusajs/types"
+import { HttpTypes } from "@medusajs/types"
 import { useTranslation } from "react-i18next"
 
 import { countries as COUNTRIES } from "../../../../../lib/data/countries"
 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>
   )
 }

packages/admin/dashboard/src/hooks/api/auth.tsx

@@ -1,11 +1,14 @@
-import { UseMutationOptions, useMutation } from "@tanstack/react-query"
 import { FetchError } from "@medusajs/js-sdk"
-import { sdk } from "../../lib/client"
 import { HttpTypes } from "@medusajs/types"
+import { UseMutationOptions, useMutation } from "@tanstack/react-query"
+import { sdk } from "../../lib/client"
 
 export const useSignInWithEmailPass = (
   options?: UseMutationOptions<
-    string,
+    | string
+    | {
+        location: string
+      },
     FetchError,
     HttpTypes.AdminSignUpWithEmailPassword
   >