feat(SupportedDeviceTable): Add excludeIf and includeIf props

seamapi · Dec 14, 2023 · f0b26e6 · f0b26e6
1 parent 5586460
commit f0b26e6
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 0 deletions.
diff --git a/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceContent.tsx b/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceContent.tsx
@@ -15,6 +15,8 @@ interface SupportedDeviceContentProps {
   filters: DeviceModelFilters
   manufacturers: string[] | null
   excludedManufacturers: string[]
+  includeIf: string[] | null
+  excludeIf: string[]
 }
 
 export function SupportedDeviceContent({
@@ -23,13 +25,17 @@ export function SupportedDeviceContent({
   filters,
   manufacturers,
   excludedManufacturers,
+  includeIf,
+  excludeIf,
 }: SupportedDeviceContentProps): JSX.Element | null {
   const { deviceModels, isLoading, isError, refetch } = useFilteredDeviceModels(
     {
       filterValue,
       filters,
       manufacturers,
       excludedManufacturers,
+      includeIf,
+      excludeIf,
     }
   )
 

diff --git a/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTable.element.ts b/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTable.element.ts
@@ -8,6 +8,8 @@ export const props: ElementProps<SupportedDeviceTableProps> = {
   disableFilter: 'boolean',
   manufacturers: 'array',
   excludedManufacturers: 'array',
+  includeIf: 'array',
+  excludeIf: 'array',
 }
 
 export { SupportedDeviceTable as Component } from './SupportedDeviceTable.js'
diff --git a/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTable.stories.tsx b/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTable.stories.tsx
@@ -50,6 +50,27 @@ export const ExcludeManufacturers: Story = {
   ),
 }
 
+export const IncludeIf: Story = {
+  render: (props) => (
+    <SupportedDeviceTable
+      {...props}
+      includeIf={[
+        'software_features.can_remotely_unlock',
+        'physical_properties.has_physical_key',
+      ]}
+    />
+  ),
+}
+
+export const ExcludeIf: Story = {
+  render: (props) => (
+    <SupportedDeviceTable
+      {...props}
+      excludeIf={['software_features.can_remotely_unlock']}
+    />
+  ),
+}
+
 export const InsideModal: Story = {
   render: (props) => {
     const [open, toggleOpen] = useToggle()

diff --git a/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTable.tsx b/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTable.tsx
@@ -15,6 +15,8 @@ export interface SupportedDeviceTableProps extends CommonProps {
   disableFilter?: boolean
   manufacturers?: string[] | null
   excludedManufacturers?: string[]
+  includeIf?: string[] | null
+  excludeIf?: string[]
 }
 
 export const NestedSupportedDeviceTable =
@@ -24,6 +26,8 @@ export function SupportedDeviceTable({
   disableFilter = false,
   manufacturers = null,
   excludedManufacturers = [],
+  includeIf = null,
+  excludeIf = [],
   className,
 }: SupportedDeviceTableProps = {}): JSX.Element {
   useComponentTelemetry('SupportedDeviceTable')
@@ -59,6 +63,8 @@ export function SupportedDeviceTable({
         filters={filters}
         manufacturers={manufacturers}
         excludedManufacturers={excludedManufacturers}
+        includeIf={includeIf}
+        excludeIf={excludeIf}
       />
     </div>
   )

diff --git a/src/lib/seam/components/SupportedDeviceTable/use-filtered-device-models.ts b/src/lib/seam/components/SupportedDeviceTable/use-filtered-device-models.ts
@@ -13,17 +13,29 @@ export interface DeviceModelFilters {
 export const useFilteredDeviceModels = ({
   filterValue,
   filters,
+  includeIf,
+  excludeIf,
   ...manufacturersParams
 }: {
   filterValue: string
   filters: DeviceModelFilters
   manufacturers: string[] | null
   excludedManufacturers: string[]
+  includeIf: string[] | null
+  excludeIf: string[]
 }): ReturnType<typeof useDeviceModels> => {
   const { manufacturers } = useFilteredManufacturers(manufacturersParams)
 
   const params: UseDeviceModelsParams = {}
 
+  if (excludeIf.length > 0) {
+    params.exclude_if = excludeIf
+  }
+
+  if (includeIf != null) {
+    params.include_if = includeIf
+  }
+
   if (filterValue.trim() !== '') {
     params.text_search = filterValue.trim()
   }