app-MAIL-temp/app/dashboard/templates/dashboard/referral.html

{% extends 'default.html' %}

{% block title %}
  Referral
{% endblock %}

{% set active_page = "setting" %}

{% block default_content %}
  <div class="col">
    <h1 class="h3 mb-5"> Referrals </h1>

    {% if referrals|length == 0 %}
      <div class="alert alert-info">
        You don't have any referral code yet. Let's create the first one and start inviting your friends! <br>
      </div>
    {% endif %}


    {% for referral in referrals %}
      <div class="card p-4 shadow-sm {% if referral.id == highlight_id %} highlight-row {% endif %}">

        <form method="post">
          <input type="hidden" name="form-name" value="update">
          <input type="hidden" name="referral-id" value="{{ referral.id }}">

          <b>Name</b>
          <div class="d-flex mb-3">
            <div class="mr-2">
              <input name="name" class="form-control" value="{{ referral.name or '' }}">
            </div>
            <div>
              <button class="btn btn-outline-success">Update</button>
            </div>
          </div>
        </form>


        {% set nb_user = referral.nb_user() %}
        {% set nb_paid_user = referral.nb_paid_user() %}
        {% if nb_user > 0 %}
          <div class="mb-3">
            <b class="h1">{{ nb_user }}</b>
            {% if nb_user == 1 %} person {% else %} people {% endif %}
            has protected their emails thanks to you! <br>

            Among them, <b class="h1">{{ nb_paid_user }}</b>
            {% if nb_paid_user == 1 %} person {% else %} people {% endif %}
            has upgraded their accounts.
          </div>
        {% endif %}

        <div class="mt-2">
          Please use this referral link to invite your friends trying out SimpleLogin: <br>

          <div class="d-flex mb-5 mt-2" style="max-width: 40em">
            <div class="flex-grow-1 mr-2">
              <input class="form-control" id="referral-{{ referral.id }}" readonly
                     value="{{ referral.link() }}">
            </div>

            <div>
              <button class="clipboard btn btn-outline-primary" data-clipboard-action="copy"
                      data-clipboard-text="{{ referral.link() }}"
                      data-clipboard-target="#referral-{{ referral.id }}">
                Copy <i class="fe fe-clipboard"></i>
              </button>
            </div>
          </div>
        </div>

        <div class="mb-3">
          You can also use the referral code <b>{{ referral.code }}</b> when sharing any link on SimpleLogin. <br>
          Just append <em>?slref={{ referral.code }}</em> to any link on SimpleLogin website.
        </div>

        <div>
          <form method="post">
            <input type="hidden" name="form-name" value="delete">
            <input type="hidden" name="referral-id" value="{{ referral.id }}">
            <span class="delete-referral  float-right btn btn-outline-danger">Delete</span>
          </form>
        </div>

      </div>
    {% endfor %}

    {% if referrals|length > 0 %}
      <hr>
    {% endif %}

    <form method="post" class="mt-6">
      <input type="hidden" name="form-name" value="create">
      <input name="name" class="form-control"
             placeholder="Referral name, something to help you remember why you create it :)">
      <button class="btn btn-success mt-2">Create a new referral code</button>
    </form>
  </div>
{% endblock %}

{% block script %}
  <script>
    $(".delete-referral").on("click", function (e) {
      let that = $(this);

      bootbox.confirm({
        message: "This operation is irreversible, please confirm.",
        buttons: {
          confirm: {
            label: 'Yes, delete it',
            className: 'btn-danger'
          },
          cancel: {
            label: 'Cancel',
            className: 'btn-outline-primary'
          }
        },
        callback: function (result) {
          if (result) {
            that.closest("form").submit();
          }
        }
      })


    });
  </script>
{% endblock %}