@seamapi/react 1.64.0 → 2.0.0

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterArea.tsx

@@ -2,19 +2,19 @@ import type { Dispatch, SetStateAction } from 'react'
 
 import { FilterCategoryMenu } from 'lib/seam/components/SupportedDeviceTable/FilterCategoryMenu.js'
 import type { DeviceModelFilters } from 'lib/seam/components/SupportedDeviceTable/use-filtered-device-models.js'
-import { useDeviceModels } from 'lib/seam/device-models/use-device-models.js'
-import { capitalize } from 'lib/strings.js'
 import { Button } from 'lib/ui/Button.js'
 import { Menu } from 'lib/ui/Menu/Menu.js'
 import { SearchTextField } from 'lib/ui/TextField/SearchTextField.js'
 
+import { useFilteredManufacturers } from './use-filtered-manufacturers.js'
+
 interface SupportedDeviceFilterAreaProps {
   filterValue: string
   setFilterValue: (filter: string) => void
   filters: DeviceModelFilters
   setFilters: Dispatch<SetStateAction<DeviceModelFilters>>
-  brands: string[] | null
-  excludedBrands: string[]
+  manufacturers: string[] | null
+  excludedManufacturers: string[]
 }
 
 export function SupportedDeviceFilterArea({
@@ -22,12 +22,15 @@ export function SupportedDeviceFilterArea({
   setFilterValue,
   filters,
   setFilters,
-  brands,
-  excludedBrands,
+  manufacturers,
+  excludedManufacturers,
 }: SupportedDeviceFilterAreaProps): JSX.Element {
   const appliedFiltersCount = getAppliedFilterCount(filters)
 
-  const availableBrands = useAvailableBrands(brands, excludedBrands)
+  const { manufacturers: availableManufacturers } = useFilteredManufacturers({
+    manufacturers,
+    excludedManufacturers,
+  })
 
   const resetFilter = (filterType: keyof DeviceModelFilters): void => {
     setFilters((filters) => ({
@@ -64,18 +67,22 @@ export function SupportedDeviceFilterArea({
           >
             <div className='seam-filter-menu-row'>
               <FilterCategoryMenu
-                label={t.brand}
+                label={t.manufacturer}
                 allLabel={allLabel}
-                options={availableBrands}
-                onSelect={(brand: string) => {
+                options={
+                  availableManufacturers?.map(
+                    (manufacturer) => manufacturer.display_name
+                  ) ?? []
+                }
+                onSelect={(manufacturer: string) => {
                   setFilters((filters) => ({
                     ...filters,
-                    brand,
+                    manufacturer,
                   }))
                 }}
-                buttonLabel={filters.brand ?? allLabel}
+                buttonLabel={filters.manufacturer ?? allLabel}
                 onAllOptionSelect={() => {
-                  resetFilter('brand')
+                  resetFilter('manufacturer')
                 }}
               />
             </div>
@@ -118,40 +125,14 @@ export function SupportedDeviceFilterArea({
 
 const getAppliedFilterCount = (filters: DeviceModelFilters): number => {
   let count = 0
-  if (filters.brand !== null) count++
+  if (filters.manufacturer !== null) count++
   if (!filters.supportedOnly) count++
   return count
 }
 
-const useAvailableBrands = (
-  brands: string[] | null,
-  excludedBrands: string[]
-): string[] => {
-  const { deviceModels } = useDeviceModels()
-
-  if (deviceModels == null) return []
-
-  const availableBrands = deviceModels
-    .map(({ brand }) => brand.trim())
-    .filter((brand) => {
-      // UPSTREAM: API can return an empty value for brand.
-      return brand !== ''
-    })
-    .filter((brand) => {
-      if (brands === null) return true
-      return brands.includes(brand)
-    })
-    .filter((brand) => {
-      return !excludedBrands.includes(brand)
-    })
-    .map((brand) => capitalize(brand))
-
-  return Array.from(new Set(availableBrands))
-}
-
 const t = {
   all: 'All',
-  brand: 'Brand',
+  manufacturer: 'Manufacturer',
   supported: 'Supported',
   filter: 'Filter',
   filters: 'Filters',

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterResultRow.tsx

@@ -1,15 +1,13 @@
-import type { DeviceModel } from 'seamapi'
+import type { DeviceModelV1 } from '@seamapi/types/devicedb'
 
 import {
-  connectionTypeNames,
   ImageColumn,
   StatusColumn,
 } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.js'
-import { useDeviceProvider } from 'lib/seam/components/SupportedDeviceTable/use-device-provider.js'
 import { DotDivider } from 'lib/ui/layout/DotDivider.js'
 
 interface SupportedDeviceFilterResultRowProps {
-  deviceModel: DeviceModel
+  deviceModel: DeviceModelV1
 }
 
 export function SupportedDeviceFilterResultRow({
@@ -27,23 +25,21 @@ export function SupportedDeviceFilterResultRow({
 export function ModelColumn({
   deviceModel,
 }: SupportedDeviceFilterResultRowProps): JSX.Element {
-  const deviceProvider = useDeviceProvider(deviceModel.brand)
-
   return (
     <div className='seam-col seam-model-col'>
       <div className='seam-model-name'>
         <img
-          src={deviceProvider.image_url}
-          alt={deviceModel.brand}
-          className='seam-brand-image'
+          src={deviceModel.manufacturer.logo?.url}
+          alt={deviceModel.manufacturer.display_name}
+          className='seam-manufacturer-image'
         />{' '}
-        <div className='seam-truncated-text'>{deviceModel.model_name}</div>
+        <div className='seam-truncated-text'>{deviceModel.display_name}</div>
       </div>
       <div className='seam-model-id'>
         <div className='seam-truncated-text'>
-          {deviceModel.manufacturer_model_id}
+          {deviceModel.device_model_id}
           <DotDivider />
-          {connectionTypeNames[deviceModel.connection_type]}
+          {deviceModel.main_connection_type}
         </div>
       </div>
     </div>

package/src/lib/seam/components/SupportedDeviceTable/{SupportedDeviceBrandSection.tsx → SupportedDeviceManufacturerSection.tsx}

@@ -1,30 +1,29 @@
+import type { DeviceModelV1 } from '@seamapi/types/devicedb'
 import classNames from 'classnames'
-import type { DeviceModel } from 'seamapi'
 
 import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
 import { HiddenDevicesOverlay } from 'lib/seam/components/SupportedDeviceTable/HiddenDevicesOverlay.js'
 import { ShowAllDevicesButton } from 'lib/seam/components/SupportedDeviceTable/ShowAllDevicesButton.js'
 import { SupportedDeviceRow } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.js'
-import { useDeviceProvider } from 'lib/seam/components/SupportedDeviceTable/use-device-provider.js'
+import { useManufacturer } from 'lib/seam/components/SupportedDeviceTable/use-manufacturer.js'
 import { useToggle } from 'lib/ui/use-toggle.js'
 
 /**
- * How many device models required before we collapse
- * the list, and require the user to click to
- * view all.
+ * How many device models required before collapsing the list,
+ * and requiring the user to click to view all.
  */
 const maxDevicesBeforeCollapsing = 3
 
-interface SupportedDeviceBrandSectionProps {
-  brand: string
-  deviceModels: DeviceModel[]
+interface SupportedDeviceManufacturerSectionProps {
+  manufacturerId: string
+  deviceModels: DeviceModelV1[]
 }
 
-export function SupportedDeviceBrandSection({
-  brand,
+export function SupportedDeviceManufacturerSection({
+  manufacturerId,
   deviceModels,
-}: SupportedDeviceBrandSectionProps): JSX.Element | null {
-  const deviceProvider = useDeviceProvider(brand)
+}: SupportedDeviceManufacturerSectionProps): JSX.Element | null {
+  const { manufacturer } = useManufacturer({ manufacturer_id: manufacturerId })
 
   const [expanded, toggleExpand] = useToggle()
 
@@ -47,32 +46,26 @@ export function SupportedDeviceBrandSection({
 
   return (
     <div
-      className={classNames('seam-brand-section', {
+      className={classNames('seam-manufacturer-section', {
         'can-expand': canExpand,
         expanded,
       })}
     >
       <div className='seam-header' onClick={handleHeaderClick}>
         <img
-          src={deviceProvider.image_url}
-          alt={brand}
-          className='seam-brand-image'
+          src={manufacturer?.logo?.url}
+          alt={manufacturer?.display_name}
+          className='seam-manufacturer-image'
         />
-        <h5 className='seam-brand-name'>
-          {deviceProvider.display_name} {t.devices}
+        <h5 className='seam-manufacturer-name'>
+          {manufacturer?.display_name} {t.devices}
         </h5>
         {canExpand && <ChevronRightIcon className='chevron' />}
       </div>
       <div className='seam-supported-device-table-content'>
-        {visibleDevices.map((deviceModel, index) => (
+        {visibleDevices.map((deviceModel) => (
           <SupportedDeviceRow
-            key={[
-              deviceModel.main_category,
-              deviceModel.brand,
-              deviceModel.model_name,
-              deviceModel.manufacturer_model_id,
-              index,
-            ].join(':')}
+            key={deviceModel.device_model_id}
             deviceModel={deviceModel}
           />
         ))}

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.tsx

@@ -1,10 +1,11 @@
+import type { DeviceModelV1 } from '@seamapi/types/devicedb'
 import classNames from 'classnames'
 import type { DeviceModel } from 'seamapi'
 
 import { DotDivider } from 'lib/ui/layout/DotDivider.js'
 
 interface SupportedDeviceRowProps {
-  deviceModel: DeviceModel
+  deviceModel: DeviceModelV1
 }
 
 export function SupportedDeviceRow({
@@ -25,7 +26,10 @@ export function ImageColumn({
   return (
     <div className='seam-col seam-device-image-col'>
       <div className='seam-image-box'>
-        <img width={40} src={deviceModel.icon_url} />
+        <img
+          width={40}
+          src={deviceModel.aesthetic_variants[0]?.images[0]?.url}
+        />
       </div>
     </div>
   )
@@ -37,13 +41,13 @@ export function ModelColumn({
   return (
     <div className='seam-col seam-model-col'>
       <div className='seam-model-name'>
-        <div className='seam-truncated-text'>{deviceModel.model_name}</div>
+        <div className='seam-truncated-text'>{deviceModel.display_name}</div>
       </div>
       <div className='seam-model-id'>
         <div className='seam-truncated-text'>
-          {deviceModel.manufacturer_model_id}
+          {deviceModel.device_model_id}
           <DotDivider />
-          {connectionTypeNames[deviceModel.connection_type]}
+          {deviceModel.main_connection_type}
         </div>
       </div>
     </div>
@@ -53,30 +57,35 @@ export function ModelColumn({
 export function StatusColumn({
   deviceModel,
 }: SupportedDeviceRowProps): JSX.Element {
-  const statusColor = supportLevelColors[deviceModel.support_level] ?? 'unknown'
+  const statusColor =
+    supportLevelColors[deviceModel.manufacturer.integration] ?? 'unknown'
 
   return (
     <div className='seam-col seam-status-col'>
       <div className={classNames('seam-status-pill', `status-${statusColor}`)}>
-        <span>{status[deviceModel.support_level]}</span>
+        <span>{status[deviceModel.manufacturer.integration]}</span>
       </div>
     </div>
   )
 }
 
 const supportLevelColors: Record<
-  DeviceModel['support_level'],
+  DeviceModelV1['manufacturer']['integration'],
   'green' | 'blue' | 'unknown'
 > = {
-  live: 'green',
+  stable: 'green',
   beta: 'blue',
+  planned: 'unknown',
   unsupported: 'unknown',
+  inquire: 'unknown',
 }
 
-const status: Record<DeviceModel['support_level'], string> = {
-  live: 'LIVE',
+const status: Record<DeviceModelV1['manufacturer']['integration'], string> = {
+  stable: 'LIVE',
   beta: 'BETA',
   unsupported: 'Inquire',
+  planned: 'Inquire',
+  inquire: 'Inquire',
 }
 
 export const connectionTypeNames: Record<

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTable.element.ts

@@ -5,10 +5,9 @@ import type { SupportedDeviceTableProps } from './SupportedDeviceTable.js'
 export const name = 'seam-supported-device-table'
 
 export const props: ElementProps<SupportedDeviceTableProps> = {
-  cannotFilter: 'boolean',
   disableFilter: 'boolean',
-  brands: 'array',
-  excludedBrands: 'array',
+  manufacturers: 'array',
+  excludedManufacturers: 'array',
 }
 
 export { SupportedDeviceTable as Component } from './SupportedDeviceTable.js'

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTable.tsx

@@ -13,12 +13,8 @@ import type { DeviceModelFilters } from 'lib/seam/components/SupportedDeviceTabl
 
 export interface SupportedDeviceTableProps extends CommonProps {
   disableFilter?: boolean
-  /**
-   * @deprecated Use disableFilter.
-   */
-  cannotFilter?: boolean
-  brands?: string[] | null
-  excludedBrands?: string[]
+  manufacturers?: string[] | null
+  excludedManufacturers?: string[]
 }
 
 export const NestedSupportedDeviceTable =
@@ -26,9 +22,8 @@ export const NestedSupportedDeviceTable =
 
 export function SupportedDeviceTable({
   disableFilter = false,
-  cannotFilter,
-  brands = null,
-  excludedBrands = [],
+  manufacturers = null,
+  excludedManufacturers = [],
   className,
 }: SupportedDeviceTableProps = {}): JSX.Element {
   useComponentTelemetry('SupportedDeviceTable')
@@ -36,11 +31,9 @@ export function SupportedDeviceTable({
   const [filterValue, setFilterValue] = useState('')
   const [filters, setFilters] = useState<DeviceModelFilters>({
     supportedOnly: true,
-    brand: null,
+    manufacturer: null,
   })
 
-  const hideFilter = cannotFilter ?? disableFilter
-
   return (
     <div
       className={classNames(
@@ -48,14 +41,14 @@ export function SupportedDeviceTable({
         className
       )}
     >
-      {!hideFilter && (
+      {!disableFilter && (
         <SupportedDeviceFilterArea
           filterValue={filterValue}
           setFilterValue={setFilterValue}
           filters={filters}
           setFilters={setFilters}
-          brands={brands}
-          excludedBrands={excludedBrands}
+          manufacturers={manufacturers}
+          excludedManufacturers={excludedManufacturers}
         />
       )}
       <SupportedDeviceContent
@@ -64,8 +57,8 @@ export function SupportedDeviceTable({
         }}
         filterValue={filterValue}
         filters={filters}
-        brands={brands}
-        excludedBrands={excludedBrands}
+        manufacturers={manufacturers}
+        excludedManufacturers={excludedManufacturers}
       />
     </div>
   )

package/src/lib/seam/components/SupportedDeviceTable/use-device-model.ts

@@ -0,0 +1,45 @@
+import type {
+  DeviceModelV1,
+  RouteRequestParams,
+  RouteResponse,
+} from '@seamapi/types/devicedb'
+import { useQuery } from '@tanstack/react-query'
+import type { SeamError } from 'seamapi'
+
+import { useSeamClient } from 'lib/seam/use-seam-client.js'
+import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
+
+export type UseDeviceModelParams = DeviceModelsGetParams | string
+export type UseDeviceModelData = DeviceModelV1 | null
+
+export function useDeviceModel(
+  params?: UseDeviceModelParams
+): UseSeamQueryResult<'deviceModel', UseDeviceModelData> {
+  const normalizedParams =
+    typeof params === 'string' ? { device_model_id: params } : params
+
+  const { client: seam } = useSeamClient()
+  const { data, ...rest } = useQuery<
+    DeviceModelsGetResponse['device_model'] | null,
+    SeamError
+  >({
+    enabled: seam != null,
+    queryKey: ['internal', 'device_models', 'get', normalizedParams],
+    queryFn: async () => {
+      if (seam == null) return null
+      const {
+        data: { device_model: deviceModel },
+      } = await seam.client.get<DeviceModelsGetResponse>(
+        '/internal/devicedb/v1/device_models/get',
+        { params: normalizedParams }
+      )
+      return deviceModel
+    },
+  })
+
+  return { ...rest, deviceModel: data }
+}
+
+type DeviceModelsGetParams = RouteRequestParams<'/v1/device_models/get'>
+
+type DeviceModelsGetResponse = RouteResponse<'/v1/device_models/get'>

package/src/lib/seam/components/SupportedDeviceTable/use-device-models.ts

@@ -0,0 +1,43 @@
+import type {
+  DeviceModelV1,
+  RouteRequestParams,
+  RouteResponse,
+} from '@seamapi/types/devicedb'
+import { useQuery } from '@tanstack/react-query'
+import type { SeamError } from 'seamapi'
+
+import { useSeamClient } from 'lib/seam/use-seam-client.js'
+import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
+
+export type UseDeviceModelsParams = DeviceModelsListParams
+export type UseDeviceModelsData = DeviceModelV1[]
+
+export function useDeviceModels(
+  params?: UseDeviceModelsParams
+): UseSeamQueryResult<'deviceModels', UseDeviceModelsData> {
+  const { client: seam } = useSeamClient()
+
+  const { data, ...rest } = useQuery<
+    DeviceModelsListResponse['device_models'],
+    SeamError
+  >({
+    enabled: seam != null,
+    queryKey: ['internal', 'device_models', 'list', params],
+    queryFn: async () => {
+      if (seam == null) return []
+      const {
+        data: { device_models: deviceModels },
+      } = await seam.client.get<DeviceModelsListResponse>(
+        '/internal/devicedb/v1/device_models/list',
+        { params }
+      )
+      return deviceModels
+    },
+  })
+
+  return { ...rest, deviceModels: data }
+}
+
+type DeviceModelsListParams = RouteRequestParams<'/v1/device_models/list'>
+
+type DeviceModelsListResponse = RouteResponse<'/v1/device_models/list'>

package/src/lib/seam/components/SupportedDeviceTable/use-filtered-device-models.ts

@@ -1,24 +1,27 @@
 import {
   useDeviceModels,
   type UseDeviceModelsParams,
-} from 'lib/seam/device-models/use-device-models.js'
+} from 'lib/seam/components/SupportedDeviceTable/use-device-models.js'
+
+import { useFilteredManufacturers } from './use-filtered-manufacturers.js'
 
 export interface DeviceModelFilters {
   supportedOnly: boolean
-  brand: string | null
+  manufacturer: string | null
 }
 
 export const useFilteredDeviceModels = ({
   filterValue,
   filters,
-  brands,
-  excludedBrands,
+  ...manufacturersParams
 }: {
   filterValue: string
   filters: DeviceModelFilters
-  brands: string[] | null
-  excludedBrands: string[]
+  manufacturers: string[] | null
+  excludedManufacturers: string[]
 }): ReturnType<typeof useDeviceModels> => {
+  const { manufacturers } = useFilteredManufacturers(manufacturersParams)
+
   const params: UseDeviceModelsParams = {}
 
   if (filterValue.trim() !== '') {
@@ -26,26 +29,34 @@ export const useFilteredDeviceModels = ({
   }
 
   if (filters.supportedOnly) {
-    params.support_level = 'live'
+    params.integration_status = 'stable'
+  }
+
+  if (filters.manufacturer !== null) {
+    const manufacturer = manufacturers?.find(
+      (manufacturer) => manufacturer.display_name === filters.manufacturer
+    )
+
+    if (manufacturer != null) {
+      params.manufacturer_id = manufacturer.manufacturer_id
+    }
   }
 
-  if (filters.brand !== null) {
-    params.brand = filters.brand
+  if (filters.manufacturer == null && manufacturers != null) {
+    params.manufacturer_ids = manufacturers.map((m) => m.manufacturer_id)
   }
 
-  const query = useDeviceModels(params)
+  const { deviceModels, ...query } = useDeviceModels(params)
 
-  // UPSTREAM: The API does not have a brands or excludedBrands query parameter,
-  // so selected brands are filtered here.
   return {
     ...query,
-    deviceModels: query.deviceModels
-      ?.filter(({ brand }) => {
-        if (brands === null) return true
-        return brands.includes(brand)
-      })
-      .filter(({ brand }) => {
-        return !excludedBrands.includes(brand)
-      }),
+    deviceModels: deviceModels?.filter(
+      (deviceModel) =>
+        manufacturers?.some(
+          (manufacturer) =>
+            deviceModel.manufacturer.manufacturer_id ===
+            manufacturer.manufacturer_id
+        )
+    ),
   }
 }

package/src/lib/seam/components/SupportedDeviceTable/use-filtered-manufacturers.ts

@@ -0,0 +1,54 @@
+import { useManufacturers } from 'lib/seam/components/SupportedDeviceTable/use-manufacturers.js'
+
+interface Params {
+  manufacturers: string[] | null
+  excludedManufacturers: string[]
+}
+export const useFilteredManufacturers = (
+  params: Params
+): ReturnType<typeof useManufacturers> => {
+  return useManufacturers({
+    liqe_query: createLiqeQuery(params),
+  })
+}
+
+export const createLiqeQuery = ({
+  manufacturers,
+  excludedManufacturers,
+}: Params): string | undefined => {
+  if (
+    (manufacturers?.some(isInvalidInput) ?? false) ||
+    excludedManufacturers.some(isInvalidInput)
+  ) {
+    return undefined
+  }
+
+  const excludedManufacturersClause = `NOT (${excludedManufacturers
+    .map(manufacturerToMatcher)
+    .join(' OR ')})`
+
+  if (manufacturers == null) {
+    if (excludedManufacturers.length === 0) return undefined
+    return excludedManufacturersClause
+  }
+
+  if (manufacturers.length === 0) {
+    return 'manufacturer_id:none'
+  }
+
+  const includedManufacturersClause = `(${manufacturers
+    .map(manufacturerToMatcher)
+    .join(' OR ')})`
+
+  if (excludedManufacturers.length === 0) return includedManufacturersClause
+
+  return `${includedManufacturersClause} AND ${excludedManufacturersClause}`
+}
+
+const manufacturerToMatcher = (value: string): string => {
+  const [manufacturer, uuid] = value.split('=')
+  if (uuid != null) return `manufacturer_id:"${uuid}"`
+  return `display_name:"${manufacturer}"`
+}
+
+const isInvalidInput = (value: string): boolean => value.includes('"')