@shoppexio/storefront-react 0.0.0 → 0.1.0

package/eject/account/favorites.tsx

@@ -0,0 +1,201 @@
+/**
+ * The products a buyer saved for later.
+ *
+ * The one panel with a list route of its own (`GET /favorites`), and the only
+ * one whose collection the dashboard payload does not carry.
+ *
+ * No price is shown, and that is a decision rather than an omission. The
+ * producer sends `price_display` as a bare number with no currency beside it —
+ * it is the product's stored display price, and nothing in this payload says
+ * which currency it was measured in. Labelling it with whatever currency the
+ * page happens to be pricing in turns 19.99 EUR into 19.99 USD on every shop
+ * where the two differ, which is worse than not saying.
+ */
+
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import {
+  favoriteProductHref,
+  narrowFavorites,
+  withoutFavorite,
+  type CustomerFavorite,
+} from './account-favorites';
+import { callCustomerApi } from './customer-account';
+import { t } from './i18n';
+import { ProductPlaceholderIcon } from './icons';
+import {
+  AccountEmpty,
+  AccountError,
+  AccountRowsSkeleton,
+  BusySpinner,
+  formatAccountDate,
+  useAccountResource,
+} from './shared';
+
+export function AccountFavorites() {
+  const { state, reload } = useAccountResource('favorites', () =>
+    callCustomerApi((sdk) => sdk.favorites()));
+  const [favorites, setFavorites] = useState<CustomerFavorite[] | null>(null);
+  const [contractBroken, setContractBroken] = useState(false);
+  const [removing, setRemoving] = useState<string | null>(null);
+  const [removeError, setRemoveError] = useState<string | null>(null);
+
+  /*
+   * The list is copied into state because removing writes to it. Narrowing runs
+   * once per load rather than on every render, and a payload that does not
+   * match the producer is RECORDED as broken — never rendered as an empty
+   * wishlist, which would tell a buyer their saved products are gone.
+   */
+  useEffect(() => {
+    if (state.status !== 'ready') return;
+    const narrowed = narrowFavorites(state.data);
+    setContractBroken(!narrowed.ok);
+    setFavorites(narrowed.ok ? narrowed.favorites : null);
+    setRemoveError(null);
+  }, [state]);
+
+  if (state.status === 'loading') {
+    return <AccountRowsSkeleton rows={3} label={t('favorites.loading')} />;
+  }
+
+  if (state.status === 'error') {
+    return <AccountError message={state.message} onRetry={reload} />;
+  }
+
+  if (contractBroken) {
+    return <AccountError message={t('common.genericError')} onRetry={reload} />;
+  }
+
+  // The response landed but the effect that narrows it has not run yet.
+  if (favorites === null) {
+    return <AccountRowsSkeleton rows={3} label={t('favorites.loading')} />;
+  }
+
+  if (favorites.length === 0) {
+    return (
+      <AccountEmpty
+        title={t('favorites.emptyTitle')}
+        body={t('favorites.emptyBody')}
+        action={(
+          <Link to="/all-products" className="sx-account-cta sxa:cta-button sxa:inline-flex sxa:h-10 sxa:items-center sxa:px-5 sxa:text-small">
+            {t('common.browseStore')}
+          </Link>
+        )}
+      />
+    );
+  }
+
+  const remove = async (favorite: CustomerFavorite) => {
+    setRemoving(favorite.product_uniqid);
+    setRemoveError(null);
+    const result = await callCustomerApi((sdk) => sdk.removeFavorite(favorite.product_uniqid));
+    setRemoving(null);
+
+    if (!result.success) {
+      setRemoveError(result.message?.trim() || t('favorites.removeFailed'));
+      return;
+    }
+
+    // Dropped only once the server confirmed it. Removing the card first and
+    // putting it back on failure makes the buyer watch their own action undo
+    // itself, and leaves the two lists disagreeing whenever a retry is slow.
+    setFavorites((current) => (
+      current ? withoutFavorite(current, favorite.product_uniqid) : current
+    ));
+  };
+
+  return (
+    <div>
+      {removeError ? (
+        <div className="sxa:mb-6">
+          <AccountError message={removeError} />
+        </div>
+      ) : null}
+
+      <ul className="sxa:grid sxa:gap-4 sxa:sm:grid-cols-2 sxa:lg:grid-cols-3">
+        {favorites.map((favorite) => (
+          <li
+            key={favorite.product_uniqid}
+            className="sxa:flex sxa:flex-col sxa:overflow-hidden sxa:rounded-input sxa:border sxa:bg-surface sxa:shadow-card"
+          >
+            <FavoriteImage favorite={favorite} />
+            <div className="sxa:flex sxa:flex-1 sxa:flex-col sxa:p-5">
+              <p className="sxa:text-small sxa:font-semibold">{favorite.title}</p>
+              <p className="sxa:mt-1 sxa:text-micro sxa:text-muted">
+                {t('favorites.added', { date: formatAccountDate(favorite.created_at) })}
+              </p>
+              {/* The merchant deleted the product. The row stays so the buyer
+                  can clear it; the link is what goes away. */}
+              {favorite.unavailable ? (
+                <p className="sxa:mt-2 sxa:text-micro sxa:font-medium sxa:text-muted">{t('favorites.gone')}</p>
+              ) : null}
+
+              <div className="sxa:mt-auto sxa:flex sxa:flex-wrap sxa:items-center sxa:gap-2 sxa:pt-4">
+                <FavoriteLink favorite={favorite} />
+                <button
+                  type="button"
+                  onClick={() => void remove(favorite)}
+                  disabled={removing !== null}
+                  aria-busy={removing === favorite.product_uniqid || undefined}
+                  className="sx-account-button sxa:card-button sxa:card-button--add sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
+                >
+                  {removing === favorite.product_uniqid ? (
+                    <BusySpinner className="sxa:mr-1.5 sxa:h-3.5 sxa:w-3.5" />
+                  ) : null}
+                  {removing === favorite.product_uniqid
+                    ? t('favorites.removing')
+                    : t('favorites.remove')}
+                </button>
+              </div>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+/**
+ * The saved product's picture, or the same placeholder tile the cart draws.
+ *
+ * An image URL that fails to load falls back to the placeholder rather than
+ * leaving a broken-image icon in the grid — the product is still saved either
+ * way, and the card must stay readable.
+ */
+function FavoriteImage({ favorite }: { favorite: CustomerFavorite }) {
+  const [failed, setFailed] = useState(false);
+
+  if (!favorite.image_url || failed) {
+    return (
+      <div
+        className="sxa:flex sxa:aspect-[4/3] sxa:items-center sxa:justify-center sxa:border-b sxa:bg-bg"
+        role="img"
+        aria-label={t('favorites.noImage', { title: favorite.title })}
+      >
+        <ProductPlaceholderIcon className="sxa:h-6 sxa:w-6 sxa:text-muted" strokeWidth="1.25" />
+      </div>
+    );
+  }
+
+  return (
+    <img
+      src={favorite.image_url}
+      alt={favorite.title}
+      loading="lazy"
+      decoding="async"
+      onError={() => setFailed(true)}
+      className="sxa:aspect-[4/3] sxa:w-full sxa:border-b sxa:object-cover"
+    />
+  );
+}
+
+/** Nothing at all for a product with nowhere to go — see `favoriteProductHref`. */
+function FavoriteLink({ favorite }: { favorite: CustomerFavorite }) {
+  const href = favoriteProductHref(favorite);
+  if (!href) return null;
+  return (
+    <Link to={href} className="sx-account-cta sxa:cta-button sxa:inline-flex sxa:h-8 sxa:items-center sxa:px-4 sxa:text-micro sxa:font-semibold">
+      {t('favorites.view')}
+    </Link>
+  );
+}

package/eject/account/i18n.ts

@@ -0,0 +1,175 @@
+/**
+ * The customer account's message catalog.
+ *
+ * A code storefront is an immutable artifact served from R2 — there is no
+ * server render and no request-time catalog injection. Every locale therefore
+ * ships INSIDE the account chunk, and the one thing that varies per request is
+ * which of them is read.
+ *
+ * The locale comes from `<html lang>`, which the Shoppex worker rewrites to the
+ * locale the page was served in (`withServedHtmlLang` in
+ * `workers/storefront/src/code-page-metadata.ts`) before the bundle runs. That
+ * is the only locale signal a code storefront gets, and it is the same one the
+ * document lane resolves its catalog from — so a buyer on `/de/dashboard` reads
+ * German on either lane. `navigator.language` is deliberately NOT consulted: it
+ * is the browser's preference, not the page the edge decided to serve, and
+ * mixing the two produces a German page with English panels inside it.
+ *
+ * English is the compiled-in contract. `translate` falls back to it for a key a
+ * locale catalog is missing, exactly like the document lane's runtime, and the
+ * parity test in `tests/messages.test.ts` is what keeps that fallback from ever
+ * being needed in a release.
+ *
+ * All sixteen are STATIC imports, and that is a decision with a price: they add
+ * roughly 66 KB gzipped to a bundle that only ever reads one of them. Splitting
+ * them into per-locale chunks would trade those bytes for a second failure mode
+ * — a chunk that does not arrive leaves a buyer reading English on a German
+ * page, quietly, and the boot would have to become asynchronous to allow for
+ * it. Bytes that are always right beat a request that can be wrong; revisit
+ * this if the catalog grows past the account surface.
+ */
+
+import arMessages from './messages/ar.json';
+import deMessages from './messages/de.json';
+import enMessages from './messages/en.json';
+import esMessages from './messages/es.json';
+import fiMessages from './messages/fi.json';
+import frMessages from './messages/fr.json';
+import hiMessages from './messages/hi.json';
+import itMessages from './messages/it.json';
+import ltMessages from './messages/lt.json';
+import nlMessages from './messages/nl.json';
+import plMessages from './messages/pl.json';
+import ptMessages from './messages/pt.json';
+import ruMessages from './messages/ru.json';
+import trMessages from './messages/tr.json';
+import ukMessages from './messages/uk.json';
+import zhMessages from './messages/zh.json';
+
+export type MessageParams = Record<string, string | number>;
+export type MessageCatalog = { [key: string]: string | MessageCatalog };
+
+/** The locales the Shoppex storefront edge can serve. */
+export const SUPPORTED_LOCALES = [
+  'ar', 'de', 'en', 'es', 'fi', 'fr', 'hi', 'it',
+  'lt', 'nl', 'pl', 'pt', 'ru', 'tr', 'uk', 'zh',
+] as const;
+
+export type Locale = (typeof SUPPORTED_LOCALES)[number];
+
+export const DEFAULT_LOCALE: Locale = 'en';
+
+export const MESSAGE_CATALOGS: Readonly<Record<Locale, MessageCatalog>> = {
+  ar: arMessages as MessageCatalog,
+  de: deMessages as MessageCatalog,
+  en: enMessages as MessageCatalog,
+  es: esMessages as MessageCatalog,
+  fi: fiMessages as MessageCatalog,
+  fr: frMessages as MessageCatalog,
+  hi: hiMessages as MessageCatalog,
+  it: itMessages as MessageCatalog,
+  lt: ltMessages as MessageCatalog,
+  nl: nlMessages as MessageCatalog,
+  pl: plMessages as MessageCatalog,
+  pt: ptMessages as MessageCatalog,
+  ru: ruMessages as MessageCatalog,
+  tr: trMessages as MessageCatalog,
+  uk: ukMessages as MessageCatalog,
+  zh: zhMessages as MessageCatalog,
+};
+
+export const EN_MESSAGES: MessageCatalog = MESSAGE_CATALOGS.en;
+
+/** Locales written right-to-left, so the account shell can flip its direction. */
+const RTL_LOCALES: ReadonlySet<Locale> = new Set<Locale>(['ar']);
+
+export function isSupportedLocale(value: string): value is Locale {
+  return (SUPPORTED_LOCALES as readonly string[]).includes(value);
+}
+
+/**
+ * The catalog a `lang` attribute names.
+ *
+ * `de-AT` and `DE` both resolve to `de`: the edge writes a bare two-letter code
+ * today, and a region-tagged one must not silently read as "no locale at all".
+ * Anything that names no catalog is English, which is the complete contract
+ * rather than a guess at what the buyer wanted.
+ */
+export function resolveLocale(lang: string | null | undefined): Locale {
+  const base = (lang ?? '').trim().toLowerCase().split(/[-_]/)[0] ?? '';
+  return isSupportedLocale(base) ? base : DEFAULT_LOCALE;
+}
+
+export function isRightToLeft(locale: Locale): boolean {
+  return RTL_LOCALES.has(locale);
+}
+
+function messageAt(catalog: MessageCatalog | undefined, key: string): string | undefined {
+  let value: string | MessageCatalog | undefined = catalog;
+  for (const segment of key.split('.')) {
+    if (!value || typeof value === 'string') return undefined;
+    value = value[segment];
+  }
+  return typeof value === 'string' ? value : undefined;
+}
+
+function interpolate(message: string, params: MessageParams | undefined): string {
+  if (!params) return message;
+  return message.replace(/\{([^{}]+)\}/g, (token, name: string) => (
+    Object.prototype.hasOwnProperty.call(params, name) ? String(params[name]) : token
+  ));
+}
+
+/** Whether English — the contract — defines this key at all. */
+export function hasMessage(key: string): boolean {
+  return messageAt(EN_MESSAGES, key) !== undefined;
+}
+
+export function translate(locale: Locale, key: string, params?: MessageParams): string {
+  const message = messageAt(MESSAGE_CATALOGS[locale], key) ?? messageAt(EN_MESSAGES, key);
+  // The key itself, so a missing string is visible in the UI rather than blank.
+  if (message === undefined) return key;
+  return interpolate(message, params);
+}
+
+/**
+ * A message only when one exists.
+ *
+ * Wire enums (invoice status, reward reason, delivery state) are OPEN sets: the
+ * server may emit a value this catalog has never heard of. Those callers need
+ * "no translation" as an answer they can act on, so they can print the server's
+ * own spelling instead of the key.
+ */
+export function translateOptional(
+  locale: Locale,
+  key: string,
+  params?: MessageParams,
+): string | undefined {
+  return hasMessage(key) ? translate(locale, key, params) : undefined;
+}
+
+let activeLocale: Locale | undefined;
+
+function documentLocale(): Locale {
+  if (typeof document === 'undefined') return DEFAULT_LOCALE;
+  return resolveLocale(document.documentElement.getAttribute('lang'));
+}
+
+/** The locale this page load is being read in. Resolved once, from the edge. */
+export function getActiveLocale(): Locale {
+  if (activeLocale === undefined) activeLocale = documentLocale();
+  return activeLocale;
+}
+
+/** Pins the locale. The tests are the only caller; the browser uses `<html lang>`. */
+export function setActiveLocale(locale: Locale | undefined): void {
+  activeLocale = locale;
+}
+
+export function t(key: string, params?: MessageParams): string {
+  return translate(getActiveLocale(), key, params);
+}
+
+export function tOptional(key: string, params?: MessageParams): string | undefined {
+  return translateOptional(getActiveLocale(), key, params);
+}

package/eject/account/icons.tsx

@@ -0,0 +1,218 @@
+/**
+ * The icons the account draws, inlined.
+ *
+ * Storefront artifacts are served behind a strict CSP and build with no
+ * network, so there is no icon CDN. Every icon is a plain SVG that takes its
+ * size and colour from the classes around it (`currentColor`).
+ *
+ * Outline marks are the 24x24 / stroke-2 Lucide geometry (ISC).
+ */
+
+import type { SVGProps } from 'react';
+
+type IconProps = SVGProps<SVGSVGElement>;
+
+function OutlineIcon({ children, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      {...props}
+    >
+      {children}
+    </svg>
+  );
+}
+
+export function ArrowLeftIcon(props: IconProps) {
+  return (
+    <OutlineIcon {...props}>
+      <path d="m12 19-7-7 7-7" />
+      <path d="M19 12H5" />
+    </OutlineIcon>
+  );
+}
+
+export function ArrowRightIcon(props: IconProps) {
+  return (
+    <OutlineIcon {...props}>
+      <path d="M5 12h14" />
+      <path d="m12 5 7 7-7 7" />
+    </OutlineIcon>
+  );
+}
+
+/** Placeholder art for a bundle with no image of its own. */
+export function BoxIcon(props: IconProps) {
+  return (
+    <OutlineIcon strokeWidth="1.25" {...props}>
+      <path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z" />
+      <path d="M3.3 7 12 12l8.7-5" />
+      <path d="M12 22V12" />
+    </OutlineIcon>
+  );
+}
+
+/** The tick inside a selected variant pill or a ticked addon box. */
+export function CheckIcon(props: IconProps) {
+  return (
+    <OutlineIcon strokeWidth="3" {...props}>
+      <path d="m5 12 5 5L20 7" />
+    </OutlineIcon>
+  );
+}
+
+export function ChevronDownIcon(props: IconProps) {
+  return (
+    <OutlineIcon {...props}>
+      <path d="m6 9 6 6 6-6" />
+    </OutlineIcon>
+  );
+}
+
+export function CircleAlertIcon(props: IconProps) {
+  return (
+    <OutlineIcon {...props}>
+      <circle cx="12" cy="12" r="10" />
+      <line x1="12" x2="12" y1="8" y2="12" />
+      <line x1="12" x2="12.01" y1="16" y2="16" />
+    </OutlineIcon>
+  );
+}
+
+/** Lucide `copy`. The account surface copies licence keys and referral links. */
+export function CopyIcon(props: IconProps) {
+  return (
+    <OutlineIcon {...props}>
+      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+    </OutlineIcon>
+  );
+}
+
+/** Leaves the storefront — every community and portal link carries it. */
+export function ExternalLinkIcon(props: IconProps) {
+  return (
+    <OutlineIcon {...props}>
+      <path d="M15 3h6v6" />
+      <path d="M10 14 21 3" />
+      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+    </OutlineIcon>
+  );
+}
+
+/** The reward-program teaser's mark. */
+export function GiftIcon(props: IconProps) {
+  return (
+    <OutlineIcon {...props}>
+      <rect x="3" y="8" width="18" height="4" rx="1" />
+      <path d="M12 8v13" />
+      <path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7" />
+      <path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5" />
+    </OutlineIcon>
+  );
+}
+
+/** The spinner on a submitting form. It is the only mark the theme rotates. */
+export function LoaderIcon(props: IconProps) {
+  return (
+    <OutlineIcon {...props}>
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </OutlineIcon>
+  );
+}
+
+export function LockIcon(props: IconProps) {
+  return (
+    <OutlineIcon {...props}>
+      <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
+      <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+    </OutlineIcon>
+  );
+}
+
+export function MailIcon(props: IconProps) {
+  return (
+    <OutlineIcon {...props}>
+      <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" />
+      <rect x="2" y="4" width="20" height="16" rx="2" />
+    </OutlineIcon>
+  );
+}
+
+/** The reviews badge, the contact form's header and its message field. */
+export function MessageSquareIcon(props: IconProps) {
+  return (
+    <OutlineIcon {...props}>
+      <path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z" />
+    </OutlineIcon>
+  );
+}
+
+/** Placeholder art for a product with no image. */
+export function ProductPlaceholderIcon(props: IconProps) {
+  return (
+    <OutlineIcon strokeWidth="1.25" {...props}>
+      <path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z" />
+      <path d="M12 22V12" />
+      <polyline points="3.29 7 12 12 20.71 7" />
+      <path d="m7.5 4.27 9 5.15" />
+    </OutlineIcon>
+  );
+}
+
+/** Marks the order/invoice field the merchant can make mandatory. */
+export function ReceiptIcon(props: IconProps) {
+  return (
+    <OutlineIcon {...props}>
+      <path d="M12 17V7" />
+      <path d="M16 8h-6a2 2 0 0 0 0 4h4a2 2 0 0 1 0 4H8" />
+      <path d="M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z" />
+    </OutlineIcon>
+  );
+}
+
+export function SearchIcon(props: IconProps) {
+  return (
+    <OutlineIcon {...props}>
+      <path d="m21 21-4.34-4.34" />
+      <circle cx="11" cy="11" r="8" />
+    </OutlineIcon>
+  );
+}
+
+/** Shared by the trust strip and the why-choose-us feature panels. */
+export function ShieldIcon(props: IconProps) {
+  return (
+    <OutlineIcon {...props}>
+      <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
+      <path d="m9 12 2 2 4-4" />
+    </OutlineIcon>
+  );
+}
+
+export function TagIcon(props: IconProps) {
+  return (
+    <OutlineIcon {...props}>
+      <path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z" />
+      <circle cx="7.5" cy="7.5" r=".5" fill="currentColor" />
+    </OutlineIcon>
+  );
+}
+
+/** Shared by the trust strip and the buy box's delivery badge. */
+export function ZapIcon(props: IconProps) {
+  return (
+    <OutlineIcon {...props}>
+      <path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" />
+    </OutlineIcon>
+  );
+}