@oxy.so/bloom 2.9.0 → 2.11.0

package/src/listing-details/types.ts

@@ -1,12 +1,14 @@
 import type { ComponentType, ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import type { BloomIconComponent } from '../icons/icon-component';
 
 /**
  * An icon COMPONENT (`RiWifiLine`, not `<RiWifiLine />`). The part sizes and
  * colours it, so a caller cannot pass the wrong size or a colour that ignores
  * the theme.
  */
-export type ListingIcon = ComponentType<{ width?: number; height?: number; fill?: string }>;
+/** @deprecated Use `BloomIconComponent` from `@oxy.so/bloom/icons`; this is an alias of it. */
+export type ListingIcon = BloomIconComponent;
 
 // ---------------------------------------------------------------------------
 //  ListingPhotoGrid
@@ -284,3 +286,111 @@ export interface ListingSectionProps {
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }
+
+// ---------------------------------------------------------------------------
+//  PropertyFacts
+// ---------------------------------------------------------------------------
+
+export interface PropertyFact {
+  icon?: ListingIcon;
+  /** "Built area", "Bedrooms", "Energy rating". */
+  label: string;
+  /** Pre-formatted ("96 m²", "3", "2nd of 5", "Yes"). */
+  value: string;
+}
+
+export interface PropertyFactsProps {
+  items: readonly PropertyFact[];
+  /** `auto` (default): 2 below 480 wide, 3 from 480, 4 from 720. */
+  columns?: 2 | 3 | 4 | 'auto';
+  /** Draw only the first `limit` facts. */
+  limit?: number;
+  /** Draws "Show all" when set and some facts are hidden, or `total` exceeds the drawn count. */
+  onShowAll?: () => void;
+  /** The full fact count, when `items` is already a subset. Default `items.length`. */
+  total?: number;
+  /** Default `(n) => \`Show all ${n} features\``. */
+  showAllLabel?: (total: number) => string;
+  /** Names the list. Default `"Property features"`. */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+// ---------------------------------------------------------------------------
+//  ContactCard
+// ---------------------------------------------------------------------------
+
+/** Who the contact is to the listing. Picks the default role label and message label. */
+export type ContactRole = 'host' | 'landlord' | 'agent' | 'agency';
+
+export interface ContactCardProps extends Omit<HostCardProps, 'messageLabel'> {
+  /** Default `host`. */
+  role?: ContactRole;
+  /**
+   * The line under the name when `label` is not set. Default: nothing for a
+   * host (`HostCard`'s look), `"Landlord"`, `"Agent"`, `"Agency"` otherwise.
+   */
+  roleLabel?: string;
+  /** The agency an agent works for ("Harbourline Homes"), drawn with `logo`. */
+  agency?: string;
+  /**
+   * The agency's logo: a URL / `ImageResolver` id drawn in a 40px rounded
+   * tile, or any node. For `role="agency"` without an `avatar` it also
+   * replaces the avatar.
+   */
+  logo?: string | ReactNode;
+  /** "Usually responds within an hour" — a row with a clock. */
+  responseTime?: string;
+  /** Active listings, counted ("12 active listings"). */
+  activeListings?: number;
+  /** Default `(n) => n === 1 ? '1 active listing' : \`${n} active listings\``. */
+  activeListingsLabel?: (count: number) => string;
+  /** Pressing the active-listings row (open the contact's other listings). */
+  onPressListings?: () => void;
+  /** The phone number, pre-formatted. Hidden behind "Show phone" until revealed. */
+  phone?: string;
+  /** Controlled reveal. */
+  phoneRevealed?: boolean;
+  /** Called with `true` when "Show phone" is pressed (log the lead). */
+  onPhoneRevealedChange?: (revealed: boolean) => void;
+  /** Default `"Show phone"`. */
+  showPhoneLabel?: string;
+  /** Draws the "Call" button when set. */
+  onCall?: () => void;
+  /** Default `"Call"`. */
+  callLabel?: string;
+  /** Default `"Message"` (`"Message host"` for a host). */
+  messageLabel?: string;
+}
+
+// ---------------------------------------------------------------------------
+//  FloorPlan
+// ---------------------------------------------------------------------------
+
+export interface FloorPlanItem {
+  /** A URL, or an image id handed to the app's `ImageResolver`. */
+  source: string;
+  /** "Ground floor", "Upper floor · 42 m²". Drawn under the tile. */
+  label: string;
+  /** A second line ("2 bedrooms, 1 bath"). */
+  description?: string;
+  /** What the plan shows, for a screen reader. Default `label`. */
+  alt?: string;
+}
+
+export interface FloorPlanProps {
+  plans: readonly FloorPlanItem[];
+  /** Pressed plan, by index — open `ZoomableMediaGallery` here. Tiles are images without it. */
+  onPressPlan?: (index: number) => void;
+  /** `auto` (default): 1 below 560 wide, 2 from 560. A single plan always takes the full width. */
+  columns?: 1 | 2 | 'auto';
+  /** Tile width / height. Default `4 / 3`. */
+  aspectRatio?: number;
+  /** A tile's accessible name. Default `"<alt>, floor plan 1 of 2"`. */
+  planLabel?: (plan: FloorPlanItem, position: number, total: number) => string;
+  /** Rendition forwarded to the `ImageResolver` for an id `source`. Default `"large"`. */
+  imageVariant?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/listing-editor/AddressPrecisionPicker.tsx

@@ -0,0 +1,201 @@
+import React, { memo, useMemo, useState } from 'react';
+import { View } from 'react-native';
+
+import { mixColor, resolveButtonRamps } from '../button/shared';
+import { RiMapPin2Fill } from '../icons/remix/RiMapPin2Fill';
+import type { Theme } from '../theme/types';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { resolveSelectionPaint, SelectionCard } from './SelectionCard';
+import type { AddressPrecision, AddressPrecisionOption, AddressPrecisionPickerProps } from './types';
+
+/**
+ * How precisely the published listing shows where the home is: three radio
+ * cards, each with a map preview over its title and explanation.
+ *
+ *   layout    three cards side by side from 720 wide, stacked below
+ *   card      the listing editor's selection card (radius 16, 2px text-primary
+ *             border when selected) with Bloom's `RadioIndicator` at 20 beside
+ *             the title
+ *   map       112 tall (96 stacked), radius 12, inset 12 — `renderMap(precision)`
+ *             or Bloom's placeholder: a neutral-100 (dark neutral-800) street
+ *             grid with a pin (exact), the street drawn in the accent (street),
+ *             or an accent circle at 20% over the grid (approximate)
+ *   footnote  caption-1-regular, text-secondary, 12 under the cards
+ *
+ * THE CHOICE DECIDES WHAT IS PUBLISHED. The component only records it; the app
+ * must derive the public location from `value` on its server — exact
+ * coordinates for `exact`, the street's centreline for `street`, and a point
+ * jittered inside roughly 500 m for `approximate` — and never send the exact
+ * coordinates to a client that should not see them.
+ *
+ * Accessibility: a `radiogroup` of `radio`s with `aria-checked`, each named by
+ * its title with the explanation as its hint. The map previews are decorative.
+ */
+
+export const DEFAULT_ADDRESS_PRECISION_OPTIONS: ReadonlyArray<AddressPrecisionOption> = [
+  {
+    value: 'exact',
+    title: 'Exact address',
+    description: 'The pin sits on the building. Best for homes that are easy to find anyway.',
+  },
+  {
+    value: 'street',
+    title: 'Street only',
+    description: 'Shows the street, not the number. The exact address is shared after booking or signing.',
+  },
+  {
+    value: 'approximate',
+    title: 'Approximate area',
+    description: 'Shows a circle of about 500 m. The most private option.',
+  },
+];
+
+const DEFAULT_FOOTNOTE =
+  'The published map follows this choice. Your exact address is only shared with people you confirm.';
+
+interface MapPaint {
+  ground: string;
+  block: string;
+  road: string;
+  accent: string;
+  accentWash: string;
+  pin: string;
+}
+
+function resolveMapPaint(theme: Theme): MapPaint {
+  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const dark = theme.isDark;
+  const ground = dark ? n[800] : n[100];
+  return {
+    ground,
+    block: dark ? mixColor(n[800], n[700], 0.5) : n[200],
+    road: dark ? n[900] : n[50],
+    accent: accent[500],
+    accentWash: mixColor(ground, accent[500], 0.2),
+    pin: theme.colors.text,
+  };
+}
+
+/** Bloom's placeholder map for one precision. Decorative. */
+export function PrecisionMapPlaceholder({ precision, height }: { precision: AddressPrecision; height: number }) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveMapPaint(theme), [theme]);
+  const circle = Math.round(height * 0.72);
+
+  return (
+    <View
+      aria-hidden
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      style={{ height, backgroundColor: paint.ground, overflow: 'hidden' }}
+    >
+      {/* City blocks */}
+      {[0.08, 0.62].map((top) =>
+        [0.04, 0.3, 0.62].map((left) => (
+          <View
+            key={`${top}-${left}`}
+            style={{
+              position: 'absolute',
+              top: `${top * 100}%`,
+              left: `${left * 100}%`,
+              width: '20%',
+              height: '28%',
+              borderRadius: 4,
+              backgroundColor: paint.block,
+            }}
+          />
+        )),
+      )}
+      {/* The street the home is on, and a cross street */}
+      <View
+        style={{
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          top: '44%',
+          height: 10,
+          backgroundColor: precision === 'street' ? paint.accent : paint.road,
+        }}
+      />
+      <View style={{ position: 'absolute', top: 0, bottom: 0, left: '55%', width: 8, backgroundColor: paint.road }} />
+      {precision === 'approximate' ? (
+        <View
+          style={{
+            position: 'absolute',
+            top: '50%',
+            left: '42%',
+            width: circle,
+            height: circle,
+            marginTop: -circle / 2,
+            marginLeft: -circle / 2,
+            borderRadius: circle / 2,
+            borderWidth: 2,
+            borderColor: paint.accent,
+            backgroundColor: paint.accentWash,
+          }}
+        />
+      ) : null}
+      {precision === 'exact' ? (
+        <View style={{ position: 'absolute', top: '50%', left: '42%', marginTop: -30, marginLeft: -14 }}>
+          <RiMapPin2Fill width={28} height={28} fill={paint.pin} />
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+function AddressPrecisionPickerComponent({
+  value,
+  onValueChange,
+  renderMap,
+  options = DEFAULT_ADDRESS_PRECISION_OPTIONS,
+  footnote = DEFAULT_FOOTNOTE,
+  accessibilityLabel = 'Address precision',
+  disabled = false,
+  style,
+  testID,
+}: AddressPrecisionPickerProps) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveSelectionPaint(theme), [theme]);
+  const [width, setWidth] = useState(0);
+  const row = width >= 720;
+  const mapHeight = row ? 112 : 96;
+
+  return (
+    <View testID={testID} style={[{ gap: 12 }, style]} onLayout={(e) => setWidth(e.nativeEvent.layout.width)}>
+      <View
+        role="radiogroup"
+        accessibilityLabel={accessibilityLabel}
+        aria-disabled={disabled || undefined}
+        style={{ flexDirection: row ? 'row' : 'column', alignItems: row ? 'stretch' : undefined, gap: 12 }}
+      >
+        {options.map((option) => (
+          <SelectionCard
+            key={option.value}
+            selection="single"
+            indicator="radio"
+            selected={value === option.value}
+            onPress={() => {
+              if (value !== option.value) onValueChange(option.value);
+            }}
+            title={option.title}
+            description={option.description}
+            media={renderMap ? renderMap(option.value) : <PrecisionMapPlaceholder precision={option.value} height={mapHeight} />}
+            disabled={disabled}
+            style={row ? { flex: 1, flexBasis: 0 } : undefined}
+            testID={testID ? `${testID}-${option.value}` : undefined}
+          />
+        ))}
+      </View>
+      {footnote ? (
+        <Text variant="caption-1-regular" style={{ color: paint.textSecondary }}>
+          {footnote}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+export const AddressPrecisionPicker = memo(AddressPrecisionPickerComponent);
+AddressPrecisionPicker.displayName = 'AddressPrecisionPicker';

package/src/listing-editor/ListingPreviewPane.tsx

@@ -0,0 +1,189 @@
+import React, { memo, useMemo } from 'react';
+import { Image, View } from 'react-native';
+
+import { resolveButtonRamps } from '../button/shared';
+import { useControllableState } from '../hooks/use-controllable-state';
+import { useImageResolver } from '../image-resolver/context';
+import { ListingCard } from '../listing-card';
+import { resolvePhoto } from '../listing-card/shared';
+import { ListingHeader } from '../listing-details';
+import { SegmentedControl, SegmentedControlItem, SegmentedControlItemText } from '../segmented-control';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import type { ListingPreviewData, ListingPreviewMode, ListingPreviewPaneProps } from './types';
+
+/**
+ * A side panel that previews the listing while it is edited: Bloom's own
+ * `ListingCard`, or a compact listing page, switched by a toggle.
+ *
+ *   panel    neutral-50 (dark neutral-900) fill, radius 20, p 20, gap 16
+ *   head     title (headline-semibold) and description (body-2-regular,
+ *            text-secondary) over a `SegmentedControl` (`tabs`, stretched)
+ *   card     `ListingCard` at most 320 wide, centred, non-interactive
+ *   page     a 340-wide frame (radius 20, 1px neutral-200 / dark neutral-700,
+ *            the page background): the cover photo at 4:3, `ListingHeader`
+ *            at `medium`, the facts row, the description (six lines), and the
+ *            price line under a hairline
+ *
+ * The preview is DRAWN from `listing`, so it is live as long as the app passes
+ * the draft it is editing. `renderPage` replaces the built-in page.
+ */
+
+const CARD_MAX_WIDTH = 320;
+const PAGE_WIDTH = 340;
+
+function ListingPreviewPaneComponent({
+  listing,
+  mode: modeProp,
+  defaultMode = 'card',
+  onModeChange,
+  renderPage,
+  title = 'Preview',
+  description = 'This is how guests will see your listing.',
+  cardLabel = 'Card',
+  pageLabel = 'Page',
+  toggleLabel = 'Preview as',
+  style,
+  testID,
+}: ListingPreviewPaneProps) {
+  const theme = useTheme();
+  const { neutral } = useMemo(() => resolveButtonRamps(theme), [theme]);
+  const [mode, setMode] = useControllableState<ListingPreviewMode>({
+    value: modeProp,
+    defaultValue: defaultMode,
+    onChange: onModeChange,
+  });
+
+  return (
+    <View
+      testID={testID}
+      style={[
+        {
+          gap: 16,
+          paddingTop: 20,
+          paddingBottom: 20,
+          paddingLeft: 20,
+          paddingRight: 20,
+          borderRadius: 20,
+          backgroundColor: theme.isDark ? neutral[900] : neutral[50],
+        },
+        style,
+      ]}
+    >
+      <View style={{ gap: 2 }}>
+        <Text variant="headline-semibold" style={{ color: theme.colors.text }}>
+          {title}
+        </Text>
+        {description ? (
+          <Text variant="body-2-regular" style={{ color: theme.colors.textSecondary }}>
+            {description}
+          </Text>
+        ) : null}
+      </View>
+      <SegmentedControl
+        label={toggleLabel}
+        type="tabs"
+        value={mode}
+        onChange={(next) => setMode(next as ListingPreviewMode)}
+        style={{ alignSelf: 'stretch' }}
+      >
+        <SegmentedControlItem value="card" testID={testID ? `${testID}-card-tab` : undefined}>
+          <SegmentedControlItemText>{cardLabel}</SegmentedControlItemText>
+        </SegmentedControlItem>
+        <SegmentedControlItem value="page" testID={testID ? `${testID}-page-tab` : undefined}>
+          <SegmentedControlItemText>{pageLabel}</SegmentedControlItemText>
+        </SegmentedControlItem>
+      </SegmentedControl>
+      <View
+        role="tabpanel"
+        accessibilityLabel={mode === 'card' ? cardLabel : pageLabel}
+        testID={testID ? `${testID}-${mode}` : undefined}
+        style={{ alignItems: 'center' }}
+      >
+        {mode === 'card' ? (
+          <ListingCard {...listing} style={{ width: '100%', maxWidth: CARD_MAX_WIDTH }} />
+        ) : renderPage ? (
+          renderPage(listing)
+        ) : (
+          <PagePreview listing={listing} />
+        )}
+      </View>
+    </View>
+  );
+}
+
+function PagePreview({ listing }: { listing: ListingPreviewData }) {
+  const theme = useTheme();
+  const resolver = useImageResolver();
+  const { neutral } = useMemo(() => resolveButtonRamps(theme), [theme]);
+  const cover = listing.photos[0] ? resolvePhoto(listing.photos[0], resolver, listing.photoVariant) : undefined;
+  const hairline = theme.isDark ? neutral[700] : neutral[200];
+
+  return (
+    <View
+      style={{
+        width: '100%',
+        maxWidth: PAGE_WIDTH,
+        borderRadius: 20,
+        borderWidth: 1,
+        borderColor: hairline,
+        backgroundColor: theme.colors.background,
+        overflow: 'hidden',
+      }}
+    >
+      <View style={{ width: '100%', aspectRatio: 4 / 3, backgroundColor: theme.isDark ? neutral[800] : neutral[100] }}>
+        {cover ? (
+          <Image source={{ uri: cover }} resizeMode="cover" style={{ width: '100%', height: '100%' }} />
+        ) : null}
+      </View>
+      <View style={{ gap: 12, paddingTop: 16, paddingBottom: 16, paddingLeft: 16, paddingRight: 16 }}>
+        <ListingHeader
+          title={listing.title}
+          size="medium"
+          headingLevel={2}
+          subtitle={listing.subtitle}
+          rating={listing.rating}
+          reviewsLabel={listing.reviewCount != null ? `${listing.reviewCount} reviews` : undefined}
+          location={listing.location}
+        />
+        {listing.facts && listing.facts.length > 0 ? (
+          <Text variant="body-2-regular" style={{ color: theme.colors.textSecondary }}>
+            {listing.facts.map((fact) => fact.accessibilityLabel ?? fact.label).join(' · ')}
+          </Text>
+        ) : null}
+        {listing.description ? (
+          <Text variant="body-regular" numberOfLines={6} style={{ color: theme.colors.text }}>
+            {listing.description}
+          </Text>
+        ) : null}
+      </View>
+      {listing.price || listing.total ? (
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'baseline',
+            gap: 4,
+            borderTopWidth: 1,
+            borderTopColor: hairline,
+            paddingTop: 14,
+            paddingBottom: 14,
+            paddingLeft: 16,
+            paddingRight: 16,
+          }}
+        >
+          <Text variant="headline-semibold" style={{ color: theme.colors.text }}>
+            {listing.price ?? listing.total}
+          </Text>
+          {listing.price && listing.priceUnit ? (
+            <Text variant="body-regular" style={{ color: theme.colors.textSecondary }}>
+              {listing.priceUnit}
+            </Text>
+          ) : null}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+export const ListingPreviewPane = memo(ListingPreviewPaneComponent);
+ListingPreviewPane.displayName = 'ListingPreviewPane';