@oxy.so/bloom 2.8.0 → 2.10.0

package/src/listing-editor/OfferingEditor.tsx

@@ -0,0 +1,428 @@
+import React, { memo, useMemo, useState } from 'react';
+import { View } from 'react-native';
+
+import { DatePicker } from '../date-picker';
+import { RiExchangeLine } from '../icons/remix/RiExchangeLine';
+import { RiKey2Line } from '../icons/remix/RiKey2Line';
+import { RiPriceTag3Line } from '../icons/remix/RiPriceTag3Line';
+import { RiSuitcaseLine } from '../icons/remix/RiSuitcaseLine';
+import { FilterChip } from '../stay-filters/FilterChip';
+import { StepperRow } from '../stepper';
+import { TextField, TextFieldHint, TextFieldInput, TextFieldLabel } from '../text-field';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { resolveSelectionPaint, SelectionCard } from './SelectionCard';
+import type {
+  ListingEditorIcon,
+  OfferingEditorLabels,
+  OfferingEditorProps,
+  OfferingKind,
+  OfferingValue,
+  RentOffering,
+  SaleOffering,
+  StayOffering,
+  SwapMode,
+  SwapOffering,
+} from './types';
+
+/**
+ * How a home is offered: four large selectable cards — for rent, for sale,
+ * vacation rental, swap — any number of them at once. A selected card opens
+ * its fields underneath its head:
+ *
+ *   rent   monthly amount (currency before the input), deposit in months
+ *          (pills), available from (Bloom's `DatePicker`), minimum stay in
+ *          months (`StepperRow`)
+ *   sale   asking price, and the price per area COMPUTED from it and `area`
+ *          (read-only, on a neutral-50 / dark neutral-900 panel)
+ *   stay   nightly rate and cleaning fee side by side from 480 wide, minimum
+ *          nights (`StepperRow`)
+ *   swap   the exchange mode (pills): swap, host, or both
+ *
+ * Controlled: `value` holds the kinds and each kind's fields; deselecting a
+ * kind keeps its fields in `value`, so re-selecting restores them. Money fields
+ * keep digits only. Validation is the app's: pass `errors` keyed by field and
+ * each message sits under its field (the `kinds` one under the cards), painted
+ * in the error colour.
+ *
+ * Accessibility: the cards are a `group` of `checkbox`es (`aria-checked`),
+ * each named by its title with its description as the hint; the pill rows are
+ * `radiogroup`s named by their label.
+ */
+
+const DEFAULT_LABELS: OfferingEditorLabels = {
+  rent: { title: 'For rent', description: 'Long-term tenancy, priced by the month.' },
+  sale: { title: 'For sale', description: 'Sell the home outright.' },
+  stay: { title: 'Vacation rental', description: 'Short stays, priced by the night.' },
+  swap: { title: 'Home swap', description: 'Exchange homes with other members.' },
+  monthlyRent: 'Monthly rent',
+  deposit: 'Deposit',
+  depositOption: (months) => (months === 0 ? 'None' : `${months} ${months === 1 ? 'month' : 'months'}`),
+  availableFrom: 'Available from',
+  minimumStay: 'Minimum stay',
+  months: (months) => `${months} ${months === 1 ? 'month' : 'months'}`,
+  askingPrice: 'Asking price',
+  pricePerArea: 'Price per m²',
+  pricePerAreaEmpty: 'Add a price',
+  nightlyRate: 'Nightly rate',
+  cleaningFee: 'Cleaning fee',
+  minimumNights: 'Minimum nights',
+  nights: (nights) => `${nights} ${nights === 1 ? 'night' : 'nights'}`,
+  swapMode: 'How would you like to exchange?',
+  swapModes: { swap: 'Swap homes', host: 'Host only', both: 'Either' },
+  group: 'How is the home offered?',
+};
+
+const ICONS: Record<OfferingKind, ListingEditorIcon> = {
+  rent: RiKey2Line,
+  sale: RiPriceTag3Line,
+  stay: RiSuitcaseLine,
+  swap: RiExchangeLine,
+};
+
+const ALL_KINDS: ReadonlyArray<OfferingKind> = ['rent', 'sale', 'stay', 'swap'];
+const SWAP_MODES: ReadonlyArray<SwapMode> = ['swap', 'host', 'both'];
+
+/** Digits only — what a money field keeps of what was typed. */
+export function sanitizeAmount(text: string): string {
+  return text.replace(/\D+/g, '');
+}
+
+/** The sale price per unit of area, or `null` without a positive price and area. Pure. */
+export function pricePerArea(price: string | undefined, area: number | undefined): number | null {
+  const amount = Number(sanitizeAmount(price ?? ''));
+  if (!amount || !area || area <= 0) return null;
+  return amount / area;
+}
+
+function groupThousands(value: number): string {
+  return String(Math.round(value)).replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+}
+
+/** Toggles `kind` in `value.kinds`, keeping every kind's fields. Pure. */
+export function toggleOfferingKind(value: OfferingValue, kind: OfferingKind): OfferingValue {
+  const on = value.kinds.includes(kind);
+  return { ...value, kinds: on ? value.kinds.filter((k) => k !== kind) : [...value.kinds, kind] };
+}
+
+function OfferingEditorComponent({
+  value,
+  onValueChange,
+  kinds = ALL_KINDS,
+  currencySymbol = '€',
+  area,
+  areaUnit = 'm²',
+  formatPricePerArea,
+  depositOptions = [0, 1, 2, 3],
+  errors = {},
+  labels: labelsProp,
+  disabled = false,
+  style,
+  testID,
+}: OfferingEditorProps) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveSelectionPaint(theme), [theme]);
+  const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...labelsProp }), [labelsProp]);
+  const [width, setWidth] = useState(0);
+  const wide = width >= 480;
+  const tid = (suffix: string) => (testID ? `${testID}-${suffix}` : undefined);
+
+  const rent = value.rent ?? {};
+  const sale = value.sale ?? {};
+  const stay = value.stay ?? {};
+  const swap = value.swap ?? {};
+  const setRent = (patch: Partial<RentOffering>) => onValueChange({ ...value, rent: { ...rent, ...patch } });
+  const setSale = (patch: Partial<SaleOffering>) => onValueChange({ ...value, sale: { ...sale, ...patch } });
+  const setStay = (patch: Partial<StayOffering>) => onValueChange({ ...value, stay: { ...stay, ...patch } });
+  const setSwap = (patch: Partial<SwapOffering>) => onValueChange({ ...value, swap: { ...swap, ...patch } });
+
+  const perArea = pricePerArea(sale.price, area);
+  const perAreaText =
+    perArea == null
+      ? labels.pricePerAreaEmpty
+      : formatPricePerArea
+        ? formatPricePerArea(perArea)
+        : `${currencySymbol}${groupThousands(perArea)} / ${areaUnit}`;
+
+  const fields: Record<OfferingKind, () => React.ReactNode> = {
+    rent: () => (
+      <>
+        <MoneyField
+          label={labels.monthlyRent}
+          currencySymbol={currencySymbol}
+          value={rent.amount ?? ''}
+          onChangeText={(amount) => setRent({ amount })}
+          error={errors['rent.amount']}
+          disabled={disabled}
+          testID={tid('rent-amount')}
+        />
+        <ChoiceRow
+          label={labels.deposit}
+          options={depositOptions.map((months) => ({ value: months, label: labels.depositOption(months) }))}
+          value={rent.depositMonths ?? null}
+          onChange={(depositMonths) => setRent({ depositMonths })}
+          error={errors['rent.depositMonths']}
+          disabled={disabled}
+          testID={tid('rent-deposit')}
+        />
+        <FieldShell label={labels.availableFrom} error={errors['rent.availableFrom']}>
+          <DatePicker
+            value={rent.availableFrom ?? null}
+            onChange={(availableFrom) => setRent({ availableFrom })}
+            accessibilityLabel={labels.availableFrom}
+            disabled={disabled}
+            testID={tid('rent-available')}
+          />
+        </FieldShell>
+        <FieldShell error={errors['rent.minimumMonths']}>
+          <StepperRow
+            title={labels.minimumStay}
+            value={rent.minimumMonths ?? 12}
+            onValueChange={(minimumMonths) => setRent({ minimumMonths })}
+            min={1}
+            max={60}
+            formatValue={labels.months}
+            size="small"
+            disabled={disabled}
+            style={{ paddingTop: 0, paddingBottom: 0 }}
+            testID={tid('rent-minimum')}
+          />
+        </FieldShell>
+      </>
+    ),
+    sale: () => (
+      <>
+        <MoneyField
+          label={labels.askingPrice}
+          currencySymbol={currencySymbol}
+          value={sale.price ?? ''}
+          onChangeText={(price) => setSale({ price })}
+          error={errors['sale.price']}
+          disabled={disabled}
+          testID={tid('sale-price')}
+        />
+        <View
+          testID={tid('sale-per-area')}
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 12,
+            paddingTop: 12,
+            paddingBottom: 12,
+            paddingLeft: 16,
+            paddingRight: 16,
+            borderRadius: 12,
+            backgroundColor: paint.wash,
+          }}
+        >
+          <Text variant="body-regular" style={{ color: paint.textSecondary }}>
+            {labels.pricePerArea}
+          </Text>
+          <Text
+            variant="body-semibold"
+            style={{ color: perArea == null ? paint.textSecondary : paint.text, fontVariant: ['tabular-nums'] }}
+          >
+            {perAreaText}
+          </Text>
+        </View>
+      </>
+    ),
+    stay: () => (
+      <>
+        <View style={{ flexDirection: wide ? 'row' : 'column', gap: 16 }}>
+          <MoneyField
+            label={labels.nightlyRate}
+            currencySymbol={currencySymbol}
+            value={stay.nightlyRate ?? ''}
+            onChangeText={(nightlyRate) => setStay({ nightlyRate })}
+            error={errors['stay.nightlyRate']}
+            disabled={disabled}
+            style={wide ? { flex: 1 } : undefined}
+            testID={tid('stay-nightly')}
+          />
+          <MoneyField
+            label={labels.cleaningFee}
+            currencySymbol={currencySymbol}
+            value={stay.cleaningFee ?? ''}
+            onChangeText={(cleaningFee) => setStay({ cleaningFee })}
+            error={errors['stay.cleaningFee']}
+            disabled={disabled}
+            style={wide ? { flex: 1 } : undefined}
+            testID={tid('stay-cleaning')}
+          />
+        </View>
+        <FieldShell error={errors['stay.minimumNights']}>
+          <StepperRow
+            title={labels.minimumNights}
+            value={stay.minimumNights ?? 1}
+            onValueChange={(minimumNights) => setStay({ minimumNights })}
+            min={1}
+            max={90}
+            formatValue={labels.nights}
+            size="small"
+            disabled={disabled}
+            style={{ paddingTop: 0, paddingBottom: 0 }}
+            testID={tid('stay-minimum')}
+          />
+        </FieldShell>
+      </>
+    ),
+    swap: () => (
+      <ChoiceRow
+        label={labels.swapMode}
+        options={SWAP_MODES.map((mode) => ({ value: mode, label: labels.swapModes[mode] }))}
+        value={swap.mode ?? null}
+        onChange={(mode) => setSwap({ mode })}
+        error={errors['swap.mode']}
+        disabled={disabled}
+        testID={tid('swap-mode')}
+      />
+    ),
+  };
+
+  return (
+    <View testID={testID} style={style} onLayout={(e) => setWidth(e.nativeEvent.layout.width)}>
+      <View role="group" accessibilityLabel={labels.group} style={{ gap: 12 }}>
+        {kinds.map((kind) => {
+          const selected = value.kinds.includes(kind);
+          return (
+            <SelectionCard
+              key={kind}
+              selection="multiple"
+              selected={selected}
+              onPress={() => onValueChange(toggleOfferingKind(value, kind))}
+              title={labels[kind].title}
+              description={labels[kind].description}
+              icon={ICONS[kind]}
+              compact={width > 0 && width < 400}
+              disabled={disabled}
+              testID={tid(kind)}
+            >
+              {selected ? fields[kind]() : null}
+            </SelectionCard>
+          );
+        })}
+      </View>
+      {errors.kinds ? (
+        <Text
+          variant="body-2-regular"
+          accessibilityLiveRegion="polite"
+          testID={tid('kinds-error')}
+          style={{ color: paint.error, marginTop: 8 }}
+        >
+          {errors.kinds}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+//  Field parts
+// ---------------------------------------------------------------------------
+
+function FieldShell({ label, error, children }: { label?: string; error?: string; children: React.ReactNode }) {
+  return (
+    <View style={{ gap: 6 }}>
+      {label ? <TextFieldLabel>{label}</TextFieldLabel> : null}
+      {children}
+      {error ? <TextFieldHint isInvalid>{error}</TextFieldHint> : null}
+    </View>
+  );
+}
+
+function MoneyField({
+  label,
+  currencySymbol,
+  value,
+  onChangeText,
+  error,
+  disabled,
+  style,
+  testID,
+}: {
+  label: string;
+  currencySymbol: string;
+  value: string;
+  onChangeText: (value: string) => void;
+  error?: string;
+  disabled: boolean;
+  style?: { flex: number };
+  testID?: string;
+}) {
+  const theme = useTheme();
+  return (
+    <View style={[{ gap: 6 }, style]}>
+      <TextFieldLabel>{label}</TextFieldLabel>
+      <TextField isInvalid={!!error} disabled={disabled}>
+        <Text
+          variant="body-regular"
+          aria-hidden
+          // Above the field's chrome, which the input paints behind its siblings.
+          style={{ zIndex: 20, color: disabled ? theme.colors.textTertiary : theme.colors.textSecondary, marginRight: 2 }}
+        >
+          {currencySymbol}
+        </Text>
+        <TextFieldInput
+          label={label}
+          placeholder={null}
+          value={value}
+          onChangeText={(text) => onChangeText(sanitizeAmount(text))}
+          keyboardType="number-pad"
+          inputMode="numeric"
+          isInvalid={!!error}
+          disabled={disabled}
+          testID={testID}
+        />
+      </TextField>
+      {error ? (
+        <TextFieldHint isInvalid>{error}</TextFieldHint>
+      ) : null}
+    </View>
+  );
+}
+
+function ChoiceRow<T extends string | number>({
+  label,
+  options,
+  value,
+  onChange,
+  error,
+  disabled,
+  testID,
+}: {
+  label: string;
+  options: ReadonlyArray<{ value: T; label: string }>;
+  value: T | null;
+  onChange: (value: T) => void;
+  error?: string;
+  disabled: boolean;
+  testID?: string;
+}) {
+  return (
+    <FieldShell label={label} error={error}>
+      <View
+        role="radiogroup"
+        accessibilityLabel={label}
+        testID={testID}
+        style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}
+      >
+        {options.map((option) => (
+          <FilterChip
+            key={String(option.value)}
+            mode="radio"
+            label={option.label}
+            selected={value === option.value}
+            onPress={() => onChange(option.value)}
+            disabled={disabled}
+            testID={testID ? `${testID}-${option.value}` : undefined}
+          />
+        ))}
+      </View>
+    </FieldShell>
+  );
+}
+
+export const OfferingEditor = memo(OfferingEditorComponent);
+OfferingEditor.displayName = 'OfferingEditor';

package/src/listing-editor/PropertyTypeSelector.tsx

@@ -0,0 +1,191 @@
+import React, { useMemo, useState } from 'react';
+import { Pressable, View } from 'react-native';
+
+import { webDataSet } from '../checkbox/shared';
+import { useInteractionState } from '../hooks/use-interaction-state';
+import { RiArmchairLine } from '../icons/remix/RiArmchairLine';
+import { RiBuilding2Line } from '../icons/remix/RiBuilding2Line';
+import { RiBuilding4Line } from '../icons/remix/RiBuilding4Line';
+import { RiCommunityLine } from '../icons/remix/RiCommunityLine';
+import { RiDoorOpenLine } from '../icons/remix/RiDoorOpenLine';
+import { RiHome4Line } from '../icons/remix/RiHome4Line';
+import { RiHotelBedLine } from '../icons/remix/RiHotelBedLine';
+import { RiMoreLine } from '../icons/remix/RiMoreLine';
+import { RiStackLine } from '../icons/remix/RiStackLine';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import {
+  CheckCircle,
+  resolveSelectionPaint,
+  SELECTION_CARD_RADIUS,
+  useSelectionCardCss,
+  type SelectionPaint,
+} from './SelectionCard';
+import type { PropertyType, PropertyTypeOption, PropertyTypeSelectorProps } from './types';
+
+/**
+ * The kind of home, picked from large icon tiles. Single select.
+ *
+ *   grid      2 columns below 400 wide, 3 below 640, 4 from there (or
+ *             `columns`); 12 apart
+ *   tile      min 112 tall, radius 16, p 16, 1px neutral-200 border (dark
+ *             neutral-700), the card colour as fill in light; the 28 icon top-left, the label (body-semibold)
+ *             and an optional description (caption-1-regular, text-secondary)
+ *             at the bottom
+ *   hover     border neutral-400 (dark neutral-500) and a neutral-50 wash
+ *   selected  a 2px text-primary border, the check circle top-right
+ *   disabled  50% opacity
+ *
+ * Accessibility: a `radiogroup` (named by `accessibilityLabel`) of `radio`s
+ * with `aria-checked`, each named by its label.
+ */
+
+export const DEFAULT_PROPERTY_TYPES: ReadonlyArray<PropertyTypeOption<PropertyType>> = [
+  { value: 'apartment', label: 'Apartment', icon: RiBuilding2Line },
+  { value: 'house', label: 'House', icon: RiHome4Line },
+  { value: 'room', label: 'Room', icon: RiDoorOpenLine },
+  { value: 'studio', label: 'Studio', icon: RiArmchairLine },
+  { value: 'duplex', label: 'Duplex', icon: RiStackLine },
+  { value: 'penthouse', label: 'Penthouse', icon: RiBuilding4Line },
+  { value: 'coliving', label: 'Coliving', icon: RiCommunityLine },
+  { value: 'hostel', label: 'Hostel', icon: RiHotelBedLine },
+  { value: 'other', label: 'Other', icon: RiMoreLine },
+];
+
+export function propertyTypeColumns(width: number): number {
+  if (width < 400) return 2;
+  if (width < 640) return 3;
+  return 4;
+}
+
+export function PropertyTypeSelector<T extends string = PropertyType>({
+  value,
+  onValueChange,
+  options,
+  columns: columnsProp,
+  accessibilityLabel = 'Property type',
+  error,
+  disabled = false,
+  style,
+  testID,
+}: PropertyTypeSelectorProps<T>) {
+  const theme = useTheme();
+  useSelectionCardCss();
+  const paint = useMemo(() => resolveSelectionPaint(theme), [theme]);
+  const [width, setWidth] = useState(0);
+  const columns = columnsProp ?? propertyTypeColumns(width);
+  const gap = 12;
+  const tileWidth = width > 0 ? Math.floor((width - gap * (columns - 1)) / columns) : 0;
+  const list = (options ?? DEFAULT_PROPERTY_TYPES) as ReadonlyArray<PropertyTypeOption<T>>;
+
+  return (
+    <View testID={testID} style={[{ gap: 8 }, style]} onLayout={(e) => setWidth(e.nativeEvent.layout.width)}>
+      <View
+        role="radiogroup"
+        accessibilityLabel={accessibilityLabel}
+        aria-disabled={disabled || undefined}
+        style={{ flexDirection: 'row', flexWrap: 'wrap', gap }}
+      >
+        {tileWidth > 0
+          ? list.map((option) => (
+              <PropertyTile
+                key={option.value}
+                option={option}
+                selected={value === option.value}
+                onPress={() => onValueChange(option.value)}
+                width={tileWidth}
+                paint={paint}
+                disabled={disabled || !!option.disabled}
+                testID={testID ? `${testID}-${option.value}` : undefined}
+              />
+            ))
+          : null}
+      </View>
+      {error ? (
+        <Text variant="body-2-regular" accessibilityLiveRegion="polite" style={{ color: paint.error }}>
+          {error}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+PropertyTypeSelector.displayName = 'PropertyTypeSelector';
+
+function PropertyTile<T extends string>({
+  option,
+  selected,
+  onPress,
+  width,
+  paint,
+  disabled,
+  testID,
+}: {
+  option: PropertyTypeOption<T>;
+  selected: boolean;
+  onPress: () => void;
+  width: number;
+  paint: SelectionPaint;
+  disabled: boolean;
+  testID?: string;
+}) {
+  const { state: hovered, onIn: onHoverIn, onOut: onHoverOut } = useInteractionState();
+  const { state: pressed, onIn: onPressIn, onOut: onPressOut } = useInteractionState();
+  const highlighted = !disabled && (hovered || pressed);
+  const Icon = option.icon;
+  const borderWidth = selected ? 2 : 1;
+  const inset = 16 - (borderWidth - 1);
+
+  const tileStyle: WebCssStyle = {
+    width,
+    minHeight: 112,
+    borderRadius: SELECTION_CARD_RADIUS,
+    borderWidth,
+    borderColor: selected ? paint.borderSelected : highlighted ? paint.borderHover : paint.border,
+    backgroundColor: highlighted && !selected ? paint.wash : paint.fill,
+    paddingTop: inset,
+    paddingBottom: inset,
+    paddingLeft: inset,
+    paddingRight: inset,
+    justifyContent: 'space-between',
+    gap: 16,
+    opacity: disabled ? 0.5 : 1,
+    '--bloom-selection-card-ring': paint.ring,
+  };
+
+  return (
+    <Pressable
+      role="radio"
+      accessibilityLabel={option.label}
+      accessibilityHint={option.description}
+      aria-checked={selected}
+      accessibilityState={{ checked: selected, disabled }}
+      aria-disabled={disabled || undefined}
+      disabled={disabled}
+      onPress={selected ? undefined : onPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      onHoverIn={onHoverIn}
+      onHoverOut={onHoverOut}
+      {...webDataSet({ bloomSelectionCardHead: '' })}
+      testID={testID}
+      style={tileStyle}
+    >
+      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+        <Icon width={28} height={28} fill={paint.icon} />
+        {selected ? <CheckCircle selected paint={paint} size={20} /> : null}
+      </View>
+      <View style={{ gap: 2 }}>
+        <Text variant="body-semibold" numberOfLines={1} style={{ color: paint.text }}>
+          {option.label}
+        </Text>
+        {option.description && width >= 140 ? (
+          <Text variant="caption-1-regular" numberOfLines={2} style={{ color: paint.textSecondary }}>
+            {option.description}
+          </Text>
+        ) : null}
+      </View>
+    </Pressable>
+  );
+}