Bloque de mejora a suscripción

El bloque Subscription upgrade es un sub-bloque que se anida dentro de Cart items. Invita a los compradores a cambiar una línea elegible de compra única a una suscripción directamente desde el carrito, convirtiendo una compra única en ingresos recurrentes en el momento de la decisión, y permite a los compradores que ya están suscritos cambiar o cancelar su plan en esa línea.

• Solo aparece en líneas elegibles. El bloque lee los planes de venta del producto y no renderiza nada en una línea cuyo producto no tiene planes de suscripción.
• Nunca se ofrece en regalos de recompensa. Suscribirse a un regalo gratis otorgado automáticamente le quitaría su estado de recompensa, así que la invitación se suprime en esas líneas.
• En una línea de compra única, muestra la llamada a la acción de mejora.
• En una línea ya suscrita, muestra un selector de plan más la opción de “bajar a compra única”.

• Padre: se anida solo dentro de Cart items.
• Máximo: 1 por carrito.
• No se agrega de forma predeterminada. No está bloqueado, así que puedes quitarlo u ocultarlo.

function CustomTemplate(props) {
  const { view } = props;

  if (view.state === 'upgrade') {
    return (
      <button type="button" onClick={() => props.selectPlan(view.planId)} disabled={props.busy}>
        {view.buttonText}
      </button>
    );
  }

  return (
    <div>
      <select
        aria-label={`Subscription plan — ${props.title}`}
        value={String(view.activePlanId)}
        onChange={props.onChange}
        disabled={props.busy}
      >
        {view.plans.map((plan) => (
          <option key={plan.id} value={String(plan.id)}>
            {plan.name}{plan.discountPercent > 0 ? ` (${plan.discountPercent}% off)` : ''}
          </option>
        ))}
        <option value={props.oneTimeValue}>{props.unsubscribeText}</option>
      </select>
    </div>
  );
}