helixpay_recurrence_selector.liquid

{% comment %}
  Renders recurrence selector
  version 3.0

  Accepts:
  - product: {Object} Product Liquid object

  Usage:
  {% render 'helixpay_recurrence_selector', product: product %}
{% endcomment %}

{% liquid
  assign recurrence = product.metafields.bukopay.recurrence.value
  assign single_recurrence_option = recurrence | where: "code", "single"
  assign has_subscription_recurrence = false
  assign first_subscription_recurrence = blank
  
  for recurrence_option in recurrence
    if recurrence_option.code != 'single'
      assign has_subscription_recurrence = true
      assign first_subscription_recurrence = recurrence_option
      break
    endif
  endfor
%}

{% if has_subscription_recurrence == true %}
  <div class="recurrenceSelector">
    <script type="application/json">
      {{ product.metafields.bukopay.recurrence.value | json }}
    </script>
    <input type="hidden" class="recurrenceCode" name="properties[_recurrence]" />
    <input
      type="hidden"
      class="recurrenceDiscountType"
      name="properties[_recurrenceDiscountType]"
    />
    <input
      type="hidden"
      class="recurrenceDiscountValue"
      name="properties[_recurrenceDiscountValue]"
    />
    <input
      type="hidden"
      class="recurrenceLabel"
      name="properties[Frequency]"
    />
    <input
      type="hidden"
      class="computationType"
      name="properties[_computationType]"
    />

    {%- if single_recurrence_option != blank -%}
      <div>
        <label class="helixpay-purchase-option">
          <input
            autocomplete="off"
            type="radio"
            name="recurrenceRadio"
            class="recurrence-radio"
            value="single"
            checked
          />
          <div>Single Purchase</div>
        </label>
      </div>
    {%- endif -%}

    <div>
      <div>
        <label class="helixpay-purchase-option">
          <input
            autocomplete="off"
            type="radio"
            name="recurrenceRadio"
            class="recurrence-radio"
            value="subscription"
            {%- if single_recurrence_option == blank -%} checked {%- endif -%}
          >
          Subscribe & Save
        </label>
      </div>
      <div class="select subscriptionRecurrenceSelect--wrapper">
        <select
          class="subscriptionRecurrenceSelect select__select"
        >
          {%- for recurrence_option in recurrence -%} 
            {%- if recurrence_option.code != 'single' -%}
              <option value="{{ recurrence_option.code }}">
                {{ recurrence_option.label }}
                {% if recurrence_option.discountValue > 0 %}
                  <span>
                  {% if recurrence_option.discountType == 1 %}
                    - Save {{ recurrence_option.discountValue | money }}
                  {%- elsif recurrence_option.discountType == 2 -%}
                    - Save {{ recurrence_option.discountValue }}%
                  {%- endif -%}
                  </span>
              </option>
              {% endif %}
            {%- endif -%}
          {%- endfor -%}
        </select>
      </div>
    </div>
    

    <div class="helixPay-hsw">
      <div class="hsw-hover">  
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
          <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/>
          <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/>
        </svg>
        Subscription Details
      </div>
      <div class="hsw-tooltip" 
        style="background-color:{{ settings.colors_accent_2 }};color:#fff">
          <div class="hsw-header">
            <span></span>
            <button type="button" class="close-hsw" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <p></p>
          <a href="https://helixpay.ph/" target="_blank">Powered by
            <img 
              src="https://cdn.helixpay.ph/images/assets/helixpay_logo_white_horizontal.png?" 
              alt="Helixpay">
          </a>
      </div>
    </div>
    
  </div>
{% endif %}