Bloc de passage à l'abonnement

Le bloc Subscription upgrade est un sous-bloc qui s’imbrique dans Cart items. Il invite les clients à convertir une ligne d’achat unique éligible en abonnement directement depuis le panier, transformant un achat ponctuel en revenu récurrent au moment de la décision, et permet aux clients déjà abonnés de changer ou d’annuler leur plan sur cette ligne.

• N’apparaît que sur les lignes éligibles. Le bloc lit les plans de vente du produit et n’affiche rien sur une ligne dont le produit n’a pas de plans d’abonnement.
• Jamais proposé sur les cadeaux de récompense. S’abonner à un cadeau gratuit accordé automatiquement lui retirerait son statut de récompense, donc l’invitation est supprimée sur ces lignes.
• Sur une ligne d’achat unique, il affiche l’appel à l’action de passage à l’abonnement.
• Sur une ligne déjà abonnée, il affiche un sélecteur de plan ainsi que l’option « repasser à l’achat unique ».

• Parent : s’imbrique uniquement dans Cart items.
• Maximum : 1 par panier.
• Non ajouté par défaut. Non verrouillé, vous pouvez donc le retirer ou le masquer.

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