@open-mercato/core 0.5.1-develop.2953.6647bb2c43 → 0.5.1-develop.2964.d5ac4a6ebb

package/src/modules/workflows/components/TransitionsEditor.tsx

@@ -4,6 +4,13 @@ import * as React from 'react'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Input } from '@open-mercato/ui/primitives/input'
 import { Label } from '@open-mercato/ui/primitives/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { Textarea } from '@open-mercato/ui/primitives/textarea'
 import { Trash2, Plus, ChevronUp, ChevronDown } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
@@ -254,54 +261,61 @@ export function TransitionsEditor({ value = [], onChange, steps = [], error }: T
                   <Label htmlFor={`transition-${index}-from`} className="text-xs">
                     {t('workflows.transitions.fromStep')} *
                   </Label>
-                  <select
-                    id={`transition-${index}-from`}
-                    value={transition.fromStepId}
-                    onChange={(e) => updateTransition(index, 'fromStepId', e.target.value)}
-                    className="mt-1 w-full px-3 py-2 border border-border rounded-md text-sm"
+                  <Select
+                    value={transition.fromStepId || undefined}
+                    onValueChange={(value) => updateTransition(index, 'fromStepId', value ?? '')}
                   >
-                    <option value="">{t('workflows.form.selectStep')}</option>
-                    {steps.map((step: any) => (
-                      <option key={step.stepId} value={step.stepId}>
-                        {step.stepName || step.stepId}
-                      </option>
-                    ))}
-                  </select>
+                    <SelectTrigger id={`transition-${index}-from`} className="mt-1">
+                      <SelectValue placeholder={t('workflows.form.selectStep')} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {steps.map((step: any) => (
+                        <SelectItem key={step.stepId} value={step.stepId}>
+                          {step.stepName || step.stepId}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
                 </div>
                 <div>
                   <Label htmlFor={`transition-${index}-to`} className="text-xs">
                     {t('workflows.transitions.toStep')} *
                   </Label>
-                  <select
-                    id={`transition-${index}-to`}
-                    value={transition.toStepId}
-                    onChange={(e) => updateTransition(index, 'toStepId', e.target.value)}
-                    className="mt-1 w-full px-3 py-2 border border-border rounded-md text-sm"
+                  <Select
+                    value={transition.toStepId || undefined}
+                    onValueChange={(value) => updateTransition(index, 'toStepId', value ?? '')}
                   >
-                    <option value="">{t('workflows.form.selectStep')}</option>
-                    {steps.map((step: any) => (
-                      <option key={step.stepId} value={step.stepId}>
-                        {step.stepName || step.stepId}
-                      </option>
-                    ))}
-                  </select>
+                    <SelectTrigger id={`transition-${index}-to`} className="mt-1">
+                      <SelectValue placeholder={t('workflows.form.selectStep')} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {steps.map((step: any) => (
+                        <SelectItem key={step.stepId} value={step.stepId}>
+                          {step.stepName || step.stepId}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
                 </div>
                 <div>
                   <Label htmlFor={`transition-${index}-trigger`} className="text-xs">
                     {t('workflows.transitions.trigger')} *
                   </Label>
-                  <select
-                    id={`transition-${index}-trigger`}
+                  <Select
                     value={transition.trigger}
-                    onChange={(e) => updateTransition(index, 'trigger', e.target.value)}
-                    className="mt-1 w-full px-3 py-2 border border-border rounded-md text-sm"
+                    onValueChange={(value) => updateTransition(index, 'trigger', value)}
                   >
-                    {TRIGGER_TYPES.map((type) => (
-                      <option key={type.value} value={type.value}>
-                        {t(`workflows.transitions.triggers.${type.value}`)}
-                      </option>
-                    ))}
-                  </select>
+                    <SelectTrigger id={`transition-${index}-trigger`} className="mt-1">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {TRIGGER_TYPES.map((type) => (
+                        <SelectItem key={type.value} value={type.value}>
+                          {t(`workflows.transitions.triggers.${type.value}`)}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
                 </div>
               </div>
 
@@ -424,18 +438,21 @@ export function TransitionsEditor({ value = [], onChange, steps = [], error }: T
                             <Label htmlFor={`activity-${index}-${activityIndex}-type`} className="text-xs">
                               {t('workflows.activities.activityType')} *
                             </Label>
-                            <select
-                              id={`activity-${index}-${activityIndex}-type`}
+                            <Select
                               value={activity.activityType}
-                              onChange={(e) => updateActivity(index, activityIndex, 'activityType', e.target.value)}
-                              className="mt-1 w-full px-2 py-1 border border-border rounded-md text-xs h-8"
+                              onValueChange={(value) => updateActivity(index, activityIndex, 'activityType', value)}
                             >
-                              {ACTIVITY_TYPES.map((type) => (
-                                <option key={type.value} value={type.value}>
-                                  {t(`workflows.activities.types.${type.value}`)}
-                                </option>
-                              ))}
-                            </select>
+                              <SelectTrigger id={`activity-${index}-${activityIndex}-type`} size="sm" className="mt-1">
+                                <SelectValue />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {ACTIVITY_TYPES.map((type) => (
+                                  <SelectItem key={type.value} value={type.value}>
+                                    {t(`workflows.activities.types.${type.value}`)}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
                           </div>
                           <div>
                             <Label htmlFor={`activity-${index}-${activityIndex}-timeout`} className="text-xs">

package/src/modules/workflows/components/fields/ActivityArrayEditor.tsx

@@ -6,6 +6,13 @@ import { Button } from '@open-mercato/ui/primitives/button'
 import { Badge } from '@open-mercato/ui/primitives/badge'
 import { Input } from '@open-mercato/ui/primitives/input'
 import { Label } from '@open-mercato/ui/primitives/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { ChevronDown, Plus, Trash2 } from 'lucide-react'
 import { JsonBuilder } from '@open-mercato/ui/backend/JsonBuilder'
 import type { CrudCustomFieldRenderProps } from '@open-mercato/ui/backend/CrudForm'
@@ -216,21 +223,24 @@ export function ActivityArrayEditor({ id, value = [], error, setValue, disabled
                       <Label htmlFor={`${id}-${index}-activityType`} className="text-xs font-medium mb-1">
                         {t('workflows.fieldEditors.activities.activityType')} *
                       </Label>
-                      <select
-                        id={`${id}-${index}-activityType`}
+                      <Select
                         value={activity.activityType}
-                        onChange={(e) => updateActivity(index, 'activityType', e.target.value)}
-                        className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-xs shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                        onValueChange={(value) => updateActivity(index, 'activityType', value)}
                         disabled={disabled}
                       >
-                        <option value="SEND_EMAIL">{t('workflows.activities.types.SEND_EMAIL')}</option>
-                        <option value="CALL_API">{t('workflows.activities.types.CALL_API')}</option>
-                        <option value="UPDATE_ENTITY">{t('workflows.activities.types.UPDATE_ENTITY')}</option>
-                        <option value="EMIT_EVENT">{t('workflows.activities.types.EMIT_EVENT')}</option>
-                        <option value="CALL_WEBHOOK">{t('workflows.activities.types.CALL_WEBHOOK')}</option>
-                        <option value="EXECUTE_FUNCTION">{t('workflows.activities.types.EXECUTE_FUNCTION')}</option>
-                        <option value="WAIT">{t('workflows.activities.types.WAIT')}</option>
-                      </select>
+                        <SelectTrigger id={`${id}-${index}-activityType`}>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="SEND_EMAIL">{t('workflows.activities.types.SEND_EMAIL')}</SelectItem>
+                          <SelectItem value="CALL_API">{t('workflows.activities.types.CALL_API')}</SelectItem>
+                          <SelectItem value="UPDATE_ENTITY">{t('workflows.activities.types.UPDATE_ENTITY')}</SelectItem>
+                          <SelectItem value="EMIT_EVENT">{t('workflows.activities.types.EMIT_EVENT')}</SelectItem>
+                          <SelectItem value="CALL_WEBHOOK">{t('workflows.activities.types.CALL_WEBHOOK')}</SelectItem>
+                          <SelectItem value="EXECUTE_FUNCTION">{t('workflows.activities.types.EXECUTE_FUNCTION')}</SelectItem>
+                          <SelectItem value="WAIT">{t('workflows.activities.types.WAIT')}</SelectItem>
+                        </SelectContent>
+                      </Select>
                     </div>
 
                     {/* Timeout */}

package/src/modules/workflows/components/fields/BusinessRuleConditionsEditor.tsx

@@ -4,14 +4,13 @@ import { useState, useEffect } from 'react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Badge } from '@open-mercato/ui/primitives/badge'
-import { Label } from '@open-mercato/ui/primitives/label'
 import { Plus, Trash2, AlertCircle } from 'lucide-react'
 import type { CrudCustomFieldRenderProps } from '@open-mercato/ui/backend/CrudForm'
 import { BusinessRulesSelector, type BusinessRule } from '../BusinessRulesSelector'
 import { apiFetch } from '@open-mercato/ui/backend/utils/api'
 import { EmptyState } from '@open-mercato/ui/backend/EmptyState'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
-import { Switch } from '@open-mercato/ui/primitives/switch'
+import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
 import { ConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
 
 /**
@@ -219,17 +218,14 @@ export function BusinessRuleConditionsEditor({
                     </div>
 
                     {/* Required Toggle */}
-                    <div className="flex items-center gap-2">
-                      <Switch
-                        id={`${id}-${index}-required`}
-                        checked={normalized.required}
-                        onCheckedChange={() => toggleRequired(index)}
-                        disabled={disabled}
-                      />
-                      <Label htmlFor={`${id}-${index}-required`} className="text-xs font-medium cursor-pointer">
-                        {t('workflows.fieldEditors.businessRuleConditions.requiredLabel')}
-                      </Label>
-                    </div>
+                    <SwitchField
+                      id={`${id}-${index}-required`}
+                      label={t('workflows.fieldEditors.businessRuleConditions.requiredLabel')}
+                      flip
+                      checked={normalized.required}
+                      onCheckedChange={() => toggleRequired(index)}
+                      disabled={disabled}
+                    />
                   </div>
 
                   {/* Delete Button */}

package/src/modules/workflows/components/fields/FormFieldArrayEditor.tsx

@@ -7,6 +7,13 @@ import { Button } from '@open-mercato/ui/primitives/button'
 import { Badge } from '@open-mercato/ui/primitives/badge'
 import { Input } from '@open-mercato/ui/primitives/input'
 import { Label } from '@open-mercato/ui/primitives/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'
 import { ChevronDown, Plus, Trash2, Info } from 'lucide-react'
 import type { CrudCustomFieldRenderProps } from '@open-mercato/ui/backend/CrudForm'
@@ -217,26 +224,29 @@ export function FormFieldArrayEditor({
                       <Label htmlFor={`${id}-${index}-type`} className="text-xs font-medium mb-1">
                         {t('workflows.fieldEditors.formFields.fieldType')} *
                       </Label>
-                      <select
-                        id={`${id}-${index}-type`}
+                      <Select
                         value={field.type}
-                        onChange={(e) => updateFormField(index, 'type', e.target.value)}
-                        className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-xs shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                        onValueChange={(value) => updateFormField(index, 'type', value)}
                         disabled={disabled}
                       >
-                        <option value="text">{t('workflows.form.fieldTypes.text')}</option>
-                        <option value="number">{t('workflows.form.fieldTypes.number')}</option>
-                        <option value="email">{t('workflows.form.fieldTypes.email')}</option>
-                        <option value="tel">{t('workflows.form.fieldTypes.tel')}</option>
-                        <option value="url">{t('workflows.form.fieldTypes.url')}</option>
-                        <option value="textarea">{t('workflows.form.fieldTypes.textarea')}</option>
-                        <option value="select">{t('workflows.form.fieldTypes.select')}</option>
-                        <option value="radio">{t('workflows.form.fieldTypes.radio')}</option>
-                        <option value="checkbox">{t('workflows.form.fieldTypes.checkbox')}</option>
-                        <option value="date">{t('workflows.form.fieldTypes.date')}</option>
-                        <option value="time">{t('workflows.form.fieldTypes.time')}</option>
-                        <option value="datetime-local">{t('workflows.form.fieldTypes.datetime-local')}</option>
-                      </select>
+                        <SelectTrigger id={`${id}-${index}-type`}>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="text">{t('workflows.form.fieldTypes.text')}</SelectItem>
+                          <SelectItem value="number">{t('workflows.form.fieldTypes.number')}</SelectItem>
+                          <SelectItem value="email">{t('workflows.form.fieldTypes.email')}</SelectItem>
+                          <SelectItem value="tel">{t('workflows.form.fieldTypes.tel')}</SelectItem>
+                          <SelectItem value="url">{t('workflows.form.fieldTypes.url')}</SelectItem>
+                          <SelectItem value="textarea">{t('workflows.form.fieldTypes.textarea')}</SelectItem>
+                          <SelectItem value="select">{t('workflows.form.fieldTypes.select')}</SelectItem>
+                          <SelectItem value="radio">{t('workflows.form.fieldTypes.radio')}</SelectItem>
+                          <SelectItem value="checkbox">{t('workflows.form.fieldTypes.checkbox')}</SelectItem>
+                          <SelectItem value="date">{t('workflows.form.fieldTypes.date')}</SelectItem>
+                          <SelectItem value="time">{t('workflows.form.fieldTypes.time')}</SelectItem>
+                          <SelectItem value="datetime-local">{t('workflows.form.fieldTypes.datetime-local')}</SelectItem>
+                        </SelectContent>
+                      </Select>
                     </div>
 
                     {/* Placeholder */}

package/src/modules/workflows/components/fields/StartPreConditionsEditor.tsx

@@ -11,7 +11,7 @@ import { BusinessRulesSelector, type BusinessRule } from '../BusinessRulesSelect
 import { apiFetch } from '@open-mercato/ui/backend/utils/api'
 import { EmptyState } from '@open-mercato/ui/backend/EmptyState'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
-import { Switch } from '@open-mercato/ui/primitives/switch'
+import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
 import { ConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
 
 /**
@@ -341,17 +341,14 @@ export function StartPreConditionsEditor({
               </div>
 
               {/* Required toggle */}
-              <div className="flex items-center gap-2">
-                <Switch
-                  id={`precondition-${index}-required`}
-                  checked={conditions[index]?.required ?? true}
-                  onCheckedChange={(checked) => updateCondition(index, { required: checked })}
-                  disabled={disabled}
-                />
-                <Label htmlFor={`precondition-${index}-required`} className="text-xs font-medium cursor-pointer">
-                  {t('workflows.fieldEditors.preConditions.requiredLabel')}
-                </Label>
-              </div>
+              <SwitchField
+                id={`precondition-${index}-required`}
+                label={t('workflows.fieldEditors.preConditions.requiredLabel')}
+                flip
+                checked={conditions[index]?.required ?? true}
+                onCheckedChange={(checked) => updateCondition(index, { required: checked })}
+                disabled={disabled}
+              />
 
               {/* Validation Messages */}
               <div>

package/src/modules/workflows/components/mobile/MobileTaskForm.tsx

@@ -7,6 +7,13 @@ import { Input } from '@open-mercato/ui/primitives/input'
 import { Textarea } from '@open-mercato/ui/primitives/textarea'
 import { Checkbox } from '@open-mercato/ui/primitives/checkbox'
 import { Label } from '@open-mercato/ui/primitives/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { Separator } from '@open-mercato/ui/primitives/separator'
 import { JsonDisplay } from '@open-mercato/ui/backend/JsonDisplay'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
@@ -63,18 +70,19 @@ export function MobileTaskForm({
             {required && <span className="text-status-error-text ml-1">*</span>}
           </Label>
           {fieldDescription && <p className="text-xs text-muted-foreground">{fieldDescription}</p>}
-          <select
-            id={fieldName}
-            value={fieldValue(fieldName)}
-            onChange={(e) => onFieldChange(fieldName, e.target.value)}
-            required={required}
-            className="w-full h-11 px-3 py-2 border border-border rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring text-base"
+          <Select
+            value={fieldValue(fieldName) ? String(fieldValue(fieldName)) : undefined}
+            onValueChange={(value) => onFieldChange(fieldName, value ?? '')}
           >
-            <option value="">{t('workflows.tasks.detail.form.selectOption')}</option>
-            {enumValues.map((value: string) => (
-              <option key={value} value={value}>{value}</option>
-            ))}
-          </select>
+            <SelectTrigger id={fieldName} size="lg" aria-required={required}>
+              <SelectValue placeholder={t('workflows.tasks.detail.form.selectOption')} />
+            </SelectTrigger>
+            <SelectContent>
+              {enumValues.map((value: string) => (
+                <SelectItem key={value} value={value}>{value}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </div>
       )
     }

package/src/modules/workflows/frontend/checkout-demo/page.tsx

@@ -2,6 +2,14 @@
 
 import { useState, useEffect, useCallback } from 'react'
 import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import Link from 'next/link'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
@@ -726,20 +734,21 @@ export default function CheckoutDemoPage() {
           {fieldDescription && (
             <p className="text-xs text-gray-500 mb-1">{fieldDescription}</p>
           )}
-          <select
-            id={fieldName}
-            value={formData[fieldName] || ''}
-            onChange={(e) => handleFieldChange(fieldName, e.target.value)}
-            required={required}
-            className={inputClasses}
+          <Select
+            value={(formData[fieldName] as string) || undefined}
+            onValueChange={(value) => handleFieldChange(fieldName, value ?? '')}
           >
-            <option value="">{t('workflows.checkoutDemo.formField.selectOption', '-- Select an option --')}</option>
-            {enumValues.map((value: any) => (
-              <option key={value} value={value}>
-                {value}
-              </option>
-            ))}
-          </select>
+            <SelectTrigger id={fieldName} className={inputClasses} aria-required={required}>
+              <SelectValue placeholder={t('workflows.checkoutDemo.formField.selectOption', '-- Select an option --')} />
+            </SelectTrigger>
+            <SelectContent>
+              {enumValues.map((value: any) => (
+                <SelectItem key={value} value={value}>
+                  {value}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </div>
       )
     }
@@ -757,13 +766,12 @@ export default function CheckoutDemoPage() {
               {fieldDescription && (
                 <p className="text-xs text-gray-500 mb-1">{fieldDescription}</p>
               )}
-              <input
+              <Input
                 type="email"
                 id={fieldName}
                 value={formData[fieldName] || ''}
                 onChange={(e) => handleFieldChange(fieldName, e.target.value)}
                 required={required}
-                className={inputClasses}
               />
             </div>
           )
@@ -819,13 +827,12 @@ export default function CheckoutDemoPage() {
             {fieldDescription && (
               <p className="text-xs text-gray-500 mb-1">{fieldDescription}</p>
             )}
-            <input
+            <Input
               type="text"
               id={fieldName}
               value={formData[fieldName] || ''}
               onChange={(e) => handleFieldChange(fieldName, e.target.value)}
               required={required}
-              className={inputClasses}
             />
           </div>
         )
@@ -841,14 +848,13 @@ export default function CheckoutDemoPage() {
             {fieldDescription && (
               <p className="text-xs text-gray-500 mb-1">{fieldDescription}</p>
             )}
-            <input
+            <Input
               type="number"
               id={fieldName}
               value={formData[fieldName] || ''}
               onChange={(e) => handleFieldChange(fieldName, e.target.value ? Number(e.target.value) : '')}
               required={required}
               step={fieldType === 'integer' ? 1 : 'any'}
-              className={inputClasses}
             />
           </div>
         )
@@ -885,13 +891,12 @@ export default function CheckoutDemoPage() {
             {fieldDescription && (
               <p className="text-xs text-gray-500 mb-1">{fieldDescription}</p>
             )}
-            <input
+            <Input
               type="text"
               id={fieldName}
               value={formData[fieldName] || ''}
               onChange={(e) => handleFieldChange(fieldName, e.target.value)}
               required={required}
-              className={inputClasses}
             />
           </div>
         )
@@ -937,34 +942,39 @@ export default function CheckoutDemoPage() {
                     </div>
                   ) : (
                     <>
-                      <select
-                        id="customer-select"
-                        value={selectedCustomerId}
-                        onChange={(e) => setSelectedCustomerId(e.target.value)}
-                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring text-sm"
+                      <Select
+                        value={selectedCustomerId || undefined}
+                        onValueChange={(value) => setSelectedCustomerId(value ?? '')}
                       >
-                        <option value="">{t('workflows.checkoutDemo.customer.selectPlaceholder', '-- Select a customer --')}</option>
-                        {customers.map((customer: any) => (
-                          <option key={customer.id} value={customer.id}>
-                            {customer.display_name || customer.id}
-                          </option>
-                        ))}
-                      </select>
+                        <SelectTrigger id="customer-select">
+                          <SelectValue placeholder={t('workflows.checkoutDemo.customer.selectPlaceholder', '-- Select a customer --')} />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {customers.map((customer: any) => (
+                            <SelectItem key={customer.id} value={customer.id}>
+                              {customer.display_name || customer.id}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
                       <div className="mt-2">
                         <label htmlFor="currency-select" className="block text-xs font-medium text-gray-600 mb-1">
                           {t('workflows.checkoutDemo.currency.label', 'Currency')}
                         </label>
-                        <select
-                          id="currency-select"
+                        <Select
                           value={selectedCurrency}
-                          onChange={(e) => setSelectedCurrency(e.target.value)}
-                          className="w-full px-3 py-2 border border-gray-300 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring text-sm"
+                          onValueChange={(value) => setSelectedCurrency(value)}
                         >
-                          <option value="USD">USD - US Dollar</option>
-                          <option value="EUR">EUR - Euro</option>
-                          <option value="GBP">GBP - British Pound</option>
-                          <option value="PLN">PLN - Polish Zloty</option>
-                        </select>
+                          <SelectTrigger id="currency-select">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="USD">USD - US Dollar</SelectItem>
+                            <SelectItem value="EUR">EUR - Euro</SelectItem>
+                            <SelectItem value="GBP">GBP - British Pound</SelectItem>
+                            <SelectItem value="PLN">PLN - Polish Zloty</SelectItem>
+                          </SelectContent>
+                        </Select>
                       </div>
                     </>
                   )}
@@ -986,33 +996,34 @@ export default function CheckoutDemoPage() {
                     </div>
                   ) : (
                     <div className="space-y-2">
-                      <select
-                        id="product-select"
-                        onChange={(e) => {
-                          const product = products.find((p: any) => p.id === e.target.value)
+                      <Select
+                        value={undefined}
+                        onValueChange={(value) => {
+                          const product = products.find((p: any) => p.id === value)
                           if (product) {
                             addToCart({
                               id: product.id,
                               title: product.title || product.display_name || 'Untitled Product',
                               pricing: product.pricing || null,
                             })
-                            e.target.value = '' // Reset selection
                           }
                         }}
-                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring text-sm"
-                        value=""
                       >
-                        <option value="">{t('workflows.checkoutDemo.product.selectPlaceholder', '-- Select a product to add --')}</option>
-                        {products.map((product: any) => {
-                          const basePrice = product.pricing?.unit_price_gross || product.pricing?.unit_price_net || 99.99
-                          const displayPrice = (basePrice * exchangeRate).toFixed(2)
-                          return (
-                            <option key={product.id} value={product.id}>
-                              {product.title || product.display_name || 'Untitled'} - {currencySymbol}{displayPrice}
-                            </option>
-                          )
-                        })}
-                      </select>
+                        <SelectTrigger id="product-select">
+                          <SelectValue placeholder={t('workflows.checkoutDemo.product.selectPlaceholder', '-- Select a product to add --')} />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {products.map((product: any) => {
+                            const basePrice = product.pricing?.unit_price_gross || product.pricing?.unit_price_net || 99.99
+                            const displayPrice = (basePrice * exchangeRate).toFixed(2)
+                            return (
+                              <SelectItem key={product.id} value={product.id}>
+                                {product.title || product.display_name || 'Untitled'} - {currencySymbol}{displayPrice}
+                              </SelectItem>
+                            )
+                          })}
+                        </SelectContent>
+                      </Select>
                       {cart.length === 0 && (
                         <p className="text-xs text-gray-500 mt-1">
                           {t('workflows.checkoutDemo.cart.selectHint', 'Select products from the dropdown to add them to your cart')}