Subscription-Upgrade-Block

Der Subscription upgrade-Block ist ein Sub-Block, der innerhalb von Cart items verschachtelt wird. Er fordert Käufer auf, eine berechtigte Einmalkauf-Position direkt im Warenkorb auf ein Abonnement umzustellen — so wird ein Einmalkauf im Moment der Entscheidung zu wiederkehrendem Umsatz — und ermöglicht es bereits abonnierten Käufern, ihren Plan auf dieser Zeile zu ändern oder zu kündigen.

• Erscheint nur auf berechtigten Zeilen. Der Block liest die Selling Plans des Produkts und rendert nichts auf einer Zeile, deren Produkt keine Abonnement-Pläne hat.
• Wird nie auf Reward-Geschenken angeboten. Das Abonnieren eines automatisch gewährten Gratisgeschenks würde dessen Reward-Status entfernen, daher wird die Aufforderung auf diesen Zeilen unterdrückt.
• Auf einer Einmalkauf-Zeile zeigt er den Upgrade-Call-to-Action.
• Auf einer bereits abonnierten Zeile zeigt er eine Planauswahl plus die Option „Downgrade auf Einmalkauf“.

• Übergeordneter Block: verschachtelt sich nur innerhalb von Cart items.
• Maximum: 1 pro Warenkorb.
• Nicht standardmäßig hinzugefügt. Nicht gesperrt, du kannst ihn also entfernen oder ausblenden.

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>
  );
}