mock_helixpay_recurrence_selector.liquid

Liquid

{% comment %}

  !!!!!!!!!!!! MOCK ONLY !!!!!!!!!!!!
  Renders recurrence selector

  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
%}

  <div class="recurrenceSelector">
    {%comment%}
    <script type="application/json">
      {{ product.metafields.bukopay.recurrence.value | json }}
    </script>
    {%endcomment%}
    <script type="application/json">
      [
          {"code":"single","label":"Single Order","discountValue":null,"discountType":null},
          {"code":"monthly","label":"Monthly","discountValue":10,"discountType":2},
          {"code":"semimonthly","label":"Every Other Week","discountValue":10,"discountType":2},
          {"code":"weekly","label":"Weekly","discountValue":10,"discountType":2},
          {"code":"quarterly","label":"Quarterly","discountType":2,"discountValue":10,"computationType": 2},
          {"code":"annually","label":"Annually","discountType":2,"discountValue":10,"computationType": 2}
      ]
    </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]"
      />

    <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>

    <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
            {% if first_subscription_recurrence != blank and first_subscription_recurrence.discountValue > 0 %}
              <span>
              {% if first_subscription_recurrence.discountType == 1 %}
                - Save {{ first_subscription_recurrence.discountValue | money }}!
              {%- elsif first_subscription_recurrence.discountType == 2 -%}
                - Save {{ first_subscription_recurrence.discountValue }}%!
              {%- endif -%}
              </span>
            {% endif %}
        </label>
      </div>
      <div class="select subscriptionRecurrenceSelect--wrapper">
      <select
        class="subscriptionRecurrenceSelect"
      >
        <option value="monthly">
          Monthly
        </option>
        <option value="semimonthly">
          Every Other Week
        </option>
        <option value="weekly">
          Weekly
        </option>
        <option value="quarterly">
          Quarterly
        </option>
        <option value="annually">
          Annually
        </option>
      </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>