@oxy.so/bloom 2.8.0 → 2.10.0

package/src/listing-details/ContactCard.tsx

@@ -0,0 +1,408 @@
+import React, { isValidElement, memo, useMemo } from 'react';
+import { Image, Pressable, View } from 'react-native';
+
+import { Avatar } from '../avatar';
+import { Button } from '../button';
+import { MENU_SHADOW } from '../floating/menu-palette';
+import { useControllableState } from '../hooks/use-controllable-state';
+import { useInteractionState } from '../hooks/use-interaction-state';
+import { RiCheckLine, RiHome4Line, RiPhoneLine, RiStarFill, RiTimeLine } from '../icons/remix';
+import { useImageResolver } from '../image-resolver/context';
+import { useInteractiveWebCss } from '../styles/interactive-web-css';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { HOST_CARD_AVATAR_SIZE } from './constants';
+import {
+  IS_WEB,
+  LISTING_DETAILS_CSS,
+  LISTING_DETAILS_STYLE_ID,
+  resolveImageUri,
+  resolveListingPalette,
+  webData,
+} from './shared';
+import type { ContactCardProps, ContactRole, ListingIcon } from './types';
+
+/**
+ * The person or business behind a listing — a host, a landlord, an agent or an
+ * agency: a profile card, then the details, the response time, the active
+ * listings, and the contact actions. `HostCard` is this card with
+ * `role="host"`.
+ *
+ *   card       radius 20, card surface (dark neutral-900), 1px neutral-200
+ *              (dark neutral-800) border, dropdown shadow, padding 24 / 20,
+ *              max width 420; hover (when pressable) steps the surface to
+ *              neutral-100 (dark neutral-800)
+ *   identity   avatar 104 (square-cornered for an agency) with a verified
+ *              check badge (primary disc, card ring), name title-1-semibold,
+ *              label body-2-semibold + 14 icon — the role label when no
+ *              `label` is given (none for a host)
+ *   stats      a column on the right, 1px hairlines between rows;
+ *              value title-3-semibold (+ 12 star), label caption-1-medium
+ *              text-secondary
+ *   agency     logo tile 40 (radius 10, hairline border, contained) + the
+ *              agency name in body-semibold
+ *   rows       icon 20 + body-regular rows, 12 apart: `details`, then the
+ *              response time (clock) and the active listings (home; a link
+ *              when `onPressListings` is set)
+ *   response   body-regular text-secondary lines
+ *   actions    medium Buttons, 8 apart, wrapping: Message (secondary for a
+ *              host, primary otherwise), Call (secondary, phone icon), and
+ *              "Show phone" (secondary, phone icon) which, once pressed, shows
+ *              the number in its place — a button calling `onCall` when that
+ *              is set, plain selectable text otherwise
+ */
+
+const DEFAULT_ROLE_LABELS: Record<ContactRole, string | undefined> = {
+  host: undefined,
+  landlord: 'Landlord',
+  agent: 'Agent',
+  agency: 'Agency',
+};
+
+const LOGO_SIZE = 40;
+
+function defaultActiveListingsLabel(count: number): string {
+  return count === 1 ? '1 active listing' : `${count} active listings`;
+}
+
+function ContactCardComponent({
+  role = 'host',
+  roleLabel,
+  name,
+  avatar,
+  verified = false,
+  verifiedLabel = 'Verified',
+  label: labelProp,
+  labelIcon: LabelIcon,
+  stats,
+  details,
+  responseLines,
+  agency,
+  logo,
+  responseTime,
+  activeListings,
+  activeListingsLabel = defaultActiveListingsLabel,
+  onPressListings,
+  phone,
+  phoneRevealed: phoneRevealedProp,
+  onPhoneRevealedChange,
+  showPhoneLabel = 'Show phone',
+  onCall,
+  callLabel = 'Call',
+  onMessage,
+  messageLabel,
+  onPressProfile,
+  avatarVariant = 'medium',
+  style,
+  testID,
+}: ContactCardProps) {
+  const theme = useTheme();
+  useInteractiveWebCss(LISTING_DETAILS_STYLE_ID, LISTING_DETAILS_CSS);
+  const palette = useMemo(() => resolveListingPalette(theme), [theme]);
+  const resolver = useImageResolver();
+  const { state: hovered, onIn, onOut } = useInteractionState();
+  const [phoneRevealed, setPhoneRevealed] = useControllableState({
+    value: phoneRevealedProp,
+    defaultValue: false,
+    onChange: onPhoneRevealedChange,
+  });
+
+  const label = labelProp ?? roleLabel ?? DEFAULT_ROLE_LABELS[role];
+  const isAgency = role === 'agency';
+  const logoSource = typeof logo === 'string' ? logo : undefined;
+  const avatarSource = avatar ?? (isAgency ? logoSource : undefined);
+
+  const badgeSize = Math.round(HOST_CARD_AVATAR_SIZE * 0.3);
+  const badge = verified ? (
+    <View
+      accessible
+      accessibilityRole="image"
+      accessibilityLabel={verifiedLabel}
+      testID={testID ? `${testID}-verified` : undefined}
+      style={{
+        width: badgeSize,
+        height: badgeSize,
+        borderRadius: badgeSize / 2,
+        borderWidth: 3,
+        borderColor: palette.card,
+        backgroundColor: palette.badge,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <RiCheckLine width={16} height={16} fill={palette.badgeForeground} />
+    </View>
+  ) : null;
+
+  const identity = (
+    <View style={{ flex: 1, minWidth: 0, alignItems: 'center', justifyContent: 'center', gap: 4 }}>
+      <View style={{ marginBottom: 8 }}>
+        <Avatar
+          source={avatarSource}
+          variant={avatarVariant}
+          size={HOST_CARD_AVATAR_SIZE}
+          name={name}
+          shape={isAgency ? 'square' : undefined}
+          verified={verified}
+          verifiedIcon={badge}
+        />
+      </View>
+      <Text
+        variant="title-1-semibold"
+        numberOfLines={2}
+        style={{ color: palette.text, textAlign: 'center' }}
+        testID={testID ? `${testID}-name` : undefined}
+      >
+        {name}
+      </Text>
+      {label ? (
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+          {LabelIcon ? <LabelIcon width={14} height={14} fill={palette.text} /> : null}
+          <Text variant="body-2-semibold" style={{ color: palette.text }} testID={testID ? `${testID}-label` : undefined}>
+            {label}
+          </Text>
+        </View>
+      ) : null}
+    </View>
+  );
+
+  const statsColumn =
+    stats && stats.length > 0 ? (
+      <View style={{ width: 112 }} testID={testID ? `${testID}-stats` : undefined}>
+        {stats.map((stat, index) => (
+          <View
+            key={`${stat.label}-${index}`}
+            testID={testID ? `${testID}-stat-${index}` : undefined}
+            style={{
+              paddingTop: index === 0 ? 0 : 12,
+              paddingBottom: index === stats.length - 1 ? 0 : 12,
+              borderTopWidth: index === 0 ? 0 : 1,
+              borderTopColor: palette.hairline,
+              gap: 2,
+            }}
+          >
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+              <Text variant="title-3-semibold" style={{ color: palette.text, fontVariant: ['tabular-nums'] }}>
+                {stat.value}
+              </Text>
+              {stat.star ? <RiStarFill width={12} height={12} fill={palette.text} /> : null}
+            </View>
+            <Text variant="caption-1-medium" style={{ color: palette.textSecondary }}>
+              {stat.label}
+            </Text>
+          </View>
+        ))}
+      </View>
+    ) : null;
+
+  const cardStyle: WebCssStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 20,
+    width: '100%',
+    maxWidth: 420,
+    paddingTop: 24,
+    paddingBottom: 24,
+    paddingLeft: 20,
+    paddingRight: 24,
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: palette.cardBorder,
+    backgroundColor: onPressProfile && hovered ? palette.hover : palette.card,
+    boxShadow: theme.isDark ? MENU_SHADOW.dark : MENU_SHADOW.light,
+    '--bloom-listing-ring': palette.ring,
+  };
+
+  const statsName = (stats ?? []).map((s) => `${s.value} ${s.label}`).join(', ');
+  const cardName = [name, label, verified ? verifiedLabel : undefined, statsName]
+    .filter(Boolean)
+    .join(', ');
+
+  const card = onPressProfile ? (
+    <Pressable
+      {...webData({ bloomListingPress: '' })}
+      accessibilityRole="button"
+      accessibilityLabel={cardName}
+      onPress={onPressProfile}
+      onHoverIn={onIn}
+      onHoverOut={onOut}
+      style={cardStyle}
+      testID={testID ? `${testID}-card` : undefined}
+    >
+      {identity}
+      {statsColumn}
+    </Pressable>
+  ) : (
+    <View style={cardStyle} testID={testID ? `${testID}-card` : undefined}>
+      {identity}
+      {statsColumn}
+    </View>
+  );
+
+  // The agency row: a role="agency" card already draws the logo as its avatar.
+  const logoUri = resolveImageUri(logoSource, resolver, 'thumb');
+  const logoNode = isValidElement(logo) ? logo : logoUri ? (
+    <Image
+      source={{ uri: logoUri }}
+      resizeMode="contain"
+      accessible={false}
+      importantForAccessibility="no"
+      style={{ width: LOGO_SIZE - 10, height: LOGO_SIZE - 10 }}
+    />
+  ) : null;
+  const agencyRow =
+    agency && !(isAgency && !avatar) ? (
+      <View
+        accessible
+        accessibilityLabel={agency}
+        style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}
+        testID={testID ? `${testID}-agency` : undefined}
+      >
+        {logoNode ? (
+          <View
+            style={{
+              width: LOGO_SIZE,
+              height: LOGO_SIZE,
+              borderRadius: 10,
+              borderWidth: 1,
+              borderColor: palette.cardBorder,
+              backgroundColor: palette.card,
+              overflow: 'hidden',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+            testID={testID ? `${testID}-logo` : undefined}
+          >
+            {logoNode}
+          </View>
+        ) : null}
+        <Text variant="body-semibold" numberOfLines={1} style={{ flex: 1, minWidth: 0, color: palette.text }}>
+          {agency}
+        </Text>
+      </View>
+    ) : null;
+
+  const rows: { icon: ListingIcon; text: string; onPress?: () => void; id: string }[] = [
+    ...(details ?? []).map((d, i) => ({ icon: d.icon, text: d.text, id: `detail-${i}` })),
+    ...(responseTime ? [{ icon: RiTimeLine, text: responseTime, id: 'response-time' }] : []),
+    ...(activeListings != null
+      ? [{ icon: RiHome4Line, text: activeListingsLabel(activeListings), onPress: onPressListings, id: 'listings' }]
+      : []),
+  ];
+
+  const linkStyle: WebCssStyle = { alignSelf: 'flex-start', borderRadius: 4, '--bloom-listing-ring': palette.ring };
+
+  const revealPhone = () => {
+    if (!phoneRevealed) setPhoneRevealed(true);
+    else onCall?.();
+  };
+
+  const actions =
+    onMessage || onCall || phone ? (
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }} testID={testID ? `${testID}-actions` : undefined}>
+        {onMessage ? (
+          <Button
+            variant={role === 'host' ? 'secondary' : 'primary'}
+            onPress={onMessage}
+            testID={testID ? `${testID}-message` : undefined}
+          >
+            {messageLabel ?? (role === 'host' ? 'Message host' : 'Message')}
+          </Button>
+        ) : null}
+        {onCall ? (
+          <Button variant="secondary" leadingIcon={RiPhoneLine} onPress={onCall} testID={testID ? `${testID}-call` : undefined}>
+            {callLabel}
+          </Button>
+        ) : null}
+        {phone ? (
+          <View {...(IS_WEB ? { 'aria-live': 'polite' } : { accessibilityLiveRegion: 'polite' as const })}>
+            {phoneRevealed && !onCall ? (
+              // Revealed with nothing to call: the number is text, not a dead button.
+              <View
+                style={{ height: 36, flexDirection: 'row', alignItems: 'center', gap: 6, paddingLeft: 8, paddingRight: 8 }}
+                testID={testID ? `${testID}-phone` : undefined}
+              >
+                <View importantForAccessibility="no-hide-descendants" accessibilityElementsHidden>
+                  <RiPhoneLine width={20} height={20} fill={palette.text} />
+                </View>
+                <Text variant="body-semibold" selectable style={{ color: palette.text, fontVariant: ['tabular-nums'] }}>
+                  {phone}
+                </Text>
+              </View>
+            ) : (
+              <Button
+                variant="secondary"
+                leadingIcon={RiPhoneLine}
+                onPress={revealPhone}
+                textStyle={phoneRevealed ? { fontVariant: ['tabular-nums'] } : undefined}
+                testID={testID ? `${testID}-phone` : undefined}
+              >
+                {phoneRevealed ? phone : showPhoneLabel}
+              </Button>
+            )}
+          </View>
+        ) : null}
+      </View>
+    ) : null;
+
+  return (
+    <View style={[{ width: '100%', gap: 24 }, style]} testID={testID}>
+      {card}
+      {agencyRow}
+      {rows.length > 0 ? (
+        <View role="list" style={{ gap: 12 }}>
+          {rows.map(({ icon: Icon, text, onPress, id }) => {
+            const content = (
+              <>
+                <View importantForAccessibility="no-hide-descendants" accessibilityElementsHidden>
+                  <Icon width={20} height={20} fill={palette.text} />
+                </View>
+                <Text
+                  variant="body-regular"
+                  style={[
+                    { flex: 1, minWidth: 0, color: palette.text },
+                    onPress ? { textDecorationLine: 'underline' } : null,
+                  ]}
+                >
+                  {text}
+                </Text>
+              </>
+            );
+            const rowStyle = { flexDirection: 'row' as const, alignItems: 'center' as const, gap: 12 };
+            return (
+              <View key={id} role="listitem" testID={testID ? `${testID}-${id}` : undefined}>
+                {onPress ? (
+                  <Pressable
+                    {...webData({ bloomListingPress: '' })}
+                    accessibilityRole="link"
+                    accessibilityLabel={text}
+                    onPress={onPress}
+                    style={[rowStyle, linkStyle]}
+                  >
+                    {content}
+                  </Pressable>
+                ) : (
+                  <View style={rowStyle}>{content}</View>
+                )}
+              </View>
+            );
+          })}
+        </View>
+      ) : null}
+      {responseLines && responseLines.length > 0 ? (
+        <View style={{ gap: 4 }}>
+          {responseLines.map((line, index) => (
+            <Text key={`${line}-${index}`} variant="body-regular" style={{ color: palette.textSecondary }}>
+              {line}
+            </Text>
+          ))}
+        </View>
+      ) : null}
+      {actions}
+    </View>
+  );
+}
+
+export const ContactCard = memo(ContactCardComponent);
+ContactCard.displayName = 'ContactCard';

package/src/listing-details/FloorPlan.tsx

@@ -0,0 +1,199 @@
+import React, { memo, useMemo } from 'react';
+import { Image, Pressable, StyleSheet, View } from 'react-native';
+
+import { resolveButtonRamps } from '../button/shared';
+import { useInteractionState } from '../hooks/use-interaction-state';
+import { RiExpandDiagonalSLine } from '../icons/remix';
+import { useImageResolver } from '../image-resolver/context';
+import { useInteractiveWebCss } from '../styles/interactive-web-css';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { FLOOR_PLAN_TWO_COLUMN_MIN_WIDTH } from './constants';
+import {
+  LISTING_DETAILS_CSS,
+  LISTING_DETAILS_STYLE_ID,
+  resolveImageUri,
+  resolveListingPalette,
+  webData,
+} from './shared';
+import type { FloorPlanItem, FloorPlanProps } from './types';
+import { useContainerWidth } from './use-container-width';
+
+/**
+ * The floor plans of a home: one tile per plan, a label under each.
+ *
+ *   columns   `auto` measures its own width: 1 below 560, 2 from 560, 16 apart
+ *             (rows 24 apart); one plan always spans the width
+ *   tile      radius 16, 1px neutral-200 (dark neutral-800) border, aspect
+ *             `aspectRatio` (4 / 3), the plan CONTAINED with 16 inset on
+ *             neutral-50 in BOTH modes — a plan is dark line work on a light
+ *             or transparent sheet, and would vanish on a dark tile
+ *   expand    a 32 disc top-right (card surface, hairline border) with an
+ *             expand glyph, when `onPressPlan` is set; hover steps the tile's
+ *             border to neutral-400 (web)
+ *   label     body-semibold, 12 under the tile; `description` body-2-regular
+ *             text-secondary
+ *
+ * Pressing a tile reports its index — open `ZoomableMediaGallery` there (the
+ * same wiring as `ListingPhotoGrid`).
+ */
+
+const GAP = 16;
+
+function defaultPlanLabel(plan: FloorPlanItem, position: number, total: number): string {
+  return `${plan.alt ?? plan.label}, floor plan ${position} of ${total}`;
+}
+
+interface PlanTileProps {
+  plan: FloorPlanItem;
+  uri: string | undefined;
+  name: string;
+  aspectRatio: number;
+  onPress?: () => void;
+  testID?: string;
+}
+
+function PlanTile({ plan, uri, name, aspectRatio, onPress, testID }: PlanTileProps) {
+  const theme = useTheme();
+  const palette = useMemo(() => resolveListingPalette(theme), [theme]);
+  const { neutral: n } = useMemo(() => resolveButtonRamps(theme), [theme]);
+  const { state: hovered, onIn, onOut } = useInteractionState();
+
+  const frame: WebCssStyle = {
+    width: '100%',
+    aspectRatio,
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: onPress && hovered ? n[400] : palette.cardBorder,
+    backgroundColor: n[50],
+    overflow: 'hidden',
+    '--bloom-listing-ring': palette.ring,
+  };
+
+  const inner = (
+    <>
+      {uri ? (
+        <View style={[StyleSheet.absoluteFill, { paddingTop: 16, paddingBottom: 16, paddingLeft: 16, paddingRight: 16 }]}>
+          <Image
+            source={{ uri }}
+            resizeMode="contain"
+            accessible={false}
+            importantForAccessibility="no"
+            style={{ width: '100%', height: '100%' }}
+          />
+        </View>
+      ) : null}
+      {onPress ? (
+        <View
+          pointerEvents="none"
+          importantForAccessibility="no-hide-descendants"
+          accessibilityElementsHidden
+          testID={testID ? `${testID}-expand` : undefined}
+          style={{
+            position: 'absolute',
+            top: 12,
+            right: 12,
+            width: 32,
+            height: 32,
+            borderRadius: 16,
+            borderWidth: 1,
+            borderColor: palette.cardBorder,
+            backgroundColor: palette.card,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <RiExpandDiagonalSLine width={16} height={16} fill={palette.text} />
+        </View>
+      ) : null}
+    </>
+  );
+
+  return (
+    <View style={{ gap: 12 }}>
+      {onPress ? (
+        <Pressable
+          {...webData({ bloomListingPress: '' })}
+          accessibilityRole="button"
+          accessibilityLabel={name}
+          onPress={onPress}
+          onHoverIn={onIn}
+          onHoverOut={onOut}
+          style={frame}
+          testID={testID}
+        >
+          {inner}
+        </Pressable>
+      ) : (
+        <View accessible accessibilityRole="image" accessibilityLabel={name} style={frame} testID={testID}>
+          {inner}
+        </View>
+      )}
+      <View style={{ gap: 2 }} importantForAccessibility="no-hide-descendants" accessibilityElementsHidden>
+        <Text variant="body-semibold" style={{ color: palette.text }} testID={testID ? `${testID}-label` : undefined}>
+          {plan.label}
+        </Text>
+        {plan.description ? (
+          <Text variant="body-2-regular" style={{ color: palette.textSecondary }}>
+            {plan.description}
+          </Text>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+function FloorPlanComponent({
+  plans,
+  onPressPlan,
+  columns = 'auto',
+  aspectRatio = 4 / 3,
+  planLabel = defaultPlanLabel,
+  imageVariant = 'large',
+  style,
+  testID,
+}: FloorPlanProps) {
+  useInteractiveWebCss(LISTING_DETAILS_STYLE_ID, LISTING_DETAILS_CSS);
+  const resolver = useImageResolver();
+  const { width, onLayout } = useContainerWidth();
+
+  const wanted = columns === 'auto' ? (width != null && width >= FLOOR_PLAN_TWO_COLUMN_MIN_WIDTH ? 2 : 1) : columns;
+  const count = plans.length <= 1 ? 1 : wanted;
+  const total = plans.length;
+
+  return (
+    <View
+      onLayout={onLayout}
+      role="list"
+      style={[{ width: '100%', flexDirection: 'row', flexWrap: 'wrap', rowGap: 24 }, style]}
+      testID={testID}
+    >
+      {plans.map((plan, index) => (
+        <View
+          key={`${plan.source}-${index}`}
+          role="listitem"
+          style={{
+            width: `${100 / count}%`,
+            // Two columns split the gutter, so both tiles are equal and the edges stay flush.
+            paddingRight: count > 1 && index % 2 === 0 ? GAP / 2 : 0,
+            paddingLeft: count > 1 && index % 2 === 1 ? GAP / 2 : 0,
+          }}
+          testID={testID ? `${testID}-item-${index}` : undefined}
+        >
+          <PlanTile
+            plan={plan}
+            uri={resolveImageUri(plan.source, resolver, imageVariant)}
+            name={planLabel(plan, index + 1, total)}
+            aspectRatio={aspectRatio}
+            onPress={onPressPlan ? () => onPressPlan(index) : undefined}
+            testID={testID ? `${testID}-plan-${index}` : undefined}
+          />
+        </View>
+      ))}
+    </View>
+  );
+}
+
+export const FloorPlan = memo(FloorPlanComponent);
+FloorPlan.displayName = 'FloorPlan';