@oxy.so/bloom 2.9.0 → 2.11.0

package/lib/module/listing-actions/ApplicationChecklist.js

@@ -0,0 +1,200 @@
+"use strict";
+
+import React, { memo } from 'react';
+import { View } from 'react-native';
+import { ActionCardShell } from "../booking/ActionCard.js";
+import { Badge } from "../badge/index.js";
+import { Button } from '../button';
+import { RiCheckboxBlankCircleLine } from "../icons/remix/RiCheckboxBlankCircleLine.js";
+import { RiCheckboxCircleFill } from "../icons/remix/RiCheckboxCircleFill.js";
+import { RiCloseCircleFill } from "../icons/remix/RiCloseCircleFill.js";
+import { RiEyeLine } from "../icons/remix/RiEyeLine.js";
+import { RiTimeLine } from "../icons/remix/RiTimeLine.js";
+import { RiUploadLine } from "../icons/remix/RiUploadLine.js";
+import { Meter } from "../stat-bar/index.js";
+import { resolveAccentColors } from "../theme/accent-colors.js";
+import { Text } from "../typography/index.js";
+import { APPLICATION_CHECKLIST_MAX_WIDTH, APPLICATION_ITEM_STATUS } from "./constants.js";
+import { useActionPalette } from "./parts.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const STATUS_ICON = {
+  missing: RiCheckboxBlankCircleLine,
+  uploaded: RiTimeLine,
+  verified: RiCheckboxCircleFill,
+  rejected: RiCloseCircleFill
+};
+
+/** An item counts towards progress once it is uploaded or verified. */
+export function isApplicationItemReady(item) {
+  return item.status === 'uploaded' || item.status === 'verified';
+}
+
+/**
+ * The documents a rental application needs, and where each one stands.
+ *
+ *   header     title headline-semibold; "{done} of {total} ready"
+ *              body-2-regular text-secondary on the right
+ *   progress   12 below; a 6-tall `Meter` — the shared neutral-200 / 700 track
+ *              and accent fill — a `progressbar` over uploaded + verified items
+ *   rows       16 below, 1px hairlines between; each: a 20 status glyph
+ *              (missing neutral, in review accent, verified success, rejected
+ *              error), title body-medium + subtle status `Badge`, the
+ *              description body-2-regular text-secondary — or the rejection
+ *              reason in the error colour — and a small secondary action
+ *              (Upload / View / Replace) on the right
+ */
+function ApplicationChecklistComponent({
+  title = 'Your application',
+  items,
+  onItemAction,
+  formatProgress = (done, total) => `${done} of ${total} ready`,
+  statusLabels,
+  footer,
+  maxWidth = APPLICATION_CHECKLIST_MAX_WIDTH,
+  style,
+  testID
+}) {
+  const palette = useActionPalette();
+  const {
+    theme
+  } = palette;
+  const id = part => testID ? `${testID}-${part}` : undefined;
+  const done = items.filter(isApplicationItemReady).length;
+  const total = items.length;
+  const progressText = formatProgress(done, total);
+  const glyphColor = status => status === 'missing' ? palette.textSecondary : resolveAccentColors(theme.colors, status === 'uploaded' ? 'primary' : status === 'verified' ? 'success' : 'error', 'outlined').foreground;
+  const errorText = resolveAccentColors(theme.colors, 'error', 'outlined').foreground;
+  return /*#__PURE__*/_jsxs(ActionCardShell, {
+    testID: testID,
+    maxWidth: maxWidth,
+    style: style,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'baseline',
+        gap: 12
+      },
+      children: [title != null ? /*#__PURE__*/_jsx(Text, {
+        variant: "headline-semibold",
+        accessibilityRole: "header",
+        style: {
+          flex: 1,
+          minWidth: 0,
+          color: palette.text
+        },
+        children: title
+      }) : /*#__PURE__*/_jsx(View, {
+        style: {
+          flex: 1
+        }
+      }), /*#__PURE__*/_jsx(Text, {
+        variant: "body-2-regular",
+        importantForAccessibility: "no",
+        accessibilityElementsHidden: true,
+        testID: id('progress-text'),
+        style: {
+          color: palette.textSecondary,
+          fontVariant: ['tabular-nums']
+        },
+        children: progressText
+      })]
+    }), /*#__PURE__*/_jsx(Meter, {
+      value: done,
+      max: total,
+      height: 6,
+      accessibilityLabel: title ?? 'Application progress',
+      valueText: progressText,
+      testID: id('progress'),
+      style: {
+        marginTop: 12
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        marginTop: 8
+      },
+      children: items.map((item, index) => {
+        const info = APPLICATION_ITEM_STATUS[item.status];
+        const Glyph = STATUS_ICON[item.status];
+        const actionLabel = item.actionLabel === undefined ? info.action : item.actionLabel;
+        const onAction = item.onAction ?? (onItemAction ? () => onItemAction(item) : undefined);
+        const rejected = item.status === 'rejected';
+        const detail = rejected && item.reason ? item.reason : item.description;
+        return /*#__PURE__*/_jsxs(View, {
+          testID: id(`item-${item.key}`),
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 12,
+            paddingTop: 14,
+            paddingBottom: 14,
+            borderTopWidth: index === 0 ? 0 : 1,
+            borderTopColor: palette.border
+          },
+          children: [/*#__PURE__*/_jsx(View, {
+            style: {
+              alignSelf: 'flex-start',
+              paddingTop: 1
+            },
+            children: /*#__PURE__*/_jsx(Glyph, {
+              width: 20,
+              height: 20,
+              fill: glyphColor(item.status)
+            })
+          }), /*#__PURE__*/_jsxs(View, {
+            style: {
+              flex: 1,
+              minWidth: 0,
+              gap: 2
+            },
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: {
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                alignItems: 'center',
+                columnGap: 8,
+                rowGap: 4
+              },
+              children: [/*#__PURE__*/_jsx(Text, {
+                variant: "body-medium",
+                style: {
+                  color: palette.text,
+                  flexShrink: 1
+                },
+                children: item.title
+              }), /*#__PURE__*/_jsx(Badge, {
+                variant: "subtle",
+                color: info.tone,
+                size: "small",
+                content: statusLabels?.[item.status] ?? info.label,
+                testID: id(`item-${item.key}-status`)
+              })]
+            }), detail ? /*#__PURE__*/_jsx(Text, {
+              variant: "body-2-regular",
+              testID: id(`item-${item.key}-detail`),
+              style: {
+                color: rejected && item.reason ? errorText : palette.textSecondary
+              },
+              children: detail
+            }) : null]
+          }), actionLabel ? /*#__PURE__*/_jsx(Button, {
+            variant: item.status === 'missing' || rejected ? 'primary' : 'secondary',
+            size: "small",
+            leadingIcon: item.status === 'missing' || rejected ? RiUploadLine : RiEyeLine,
+            onPress: onAction,
+            accessibilityLabel: `${actionLabel} ${item.title}`,
+            testID: id(`item-${item.key}-action`),
+            children: actionLabel
+          }) : null]
+        }, item.key);
+      })
+    }), footer != null ? /*#__PURE__*/_jsx(View, {
+      style: {
+        marginTop: 16
+      },
+      children: footer
+    }) : null]
+  });
+}
+export const ApplicationChecklist = /*#__PURE__*/memo(ApplicationChecklistComponent);
+ApplicationChecklist.displayName = 'ApplicationChecklist';
+//# sourceMappingURL=ApplicationChecklist.js.map

package/lib/module/listing-actions/ApplicationChecklist.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","View","ActionCardShell","Badge","Button","RiCheckboxBlankCircleLine","RiCheckboxCircleFill","RiCloseCircleFill","RiEyeLine","RiTimeLine","RiUploadLine","Meter","resolveAccentColors","Text","APPLICATION_CHECKLIST_MAX_WIDTH","APPLICATION_ITEM_STATUS","useActionPalette","jsx","_jsx","jsxs","_jsxs","STATUS_ICON","missing","uploaded","verified","rejected","isApplicationItemReady","item","status","ApplicationChecklistComponent","title","items","onItemAction","formatProgress","done","total","statusLabels","footer","maxWidth","style","testID","palette","theme","id","part","undefined","filter","length","progressText","glyphColor","textSecondary","colors","foreground","errorText","children","flexDirection","alignItems","gap","variant","accessibilityRole","flex","minWidth","color","text","importantForAccessibility","accessibilityElementsHidden","fontVariant","value","max","height","accessibilityLabel","valueText","marginTop","map","index","info","Glyph","actionLabel","action","onAction","detail","reason","description","key","paddingTop","paddingBottom","borderTopWidth","borderTopColor","border","alignSelf","width","fill","flexWrap","columnGap","rowGap","flexShrink","tone","size","content","label","leadingIcon","onPress","ApplicationChecklist","displayName"],"sourceRoot":"../../../src","sources":["listing-actions/ApplicationChecklist.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/listing-actions/ExchangeProposalCard.js

@@ -0,0 +1,228 @@
+"use strict";
+
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import { Platform, View } from 'react-native';
+import { ActionCardNote, ActionCardShell } from "../booking/ActionCard.js";
+import { BookingFieldCell } from "../booking/BookingFieldCell.js";
+import { BOOKING_FIELD_RADIUS } from "../booking/shared.js";
+import { Button } from '../button';
+import { Chip } from "../chip/index.js";
+import { RiArrowLeftRightLine } from "../icons/remix/RiArrowLeftRightLine.js";
+import { borderRadius } from "../styles/tokens.js";
+import { EXCHANGE_MODE_LABELS, EXCHANGE_STACK_BELOW } from "./constants.js";
+import { HomeTile, useActionPalette, useFocusSheet } from "./parts.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const IS_WEB = Platform.OS === 'web';
+const SWAP_GLYPH = 36;
+const HOMES_GAP = 10;
+/** A tile's caption-2 label line (15) and the gap under it (8). */
+const TILE_LABEL = 23;
+const ALL_MODES = ['swap', 'host', 'both'];
+
+/**
+ * A home-swap proposal: your home and theirs, when, how many, and how.
+ *
+ *   homes      two `HomeTile`s — label caption-2-bold uppercase, a 4:3 photo
+ *              radius 12, title body-2-medium, location and size
+ *              caption-1-regular text-secondary — with a 36 round swap glyph
+ *              between them (1px hairline, surface fill). Below 360 wide
+ *              (`layout="auto"`) they stack as 72-square rows and the glyph
+ *              turns 90°
+ *   box        20 below; DATES | GUESTS cells, `BookingCard`'s box
+ *   modes      16 below; `Chip`s (xl — 32 tall, a target rather than a tag —
+ *              `selected` for the chosen mode)
+ *   button     16 below; "Propose a swap" primary large, full width
+ *   note       12 below; centred
+ */
+function ExchangeProposalCardComponent({
+  yourHome,
+  theirHome,
+  yourHomeLabel = 'Your home',
+  theirHomeLabel = 'Their home',
+  dates,
+  onPressDates,
+  guests,
+  onPressGuests,
+  datesLabel = 'Dates',
+  guestsLabel = 'Guests',
+  datesPlaceholder = 'Add dates',
+  guestsPlaceholder = 'Add guests',
+  mode,
+  onModeChange,
+  modes = ALL_MODES,
+  modeLabels,
+  proposeLabel = 'Propose a swap',
+  onPropose,
+  proposeDisabled = false,
+  loading = false,
+  note,
+  footer,
+  layout = 'auto',
+  style,
+  testID
+}) {
+  const palette = useActionPalette();
+  useFocusSheet();
+  const [width, setWidth] = useState(null);
+  const onLayout = useCallback(e => {
+    setWidth(Math.round(e.nativeEvent.layout.width));
+  }, []);
+  const [rowWidth, setRowWidth] = useState(null);
+  const onRowLayout = useCallback(e => {
+    setRowWidth(Math.round(e.nativeEvent.layout.width));
+  }, []);
+  const stacked = layout === 'vertical' || layout === 'auto' && width != null && width < EXCHANGE_STACK_BELOW;
+  const id = part => testID ? `${testID}-${part}` : undefined;
+  const labels = useMemo(() => ({
+    ...EXCHANGE_MODE_LABELS,
+    ...modeLabels
+  }), [modeLabels]);
+
+  // Side by side, the glyph sits on the photos' centre line: the label (15 +
+  // 8 gap) plus half a 4:3 photo as wide as one tile.
+  const tileWidth = rowWidth != null ? (rowWidth - SWAP_GLYPH - HOMES_GAP * 2) / 2 : 0;
+  const arrowTop = rowWidth != null ? Math.round(TILE_LABEL + tileWidth * 3 / 4 / 2 - SWAP_GLYPH / 2) : 0;
+  const arrow = /*#__PURE__*/_jsx(View, {
+    testID: id('swap-glyph'),
+    importantForAccessibility: "no-hide-descendants",
+    accessibilityElementsHidden: true,
+    ...(IS_WEB ? {
+      'aria-hidden': true
+    } : null),
+    style: {
+      width: SWAP_GLYPH,
+      height: SWAP_GLYPH,
+      borderRadius: borderRadius.full,
+      borderWidth: 1,
+      borderColor: palette.border,
+      backgroundColor: palette.surface,
+      alignItems: 'center',
+      justifyContent: 'center',
+      alignSelf: stacked ? 'center' : 'flex-start',
+      marginTop: stacked ? 0 : arrowTop,
+      transform: stacked ? [{
+        rotate: '90deg'
+      }] : undefined
+    },
+    children: /*#__PURE__*/_jsx(RiArrowLeftRightLine, {
+      width: 18,
+      height: 18,
+      fill: palette.text
+    })
+  });
+  return /*#__PURE__*/_jsxs(ActionCardShell, {
+    testID: testID,
+    onLayout: onLayout,
+    style: style,
+    children: [/*#__PURE__*/_jsxs(View, {
+      testID: id('homes'),
+      onLayout: onRowLayout,
+      style: {
+        flexDirection: stacked ? 'column' : 'row',
+        alignItems: stacked ? 'stretch' : 'flex-start',
+        gap: stacked ? 8 : HOMES_GAP
+      },
+      children: [/*#__PURE__*/_jsx(HomeTile, {
+        home: yourHome,
+        label: yourHomeLabel,
+        orientation: stacked ? 'horizontal' : 'vertical',
+        style: stacked ? undefined : {
+          flex: 1,
+          minWidth: 0
+        },
+        testID: id('your-home')
+      }), arrow, /*#__PURE__*/_jsx(HomeTile, {
+        home: theirHome,
+        label: theirHomeLabel,
+        orientation: stacked ? 'horizontal' : 'vertical',
+        style: stacked ? undefined : {
+          flex: 1,
+          minWidth: 0
+        },
+        testID: id('their-home')
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      testID: id('fields'),
+      style: {
+        marginTop: 20,
+        flexDirection: 'row',
+        borderWidth: 1,
+        borderColor: palette.fieldBorder,
+        borderRadius: BOOKING_FIELD_RADIUS
+      },
+      children: [/*#__PURE__*/_jsx(BookingFieldCell, {
+        label: datesLabel,
+        value: dates,
+        placeholder: datesPlaceholder,
+        active: false,
+        palette: palette,
+        onPress: onPressDates ? () => onPressDates() : undefined,
+        style: {
+          flex: 1,
+          minWidth: 0
+        },
+        testID: id('dates')
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          width: 1,
+          backgroundColor: palette.fieldBorder
+        }
+      }), /*#__PURE__*/_jsx(BookingFieldCell, {
+        label: guestsLabel,
+        value: guests,
+        placeholder: guestsPlaceholder,
+        active: false,
+        palette: palette,
+        onPress: onPressGuests ? () => onPressGuests() : undefined,
+        style: {
+          flex: 1,
+          minWidth: 0
+        },
+        testID: id('guests')
+      })]
+    }), mode !== undefined ? /*#__PURE__*/_jsx(View, {
+      testID: id('modes'),
+      style: {
+        marginTop: 16,
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 8
+      },
+      children: modes.map(value => /*#__PURE__*/_jsx(Chip, {
+        size: "xl",
+        variant: "outlined",
+        selected: mode === value,
+        onPress: onModeChange ? () => onModeChange(value) : undefined,
+        testID: id(`mode-${value}`),
+        children: labels[value]
+      }, value))
+    }) : null, /*#__PURE__*/_jsx(Button, {
+      variant: "primary",
+      size: "large",
+      fullWidth: true,
+      onPress: onPropose,
+      disabled: proposeDisabled,
+      loading: loading,
+      style: {
+        marginTop: 16,
+        alignSelf: 'stretch'
+      },
+      testID: id('propose'),
+      children: proposeLabel
+    }), note != null ? /*#__PURE__*/_jsx(ActionCardNote, {
+      style: {
+        marginTop: 12
+      },
+      children: note
+    }) : null, footer != null ? /*#__PURE__*/_jsx(View, {
+      style: {
+        marginTop: 24,
+        alignItems: 'center'
+      },
+      children: footer
+    }) : null]
+  });
+}
+export const ExchangeProposalCard = /*#__PURE__*/memo(ExchangeProposalCardComponent);
+ExchangeProposalCard.displayName = 'ExchangeProposalCard';
+//# sourceMappingURL=ExchangeProposalCard.js.map

package/lib/module/listing-actions/ExchangeProposalCard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useCallback","useMemo","useState","Platform","View","ActionCardNote","ActionCardShell","BookingFieldCell","BOOKING_FIELD_RADIUS","Button","Chip","RiArrowLeftRightLine","borderRadius","EXCHANGE_MODE_LABELS","EXCHANGE_STACK_BELOW","HomeTile","useActionPalette","useFocusSheet","jsx","_jsx","jsxs","_jsxs","IS_WEB","OS","SWAP_GLYPH","HOMES_GAP","TILE_LABEL","ALL_MODES","ExchangeProposalCardComponent","yourHome","theirHome","yourHomeLabel","theirHomeLabel","dates","onPressDates","guests","onPressGuests","datesLabel","guestsLabel","datesPlaceholder","guestsPlaceholder","mode","onModeChange","modes","modeLabels","proposeLabel","onPropose","proposeDisabled","loading","note","footer","layout","style","testID","palette","width","setWidth","onLayout","e","Math","round","nativeEvent","rowWidth","setRowWidth","onRowLayout","stacked","id","part","undefined","labels","tileWidth","arrowTop","arrow","importantForAccessibility","accessibilityElementsHidden","height","full","borderWidth","borderColor","border","backgroundColor","surface","alignItems","justifyContent","alignSelf","marginTop","transform","rotate","children","fill","text","flexDirection","gap","home","label","orientation","flex","minWidth","fieldBorder","value","placeholder","active","onPress","flexWrap","map","size","variant","selected","fullWidth","disabled","ExchangeProposalCard","displayName"],"sourceRoot":"../../../src","sources":["listing-actions/ExchangeProposalCard.tsx"],"mappings":"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","ignoreList":[]}