Subscription upgrade-block

Het Subscription upgrade-block is een sub-block dat nest binnen Cart items. Het spoort shoppers aan om een in aanmerking komend eenmalig regelitem rechtstreeks vanuit de winkelwagen om te zetten naar een abonnement, waarmee een eenmalige aankoop op het beslismoment terugkerende omzet wordt, en het laat shoppers die al geabonneerd zijn hun plan op die regel wijzigen of annuleren.

• Verschijnt alleen op regels die in aanmerking komen. Het block leest de selling plans van het product en rendert niets op een regel waarvan het product geen abonnementsplannen heeft.
• Wordt nooit aangeboden op beloningscadeaus. Abonneren op een automatisch toegekend gratis cadeau zou de beloningsstatus ervan wegnemen, dus de prompt wordt op die regels onderdrukt.
• Op een eenmalige regel toont het de upgrade-call-to-action.
• Op een al geabonneerde regel toont het een planselector plus de optie “downgrade naar eenmalig”.

• Parent: nest alleen binnen Cart items.
• Maximum: 1 per winkelwagen.
• Niet standaard toegevoegd. Niet vergrendeld, dus je kunt het verwijderen of verbergen.

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