@oxy.so/bloom 4.0.0 → 4.1.0

package/src/carrier-quote/types.ts

@@ -0,0 +1,199 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { BloomIconComponent } from '../icons/icon-component';
+import type { PriceLine, PriceTotal } from '../price-breakdown';
+
+/**
+ * A mark the LIST puts on a quote, not the quote on itself.
+ *
+ * `cheapest` and `fastest` are statements about the set: a card handed one out
+ * of context would be claiming something it cannot know. `CarrierQuoteList`
+ * derives them from `priceValue` / `etaMinutes` and passes them down, and a
+ * caller rendering a lone card supplies them only if it has the same set.
+ */
+export type CarrierQuoteMark = 'cheapest' | 'fastest';
+
+/** What the list orders by. */
+export type CarrierQuoteSort = 'price' | 'eta' | 'rating';
+
+/** `comfortable` is the offers screen; `compact` fits a sheet or a side panel. */
+export type CarrierQuoteDensity = 'comfortable' | 'compact';
+
+export interface CarrierQuoteCarrier {
+  /** Identifies the carrier to the app. Not drawn. */
+  id: string;
+  /** The name on the card — a person or a company. */
+  name: string;
+  /** A URL, an `{ uri }`, or an `ImageResolver` id. */
+  avatar?: string;
+  /**
+   * The rating on a 5 scale, handed straight to `Rating`. `null` (or omitted)
+   * is a carrier with no rating yet, which `Rating` draws as "New".
+   */
+  rating?: number | string | null;
+  /** How many jobs they have done. A string is drawn as given ("1.2k"). */
+  jobs?: number | string;
+  /** What they will arrive in — "Van", "Cargo bike". */
+  vehicle?: string;
+  /** The vehicle's glyph, drawn in the vehicle tile. */
+  vehicleIcon?: BloomIconComponent;
+  /** Draws the verified mark after the name. */
+  verified?: boolean;
+  /** A one-line trade line under the name — "Larkspur Freight · Lisbon". */
+  detail?: string;
+}
+
+export interface CarrierQuote {
+  /** Identifies the offer to `onAccept` / `onMessage` / `onDecline`, and keys the row. */
+  id: string;
+  carrier: CarrierQuoteCarrier;
+  /**
+   * The offer, PRE-FORMATTED with its currency: `"€38.40"`. Nothing in this
+   * family parses, sums, converts or rounds an amount.
+   */
+  price: string;
+  /** A quieter line under the price — "All in, VAT included". */
+  priceNote?: string;
+  /** The itemisation, handed to `PriceSummary` unchanged. */
+  priceLines?: readonly PriceLine[];
+  /** The summary's own total row. Without it the breakdown draws the lines and no rule. */
+  priceTotal?: PriceTotal;
+  /** When they would collect — "Today, 14:00–16:00". */
+  pickupWindow?: string;
+  /** When it would land — "Arrives 17:40", "2 h 10". */
+  eta?: string;
+  /** What the carrier wrote with the offer. Drawn at three lines, then truncated. */
+  message?: string;
+  /** How long the offer stands — "Expires in 12 min". Drawn as a warning-toned line. */
+  expiresIn?: string;
+  /**
+   * The price as a NUMBER, for sorting and for the `cheapest` mark only. Never
+   * drawn, never formatted, and in whatever unit the app compares in — this
+   * family only ever asks which of two is smaller. A quote without it sorts
+   * last and is never marked.
+   */
+  priceValue?: number;
+  /** The ETA in minutes, for sorting and for the `fastest` mark. Same rules. */
+  etaMinutes?: number;
+  /** Marks drawn beside the name. The list supplies these; see {@link CarrierQuoteMark}. */
+  marks?: readonly CarrierQuoteMark[];
+}
+
+/** Every word the card and the list speak, in one prop. */
+export interface CarrierQuoteLabels {
+  /** The accept action. Default `"Accept"`. */
+  accept?: string;
+  /** The message action. Default `"Message"`. */
+  message?: string;
+  /** The decline action. Default `"Decline"`. */
+  decline?: string;
+  /** Over the pick-up tile. Default `"Pick-up"`. */
+  pickup?: string;
+  /** Over the arrival tile. Default `"Arrives"`. */
+  eta?: string;
+  /** Over the vehicle tile. Default `"Vehicle"`. */
+  vehicle?: string;
+  /** After the jobs count. Default `` (jobs) => `${jobs} jobs` ``. */
+  jobs?: (jobs: string) => string;
+  /** The verified mark's name — it draws a glyph and no text. Default `"Verified carrier"`. */
+  verified?: string;
+  /** The marks. Defaults `"Cheapest"` and `"Fastest"`. */
+  marks?: Partial<Record<CarrierQuoteMark, string>>;
+  /** The breakdown disclosure. Defaults `"Show price details"` / `"Hide price details"`. */
+  showPrice?: string;
+  hidePrice?: string;
+  /** Names the itemisation, before the carrier's name. Default `"Price details for"`. */
+  priceDetails?: string;
+  /** The sort control's name. Default `"Sort offers"`. */
+  sort?: string;
+  /** The sort options. Defaults `"Cheapest"`, `"Fastest"`, `"Best rated"`. */
+  sortOptions?: Partial<Record<CarrierQuoteSort, string>>;
+  /** The list's heading. Default `` (count) => count === 1 ? '1 offer' : `${count} offers` ``. */
+  count?: (count: number) => string;
+  /** The loading list's name. Default `"Loading offers"`. */
+  loading?: string;
+}
+
+export interface CarrierQuoteCardProps {
+  /** The offer. */
+  quote: CarrierQuote;
+  /** Draws the accept action. Called with the quote's id. */
+  onAccept?: (id: string) => void;
+  /** Draws the message action. Called with the quote's id. */
+  onMessage?: (id: string) => void;
+  /** Draws the decline action. Called with the quote's id. */
+  onDecline?: (id: string) => void;
+  /** Makes the identity block pressable — an app opens the carrier's profile from here. */
+  onPressCarrier?: (id: string) => void;
+  /**
+   * Draws the itemisation behind a disclosure under the tiles. Default `true`
+   * when the quote carries `priceLines`; `false` never draws it.
+   */
+  breakdown?: boolean;
+  /** Starts the breakdown open. Default `false`. */
+  defaultBreakdownExpanded?: boolean;
+  /** Default `comfortable`. */
+  density?: CarrierQuoteDensity;
+  /** Paints the card as the chosen offer: the accent border and a checked mark. */
+  selected?: boolean;
+  /** Dims the card and stops every action. */
+  disabled?: boolean;
+  /** Replaces the three built-in actions entirely. */
+  actions?: ReactNode;
+  labels?: CarrierQuoteLabels;
+  /** Overrides the composed name of the identity block. */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface CarrierQuoteListProps {
+  /** The offers. Order is the list's, not the caller's — see `sort`. */
+  quotes: readonly CarrierQuote[];
+  /** Controlled sort. */
+  sort?: CarrierQuoteSort;
+  /** Uncontrolled initial sort. Default `price`. */
+  defaultSort?: CarrierQuoteSort;
+  onSortChange?: (sort: CarrierQuoteSort) => void;
+  /**
+   * Which orders are offered, in the order they are drawn. Default all three.
+   * An empty array draws no sort control — a list of two offers does not need
+   * one.
+   */
+  sortOptions?: readonly CarrierQuoteSort[];
+  /** Draws the count line over the list. Default `true`. */
+  showCount?: boolean;
+  /**
+   * Marks the cheapest and the fastest offer. Default `true`. Every offer tied
+   * at the minimum is marked — two offers at the same price are both the
+   * cheapest, and picking one of them arbitrarily would be this component
+   * inventing a tie-break.
+   */
+  marks?: boolean;
+  /** Replaces the list with placeholder cards. */
+  loading?: boolean;
+  /** How many placeholders. Default `3`. */
+  loadingCount?: number;
+  /** Forwarded to every card. */
+  onAccept?: (id: string) => void;
+  onMessage?: (id: string) => void;
+  onDecline?: (id: string) => void;
+  onPressCarrier?: (id: string) => void;
+  /** The chosen offer's id, if one has been chosen. */
+  selectedId?: string | null;
+  density?: CarrierQuoteDensity;
+  breakdown?: boolean;
+  /** The line over the empty state. Default `"No offers yet"`. */
+  emptyTitle?: string;
+  /** Under it. Default `"Carriers are looking at your job. The first offers usually arrive within a few minutes."`. */
+  emptyDescription?: string;
+  /** A control under the empty state — "Edit the job", "Invite a carrier". */
+  emptyAction?: ReactNode;
+  labels?: CarrierQuoteLabels;
+  /** Names the list. Default `"Offers"`. */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  /** Derives `-<quote id>` for each card. */
+  testID?: string;
+}

package/src/cart-panel/CartLine.tsx

@@ -0,0 +1,177 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { GlyphButton } from '../button';
+import { RiDeleteBinLine } from '../icons/remix/RiDeleteBinLine';
+import { Item } from '../item';
+import { ListingPriceLines } from '../listing-card/parts';
+import { MenuItemThumb } from '../menu-item/parts';
+import { Stepper } from '../stepper';
+import { useSurfaceFill } from '../styles/surface-levels';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { CART_GEOMETRY } from './constants';
+import { composeCartLineName, optionsLine, resolveCartPaint } from './shared';
+import type { CartLineProps } from './types';
+
+/**
+ * One thing in the basket: what it is, what was chosen for it, how many, and
+ * what that comes to.
+ *
+ *   leading   the square photo (56; 44 compact), washed while it is sold out
+ *   body      the name; the chosen options on one quiet line; the note; then
+ *             the quantity control and remove, side by side
+ *   trailing  the price, right-aligned, with an optional struck original
+ *
+ * THE STEPPER DOES NOT REMOVE. Its floor is 1, and removing is its own control
+ * with its own name — a stepper that deletes the line when you press `−` once
+ * too often is a destructive action behind an arithmetic one, and it has no
+ * label saying so.
+ *
+ * The row is never pressable, which is what lets the controls live in it: a
+ * pressable `Item` is a real `<button>` on web and a control inside one is
+ * invalid HTML whose click also fires the row. Opening a basket line to edit it
+ * is `MenuItemOptions` in a sheet, reached from the name — not from the whole
+ * row, which is mostly controls.
+ *
+ * A SOLD-OUT LINE IS QUIETENED, NOT DISABLED. The photo washes and the name
+ * drops to the secondary rung, but the row itself keeps full opacity: the one
+ * thing a reader needs on a line that cannot be delivered is REMOVE, and a
+ * control drawn at half opacity that still fires is exactly the affordance this
+ * library refuses elsewhere. The stepper is the one that goes disabled, because
+ * changing how many of a sold-out dish you want is the action with no meaning.
+ */
+function CartLineComponent(props: CartLineProps) {
+  const {
+    name,
+    options,
+    note,
+    price,
+    originalPrice,
+    quantity,
+    photo,
+    photoVariant,
+    unavailable = false,
+    unavailableLabel = 'Sold out',
+    onQuantityChange,
+    onRemove,
+    removeLabel,
+    density = 'comfortable',
+    accessibilityLabel,
+    style,
+    testID,
+  } = props;
+
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  const paint = useMemo(() => resolveCartPaint(theme, surface), [theme, surface]);
+  const g = CART_GEOMETRY[density];
+  const compact = density === 'compact';
+  const chosen = optionsLine(options);
+
+  return (
+    <Item
+      role="listitem"
+      density={density}
+      accessibilityLabel={accessibilityLabel ?? composeCartLineName(props)}
+      leading={
+        <MenuItemThumb
+          photo={photo}
+          photoVariant={photoVariant}
+          size={g.thumb}
+          radius={g.thumbRadius}
+          placeholder={paint.tile}
+          wash={paint.wash}
+          washed={unavailable}
+          testID={testID}
+        />
+      }
+      trailing={
+        <View style={{ alignItems: 'flex-end', minWidth: 0 }}>
+          <ListingPriceLines
+            lines={[{ price, originalPrice }]}
+            size={compact ? 'small' : 'medium'}
+            color={paint.text}
+            secondaryColor={paint.textSecondary}
+            testID={testID ? `${testID}-price` : undefined}
+          />
+        </View>
+      }
+      style={style}
+      testID={testID}
+    >
+      <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+        <Text
+          variant={compact ? 'body-2-semibold' : 'body-semibold'}
+          numberOfLines={2}
+          testID={testID ? `${testID}-name` : undefined}
+          style={{ color: unavailable ? paint.textSecondary : paint.text }}
+        >
+          {name}
+        </Text>
+        {chosen ? (
+          <Text
+            variant="body-2-regular"
+            numberOfLines={2}
+            testID={testID ? `${testID}-options` : undefined}
+            style={{ color: paint.textSecondary }}
+          >
+            {chosen}
+          </Text>
+        ) : null}
+        {note ? (
+          <Text
+            variant="body-2-regular"
+            numberOfLines={2}
+            testID={testID ? `${testID}-note` : undefined}
+            style={{ color: paint.textTertiary }}
+          >
+            {note}
+          </Text>
+        ) : null}
+        {unavailable ? (
+          <Text
+            variant="body-2-medium"
+            testID={testID ? `${testID}-unavailable` : undefined}
+            style={{ color: paint.textSecondary }}
+          >
+            {unavailableLabel}
+          </Text>
+        ) : null}
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8, marginTop: 6 }}>
+          {onQuantityChange ? (
+            <Stepper
+              size="small"
+              value={quantity}
+              min={1}
+              disabled={unavailable}
+              onValueChange={onQuantityChange}
+              accessibilityLabel={name}
+              testID={testID ? `${testID}-stepper` : undefined}
+            />
+          ) : (
+            <Text
+              variant="body-2-regular"
+              testID={testID ? `${testID}-quantity` : undefined}
+              style={{ color: paint.textSecondary, fontVariant: ['tabular-nums'] }}
+            >
+              {`×${quantity}`}
+            </Text>
+          )}
+          {onRemove ? (
+            <GlyphButton
+              size={32}
+              icon={RiDeleteBinLine}
+              accessibilityLabel={removeLabel ?? `Remove ${name}`}
+              onPress={onRemove}
+              testID={testID ? `${testID}-remove` : undefined}
+            />
+          ) : null}
+        </View>
+      </View>
+    </Item>
+  );
+}
+
+export const CartLine = memo(CartLineComponent);
+CartLine.displayName = 'CartLine';

package/src/cart-panel/CartPanel.tsx

@@ -0,0 +1,311 @@
+import React, { memo, useMemo } from 'react';
+import { Image, View } from 'react-native';
+
+import {
+  AdmonitionContent,
+  AdmonitionIcon,
+  AdmonitionRoot,
+  AdmonitionRow,
+  AdmonitionText,
+} from '../admonition';
+import { Button } from '../button';
+import { Divider } from '../divider';
+import { RiShoppingBag3Line } from '../icons/remix/RiShoppingBag3Line';
+import { RiStore2Line } from '../icons/remix/RiStore2Line';
+import { useImageResolver } from '../image-resolver/context';
+import { Item } from '../item';
+import { resolvePhoto } from '../listing-card/shared';
+import { PriceSummary } from '../price-breakdown';
+import { Meter } from '../stat-bar';
+import { useSurfaceFill } from '../styles/surface-levels';
+import { resolveAccentColors } from '../theme/accent-colors';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { CartLine } from './CartLine';
+import { CartPromoField } from './CartPromoField';
+import { CartTipPicker } from './CartTipPicker';
+import { CART_BLOCK_GAP, CART_GEOMETRY, CART_LINE_GAP, CART_METER_HEIGHT } from './constants';
+import { resolveCartPaint, type CartPaint } from './shared';
+import type { CartMinimumOrder, CartPanelProps } from './types';
+
+/**
+ * The basket, and what it costs.
+ *
+ *   vendor    one row: the shop's picture, its name and its delivery line. A
+ *             basket belongs to exactly ONE vendor, which is why it is a header
+ *             and not a field on every line.
+ *   lines     a `list` of `CartLine`s
+ *   tip       `CartTipPicker`
+ *   promo     `CartPromoField`
+ *   shortfall the minimum-order warning, drawn directly above the totals —
+ *             beside the number it is about, not at the top where it is read
+ *             before there is a total to compare it to
+ *   totals    `price-breakdown`'s `PriceSummary`, handed straight through
+ *   footer    one `Button`, full width
+ *
+ * IT IS CONTENT, NOT A SURFACE. Inline in a desktop sidebar it is dropped in a
+ * `Card`; on a phone it is what a `BottomSheet` holds. It paints no background
+ * of its own and claims no edge, so the same tree works in both — and every
+ * colour it does paint is read RELATIVE to whatever it was dropped on
+ * (`styles/surface-levels.ts`), because a hairline picked for a card disappears
+ * on a sheet.
+ *
+ * IT ADDS NOTHING UP. Subtotal, delivery, service, discount, tip and total are
+ * `PriceLine`s the app formatted, drawn by the ONE breakdown Bloom has. There
+ * is no second summary in here, and the shortfall `message` is a sentence the
+ * app wrote rather than a subtraction this component performed.
+ */
+
+function VendorHeader({
+  name,
+  photo,
+  photoVariant,
+  meta,
+  onPress,
+  tile,
+  paint,
+  testID,
+}: {
+  name: string;
+  photo?: string;
+  photoVariant?: string;
+  meta?: string;
+  onPress?: () => void;
+  tile: number;
+  paint: CartPaint;
+  testID?: string;
+}) {
+  const resolver = useImageResolver();
+  const uri = photo ? resolvePhoto(photo, resolver, photoVariant) : undefined;
+  return (
+    <Item
+      title={name}
+      subtitle={meta}
+      onPress={onPress}
+      accessibilityLabel={meta ? `${name}, ${meta}` : name}
+      leading={
+        <View
+          style={{
+            width: tile,
+            height: tile,
+            borderRadius: tile / 2,
+            overflow: 'hidden',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: paint.tile,
+          }}
+          testID={testID ? `${testID}-vendor-tile` : undefined}
+        >
+          {uri ? (
+            <Image
+              source={{ uri }}
+              resizeMode="cover"
+              accessibilityIgnoresInvertColors
+              style={{ width: '100%', height: '100%' }}
+            />
+          ) : (
+            <RiStore2Line width={tile / 2} height={tile / 2} fill={paint.textSecondary} />
+          )}
+        </View>
+      }
+      testID={testID ? `${testID}-vendor` : undefined}
+    />
+  );
+}
+
+function MinimumNotice({
+  minimum,
+  fill,
+  track,
+  testID,
+}: {
+  minimum: CartMinimumOrder;
+  fill: string;
+  track: string;
+  testID?: string;
+}) {
+  const { message, progress } = minimum;
+  return (
+    <AdmonitionRoot type="warning">
+      <AdmonitionRow>
+        <AdmonitionIcon />
+        <AdmonitionContent>
+          <AdmonitionText>{message}</AdmonitionText>
+          {progress ? (
+            <Meter
+              value={progress.value}
+              max={progress.max}
+              height={CART_METER_HEIGHT}
+              fill={fill}
+              track={track}
+              accessibilityLabel={progress.accessibilityLabel}
+              valueText={progress.valueText}
+              testID={testID ? `${testID}-minimum-meter` : undefined}
+            />
+          ) : null}
+        </AdmonitionContent>
+      </AdmonitionRow>
+    </AdmonitionRoot>
+  );
+}
+
+function EmptyBasket({
+  title,
+  description,
+  paint,
+  testID,
+}: {
+  title: string;
+  description?: string;
+  paint: CartPaint;
+  testID?: string;
+}) {
+  return (
+    <View
+      style={{ alignItems: 'center', gap: 8, paddingTop: 24, paddingBottom: 24 }}
+      testID={testID ? `${testID}-empty` : undefined}
+    >
+      <RiShoppingBag3Line width={32} height={32} fill={paint.textGraphical} />
+      <Text variant="headline-semibold" style={{ color: paint.text, textAlign: 'center' }}>
+        {title}
+      </Text>
+      {description ? (
+        <Text variant="body-2-regular" style={{ color: paint.textSecondary, textAlign: 'center' }}>
+          {description}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+function CartPanelComponent({
+  vendorName,
+  vendorPhoto,
+  vendorPhotoVariant,
+  vendorMeta,
+  onPressVendor,
+  lines,
+  onLineQuantityChange,
+  onLineRemove,
+  minimumOrder,
+  tip,
+  promo,
+  summary,
+  onCheckout,
+  checkoutLabel = 'Go to checkout',
+  checkoutDisabled = false,
+  empty,
+  emptyTitle = 'Your basket is empty',
+  emptyDescription = 'Add something from the menu and it will show up here.',
+  density = 'comfortable',
+  accessibilityLabel = 'Basket',
+  style,
+  testID,
+}: CartPanelProps) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  const paint = useMemo(() => resolveCartPaint(theme, surface), [theme, surface]);
+  const g = CART_GEOMETRY[density];
+  const warning = useMemo(() => resolveAccentColors(theme.colors, 'warning', 'solid'), [theme]);
+  const hasLines = lines.length > 0;
+
+  return (
+    <View style={[{ gap: CART_BLOCK_GAP }, style]} testID={testID}>
+      <View style={{ gap: CART_LINE_GAP }}>
+        <VendorHeader
+          name={vendorName}
+          photo={vendorPhoto}
+          photoVariant={vendorPhotoVariant}
+          meta={vendorMeta}
+          onPress={onPressVendor}
+          tile={g.vendorTile}
+          paint={paint}
+          testID={testID}
+        />
+        <Divider color={paint.rule} />
+        {hasLines ? (
+          <View
+            role="list"
+            accessibilityLabel={accessibilityLabel}
+            aria-label={accessibilityLabel}
+            style={{ gap: CART_LINE_GAP }}
+            testID={testID ? `${testID}-lines` : undefined}
+          >
+            {lines.map((line) => (
+              <CartLine
+                key={line.id}
+                name={line.name}
+                options={line.options}
+                note={line.note}
+                price={line.price}
+                originalPrice={line.originalPrice}
+                quantity={line.quantity}
+                photo={line.photo}
+                photoVariant={line.photoVariant}
+                unavailable={line.unavailable}
+                unavailableLabel={line.unavailableLabel}
+                density={density}
+                onQuantityChange={
+                  onLineQuantityChange
+                    ? (quantity: number) => onLineQuantityChange(line.id, quantity)
+                    : undefined
+                }
+                onRemove={onLineRemove ? () => onLineRemove(line.id) : undefined}
+                testID={testID ? `${testID}-line-${line.id}` : undefined}
+              />
+            ))}
+          </View>
+        ) : (
+          (empty ?? (
+            <EmptyBasket
+              title={emptyTitle}
+              description={emptyDescription}
+              paint={paint}
+              testID={testID}
+            />
+          ))
+        )}
+      </View>
+
+      {hasLines && tip ? <CartTipPicker {...tip} testID={tip.testID ?? (testID ? `${testID}-tip` : undefined)} /> : null}
+      {hasLines && promo ? (
+        <CartPromoField {...promo} testID={promo.testID ?? (testID ? `${testID}-promo` : undefined)} />
+      ) : null}
+
+      {hasLines && minimumOrder ? (
+        <MinimumNotice
+          minimum={minimumOrder}
+          fill={warning.background}
+          track={paint.rule}
+          testID={testID}
+        />
+      ) : null}
+
+      {hasLines && summary ? (
+        <PriceSummary
+          lines={summary.lines}
+          total={summary.total}
+          collapsible={summary.collapsible}
+          defaultExpanded={summary.defaultExpanded}
+          testID={testID ? `${testID}-summary` : undefined}
+        />
+      ) : null}
+
+      {hasLines && onCheckout ? (
+        <Button
+          variant="primary"
+          size="large"
+          fullWidth
+          disabled={checkoutDisabled}
+          onPress={onCheckout}
+          testID={testID ? `${testID}-checkout` : undefined}
+        >
+          {checkoutLabel}
+        </Button>
+      ) : null}
+    </View>
+  );
+}
+
+export const CartPanel = memo(CartPanelComponent);
+CartPanel.displayName = 'CartPanel';