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

package/browser/newsletter-signup-form/form-group.vue

@@ -0,0 +1,50 @@
+<template>
+  <div :class="classes">
+    <label
+      :class="`${blockName}__form-label`"
+      :for="id"
+    >
+      {{ displayLabel }}
+    </label>
+    <slot :id="id" :required="required" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    field: {
+      type: String,
+      required: true,
+    },
+    blockName: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    id() {
+      return `nl-complete-signup-${this.field}`;
+    },
+
+    classes() {
+      const element = `${this.blockName}__form-group`;
+      return [element, `${element}--${this.field}`];
+    },
+    displayLabel() {
+      const parts = [this.label];
+      if (this.required) parts.push('*');
+      return parts.join(' ');
+    },
+  },
+};
+</script>

package/browser/newsletter-signup-form/input-form-group.vue

@@ -0,0 +1,57 @@
+<template>
+  <form-group
+    :field="field"
+    :block-name="blockName"
+    :label="label"
+    :required="required"
+  >
+    <template #default="{ id }">
+      <input
+        :id="id"
+        :value="value"
+        class="form-control form-control--bg-white"
+        :required="required"
+        :disabled="disabled"
+        @input="$emit('input', $event.target.value)"
+        @focus="$emit('focus')"
+      >
+    </template>
+  </form-group>
+</template>
+
+<script>
+import FormGroup from './form-group.vue';
+
+export default {
+  components: {
+    FormGroup,
+  },
+
+  props: {
+    value: {
+      type: String,
+      default: null,
+    },
+    field: {
+      type: String,
+      required: true,
+    },
+    blockName: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

package/browser/newsletter-signup-form/newsletter-checkbox.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="newsletter-checkbox-group custom-control custom-checkbox">
+    <input
+      :id="id"
+      type="checkbox"
+      class="custom-control-input"
+      :value="deploymentTypeId"
+      :disabled="disabled"
+      @change="$emit('change', { newsletter, checked: $event.target.checked })"
+      @focus="$emit('focus')"
+    >
+    <label
+      class="d-flex flex-column custom-control-label custom-control-label--bg-white"
+      :for="id"
+    >
+      <span class="newsletter-checkbox-group__name">
+        {{ name }}
+      </span>
+      <span class="newsletter-checkbox-group__description">
+        {{ description }}
+      </span>
+    </label>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    newsletter: {
+      type: Object,
+      required: true,
+      validate: (o) => (o && o.name && o.deploymentTypeId),
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    inPushdown: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    deploymentTypeId() {
+      return this.newsletter.deploymentTypeId;
+    },
+
+    id() {
+      const id = `deployment-type-id-${this.deploymentTypeId}`;
+      return this.inPushdown ? `pushdown-${id}` : id;
+    },
+
+    name() {
+      return this.newsletter.name;
+    },
+
+    description() {
+      return this.newsletter.description;
+    },
+  },
+};
+</script>

package/browser/newsletter-signup-form/privacy-policy.vue

@@ -0,0 +1,38 @@
+<template>
+  <div :class="`${blockName}__privacy-policy`">
+    {{ translate("emailProviding") }}
+    <a :href="privacyPolicyLink.href" :target="privacyPolicyLink.target" rel="noopener">
+      {{ privacyPolicyLink.label }}</a>.
+    {{ translate("protectedBy") }}
+    <a href="https://policies.google.com/privacy">{{ translate("privacyPolicy") }}</a>
+    {{ translate("and") }}
+    <a href="https://policies.google.com/terms">{{ translate("termsOfService") }}</a>
+    {{ translate("apply") }}
+  </div>
+</template>
+
+<script>
+import i18n from '../i18n-vue';
+
+export default {
+  props: {
+    blockName: {
+      type: String,
+      required: true,
+    },
+    privacyPolicyLink: {
+      type: Object,
+      required: true,
+    },
+    lang: {
+      type: String,
+      default: 'en',
+    },
+  },
+  methods: {
+    translate(key) {
+      return i18n(this.lang, key);
+    },
+  },
+};
+</script>

package/browser/newsletter-signup-form/select-form-group.vue

@@ -0,0 +1,59 @@
+<template>
+  <form-group
+    :field="field"
+    :block-name="blockName"
+    :label="label"
+    :required="required"
+  >
+    <template #default="{ id }">
+      <select
+        :id="id"
+        :value="value"
+        class="custom-select custom-select--bg-white form-control"
+        :required="required"
+        :disabled="disabled"
+        @change="$emit('input', $event.target.value)"
+        @focus="$emit('focus')"
+      >
+        <slot />
+      </select>
+    </template>
+  </form-group>
+</template>
+
+<script>
+import FormGroup from './form-group.vue';
+
+export default {
+  components: {
+    FormGroup,
+  },
+
+  props: {
+    value: {
+      type: String,
+      default: null,
+    },
+    field: {
+      type: String,
+      required: true,
+    },
+    blockName: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

package/browser/newsletter-signup-form/sign-up-button.vue

@@ -0,0 +1,49 @@
+<template>
+  <button
+    class="text-nowrap"
+    type="submit"
+    :disabled="isLoading || disabled"
+  >
+    <div class="d-flex align-items-center">
+      <div
+        v-show="isLoading"
+        class="spinner-border spinner-border-sm text-light mr-1"
+        role="status"
+      >
+        <span class="sr-only">Loading...</span>
+      </div>
+      <span v-if="label">{{ label }}</span>
+      <span v-else>{{ translate("signUp") }}</span>
+    </div>
+  </button>
+</template>
+
+<script>
+import i18n from '../i18n-vue';
+
+export default {
+  props: {
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    lang: {
+      type: String,
+      default: 'en',
+    },
+  },
+  methods: {
+    translate(key) {
+      return i18n(this.lang, key);
+    },
+  },
+};
+</script>

package/browser/newsletter-signup-form/step2.vue

@@ -0,0 +1,284 @@
+<template>
+  <div :class="classNames">
+    <div :class="`${blockName}__card-header`">
+      <check-icon :class="`${blockName}__check-icon`" />
+      {{ translate("signedUpFor") }} {{ defaultNewsletter.name }}
+    </div>
+    <form
+      :class="`${blockName}__card-body`"
+      @submit.prevent="submit"
+    >
+      <transition
+        :leave-active-class="`${blockName}__slide-out`"
+        @after-leave="formHidden = true"
+      >
+        <div v-show="!isComplete">
+          <div :class="`${blockName}__header`">
+            {{ translate("completeSignUp") }}
+          </div>
+          <div :class="`${blockName}__about-you`">
+            {{ translate("aboutYou") }}
+          </div>
+          <div :class="`${blockName}__form`">
+            <input-form-group
+              v-model="companyName"
+              :block-name="blockName"
+              :disabled="isLoading"
+              field="company-name"
+              :label="translate('companyName')"
+              required
+              @focus="didFocus = true"
+            />
+
+            <select-form-group
+              v-model="demographicValue"
+              :block-name="blockName"
+              :disabled="isLoading"
+              field="primary-role"
+              :label="demographic.label"
+              required
+              @focus="didFocus = true"
+            >
+              <option value="">
+                {{ translate("select") }}
+              </option>
+              <option
+                v-for="value in demographic.values"
+                :key="value.id"
+                :value="value.id"
+              >
+                {{ value.label }}
+              </option>
+            </select-form-group>
+
+            <input-form-group
+              v-model="postalCode"
+              :block-name="blockName"
+              :disabled="isLoading"
+              field="postal-code"
+              label="Zip/Postal"
+              required
+              @focus="didFocus = true"
+            />
+          </div>
+
+          <div v-if="newsletters.length">
+            <div :class="`${blockName}__subscriptions-header`">
+              {{ translate("chooseSubscriptions") }}
+            </div>
+
+            <div :class="`${blockName}__subscriptions row`">
+              <div
+                v-for="newsletter in newsletters"
+                :key="newsletter.deploymentTypeId"
+                class="col-12 col-md-6"
+              >
+                <newsletter-checkbox
+                  :newsletter="newsletter"
+                  :disabled="isLoading"
+                  :in-pushdown="inPushdown"
+                  @change="selectNewsletter"
+                  @focus="didFocus = true"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div :class="`${blockName}__signup`">
+            <div>
+              <sign-up-button
+                :class="`${blockName}__form-button`"
+                :is-loading="isLoading"
+                :disabled="isComplete"
+                :label="ctaLabel"
+                :lang="lang"
+              />
+            </div>
+            <privacy-policy
+              :block-name="blockName"
+              :privacy-policy-link="privacyPolicyLink"
+              :lang="lang"
+            />
+          </div>
+        </div>
+      </transition>
+
+      <transition
+        :enter-active-class="`${blockName}__slide-in`"
+      >
+        <div v-show="formHidden">
+          <div :class="`${blockName}__thank-you-header`">
+            {{ translate("thankYou") }}
+          </div>
+          <p class="mb-0">
+            {{ translate("startReceiving") }} <em>{{ siteName }}</em>.
+          </p>
+        </div>
+      </transition>
+
+      <div v-if="error" class="alert alert-danger mt-3 mb-0" role="alert">
+        <strong>An error ocurred.</strong>
+        {{ error.message }}
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+import recaptchaGetToken from '@mindful-web/marko-web-recaptcha/browser/get-token';
+
+import CheckIcon from './check-icon.vue';
+import InputFormGroup from './input-form-group.vue';
+import NewsletterCheckbox from './newsletter-checkbox.vue';
+import PrivacyPolicy from './privacy-policy.vue';
+import SelectFormGroup from './select-form-group.vue';
+import SignUpButton from './sign-up-button.vue';
+
+import i18n from '../i18n-vue';
+
+export default {
+  components: {
+    CheckIcon,
+    InputFormGroup,
+    NewsletterCheckbox,
+    PrivacyPolicy,
+    SelectFormGroup,
+    SignUpButton,
+  },
+
+  props: {
+    siteName: {
+      type: String,
+      required: true,
+    },
+    recaptchaSiteKey: {
+      type: String,
+      required: true,
+    },
+    email: {
+      type: String,
+      default: null,
+    },
+    defaultNewsletter: {
+      type: Object,
+      required: true,
+      validate: (o) => (o && o.name && o.deploymentTypeId),
+    },
+    newsletters: {
+      type: Array,
+      default: () => [],
+    },
+    demographic: {
+      type: Object,
+      required: true,
+      validate: (demo) => (demo && demo.id && demo.label && demo.values),
+    },
+    asCard: {
+      type: Boolean,
+      default: false,
+    },
+    inPushdown: {
+      type: Boolean,
+      default: false,
+    },
+    ctaLabel: {
+      type: String,
+      default: null,
+    },
+    privacyPolicyLink: {
+      type: Object,
+      required: true,
+    },
+    lang: {
+      type: String,
+      default: 'en',
+    },
+  },
+
+  data: () => ({
+    blockName: 'complete-newsletter-signup',
+    didFocus: false,
+    error: null,
+    formHidden: false,
+    isComplete: false,
+    isLoading: false,
+
+    companyName: null,
+    demographicValue: null,
+    postalCode: null,
+    selectedNewsletters: [],
+  }),
+
+  computed: {
+    classNames() {
+      const { blockName } = this;
+      const classNames = [blockName];
+      if (this.asCard) classNames.push(`${blockName}--as-card`);
+      if (this.inPushdown) classNames.push(`${blockName}--in-pushdown`);
+      return classNames;
+    },
+  },
+
+  watch: {
+    didFocus(value) {
+      if (value) this.$emit('focus');
+    },
+  },
+
+  mounted() {
+    this.$emit('load');
+  },
+
+  methods: {
+    selectNewsletter({ newsletter, checked }) {
+      if (checked) {
+        this.selectedNewsletters.push(newsletter);
+      } else {
+        this.selectedNewsletters = this.selectedNewsletters
+          .filter((nl) => nl.deploymentTypeId !== newsletter.deploymentTypeId);
+      }
+    },
+
+    async submit() {
+      try {
+        this.error = null;
+        this.isLoading = true;
+        const { email, selectedNewsletters } = this;
+        if (!email) throw new Error('Unable to submit: no email address found.');
+        const token = await recaptchaGetToken({ siteKey: this.recaptchaSiteKey, action: 'newsletterSignup' });
+        const payload = {
+          token,
+          email,
+          companyName: this.companyName,
+          postalCode: this.postalCode,
+          deploymentTypeIds: selectedNewsletters.map((nl) => nl.deploymentTypeId),
+          demographics: [
+            { id: this.demographic.id, values: [this.demographicValue] },
+          ],
+        };
+        const res = await fetch('/__omeda/newsletter-signup', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify(payload),
+        });
+        const json = await res.json();
+        if (!res.ok) throw new Error(json.message);
+        this.$emit('submit');
+        selectedNewsletters.forEach((newsletter) => {
+          this.$emit('subscribe', { newsletter });
+        });
+        this.isComplete = true;
+      } catch (e) {
+        this.error = e;
+        this.$emit('error', e);
+      } finally {
+        this.isLoading = false;
+      }
+    },
+
+    translate(key) {
+      return i18n(this.lang, key);
+    },
+  },
+};
+</script>

package/browser/newsletter-signup-modal-listener.vue

@@ -0,0 +1,59 @@
+<template>
+  <div style="display: none;" />
+</template>
+
+<script>
+import cookies from 'js-cookie';
+
+export default {
+  props: {
+    cookieName: {
+      type: String,
+      required: true,
+    },
+    cookieValue: {
+      type: Number,
+      default: 1,
+    },
+    cookieValueToMatch: {
+      type: Number,
+      default: 1,
+    },
+    hasCookie: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  created() {
+    const initialValue = 1;
+    setTimeout(() => {
+      const newsletterSignupModalElement = document.getElementById('newsletter-signup-modal');
+      if (!window.location.pathname.match(/^\/user|\/page/)) {
+        if (
+          (!this.hasCookie && Number(this.cookieValueToMatch) === 0)
+          || (
+            this.hasCookie
+            && Number(this.cookieValue) === Number(this.cookieValueToMatch)
+            && window.dataLayer.find((dataEvent) => dataEvent['identity-x']
+            && dataEvent['identity-x'].newsletterSignupType === 'modal')
+          )
+        ) {
+          newsletterSignupModalElement.classList.add('newsletter-signup-modal-fade-in');
+          const value = !this.hasCookie ? initialValue : (Number(this.cookieValue) + 1);
+          // Set cookie, expires is in days so we have to divide by 24 for hours
+          cookies.set(this.cookieName, value, { expires: 1 / 24 });
+        } else if (
+          this.hasCookie
+          && Number(this.cookieValue) < Number(this.cookieValueToMatch)
+        ) {
+          cookies.set(this.cookieName, (Number(this.cookieValue) + 1), { expires: 1 });
+        } else if (
+          !this.hasCookie
+        ) {
+          cookies.set(this.cookieName, initialValue, { expires: 1 });
+        }
+      }
+    }, 2500);
+  },
+};
+</script>

package/browser/newsletter-toggle-button.vue

@@ -0,0 +1,42 @@
+<template>
+  <button
+    class="site-navbar__newsletter-toggler"
+    type="button"
+    aria-label="Newsletter Menu Toggle"
+    @click="toggle"
+  >
+    <icon-mail :modifiers="['lg']" />
+  </button>
+</template>
+
+<script>
+import IconMail from '@mindful-web/marko-web-icons/browser/mail.vue';
+
+export default {
+  components: {
+    IconMail,
+  },
+  inject: ['EventBus'],
+  props: {
+    initiallyExpanded: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data: () => ({
+    expanded: false,
+  }),
+
+  mounted() {
+    this.expanded = this.initiallyExpanded;
+  },
+
+  methods: {
+    toggle() {
+      this.expanded = !this.expanded;
+      this.EventBus.$emit('newsletter-menu-expanded', this.expanded);
+    },
+  },
+};
+</script>