@mindful-web/marko-web-theme-monorail 1.0.0

package/browser/reveal-ad-handler.vue

@@ -0,0 +1,195 @@
+<template>
+  <div id="marko-web-reveal-ad-handler" />
+</template>
+
+<script>
+import $ from '@mindful-web/marko-web/browser/jquery';
+
+const parseJSON = (value) => {
+  try {
+    return JSON.parse(value);
+  } catch (e) {
+    return null;
+  }
+};
+
+const parseMessagePayload = (event) => {
+  const obj = parseJSON(event.data);
+  if (!obj) return null;
+  if (['adImagePath', 'adTitle', 'backgroundImagePath', 'adClickUrl'].every((k) => obj[k])) {
+    return obj;
+  }
+  return null;
+};
+
+const target = '_blank';
+const rel = 'noopener noreferrer';
+
+const { warn } = console;
+
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    path: {
+      type: String,
+      required: true,
+    },
+    target: {
+      type: String,
+      default: '.document-container > .page',
+    },
+    displayFrequency: {
+      type: Number,
+      default: 2,
+    },
+    defaults: {
+      type: Object,
+      default: () => ({ backgroundColor: 'transparent' }),
+    },
+    selectAllTargets: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data: () => ({
+    observed: 0,
+    observer: null,
+    payload: {},
+    slot: null,
+  }),
+
+  mounted() {
+    if (!this.id || !this.path) {
+      this.warn('The Ad Unit ID and path are required. Bailing early.');
+      return;
+    }
+
+    const { googletag } = window;
+    if (!googletag) {
+      warn('The googletag object was not found. Bailing early.');
+    }
+
+    window.addEventListener('message', this.listener);
+    googletag.cmd.push(() => {
+      this.slot = googletag.defineOutOfPageSlot(this.path, this.id).addService(googletag.pubads());
+      const div = document.createElement('div');
+      div.id = this.id;
+      div.dataset.path = this.path;
+      this.$el.appendChild(div);
+      googletag.pubads().refresh([this.slot], { changeCorrelator: false });
+    });
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('message', this.listener);
+    if (this.observer) this.observer.disconnect();
+  },
+
+  methods: {
+    displayBackground() {
+      const {
+        adClickUrl,
+        backgroundColor,
+        backgroundImagePath,
+      } = this.payload;
+
+      const backgroundImage = `url("${backgroundImagePath}")`;
+      const revealBackground = $('<a>', { href: adClickUrl, target, rel }).addClass('reveal-ad-background').css({ backgroundImage });
+      revealBackground.on('click', () => {
+        this.trackClick();
+      });
+      $('body').css({ backgroundColor }).prepend(revealBackground);
+      $('body').addClass('with-reveal-ad');
+    },
+
+    displayAd(element) {
+      if (!element) return;
+      const {
+        adClickUrl,
+        adImagePath,
+        adTitle,
+        boxShadow,
+      } = this.payload;
+
+      const adContainer = $('<div>').addClass('reveal-ad');
+      if (boxShadow) adContainer.addClass(`reveal-ad--${boxShadow}-shadow`);
+      const $a = $('<a>', {
+        href: adClickUrl,
+        title: adTitle,
+        target,
+        rel,
+      }).append($('<img>', { src: adImagePath, alt: adTitle }));
+      $a.on('click', () => {
+        this.trackClick();
+      });
+      adContainer.html($a);
+      $(element).before(adContainer);
+    },
+
+    shouldDisplay() {
+      const { displayFrequency } = this;
+      this.observed += 1;
+      return this.observed % displayFrequency > 0;
+    },
+
+    observeMutations() {
+      if (!window.MutationObserver) return;
+      this.observer = new MutationObserver((mutationList) => {
+        for (let i = 0; i < mutationList.length; i += 1) {
+          const mutation = mutationList[i];
+          if (mutation.type === 'childList') {
+            for (let x = 0; x < mutation.addedNodes.length; x += 1) {
+              const added = mutation.addedNodes[x];
+              if (added.matches && added.matches(this.target)) {
+                if (this.shouldDisplay()) this.displayAd(added);
+              }
+            }
+          }
+        }
+      });
+      const node = document.querySelector(this.target);
+      if (node && node.parentNode) {
+        this.observer.observe(node.parentNode, { childList: true, subtree: true });
+      }
+    },
+
+    listener(event) {
+      const payload = parseMessagePayload(event);
+      if (!payload) return;
+
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', function fn() {
+          document.removeEventListener('DOMContentLoaded', fn);
+          this.execute(payload);
+        });
+      } else {
+        this.execute(payload);
+      }
+    },
+
+    execute(payload) {
+      const elements = this.selectAllTargets
+        ? document.querySelectorAll(this.target) : [document.querySelector(this.target)];
+      this.payload = { ...this.defaults, ...payload };
+      this.displayBackground();
+      for (let i = 0; i < elements.length; i += 1) {
+        this.displayAd(elements[i]);
+      }
+      this.observeMutations();
+      window.removeEventListener('message', this.listener);
+    },
+
+    trackClick() {
+      if (!window.p1events) return;
+      window.p1events('trackGAMSlot', { action: 'Click', slot: this.slot });
+    },
+
+    warn(...args) {
+      warn('Reveal Ad Listener:', ...args);
+    },
+  },
+};
+</script>

package/browser/section-search.vue

@@ -0,0 +1,89 @@
+<template>
+  <div ref="search" class="section-search" :class="{'open':openSuggestion}">
+    <input
+      v-model="selection"
+      class="form-control"
+      type="text"
+      placeholder="Search Categories..."
+    >
+    <div v-if="selection" class="list-group">
+      <div v-for="suggestion in matches" :key="suggestion" class="list-group-item">
+        <a :href="'/'+suggestion.alias" @click="emitAction()">
+          {{ suggestion.name }}
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  inject: ['EventBus'],
+  props: {
+    sections: {
+      type: Array,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      open: false,
+      current: 0,
+      selection: '',
+    };
+  },
+
+  computed: {
+    matches() {
+      return this.sections.filter((section) => {
+        const match = section.name.toLowerCase().indexOf(this.selection.toLowerCase()) >= 0;
+        return match;
+      });
+      // return this.sectionNames.filter((str) => {
+      //   const match = str.toLowerCase().indexOf(this.selection.toLowerCase()) >= 0;
+      //   return match;
+      // });
+    },
+    openSuggestion() {
+      return this.selection !== ''
+      && this.matches.length !== 0
+      && this.open === true;
+    },
+  },
+
+  mounted() {
+    this.addListeners();
+  },
+
+  beforeDestroy() {
+    this.removeListeners();
+  },
+
+  methods: {
+    detectOutclick(event) {
+      const el = this.$refs.search;
+      if (!el.contains(event.target) && el !== event.target) {
+        this.selection = '';
+      }
+    },
+
+    addListeners() {
+      document.addEventListener('click', this.detectOutclick.bind(this));
+      document.addEventListener('touchstart', this.detectOutclick.bind(this));
+    },
+    removeListeners() {
+      document.removeEventListener('click', this.detectOutclick.bind(this));
+      document.removeEventListener('touchstart', this.detectOutclick.bind(this));
+    },
+    emitAction() {
+      const payload = {
+        category: 'Content Header Search',
+        action: 'Click',
+        label: 'Website Section Page',
+      };
+      this.EventBus.$emit('content-header-search', payload);
+    },
+  },
+};
+</script>

package/browser/site-newsletter-menu/step1.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="row">
+    <div :class="element('image-wrapper', ['d-none', 'd-md-flex', 'col-md-3'])">
+      <img
+        v-if="imageSrc"
+        :src="imageSrc"
+        :srcset="imageSrcset"
+        :alt="name"
+        :class="element('image')"
+      >
+    </div>
+    <div :class="element('form-wrapper', ['col-12', 'col-md-8'])">
+      <div :class="element('name')">
+        {{ name }}
+      </div>
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div :class="element('description')" v-html="description" />
+
+      <form :class="element('form')" @submit.prevent="submit">
+        <label for="newsletter-menu-email" class="sr-only">Email</label>
+        <input
+          id="newsletter-menu-email"
+          v-model="email"
+          class="form-control"
+          :disabled="isLoading"
+          placeholder="example@gmail.com"
+          type="email"
+          name="em"
+          required
+          @focus="didFocus = true"
+        >
+        <privacy-policy
+          :block-name="blockName"
+          :privacy-policy-link="privacyPolicyLink"
+          :lang="lang"
+        />
+        <sign-up-button
+          :class="element('form-button')"
+          :is-loading="isLoading"
+          :disabled="disabled || recaptcha.loading || recaptcha.error"
+          :label="ctaLabel"
+          :lang="lang"
+        />
+      </form>
+
+      <div v-if="recaptcha.error" class="alert alert-danger mt-3 mb-0" role="alert">
+        <strong>A recaptcha error occurred.</strong>
+        {{ recaptcha.error.message }}
+      </div>
+
+      <div v-if="error" class="alert alert-danger mt-3 mb-0" role="alert">
+        <strong>An error ocurred.</strong>
+        {{ error.message }}
+      </div>
+    </div>
+    <div :class="element('close-container', ['d-none', 'd-md-flex', 'col-md-1'])">
+      <close-button
+        :class-name="element('close').join(' ')"
+        target-button=".site-navbar__newsletter-toggler"
+        :icon-modifiers="['lg']"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import recaptchaLoad from '@mindful-web/marko-web-recaptcha/browser/load';
+import recaptchaGetToken from '@mindful-web/marko-web-recaptcha/browser/get-token';
+
+import CloseButton from '../newsletter-close-button.vue';
+import PrivacyPolicy from '../newsletter-signup-form/privacy-policy.vue';
+import SignUpButton from '../newsletter-signup-form/sign-up-button.vue';
+
+export default {
+  components: {
+    CloseButton,
+    PrivacyPolicy,
+    SignUpButton,
+  },
+  props: {
+    newsletter: {
+      type: Object,
+      required: true,
+      validate: (o) => (o && o.name && o.deploymentTypeId),
+    },
+    recaptchaSiteKey: {
+      type: String,
+      required: true,
+    },
+    blockName: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      required: true,
+    },
+    ctaLabel: {
+      type: String,
+      default: null,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    imageSrc: {
+      type: String,
+      default: null,
+    },
+    imageSrcset: {
+      type: String,
+      default: null,
+    },
+    privacyPolicyLink: {
+      type: Object,
+      required: true,
+    },
+    lang: {
+      type: String,
+      default: 'en',
+    },
+  },
+
+  data: () => ({
+    didFocus: false,
+    email: null,
+    error: null,
+    isLoading: false,
+    recaptcha: { loading: false, error: null },
+  }),
+
+  watch: {
+    didFocus(value) {
+      if (value) this.$emit('focus');
+    },
+  },
+
+  created() {
+    this.loadRecaptcha();
+  },
+
+  methods: {
+    async loadRecaptcha() {
+      try {
+        this.recaptcha.loading = true;
+        this.recaptcha.error = null;
+        await recaptchaLoad({ siteKey: this.recaptchaSiteKey });
+      } catch (e) {
+        this.recaptcha.error = e;
+      } finally {
+        this.recaptcha.loading = false;
+      }
+    },
+    element(elementName, classNames = []) {
+      return [`${this.blockName}__${elementName}`, ...classNames];
+    },
+
+    async submit() {
+      try {
+        this.error = null;
+        this.isLoading = true;
+        const { email, newsletter } = this;
+        const { deploymentTypeId } = newsletter;
+
+        const token = await recaptchaGetToken({ siteKey: this.recaptchaSiteKey, action: 'newsletterSignup' });
+        const res = await fetch('/__omeda/newsletter-signup', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ deploymentTypeIds: [deploymentTypeId], email, token }),
+        });
+        const json = await res.json();
+        if (!res.ok) throw new Error(json.message);
+        const { encryptedCustomerId } = json;
+        this.$emit('submit', { email, encryptedCustomerId });
+        this.$emit('subscribe', { newsletter });
+      } catch (e) {
+        this.error = e;
+        this.$emit('error', e);
+      } finally {
+        this.isLoading = false;
+      }
+    },
+  },
+};
+</script>

package/browser/site-newsletter-menu.vue

@@ -0,0 +1,176 @@
+<template>
+  <aside :class="classNames">
+    <div :class="element('container')">
+      <step-1
+        v-if="step === 1"
+        :newsletter="defaultNewsletter"
+        :block-name="blockName"
+        :name="name"
+        :description="description"
+        :disabled="disabled"
+        :image-src="imageSrc"
+        :image-srcset="imageSrcset"
+        :ctaLabel="step1CtaLabel"
+        :recaptcha-site-key="recaptchaSiteKey"
+        :privacy-policy-link="privacyPolicyLink"
+        :lang="lang"
+        @submit="stepOneSubmit"
+        @subscribe="$emit('subscribe', $event)"
+        @focus="$emit('focus', { step: 1 })"
+        @error="$emit('error', { step: 1, error: $event })"
+      />
+      <step-2
+        v-if="step === 2"
+        :site-name="siteName"
+        :email="email"
+        :default-newsletter="defaultNewsletter"
+        :newsletters="newsletters"
+        :demographic="demographic"
+        :ctaLabel="step2CtaLabel"
+        :recaptcha-site-key="recaptchaSiteKey"
+        :privacy-policy-link="privacyPolicyLink"
+        :lang="lang"
+        in-pushdown
+        @submit="$emit('submit', { step: 2 })"
+        @subscribe="$emit('subscribe', $event)"
+        @focus="$emit('focus', { step: 2 })"
+        @load="$emit('load', { step: 2 })"
+        @error="$emit('error', { step: 2, error: $event })"
+      />
+    </div>
+  </aside>
+</template>
+
+<script>
+import Step1 from './site-newsletter-menu/step1.vue';
+import Step2 from './newsletter-signup-form/step2.vue';
+
+export default {
+  components: {
+    Step1,
+    Step2,
+  },
+  inject: ['EventBus'],
+
+  props: {
+    siteName: {
+      type: String,
+      required: true,
+    },
+    recaptchaSiteKey: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      required: true,
+    },
+    defaultNewsletter: {
+      type: Object,
+      required: true,
+      validate: (o) => (o && o.name && o.deploymentTypeId),
+    },
+    newsletters: {
+      type: Array,
+      default: () => [],
+    },
+    demographic: {
+      type: Object,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    imageSrc: {
+      type: String,
+      default: null,
+    },
+    imageSrcset: {
+      type: String,
+      default: null,
+    },
+    step1CtaLabel: {
+      type: String,
+      default: null,
+    },
+    step2CtaLabel: {
+      type: String,
+      default: null,
+    },
+    privacyPolicyLink: {
+      type: Object,
+      required: true,
+    },
+    initiallyExpanded: {
+      type: Boolean,
+      default: false,
+    },
+    lang: {
+      type: String,
+      default: 'en',
+    },
+  },
+
+  data: () => ({
+    blockName: 'site-newsletter-menu',
+    didLoad: false,
+    email: null,
+    expanded: undefined,
+    step: 1,
+  }),
+
+  computed: {
+    currentlyExpanded() {
+      if (this.expanded != null) return this.expanded;
+      return this.initiallyExpanded;
+    },
+
+    classNames() {
+      const { blockName } = this;
+      const classes = [blockName];
+      if (this.currentlyExpanded) classes.push(`${blockName}--open`);
+      return classes;
+    },
+  },
+
+  watch: {
+    didLoad(value) {
+      if (value) this.$emit('load', { step: 1 });
+    },
+  },
+
+  mounted() {
+    if (this.initiallyExpanded) this.didLoad = true;
+    const { dataLayer } = window;
+    if (dataLayer) {
+      const payload = (this.initiallyExpanded) ? {
+        'newsletter-pushdown-initially-expanded': true,
+      } : {
+        'newsletter-pushdown-initially-expanded': false,
+      };
+      dataLayer.push(payload);
+    }
+    this.EventBus.$on('newsletter-menu-expanded', (expanded) => {
+      this.expanded = expanded;
+      if (expanded) this.didLoad = true;
+    });
+  },
+
+  methods: {
+    element(elementName) {
+      return `${this.blockName}__${elementName}`;
+    },
+
+    stepOneSubmit({ email, encryptedCustomerId }) {
+      this.$emit('submit', { step: 1, encryptedCustomerId });
+      this.email = email;
+      this.step = 2;
+    },
+  },
+};
+</script>

package/browser/ssr.js

@@ -0,0 +1,15 @@
+import ThemeMenuToggleButton from './menu-toggle-button.vue';
+import ThemeNewsletterToggleButton from './newsletter-toggle-button.vue';
+import IdentityXNewsletterToggleButton from './idx-newsletter-form/toggle-button.vue';
+import IdentityXNewsletterFormPushdown from './idx-newsletter-form/pushdown.vue';
+import IdentityXNewsletterFormInline from './idx-newsletter-form/inline.vue';
+import ThemeSiteNewsletterMenu from './site-newsletter-menu.vue';
+
+export default {
+  ThemeMenuToggleButton,
+  IdentityXNewsletterToggleButton,
+  IdentityXNewsletterFormPushdown,
+  IdentityXNewsletterFormInline,
+  ThemeNewsletterToggleButton,
+  ThemeSiteNewsletterMenu,
+};