SumOfUs/Champaign

{% if plugins.fundraiser[ref].active %}
  <div class="overlay-toggle">
    <div class="overlay-toggle__mobile-view overlay-toggle__mobile-view--closed">
      {% if mobile_title %}
      <!-- For processing dialog to take full height-->
      <!-- <h1 style='font-size: 24px; text-align: center; line-height: inherit; font-weight: normal;' class="mobile-show">{{ 'petition_and_scroll.fundraiser_intro' | t }}</h1> -->
      {% endif %}
      <div class="fundraiser-bar__content">
        <div id="fundraiser-component" class="fundraiser-bar {{ extra_class }} {% if freestanding %} fundraiser-bar--freestanding {% else %} sidebar stuck-right {% endif %}">
        </div>
      </div>
    </div>
  </div>

  <script type="text/javascript">
    $(function() {
      var global = window.champaign.personalization;
      var data = {
        paymentMethods: global.paymentMethods,
        member: global.member,
        locale: '{{locale}}',
        fundraiser: {
          pageId: "{{ id }}",
          currency: global.urlParams.currency || global.location.currency,
          donationBands: global.donationBands,
          formValues: global.formValues,
          formId: "{{ plugins.fundraiser[ref].form_id }}",
          outstandingFields: global.outstandingFields,
          forcedDonateLayout: {
            original: window.champaign.page.layout,
            forced: global.forcedDonateLayout
          },
        {% if fundraiser_title %}
          title: "{{ fundraiser_title }}",
        {% else %}
          title: "{{ plugins.fundraiser[ref].title }}",
        {% endif %}
          preselectAmount: {{ plugins.fundraiser[ref].preselect_amount }},
          fields: {{ plugins.fundraiser[ref].fields | jsonify }},
          recurringDefault: global.urlParams.recurring_default || "{{ plugins.fundraiser[ref].recurring_default }}",
          freestanding: {% if freestanding %} true {% else %} false {% endif %},
          oneClick: {% if one_click %} true {% else %} false {% endif %}
        }
      };
      window.setTimeout(function(){
        champaign.overlayToggle = new champaign.OverlayToggle();
      {% unless freestanding %}
        champaign.mySidebar = new champaign.Sidebar({petitionTextMinHeight: 162, baseClass: 'fundraiser-bar'});
      {% endunless %}
      }, 100);

      var ref = _.first(_.keys(window.champaign.plugins.fundraiser));
      Object.assign(window.champaign.plugins.fundraiser[ref].config, data);
    });

    var fundraiserEvents = {
      stepNames: ['amount', 'details', 'payment'],
      formSeen: false,
      source: window.champaign.personalization.urlParams.source || '',
      pageType: $('meta[name="liquid_layout"]').attr('content'),
      userLoggedIn: ! $.isEmptyObject(window.champaign.personalization.member),
      invalidEventsAttached: false,
      init: function() {
        this.analytics('page_loaded', this.pageType);
        this.analytics('user_logged_in', this.userLoggedIn.toString());
        this.attachEventListeners();
      },
      analytics: function(action, label) {
        if (typeof window.ga === 'function') {
          window.ga('send', 'event', 'fa_fundraising', action, label);
        }
        if (window.mixpanel) {
          mixpanel.track(action, {
            'event_label': label,
            'event_source': 'fa_fundraising'
          });
        }
      },
      attachEventListeners: function() {
        this.changeStepEvent();
        this.seenFormEvent();
        this.formErrorEvents();
      },
      formErrorEvents: function() {
        var self = this;
        //member details form errors
        //because the event doesn't bubble we need to make sure elements are present
        window.ee.on('fundraiser:change_step', function(step) {
          self.invalidErrorEvents(step);
        });
        $('#fundraiser-component').on('click', '.WelcomeMember__link', function(){
          //because clicking this link doesn't send a change_step event
          var step = window.champaign.store.getState().fundraiser.currentStep;
          setTimeout(function () {
            self.invalidErrorEvents(step)
          }, 200);
        });

        //member details form backend validation error
        window.ee.on('fundraiser:form:error', function(data) {
          Object.keys(data.errors).forEach(function(err) {
            data.errors[err].forEach(function(label) {
              self.analytics('be_validation_error', err +': '+ label);
            })
          });
        })

        //braintree form errors
        window.ee.on('fundraiser:transaction_error', function(error) {
          self.analytics('payment_error', error.code);
        });
      },
      invalidErrorEvents: function(step) {
        var self = this;
        if (self.invalidEventsAttached) {
          return;
        }
        var formLength = $('.Stepper__steps .Step').length;
        if (formLength === 3 && step == 1) {
          $('.MemberDetailsForm-root > form input').on('invalid', function(e) {
            var fieldName = e.target.name === '' ? 'country' : e.target.name;
            self.analytics('validation_error', fieldName);
          });
          self.invalidEventsAttached = true;
        }
      },
      seenFormEvent: function() {
        var self = this;
        $.getScript('https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver', function () {
          if ('IntersectionObserver' in window) {
            var fundraiserComponent = document.getElementById('fundraiser-component');
            var observer = new IntersectionObserver(function (entry) {
              if (entry[0].isIntersecting) {
                self.analytics('form_seen', self.source);
                observer.unobserve(fundraiserComponent);
              }
            }, { rootMargin: '0px', threshold: 0.75 });
            observer.observe(fundraiserComponent);
          }
        });
      },
      changeStepEvent: function() {
        var self = this;
        window.ee.on('fundraiser:change_step', function(step) {
          var formLength = $('.Stepper__steps .Step').length;
          if (formLength === 2 && step == 1) {
            var stepName = 'payment';
          } else {
            var stepName = self.stepNames[step];
          }
          self.analytics('change_step_name', stepName);
        })

        window.ee.on('fundraiser:transaction_success', function(data, formData){
          var userId = document.cookie.split(";").find(element => element.includes("__bpmx"));
          userId = userId ? parseInt(userId.replace("__bpmx=",'')) : null
          var page = window.champaign.page;
          var member = window.champaign.personalization.member;
          var currency = (window.champaign.personalization.urlParams.currency || window.champaign.personalization.location.currency);

          if (!member.id) {
            var options = {
              content_name: page.title,
              status: (member.id ? false : true),
              user_id: userId,
              page_id: page.id,
              value: userId,
              currency: currency
            }
            fbq('track', 'CompleteRegistration', options)
          }
        });
      },
    }

    fundraiserEvents.init();


  </script>

  {% comment %} Added so optimizely knows if pages set by campaigners one off {% endcomment %}
  {% if plugins.fundraiser[ref].recurring_default == 'one_off' %}
    <input type="hidden" id="one-off-page" />
  {% endif %}

{% endif %}