From e560f51fe78dde6837d1c882a8a89f52ac2c4b23 Mon Sep 17 00:00:00 2001
From: shafi54 <108669266+shafi-aviz@users.noreply.github.com>
Date: Tue, 15 Sep 2026 23:59:59 +0530
Subject: [PATCH] add product test

---
 .gitignore                                    |   3 +-
 .../admin-ui/app/(drawer)/dashboard/index.tsx |   2 +
 .../app/(drawer)/dashboard/products/add.tsx   |   8 +-
 .../app/(drawer)/dashboard/products/edit.tsx  |   4 +-
 .../app/(drawer)/dashboard/products/index.tsx | 395 ++++++++++--------
 apps/admin-ui/src/components/ProductForm.tsx  |   5 +-
 change-log.txt                                | 115 +++++
 .../ui/src/components/bottom-dropdown.tsx     |   2 +
 tests/e2e/.env.example                        |  28 ++
 tests/e2e/README.md                           |  62 +++
 tests/e2e/add-product.yaml                    | 169 ++++++++
 tests/e2e/assets/test-product.png             | Bin 0 -> 5075 bytes
 tests/e2e/config.yaml                         |   6 +
 tests/e2e/run.sh                              |  57 +++
 tests/e2e/subflows/login.yaml                 |  20 +
 tests/e2e/subflows/pick-image.yaml            |  79 ++++
 16 files changed, 768 insertions(+), 187 deletions(-)
 create mode 100644 tests/e2e/.env.example
 create mode 100644 tests/e2e/README.md
 create mode 100644 tests/e2e/add-product.yaml
 create mode 100755 tests/e2e/assets/test-product.png
 create mode 100644 tests/e2e/config.yaml
 create mode 100755 tests/e2e/run.sh
 create mode 100644 tests/e2e/subflows/login.yaml
 create mode 100644 tests/e2e/subflows/pick-image.yaml

diff --git a/.gitignore b/.gitignore
index 199ddb7..949d628 100644
--- a/.gitignore
+++ b/.gitignore
@@ -135,8 +135,7 @@ dist
 type-clusters/*
 
 # ---> Maestro (root E2E suite)
-/e2e/.maestro-output/
-/e2e/.env
+tests/e2e/.env
 
 apps/user-ui/android/
 apps/admin-ui/android/
diff --git a/apps/admin-ui/app/(drawer)/dashboard/index.tsx b/apps/admin-ui/app/(drawer)/dashboard/index.tsx
index 571c118..582363b 100644
--- a/apps/admin-ui/app/(drawer)/dashboard/index.tsx
+++ b/apps/admin-ui/app/(drawer)/dashboard/index.tsx
@@ -29,6 +29,8 @@ const MenuItemComponent: React.FC<MenuItemComponentProps> = ({ item, router }) =
   
   return (
   <Pressable
+    testID={item.testID}
+    accessibilityLabel={item.testID}
     onPress={() => item.onPress ? item.onPress() : router.push(item.route as any)}
     style={({ pressed }) => [
       tw`flex-row items-center p-4 bg-white border border-gray-100 rounded-xl mb-3 shadow-sm`,
diff --git a/apps/admin-ui/app/(drawer)/dashboard/products/add.tsx b/apps/admin-ui/app/(drawer)/dashboard/products/add.tsx
index 4465099..e728976 100644
--- a/apps/admin-ui/app/(drawer)/dashboard/products/add.tsx
+++ b/apps/admin-ui/app/(drawer)/dashboard/products/add.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import { Alert } from 'react-native'
-import { AppContainer, ImageUploaderNeoPayload } from 'common-ui'
+import { Alert, View } from 'react-native'
+import { ImageUploaderNeoPayload, tw } from 'common-ui'
 import ProductForm from '@/src/components/ProductForm'
 import { trpc } from '@/src/trpc-client'
 import { useUploadToObjectStorage } from '@/hooks/useUploadToObjectStore'
@@ -139,13 +139,13 @@ export default function AddProduct() {
   }
 
   return (
-    <AppContainer>
+    <View style={tw`flex-1 bg-white`}>
       <ProductForm
         mode="create"
         initialValues={initialValues}
         onSubmit={handleSubmit}
         isLoading={createProduct.isPending || isUploading}
       />
-    </AppContainer>
+    </View>
   )
 }
diff --git a/apps/admin-ui/app/(drawer)/dashboard/products/edit.tsx b/apps/admin-ui/app/(drawer)/dashboard/products/edit.tsx
index 69f0c97..8fd400e 100644
--- a/apps/admin-ui/app/(drawer)/dashboard/products/edit.tsx
+++ b/apps/admin-ui/app/(drawer)/dashboard/products/edit.tsx
@@ -219,7 +219,7 @@ export default function EditProduct() {
   }
 
   return (
-    <AppContainer>
+    <View style={tw`flex-1 bg-white`}>
       <ProductForm
         ref={productFormRef}
         mode="edit"
@@ -229,6 +229,6 @@ export default function EditProduct() {
         existingVariantImages={existingVariantImages}
         existingVariantImageKeys={existingVariantImageKeys}
       />
-    </AppContainer>
+    </View>
   );
 }
diff --git a/apps/admin-ui/app/(drawer)/dashboard/products/index.tsx b/apps/admin-ui/app/(drawer)/dashboard/products/index.tsx
index cae5b19..4dd80e9 100644
--- a/apps/admin-ui/app/(drawer)/dashboard/products/index.tsx
+++ b/apps/admin-ui/app/(drawer)/dashboard/products/index.tsx
@@ -1,9 +1,9 @@
-import React, { useState, useMemo } from 'react';
-import { View, TouchableOpacity, RefreshControl } from 'react-native';
+import React, { useState, useMemo, useCallback } from 'react';
+import { View, TouchableOpacity } from 'react-native';
 import { Image } from 'expo-image';
 import { useRouter } from 'expo-router';
 import MaterialIcons from '@expo/vector-icons/MaterialIcons';
-import { AppContainer, MyText, tw, MyButton, useManualRefresh, SearchBar, useMarkDataFetchers, MyFlatList } from 'common-ui';
+import { MyText, tw, MyButton, useManualRefresh, SearchBar, useMarkDataFetchers, MyFlatList } from 'common-ui';
 
 import { trpc } from '@/src/trpc-client';
 import { SuccessToast, ErrorToast } from '@/services/toaster';
@@ -13,15 +13,130 @@ type FilterType = 'all' | 'in-stock' | 'out-of-stock';
 
 type SerializedAdminSku = Omit<AdminSku, 'createdAt'> & { createdAt: string | Date }
 
-function getDefaultSku(product: { skus: SerializedAdminSku[] }): SerializedAdminSku | null {
+function getDefaultSku(product: { skus?: SerializedAdminSku[] }): SerializedAdminSku | null {
   return product.skus?.[0] ?? null
 }
 
+function FilterButton({
+  filter,
+  label,
+  count,
+  activeFilter,
+  onSelect,
+}: {
+  filter: FilterType
+  label: string
+  count: number
+  activeFilter: FilterType
+  onSelect: (filter: FilterType) => void
+}) {
+  const isActive = activeFilter === filter
+  return (
+    <TouchableOpacity
+      onPress={() => onSelect(filter)}
+      style={tw`px-4 py-2 rounded-lg ${isActive ? 'bg-blue-500' : 'bg-gray-200'}`}
+    >
+      <MyText style={tw`${isActive ? 'text-white' : 'text-gray-700'} font-semibold`}>
+        {label} ({count})
+      </MyText>
+    </TouchableOpacity>
+  )
+}
+
+type ProductRowProps = {
+  product: any
+  isToggling: boolean
+  onView: (productId: number) => void
+  onEdit: (productId: number) => void
+  onToggle: (product: { id: number }) => void
+}
+
+const ProductRow = React.memo(function ProductRow({ product, isToggling, onView, onEdit, onToggle }: ProductRowProps) {
+  const defaultSku = getDefaultSku(product)
+  const skuImages = defaultSku?.images ?? null
+  const isOut = defaultSku?.isOutOfStock ?? false
+
+  return (
+    <View style={tw`bg-white rounded-2xl shadow-lg mb-4 overflow-hidden`}>
+      {/* Product Image */}
+      {skuImages && skuImages.length > 0 ? (
+        <Image
+          source={{ uri: skuImages[0] }}
+          style={tw`w-full h-48`}
+          contentFit="cover"
+          cachePolicy="memory-disk"
+          recyclingKey={String(product.id)}
+        />
+      ) : (
+        <View style={tw`w-full h-48 bg-gray-200 justify-center items-center`}>
+          <MaterialIcons name="image" size={48} color="#9CA3AF" />
+        </View>
+      )}
+
+      {/* Product Info */}
+      <View style={tw`p-4`}>
+        <View style={tw`flex-row justify-between items-start mb-2`}>
+          <MyText style={tw`text-lg font-bold text-gray-800 flex-1 mr-2`} numberOfLines={2}>
+            {product.name}
+          </MyText>
+          <View style={tw`flex-row items-center`}>
+            <View style={tw`w-3 h-3 rounded-full mr-1 ${isOut ? 'bg-red-500' : 'bg-green-500'}`} />
+            <MyText style={tw`text-sm ${isOut ? 'text-red-500' : 'text-green-500'} font-semibold`}>
+              {isOut ? 'Out' : 'In'}
+            </MyText>
+          </View>
+        </View>
+
+        {product.shortDescription && (
+          <MyText style={tw`text-gray-600 mb-2`} numberOfLines={2}>
+            {product.shortDescription}
+          </MyText>
+        )}
+
+        <View style={tw`flex-row justify-between items-center mb-3`}>
+          <MyText style={tw`text-sm text-gray-500 font-medium`}>
+            {product.skus?.length ?? 0} Variants
+          </MyText>
+        </View>
+
+        {/* Action Buttons */}
+        <View style={tw`flex-row gap-2`}>
+          <TouchableOpacity
+            onPress={() => onView(product.id)}
+            style={tw`flex-1 bg-gray-500 p-3 rounded-lg flex-row items-center justify-center`}
+          >
+            <MaterialIcons name="visibility" size={16} color="white" />
+            <MyText style={tw`text-white font-semibold ml-1`}>View</MyText>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            onPress={() => onEdit(product.id)}
+            style={tw`flex-1 bg-blue-500 p-3 rounded-lg flex-row items-center justify-center`}
+          >
+            <MaterialIcons name="edit" size={16} color="white" />
+            <MyText style={tw`text-white font-semibold ml-1`}>Edit</MyText>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            onPress={() => onToggle(product)}
+            disabled={isToggling}
+            style={tw`flex-1 ${isOut ? 'bg-green-500' : 'bg-orange-500'} p-3 rounded-lg flex-row items-center justify-center ${isToggling ? 'opacity-50' : ''}`}
+          >
+            <MaterialIcons name={isOut ? 'check-circle' : 'block'} size={16} color="white" />
+            <MyText style={tw`text-white font-semibold ml-1`}>
+              {isOut ? 'Stock' : 'Out'}
+            </MyText>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  )
+})
+
 export default function Products() {
   const router = useRouter();
   const [searchTerm, setSearchTerm] = useState('');
   const [activeFilter, setActiveFilter] = useState<FilterType>('all');
-  const [refreshing, setRefreshing] = useState(false);
 
   const { data: productsData, isLoading, error, refetch } = trpc.admin.product.getProducts.useQuery();
 
@@ -43,18 +158,17 @@ export default function Products() {
 
   const products = productsData?.products || [];
 
-  const handleRefresh = async () => {
-    setRefreshing(true);
+  const handleRefresh = useCallback(async () => {
     await refetch();
-    setRefreshing(false);
-  };
+  }, [refetch]);
 
   const filteredProducts = useMemo(() => {
+    const term = searchTerm.toLowerCase();
     return products.filter(product => {
       const defaultSku = getDefaultSku(product)
 
-      const matchesSearch = product.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                          (product.shortDescription?.toLowerCase().includes(searchTerm.toLowerCase()));
+      const matchesSearch = product.name.toLowerCase().includes(term) ||
+                          (product.shortDescription?.toLowerCase().includes(term));
 
       const matchesFilter = activeFilter === 'all' ||
         (activeFilter === 'in-stock' && !defaultSku?.isOutOfStock) ||
@@ -64,64 +178,47 @@ export default function Products() {
     });
   }, [products, searchTerm, activeFilter]);
 
-  const handleEdit = (productId: number) => {
-    router.push(`/(drawer)/dashboard/products/edit?id=${productId}` as any);
-  };
-
-  const handleViewDetails = (productId: number) => {
-    router.push(`/(drawer)/dashboard/products/detail/${productId}` as any);
-  };
-
-  const handleToggleStock = (product: { id: number }) => {
-    toggleOutOfStock.mutate({ id: product.id });
-  };
-
-  const FilterButton = ({ filter, label, count }: { filter: FilterType; label: string; count: number }) => (
-    <TouchableOpacity
-      onPress={() => setActiveFilter(filter)}
-      style={tw`px-4 py-2 rounded-lg ${activeFilter === filter ? 'bg-blue-500' : 'bg-gray-200'}`}
-    >
-      <MyText style={tw`${activeFilter === filter ? 'text-white' : 'text-gray-700'} font-semibold`}>
-        {label} ({count})
-      </MyText>
-    </TouchableOpacity>
+  const inStockCount = useMemo(
+    () => products.filter(p => { const sku = getDefaultSku(p); return sku && !sku.isOutOfStock }).length,
+    [products]
+  );
+  const outOfStockCount = useMemo(
+    () => products.filter(p => getDefaultSku(p)?.isOutOfStock).length,
+    [products]
   );
 
-  if (isLoading) {
-    return (
-      <AppContainer>
-        <View style={tw`flex-1 justify-center items-center`}>
-          <MyText style={tw`text-gray-600`}>Loading products...</MyText>
-        </View>
-      </AppContainer>
-    );
-  }
+  const handleEdit = useCallback((productId: number) => {
+    router.push(`/(drawer)/dashboard/products/edit?id=${productId}` as any);
+  }, [router]);
 
-  if (error) {
-    return (
-      <AppContainer>
-        <View style={tw`flex-1 justify-center items-center`}>
-          <MyText style={tw`text-red-600`}>Error loading products</MyText>
-          <TouchableOpacity
-            onPress={() => refetch()}
-            style={tw`mt-4 bg-blue-500 px-4 py-2 rounded-lg`}
-          >
-            <MyText style={tw`text-white font-semibold`}>Retry</MyText>
-          </TouchableOpacity>
-        </View>
-      </AppContainer>
-    );
-  }
+  const handleViewDetails = useCallback((productId: number) => {
+    router.push(`/(drawer)/dashboard/products/detail/${productId}` as any);
+  }, [router]);
 
-  const inStockCount = products.filter(p => getDefaultSku(p) && !getDefaultSku(p)!.isOutOfStock).length;
-  const outOfStockCount = products.filter(p => getDefaultSku(p)?.isOutOfStock).length;
+  const handleToggleStock = useCallback((product: { id: number }) => {
+    toggleOutOfStock.mutate({ id: product.id });
+  }, [toggleOutOfStock]);
 
-  const listHeader = (
+  const handleSelectFilter = useCallback((filter: FilterType) => setActiveFilter(filter), []);
+
+  const keyExtractor = useCallback((item: { id: number }) => item.id.toString(), []);
+
+  const renderItem = useCallback(({ item: product }: { item: any }) => (
+    <ProductRow
+      product={product}
+      isToggling={toggleOutOfStock.isPending && toggleOutOfStock.variables?.id === product.id}
+      onView={handleViewDetails}
+      onEdit={handleEdit}
+      onToggle={handleToggleStock}
+    />
+  ), [toggleOutOfStock.isPending, toggleOutOfStock.variables?.id, handleViewDetails, handleEdit, handleToggleStock]);
+
+  const listHeader = useMemo(() => (
     <>
       {/* Header */}
       <View style={tw`flex-row justify-between items-center mb-6`}>
         <MyText style={tw`text-2xl font-bold text-gray-800`}>Products</MyText>
-        <MyButton onPress={() => router.push('/(drawer)/dashboard/products/add' as any)}>
+        <MyButton testID="add-product-button" onPress={() => router.push('/(drawer)/dashboard/products/add' as any)}>
           Add Product
         </MyButton>
       </View>
@@ -138,130 +235,72 @@ export default function Products() {
 
       {/* Filter Tabs */}
       <View style={tw`flex-row gap-2 mb-6`}>
-        <FilterButton filter="all" label="All" count={products.length} />
-        <FilterButton filter="in-stock" label="In Stock" count={inStockCount} />
-        <FilterButton filter="out-of-stock" label="Out of Stock" count={outOfStockCount} />
+        <FilterButton filter="all" label="All" count={products.length} activeFilter={activeFilter} onSelect={handleSelectFilter} />
+        <FilterButton filter="in-stock" label="In Stock" count={inStockCount} activeFilter={activeFilter} onSelect={handleSelectFilter} />
+        <FilterButton filter="out-of-stock" label="Out of Stock" count={outOfStockCount} activeFilter={activeFilter} onSelect={handleSelectFilter} />
       </View>
     </>
-  );
-
-  const renderItem = ({ item: product }: { item: any }) => {
-    const defaultSku = getDefaultSku(product)
-    const skuImages = defaultSku?.images ?? null
-    const isOut = defaultSku?.isOutOfStock ?? false
+  ), [products.length, inStockCount, outOfStockCount, searchTerm, activeFilter, handleSelectFilter, router]);
 
+  if (isLoading) {
     return (
-      <View key={product.id} style={tw`bg-white rounded-2xl shadow-lg mb-4 overflow-hidden`}>
-        {/* Product Image */}
-        {skuImages && skuImages.length > 0 ? (
-          <Image
-            source={{ uri: skuImages[0] }}
-            style={tw`w-full h-48`}
-            resizeMode="cover"
-          />
-        ) : (
-          <View style={tw`w-full h-48 bg-gray-200 justify-center items-center`}>
-            <MaterialIcons name="image" size={48} color="#9CA3AF" />
-          </View>
-        )}
-
-        {/* Product Info */}
-        <View style={tw`p-4`}>
-          <View style={tw`flex-row justify-between items-start mb-2`}>
-            <MyText style={tw`text-lg font-bold text-gray-800 flex-1 mr-2`} numberOfLines={2}>
-              {product.name}
-            </MyText>
-            <View style={tw`flex-row items-center`}>
-              <View style={tw`w-3 h-3 rounded-full mr-1 ${isOut ? 'bg-red-500' : 'bg-green-500'}`} />
-              <MyText style={tw`text-sm ${isOut ? 'text-red-500' : 'text-green-500'} font-semibold`}>
-                {isOut ? 'Out' : 'In'}
-              </MyText>
-            </View>
-          </View>
-
-          {product.shortDescription && (
-            <MyText style={tw`text-gray-600 mb-2`} numberOfLines={2}>
-              {product.shortDescription}
-            </MyText>
-          )}
-
-          <View style={tw`flex-row justify-between items-center mb-3`}>
-            <MyText style={tw`text-sm text-gray-500 font-medium`}>
-              {product.skus?.length ?? 0} Variants
-            </MyText>
-          </View>
-
-           {/* Action Buttons */}
-           <View style={tw`flex-row gap-2`}>
-             <TouchableOpacity
-               onPress={() => handleViewDetails(product.id)}
-               style={tw`flex-1 bg-gray-500 p-3 rounded-lg flex-row items-center justify-center`}
-             >
-               <MaterialIcons name="visibility" size={16} color="white" />
-               <MyText style={tw`text-white font-semibold ml-1`}>View</MyText>
-             </TouchableOpacity>
-
-             <TouchableOpacity
-               onPress={() => handleEdit(product.id)}
-               style={tw`flex-1 bg-blue-500 p-3 rounded-lg flex-row items-center justify-center`}
-             >
-               <MaterialIcons name="edit" size={16} color="white" />
-               <MyText style={tw`text-white font-semibold ml-1`}>Edit</MyText>
-             </TouchableOpacity>
-
-             <TouchableOpacity
-               onPress={() => handleToggleStock(product)}
-               disabled={toggleOutOfStock.isPending && toggleOutOfStock.variables?.id === product.id}
-               style={tw`flex-1 ${isOut ? 'bg-green-500' : 'bg-orange-500'} p-3 rounded-lg flex-row items-center justify-center ${toggleOutOfStock.isPending && toggleOutOfStock.variables?.id === product.id ? 'opacity-50' : ''}`}
-             >
-               <MaterialIcons name={isOut ? 'check-circle' : 'block'} size={16} color="white" />
-               <MyText style={tw`text-white font-semibold ml-1`}>
-                 {isOut ? 'Stock' : 'Out'}
-               </MyText>
-             </TouchableOpacity>
-           </View>
-        </View>
+      <View style={tw`flex-1 bg-white justify-center items-center`}>
+        <MyText style={tw`text-gray-600`}>Loading products...</MyText>
       </View>
-    )
-  };
+    );
+  }
+
+  if (error) {
+    return (
+      <View style={tw`flex-1 bg-white justify-center items-center`}>
+        <MyText style={tw`text-red-600`}>Error loading products</MyText>
+        <TouchableOpacity
+          onPress={() => refetch()}
+          style={tw`mt-4 bg-blue-500 px-4 py-2 rounded-lg`}
+        >
+          <MyText style={tw`text-white font-semibold`}>Retry</MyText>
+        </TouchableOpacity>
+      </View>
+    );
+  }
 
   return (
-    <AppContainer>
-      <View style={tw`flex-1`}>
-        <MyFlatList
-          data={filteredProducts}
-          renderItem={renderItem}
-          keyExtractor={(item) => item.id.toString()}
-          ListHeaderComponent={listHeader}
-          ListEmptyComponent={
-            <View style={tw`flex-1 justify-center items-center py-10`}>
-              <MaterialIcons name="inventory" size={64} color="#D1D5DB" />
-              <MyText style={tw`text-gray-500 text-center mt-4 text-lg`}>
-                {searchTerm || activeFilter !== 'all' ? 'No products match your filters' : 'No products found'}
-              </MyText>
-              <MyText style={tw`text-gray-400 text-center mt-2`}>
-                {searchTerm || activeFilter !== 'all' ? 'Try adjusting your search or filters' : 'Start by adding your first product'}
-              </MyText>
-              {(searchTerm || activeFilter !== 'all') && (
-                <TouchableOpacity
-                  onPress={() => {
-                    setSearchTerm('');
-                    setActiveFilter('all');
-                  }}
-                  style={tw`mt-4 bg-blue-500 px-4 py-2 rounded-lg`}
-                >
-                  <MyText style={tw`text-white font-semibold`}>Clear Filters</MyText>
-                </TouchableOpacity>
-              )}
-            </View>
-          }
-          contentContainerStyle={tw`pb-4`}
-          showsVerticalScrollIndicator={false}
-          refreshControl={
-            <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
-          }
-        />
-      </View>
-    </AppContainer>
+    <View style={tw`flex-1 bg-white`}>
+      <MyFlatList
+        data={filteredProducts}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        ListHeaderComponent={listHeader}
+        ListEmptyComponent={
+          <View style={tw`flex-1 justify-center items-center py-10`}>
+            <MaterialIcons name="inventory" size={64} color="#D1D5DB" />
+            <MyText style={tw`text-gray-500 text-center mt-4 text-lg`}>
+              {searchTerm || activeFilter !== 'all' ? 'No products match your filters' : 'No products found'}
+            </MyText>
+            <MyText style={tw`text-gray-400 text-center mt-2`}>
+              {searchTerm || activeFilter !== 'all' ? 'Try adjusting your search or filters' : 'Start by adding your first product'}
+            </MyText>
+            {(searchTerm || activeFilter !== 'all') && (
+              <TouchableOpacity
+                onPress={() => {
+                  setSearchTerm('');
+                  setActiveFilter('all');
+                }}
+                style={tw`mt-4 bg-blue-500 px-4 py-2 rounded-lg`}
+              >
+                <MyText style={tw`text-white font-semibold`}>Clear Filters</MyText>
+              </TouchableOpacity>
+            )}
+          </View>
+        }
+        contentContainerStyle={tw`p-4`}
+        showsVerticalScrollIndicator={false}
+        onRefresh={handleRefresh}
+        initialNumToRender={6}
+        maxToRenderPerBatch={8}
+        windowSize={5}
+        removeClippedSubviews
+      />
+    </View>
   );
 }
diff --git a/apps/admin-ui/src/components/ProductForm.tsx b/apps/admin-ui/src/components/ProductForm.tsx
index 8ac2cb1..30d3818 100644
--- a/apps/admin-ui/src/components/ProductForm.tsx
+++ b/apps/admin-ui/src/components/ProductForm.tsx
@@ -253,7 +253,7 @@ const ProductForm = forwardRef<ProductFormRef, ProductFormProps>(({
     >
       {({ handleChange, handleSubmit, values, setFieldValue, validateForm }) => {
         return (
-        <ScrollView style={tw`flex-1`} contentContainerStyle={tw`pb-10`}>
+        <ScrollView style={tw`flex-1`} contentContainerStyle={tw`px-4 pt-4 pb-10`} keyboardShouldPersistTaps="handled">
           <MyTextInput
             testID="product-name-input"
             topLabel="Product Name"
@@ -341,6 +341,7 @@ const ProductForm = forwardRef<ProductFormRef, ProductFormProps>(({
                       </View>
                       {(values.variants.length > 1 || isExistingSku) && (
                         <TouchableOpacity
+                          testID={`variant-${vIndex}-remove`}
                           onPress={() => {
                             if (isExistingSku) {
                               // Mark existing SKU as deleted (sent to backend on save).
@@ -600,6 +601,7 @@ const ProductForm = forwardRef<ProductFormRef, ProductFormProps>(({
                 })}
 
                 <TouchableOpacity
+                  testID="add-variant-button-footer"
                   onPress={() => {
                     push(defaultVariant())
                     setVariantImages((prev) => [...prev, []])
@@ -614,6 +616,7 @@ const ProductForm = forwardRef<ProductFormRef, ProductFormProps>(({
           </FieldArray>
 
           <TouchableOpacity
+            testID="create-product-button"
             onPress={async () => {
               const validationErrors = await validateForm()
               if (Object.keys(validationErrors).length > 0) {
diff --git a/change-log.txt b/change-log.txt
index 8caf727..bec9267 100644
--- a/change-log.txt
+++ b/change-log.txt
@@ -2168,3 +2168,118 @@ package.json:
      "typecheck": "bash typecheck",
 -    "e2e": "bash e2e/run.sh",
      "web-ui": "bun run --filter web-ui",
+
+[2026-09-15 23:29:38] Maestro E2E setup: add missing testIDs + tests/e2e/ scaffold.
+First flow: add a product with 2 SKUs (one flash), values from env, taps by testID.
+
+=== packages/ui/src/components/bottom-dropdown.tsx ===
+- option row TouchableOpacity (inside filteredOptions.map):
+    + testID={`${testID}-option-${option.value}`}
+    + accessibilityLabel={`${testID}-option-${option.value}`}
+
+=== apps/admin-ui/src/components/ProductForm.tsx ===
+- footer "Add Variant" TouchableOpacity:            + testID="add-variant-button-footer"
+- variant delete/restore TouchableOpacity:         + testID={`variant-${vIndex}-remove`}
+- submit TouchableOpacity:                         + testID="create-product-button"
+
+=== apps/admin-ui/app/(drawer)/dashboard/products/index.tsx ===
+- header "Add Product" MyButton:                   + testID="add-product-button"
+
+=== apps/admin-ui/app/(drawer)/dashboard/index.tsx ===
+- MenuItemComponent Pressable: + testID={item.testID} + accessibilityLabel={item.testID}
+
+=== .gitignore ===
+- + tests/e2e/.env
+
+=== NEW files under tests/e2e/ ===
+- config.yaml               (workspace config: flows: ['*.yaml'])
+- add-product.yaml          (main flow; appId ${APP_ID})
+- subflows/login.yaml       (reusable login)
+- subflows/pick-image.yaml  (OS photo-picker adapter; optional fallbacks)
+- assets/test-product.png   (copied from apps/admin-ui/assets/images/partial-react-logo.png)
+- .env.example
+- run.sh                    (sources .env, appends timestamp to PRODUCT_NAME, runs maestro -e)
+- README.md
+
+[2026-09-15 23:39:25] Fix run.sh .env loading (spaces in values).
+
+Symptom: `./.env: line 19: g: command not found` — `source`-ing `.env` treated
+`SKU1_QTY=500 g` as the command `g` (same for `PRODUCT_NAME=E2E Test Product`).
+
+=== tests/e2e/run.sh ===
+- replaced `set -a; . ./.env; set +a` with a line-by-line loader that tolerates
+  unquoted spaces:
+      while IFS= read -r line || [ -n "$line" ]; do
+        line="${line%$'\r'}"
+        case "$line" in '' | '#'*) continue ;; esac
+        export "$line"
+      done < ./.env
+- header comment updated (read, not source)
+
+=== tests/e2e/.env.example ===
+- quoted space-containing values (PRODUCT_NAME, SKU1_QTY, SKU2_QTY) so it is also
+  safe to `source` directly.
+
+[2026-09-15 23:46:55] Fix add-product flow: scroll to fields + remove nested scroll on form screens.
+
+Symptom: Maestro failed with `Element not found: Id matching regex: variant-0-price`.
+Cause: ProductForm fields below the fold were never scrolled to; also add.tsx/edit.tsx
+wrapped ProductForm in AppContainer (KeyboardAwareScrollView) around ProductForm's own
+ScrollView — nested same-direction scrollers.
+
+=== apps/admin-ui/app/(drawer)/dashboard/products/add.tsx ===
+- import: `{ Alert }` from 'react-native' -> `{ Alert, View }`
+- import: `{ AppContainer, ImageUploaderNeoPayload }` -> `{ ImageUploaderNeoPayload, tw }`
+- render: `<AppContainer><ProductForm .../></AppContainer>` -> `<View style={tw`flex-1 bg-white`}>...</View>`
+
+=== apps/admin-ui/app/(drawer)/dashboard/products/edit.tsx ===
+- main render: `<AppContainer><ProductForm .../></AppContainer>` -> `<View style={tw`flex-1 bg-white`}>...</View>`
+  (loading/error states still use AppContainer; import kept)
+
+=== apps/admin-ui/src/components/ProductForm.tsx ===
+- ScrollView: contentContainerStyle `pb-10` -> `px-4 pt-4 pb-10` (padding moved off AppContainer)
+  + keyboardShouldPersistTaps="handled"
+
+=== tests/e2e/add-product.yaml ===
+- added scrollUntilVisible (direction DOWN, UP for add-variant-button) before every
+  field tap so off-screen inputs are scrolled into view.
+
+[2026-09-15 23:52:45] Harden the OS photo-picker subflow.
+
+Symptom: the picker opened and selected an image but never pressed "Add"
+(bottom-right), so it stayed open and the flow later failed on
+`No visible element found: id: create-product-button`.
+
+=== tests/e2e/subflows/pick-image.yaml ===
+- confirm step now tries, in order (all optional):
+    text regex '.*(Add|Done|Select|Open|OK).*'
+    id com.google.android.providers.media.module:id/button_add
+    id com.google.android.providers.media.module:id/button_done
+    id com.google.android.documentsui:id/button_add
+- added waitForAnimationToEnd after selecting the thumbnail
+- added a guarded last-resort tap: only when the app root is still not visible
+  (picker still open) tap point '90%,92%' (bottom-right)
+- added a final hard assertion `extendedWaitUntil visible id: app-root` so a
+  stuck picker fails here instead of confusingly at create-product-button
+
+[2026-09-15 23:53:46] Pin the picker confirm button to its real resource id.
+
+Confirmed from AOSP MediaProvider res/layout/activity_photo_picker.xml:
+  - thumbnail id: icon_thumbnail
+  - confirm id:   button_add (Button, text "Add", bottom-right of picker_bottom_bar)
+
+=== tests/e2e/subflows/pick-image.yaml ===
+- thumbnail taps: added AOSP package fallbacks
+    com.google.android.providers.media.module:id/icon_thumbnail
+    com.android.providers.media.module:id/icon_thumbnail
+    com.google.android.documentsui:id/thumbnail
+    com.android.documentsui:id/thumbnail
+- confirm taps now target the exact id first (Google + AOSP + documentsui):
+    ...providers.media.module:id/button_add
+- moved the text/coordinate fallbacks inside a `when: notVisible id: app-root`
+  guard so they can only run while the picker is still open (previously the text
+  regex could have tapped "Add Variant" in the app after the picker closed)
+
+
+
+
diff --git a/packages/ui/src/components/bottom-dropdown.tsx b/packages/ui/src/components/bottom-dropdown.tsx
index 0893ef7..b7a97df 100644
--- a/packages/ui/src/components/bottom-dropdown.tsx
+++ b/packages/ui/src/components/bottom-dropdown.tsx
@@ -212,6 +212,8 @@ const BottomDropdown: React.FC<BottomDropdownProps> = ({
               return (
                 <TouchableOpacity
                   key={option.value}
+                   testID={`${testID}-option-${option.value}`}
+                   accessibilityLabel={`${testID}-option-${option.value}`}
                    style={[
                      tw`px-4 py-3 rounded-md my-1 mx-2 flex-row items-center justify-between`,
                      selected ? { backgroundColor: colors.brand50 } : tw`bg-transparent`,
diff --git a/tests/e2e/.env.example b/tests/e2e/.env.example
new file mode 100644
index 0000000..24d3db3
--- /dev/null
+++ b/tests/e2e/.env.example
@@ -0,0 +1,28 @@
+# Copy this file to `tests/e2e/.env` and fill in real values.
+# `tests/e2e/run.sh` loads it. `.env` is gitignored.
+# Quote values that contain spaces (they are fine either way with run.sh).
+
+# App under test
+APP_ID=in.freshyo.adminui
+
+# Admin login (must exist on the target backend)
+STAFF_NAME=
+STAFF_PASSWORD=
+
+# Product under test. run.sh appends a timestamp so re-runs don't collide with
+# the backend's unique-name check.
+PRODUCT_NAME="E2E Test Product"
+
+# Id of the store to pick in the Store dropdown (see the Stores screen / DB)
+STORE_ID=1
+
+# Variant 1 (regular SKU)
+SKU1_QTY="500 g"
+SKU1_PRICE=199
+SKU1_MRP=249
+
+# Variant 2 (flash SKU)
+SKU2_QTY="1 kg"
+SKU2_PRICE=349
+SKU2_MRP=399
+SKU2_FLASH_PRICE=299
diff --git a/tests/e2e/README.md b/tests/e2e/README.md
new file mode 100644
index 0000000..1d50237
--- /dev/null
+++ b/tests/e2e/README.md
@@ -0,0 +1,62 @@
+# Admin E2E tests (Maestro)
+
+Maestro flows that drive the **admin-ui** Expo app on an Android emulator.
+
+## Layout
+
+```
+tests/e2e/
+  config.yaml            # workspace config (entry flows = *.yaml at the root)
+  add-product.yaml       # first flow: create a product with 2 SKUs (one flash)
+  subflows/
+    login.yaml           # reusable login
+    pick-image.yaml      # OS photo-picker adapter (Android)
+  assets/test-product.png  # seeded into the emulator gallery via `addMedia`
+  run.sh                 # sources .env and runs `maestro test`
+  .env.example           # copy to .env and fill in
+```
+
+## Prerequisites
+
+- Maestro CLI installed (`curl -Ls "https://get.maestro.mobile.dev" | bash`).
+- A booted Android emulator (`maestro start-device --platform android`, or Android Studio).
+- The admin-ui **dev build** installed on the emulator (`bun run --filter admin-ui android`, appId `in.freshyo.adminui`).
+- The build must be able to reach the backend (login + image upload hit the API/R2).
+
+## Setup
+
+```bash
+cp tests/e2e/.env.example tests/e2e/.env
+# edit tests/e2e/.env — at minimum STAFF_NAME, STAFF_PASSWORD, STORE_ID
+```
+
+## Run
+
+```bash
+bash tests/e2e/run.sh                 # every entry flow in tests/e2e/
+bash tests/e2e/run.sh add-product.yaml
+```
+
+`run.sh` appends a timestamp to `PRODUCT_NAME` (the backend rejects duplicate names).
+
+## What `add-product.yaml` does
+
+1. `addMedia` seeds `assets/test-product.png` into the emulator gallery.
+2. `launchApp` with `clearState: true` (forces login) and gallery permission.
+3. Logs in (subflow) and taps the `add-product-menu-item` quick action.
+4. Fills the product name and selects Store + Product Type.
+5. Variant 1: quantity, price, MRP, attaches an image.
+6. Adds Variant 2, fills quantity/prices, toggles **Flash Available**, sets flash price, attaches an image.
+7. Submits and asserts `Product created successfully!`.
+
+All in-app interactions use `testID` selectors (`id:`). The only exception is the
+OS photo picker, which is system UI and is targeted by its platform IDs in
+`subflows/pick-image.yaml`.
+
+## Notes / gotchas
+
+- The image picker flow is the most version-sensitive part; thumbs are targeted by
+  the Android 13/14 Photo Picker id with a DocumentsUI fallback, and the confirm
+  button by text regex `Add|Done|Select`.
+- On a reused emulator, `addMedia` images accumulate in the gallery (harmless).
+- Tests create real data on the connected backend.
diff --git a/tests/e2e/add-product.yaml b/tests/e2e/add-product.yaml
new file mode 100644
index 0000000..0ec3ba9
--- /dev/null
+++ b/tests/e2e/add-product.yaml
@@ -0,0 +1,169 @@
+appId: ${APP_ID || "in.freshyo.adminui"}
+env:
+  # Values are supplied via `-e` by run.sh. The inline `||` defaults let the
+  # flow run standalone against a dev build without run.sh.
+  APP_ID: ${APP_ID || "in.freshyo.adminui"}
+  STAFF_NAME: ${STAFF_NAME || ""}
+  STAFF_PASSWORD: ${STAFF_PASSWORD || ""}
+  PRODUCT_NAME: ${PRODUCT_NAME || "E2E Test Product"}
+  STORE_ID: ${STORE_ID || 1}
+  SKU1_QTY: ${SKU1_QTY || "500 g"}
+  SKU1_PRICE: ${SKU1_PRICE || "199"}
+  SKU1_MRP: ${SKU1_MRP || "249"}
+  SKU2_QTY: ${SKU2_QTY || "1 kg"}
+  SKU2_PRICE: ${SKU2_PRICE || "349"}
+  SKU2_MRP: ${SKU2_MRP || "399"}
+  SKU2_FLASH_PRICE: ${SKU2_FLASH_PRICE || "299"}
+tags:
+  - products
+  - smoke
+---
+# Seed the emulator gallery so the OS picker has an image to select.
+- addMedia:
+    - './assets/test-product.png'
+
+# Fresh state (logs out) + grant gallery access.
+- launchApp:
+    clearState: true
+    permissions:
+      storage: allow
+
+# --- Login ---
+- runFlow: subflows/login.yaml
+
+# --- Navigate to Add Product ---
+- tapOn:
+    id: add-product-menu-item
+- assertVisible:
+    id: product-name-input
+
+# --- Product level ---
+- tapOn:
+    id: product-name-input
+- inputText: ${PRODUCT_NAME}
+- hideKeyboard
+
+- scrollUntilVisible:
+    element:
+      id: product-store-dropdown
+    direction: DOWN
+- tapOn:
+    id: product-store-dropdown
+- tapOn:
+    id: product-store-dropdown-option-${STORE_ID}
+
+- scrollUntilVisible:
+    element:
+      id: product-type-dropdown
+    direction: DOWN
+- tapOn:
+    id: product-type-dropdown
+- tapOn:
+    id: product-type-dropdown-option-item
+
+# --- Variant 1 (regular) ---
+- scrollUntilVisible:
+    element:
+      id: variant-0-attr-0-value
+    direction: DOWN
+- tapOn:
+    id: variant-0-attr-0-value
+- inputText: ${SKU1_QTY}
+- hideKeyboard
+
+- scrollUntilVisible:
+    element:
+      id: variant-0-price
+    direction: DOWN
+- tapOn:
+    id: variant-0-price
+- inputText: ${SKU1_PRICE}
+- hideKeyboard
+
+- scrollUntilVisible:
+    element:
+      id: variant-0-market-price
+    direction: DOWN
+- tapOn:
+    id: variant-0-market-price
+- inputText: ${SKU1_MRP}
+- hideKeyboard
+
+- scrollUntilVisible:
+    element:
+      id: variant-0-image-add
+    direction: DOWN
+- tapOn:
+    id: variant-0-image-add
+- runFlow: subflows/pick-image.yaml
+
+# --- Add variant 2 (flash) ---
+- scrollUntilVisible:
+    element:
+      id: add-variant-button
+    direction: UP
+- tapOn:
+    id: add-variant-button
+
+- scrollUntilVisible:
+    element:
+      id: variant-1-attr-0-value
+    direction: DOWN
+- tapOn:
+    id: variant-1-attr-0-value
+- inputText: ${SKU2_QTY}
+- hideKeyboard
+
+- scrollUntilVisible:
+    element:
+      id: variant-1-price
+    direction: DOWN
+- tapOn:
+    id: variant-1-price
+- inputText: ${SKU2_PRICE}
+- hideKeyboard
+
+- scrollUntilVisible:
+    element:
+      id: variant-1-market-price
+    direction: DOWN
+- tapOn:
+    id: variant-1-market-price
+- inputText: ${SKU2_MRP}
+- hideKeyboard
+
+# Mark variant 2 as flash and set its flash price.
+- scrollUntilVisible:
+    element:
+      id: variant-1-flash
+    direction: DOWN
+- tapOn:
+    id: variant-1-flash
+
+- scrollUntilVisible:
+    element:
+      id: variant-1-flash-price
+    direction: DOWN
+- tapOn:
+    id: variant-1-flash-price
+- inputText: ${SKU2_FLASH_PRICE}
+- hideKeyboard
+
+- scrollUntilVisible:
+    element:
+      id: variant-1-image-add
+    direction: DOWN
+- tapOn:
+    id: variant-1-image-add
+- runFlow: subflows/pick-image.yaml
+
+# --- Submit ---
+- scrollUntilVisible:
+    element:
+      id: create-product-button
+    direction: DOWN
+- tapOn:
+    id: create-product-button
+
+- assertVisible: 'Product created successfully!'
+- tapOn: 'OK'
diff --git a/tests/e2e/assets/test-product.png b/tests/e2e/assets/test-product.png
new file mode 100755
index 0000000000000000000000000000000000000000..66fd9570e4fac42bca15352def191c563100b2ed
GIT binary patch
literal 5075
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

literal 0
HcmV?d00001

diff --git a/tests/e2e/config.yaml b/tests/e2e/config.yaml
new file mode 100644
index 0000000..c9b4859
--- /dev/null
+++ b/tests/e2e/config.yaml
@@ -0,0 +1,6 @@
+# Maestro workspace config for the root E2E suite.
+# Only YAML files in this folder are entry flows; `subflows/` is invoked
+# explicitly via runFlow and is intentionally not matched here.
+flows:
+  - '*.yaml'
+  - '!config.yaml'
diff --git a/tests/e2e/run.sh b/tests/e2e/run.sh
new file mode 100755
index 0000000..d04e320
--- /dev/null
+++ b/tests/e2e/run.sh
@@ -0,0 +1,57 @@
+#!/usr/bin/env bash
+#
+# Runs the Maestro E2E suite against a running Android emulator.
+#
+# Values come from tests/e2e/.env (copy .env.example first). Maestro's CLI does
+# not load .env files itself, so we read it here and forward each value with `-e`.
+#
+# Usage:
+#   bash tests/e2e/run.sh                 # run every entry flow in tests/e2e/
+#   bash tests/e2e/run.sh add-product.yaml
+set -euo pipefail
+cd "$(dirname "$0")"
+
+if [ ! -f .env ]; then
+  echo "Missing tests/e2e/.env — copy .env.example to .env and fill it in." >&2
+  exit 1
+fi
+
+# Load .env line-by-line instead of `source`-ing it, so values that contain
+# spaces (e.g. `SKU1_QTY=500 g`) work without needing quotes.
+while IFS= read -r line || [ -n "$line" ]; do
+  line="${line%$'\r'}" # tolerate CRLF
+  case "$line" in
+    '' | '#'*) continue ;;
+  esac
+  export "$line"
+done < ./.env
+
+: "${APP_ID:?APP_ID is required}"
+: "${STAFF_NAME:?STAFF_NAME is required}"
+: "${STAFF_PASSWORD:?STAFF_PASSWORD is required}"
+: "${PRODUCT_NAME:?PRODUCT_NAME is required}"
+: "${STORE_ID:?STORE_ID is required}"
+
+# Unique product name so repeat runs don't trip the backend's duplicate check.
+PRODUCT_NAME="${PRODUCT_NAME} $(date +%s)"
+export PRODUCT_NAME
+
+# Default to the whole suite when no path/tags are passed.
+if [ "$#" -eq 0 ]; then
+  set -- .
+fi
+
+maestro test \
+  -e APP_ID="$APP_ID" \
+  -e STAFF_NAME="$STAFF_NAME" \
+  -e STAFF_PASSWORD="$STAFF_PASSWORD" \
+  -e PRODUCT_NAME="$PRODUCT_NAME" \
+  -e STORE_ID="$STORE_ID" \
+  -e SKU1_QTY="${SKU1_QTY:-}" \
+  -e SKU1_PRICE="${SKU1_PRICE:-}" \
+  -e SKU1_MRP="${SKU1_MRP:-}" \
+  -e SKU2_QTY="${SKU2_QTY:-}" \
+  -e SKU2_PRICE="${SKU2_PRICE:-}" \
+  -e SKU2_MRP="${SKU2_MRP:-}" \
+  -e SKU2_FLASH_PRICE="${SKU2_FLASH_PRICE:-}" \
+  "$@"
diff --git a/tests/e2e/subflows/login.yaml b/tests/e2e/subflows/login.yaml
new file mode 100644
index 0000000..d8753e4
--- /dev/null
+++ b/tests/e2e/subflows/login.yaml
@@ -0,0 +1,20 @@
+appId: ${APP_ID || "in.freshyo.adminui"}
+env:
+  STAFF_NAME: ${STAFF_NAME || ""}
+  STAFF_PASSWORD: ${STAFF_PASSWORD || ""}
+---
+# Logs into the admin app. Reused by other flows via `runFlow: subflows/login.yaml`.
+- assertVisible:
+    id: login-name-input
+- tapOn:
+    id: login-name-input
+- inputText: ${STAFF_NAME}
+- tapOn:
+    id: login-password-input
+- inputText: ${STAFF_PASSWORD}
+- hideKeyboard
+- tapOn:
+    id: login-button
+# Dashboard quick actions are only rendered once the drawer shell is up.
+- assertVisible:
+    id: add-product-menu-item
diff --git a/tests/e2e/subflows/pick-image.yaml b/tests/e2e/subflows/pick-image.yaml
new file mode 100644
index 0000000..147021d
--- /dev/null
+++ b/tests/e2e/subflows/pick-image.yaml
@@ -0,0 +1,79 @@
+appId: ${APP_ID || "in.freshyo.adminui"}
+---
+# Android system picker adapter.
+#
+# The picker is OS-level UI in a separate window, so it cannot be targeted with
+# app testIDs. Selectors here are system ids/text, and every step is `optional`
+# so different OS versions fall through until one matches.
+#
+# Confirmed from AOSP MediaProvider (activity_photo_picker.xml):
+#   thumbnail : @id/icon_thumbnail
+#   confirm   : @id/button_add  (Button, text "Add", bottom-right)
+# The provider package is `com.google.android.providers.media.module` on Google
+# Play images and `com.android.providers.media.module` on AOSP images.
+- runFlow:
+    when:
+      platform: Android
+    commands:
+      # Runtime permission prompt (older Android / first launch).
+      - tapOn:
+          text: 'Allow'
+          optional: true
+
+      # Select the first thumbnail: Android 13/14 Photo Picker, then the older
+      # DocumentsUI gallery.
+      - tapOn:
+          id: 'com.google.android.providers.media.module:id/icon_thumbnail'
+          index: 0
+          optional: true
+      - tapOn:
+          id: 'com.android.providers.media.module:id/icon_thumbnail'
+          index: 0
+          optional: true
+      - tapOn:
+          id: 'com.google.android.documentsui:id/thumbnail'
+          index: 0
+          optional: true
+      - tapOn:
+          id: 'com.android.documentsui:id/thumbnail'
+          index: 0
+          optional: true
+
+      - waitForAnimationToEnd
+
+      # Confirm the selection by its exact id.
+      - tapOn:
+          id: 'com.google.android.providers.media.module:id/button_add'
+          optional: true
+      - tapOn:
+          id: 'com.android.providers.media.module:id/button_add'
+          optional: true
+      - tapOn:
+          id: 'com.google.android.documentsui:id/button_add'
+          optional: true
+
+      # Give the picker a moment to close.
+      - extendedWaitUntil:
+          visible:
+            id: app-root
+          timeout: 3000
+          optional: true
+
+      # Fallbacks run ONLY while the picker is still open (app root not visible),
+      # so they can never tap in-app controls like "Add Variant".
+      - runFlow:
+          when:
+            notVisible:
+              id: app-root
+          commands:
+            - tapOn:
+                text: '.*(Add|Done|Select|Open|OK).*'
+                optional: true
+            - tapOn:
+                point: '90%,92%'
+
+# The picker must be closed before the rest of the flow can continue.
+- extendedWaitUntil:
+    visible:
+      id: app-root
+    timeout: 15000