Link expirado ao ativar uma conta ou redefinir a senha de um usuário

Neste artigo, evitaremos mostrar uma mensagem 404 aos usuários nos seguintes cenários:

1. O administrador da loja cria um usuário para seu cliente e envia o e-mail de ativação da conta. O cliente recebe um link para ativar sua conta, porém, ele expirou.

2. O cliente deseja redefinir sua senha e então é enviado um e-mail com um link, porém, esse link expirou.

Com as alterações abaixo, teremos duas mensagens para cada caso:

O link expirou ao ativar a conta

O link expirou ao redefinir a senha

HTML

1.  No arquivo templates/account/newpass.tpl, vamos mudar o título da seção para algo assim:

{% set is_account_activation = action == 'account_activation' %}
{% embed "snipplets/page-header.tpl" %}
    {% block page_header_text %}{{ (is_account_activation ? 'Activar cuenta' : 'Cambiar contraseña') | translate }}{% endblock page_header_text %}
{% endembed %}

 2.  Então, no mesmo arquivo, vamos adicionar as novas mensagens dentro de uma condição {% if link_expired %}, deixando o resto do conteúdo que já tínhamos para esta página no else.

<section class="account-page">
    <div class="container">
        <div class="row justify-content-md-center">
            <div class="col-md-8">
                {% if link_expired %}

                    {% set contact_links = store.whatsapp or store.phone or store.email %}
                    
                    <div class="mb-4 text-center">
                        {% if is_account_activation %}
                            <div class="mb-1 font-weight-bold">{{ 'El link para activar tu cuenta expiró' | translate }}</div>
                            <div>{{ 'Contactanos para que te enviemos uno nuevo.' | translate }}</div>
                        {% else %}
                            <div class="mb-1 font-weight-bold">{{ 'El link para cambiar tu contraseña expiró' | translate }}</div>
                            <div class="mb-3">{{ 'Ingresá tu email para recibir uno nuevo.' | translate }}</div>
                            <a href="{{ store.customer_reset_password_url }}" class="btn-link btn-link-primary">{{ 'Ingresar email' | translate }}</a>
                        {% endif %}
                    </div>

                    {% if contact_links and is_account_activation %}
                        {% include "snipplets/contact-links.tpl" with {phone_and_mail_only: true} %}
                    {% endif %}

                {% else %}
                    {# Conteúdo que já tínhamos #}
                {% endif %}
            </div>
        </div>
    </div>
</section>

 3. Faremos algumas alterações no arquivo sniplets/contact-links.tpl para o caso em que o cliente precise entrar em contato com a loja, mostrar apenas os meios de contato telefone e e-mail, deixando-o da seguinte forma:

{# /*============================================================================
  #Contact links
==============================================================================*/#}

<ul class="contact-info text-center{% if columns %} row{% endif %}">
{% if store.whatsapp %}
    <li class="contact-item{% if columns %} col-6 col-md{% endif %}">
        {% include "snipplets/svg/whatsapp.tpl" with {svg_custom_class: "icon-inline icon-lg icon-w mx-2 svg-icon-text"} %}
        <a href="{{ store.whatsapp }}" class="contact-link">{{ store.whatsapp |trim('https://wa.me/') }}</a>
    </li>
{% elseif store.phone %}
    <li class="contact-item{% if columns %} col-6 col-md{% endif %}">
        {% include "snipplets/svg/phone.tpl" with {svg_custom_class: "icon-inline icon-lg icon-w mx-2 svg-icon-text"} %}
        <a href="tel:{{ store.phone }}" class="contact-link">{{ store.phone }}</a>
    </li>
{% endif %}
{% if store.email %}
    <li class="contact-item{% if columns %} col-6 col-md{% endif %}">
        {% include "snipplets/svg/envelope.tpl" with {svg_custom_class: "icon-inline icon-lg icon-w mx-2 svg-icon-text"} %}
        <a href="mailto:{{ store.email }}" class="contact-link">{{ store.email }}</a>
    </li>
{% endif %}
{% if not phone_and_mail_only %}
    {% if store.address and not is_order_cancellation %}
        <li class="contact-item{% if columns %} col-6 col-md{% endif %}">
            {% include "snipplets/svg/map-marker-alt.tpl" with {svg_custom_class: "icon-inline icon-lg icon-w mx-2 svg-icon-text"} %}
            {{ store.address }}
        </li>
    {% endif %}
    {% if store.blog %}
        <li class="contact-item{% if columns %} col-6 col-md{% endif %}">
            {% include "snipplets/svg/comments.tpl" with {svg_custom_class: "icon-inline icon-lg icon-w mx-2 svg-icon-text"} %}
            <a target="_blank" href="{{ store.blog }}" class="contact-link">{{ "Visita nuestro Blog!" | translate }}</a>
        </li>
    {% endif %}
{% endif %}
</ul>

Traduções

Finalmente, adicionamos os textos para as traduções no arquivo config/translations.txt

es "El link para cambiar tu contraseña expiró"
pt "O link para alterar sua senha expirou"
en "The link to change your password has expired"
es_mx "El link para cambiar tu contraseña expiró"

es "Ingresá tu email para recibir uno nuevo."
pt "Insira seu email para receber um novo."
en "Enter your email to receive a new one."
es_mx "Ingresa tu email para recibir uno nuevo."

es "Ingresar email"
pt "Inserir e-mail"
en "Enter email"
es_mx "Ingresar email"

es "El link para activar tu cuenta expiró"
pt "O link para ativar sua conta expirou"
en "The link to activate your account has expired"
es_mx "El link para activar tu cuenta expiró"

es "Contactanos para que te enviemos uno nuevo."
pt "Entre em contato com a gente para que te enviemos um novo."
en "Contact us so we can send you a new one."
es_mx "Contáctanos para que te enviemos uno nuevo.

Ativação

Depois que todas as alterações forem aplicadas ao seu código, precisamos que você entre em contato com a Nuvemshop para concluir a ativação em parceiros@nuvemshop.com.br