@repzo/widget-react-native 1.0.0

package/src/ui/components/AgentUiBlocks.tsx

@@ -0,0 +1,912 @@
+/**
+ * Renders agent-authored rich blocks (product cards, slot pickers, lead forms,
+ * quotes, receipts) and posts the visitor's choice back through
+ * `POST /api/widget/messages` as an `agentUiAction`.
+ * Port of `client/src/widget/components/AgentUiBlocks.tsx`.
+ */
+
+import { createContext, useContext, useState } from 'react';
+import { Image, Pressable, StyleSheet, Text, TextInput, View, type ViewStyle } from 'react-native';
+
+import type { AgentUiAction, AgentUiBlock } from '../../types';
+import { fontSize, palette, radius, shadows, spacing, withAlpha } from '../styles/theme';
+
+export interface AgentUiBlockLabels {
+  service: string;
+  product: string;
+  chooseTime: string;
+  professional: string;
+  priceOffer: string;
+  working: string;
+}
+
+const DEFAULT_BLOCK_LABELS: AgentUiBlockLabels = {
+  service: 'Service',
+  product: 'Product',
+  chooseTime: 'Choose a time',
+  professional: 'Professional',
+  priceOffer: 'Price offer',
+  working: 'Working...',
+};
+
+const BlockLabelContext = createContext<AgentUiBlockLabels>(DEFAULT_BLOCK_LABELS);
+
+interface AgentUiBlocksProps {
+  blocks: AgentUiBlock[];
+  color: string;
+  labels?: AgentUiBlockLabels;
+  onAction: (action: AgentUiAction) => void | Promise<void>;
+}
+
+export function AgentUiBlocks({
+  blocks,
+  color,
+  labels = DEFAULT_BLOCK_LABELS,
+  onAction,
+}: AgentUiBlocksProps) {
+  const [selectedVariants, setSelectedVariants] = useState<Record<string, string>>({});
+  const [consents, setConsents] = useState<Record<string, boolean>>({});
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [selectedSlots, setSelectedSlots] = useState<Record<string, string>>({});
+  const [pending, setPending] = useState<string | null>(null);
+
+  const requiredConsent = blocks.filter((block) => block.type === 'consent' && block.required);
+  const consentGranted = requiredConsent.every((block) => consents[block.id]);
+
+  const act = async (action: AgentUiAction) => {
+    if (pending) return;
+    const productId =
+      typeof action.payload.productId === 'string' ? action.payload.productId : undefined;
+    const nextAction =
+      productId && selectedVariants[productId]
+        ? { ...action, payload: { ...action.payload, variantId: selectedVariants[productId] } }
+        : action;
+    setPending(action.id);
+    try {
+      await onAction(nextAction);
+    } finally {
+      setPending(null);
+    }
+  };
+
+  return (
+    <BlockLabelContext.Provider value={labels}>
+      <View style={styles.stack}>
+        {blocks.map((block) => {
+          if (block.type === 'product_service_card') {
+            return (
+              <View key={block.id} style={styles.card}>
+                {block.product.imageUrl ? (
+                  <Image
+                    source={{ uri: block.product.imageUrl }}
+                    style={styles.cardImage}
+                    resizeMode="cover"
+                    accessibilityIgnoresInvertColors
+                  />
+                ) : null}
+                <View style={styles.cardBody}>
+                  <View style={styles.rowStart}>
+                    <View style={styles.flexMin}>
+                      <Text style={styles.title}>{block.product.name}</Text>
+                      <Text style={styles.description}>
+                        {block.product.shortDescription || block.product.description || ''}
+                      </Text>
+                    </View>
+                    <Badge
+                      label={block.product.type === 'service' ? labels.service : labels.product}
+                    />
+                  </View>
+                  <View style={styles.row}>
+                    <Text style={styles.muted}>
+                      {block.product.durationMinutes
+                        ? `${block.product.durationMinutes} min`
+                        : block.product.unit || ''}
+                    </Text>
+                    <Text style={styles.price}>
+                      {formatMoney(block.product.price, block.product.currency)}
+                    </Text>
+                  </View>
+                </View>
+              </View>
+            );
+          }
+
+          if (block.type === 'product_choices') {
+            const selected =
+              selectedVariants[block.productId] ||
+              block.variants.find((variant) => variant.available)?.id ||
+              '';
+            return (
+              <View key={block.id} style={[styles.card, styles.cardPadded]}>
+                <Text style={styles.title}>{block.title}</Text>
+                <View style={styles.chipRow}>
+                  {block.variants.map((variant) => (
+                    <Chip
+                      key={variant.id}
+                      selected={selected === variant.id}
+                      disabled={!variant.available}
+                      color={color}
+                      onPress={() =>
+                        setSelectedVariants((current) => ({
+                          ...current,
+                          [block.productId]: variant.id,
+                        }))
+                      }
+                      label={variant.title}
+                      sublabel={formatMoney(variant.price, variant.currency)}
+                    />
+                  ))}
+                </View>
+              </View>
+            );
+          }
+
+          if (block.type === 'commerce_actions') {
+            return (
+              <View key={block.id} style={styles.actionRow}>
+                {block.actions.map((action, index) => (
+                  <View key={action.id} style={styles.actionCell}>
+                    <ActionButton
+                      color={color}
+                      secondary={index === 0 && block.actions.length > 1}
+                      pending={pending === action.id}
+                      onPress={() => act(action)}>
+                      {action.label}
+                    </ActionButton>
+                  </View>
+                ))}
+              </View>
+            );
+          }
+
+          if (block.type === 'cart_order_summary') {
+            return (
+              <View key={block.id} style={[styles.card, styles.cardPadded]}>
+                <View style={styles.rowStart}>
+                  <Text style={styles.title}>{block.title}</Text>
+                  {block.status ? <Badge label={block.status} /> : null}
+                </View>
+                <View style={styles.itemList}>
+                  {block.items.map((item, index) => (
+                    <View key={`${item.name}:${index}`} style={styles.row}>
+                      <View style={styles.flexMin}>
+                        <Text style={styles.itemName}>{item.name}</Text>
+                        <Text style={styles.muted}>
+                          {item.quantity} × {formatMoney(item.unitPrice, block.currency)}
+                        </Text>
+                      </View>
+                      <Text style={styles.itemTotal}>
+                        {formatMoney(item.lineTotal, block.currency)}
+                      </Text>
+                    </View>
+                  ))}
+                </View>
+                <View style={styles.totals}>
+                  <MoneyRow label="Subtotal" value={formatMoney(block.subtotal, block.currency)} />
+                  {block.discount ? (
+                    <MoneyRow
+                      label="Discount"
+                      value={`−${formatMoney(block.discount, block.currency)}`}
+                    />
+                  ) : null}
+                  {block.tax ? (
+                    <MoneyRow label="Tax" value={formatMoney(block.tax, block.currency)} />
+                  ) : null}
+                  {block.shipping ? (
+                    <MoneyRow
+                      label="Shipping"
+                      value={formatMoney(block.shipping, block.currency)}
+                    />
+                  ) : null}
+                  <MoneyRow label="Total" value={formatMoney(block.total, block.currency)} strong />
+                </View>
+                {block.action ? (
+                  <View style={styles.blockAction}>
+                    <ActionButton
+                      color={color}
+                      pending={pending === block.action.id}
+                      onPress={() => block.action && act(block.action)}>
+                      {block.action.label}
+                    </ActionButton>
+                  </View>
+                ) : null}
+              </View>
+            );
+          }
+
+          if (block.type === 'contact_lead_form') {
+            const complete = block.fields.every(
+              (field) =>
+                !field.required || (values[`${block.id}:${field.name}`] ?? field.value ?? '').trim()
+            );
+            return (
+              <View key={block.id} style={[styles.card, styles.cardPadded]}>
+                <Text style={styles.title}>{block.title}</Text>
+                {block.description ? (
+                  <Text style={styles.description}>{block.description}</Text>
+                ) : null}
+                <View style={styles.fieldStack}>
+                  {block.fields.map((field) => {
+                    const id = `${block.id}:${field.name}`;
+                    return (
+                      <TextInput
+                        key={id}
+                        value={values[id] ?? field.value ?? ''}
+                        onChangeText={(text) =>
+                          setValues((current) => ({ ...current, [id]: text }))
+                        }
+                        placeholder={field.placeholder || field.label}
+                        placeholderTextColor={palette.textSubtle}
+                        accessibilityLabel={field.label}
+                        keyboardType={keyboardTypeFor(field.type)}
+                        autoCapitalize={field.type === 'email' ? 'none' : 'sentences'}
+                        multiline={field.type === 'textarea'}
+                        style={[styles.input, field.type === 'textarea' && styles.textarea]}
+                      />
+                    );
+                  })}
+                </View>
+                <View style={styles.blockAction}>
+                  <ActionButton
+                    color={color}
+                    disabled={!complete || !consentGranted}
+                    pending={pending === `submit:${block.id}`}
+                    onPress={() =>
+                      act({
+                        id: `submit:${block.id}`,
+                        type: 'submit_contact',
+                        label: block.submitLabel,
+                        module: block.module,
+                        payload: Object.fromEntries(
+                          block.fields.map((field) => [
+                            field.name,
+                            values[`${block.id}:${field.name}`] || field.value || '',
+                          ])
+                        ),
+                      })
+                    }>
+                    {block.submitLabel}
+                  </ActionButton>
+                </View>
+              </View>
+            );
+          }
+
+          if (block.type === 'consent') {
+            const checked = consents[block.id] || false;
+            return (
+              <View key={block.id} style={[styles.card, styles.cardPadded]}>
+                <Pressable
+                  onPress={() => setConsents((current) => ({ ...current, [block.id]: !checked }))}
+                  accessibilityRole="checkbox"
+                  accessibilityState={{ checked }}
+                  style={styles.consentRow}>
+                  <View
+                    style={[
+                      styles.checkbox,
+                      checked && { backgroundColor: color, borderColor: color },
+                    ]}>
+                    {checked ? <Text style={styles.checkmark}>✓</Text> : null}
+                  </View>
+                  <Text style={styles.consentText}>{block.statement}</Text>
+                </Pressable>
+                <View style={[styles.row, styles.blockAction]}>
+                  <View style={styles.chipRow}>
+                    {block.channels.map((channel) => (
+                      <Badge key={channel} label={channel} />
+                    ))}
+                  </View>
+                  <Pressable
+                    disabled={!checked || pending !== null}
+                    onPress={() =>
+                      act({
+                        id: `consent:${block.id}`,
+                        type: 'record_consent',
+                        label: 'Save consent',
+                        module: 'contacts',
+                        payload: {
+                          channels: block.channels,
+                          consent: true,
+                          statement: block.statement,
+                        },
+                      })
+                    }
+                    hitSlop={8}>
+                    <Text
+                      style={[styles.linkButton, { color: checked ? color : palette.textSubtle }]}>
+                      Save
+                    </Text>
+                  </Pressable>
+                </View>
+              </View>
+            );
+          }
+
+          if (block.type === 'appointment_slot_picker') {
+            const selected = selectedSlots[block.id] || '';
+            const selectedSlot = block.days
+              .flatMap((day) => day.slots.map((slot) => ({ ...slot, date: day.date })))
+              .find((slot) => `${slot.date}:${slot.startTime}` === selected);
+            const providerById = new Map(
+              block.providers.map((provider) => [provider.id, provider])
+            );
+            const selectedProvider = selectedSlot?.staffUserId
+              ? providerById.get(selectedSlot.staffUserId)
+              : undefined;
+            const activeProviderId = block.selectedProviderId || 'any';
+
+            return (
+              <View key={block.id} style={[styles.card, styles.cardPadded]}>
+                <Text style={styles.title}>{labels.chooseTime}</Text>
+                <Text style={styles.description}>
+                  {block.serviceName} · {block.durationMinutes} min
+                  {block.timezone ? ` · ${block.timezone}` : ''}
+                </Text>
+
+                {block.providers.length > 0 ? (
+                  <View style={styles.section}>
+                    <Text style={styles.sectionLabel}>{labels.professional}</Text>
+                    <View style={styles.chipRow}>
+                      <Chip
+                        selected={activeProviderId === 'any'}
+                        color={color}
+                        disabled={pending !== null}
+                        label="Any available"
+                        onPress={() =>
+                          activeProviderId !== 'any' &&
+                          act({
+                            id: `provider:${block.serviceId}:any`,
+                            type: 'select_appointment_provider',
+                            label: 'Choose any professional',
+                            module: 'appointments',
+                            payload: {
+                              serviceId: block.serviceId,
+                              serviceName: block.serviceName,
+                              durationMinutes: block.durationMinutes,
+                              locationId: block.locationId,
+                              providerName: 'any available professional',
+                            },
+                          })
+                        }
+                      />
+                      {block.providers.map((provider) => (
+                        <Chip
+                          key={provider.id}
+                          selected={activeProviderId === provider.id}
+                          color={color}
+                          disabled={pending !== null}
+                          label={provider.name}
+                          onPress={() =>
+                            activeProviderId !== provider.id &&
+                            act({
+                              id: `provider:${block.serviceId}:${provider.id}`,
+                              type: 'select_appointment_provider',
+                              label: `Choose ${provider.name}`,
+                              module: 'appointments',
+                              payload: {
+                                serviceId: block.serviceId,
+                                serviceName: block.serviceName,
+                                durationMinutes: block.durationMinutes,
+                                locationId: block.locationId,
+                                providerId: provider.id,
+                                providerName: provider.name,
+                              },
+                            })
+                          }
+                        />
+                      ))}
+                    </View>
+                  </View>
+                ) : null}
+
+                <View style={styles.section}>
+                  {block.days.map((day) => (
+                    <View key={day.date} style={styles.day}>
+                      <Text style={styles.sectionLabel}>{formatDate(day.date)}</Text>
+                      <View style={styles.chipRow}>
+                        {day.slots.map((slot) => {
+                          const value = `${day.date}:${slot.startTime}`;
+                          return (
+                            <Chip
+                              key={value}
+                              selected={selected === value}
+                              color={color}
+                              label={formatTime(slot.startTime)}
+                              onPress={() =>
+                                setSelectedSlots((current) => ({ ...current, [block.id]: value }))
+                              }
+                            />
+                          );
+                        })}
+                      </View>
+                    </View>
+                  ))}
+                </View>
+
+                {selectedProvider ? (
+                  <Text style={[styles.muted, styles.blockAction]}>
+                    With {selectedProvider.name}
+                  </Text>
+                ) : null}
+                <View style={styles.blockAction}>
+                  <ActionButton
+                    color={color}
+                    disabled={!selectedSlot}
+                    pending={pending?.startsWith(`book:${block.serviceId}`) || false}
+                    onPress={() =>
+                      selectedSlot &&
+                      act({
+                        id: `book:${block.serviceId}:${selected}`,
+                        type: 'select_appointment_slot',
+                        label: 'Book this time',
+                        module: 'appointments',
+                        payload: {
+                          serviceId: block.serviceId,
+                          serviceName: block.serviceName,
+                          durationMinutes: block.durationMinutes,
+                          date: selectedSlot.date,
+                          startTime: selectedSlot.startTime,
+                          endTime: selectedSlot.endTime,
+                          userId: selectedSlot.staffUserId,
+                          slotToken: selectedSlot.slotToken,
+                          providerName: selectedProvider?.name,
+                        },
+                      })
+                    }>
+                    Book this time
+                  </ActionButton>
+                </View>
+              </View>
+            );
+          }
+
+          if (block.type === 'quote_preview') {
+            const publicActions = block.actions.filter((action) => action.type !== 'open_record');
+            return (
+              <View key={block.id} style={[styles.card, styles.cardPadded]}>
+                <View style={styles.rowStart}>
+                  <View style={styles.flexMin}>
+                    <Text style={styles.title}>{block.name}</Text>
+                    <Text style={styles.description}>
+                      {block.serialNumber || labels.priceOffer}
+                      {block.contactName ? ` · ${block.contactName}` : ''}
+                    </Text>
+                  </View>
+                  <Badge label={block.status} />
+                </View>
+                <Text style={styles.amount}>{formatMoney(block.amount, block.currency)}</Text>
+                {block.validUntil ? (
+                  <Text style={styles.muted}>
+                    Valid until {formatDate(block.validUntil.slice(0, 10))}
+                  </Text>
+                ) : null}
+                {publicActions.map((action) => (
+                  <View key={action.id} style={styles.blockAction}>
+                    <ActionButton
+                      color={color}
+                      pending={pending === action.id}
+                      onPress={() => act(action)}>
+                      {action.label}
+                    </ActionButton>
+                  </View>
+                ))}
+              </View>
+            );
+          }
+
+          // success_receipt
+          return (
+            <View key={block.id} style={[styles.card, styles.cardPadded]}>
+              <View style={styles.rowStart}>
+                <Text style={[styles.checkGlyph, { color }]}>✓</Text>
+                <View style={styles.flexMin}>
+                  <Text style={styles.title}>{block.title}</Text>
+                  {block.description ? (
+                    <Text style={styles.description}>{block.description}</Text>
+                  ) : null}
+                </View>
+              </View>
+              <View style={[styles.row, styles.blockAction]}>
+                {block.reference ? <Badge label={block.reference} /> : <View />}
+                {block.amount != null && block.currency ? (
+                  <Text style={styles.itemTotal}>{formatMoney(block.amount, block.currency)}</Text>
+                ) : null}
+              </View>
+              {block.nextActions
+                .filter((action) => action.type !== 'open_record')
+                .map((action) => (
+                  <View key={action.id} style={styles.blockAction}>
+                    <ActionButton
+                      color={color}
+                      pending={pending === action.id}
+                      onPress={() => act(action)}>
+                      {action.label}
+                    </ActionButton>
+                  </View>
+                ))}
+            </View>
+          );
+        })}
+      </View>
+    </BlockLabelContext.Provider>
+  );
+}
+
+function ActionButton({
+  children,
+  color,
+  secondary = false,
+  pending = false,
+  disabled = false,
+  onPress,
+}: {
+  children: string;
+  color: string;
+  secondary?: boolean;
+  pending?: boolean;
+  disabled?: boolean;
+  onPress?: () => void;
+}) {
+  const labels = useContext(BlockLabelContext);
+  const inactive = disabled || pending;
+  return (
+    <Pressable
+      disabled={inactive}
+      onPress={onPress}
+      accessibilityRole="button"
+      style={({ pressed }) => [
+        styles.actionButton,
+        secondary
+          ? { borderColor: color, backgroundColor: palette.white }
+          : { backgroundColor: color },
+        inactive && styles.actionButtonDisabled,
+        pressed && styles.pressed,
+      ]}>
+      <Text
+        style={[
+          styles.actionButtonLabel,
+          { color: inactive ? palette.white : secondary ? color : palette.white },
+        ]}>
+        {pending ? labels.working : children}
+      </Text>
+    </Pressable>
+  );
+}
+
+function Chip({
+  label,
+  sublabel,
+  selected,
+  disabled = false,
+  color,
+  onPress,
+}: {
+  label: string;
+  sublabel?: string;
+  selected: boolean;
+  disabled?: boolean;
+  color: string;
+  onPress: () => void;
+}) {
+  return (
+    <Pressable
+      disabled={disabled}
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityState={{ selected, disabled }}
+      style={[
+        styles.chip,
+        {
+          borderColor: selected ? color : palette.disabled,
+          backgroundColor: selected ? withAlpha(color, 0.07) : palette.white,
+        },
+        disabled && styles.chipDisabled,
+      ]}>
+      <Text style={[styles.chipLabel, { color: selected ? color : '#374151' }]}>{label}</Text>
+      {sublabel ? <Text style={styles.chipSublabel}>{sublabel}</Text> : null}
+    </Pressable>
+  );
+}
+
+function Badge({ label }: { label: string }) {
+  return (
+    <View style={styles.badge}>
+      <Text style={styles.badgeLabel} numberOfLines={1}>
+        {label}
+      </Text>
+    </View>
+  );
+}
+
+function MoneyRow({
+  label,
+  value,
+  strong = false,
+}: {
+  label: string;
+  value: string;
+  strong?: boolean;
+}) {
+  return (
+    <View style={styles.row}>
+      <Text style={[styles.moneyLabel, strong && styles.moneyStrong]}>{label}</Text>
+      <Text style={[styles.moneyLabel, strong && styles.moneyStrong]}>{value}</Text>
+    </View>
+  );
+}
+
+function keyboardTypeFor(type: string) {
+  if (type === 'email') return 'email-address' as const;
+  if (type === 'phone') return 'phone-pad' as const;
+  return 'default' as const;
+}
+
+export function formatMoney(amount: number, currency: string) {
+  // Blocks are validated upstream; this is the last line against a bad value.
+  const value = typeof amount === 'number' && Number.isFinite(amount) ? amount : 0;
+  try {
+    return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(value);
+  } catch {
+    return `${value.toFixed(2)} ${currency ?? ''}`.trim();
+  }
+}
+
+export function formatDate(date: string) {
+  const parsed = new Date(`${date}T12:00:00`);
+  if (Number.isNaN(parsed.getTime())) return date;
+  try {
+    return new Intl.DateTimeFormat(undefined, {
+      weekday: 'short',
+      month: 'short',
+      day: 'numeric',
+    }).format(parsed);
+  } catch {
+    return date;
+  }
+}
+
+export function formatTime(time: string) {
+  const [hour, minute] = time.split(':').map(Number);
+  try {
+    return new Intl.DateTimeFormat(undefined, { hour: 'numeric', minute: '2-digit' }).format(
+      new Date(2000, 0, 1, hour ?? 0, minute ?? 0)
+    );
+  } catch {
+    return time;
+  }
+}
+
+const cardStyle: ViewStyle = {
+  overflow: 'hidden',
+  borderWidth: StyleSheet.hairlineWidth,
+  borderColor: palette.border,
+  borderRadius: radius.xl,
+  backgroundColor: palette.white,
+  ...shadows.card,
+};
+
+const styles = StyleSheet.create({
+  stack: {
+    width: '100%',
+    maxWidth: 350,
+    gap: spacing.sm,
+    marginTop: spacing.sm,
+  },
+  card: cardStyle,
+  cardPadded: {
+    padding: spacing.md,
+  },
+  cardBody: {
+    gap: spacing.sm + 2,
+    padding: spacing.md,
+  },
+  cardImage: {
+    width: '100%',
+    aspectRatio: 16 / 7,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: spacing.sm + 2,
+  },
+  rowStart: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    gap: spacing.sm + 2,
+  },
+  flexMin: {
+    flex: 1,
+    minWidth: 0,
+  },
+  title: {
+    fontSize: fontSize.body,
+    lineHeight: fontSize.body * 1.3,
+    fontWeight: '600',
+    color: palette.text,
+  },
+  description: {
+    fontSize: fontSize.meta,
+    lineHeight: fontSize.meta * 1.45,
+    color: palette.textMuted,
+    marginTop: 3,
+  },
+  muted: {
+    fontSize: fontSize.caption,
+    color: palette.textMuted,
+  },
+  price: {
+    fontSize: fontSize.title,
+    fontWeight: '600',
+    color: palette.text,
+  },
+  amount: {
+    fontSize: fontSize.heading,
+    fontWeight: '700',
+    color: palette.text,
+    marginTop: spacing.sm + 2,
+  },
+  badge: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: palette.border,
+    borderRadius: radius.pill,
+    paddingHorizontal: 7,
+    paddingVertical: 3,
+    backgroundColor: palette.surface,
+  },
+  badgeLabel: {
+    fontSize: fontSize.caption - 1,
+    color: '#4b5563',
+  },
+  chipRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: spacing.xs + 2,
+    marginTop: spacing.sm,
+  },
+  chip: {
+    borderWidth: 1,
+    borderRadius: radius.md,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    minHeight: 40,
+    justifyContent: 'center',
+  },
+  chipDisabled: {
+    opacity: 0.45,
+  },
+  chipLabel: {
+    fontSize: fontSize.meta,
+    fontWeight: '600',
+  },
+  chipSublabel: {
+    fontSize: fontSize.caption - 1,
+    opacity: 0.75,
+    marginTop: 2,
+  },
+  actionRow: {
+    flexDirection: 'row',
+    gap: spacing.sm,
+  },
+  actionCell: {
+    flex: 1,
+  },
+  actionButton: {
+    width: '100%',
+    borderWidth: 1,
+    borderColor: 'transparent',
+    borderRadius: radius.md,
+    paddingVertical: spacing.md,
+    paddingHorizontal: spacing.md,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 44,
+  },
+  actionButtonDisabled: {
+    backgroundColor: palette.disabled,
+    borderColor: palette.disabled,
+  },
+  actionButtonLabel: {
+    fontSize: fontSize.meta,
+    fontWeight: '600',
+  },
+  pressed: {
+    opacity: 0.85,
+  },
+  blockAction: {
+    marginTop: spacing.sm + 2,
+  },
+  itemList: {
+    gap: spacing.sm,
+    marginTop: spacing.sm + 2,
+  },
+  itemName: {
+    fontSize: fontSize.meta,
+    fontWeight: '600',
+    color: palette.text,
+  },
+  itemTotal: {
+    fontSize: fontSize.meta,
+    fontWeight: '600',
+    color: palette.text,
+  },
+  totals: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: palette.border,
+    marginTop: spacing.sm + 2,
+    paddingTop: spacing.sm + 2,
+    gap: 5,
+  },
+  moneyLabel: {
+    fontSize: fontSize.meta,
+    color: palette.text,
+  },
+  moneyStrong: {
+    fontWeight: '700',
+  },
+  fieldStack: {
+    gap: spacing.sm,
+    marginTop: spacing.sm + 2,
+  },
+  input: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: palette.disabled,
+    borderRadius: radius.md,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm + 2,
+    fontSize: fontSize.input,
+    color: palette.text,
+    backgroundColor: palette.white,
+    minHeight: 44,
+  },
+  textarea: {
+    minHeight: 84,
+    textAlignVertical: 'top',
+  },
+  consentRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: spacing.sm,
+  },
+  checkbox: {
+    width: 22,
+    height: 22,
+    borderRadius: 6,
+    borderWidth: 1.5,
+    borderColor: palette.disabled,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  checkmark: {
+    color: palette.white,
+    fontSize: fontSize.meta,
+    fontWeight: '700',
+  },
+  consentText: {
+    flex: 1,
+    fontSize: fontSize.meta,
+    lineHeight: fontSize.meta * 1.45,
+    color: palette.text,
+  },
+  linkButton: {
+    fontSize: fontSize.meta,
+    fontWeight: '600',
+    padding: spacing.xs,
+  },
+  section: {
+    marginTop: spacing.sm + 2,
+  },
+  sectionLabel: {
+    fontSize: fontSize.caption,
+    fontWeight: '600',
+    color: palette.text,
+  },
+  day: {
+    marginTop: spacing.sm + 2,
+  },
+  checkGlyph: {
+    fontSize: fontSize.title,
+    fontWeight: '700',
+  },
+});