@12-apps/payments-frontend 1.0.0 → 1.2.0

package/src/components/checkout/checkout-steps.tsx

@@ -0,0 +1,366 @@
+import { Box } from "@mui/material";
+import { useEffect, useRef, useState, type JSX, type ReactNode } from "react";
+
+import { BuyerInfoForm } from "./buyer-info-form";
+import { CardView } from "./card-view";
+import { LockOutlinedIcon } from "./icons";
+import {
+  cardPathAvailable,
+  cardTokenization,
+  offeredMethods,
+  usePreselectSoleMethod,
+} from "./method-capability";
+import { MethodPicker } from "./method-picker";
+import { PayerSummary } from "./payer-summary";
+import { PixView } from "./pix-view";
+import type {
+  BuyerField,
+  BuyerInfo,
+  CheckoutOrder,
+  CheckoutProviderConfig,
+  OrderStatus,
+  PaymentMethod,
+} from "./types";
+import { useCheckoutComponents } from "./ui";
+
+/**
+ * Auto-raise the order once per method-while-orderless (the ref also absorbs
+ * StrictMode's double-effect, so PIX never double-charges); a failure sets
+ * `createError` which stops the loop until the buyer retries.
+ */
+function useAutoRaiseOrder(
+  order: CheckoutOrder | null,
+  method: PaymentMethod | null,
+  creating: boolean,
+  createError: string | null,
+  onGenerate: (method: PaymentMethod) => void,
+): void {
+  const requestedFor = useRef<PaymentMethod | null>(null);
+  useEffect(() => {
+    if (order) {
+      requestedFor.current = null;
+      return;
+    }
+    // No method chosen yet ⇒ show only the picker; raise the order once the
+    // buyer selects PIX or card.
+    if (!method || creating || createError || requestedFor.current === method) return;
+    requestedFor.current = method;
+    onGenerate(method);
+  }, [method, order, creating, createError, onGenerate]);
+}
+
+/** The per-method payment body — PIX QR, card form, or nothing until raised. */
+function PaymentBody({
+  order,
+  buyer,
+  providerConfig,
+  tenantSlug,
+  onResolved,
+  pollIntervalMs,
+}: {
+  order: CheckoutOrder | null;
+  buyer: BuyerInfo;
+  providerConfig: CheckoutProviderConfig | null;
+  tenantSlug?: string;
+  onResolved: (status: OrderStatus) => void;
+  pollIntervalMs?: number;
+}): JSX.Element | null {
+  if (order?.method === "PIX") {
+    return <PixView order={order} onResolved={onResolved} pollIntervalMs={pollIntervalMs} />;
+  }
+  if (order?.method === "CARD") {
+    return (
+      <CardView
+        order={order}
+        buyer={buyer}
+        providerConfig={cardTokenization(providerConfig)}
+        tenantSlug={tenantSlug}
+        onResolved={onResolved}
+        pollIntervalMs={pollIntervalMs}
+      />
+    );
+  }
+  return null;
+}
+
+/** Empty-cart state shown when there's nothing to check out. */
+export function EmptyCart({ onBack }: { onBack: () => void }): JSX.Element {
+  const { Button, Text } = useCheckoutComponents();
+  return (
+    <Box data-testid="checkout-empty" sx={{ py: 8, textAlign: "center", display: "flex", flexDirection: "column", gap: 2, alignItems: "center" }}>
+      <Text variant="heading" size="md" as="p">
+        Seu carrinho está vazio.
+      </Text>
+      <Button variant="solid" color="primary" size="md" onClick={onBack} dataTestId="checkout-empty-back">
+        Ver cardápio
+      </Button>
+    </Box>
+  );
+}
+
+/**
+ * The totals shown on the pay bar: the comanda scope's when settling a comanda
+ * (FUT-comandas), otherwise the cart's own — both supplied by the host, which
+ * is the only side that knows either.
+ */
+function displayTotals(
+  override: { label: string; items: number } | undefined,
+  cart: { totalLabel: string; totalItems: number },
+): { label: string; items: number } {
+  return { label: override?.label ?? cart.totalLabel, items: override?.items ?? cart.totalItems };
+}
+
+/** The pay bar's money column: item count, grand total, host discount lines. */
+function PayBarTotal({
+  totalLabel,
+  totalItems,
+  children,
+}: {
+  totalLabel: string;
+  totalItems: number;
+  children?: ReactNode;
+}): JSX.Element {
+  const { Text } = useCheckoutComponents();
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", minWidth: 0 }}>
+      <Text variant="caption" size="xs" color="secondary" as="span">
+        Total · {totalItems} {totalItems === 1 ? "item" : "itens"}
+      </Text>
+      <Text variant="heading" size="md" weight="bold" color="primary" as="span" data-testid="pay-bar-total">
+        {totalLabel}
+      </Text>
+      {children}
+    </Box>
+  );
+}
+
+/**
+ * Step 1 "Dados" — the buyer's register info (CPF plus optional name/email/
+ * phone; contact pre-filled from the saved buyer profile). NO payment method
+ * here (that's step 2); nav lives in the slim checkout header. "Continuar"
+ * (sticky, with the live total) validates the CPF and advances to "Pagamento"
+ * — no charge yet.
+ */
+export function DadosStep({
+  buyer,
+  onBuyerChange,
+  saveProfile,
+  onSaveProfileChange,
+  createError,
+  errorField,
+  onContinue,
+  cartTotals,
+  discountLines,
+  totalOverride,
+}: {
+  buyer: BuyerInfo;
+  onBuyerChange: (buyer: BuyerInfo) => void;
+  saveProfile: boolean;
+  onSaveProfileChange: (value: boolean) => void;
+  createError: string | null;
+  errorField: BuyerField | null;
+  onContinue: () => void;
+  /** The host cart's own totals — what the pay bar shows in cart mode. */
+  cartTotals: { totalLabel: string; totalItems: number };
+  /**
+   * The saving, itemized under the total the buyer is about to authorize
+   * (FUT-246) — RENDERED BY THE HOST from its cart (the storefront passes its
+   * cart footer's money block), never re-implemented here, so the two surfaces
+   * can never word the same discount differently.
+   */
+  discountLines?: ReactNode;
+  /** Comanda settlement (FUT-comandas): totals come from the comanda, not the cart. */
+  totalOverride?: { label: string; items: number };
+}): JSX.Element {
+  const { ActionBar, Alert, Button, Checkbox, Text } = useCheckoutComponents();
+  const { label: totalLabel, items: totalItems } = displayTotals(totalOverride, cartTotals);
+
+  return (
+    <>
+      <Box sx={{ display: "flex", flexDirection: "column", gap: 3, pb: { xs: createError ? 22 : 14, sm: createError ? 20 : 12 } }}>
+        <BuyerInfoForm
+          value={buyer}
+          onChange={onBuyerChange}
+          fieldError={errorField && createError ? { field: errorField, message: createError } : null}
+        />
+        <Checkbox
+          checked={saveProfile}
+          onChange={(_event, checked) => onSaveProfileChange(checked)}
+          label="Salvar meus dados para a próxima compra"
+          data-testid="buyer-save-profile"
+        />
+      </Box>
+
+      <ActionBar dataTestId="checkout-pay-bar">
+        <Box sx={{ width: "100%", display: "flex", flexDirection: "column", gap: 1.5 }}>
+          {createError ? (
+            <Alert variant="danger" title="Não foi possível continuar" description={createError} showIcon data-testid="checkout-error" />
+          ) : null}
+          <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
+            <PayBarTotal totalLabel={totalLabel} totalItems={totalItems}>
+              {/* Suppressed while settling a comanda: those totals come from
+                  the frozen ticket, not the cart. */}
+              {totalOverride ? null : discountLines}
+            </PayBarTotal>
+            <Box sx={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 0.5, minWidth: 0 }}>
+              <Button variant="solid" color="primary" size="lg" fullWidth onClick={onContinue} dataTestId="checkout-continue">
+                Continuar
+              </Button>
+              <Box sx={{ display: "flex", alignItems: "center", gap: 0.5, color: "text.secondary" }}>
+                <LockOutlinedIcon sx={{ fontSize: 13 }} />
+                <Text variant="caption" size="xs" color="secondary" as="span">
+                  Pagamento seguro
+                </Text>
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      </ActionBar>
+    </>
+  );
+}
+
+/** Props for {@link PaymentStep} — step 2's inputs, wired by the flow. */
+interface PaymentStepProps {
+  method: PaymentMethod | null;
+  onMethodChange: (method: PaymentMethod) => void;
+  order: CheckoutOrder | null;
+  buyer: BuyerInfo;
+  creating: boolean;
+  createError: string | null;
+  errorField: BuyerField | null;
+  onGenerate: (method: PaymentMethod) => void;
+  onUseEmail: (email: string) => void;
+  /**
+   * Present ⇒ the buyer reached this step without a Dados step (FUT-465), so
+   * the payer block states who is being charged and reopens Dados to change it.
+   */
+  onEditBuyer?: () => void;
+  /**
+   * The store's active payment protocol (`GET /api/checkout/config`, FUT-697).
+   * `null` while loading or on a transient fetch failure — methods then render
+   * as before and the card path degrades to the PagBank per-order key refresh,
+   * WITHOUT mock permission (fail-open for the UI, fail-closed for the money).
+   */
+  providerConfig?: CheckoutProviderConfig | null;
+  /** Scopes the saved-card list to the store being paid (host routing owns it). */
+  tenantSlug?: string;
+  pollIntervalMs?: number;
+  onResolved: (status: OrderStatus) => void;
+}
+
+/**
+ * Step 2 "Pagamento" — pick PIX or card and pay on the SAME page. Selecting a
+ * method auto-raises its order and reveals its UI (PIX QR / card form) with no
+ * intermediate tap; switching method clears the previous order (controller).
+ */
+export function PaymentStep({
+  method,
+  onMethodChange,
+  order,
+  buyer,
+  creating,
+  createError,
+  errorField,
+  onGenerate,
+  onUseEmail,
+  onEditBuyer,
+  providerConfig,
+  tenantSlug,
+  pollIntervalMs,
+  onResolved,
+}: PaymentStepProps): JSX.Element {
+  const { LoadingState } = useCheckoutComponents();
+  const cardUnavailable = !cardPathAvailable(providerConfig ?? null);
+  useAutoRaiseOrder(order, method, creating, createError, onGenerate);
+  usePreselectSoleMethod(cardUnavailable, method, onMethodChange);
+
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
+      {/* Self-hiding: renders only for a flow whose Dados step was skipped. */}
+      <PayerSummary name={buyer.name} taxId={buyer.taxId} onEdit={onEditBuyer} />
+
+      <MethodPicker
+        value={method}
+        onChange={onMethodChange}
+        cardUnavailable={cardUnavailable}
+        offered={offeredMethods(providerConfig ?? null)}
+      />
+
+      <PaymentBody
+        order={order}
+        buyer={buyer}
+        providerConfig={providerConfig ?? null}
+        tenantSlug={tenantSlug}
+        onResolved={onResolved}
+        pollIntervalMs={pollIntervalMs}
+      />
+
+      {!order && creating ? (
+        <LoadingState variant="spinner" size="md" message="Gerando pagamento…" dataTestId="payment-generating" />
+      ) : null}
+
+      {!order && method && createError ? (
+        <PaymentErrorPanel
+          message={createError}
+          emailFlagged={errorField === "email"}
+          onUseEmail={onUseEmail}
+          onRetry={() => onGenerate(method)}
+        />
+      ) : null}
+    </Box>
+  );
+}
+
+/**
+ * Order-creation failure (non-field) shown inline on Pagamento with a retry — the
+ * buyer never leaves the step. When the buyer e-mail was rejected (owner testing
+ * with the store's own e-mail) it offers a different e-mail to pay with.
+ */
+function PaymentErrorPanel({
+  message,
+  emailFlagged,
+  onUseEmail,
+  onRetry,
+}: {
+  message: string;
+  emailFlagged: boolean;
+  onUseEmail: (email: string) => void;
+  onRetry: () => void;
+}): JSX.Element {
+  const { Alert, Button, Input } = useCheckoutComponents();
+  const [altEmail, setAltEmail] = useState("");
+
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
+      <Alert variant="danger" title="Não foi possível continuar" description={message} showIcon data-testid="checkout-error" />
+      {emailFlagged ? (
+        <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
+          <Input
+            label="E-mail para o pagamento"
+            type="email"
+            variant="outlined"
+            size="md"
+            fullWidth
+            autoComplete="email"
+            placeholder="use um e-mail diferente do da loja"
+            value={altEmail}
+            onChange={(event) => setAltEmail(event.target.value)}
+            data-testid="checkout-alt-email"
+          />
+          <Box>
+            <Button variant="solid" color="primary" size="md" disabled={!altEmail.trim()} onClick={() => onUseEmail(altEmail.trim())} dataTestId="checkout-use-alt-email">
+              Usar este e-mail e continuar
+            </Button>
+          </Box>
+        </Box>
+      ) : (
+        <Box>
+          <Button variant="solid" color="primary" size="md" onClick={onRetry} dataTestId="checkout-retry-payment">
+            Tentar novamente
+          </Button>
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/components/checkout/client.ts

@@ -0,0 +1,157 @@
+/**
+ * The checkout's PAYMENT client (FUT-43/57/45, moved into the library by
+ * FUT-564) — polling, card charging, saved cards, key refresh and the
+ * provider-protocol read, against the host-mounted `/api/checkout*` surface
+ * (documented in `packages/payments/ADOPTING.md` §3).
+ *
+ * Order CREATION and the buyer-profile save are deliberately NOT here: both
+ * are host domain (the cart, the account) and reach the flow as ports
+ * (`createOrder` / `saveBuyerContact` on `CheckoutFlowProps`).
+ *
+ * Tokenization is not here either: it is a browser-only step shared with the
+ * admin's provider-activation charge, so it lives in this package's `card/`
+ * module.
+ */
+
+import type { SavedCard } from "../../card";
+import { err, ok, type Result } from "../../result";
+
+import type {
+  ChargeCardInput,
+  ChargeOutcome,
+  CheckoutProviderConfig,
+  OrderStatus,
+} from "./types";
+
+// ---------------------------------------------------------------------------
+// Transport
+// ---------------------------------------------------------------------------
+
+/** Envelope the API routes return: `{ data }` on success, `{ error }` on failure. */
+interface ApiEnvelope<T> {
+  data?: T;
+  error?: string;
+}
+
+/** Call an API route and normalize the response into a {@link Result}. */
+async function requestResult<T>(input: string, init?: RequestInit): Promise<Result<T>> {
+  try {
+    const res = await fetch(input, {
+      ...init,
+      headers: { "Content-Type": "application/json", ...init?.headers },
+    });
+    const json = (await res.json().catch(() => null)) as ApiEnvelope<T> | null;
+    if (!res.ok) {
+      return err(json?.error ?? "Não foi possível concluir a operação. Tente novamente.");
+    }
+    if (!json || json.data === undefined) {
+      return err(json?.error ?? "Resposta inválida do servidor.");
+    }
+    return ok(json.data);
+  } catch {
+    return err("Não foi possível conectar. Verifique sua conexão e tente novamente.");
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+/**
+ * What a hosted checkout appended to the return URL when it sent the buyer
+ * back, or undefined.
+ *
+ * InfinitePay's `payment_check` refuses to confirm without BOTH the
+ * `transaction_nsu` and the invoice `slug`, and neither exists until somebody
+ * has actually paid — they arrive here, on the redirect. Left in the URL: the
+ * server treats them as hints, so re-sending them on later polls is harmless.
+ *
+ * Note the buyer has to press "Continuar" on the provider's receipt for this
+ * redirect to happen at all, which is exactly why it is a hint and never the
+ * mechanism: the webhook, and the server-side reconciliation behind it, are
+ * what must work when they simply close the tab.
+ */
+function returnedSettlement(): Record<string, string> {
+  if (typeof window === "undefined") return {};
+  const params = new URLSearchParams(window.location.search);
+  // BOTH. Measured against the live API: handle + order_nsu +
+  // transaction_nsu + slug answers {"success":true,"paid":true,…}, and the
+  // same call missing EITHER answers {"success":false}. Neither exists before
+  // the payment, and the slug is not in the link-creation response — the
+  // redirect and the webhook are the only places both appear together.
+  const transactionNsu = params.get("transaction_nsu") ?? params.get("transaction_id") ?? "";
+  const slug = params.get("slug") ?? "";
+  return {
+    ...(transactionNsu ? { transactionNsu } : {}),
+    ...(slug ? { slug } : {}),
+  };
+}
+
+/** Poll an order's reconciled status (async provider webhook confirmation). */
+export async function pollOrderStatus(orderId: string): Promise<Result<OrderStatus>> {
+  const params = new URLSearchParams({ orderId, ...returnedSettlement() });
+  return requestResult<OrderStatus>(`/api/checkout/status?${params.toString()}`, {
+    method: "GET",
+  });
+}
+
+/**
+ * `GET /api/checkout/config` — the store's active payment protocol (FUT-697):
+ * which provider, how it tokenizes, with which PUBLIC key, and whether the
+ * server grants stub-mode mock tokenization. Public like the menu — the buyer
+ * has not signed in when the checkout decides which methods to render.
+ */
+export async function fetchCheckoutConfig(
+  tenantSlug: string,
+): Promise<Result<CheckoutProviderConfig>> {
+  return requestResult<CheckoutProviderConfig>(
+    `/api/checkout/config?tenantSlug=${encodeURIComponent(tenantSlug)}`,
+    { method: "GET" },
+  );
+}
+
+/**
+ * `POST /api/checkout/refresh-key` — fetch/refresh the store's PagBank card
+ * public key, scoped to the buyer's OWN order (the server derives the store
+ * from it; never a client-supplied store id). Used both for the initial key
+ * (the web page resolved it server-side) and for the FUT-174 rotated-key
+ * self-heal retry.
+ */
+export async function refreshCardPublicKey(input: {
+  orderId: string;
+}): Promise<Result<{ publicKey: string | null }>> {
+  return requestResult<{ publicKey: string | null }>("/api/checkout/refresh-key", {
+    method: "POST",
+    body: JSON.stringify({ orderId: input.orderId }),
+  });
+}
+
+/**
+ * Charge a tokenized (or saved) card against an order. The outcome carries a
+ * `hostedCheckoutUrl` when the provider demands the buyer finish on its own
+ * page (3-D Secure, FUT-698) — the caller then hands the buyer over.
+ */
+export async function chargeCard(input: ChargeCardInput): Promise<Result<ChargeOutcome>> {
+  return requestResult<ChargeOutcome>("/api/checkout/charge", {
+    method: "POST",
+    body: JSON.stringify({
+      orderId: input.orderId,
+      token: input.token,
+      saveCard: input.saveCard,
+      cardMeta: input.cardMeta,
+      taxId: input.taxId,
+    }),
+  });
+}
+
+/** List saved cards available for reuse (empty on any error — non-blocking). */
+export async function listSavedCards(tenantSlug?: string): Promise<SavedCard[]> {
+  // Scoped to the store when known (FUT-697): only cards the store's ACTIVE
+  // provider can actually charge come back — a PagBank-vaulted card is not
+  // offered for a Stone charge it would fail (or misroute).
+  const query = tenantSlug ? `?tenantSlug=${encodeURIComponent(tenantSlug)}` : "";
+  const result = await requestResult<SavedCard[]>(`/api/checkout/cards${query}`, {
+    method: "GET",
+  });
+  return result.ok ? result.data : [];
+}

package/src/components/checkout/hosted-return.ts

@@ -0,0 +1,92 @@
+import type { CheckoutOrder } from "./types";
+
+/**
+ * Surviving the trip to a hosted checkout (FUT-556).
+ *
+ * A redirect provider takes the buyer to ITS OWN site, so the SPA is torn down
+ * and remounts fresh when they come back. Everything the checkout held —
+ * which order was raised, for how much — is gone, and without it the return
+ * lands on an empty payment step: no confirmation, no total, no sign that the
+ * money they just moved arrived.
+ *
+ * The webhook still settles the order server-side; that is the mechanism and it
+ * does not depend on any of this. What is rescued here is only the buyer's view
+ * of it.
+ *
+ * `sessionStorage`, not `localStorage`: the handover is one tab's round trip,
+ * and a pending order left in durable storage would resurface in a later,
+ * unrelated session.
+ */
+
+const KEY = "futurepay.checkout.hostedOrder";
+
+/**
+ * What a hosted provider appends to the return URL. InfinitePay sends the
+ * first three; Stripe's redirect-based 3-D Secure appends `payment_intent`
+ * (+ its client secret) and `redirect_status` to the `return_url` (FUT-698).
+ * Any one alone is enough to recognise a return trip, which is why this is
+ * a "some of", not an "all of" — a provider that sends only its own reference
+ * must still be recognised rather than dropping the buyer on a blank page.
+ */
+const RETURN_MARKERS = [
+  "transaction_nsu",
+  "slug",
+  "order_nsu",
+  "payment_intent",
+  "redirect_status",
+] as const;
+
+/** Whether the current URL looks like a buyer coming back from a hosted page. */
+function isReturnTrip(): boolean {
+  if (typeof window === "undefined") return false;
+  const params = new URLSearchParams(window.location.search);
+  return RETURN_MARKERS.some((marker) => params.has(marker));
+}
+
+/** Park the raised order before handing the buyer to the provider's page. */
+export function rememberHostedOrder(order: CheckoutOrder): void {
+  try {
+    window.sessionStorage?.setItem(KEY, JSON.stringify(order));
+  } catch {
+    // Storage disabled or full. The redirect must still happen: the webhook
+    // settles the order either way, and refusing to send the buyer to pay
+    // would be a far worse failure than a plain return screen.
+  }
+}
+
+/**
+ * The parked order, but ONLY on a return trip — and cleared as it is read.
+ *
+ * Gated on the URL rather than on mere presence so a buyer who abandons the
+ * provider's page and later opens checkout again starts a fresh order instead
+ * of resuming one they never paid. Read-and-clear for the same reason: the
+ * resumed view belongs to exactly one return.
+ */
+export function takeHostedOrder(): CheckoutOrder | null {
+  if (!isReturnTrip()) return null;
+  let raw: string | null = null;
+  try {
+    raw = window.sessionStorage?.getItem(KEY) ?? null;
+    window.sessionStorage?.removeItem(KEY);
+  } catch {
+    return null;
+  }
+  if (!raw) return null;
+  try {
+    const parsed: unknown = JSON.parse(raw);
+    return isCheckoutOrder(parsed) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Trust nothing that came back out of storage: it is the only input here that
+ * did not come from this render, and a half-written or hand-edited value would
+ * otherwise reach the status view as an order.
+ */
+function isCheckoutOrder(value: unknown): value is CheckoutOrder {
+  if (typeof value !== "object" || value === null) return false;
+  const candidate = value as Partial<CheckoutOrder>;
+  return typeof candidate.orderId === "string" && typeof candidate.totalLabel === "string";
+}

package/src/components/checkout/icons.tsx

@@ -0,0 +1,61 @@
+/**
+ * The checkout's icons, drawn inline through MUI's `SvgIcon` (already a peer).
+ *
+ * The path data is Material Symbols' — byte-identical to the corresponding
+ * `@mui/icons-material` exports the storefront rendered before the move — so
+ * the screens keep their exact pixels WITHOUT this package growing an
+ * icons-package dependency (the design-system contract is peers `@mui/material`
+ * + `@emotion/*` and nothing else; see `ui.tsx`).
+ */
+import { SvgIcon, type SvgIconProps } from '@mui/material';
+import type { JSX } from 'react';
+
+function makeIcon(paths: string[]): (props: SvgIconProps) => JSX.Element {
+  return function CheckoutIcon(props: SvgIconProps): JSX.Element {
+    return (
+      <SvgIcon {...props}>
+        {paths.map((d) => (
+          <path key={d} d={d} />
+        ))}
+      </SvgIcon>
+    );
+  };
+}
+
+export const ArrowBackIcon = makeIcon([
+  'M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z',
+]);
+
+export const LockOutlinedIcon = makeIcon([
+  'M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2M9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9zm9 14H6V10h12zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2',
+]);
+
+export const ContentCopyIcon = makeIcon([
+  'M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z',
+]);
+
+export const CreditCardIcon = makeIcon([
+  'M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2m0 14H4v-6h16zm0-10H4V6h16z',
+]);
+
+export const PixIcon = makeIcon([
+  'm15.45 16.52-3.01-3.01c-.11-.11-.24-.13-.31-.13s-.2.02-.31.13L8.8 16.53c-.34.34-.87.89-2.64.89l3.71 3.7c1.17 1.17 3.07 1.17 4.24 0l3.72-3.71c-.91 0-1.67-.18-2.38-.89M8.8 7.47l3.02 3.02c.08.08.2.13.31.13s.23-.05.31-.13l2.99-2.99c.71-.74 1.52-.91 2.43-.91l-3.72-3.71c-1.17-1.17-3.07-1.17-4.24 0l-3.71 3.7c1.76 0 2.3.58 2.61.89',
+  'm21.11 9.85-2.25-2.26H17.6c-.54 0-1.08.22-1.45.61l-3 3c-.28.28-.65.42-1.02.42-.36 0-.74-.15-1.02-.42L8.09 8.17c-.38-.38-.9-.6-1.45-.6H5.17l-2.29 2.3c-1.17 1.17-1.17 3.07 0 4.24l2.29 2.3h1.48c.54 0 1.06-.22 1.45-.6l3.02-3.02c.28-.28.65-.42 1.02-.42s.74.14 1.02.42l3.01 3.01c.38.38.9.6 1.45.6h1.26l2.25-2.26c1.17-1.18 1.17-3.1-.02-4.29',
+]);
+
+export const CheckCircleOutlineIcon = makeIcon([
+  'M16.59 7.58 10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8',
+]);
+
+export const ErrorOutlineIcon = makeIcon([
+  'M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8',
+]);
+
+export const ScheduleIcon = makeIcon([
+  'M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8',
+  'M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z',
+]);
+
+export const PersonOutlineIcon = makeIcon([
+  'M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4m0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4',
+]);