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

package/browser/index.js

@@ -0,0 +1,170 @@
+import GTM from '@mindful-web/marko-web-gtm/browser';
+import GAM from '@mindful-web/marko-web-gam/browser';
+import Search from '@mindful-web/marko-web-search/browser';
+import SocialSharing from '@mindful-web/marko-web-social-sharing/browser';
+import Inquiry from '@mindful-web/marko-web-inquiry/browser';
+import NativeX from '@mindful-web/marko-web-native-x/browser';
+import IdentityX from '@mindful-web/marko-web-identity-x/browser';
+import OmedaIdentityX from '@mindful-web/marko-web-omeda-identity-x/browser';
+import P1Events from '@mindful-web/marko-web-p1-events/browser';
+import IdentityXNewsletterForms from './idx-newsletter-form/index';
+import ContentMeterTrack from './content-meter-track.vue';
+import NewsletterSignupModalListener from './newsletter-signup-modal-listener.vue';
+
+const CommentToggleButton = () => import(/* webpackChunkName: "theme-comment-toggle-button" */ './comment-toggle-button.vue');
+const BlockLoader = () => import(/* webpackChunkName: "theme-block-loader" */ './block-loader.vue');
+const InlineNewsletterForm = () => import(/* webpackChunkName: "theme-inline-newsletter-form" */ './inline-newsletter-form.vue');
+const MenuToggleButton = () => import(/* webpackChunkName: "theme-menu-toggle-button" */ './menu-toggle-button.vue');
+const NewsletterCloseButton = () => import(/* webpackChunkName: "theme-newsletter-close-button" */ './newsletter-close-button.vue');
+const NewsletterToggleButton = () => import(/* webpackChunkName: "theme-newsletter-toggle-button" */ './newsletter-toggle-button.vue');
+const CompanySearch = () => import(/* webpackChunkName: "theme-company-search" */ './company-search.vue');
+const SectionSearch = () => import(/* webpackChunkName: "theme-section-search" */ './section-search.vue');
+const SiteNewsletterMenu = () => import(/* webpackChunkName: "theme-site-newsletter-menu" */ './site-newsletter-menu.vue');
+const WufooForm = () => import(/* webpackChunkName: "theme-wufoo-form" */ './wufoo-form.vue');
+const TopStoriesMenu = () => import(/* webpackChunkName: "theme-top-stories-menu" */ './top-stories-menu.vue');
+const RevealAdHandler = () => import(/* webpackChunkName: "reveal-ad-handler" */ './reveal-ad-handler.vue');
+
+const setP1EventsIdentity = ({ p1events, brandKey, encryptedId }) => {
+  if (!p1events || !brandKey || !encryptedId) return;
+  p1events('setIdentity', `omeda.${brandKey}.customer*${encryptedId}~encrypted`);
+};
+
+/**
+ * @typedef ThemeConfig
+ * @prop {boolean} [enableOmedaIdentityX=true]
+ * @prop {boolean} [withP1Events=true]
+ * @prop {object} [idxArgs={}]
+ * @prop {object} [inquiryArgs={}]
+ *
+ * @type {ThemeConfig}
+ */
+const defaultConfig = {
+  enableOmedaIdentityX: true,
+  withP1Events: true,
+  idxArgs: {},
+  inquiryArgs: {},
+};
+
+/**
+ * @param {import('@mindful-web/marko-web/browser')} Browser
+ * @param {ThemeConfig} [configOverrides={}]
+ */
+export default (Browser, configOverrides = {}) => {
+  const config = { ...defaultConfig, ...configOverrides };
+  const { EventBus } = Browser;
+  const {
+    enableOmedaIdentityX,
+    withP1Events,
+  } = config;
+
+  const idxArgs = config.idxArgs || {};
+  const inquiryArgs = config.inquiryArgs || {};
+
+  if (withP1Events) {
+    P1Events(Browser);
+  }
+
+  /**
+   * Sets the P1E Identity. @see @parameter1/marko-web-p1-events/browser other events
+   */
+  if (enableOmedaIdentityX) {
+    EventBus.$on('omeda-identity-x-authenticated', (args) => {
+      const { brandKey, encryptedId } = args;
+      setP1EventsIdentity({ p1events: window.p1events, brandKey, encryptedId });
+    });
+    EventBus.$on('omeda-identity-x-rapid-identify-response', (args) => {
+      const { brandKey, encryptedId } = args;
+      setP1EventsIdentity({ p1events: window.p1events, brandKey, encryptedId });
+    });
+  } else {
+    EventBus.$on('identity-x-authenticated', (args) => {
+      const { applicationId, user } = args;
+      if (!window.p1events || !applicationId || !user) return;
+      window.p1events('setIdentity', `identity-x.${applicationId}.app-user*${user.id}`);
+    });
+  }
+
+  Browser.register('ThemeCommentToggleButton', CommentToggleButton);
+
+  EventBus.$on('identity-x-logout', () => {
+    if (window.p1events) window.p1events('setIdentity', null);
+  });
+  const emitNewsletterEvent = ({ type, action, data }) => {
+    let label = `Step ${data.step}`;
+    if (action === 'Error') label = `${label} Error: ${data.error}`;
+    EventBus.$emit('newsletter-form-action', {
+      category: `Newsletter Signup Form (${type})`,
+      action,
+      label,
+    });
+  };
+
+  const emitNewsletterSubscription = ({ type, newsletter }) => {
+    EventBus.$emit('newsletter-form-subscription', {
+      category: newsletter.eventCategory || newsletter.name,
+      action: type,
+    });
+  };
+
+  GTM(Browser);
+  GAM(Browser);
+  Search(Browser);
+  SocialSharing(Browser);
+  NativeX(Browser);
+  if (enableOmedaIdentityX) {
+    OmedaIdentityX(Browser, idxArgs);
+  } else {
+    IdentityX(Browser, idxArgs);
+  }
+  IdentityXNewsletterForms(Browser);
+  Inquiry(Browser, inquiryArgs);
+
+  Browser.register('ThemeBlockLoader', BlockLoader);
+
+  Browser.register('ThemeSiteNewsletterMenu', SiteNewsletterMenu, {
+    provide: { EventBus },
+    on: {
+      load: (data) => {
+        emitNewsletterEvent({ type: 'Pushdown', action: 'Load', data });
+        emitNewsletterEvent({ type: 'Pushdown', action: 'View', data });
+      },
+      focus: (data) => emitNewsletterEvent({ type: 'Pushdown', action: 'Focus', data }),
+      submit: (data) => emitNewsletterEvent({ type: 'Pushdown', action: 'Submit', data }),
+      subscribe: ({ newsletter }) => emitNewsletterSubscription({ type: 'Pushdown', newsletter }),
+      error: (data) => emitNewsletterEvent({ type: 'Pushdown', action: 'Error', data: { ...data, error: data.error.message } }),
+    },
+  });
+  Browser.register('ThemeInlineNewsletterForm', InlineNewsletterForm, {
+    on: {
+      load: (data) => emitNewsletterEvent({ type: 'Inline', action: 'Load', data }),
+      view: (data) => emitNewsletterEvent({ type: 'Inline', action: 'View', data }),
+      focus: (data) => emitNewsletterEvent({ type: 'Inline', action: 'Focus', data }),
+      submit: (data) => {
+        emitNewsletterEvent({ type: 'Inline', action: 'Submit', data });
+        if (window.olytics) window.olytics.confirm(data.encryptedCustomerId);
+      },
+      subscribe: ({ newsletter }) => emitNewsletterSubscription({ type: 'Pushdown', newsletter }),
+      error: (data) => emitNewsletterEvent({ type: 'Inline', action: 'Error', data: { ...data, error: data.error.message } }),
+    },
+  });
+
+  Browser.register('ThemeMenuToggleButton', MenuToggleButton);
+  Browser.register('ThemeNewsletterCloseButton', NewsletterCloseButton);
+
+  Browser.register('ThemeNewsletterToggleButton', NewsletterToggleButton, {
+    provide: { EventBus },
+  });
+  Browser.register('ThemeCompanySearch', CompanySearch, {
+    provide: { EventBus },
+  });
+  Browser.register('ThemeSectionSearch', SectionSearch, {
+    provide: { EventBus },
+  });
+  Browser.register('ThemeTopStoriesMenu', TopStoriesMenu);
+  Browser.register('WufooForm', WufooForm);
+  Browser.register('RevealAdHandler', RevealAdHandler);
+  Browser.register('ContentMeterTrack', ContentMeterTrack, {
+    provide: { EventBus },
+  });
+  Browser.register('NewsletterSignupModalListener', NewsletterSignupModalListener);
+};

package/browser/inline-newsletter-form/step1.vue

@@ -0,0 +1,159 @@
+<template>
+  <div :class="blockName">
+    <div
+      v-if="imageSrc"
+      :class="`${blockName}__left-col`"
+    >
+      <img :src="imageSrc" :srcset="imageSrcset" :alt="name">
+    </div>
+    <div :class="`${blockName}__right-col`">
+      <div :class="`${blockName}__title`">
+        {{ name }}
+      </div>
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div :class="`${blockName}__description`" v-html="description" />
+
+      <form :class="`${blockName}__form`" @submit.prevent="submit">
+        <div :class="`${blockName}__email-group`">
+          <label for="inline-newsletter-email" class="sr-only">Email</label>
+          <input
+            id="inline-newsletter-email"
+            v-model="email"
+            :class="`${blockName}__email-input`"
+            :disabled="isLoading"
+            class="form-control"
+            placeholder="Enter your email"
+            type="email"
+            required
+            @focus="didFocus = true"
+          >
+        </div>
+        <sign-up-button
+          :class="`${blockName}__form-button`"
+          :is-loading="isLoading"
+          :disabled="disabled || recaptcha.loading || recaptcha.error"
+        />
+      </form>
+      <privacy-policy :block-name="blockName" :privacy-policy-link="privacyPolicyLink" />
+
+      <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 occurred.</strong>
+        {{ error.message }}
+      </div>
+    </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 PrivacyPolicy from '../newsletter-signup-form/privacy-policy.vue';
+import SignUpButton from '../newsletter-signup-form/sign-up-button.vue';
+
+export default {
+  components: {
+    PrivacyPolicy,
+    SignUpButton,
+  },
+
+  props: {
+    newsletter: {
+      type: Object,
+      required: true,
+      validate: (o) => (o && o.name && o.deploymentTypeId),
+    },
+    recaptchaSiteKey: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    imageSrc: {
+      type: String,
+      default: null,
+    },
+    imageSrcset: {
+      type: String,
+      default: null,
+    },
+    privacyPolicyLink: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data: () => ({
+    blockName: 'inline-newsletter-form-step1',
+    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;
+      }
+    },
+    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/inline-newsletter-form.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="inline-newsletter-form">
+    <div ref="lazyload" class="lazyload" />
+    <step-1
+      v-if="step === 1"
+      :newsletter="defaultNewsletter"
+      :name="name"
+      :description="description"
+      :disabled="disabled"
+      :image-src="imageSrc"
+      :image-srcset="imageSrcset"
+      :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"
+      :recaptcha-site-key="recaptchaSiteKey"
+      :privacy-policy-link="privacyPolicyLink"
+      :lang="lang"
+      as-card
+      @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>
+</template>
+
+<script>
+import Step1 from './inline-newsletter-form/step1.vue';
+import Step2 from './newsletter-signup-form/step2.vue';
+
+export default {
+  components: {
+    Step1,
+    Step2,
+  },
+
+  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,
+    },
+    privacyPolicyLink: {
+      type: Object,
+      required: true,
+    },
+    lang: {
+      type: String,
+      default: 'en',
+    },
+  },
+
+  data: () => ({
+    didView: false,
+    email: null,
+    step: 1,
+  }),
+
+  watch: {
+    didView(value) {
+      if (value) this.$emit('view', { step: 1 });
+    },
+  },
+
+  mounted() {
+    this.$emit('load', { step: 1 });
+    this.$refs.lazyload.addEventListener('lazybeforeunveil', () => {
+      this.didView = true;
+    });
+  },
+
+  methods: {
+    stepOneSubmit({ email, encryptedCustomerId }) {
+      this.$emit('submit', { step: 1, encryptedCustomerId });
+      this.email = email;
+      this.step = 2;
+    },
+  },
+};
+</script>

package/browser/menu-toggle-button.vue

@@ -0,0 +1,150 @@
+<template>
+  <button
+    :class="className"
+    type="button"
+    :aria-label="computedButtonLabel"
+    @click="toggle"
+  >
+    <span v-if="calcBefore">
+      {{ calcBefore }}
+    </span>
+    <component :is="icon" :modifiers="iconModifiers" />
+    <span v-if="calcAfter">
+      {{ calcAfter }}
+    </span>
+  </button>
+</template>
+
+<script>
+import IconChevronDown from '@mindful-web/marko-web-icons/browser/chevron-down.vue';
+import IconChevronUp from '@mindful-web/marko-web-icons/browser/chevron-up.vue';
+import IconChevronRight from '@mindful-web/marko-web-icons/browser/chevron-right.vue';
+import IconDash from '@mindful-web/marko-web-icons/browser/dash.vue';
+import IconMail from '@mindful-web/marko-web-icons/browser/mail.vue';
+import IconPlus from '@mindful-web/marko-web-icons/browser/plus.vue';
+import IconThreeBars from '@mindful-web/marko-web-icons/browser/three-bars.vue';
+import IconX from '@mindful-web/marko-web-icons/browser/x.vue';
+import EventBus from '@mindful-web/marko-web/browser/event-bus';
+
+const validateIcon = (v) => ['chevron-down', 'chevron-up', 'chevron-right', 'dash', 'mail', 'plus', 'three-bars', 'x'].includes(v);
+
+export default {
+  components: {
+    IconChevronDown,
+    IconChevronUp,
+    IconChevronRight,
+    IconDash,
+    IconMail,
+    IconPlus,
+    IconThreeBars,
+    IconX,
+  },
+  props: {
+    className: {
+      type: String,
+      default: null,
+    },
+    initiallyExpanded: {
+      type: Boolean,
+      default: false,
+    },
+    targets: {
+      type: Array,
+      default: () => [],
+    },
+    toggleClass: {
+      type: String,
+      required: true,
+    },
+    iconModifiers: {
+      type: Array,
+      default: () => [],
+    },
+    buttonLabel: {
+      type: String,
+      default: 'Toggle Menu',
+    },
+    iconName: {
+      type: String,
+      default: 'three-bars',
+      validator: validateIcon,
+    },
+    expandedIconName: {
+      type: String,
+      default: 'x',
+      validator: validateIcon,
+    },
+    before: {
+      type: String,
+      default: null,
+    },
+    beforeExpanded: {
+      type: String,
+      default: null,
+    },
+    beforeCollapsed: {
+      type: String,
+      default: null,
+    },
+    after: {
+      type: String,
+      default: null,
+    },
+    afterExpanded: {
+      type: String,
+      default: null,
+    },
+    afterCollapsed: {
+      type: String,
+      default: null,
+    },
+  },
+  data: () => ({
+    expanded: false,
+  }),
+  computed: {
+    computedButtonLabel() {
+      if (this.calcBefore) return this.calcBefore;
+      if (this.calcAfter) return this.calcAfter;
+      return this.buttonLabel;
+    },
+    calcBefore() {
+      const {
+        before,
+        beforeExpanded,
+        beforeCollapsed,
+        expanded,
+      } = this;
+      if (expanded && beforeExpanded) return beforeExpanded;
+      if (!expanded && beforeCollapsed) return beforeCollapsed;
+      return before;
+    },
+    calcAfter() {
+      const {
+        after,
+        afterExpanded,
+        afterCollapsed,
+        expanded,
+      } = this;
+      if (expanded && afterExpanded) return afterExpanded;
+      if (!expanded && afterCollapsed) return afterCollapsed;
+      return after;
+    },
+    icon() {
+      if (this.expanded) return `icon-${this.expandedIconName}`;
+      return `icon-${this.iconName}`;
+    },
+  },
+  created() {
+    this.expanded = this.initiallyExpanded;
+  },
+  methods: {
+    toggle() {
+      this.expanded = !this.expanded;
+      EventBus.$emit('site-menu-expanded', this.expanded);
+      const elements = document.querySelectorAll(this.targets.join(','));
+      Array.prototype.forEach.call(elements, (el) => el.classList.toggle(this.toggleClass));
+    },
+  },
+};
+</script>

package/browser/newsletter-close-button.vue

@@ -0,0 +1,44 @@
+<template>
+  <button
+    :class="className"
+    type="button"
+    :aria-label="buttonLabel"
+    @click="close"
+  >
+    <icon-x :modifiers="iconModifiers" />
+  </button>
+</template>
+
+<script>
+import IconX from '@mindful-web/marko-web-icons/browser/x.vue';
+
+export default {
+  components: {
+    IconX,
+  },
+  props: {
+    className: {
+      type: String,
+      default: null,
+    },
+    targetButton: {
+      type: String,
+      required: true,
+    },
+    iconModifiers: {
+      type: Array,
+      default: () => [],
+    },
+    buttonLabel: {
+      type: String,
+      default: 'Close Newsletter Menu',
+    },
+  },
+  methods: {
+    close() {
+      const element = document.querySelector(this.targetButton);
+      if (element) element.click();
+    },
+  },
+};
+</script>

package/browser/newsletter-signup-form/check-icon.vue

@@ -0,0 +1,13 @@
+<template>
+  <span>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      width="16"
+      height="16"
+    >
+      <!-- eslint-disable-next-line -->
+      <path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM0 8a8 8 0 1116 0A8 8 0 010 8zm11.78-1.72a.75.75 0 00-1.06-1.06L6.75 9.19 5.28 7.72a.75.75 0 00-1.06 1.06l2 2a.75.75 0 001.06 0l4.5-4.5z"></path>
+    </svg>
+  </span>
+</template>