Initial Commit

assets/js/template-switching.js

@@ -0,0 +1,219 @@
+/* global wu_template_switching_params, Vue, wu_create_cookie, wu_listen_to_cookie_change */
+(function($, hooks) {
+
+  /*
+ * Sets up the cookie listener for template selection.
+ */
+  hooks.addAction('wu_checkout_loaded', 'nextpress/wp-ultimo', function() {
+
+    /*
+     * Resets the template selection cookie.
+     */
+    wu_create_cookie('wu_template', false);
+
+    /*
+     * Listens for changes and set the template if one is detected.
+     */
+    wu_listen_to_cookie_change('wu_template', function(value) {
+
+      window.wu_template_switching.template_id = value;
+
+    });
+
+  });
+
+  $(document).ready(function() {
+
+    const dynamic = {
+      functional: true,
+      template: '#dynamic',
+      props: ['template'],
+      render(h, context) {
+
+        const template = context.props.template;
+
+        const component = template ? { template } : '<div>nbsp;</div>';
+
+        return h(component);
+
+      },
+    };
+
+    hooks.doAction('wu_checkout_loaded');
+
+    // eslint-disable-next-line no-unused-vars
+    window.wu_template_switching = new Vue({
+      el: '#wp-ultimo-form-wu-template-switching-form',
+      data() {
+
+        return {
+          template_id: 0,
+          original_template_id: -1,
+          template_category: '',
+          stored_templates: {},
+          confirm_switch: 0,
+          ready: false,
+        };
+
+      },
+      directives: {
+        init: {
+          bind(el, binding, vnode) {
+
+            vnode.context[binding.arg] = binding.value;
+
+          },
+        },
+      },
+      components: {
+        dynamic,
+      },
+      watch: {
+        ready() {
+
+          const that = this;
+
+          if (that.ready !== false) {
+
+            that.switch_template();
+
+          } // end if;
+
+        },
+      },
+      methods: {
+        get_template(template, data) {
+
+          if (typeof data.id === 'undefined') {
+
+            data.id = 'default';
+
+          } // end if;
+
+          const template_name = template + '/' + data.id;
+
+          if (typeof this.stored_templates[template_name] !== 'undefined') {
+
+            return this.stored_templates[template_name];
+
+          } // end if;
+
+          const template_data = {
+            duration: this.duration,
+            duration_unit: this.duration_unit,
+            products: this.products,
+            ...data,
+          };
+
+          this.fetch_template(template, template_data);
+
+          return '<div class="wu-p-4 wu-bg-gray-100 wu-text-center wu-rounded">Loading</div>';
+
+        },
+        fetch_template(template, data) {
+
+          const that = this;
+
+          if (typeof data.id === 'undefined') {
+
+            data.id = 'default';
+
+          } // end if;
+
+          this.request('wu_render_field_template', {
+            template,
+            attributes: data,
+          }, function(results) {
+
+            const template_name = template + '/' + data.id;
+
+            if (results.success) {
+
+              Vue.set(that.stored_templates, template_name, results.data.html);
+
+            } else {
+
+              Vue.set(that.stored_templates, template_name, '<div>' + results.data[0].message + '</div>');
+
+            } // end if;
+
+          });
+
+        },
+        switch_template() {
+
+          const that = this;
+
+          that.block();
+
+          this.request('wu_switch_template', {
+            template_id: that.template_id,
+          }, function(results) {
+
+            /*
+             * Redirect of we get a redirect URL back.
+             */
+            if (typeof results.data.redirect_url === 'string') {
+
+              window.location.href = results.data.redirect_url;
+
+            } // end if;
+
+          });
+
+        },
+        block() {
+
+          /*
+           * Get the first bg color from a parent.
+           */
+          const bg_color = jQuery(this.$el).parents().filter(function() {
+
+            return $(this).css('backgroundColor') !== 'rgba(0, 0, 0, 0)';
+
+          }).first().css('backgroundColor');
+
+          jQuery(this.$el).wu_block({
+            message: '<div class="spinner is-active wu-float-none" style="float: none !important;"></div>',
+            overlayCSS: {
+              backgroundColor: bg_color ? bg_color : '#ffffff',
+              opacity: 0.6,
+            },
+            css: {
+              padding: 0,
+              margin: 0,
+              width: '50%',
+              fontSize: '14px !important',
+              top: '40%',
+              left: '35%',
+              textAlign: 'center',
+              color: '#000',
+              border: 'none',
+              backgroundColor: 'none',
+              cursor: 'wait',
+            },
+          });
+
+        },
+        unblock() {
+
+          jQuery(this.$el).wu_unblock();
+
+        },
+        request(action, data, success_handler, error_handler) {
+
+          jQuery.ajax({
+            method: 'POST',
+            url: wu_template_switching_params.ajaxurl + '&action=' + action,
+            data,
+            success: success_handler,
+            error: error_handler,
+          });
+
+        },
+      },
+    });
+
+  });
+
+}(jQuery, wp.hooks));