gift-card-recipient-form.liquid

{% comment %}
  Renders gift card recipient form.
  Accepts:
  - product: {Object} product object.
  - form: {Object} the product form object.
  - section: {Object} section to which this snippet belongs.

  Usage:
  {% render 'gift-card-recipient-form', product: product, form: form, section: section %}
{% endcomment %}

<div class="customer">
  {%- assign gift_card_recipient_control_flag = 'properties[__shopify_send_gift_card_to_recipient]' -%}
  <script src="{{ 'recipient-form.js' | asset_url }}" defer="defer"></script>
  <recipient-form
    class="recipient-form"
    data-section-id="{{ section.id }}"
    data-product-variant-id="{{ product.selected_or_first_available_variant.id }}"
  >
    <input
      id="Recipient-Checkbox-{{ section.id }}"
      type="checkbox"
      name="{{ gift_card_recipient_control_flag }}"
      disabled
      unchecked
    >
    <label class="recipient-checkbox" for="Recipient-Checkbox-{{ section.id }}">
      <svg
        width="1.6rem"
        height="1.6rem"
        viewBox="0 0 16 16"
        aria-hidden="true"
        focusable="false"
      >
        <rect width="16" height="16" stroke="currentColor" fill="none" stroke-width="1"></rect>
      </svg>
      <svg
        aria-hidden="true"
        class="icon icon-checkmark"
        width="1.1rem"
        height="0.7rem"
        viewBox="0 0 11 7"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="M1.5 3.5L2.83333 4.75L4.16667 6L9.5 1" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      <span>{{ 'recipient.form.checkbox' | t }}</span>
    </label>
    <div
      class="product-form__recipient-error-message-wrapper"
      role="alert"
      {% unless form.errors %}
        hidden
      {% endunless %}
    >
      <h2 class="form__message" tabindex="-1" autofocus>
        {% render 'icon-error' %}
        <span class="error-message">{{ 'templates.contact.form.error_heading' | t }}</span>
      </h2>

      <ul>
        {%- if form.errors -%}
          {%- for field in form.errors -%}
            <li>
              {%- if field == 'form' -%}
                {{ form.errors.messages[field] }}
              {%- else -%}
                <a href="#Recipient-{{ field }}-{{ section.id }}">
                  {{ form.errors.translated_fields[field] | capitalize }}
                  {{ form.errors.messages[field] }}
                </a>
              {%- endif -%}
            </li>
          {%- endfor -%}
        {%- endif -%}
      </ul>
    </div>
    <div class="recipient-fields">
      <hr>
      <div class="recipient-fields__field">
        <div class="field">
          <input
            class="field__input"
            id="Recipient-email-{{ section.id }}"
            type="email"
            placeholder="{{ 'recipient.form.email' | t }}"
            name="properties[Recipient email]"
            value="{{ form.email }}"
            {% if form.errors contains 'email' %}
              aria-invalid="true"
              aria-describedby="RecipientForm-email-error-{{ section.id }}"
            {% endif %}
          >
          <label class="field__label" for="Recipient-email-{{ section.id }}">
            <span class="recipient-email-label required">{{ 'recipient.form.email_label' | t }}</span>
            <span class="recipient-email-label optional">{{ 'recipient.form.email_label_optional' | t }}</span>
          </label>
        </div>

        <div
          id="RecipientForm-email-error-{{ section.id }}"
          class="form__message{% unless form.errors contains 'email' %} hidden{% endunless %}"
        >
          {% render 'icon-error' %}
          <span class="error-message">
            {%- if form.errors contains 'email' -%}
              {{ form.errors.translated_fields.email | capitalize }}
              {{ form.errors.messages.email }}.
            {%- endif -%}
          </span>
        </div>
      </div>

      <div class="recipient-fields__field">
        <div class="field">
          <input
            class="field__input"
            autocomplete="name"
            type="text"
            id="Recipient-name-{{ section.id }}"
            name="properties[Recipient name]"
            placeholder="{{ 'recipient.form.name' | t }}"
            value="{{ form.name }}"
            {% if form.errors contains 'name' %}
              aria-invalid="true"
              aria-describedby="RecipientForm-name-error-{{ section.id }}"
            {% endif %}
          >
          <label class="field__label" for="Recipient-name-{{ section.id }}">
            {{- 'recipient.form.name_label' | t -}}
          </label>
        </div>

        <div
          id="RecipientForm-name-error-{{ section.id }}"
          class="form__message{% unless form.errors contains 'name' %} hidden{% endunless %}"
        >
          {% render 'icon-error' %}
          <span class="error-message">
            {%- if form.errors contains 'name' -%}
              {{ form.errors.translated_fields.name | capitalize }}
              {{ form.errors.messages.name }}.
            {%- endif -%}
          </span>
        </div>
      </div>

      <div class="recipient-fields__field">
        {%- assign max_chars_message = 200 -%}
        {%- assign max_chars_message_rendered = 'recipient.form.max_characters' | t: max_chars: max_chars_message -%}
        {%- assign message_label_rendered = 'recipient.form.message_label' | t -%}
        <div class="field">
          <textarea
            rows="10"
            id="Recipient-message-{{ section.id }}"
            class="text-area field__input"
            name="properties[Message]"
            maxlength="{{ max_chars_message }}"
            placeholder="{{ 'recipient.form.message' | t }}"
            aria-label="{{ message_label_rendered }} {{ max_chars_message_rendered }}"
            {% if form.errors contains 'message' %}
              aria-invalid="true"
              aria-describedby="RecipientForm-message-error-{{ section.id }}"
            {% endif %}
          >{{ form.message }}</textarea>
          <label class="form__label field__label" for="Recipient-message-{{ section.id }}">
            {{ message_label_rendered }}
          </label>
        </div>

        <label class="form__label recipient-form-field-label recipient-form-field-label--space-between">
          <span>{{ max_chars_message_rendered }}</span>
        </label>

        <div
          id="RecipientForm-message-error-{{ section.id }}"
          class="form__message{% unless form.errors contains 'message' %} hidden{% endunless %}"
        >
          {% render 'icon-error' %}
          <span class="error-message">
            {%- if form.errors contains 'message' -%}
              {{ form.errors.translated_fields.message | capitalize }}
              {{ form.errors.messages.message }}.
            {%- endif -%}
          </span>
        </div>
      </div>
    </div>
    <input
      type="hidden"
      name="{{ gift_card_recipient_control_flag }}"
      value="if_present"
      id="Recipient-Control-{{ section.id }}"
    >
  </recipient-form>
</div>