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

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

@@ -0,0 +1,243 @@
+<template>
+  <div class="newsletter-form">
+    <div ref="lazyload" class="lazyload" />
+    <div :class="bem()">
+      <div v-if="imageSrc" :class="bem('left-col')">
+        <img
+          :src="imageSrc"
+          :srcset="imageSrcset"
+          :alt="name"
+          :width="imageWidth"
+          :height="imageHeight"
+        >
+      </div>
+      <div :class="bem('right-col')">
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <div v-if="!submitted" :class="bem('name')" v-html="name" />
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <div v-if="!submitted" :class="bem('description')" v-html="description" />
+        <div :class="bem('form-wrapper')">
+          <login-form
+            :additional-event-data="loginAdditionalEventData"
+            :source="source"
+            :active-user="activeUser"
+            :endpoints="endpoints"
+            :button-labels="buttonLabels"
+            :redirect="redirect"
+            :login-email-placeholder="loginEmailPlaceholder"
+            :consent-policy-enabled="true"
+            :consent-policy="consentPolicy"
+            :email-consent-request-enabled="true"
+            :email-consent-request="emailConsentRequest"
+            :required-create-fields="requiredCreateFields"
+            :default-field-labels="defaultFieldLabels"
+            :regional-consent-policies="regionalConsentPolicies"
+            :app-context-id="appContextId"
+            :login-email-label="translateEmail"
+            :lang="lang"
+            :action-text="actionText"
+            success-message-type="newsletter-signup"
+            @login-link-sent="handleLoginLinkSent"
+            @login-errored="handleError"
+            @focus="$emit('focus', { type })"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import LoginForm from '@mindful-web/marko-web-identity-x/browser/login.vue';
+import i18n from '../i18n-vue';
+
+export default {
+  components: {
+    LoginForm,
+  },
+  inject: ['EventBus'],
+
+  props: {
+    type: {
+      type: String,
+      required: true,
+      validator(value) {
+        return [
+          'inlineContent',
+          'inlineSection',
+          'footer',
+          'modal',
+          'recommended',
+        ].includes(value);
+      },
+    },
+    siteName: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      required: true,
+    },
+    modifiers: {
+      type: Array,
+      default: () => ['large'],
+      validator: (v) => v.every((val) => ['large', 'footer', 'modal'].includes(val)),
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    imageSrc: {
+      type: String,
+      default: null,
+    },
+    imageSrcset: {
+      type: String,
+      default: null,
+    },
+    imageWidth: {
+      type: String,
+      default: '',
+    },
+    imageHeight: {
+      type: String,
+      default: '',
+    },
+    lang: {
+      type: String,
+      default: 'en',
+    },
+    // LOGIN FORM PROPS
+    source: {
+      type: String,
+      default: 'newsletterSignup',
+    },
+    activeUser: {
+      type: Object,
+      default: () => {},
+    },
+    endpoints: {
+      type: Object,
+      required: true,
+    },
+    buttonLabels: {
+      type: Object,
+      default: () => ({
+        continue: 'Continue',
+        logout: 'Logout',
+      }),
+    },
+    consentPolicy: {
+      type: String,
+      default: null,
+    },
+    emailConsentRequest: {
+      type: String,
+      default: null,
+    },
+    redirect: {
+      type: String,
+      default: null,
+    },
+    appContextId: {
+      type: String,
+      default: null,
+    },
+    loginEmailPlaceholder: {
+      type: String,
+      default: null,
+    },
+    senderEmailAddress: {
+      type: String,
+      default: 'noreply@identity-x.parameter1.com',
+    },
+    additionalEventData: {
+      type: Object,
+      default: () => ({
+        forceProfileReVerification: true,
+      }),
+    },
+    loginEmailLabel: {
+      type: String,
+      default: '',
+    },
+    /**
+     * Regional consent polices to display (if/when a user selects a country on login)
+     * if enabled.
+     */
+    regionalConsentPolicies: {
+      type: Array,
+      default: () => [],
+    },
+    actionText: {
+      type: String,
+      default: 'signing up to receive your email notifications',
+    },
+    requiredCreateFields: {
+      type: Array,
+      default: () => [],
+    },
+    defaultFieldLabels: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  data: () => ({
+    blockName: 'newsletter-signup-banner',
+    didView: false,
+    email: null,
+    step: 1,
+    submitted: false,
+  }),
+
+  computed: {
+    loginAdditionalEventData() {
+      return {
+        ...this.additionalEventData,
+        forceProfileReVerification: true,
+        newsletterSignupType: this.type,
+      };
+    },
+    translateEmail() {
+      if (this.loginEmailLabel) return this.loginEmailLabel;
+      return i18n(this.lang, 'emailAddress');
+    },
+  },
+
+  watch: {
+    didView(value) {
+      if (value) this.$emit('view', { step: 1 });
+    },
+  },
+
+  mounted() {
+    this.$emit('load', { step: 1, type: this.type });
+    this.$refs.lazyload.addEventListener('lazybeforeunveil', () => {
+      this.didView = true;
+      this.$emit('view', { type: this.type });
+    });
+  },
+
+  methods: {
+    bem(name) {
+      const target = name ? `${this.blockName}__${name}` : this.blockName;
+      const classes = [target];
+      this.modifiers.forEach((m) => classes.push(`${target}--${m}`));
+      return classes;
+    },
+    handleLoginLinkSent() {
+      this.submitted = true;
+      this.$emit('submit', { type: this.type });
+    },
+    handleError(error) {
+      this.$emit('error', { type: this.type, error });
+    },
+  },
+};
+</script>

package/browser/idx-newsletter-form/pushdown.vue

@@ -0,0 +1,249 @@
+<template>
+  <aside :class="classNames">
+    <div :class="element('container')">
+      <div class="row">
+        <div :class="element('image-wrapper', ['d-none', 'd-md-flex', 'col-md-5', 'col-lg-4'])">
+          <img
+            v-if="imageSrc"
+            :src="imageSrc"
+            :srcset="imageSrcset"
+            :alt="name"
+            :class="element('image')"
+            :width="imageWidth"
+            :height="imageHeight"
+          >
+        </div>
+        <div :class="element('form-wrapper', ['col-12', 'col-md-6', 'col-lg-7'])">
+          <div v-if="!submitted" :class="element('name')">
+            {{ name }}
+          </div>
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <div v-if="!submitted" :class="element('description')" v-html="description" />
+          <login-form
+            :additional-event-data="loginAdditionalEventData"
+            :source="source"
+            :active-user="activeUser"
+            :endpoints="endpoints"
+            :button-labels="buttonLabels"
+            :redirect="redirect"
+            :login-email-placeholder="loginEmailPlaceholder"
+            :consent-policy-enabled="true"
+            :consent-policy="consentPolicy"
+            :email-consent-request-enabled="true"
+            :email-consent-request="emailConsentRequest"
+            :required-create-fields="requiredCreateFields"
+            :default-field-labels="defaultFieldLabels"
+            :regional-consent-policies="regionalConsentPolicies"
+            :app-context-id="appContextId"
+            :action-text="actionText"
+            login-email-id="newsletter-pushdown-email"
+            :login-email-label="translateEmail"
+            :lang="lang"
+            @login-link-sent="handleLoginLinkSent"
+            @login-errored="handleError"
+            @focus="$emit('focus')"
+          />
+        </div>
+        <div :class="element('close-container', ['d-none', 'd-md-flex', 'col-md-1', 'col-lg-1'])">
+          <close-button
+            :class-name="element('close').join(' ')"
+            target-button=".site-navbar__idx-newsletter-toggler"
+            :icon-modifiers="['lg']"
+          />
+        </div>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<script>
+import LoginForm from '@mindful-web/marko-web-identity-x/browser/login.vue';
+import CloseButton from '../newsletter-close-button.vue';
+import i18n from '../i18n-vue';
+
+export default {
+  components: {
+    CloseButton,
+    LoginForm,
+  },
+  inject: ['EventBus'],
+
+  props: {
+    siteName: {
+      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,
+    },
+    imageWidth: {
+      type: String,
+      default: '',
+    },
+    imageHeight: {
+      type: String,
+      default: '',
+    },
+    initiallyExpanded: {
+      type: Boolean,
+      default: false,
+    },
+    lang: {
+      type: String,
+      default: 'en',
+    },
+
+    actionText: {
+      type: String,
+      default: 'signing up to receive your email notifications',
+    },
+
+    // LOGIN FORM PROPS
+    source: {
+      type: String,
+      default: 'newsletterSignup',
+    },
+    activeUser: {
+      type: Object,
+      default: () => {},
+    },
+    endpoints: {
+      type: Object,
+      required: true,
+    },
+    buttonLabels: {
+      type: Object,
+      default: () => ({
+        continue: 'Continue',
+        logout: 'Logout',
+      }),
+    },
+    consentPolicy: {
+      type: String,
+      default: null,
+    },
+    emailConsentRequest: {
+      type: String,
+      default: null,
+    },
+    redirect: {
+      type: String,
+      default: null,
+    },
+    appContextId: {
+      type: String,
+      default: null,
+    },
+    loginEmailPlaceholder: {
+      type: String,
+      default: null,
+    },
+    senderEmailAddress: {
+      type: String,
+      default: 'noreply@identity-x.parameter1.com',
+    },
+    additionalEventData: {
+      type: Object,
+      default: null,
+    },
+    loginEmailLabel: {
+      type: String,
+      default: '',
+    },
+
+    /**
+     * Regional consent polices to display (if/when a user selects a country on login)
+     * if enabled.
+     */
+    regionalConsentPolicies: {
+      type: Array,
+      default: () => [],
+    },
+    requiredCreateFields: {
+      type: Array,
+      default: () => [],
+    },
+    defaultFieldLabels: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  data: () => ({
+    blockName: 'site-newsletter-menu',
+    didLoad: false,
+    email: null,
+    expanded: undefined,
+    submitted: false,
+  }),
+
+  computed: {
+    loginAdditionalEventData() {
+      return {
+        ...this.additionalEventData,
+        forceProfileReVerification: true,
+        newsletterSignupType: 'pushdown',
+      };
+    },
+    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;
+    },
+    translateEmail() {
+      if (this.loginEmailLabel) return this.loginEmailLabel;
+      return i18n(this.lang, 'emailAddress');
+    },
+  },
+
+  watch: {
+    didLoad(value) {
+      if (value) this.$emit('load', { step: 1 });
+    },
+  },
+
+  mounted() {
+    if (this.initiallyExpanded) this.didLoad = true;
+    this.EventBus.$on('idx-newsletter-menu-expanded', (expanded) => {
+      this.expanded = expanded;
+      if (expanded) this.didLoad = true;
+    });
+  },
+
+  methods: {
+    element(elementName, classNames = []) {
+      return [`${this.blockName}__${elementName}`, ...classNames];
+    },
+    handleLoginLinkSent() {
+      this.submitted = true;
+      this.$emit('submit', { type: this.type });
+    },
+    handleError(error) {
+      this.$emit('error', { type: this.type, error });
+    },
+  },
+};
+</script>

package/browser/idx-newsletter-form/toggle-button.vue

@@ -0,0 +1,65 @@
+<template>
+  <button
+    :class="buttonClass"
+    type="button"
+    aria-label="Newsletter Menu Toggle"
+    @click="toggle"
+  >
+    <component :is="icon" :modifiers="iconModifiers" />
+  </button>
+</template>
+
+<script>
+import IconMail from '@mindful-web/marko-web-icons/browser/mail.vue';
+import IconPerson from '@mindful-web/marko-web-icons/browser/person.vue';
+
+const validateIcon = (v) => ['mail', 'person'].includes(v);
+
+export default {
+  components: {
+    IconMail,
+    IconPerson,
+  },
+  inject: ['EventBus'],
+  props: {
+    iconName: {
+      type: String,
+      default: 'mail',
+      validator: validateIcon,
+    },
+    iconModifiers: {
+      type: Array,
+      default: () => ['lg'],
+    },
+    initiallyExpanded: {
+      type: Boolean,
+      default: false,
+    },
+    buttonClass: {
+      type: String,
+      default: 'site-navbar__idx-newsletter-toggler',
+    },
+  },
+
+  data: () => ({
+    expanded: false,
+  }),
+
+  computed: {
+    icon() {
+      return `icon-${this.iconName}`;
+    },
+  },
+
+  mounted() {
+    this.expanded = this.initiallyExpanded;
+  },
+
+  methods: {
+    toggle() {
+      this.expanded = !this.expanded;
+      this.EventBus.$emit('idx-newsletter-menu-expanded', this.expanded);
+    },
+  },
+};
+</script>