Shopify - Display a link to a pass or permit if it's still valid, allow customer to update pass details. (URL removed for security)

Shopify - main-order.liquid pass access

<!-- Start Passes -->
{% comment %}
Start Park Pass link generation - Check if the pass is within 1 year, wasn't cancelled, and if is a pass.
{% endcomment %}

{% if line_item.product.type == "Pass" and order.cancelled_at == blank %}

    {% assign seconds_in_day = 86400 %}
    {% assign seconds_in_weekend = 172800 %}
    {% assign seconds_in_5days = 432000 %}
    {% assign seconds_in_14days = 1209600 %}
    {% assign seconds_in_month = 2419200 %}
    {% assign seconds_in_year = 31536000 %}
    {% assign PStart_exists = false %}

    {% for p in line_item.properties %}
        {% if p.first == 'PassStart' or p.first == 'StartDate' %}
            {% assign PStart =  p.last | date: '%d/%m/%Y' %}
            {% assign PStart_exists = true %}
            {% break %}
        {% endif %}
    {% endfor %}

    {% if PStart_exists %}
        {% assign today = 'now' | date: '%s' %}

        {% case line_item.sku %}
            {% when "PVS-APP-DAY" %}
                {% assign PassType = "HolidayPass" %}
                {% assign expires = PStart | date: '%s' | plus: seconds_in_day | date: '%d/%m/%Y' %}
            {% when "PVS-APP-WEEKEND" %}
                {% assign PassType = "HolidayPass" %}
                {% assign expires = PStart | date: '%s' | plus: seconds_in_weekend | date: '%d/%m/%Y' %}
            {% when "PVS-APP-H5DAYS" %}
                {% assign PassType = "HolidayPass" %}
                {% assign expires = PStart | date: '%s' | plus: seconds_in_5days | date: '%d/%m/%Y' %}
            {% when "PVS-APP-H14DAYS" %}
                {% assign PassType = "HolidayPass" %}
                {% assign expires = PStart | date: '%s' | plus: seconds_in_14days | date: '%d/%m/%Y' %}
            {% when "PVS-APP-H1MONTH" %}
                {% assign PassType = "HolidayPass" %}
                {% assign expires = PStart | date: '%s' | plus: seconds_in_month | date: '%d/%m/%Y' %}
            {% when "PVS-APP-ALL", "PVS-APP-ALLCONC", "PVS-APP-GOLD", "PVS-APP-GOLDC", "PASS-PVS-PIN", "PASS-PVS-PIN" %}
                {% assign PassType = "AnnualPass" %}
                {% assign expires = PStart | date: '%s' | plus: seconds_in_year | date: '%d/%m/%Y' %}
            {% when  "NNP214", "NNP215", "NNP217 GST", "NNP218", "NNP219", "NNP220", "NNP221", "NNP222", "NNP225", "NNP229", "NNP256", "NNP257", "NNP285" %}
                {% assign PassType = "AnnualPass" %}
                {% assign expires = PStart | date: '%s' | plus: seconds_in_year | date: '%d/%m/%Y' %}
          {% endcase %}
     
      
   {% assign cutoff_date = expires | date: '%s' %}        
    <tr class="passlink">
        <td colspan="100%">
            {% if cutoff_date > today %}
                {% case PassType %}
                    {% when "AnnualPass", "HolidayPass", "LocalPass", "PinjarPass" %} 
                        <a href='-----url removed------/{{ order.id | times: 9112 }}/{{ order.order_number }}.pdf' class="btn btn-download" target='_blank'>
                            <svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM216 232V334.1l31-31c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-72 72c-9.4 9.4-24.6 9.4-33.9 0l-72-72c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l31 31V232c0-13.3 10.7-24 24-24s24 10.7 24 24z"/></svg> 
                              Download {{ line_item.title }}</a>
                    {% when "AnotherPass" %}
                        We can add others...
                {% endcase %}
                              
            <!-- Allow Customer to Update Vehicle details -->
            <!-- Dropdown Trigger for Order Note -->
            <a href="javascript:void(0)" onclick="toggleOrderNoteForm('{{ order.id }}')" class="order-note-trigger btn btn-edit">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z"/></svg>
                Edit vehicles</a>
            
            <!-- The Form, hidden by default -->
            <div id="order-note-form-{{ order.id }}" class="order-note-form" style="display: none;">

              <form id="mesa-form"></form><script src="-----url removed------js?order_id={{ order.id }}"></script> 

              <!--textarea id="order-note-{{ order.id }}"></textarea>
              <button onclick="submitOrderNote('{{ order.id }}')">Submit</button-->
            </div>
            
            <script>
            function toggleOrderNoteForm(orderId) {
              var formId = 'order-note-form-' + orderId;
              var form = document.getElementById(formId);
              form.style.display = form.style.display === 'none' ? 'block' : 'none';
            }
            
            function submitOrderNote(orderId) {
              var noteId = 'order-note-' + orderId;
              var note = document.getElementById(noteId).value;
              // Here you will call the function to integrate with Mesa or your backend.
              console.log('Submitting note for order', orderId, ':', note);
              // Placeholder for Mesa API call
            }
            </script>
              
            {% else %}
                <div class="alert alert-warning d-flex p-4 m-0" role="alert">
                    <div>
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="bi flex-shrink-0 me-2" role="img" aria-label="Warning:"><path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg> 
                        <small>Your pass has expired <small>({{ cutoff_date | date: '%d/%m/%Y' }})</small>. If you believe this is an error please fill in the <a href="/pages/park-pass-help">Park Pass support form</a>.</small></div>
                </div>
            {% endif %}
        </td>
    </tr>
{% endif %}
{% endif %}
<!-- End Passes -->