> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Bloco Subscription upgrade

> O sub-bloco Subscription upgrade do Aftersell Cart: converta linhas elegíveis de compra única em assinatura a partir do carrinho.

> O bloco **Subscription upgrade** é um sub-bloco que fica aninhado dentro de [**Cart items**](/pt/aftersell/cart/cart-items-block). Ele convida os compradores a trocar um item de linha elegível de compra única por uma assinatura direto do carrinho, transformando uma compra única em receita recorrente no momento da decisão, e permite que compradores que já assinaram mudem ou cancelem o plano naquela linha.

<div id="behavior">
  ## Comportamento
</div>

* **Só aparece em linhas elegíveis.** O bloco lê os selling plans do produto e não renderiza nada em uma linha cujo produto não tem planos de assinatura.
* **Nunca oferecido em brindes de recompensa.** Assinar um brinde concedido automaticamente removeria seu status de recompensa, então o convite é suprimido nessas linhas.
* Em uma **linha de compra única**, ele mostra a chamada para upgrade.
* Em uma **linha já assinada**, ele mostra um seletor de planos mais a opção de "voltar para compra única".

<div id="settings">
  ## Configurações
</div>

| Configuração         | O que controla                                                                                           | Padrão                          |
| -------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------- |
| **Button text**      | A chamada para upgrade em uma linha de compra única. Suporta os tokens `{{discount}}` e `{{plan name}}`. | `Subscribe & Save`              |
| **Unsubscribe text** | A opção que reverte uma linha assinada para compra única.                                                | `Downgrade - One time purchase` |

<div id="placement-and-limits">
  ## Posicionamento e limites
</div>

* **Pai:** aninha somente dentro de Cart items.
* **Máximo:** 1 por carrinho.
* Não adicionado por padrão. Não bloqueado, então você pode removê-lo ou ocultá-lo.

Por ser um sub-bloco, ele renderiza por linha, posicionado acima ou abaixo do conteúdo do produto dependendo de onde você o coloca em relação à linha do Produto. Veja [como os sub-blocos se posicionam](/pt/aftersell/cart/cart-items-block#sub-blocks-and-how-they-position).

<div id="custom-template">
  ## Template personalizado
</div>

Suporta um [template personalizado](/pt/aftersell/cart/custom-templates) na sua aba Code, que substitui o markup nativo deste bloco pelo seu JSX. Estas são as props que ele recebe.

Este bloco renderiza um de dois estados, e `view.state` diz qual. `view` nunca é `null` dentro de um template personalizado: quando uma linha não tem planos, o bloco não renderiza nada e seu template não é chamado.

| Prop              | Tipo                               | Para que serve                                                                                                                                 |
| ----------------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `view`            | `object`                           | O estado da linha. Ou `{ state: 'upgrade', buttonText, planId }` ou `{ state: 'subscribed', plans, activePlanId }`.                            |
| `title`           | `string`                           | O título do **produto**, não um cabeçalho para o bloco. O template nativo o usa apenas para construir o rótulo acessível do seletor de planos. |
| `unsubscribeText` | `string`                           | Rótulo da opção de voltar para compra única.                                                                                                   |
| `busy`            | `boolean`                          | `true` enquanto uma mudança de plano está em andamento.                                                                                        |
| `selectPlan`      | `(planId: number \| null) => void` | Assina ou troca de plano. Passe `null` para cancelar a assinatura.                                                                             |
| `onChange`        | `(event: Event) => void`           | `onChange` pronto para um `<select>`, para você não ter que interpretar o valor por conta própria.                                             |
| `oneTimeValue`    | `string`                           | O valor sentinela de `<option>` que representa "compra única".                                                                                 |
| `line`            | `AftersellCartLine`                | A [linha do carrinho](/pt/aftersell/cart/sdk-cart-object#cart-lines) à qual este bloco pertence.                                               |
| `productId`       | `number`                           | ID do produto Shopify.                                                                                                                         |
| `variantId`       | `number`                           | ID da variante Shopify.                                                                                                                        |

Cada entrada em `view.plans` é `{ id: number, name: string, discountPercent: number }`.

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
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>
  );
}
```

<Note>
  Use `onChange` para um `<select>` e `selectPlan` para botões. `onChange` já trata o sentinela `oneTimeValue`; se você conectar seu próprio handler a um `<select>`, terá que comparar com `oneTimeValue` e chamar `selectPlan(null)` por conta própria.
</Note>

<div id="design">
  ## Design
</div>

Estilize este bloco com sua seção **Design** no painel de configurações. Essas são sobreposições por bloco que se aplicam por cima do seu design global e recorrem a ele quando estão em branco.

O que são configurações de design? Saiba mais aqui: [Configurações de design](/pt/aftersell/cart/design-settings).