@mindful-web/marko-web-identity-x 1.0.0

package/browser/download-related.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="download-related__wrapper">
+    <p v-if="items.length">
+      Based on your interest in this {{ content.type }}, we'd recommend these items for you:
+    </p>
+    <div v-for="item in items" :key="item.id" class="download-related__item">
+      <div class="download-related__image">
+        <img
+          v-if="item.primaryImage"
+          :src="imgixUrl(item.primaryImage.src)"
+          :alt="item.primaryImage.alt"
+        >
+      </div>
+      <div class="download-related__title">
+        <h3 v-html="item.name" />
+        <small v-if="item.company">
+          from <strong>{{ item.company.name }}</strong>
+        </small>
+      </div>
+      <div class="download-related__button">
+        <button type="button" class="btn btn-primary" @click="$emit('submit', item)">
+          Download
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import getAsArray from './utils/get-as-array';
+import allPublishedContent from './graphql/queries/download-related-content';
+
+export default {
+
+  inject: ['$graphql'],
+
+  props: {
+    content: {
+      type: Object,
+      default: () => ({}),
+    },
+    limit: {
+      type: Number,
+      default: 4,
+    },
+    types: {
+      type: Array,
+      default: () => (['Document', 'Whitepaper']),
+    },
+  },
+
+  data: () => ({
+    loading: false,
+    items: [],
+  }),
+
+  mounted() {
+    this.load();
+  },
+
+  methods: {
+    imgixUrl(url) {
+      const Url = new URL(url);
+      const usp = Url.searchParams;
+      usp.set('h', 107);
+      usp.set('w', 160);
+      usp.set('fit', 'crop');
+      return Url;
+    },
+    async load() {
+      this.loading = true;
+      try {
+        // Start with directly related items
+        const items = [
+          ...getAsArray(this.content, 'relatedTo.edges')
+            .map(({ node }) => node)
+            .slice(0, this.limit),
+        ];
+        // Get from primary section
+        if (items.length < this.limit) {
+          const limit = this.limit - items.length;
+          const input = {
+            sectionId: this.content.primarySection.id,
+            includeContentTypes: this.types,
+            excludeContentIds: items.map((doc) => doc.id),
+            pagination: { limit },
+          };
+          const data = await this.$graphql.query({
+            query: allPublishedContent,
+            variables: { input },
+            // headers: {},
+          });
+          getAsArray(data, 'data.allPublishedContent.edges').forEach((doc) => items.push(doc.node));
+        }
+        // Get latest published items
+        if (items.length < this.limit) {
+          const limit = this.limit - items.length;
+          const input = {
+            sectionId: this.content.primarySection.id,
+            includeContentTypes: this.types,
+            excludeContentIds: items.map((doc) => doc.id),
+            pagination: { limit },
+          };
+          const data = await this.$graphql.query({
+            query: allPublishedContent,
+            variables: { input },
+            // headers: {},
+          });
+          getAsArray(data, 'data.allPublishedContent.edges').forEach((doc) => items.push(doc.node));
+        }
+        this.items = items;
+      } catch (e) {
+        this.error = e.message;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+};
+</script>

package/browser/download.vue

@@ -0,0 +1,380 @@
+<template>
+  <div id="content-download-idx-form" class="content-page-gate p-block">
+    <template v-if="hasActiveUser">
+      <h5 class="content-page-gate__title">
+        {{ title }}
+      </h5>
+      <p v-if="!didSubmit && displayForm" v-html="callToAction" />
+      <form v-if="!didSubmit && displayForm" @submit.prevent="handleSubmit">
+        <fieldset :disabled="isLoading">
+          <div v-for="(row, ridx) in fieldRows" :key="ridx" class="row">
+            <custom-column
+              v-for="(col, cidx) in row"
+              :key="`${ridx}_${cidx}`"
+              :label="col.label || defaultFieldLabels[col.key]"
+              :field-key="col.key"
+              :field-id="col.id"
+              :type="col.type"
+              :required="col.required"
+              :width="col.width || 1"
+              :user="user"
+              :endpoints="endpoints"
+              :enable-change-email="enableChangeEmail"
+            />
+          </div>
+
+          <form-consent
+            :user="user"
+            :consent-policy="consentPolicy"
+            :consent-policy-enabled="consentPolicyEnabled"
+            :email-consent-request="emailConsentRequest"
+            :email-consent-request-enabled="emailConsentRequestEnabled"
+            :regional-consent-policies="regionalConsentPolicies"
+            :country-code="countryCode"
+          />
+
+          <div class="d-flex align-items-center">
+            <button type="submit" class="btn btn-primary">
+              {{ buttonLabel }}
+            </button>
+          </div>
+        </fieldset>
+        <p v-if="error" class="mt-3 text-danger">
+          An error occurred: {{ error }}
+        </p>
+      </form>
+
+      <template v-else>
+        <div class="success-message">
+          <p class="success-message__title">
+            Your responses have been saved, and your download should begin automatically.
+          </p>
+          <p class="success-message__title d-flex justify-content-between">
+            If not, click this button to start:
+            <a
+              class="btn btn-primary mr-3"
+              :href="content.fileSrc"
+              target="_blank"
+            >Download</a>
+          </p>
+          <download-related v-if="showRelated" :content="content" @submit="download" />
+        </div>
+      </template>
+    </template>
+
+    <div v-else>
+      <p v-html="callToActionLoggedOut" />
+      <login
+        :additional-event-data="additionalEventData"
+        :source="loginSource"
+        :endpoints="endpoints"
+        :redirect="redirect"
+        :app-context-id="appContextId"
+        :consent-policy="consentPolicy"
+        :consent-policy-enabled="consentPolicyEnabled"
+        :email-consent-request="emailConsentRequest"
+        :email-consent-request-enabled="emailConsentRequestEnabled"
+        :regional-consent-policies="regionalConsentPolicies"
+        :required-create-fields="requiredCreateFields"
+        :default-field-labels="defaultFieldLabels"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import post from './utils/post';
+import cookiesEnabled from './utils/cookies-enabled';
+
+import FormConsent from './form/consent.vue';
+import CustomColumn from './custom-column.vue';
+import Login from './login.vue';
+
+import FeatureError from './errors/feature';
+import FormError from './errors/form';
+import EventEmitter from './mixins/global-event-emitter';
+import DownloadRelated from './download-related.vue';
+
+export default {
+  components: {
+    CustomColumn,
+    DownloadRelated,
+    FormConsent,
+    Login,
+  },
+
+  /**
+   *
+   */
+  mixins: [EventEmitter],
+
+  /**
+   *
+   */
+  props: {
+    /**
+     * custom form props
+     */
+    content: {
+      type: Object,
+      required: true,
+    },
+    fieldRows: {
+      type: Array,
+      required: true,
+    },
+    title: {
+      type: String,
+      default: 'Complete the form to download this content',
+    },
+    callToAction: {
+      type: String,
+      default: 'To download this content, please fill out the form below.',
+    },
+    callToActionLoggedOut: {
+      type: String,
+      default: 'To download this content, please enter your email address below.',
+    },
+    cookie: {
+      type: Object,
+      required: true,
+    },
+    displayForm: {
+      type: Boolean,
+      default: true,
+    },
+
+    /**
+     * profile/login props
+     */
+    loginSource: {
+      type: String,
+      default: 'contentDownload',
+    },
+    endpoints: {
+      type: Object,
+      required: true,
+    },
+    activeUser: {
+      type: Object,
+      default: () => ({}),
+    },
+    requiredCreateFields: {
+      type: Array,
+      default: () => [],
+    },
+    defaultFieldLabels: {
+      type: Object,
+      default: () => {},
+    },
+    consentPolicy: {
+      type: String,
+      default: null,
+    },
+    consentPolicyEnabled: {
+      type: Boolean,
+      default: false,
+    },
+    emailConsentRequest: {
+      type: String,
+      default: null,
+    },
+    emailConsentRequestEnabled: {
+      type: Boolean,
+      default: false,
+    },
+    appContextId: {
+      type: String,
+      default: null,
+    },
+    buttonLabel: {
+      type: String,
+      default: 'Submit & Download',
+    },
+    regionalConsentPolicies: {
+      type: Array,
+      default: () => [],
+    },
+    defaultCountryCode: {
+      type: String,
+      default: null,
+    },
+    enableChangeEmail: {
+      type: Boolean,
+      default: false,
+    },
+    showRelated: {
+      type: Boolean,
+      default: true,
+    },
+    updateProfileOnSubmit: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  /**
+   *
+   */
+  data() {
+    return {
+      error: null,
+      isLoading: false,
+      isReloadingPage: false,
+      isRedirectingPage: false,
+      didSubmit: false,
+      user: {
+        ...this.activeUser,
+        ...(this.defaultCountryCode
+          && !this.activeUser.countryCode
+          && { countryCode: this.defaultCountryCode }
+        ),
+      },
+      downloaded: [],
+    };
+  },
+
+  /**
+   *
+   */
+  computed: {
+    /**
+     *
+     */
+    hasActiveUser() {
+      return this.user && this.user.email;
+    },
+
+    /**
+     *
+     */
+    redirect() {
+      if (this.content.siteContext && this.content.siteContext.url) {
+        return this.content.siteContext.url;
+      }
+      if (this.content) {
+        return `/${this.content.id}`;
+      }
+      return '/';
+    },
+
+    /**
+     *
+     */
+    canUpdateProfile() {
+      return this.hasActiveUser && this.updateProfileOnSubmit;
+    },
+
+    /**
+     *
+     */
+    countryCode() {
+      if (this.user && this.user.countryCode) return this.user.countryCode;
+      return this.defaultCountryCode;
+    },
+  },
+
+  /**
+   *
+   */
+  mounted() {
+    if (cookiesEnabled()) {
+      this.emit('download-mounted');
+    } else {
+      const error = new FeatureError('Your browser does not support cookies. Please enable cookies to use this feature.');
+      this.error = error.message;
+      this.emit('download-errored', { message: error.message });
+    }
+  },
+
+  /**
+   *
+   */
+  methods: {
+    /**
+     *
+     */
+    async handleSubmit() {
+      this.error = null;
+      this.isLoading = true;
+      this.didSubmit = false;
+      try {
+        const additionalEventData = { ...this.additionalEventData, actionSource: this.loginSource };
+        let data = {};
+        if (this.canUpdateProfile) {
+          const res = await post('/profile', { ...this.user, additionalEventData });
+          data = await res.json();
+          if (!res.ok) throw new FormError(data.message, res.status);
+          this.user = data.user;
+        }
+
+        // Re-focus on the form
+        document.getElementById('content-download-idx-form').scrollIntoView({ behavior: 'smooth' });
+
+        // Perform and notify about the download
+        const eventData = { ...additionalEventData, ...(data.additionalEventData || {}) };
+        await this.download(this.content, eventData);
+        this.didSubmit = true;
+      } catch (e) {
+        this.error = e;
+        this.emit('download-errored', { message: e.message });
+      } finally {
+        this.isLoading = false;
+      }
+    },
+    /**
+     *
+     */
+    async download(content, additionalEventData) {
+      // Only emit event once when downloading
+      if (!this.downloaded.includes(content.id)) {
+        const company = content.company || {};
+        const { entity } = await post('/download', {
+          contentId: content.id,
+          contentType: content.type,
+          cookie: this.cookie,
+          companyId: company.id,
+          userId: this.user.id,
+          additionalEventData,
+          // Flatten the payload for storage
+          payload: this.fieldRows.reduce((objs, row) => {
+            const { fields, selects, booleans } = objs;
+            row.forEach((col) => {
+              const { id, type, label } = col;
+              if (type === 'custom-select') {
+                const value = this.user.customSelectFieldAnswers.find((ans) => ans.id === id);
+                const values = (value.answers || []).map((answer) => {
+                  const opts = value.field.options.reduce((arr, opt) => ([
+                    ...arr, opt, ...(opt.options ? opt.options : []),
+                  ]), []);
+                  const ans = opts.find((opt) => opt.id === answer.id);
+                  return { id: answer.id, label: ans.label, writeIn: answer.writeInValue };
+                });
+                selects[id] = { label, values };
+              } else if (type === 'custom-boolean') {
+                const value = this.user.customBooleanFieldAnswers.find((ans) => ans.id === id);
+                booleans[id] = { label, value };
+              } else {
+                const value = this.user[col.key];
+                fields[col.key] = { label, value };
+              }
+            });
+            return { fields, selects, booleans };
+          }, { fields: {}, selects: {}, booleans: {} }),
+        });
+        this.emit('download-submitted', {
+          contentId: content.id,
+          contentType: content.type,
+          companyId: company.id,
+          userId: this.user.id,
+          additionalEventData,
+        }, entity);
+        this.downloaded.push(content.id);
+      }
+
+      // Attempt to open download
+      window.open(content.fileSrc, '_blank');
+    },
+  },
+};
+</script>

package/browser/errors/authentication.js

@@ -0,0 +1,7 @@
+export default class AuthenticationError extends Error {
+  constructor(message, code = 500) {
+    super(message);
+    this.name = 'AuthenticationError';
+    this.code = code;
+  }
+}

package/browser/errors/feature.js

@@ -0,0 +1,7 @@
+export default class FeatureError extends Error {
+  constructor(message, code = 400) {
+    super(message);
+    this.name = 'FeatureError';
+    this.code = code;
+  }
+}

package/browser/errors/form.js

@@ -0,0 +1,7 @@
+export default class FormError extends Error {
+  constructor(message, code = 500) {
+    super(message);
+    this.name = 'FormError';
+    this.code = code;
+  }
+}

package/browser/errors/logout.js

@@ -0,0 +1,7 @@
+export default class LogoutError extends Error {
+  constructor(message, code = 500) {
+    super(message);
+    this.name = 'LogoutError';
+    this.code = code;
+  }
+}

package/browser/form/address-block.vue

@@ -0,0 +1,131 @@
+<template>
+  <fieldset v-if="showBlock" class="px-3 border mb-3 address-block">
+    <legend class="h6 w-auto">
+      {{ blockLabel }}
+    </legend>
+
+    <div v-if="street.visible" class="row">
+      <street
+        v-model="user.street"
+        :required="street.required"
+        :class-name="addressExtra.visible ? 'col-md-8' : 'col-md-12'"
+        :label="defaultFieldLabels.street"
+      />
+      <address-extra
+        v-if="addressExtra.visible"
+        v-model="user.addressExtra"
+        :required="addressExtra.required"
+        :label="defaultFieldLabels.addressExtra"
+      />
+    </div>
+
+    <div v-if="city.visible || regionCode.visible || postalCode.visible" class="row">
+      <city
+        v-if="city.visible"
+        v-model="user.city"
+        :required="city.required"
+        :class-name="addressLineTwoFieldClass"
+        :label="defaultFieldLabels.city"
+      />
+      <region
+        v-if="regionCode.visible"
+        v-model="user.regionCode"
+        :country-code="user.countryCode"
+        :required="regionCode.required"
+        :class-name="addressLineTwoFieldClass"
+        :label="defaultFieldLabels.region"
+      />
+      <postal-code
+        v-if="postalCode.visible"
+        v-model="user.postalCode"
+        :required="postalCode.required"
+        :class-name="addressLineTwoFieldClass"
+        :label="defaultFieldLabels.postalCode"
+      />
+    </div>
+  </fieldset>
+</template>
+
+<script>
+import City from './fields/city.vue';
+import Region from './fields/region.vue';
+import PostalCode from './fields/postal-code.vue';
+import Street from './fields/street.vue';
+import AddressExtra from './fields/address-extra.vue';
+
+export default {
+  components: {
+    City,
+    Region,
+    PostalCode,
+    Street,
+    AddressExtra,
+  },
+  props: {
+    user: {
+      type: Object,
+      required: true,
+    },
+    defaultFieldLabels: {
+      type: Object,
+      default: () => {},
+    },
+    street: {
+      type: Object,
+      required: true,
+    },
+    addressExtra: {
+      type: Object,
+      required: true,
+    },
+    city: {
+      type: Object,
+      required: true,
+    },
+    regionCode: {
+      type: Object,
+      required: true,
+    },
+    postalCode: {
+      type: Object,
+      required: true,
+    },
+  },
+  /**
+   *
+   */
+  computed: {
+    addressLineTwoFieldClass() {
+      let fields = 0;
+      if (this.city.visible) fields += 1;
+      if (this.regionCode.visible) fields += 1;
+      if (this.postalCode.visible) fields += 1;
+      if (fields === 0 || fields === 1) return 'col-md-12';
+      return `col-md-${12 / fields}`;
+    },
+    showBlock() {
+      return [
+        this.street,
+        this.addressExtra,
+        this.city,
+        this.regionCode,
+        this.postalCode,
+      ].some((v) => v.visible);
+    },
+    classNames() {
+      const classNames = ['form-group'];
+      const { className } = this;
+      if (className) classNames.push(className);
+      return classNames;
+    },
+    countryCode() {
+      const { user } = this;
+      if (!user) return null;
+      return user.countryCode;
+    },
+    blockLabel() {
+      return this.defaultFieldLabels.addressBlockLabel || 'Address';
+    },
+  },
+};
+</script>