templates/donation/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Donation{% endblock %}
  5. {% block body %}
  6. <div class="container overflow-hidden">
  7.     <div class="row align-items-center justify-content-center min-vh-100 my-5 py-5">
  8.         <div class="col-sm-12 align-items-center d-block">
  9.             {{ form_start(form, {'attr': {'id': 'donation_form'}}) }}
  10.                 <div class="tab">
  11.                     <div class="row">
  12.                         <div class="col-sm-12">
  13.                             <a href="/">
  14.                                 <img src="/build/images/logo.png" class="logo mb-3"/>
  15.                             </a>
  16.                             <h1 class="h3 mb-2 fw-bold">Checkout</h1>
  17.                             
  18.                         </div>
  19.                     </div>
  20.                     
  21.                     {% for message in app.flashes('notice') %}
  22.                         <div class="alert alert-danger mb-5" role="alert">{{ message }}</div>
  23.                     {% endfor %}
  25.                     <ul class="error-msg alert alert-danger error-msgs mb-4 ps-5 fw-bold" style="display: none;">
  26.                     </ul>
  28.                     {#
  29.                     {% if supportdaf > 0 %}
  30.                         <div class="row mb-4">
  31.                             <div class="col-sm-12 form-group">
  32.                                 <h5 class="fw-bold">You are currently donating {{ (amount) | format_currency('AUD') }} to {{ project.title }} and {{ (supportdaf) | format_currency('AUD') }} to Documentary Australia.</h5>
  33.                                 <h5 class="fw-bold">Click <a href="/donation?wpId={{ wordpressId }}&amount={{ amount }}">here</a> if you only want to donate to {{ project.title }}.</h5>
  34.                             </div>
  35.                         </div>
  36.                     {% endif %}
  37.                     #}
  39.                     {% if not user %}
  40.                     <div class="row mb-3">
  41.                         <div class="col-sm-12 form-group">
  42.                             <h5 class="fw-bold">Create your account <a href="/registration?returnUrl={{ app.request.requesturi | url_encode }}">here</a> to access your benefits.</h5>
  43.                         </div>
  44.                     </div>
  45.                     {% endif %}
  47.                     <div class="row mb-3 mt-4">
  48.                         <div class="col-sm-6">
  49.                             <h5 class="fw-bold">Account Information</h5>
  50.                         </div>
  51.                         <div class="col-sm-6">
  52.                             {% if not user %}
  53.                             <h5 class="fw-bold text-end">Already have an account? <a href="/?returnUrl={{ app.request.requesturi | url_encode }}">Log in</a></h5>
  54.                             {% endif %}
  55.                         </div>
  56.                     </div>
  58.                     <div class="row mb-4">
  59.                         <div class="col-sm-6 form-group">
  60.                             <label for="firstName" class="fw-bold text-uppercase">First Name <span class="text-danger">*</span></label>
  61.                             {{ form_widget(form.firstName, {'attr': {'class': 'form-control'}}) }}
  62.                             <p class="fw-bold messages"></p>
  63.                         </div>
  64.                         <div class="col-sm-6 form-group">
  65.                             <label for="lastName" class="fw-bold text-uppercase">Last Name <span class="text-danger">*</span></label>
  66.                             {{ form_widget(form.lastName, {'attr': {'class': 'form-control'}}) }}
  67.                             <p class="fw-bold messages"></p>
  68.                         </div>
  69.                     </div>
  71.                     <div class="row mb-4">
  72.                         <div class="col-sm-12 form-group display-organisation-tickbox">
  73.                             {{ form_widget(form.isDisplayOrganisation) }}
  74.                             <p class="fw-bold messages"></p>
  75.                         </div>
  77.                         <div class="col-sm-12 form-group display-organisation-input">
  78.                             <label for="organisation" class="fw-bold text-uppercase">Organisation / Company</label>
  79.                             {{ form_widget(form.organisation, {'attr': {'class': 'form-control'}}) }}
  80.                             <p class="my-2 fw-bold">Leave blank if no organisation/company applicable</p>
  81.                             <p class="fw-bold messages"></p>
  82.                         </div>                        
  83.                     </div>
  85.                     <div class="row mb-4">
  86.                         <div class="col-sm-12 form-group">
  87.                             <label for="street" class="fw-bold text-uppercase">Number and Street <span class="text-danger">*</span></label>
  88.                             {{ form_widget(form.street, {'attr': {'class': 'form-control'}}) }}
  89.                             <p class="fw-bold messages"></p>
  90.                         </div>
  91.                     </div>
  93.                     <div class="row mb-4">
  94.                         <div class="col-sm-3 form-group">
  95.                             <label for="lastName" class="fw-bold text-uppercase">Suburb <span class="text-danger">*</span></label>
  96.                             {{ form_widget(form.suburb, {'attr': {'class': 'form-control'}}) }}
  97.                             <p class="fw-bold messages"></p>
  98.                         </div>
  99.                         <div class="col-sm-5 form-group">
  100.                             <label for="state" class="fw-bold text-uppercase">State <span class="text-danger">*</span></label>
  101.                             {{ form_widget(form.state, {'attr': {'class': 'form-control'}}) }}
  102.                             <p class="fw-bold messages"></p>
  103.                         </div>
  104.                         <div class="col-sm-4 form-group">
  105.                             <label for="country" class="fw-bold text-uppercase">Country <span class="text-danger">*</span></label>
  106.                             {{ form_widget(form.country, {'attr': {'class': 'form-control'}}) }}
  107.                             <p class="fw-bold messages"></p>
  108.                         </div>
  109.                     </div>
  111.                     <div class="row mb-4">
  112.                         <div class="col-sm-4 form-group">
  113.                             <label for="postcode" class="fw-bold text-uppercase">Postcode <span class="text-danger">*</span></label>
  114.                             {{ form_widget(form.postcode, {'attr': {'class': 'form-control'}}) }}
  115.                             <p class="fw-bold messages"></p>
  116.                         </div>
  117.                         <div class="col-sm-4 form-group">
  118.                             <label for="phoneNumber" class="fw-bold text-uppercase">Phone <span class="text-danger">*</span></label>
  119.                             {{ form_widget(form.phoneNumber, {'attr': {'class': 'form-control'}}) }}
  120.                             <p class="fw-bold messages"></p>
  121.                         </div>
  122.                         <div class="col-sm-4 form-group">
  123.                             <label for="email" class="fw-bold text-uppercase">Email Address <span class="text-danger">*</span></label>
  124.                             {{ form_widget(form.email, {'attr': {'class': 'form-control'}}) }}
  125.                             <p class="fw-bold messages"></p>
  126.                         </div>
  127.                     </div>
  129.                     <div class="row mb-3">
  130.                         <div class="col-sm-12">
  131.                             <h5 class="fw-bold">Additional Information</h5>
  132.                         </div>
  133.                     </div>
  135.                     <div class="row mb-4">
  136.                         <div class="col-sm-12 form-group">
  137.                             <label for="isOrganisationConsent" class="fw-bold text-uppercase mb-2">Consent to having my name or organisation listed on the project page or any public list of donations for this project <span class="text-danger">*</span></label>
  138.                             {{ form_widget(form.isOrganisationConsent) }}
  139.                             <p class="fw-bold messages"></p>
  140.                         </div>
  141.                     </div>
  143.                     <div class="row mb-4">
  144.                         <div class="col-sm-12 form-group">
  145.                             <label for="isContactShared" class="fw-bold text-uppercase mb-2">Consent to having my name and contact details shared with the filmmaker for the purpose of receiving communications from the filmmaker. <span class="text-danger">*</span></label>
  146.                             {{ form_widget(form.isContactShared) }}
  147.                             <p class="fw-bold messages"></p>
  148.                         </div>
  149.                     </div>
  151.                     <div class="row mb-4">
  152.                         <div class="col-sm-12 form-group">
  153.                             <label for="isNameApproved" class="fw-bold text-uppercase mb-2">Consent for my name as above to be listed in relevant project credits and/or organisational reporting as appropriate. <span class="text-danger">*</span></label>
  154.                             {{ form_widget(form.isNameApproved) }}
  155.                             <p class="fw-bold messages"></p>
  156.                         </div>
  157.                     </div>
  159.                     <!-- donation product row -->
  160.                     <div class="row mb-4">
  161.                         <div class="col-sm-12">
  162.                             <h4 class="fw-bold mb-4">Your Donation</h4>
  163.                             <table class="table table-responsive">
  164.                                 <thead class="text-uppercase">
  165.                                     <tr class="fw-bold">
  166.                                         <th class="py-3">Product</th>
  167.                                         <th class="py-3">Subtotal</th>
  168.                                         <th class="py-3"></th>
  169.                                     </tr>
  170.                                 </thead>
  171.                                 <tbody>
  172.                                     {#
  173.                                     {% if project %}
  174.                                         {% for percentageSplit in product.percentageSplits %}
  175.                                         <tr>
  176.                                             {% set productName = percentageSplit.name %}
  177.                                             {% if loop.index0 == 0 %}
  178.                                                 {% set productName = project.title %}
  179.                                             {% endif %}
  181.                                             <td class="py-2 border-0">{{ productName }}</td>
  182.                                             <td class="py-2 border-0">{{ (amount * percentageSplit.percentage / 100) | format_currency('AUD') }}</td>
  183.                                         </tr>
  184.                                         {% endfor %}
  185.                                     {% endif %}
  187.                                     {% if supportdaf > 0 %}
  188.                                     <tr>
  189.                                         <td class="py-2 border-0">DAF Donation</td>
  190.                                         <td class="py-2 border-0">{{ (supportdaf) | format_currency('AUD') }}</td>
  191.                                     </tr>
  192.                                     {% endif %}
  193.                                     #}
  195.                                     {% if project %}
  196.                                         <tr>
  197.                                             <td class="py-2 border-0">{{ project.title }}</td>
  198.                                             <td class="py-2 border-0">{{ (amount) | format_currency('AUD') }}</td>
  199.                                             <td class="py-2 border-0"></td>
  200.                                         </tr>
  201.                                     {% endif %}
  202.                                     {% if supportdaf > 0 %}
  203.                                     <tr>
  204.                                         <td class="py-2 border-0">Documentary Australia Donation</td>
  205.                                         <td class="py-2 border-0">{{ (supportdaf) | format_currency('AUD') }}</td>
  206.                                         {% if wordpressId is defined %}
  207.                                         <td class="py-2 border-0 text-center">
  208.                                             <a href="/donation?wpId={{ wordpressId }}&amount={{ amount }}" id="remove-daf">
  209.                                                 <i class="fa-solid fa-trash color-danger delete-icon"></i>
  210.                                             </a>
  211.                                         </td>
  212.                                         {% endif %}
  213.                                     </tr>
  214.                                     {% endif %}
  215.                                 </tbody>
  216.                                 <tfoot class="text-uppercase border-0">
  217.                                     <tr>
  218.                                         <td class="pb-4 border-0"><span class="fw-bold">Total</span></td>
  219.                                         <td class="pb-4 border-0"><span class="fw-bold">{{ total | format_currency('AUD') }}</span></td>
  220.                                         <td class="pb-4 border-0"></td>
  221.                                     </tr>
  222.                                 </tfoot>
  223.                             </table>
  224.                         </div>
  225.                     </div>
  227.                     <div class="row mb-2">
  228.                         <div class="col-sm-12 form-group">
  229.                             {{ form_widget(form.isTermsCondition) }}
  230.                             <p class="fw-bold messages"></p>
  231.                         </div>
  232.                     </div>
  234.                     <div class="row mb-4">
  235.                         <div class="col-sm-12 form-group">
  236.                             {{ form_widget(form.isNonFamily) }}
  237.                             <p class="fw-bold messages"></p>
  238.                         </div>
  239.                     </div>
  240.                 </div>
  241.                 <div class="tab" style="visibility: hidden; max-height: 0;">
  242.                     <div class="row">
  243.                         <div class="col-md-12">
  244.                             <div class="p-4 px-5 mb-3 fw-bold" style="background:#f1f1f1;">
  245.                                 <div class="col-12">
  246.                                     <p>Date: {{ "now"|date("F d, Y") }}</p>
  247.                                     <p>Total: {{ total | format_currency('AUD') }}</p>
  248.                                     <p>Payment method: Merchant Warrior Credit Card</p>
  249.                                 </div>
  250.                             </div>
  251.                         </div>
  252.                     </div>
  253.                     <div class="row">
  254.                         <div class="col-md-12">
  255.                             <div class="p-4 px-5 pb-5 mb-4" style="background:#f1f1f1;">
  256.                                 <div class="col-12">
  257.                                     <p>Credit Cards Accepted: Visa, Mastercard, American Express</p>
  258.                                 </div>
  259.                                 <div>
  260.                                     <div class="pb-3">
  261.                                         <div class="form-check">
  262.                                             <input type="radio" name="card_payment" id="cardPayment-0" class="form-check-input" value="" checked>
  263.                                             <label class="form-check-label fw-bold" for="cardPayment-0">New payment</label>
  264.                                         </div>
  266.                                         <div id="creditCardForm">
  267.                                             <div id="cardData" class="d-flex"></div>
  268.                                             {% if user %}
  269.                                             <div class="form-check">
  270.                                                 <input type="checkbox" name="add_card" class="form-check-input" value="1">
  271.                                                 <label class="form-check-label fw-bold" for="add_card">Save credit card payment for future checkout</label>
  272.                                             </div>
  273.                                             {% endif %}
  274.                                         </div>
  275.                                     </div>
  277.                                     {% for card in cards %}
  278.                                         <div class="form-check py-3 custom-border-1">
  279.                                             <input type="radio" name="card_payment" id="cardPayment-{{ loop.index }}" class="form-check-input" 
  280.                                                 value="{{ card.cardID }}">
  281.                                             <label class="form-check-label fw-bold" for="cardPayment-{{ loop.index }}"> 
  282.                                                 Card {{' ending in ' ~ card.cardNumberLast ~ ' (expires ' ~ card.cardExpiryMonth ~ '/' ~ card.cardExpiryYear ~ ')'  }}
  283.                                             </label>
  284.                                         </div>
  285.                                     {% endfor %}
  287.                                     <input type="hidden" id="is_success" />
  288.                                     
  289.                                 </div>
  290.                                 <div class="col-12">
  291.                                     <p>Documentary Australia Pty Ltd Limited (ABN 12 119 563 941) as trustee for the Documentary Australia Trust (ABN 11 227 328 793) collects personal information about you when processing donations and transactions and communicating with our donors and supporters, volunteers, and our employees and the purposes otherwise set in our Privacy Policy.</p>
  292.                                 </div>
  293.                             </div>
  294.                         </div>
  295.                     </div>
  296.                 </div>
  297.                 <div class="row pt-4 mb-4">
  298.                     <div class="col-sm-12">
  299.                         <div class="d-flex justify-content-between">
  300.                             <button type="button" class="rounded-pill gap-2 btn btn-lg btn-primary text-uppercase" id="prevDonationBtn" style="display: none;">Previous</button>
  301.                             <button type="button" class="ms-auto rounded-pill gap-2 btn btn-lg btn-primary text-uppercase" id="nextDonationBtn">Next</button>
  302.                             <button id="submit_donation" class="rounded-pill gap-2 btn btn-lg btn-primary text-uppercase" type="submit"  style="display: none;">
  303.                                 Confirm and pay
  304.                             </button>
  305.                         </div>
  306.                     </div>
  307.                 </div>
  308.             {{ form_end(form) }}
  309.         </div>
  310.     </div>
  311. </div>
  313. <style>
  314.     .loadingoverlay {
  315.             justify-content: center !important;
  316.             gap: 30px;
  317.     }
  319.     .loadingoverlay_element.loadingoverlay_text {
  320.             max-width: 28em;
  321.             text-align: center;
  322.     }
  323. </style>
  325. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/fontawesome.min.css" />
  326. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/solid.min.css" />
  328. <script src='https://securetest.merchantwarrior.com/payframe/payframe.js'></script>
  330. <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  331. <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/loadingoverlay.min.js"></script>
  333. <script>
  334.     const removeDafEl = document.querySelector('#remove-daf')
  335.     if (removeDafEl != undefined) {
  336.         removeDafEl.addEventListener('click', () => {
  337.             const donationForm = {
  338.                 firstName: document.getElementById('donation_form_firstName').value,
  339.                 lastName:document.getElementById('donation_form_lastName').value,
  340.                 organisation:document.getElementById('donation_form_organisation').value,
  341.                 street:document.getElementById('donation_form_street').value,
  342.                 suburb:document.getElementById('donation_form_suburb').value,
  343.                 state:document.getElementById('donation_form_state').value,
  344.                 country:document.getElementById('donation_form_country').value,
  345.                 postcode:document.getElementById('donation_form_postcode').value,
  346.                 phoneNumber:document.getElementById('donation_form_phoneNumber').value,
  347.                 email:document.getElementById('donation_form_email').value,
  348.             }
  350.             localStorage.setItem('donationForm', JSON.stringify(donationForm))
  351.         })
  352.     }
  354.     let donationFormInputs = localStorage.getItem('donationForm')
  355.     if (donationFormInputs != undefined) {
  356.         donationFormInputs = JSON.parse(donationFormInputs)
  358.         document.getElementById('donation_form_firstName').value = donationFormInputs.firstName
  359.         document.getElementById('donation_form_lastName').value = donationFormInputs.lastName
  360.         document.getElementById('donation_form_organisation').value = donationFormInputs.organisation
  361.         document.getElementById('donation_form_street').value = donationFormInputs.street
  362.         document.getElementById('donation_form_suburb').value = donationFormInputs.suburb
  363.         document.getElementById('donation_form_state').value = donationFormInputs.state
  364.         document.getElementById('donation_form_country').value = donationFormInputs.country
  365.         document.getElementById('donation_form_postcode').value = donationFormInputs.postcode
  366.         document.getElementById('donation_form_phoneNumber').value = donationFormInputs.phoneNumber
  367.         document.getElementById('donation_form_email').value = donationFormInputs.email
  368.     }
  369. </script>
  371. {% endblock %}