@seamapi/react 1.44.0 → 1.45.1

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

@@ -14,6 +14,7 @@ interface SupportedDeviceFilterAreaProps {
   filters: DeviceModelFilters
   setFilters: Dispatch<SetStateAction<DeviceModelFilters>>
   brands: string[] | null
+  excludedBrands: string[]
 }
 
 export function SupportedDeviceFilterArea({
@@ -22,10 +23,11 @@ export function SupportedDeviceFilterArea({
   filters,
   setFilters,
   brands,
+  excludedBrands,
 }: SupportedDeviceFilterAreaProps): JSX.Element {
   const appliedFiltersCount = getAppliedFilterCount(filters)
 
-  const availableBrands = useAvailableBrands(brands)
+  const availableBrands = useAvailableBrands(brands, excludedBrands)
 
   const resetFilter = (filterType: keyof DeviceModelFilters): void => {
     setFilters((filters) => ({
@@ -121,27 +123,30 @@ const getAppliedFilterCount = (filters: DeviceModelFilters): number => {
   return count
 }
 
-const useAvailableBrands = (brands: string[] | null): string[] => {
+const useAvailableBrands = (
+  brands: string[] | null,
+  excludedBrands: string[]
+): string[] => {
   const { deviceModels } = useDeviceModels()
 
   if (deviceModels == null) return []
 
-  const uniqueBrands = new Set<string>()
-  for (const deviceModel of deviceModels) {
-    const value = deviceModel.brand
-
-    // UPSTREAM: API can return an empty value for brand.
-    if (value.trim() === '') continue
-
-    uniqueBrands.add(deviceModel.brand)
-  }
-
-  return Array.from(uniqueBrands)
+  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 = {

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

@@ -8,6 +8,7 @@ export const props: ElementProps<SupportedDeviceTableProps> = {
   cannotFilter: 'boolean',
   disableFilter: 'boolean',
   brands: 'array',
+  excludedBrands: 'array',
   className: 'string',
 }
 

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

@@ -12,6 +12,7 @@ export interface SupportedDeviceTableProps {
    */
   cannotFilter?: boolean
   brands?: string[] | null
+  excludedBrands?: string[]
   className?: string
 }
 
@@ -19,6 +20,7 @@ export function SupportedDeviceTable({
   disableFilter = false,
   cannotFilter,
   brands = null,
+  excludedBrands = [],
   className,
 }: SupportedDeviceTableProps = {}): JSX.Element {
   const [filterValue, setFilterValue] = useState('')
@@ -43,6 +45,7 @@ export function SupportedDeviceTable({
           filters={filters}
           setFilters={setFilters}
           brands={brands}
+          excludedBrands={excludedBrands}
         />
       )}
       <SupportedDeviceContent
@@ -52,6 +55,7 @@ export function SupportedDeviceTable({
         filterValue={filterValue}
         filters={filters}
         brands={brands}
+        excludedBrands={excludedBrands}
       />
     </div>
   )

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

@@ -12,10 +12,12 @@ export const useFilteredDeviceModels = ({
   filterValue,
   filters,
   brands,
+  excludedBrands,
 }: {
   filterValue: string
   filters: DeviceModelFilters
   brands: string[] | null
+  excludedBrands: string[]
 }): ReturnType<typeof useDeviceModels> => {
   const params: UseDeviceModelsParams = {}
 
@@ -33,16 +35,17 @@ export const useFilteredDeviceModels = ({
 
   const query = useDeviceModels(params)
 
-  if (brands === null) {
-    return query
-  }
-
-  // UPSTREAM: The API does not have a brands query parameter,
+  // UPSTREAM: The API does not have a brands or excludedBrands query parameter,
   // so selected brands are filtered here.
   return {
     ...query,
-    deviceModels: query.deviceModels?.filter((deviceModel) =>
-      brands.includes(deviceModel.brand)
-    ),
+    deviceModels: query.deviceModels
+      ?.filter(({ brand }) => {
+        if (brands === null) return true
+        return brands.includes(brand)
+      })
+      .filter(({ brand }) => {
+        return !excludedBrands.includes(brand)
+      }),
   }
 }

package/src/lib/ui/thermostat/ClimateSettingStatus.tsx

@@ -0,0 +1,88 @@
+import type { ClimateSetting } from 'seamapi'
+
+import { ThermostatCoolIcon } from 'lib/icons/ThermostatCool.js'
+import { ThermostatHeatIcon } from 'lib/icons/ThermostatHeat.js'
+import { ThermostatHeatCoolIcon } from 'lib/icons/ThermostatHeatCool.js'
+import { ThermostatOffIcon } from 'lib/icons/ThermostatOff.js'
+
+interface ClimateSettingStatusProps {
+  climateSetting: ClimateSetting
+  temperatureUnit?: 'fahrenheit' | 'celsius'
+  iconPlacement?: 'left' | 'right'
+}
+
+export function ClimateSettingStatus({
+  climateSetting,
+  temperatureUnit = 'fahrenheit',
+  iconPlacement = 'left',
+}: ClimateSettingStatusProps): JSX.Element {
+  return (
+    <div className='seam-climate-setting-status'>
+      {iconPlacement === 'left' && (
+        <ClimateSettingIcon mode={climateSetting.hvac_mode_setting} />
+      )}
+      <Content
+        mode={climateSetting.hvac_mode_setting}
+        coolingSetPoint={climateSetting.cooling_set_point_fahrenheit}
+        heatingSetPoint={climateSetting.heating_set_point_fahrenheit}
+        temperatureUnit={temperatureUnit}
+      />
+      {iconPlacement === 'right' && (
+        <ClimateSettingIcon mode={climateSetting.hvac_mode_setting} />
+      )}
+    </div>
+  )
+}
+
+function ClimateSettingIcon(props: {
+  mode: ClimateSetting['hvac_mode_setting']
+}): JSX.Element | null {
+  const { mode } = props
+
+  return (
+    <div className='seam-climate-setting-status-icon'>
+      {mode === 'cool' && <ThermostatCoolIcon />}
+      {mode === 'heat' && <ThermostatHeatIcon />}
+      {mode === 'heatcool' && <ThermostatHeatCoolIcon />}
+      {mode === 'off' && <ThermostatOffIcon />}
+    </div>
+  )
+}
+
+function Content(props: {
+  mode: ClimateSetting['hvac_mode_setting']
+  coolingSetPoint:
+    | ClimateSetting['cooling_set_point_fahrenheit']
+    | ClimateSetting['cooling_set_point_celsius']
+  heatingSetPoint:
+    | ClimateSetting['heating_set_point_fahrenheit']
+    | ClimateSetting['heating_set_point_celsius']
+  temperatureUnit: 'fahrenheit' | 'celsius'
+}): JSX.Element | null {
+  const { mode, coolingSetPoint, heatingSetPoint, temperatureUnit } = props
+  const hasCoolingSetPoint = coolingSetPoint !== undefined
+  const hasHeatingSetPoint = heatingSetPoint !== undefined
+  const unit =
+    temperatureUnit === 'fahrenheit' ? t.degreeFahrenheit : t.degreeCelsius
+
+  if (mode === 'cool' && hasCoolingSetPoint)
+    return <span>{`${coolingSetPoint}${unit}`}</span>
+
+  if (mode === 'heat' && hasHeatingSetPoint)
+    return <span>{`${heatingSetPoint}${unit}`}</span>
+
+  if (mode === 'heatcool' && hasHeatingSetPoint && hasCoolingSetPoint)
+    return (
+      <span>{`${heatingSetPoint}${unit} - ${coolingSetPoint}${unit}`}</span>
+    )
+
+  if (mode === 'off') return <span>{t.off}</span>
+
+  return null
+}
+
+const t = {
+  degreeFahrenheit: '°F',
+  degreeCelsius: '°C',
+  off: 'Off',
+}

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.44.0'
+const seamapiReactVersion = '1.45.1'
 
 export default seamapiReactVersion

package/src/styles/_main.scss

@@ -18,6 +18,7 @@
 @use './form-field';
 @use './radio-field';
 @use './checkbox';
+@use './thermostat';
 
 .seam-components {
   // Reset
@@ -44,4 +45,5 @@
   @include access-code-form.all;
   @include alert.all;
   @include supported-device-table.all;
+  @include thermostat.all;
 }

package/src/styles/_thermostat.scss

@@ -0,0 +1,21 @@
+@use './colors';
+
+@mixin all {
+  .seam-climate-setting-status {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: colors.$text-gray-1;
+    font-size: 14px;
+    line-height: 118%;
+    white-space: nowrap;
+  }
+
+  .seam-climate-setting-status-icon {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}