Resumen del pago

Las cantidades, los subtotales y el total ruedan cuando cambia el carrito; el aviso del cupón entra y sale; pagar requiere mantener pulsado a propósito.

MotionListMotionNumberMotionPresenceMotionHold

Preparando el ejemplo…

JavaScript está desactivado. El código de abajo es el ejemplo completo.

App.jsx

import { useState } from 'react';
import {
  MotionHold,
  MotionList,
  MotionNumber,
  MotionPresence,
} from '@kkwaenggwari/animated-chorus';
import './styles.css';

const rates = { USD: 1, EUR: 0.92, KRW: 1380 };
const catalog = [
  { id: 'mug', name: 'Stoneware mug', price: 18 },
  { id: 'tote', name: 'Canvas tote', price: 24 },
  { id: 'lamp', name: 'Desk lamp', price: 89 },
  { id: 'plant', name: 'Small fern', price: 32 },
];

export default function App({ currency = 'USD', holdTime = 1200 }) {
  const [cart, setCart] = useState([
    { ...catalog[0], quantity: 2 },
    { ...catalog[2], quantity: 1 },
  ]);
  const [coupon, setCoupon] = useState(false);
  const [paid, setPaid] = useState(false);

  const money = (amount) => ({
    value: Math.round(amount * rates[currency] * 100) / 100,
    intl: true,
    locale: 'en-US',
    format: { style: 'currency', currency },
  });
  const change = (id, delta) =>
    setCart(
      cart
        .map((item) => (item.id === id ? { ...item, quantity: item.quantity + delta } : item))
        .filter((item) => item.quantity > 0),
    );
  const addNext = () => {
    const next = catalog.find((product) => !cart.some((item) => item.id === product.id));
    if (next) setCart([...cart, { ...next, quantity: 1 }]);
  };

  const subtotal = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
  const discount = coupon ? subtotal * 0.1 : 0;
  const total = subtotal - discount;

  return (
    <div className="checkout">
      <MotionList
        as="ul"
        className="cart"
        items={cart}
        effect="slide"
        renderItem={(item) => (
          <div className="line">
            <span className="name">{item.name}</span>
            <span className="quantity">
              <button onClick={() => change(item.id, -1)}>−</button>
              <MotionNumber value={item.quantity} />
              <button onClick={() => change(item.id, 1)}>+</button>
            </span>
            <MotionNumber className="amount" {...money(item.price * item.quantity)} />
          </div>
        )}
      />
      <div className="actions">
        <button onClick={addNext}>Add an item</button>
        <button onClick={() => setCoupon(!coupon)}>{coupon ? 'Remove' : 'Apply'} SAVE10</button>
      </div>
      <MotionPresence present={coupon} className="coupon">
        SAVE10 applied: 10% off
      </MotionPresence>
      <p className="total">
        <span className="label">Total</span>
        <MotionNumber {...money(total)} mode="roll" />
      </p>
      {paid ? (
        <button className="done" onClick={() => setPaid(false)}>
          Paid. Start over
        </button>
      ) : (
        <MotionHold
          className="pay"
          fillClassName="pay-fill"
          duration={holdTime}
          onConfirm={() => setPaid(true)}
        >
          Hold to pay
        </MotionHold>
      )}
    </div>
  );
}

styles.css

.checkout {
  display: grid;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 20px;
}

.cart {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid #cfe8dc;
  border-radius: 12px;
  background: #fff;
}

.name {
  color: #0e2e24;
  font-weight: 600;
}

.quantity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

.quantity button {
  width: 32px;
  height: 32px;
  border: 1px solid #cfe8dc;
  border-radius: 50%;
  background: #fff;
  font-size: 16px;
  cursor: pointer;
}

.amount {
  min-width: 84px;
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.actions button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 14px system-ui,
    sans-serif;
  cursor: pointer;
}

.coupon {
  padding: 10px 14px;
  border-radius: 12px;
  background: #eaf6f0;
  color: #176b52;
  font-weight: 600;
}

.total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 6px 0 0;
  padding-top: 12px;
  border-top: 1px solid #cfe8dc;
  font:
    800 30px system-ui,
    sans-serif;
  font-variant-numeric: tabular-nums;
  color: #0e2e24;
}

.total .label {
  font-size: 16px;
  font-weight: 600;
  color: #5b616b;
}

.pay,
.done {
  position: relative;
  min-height: 52px;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-radius: 999px;
  background: #176b52;
  color: #fff;
  font:
    700 16px system-ui,
    sans-serif;
  cursor: pointer;
  user-select: none;
  touch-action: none;
}

.pay-fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #0e2e24;
}

.done {
  background: #0e2e24;
}

Cómo funciona

MotionList hace entrar las líneas nuevas y salir las eliminadas.
MotionNumber formatea la moneda con intl y hace rodar cada cambio, incluido un cambio de moneda.
MotionPresence mantiene montado el mensaje del cupón mientras sale.
MotionHold pide mantener pulsado antes de pagar; si sueltas antes, retrocede.

Resumen del pago

Cómo funciona

Más ejemplos

Buscar