@designcrowd/fe-shared-lib 1.0.0-test-publish

package/src/experiences/components/UploadYourLogoApplication/UploadYourLogoApplication.stories.js

@@ -0,0 +1,205 @@
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+
+import UploadYourLogoApplication from './UploadYourLogoApplication.vue';
+import Events from '../../constants/event-constants';
+import API from '../../constants/api';
+
+export default {
+  title: 'Components/UploadYourLogoApplication',
+  component: UploadYourLogoApplication,
+};
+
+const MOCK_RESPONSE_DELAY = 2000;
+const UPLOAD_SUCCESS_RESPONSE = {
+  templateUploadToken: '6bc3885c-7e5c-4c9e-9b54-21dcd06ca647',
+  logoImageUrl: '/images/logos/coke.jpeg',
+  logoImageDetails: {
+    businessText: 'LOGO TEXT HERE',
+    sloganText: 'Slogan Text Here',
+    textColors: ['#2ab1f8', '#ff0000', '#00ff00', '#0fb0fb', '#87adbb', '#7ef99f'],
+    backgroundColors: ['#041444'],
+  },
+};
+const UPLOAD_SUCCESS_RESPONSE_SVG = {
+  templateUploadToken: '6bc3885c-7e5c-4c9e-9b54-21dcd06ca647',
+  logoImageUrl: 'https://cdn.worldvectorlogo.com/logos/raspberry-pi.svg',
+  logoImageDetails: {
+    businessText: 'LOGO TEXT HERE',
+    textColors: ['#cd003f'],
+    backgroundColors: ['#000000'],
+  },
+};
+
+export const Success = () => {
+  const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY });
+  mock.onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_UPLOAD_LOGO_ENDPOINT).reply(200, UPLOAD_SUCCESS_RESPONSE);
+
+  mock.onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_SAVE_ENDPOINT).reply(200, {
+    success: true,
+  });
+
+  return {
+    components: {
+      UploadYourLogoApplication,
+    },
+    template: `
+      <div>
+        <input type="file" @change="onFileInputChange" accept=".png,.svg,.eps" />
+        <UploadYourLogoApplication :use-dropzone="true" @on-finish="onFinish" />
+      </div>
+    `,
+    methods: {
+      onFileInputChange(e) {
+        if (e.target.files.length) {
+          window.dispatchEvent(
+            new CustomEvent(Events.BeginUploadLogoExperience, {
+              detail: { file: e.target.files[0] },
+            }),
+          );
+        }
+      },
+      onFinish(e) {
+        alert('on finish');
+        console.log(e);
+      },
+    },
+  };
+};
+
+export const SuccessNotLoggedIn = () => {
+  const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY });
+  mock.onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_UPLOAD_LOGO_ENDPOINT).reply(200, UPLOAD_SUCCESS_RESPONSE);
+
+  mock.onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_SAVE_ENDPOINT).reply(200, {
+    success: true,
+  });
+
+  return {
+    components: {
+      UploadYourLogoApplication,
+    },
+    template: `
+          <div>
+            <UploadYourLogoApplication :active="true" :use-dropzone="true" @on-file-change="onFileChange" />
+          </div>
+        `,
+    methods: {
+      onFileChange(fileInput) {
+        if (fileInput) {
+          window.dispatchEvent(
+            new CustomEvent(Events.BeginUploadLogoExperience, {
+              detail: { file: fileInput },
+            }),
+          );
+        }
+      },
+    },
+  };
+};
+
+export const SuccessSvg = () => {
+  const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY });
+  mock.onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_UPLOAD_LOGO_ENDPOINT).reply(200, UPLOAD_SUCCESS_RESPONSE_SVG);
+
+  mock.onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_SAVE_ENDPOINT).reply(200, {
+    success: true,
+  });
+
+  return {
+    components: {
+      UploadYourLogoApplication,
+    },
+    template: `
+      <div>
+        <input type="file" @change="onFileInputChange" accept=".png,.svg,.eps" />
+        <UploadYourLogoApplication :is-user-authenticated="true" @on-finish="onFinish" />
+      </div>
+    `,
+    methods: {
+      onFileInputChange(e) {
+        if (e.target.files.length) {
+          window.dispatchEvent(
+            new CustomEvent(Events.BeginUploadLogoExperience, {
+              detail: { file: e.target.files[0] },
+            }),
+          );
+        }
+      },
+      onFinish(e) {
+        alert('on finish');
+        console.log(e);
+      },
+    },
+  };
+};
+
+export const FailOnUpload = () => {
+  const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY });
+  mock
+    .onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_UPLOAD_LOGO_ENDPOINT)
+    .reply(500, 'An error occured when extracting details from the image. Please try again.');
+
+  return {
+    components: {
+      UploadYourLogoApplication,
+    },
+    template: `
+      <div>
+        <input type="file" @change="onFileInputChange" accept=".png,.svg,.eps" />
+        <UploadYourLogoApplication @on-finish="onFinish" />
+      </div>
+    `,
+    methods: {
+      onFileInputChange(e) {
+        if (e.target.files.length) {
+          window.dispatchEvent(
+            new CustomEvent(Events.BeginUploadLogoExperience, {
+              detail: { file: e.target.files[0] },
+            }),
+          );
+        }
+      },
+      onFinish(e) {
+        alert('on finish');
+        console.log(e);
+      },
+    },
+  };
+};
+
+export const FailOnCreate = () => {
+  const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY });
+  mock.onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_UPLOAD_LOGO_ENDPOINT).reply(200, UPLOAD_SUCCESS_RESPONSE);
+
+  mock
+    .onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_SAVE_ENDPOINT)
+    .reply(500, 'An error occured when creating a logo from the provided details. Please try again.');
+
+  return {
+    components: {
+      UploadYourLogoApplication,
+    },
+    template: `
+      <div>
+        <input type="file" @change="onFileInputChange" accept=".png,.svg,.eps" />
+        <UploadYourLogoApplication :is-user-authenticated="true" @on-finish="onFinish" />
+      </div>
+    `,
+    methods: {
+      onFileInputChange(e) {
+        if (e.target.files.length) {
+          window.dispatchEvent(
+            new CustomEvent(Events.BeginUploadLogoExperience, {
+              detail: { file: e.target.files[0] },
+            }),
+          );
+        }
+      },
+      onFinish(e) {
+        alert('on finish');
+        console.log(e);
+      },
+    },
+  };
+};

package/src/experiences/components/UploadYourLogoApplication/UploadYourLogoApplication.vue

@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <UploadYourLogoOnBoarding
+      v-if="active"
+      :logo-file="logoData.logoFile"
+      :use-dropzone="useDropzone"
+      :is-post-purchase-user-upload="isPostPurchaseUserUpload"
+      @on-exit="onExit"
+      @on-upload-error="onUploadError"
+      @on-file-change="onFileChange"
+      @on-finish="onFinish"
+      @on-image-cropped="onImageCropped"
+      @on-save-business-text="onSaveBusinessText"
+      @on-brand-colors-save="onBrandColorsSave"
+      @on-back="onBack"
+      @on-logo-upload-success="onLogoUploadSuccess"
+    />
+  </div>
+</template>
+<script>
+import Events from '../../constants/event-constants';
+import UploadYourLogoOnBoarding from '../UploadYourLogoOnBoarding/UploadYourLogoOnBoarding.vue';
+
+export default {
+  components: {
+    UploadYourLogoOnBoarding,
+  },
+  props: {
+    useDropzone: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isPostPurchaseUserUpload: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      logoData: {
+        logoFile: null,
+      },
+      active: this.useDropzone,
+    };
+  },
+  watch: {
+    useDropzone: {
+      immediate: true,
+      handler() {
+        if (this.useDropzone) {
+          this.active = true;
+        }
+      },
+    },
+  },
+  mounted() {
+    /*
+      Disclaimer!
+      This event is used for when the experience is launched via a
+      regular HTML5 <input type="file" />. This is invoked by the "Upload your logo"
+      link in the HeroBannerGeneric component and also a button in the App.Maker sidebar.
+
+      Unless you are interacting with this component from outside of Vue or outside of
+      this repository, please refrain from using the window event to upload logos.
+    */
+    if (window) {
+      window.addEventListener(Events.BeginUploadLogoExperience, (e) => {
+        this.onBeginUploadLogoExperience(e.detail.file);
+      });
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener(Events.BeginUploadLogoExperience, (e) => {
+      this.onBeginUploadLogoExperience(e.detail.file);
+    });
+  },
+  methods: {
+    onBeginUploadLogoExperience(file) {
+      this.active = true;
+      this.logoData.logoFile = {
+        file,
+      };
+    },
+    onExit({ currentStepTrackingLabel }) {
+      this.$emit('on-exit', { currentStepTrackingLabel });
+      this.reset();
+    },
+    reset() {
+      this.active = false;
+      this.logoData.logoFile = null;
+    },
+    onUploadError() {
+      this.logoData.logoFile = null;
+    },
+    onFileChange(file) {
+      this.logoData.logoFile = {
+        file,
+      };
+    },
+    onFinish(e) {
+      this.$emit('on-finish', e);
+      window.dispatchEvent(new CustomEvent(Events.UploadLogoSuccess));
+      this.reset();
+    },
+    onBack({ currentStepTrackingLabel }) {
+      this.$emit('on-back', { currentStepTrackingLabel });
+    },
+    onImageCropped({ isCropped }) {
+      this.$emit('on-image-cropped', { isCropped });
+    },
+    onSaveBusinessText({ businessText }) {
+      this.$emit('on-save-business-text', { businessText });
+    },
+    onBrandColorsSave({ textColorUserSelected, backgroundColorUserSelected }) {
+      this.$emit('on-brand-colors-save', {
+        textColorUserSelected,
+        backgroundColorUserSelected,
+      });
+    },
+    onLogoUploadSuccess() {
+      this.$emit('on-logo-upload-success');
+    },
+  },
+};
+</script>

package/src/experiences/components/UploadYourLogoDropzone/UploadYourLogoDropzone.stories.js

@@ -0,0 +1,40 @@
+import Events from '../../constants/event-constants';
+import UploadYourLogoDropzone from './UploadYourLogoDropzone.vue';
+
+export default {
+  title: 'Components/UploadYourLogoDropzone',
+  component: UploadYourLogoDropzone,
+};
+
+export const Sample = () => {
+  window.addEventListener(Events.BeginUploadLogoExperience, (e) => {
+    console.log('BEGIN_UPLOAD_LOGO_EXPERIENCE', e);
+  });
+
+  return {
+    components: {
+      UploadYourLogoDropzone,
+    },
+    template: `
+      <UploadYourLogoDropzone />
+    `,
+  };
+};
+
+export const SampleExternallyInvoked = () => {
+  window.addEventListener(Events.BeginUploadLogoExperience, (e) => {
+    console.log('BEGIN_UPLOAD_LOGO_EXPERIENCE', e);
+  });
+
+  return {
+    components: {
+      UploadYourLogoDropzone,
+    },
+    template: `
+      <div>
+        <UploadYourLogoDropzone
+          :should-open-upload-when-mounted="true" />
+      </div>
+    `,
+  };
+};

package/src/experiences/components/UploadYourLogoDropzone/UploadYourLogoDropzone.vue

@@ -0,0 +1,266 @@
+<template>
+  <dropzone
+    :id="`upload-your-logo-dropzone-${_uid}`"
+    ref="dropzone"
+    class="c-upload-your-logo tw-group tw-transition-colors tw-duration-200 tw-flex tw-items-center tw-justify-center tw-flex-col tw-py-8 tw-cursor-pointer"
+    :class="{
+      'tw-w-full tw-bg-grayscale-400 tw-flex tw-items-center tw-justify-center tw-flex-col tw-cursor-pointer': isModal,
+      'hover:tw-bg-grayscale-200 tw-bg-white tw-border tw-border-dashed tw-border-secondary-300 tw-rounded': !isModal,
+      'md:tw-py-2 md:tw-pr-2 md:tw-items-start': useLandscapeTile,
+    }"
+    :options="options"
+    :include-styling="false"
+    :use-custom-slot="true"
+    data-test-byo-upload-dropzone
+    @vdropzone-success="onUploadSuccess"
+  >
+    <div
+      class="tw-text-center tw-px-2"
+      :class="{
+        'md:tw-flex md:tw-flex-row md:tw-items-center md:tw-text-left md:tw-text-xs md:tw-px-4': useLandscapeTile,
+        'md:tw-px-8': smallLayout && !useLandscapeTile,
+      }"
+    >
+      <div
+        class="group-hover:tw-text-info-500 tw-flex tw-items-center tw-justify-center tw-w-full tw-mx-auto tw-mb-2"
+        :class="{
+          'tw-text-secondary-500': !isDesignCom,
+          'tw-text-secondary-400': isDesignCom,
+          'md:tw-mb-0': useLandscapeTile,
+          'md:tw-w-10 md:tw-h-10': smallLayout,
+        }"
+      >
+        <svg
+          class="tw-fill-current tw-w-24 tw-h-24 tw-transition-colors tw-duration-200"
+          viewBox="0 0 100 100"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M61.393 5c.5922 0 1.1635.261 1.5802.6956l22.3903 23.2608c.373.4133.6365.9565.6365 1.5216v52.7172C86 89.6737 80.6002 95 74.0585 95h-48.117C19.3998 95 14 89.6737 14 83.1952v-66.391C14 10.3262 19.3998 5 25.9415 5zm-2.1736 4.3478H25.9415c-4.1268 0-7.5512 3.3914-7.5512 7.4563v66.391c0 4.0877 3.4466 7.457 7.5512 7.457h48.117c4.1268 0 7.5512-3.3693 7.5512-7.457V32.6087H68.8563c-5.334 0-9.6369-4.2393-9.6369-9.5217V9.348zM67.8124 76C69.0252 76 70 76.8996 70 78c0 1.0998-.9748 2-2.1657 2H32.1657C30.9747 80 30 79.0998 30 78c0-1.1004.9748-2 2.1657-2zM50 35c.6121 0 1.1807.264 1.5965.7037l12.8169 13.8331c.831.8794.7654 2.2652-.1099 3.1009-.4152.396-.9623.5939-1.4873.5939-.59 0-1.1592-.2424-1.5965-.7037l-9.0111-9.743v24.0159c0 1.2093-.9837 2.1992-2.1871 2.1992-1.2028 0-2.1872-.9899-2.1872-2.1992v-24.016l-9.011 9.7431c-.8311.8794-2.2086.9454-3.1274.1098-.8746-.8141-.9402-2.2215-.1092-3.1009l12.8168-13.8331C48.8187 35.264 49.3873 35 50 35zm13.6097-22.326v10.413c0 2.8694 2.349 5.1738 5.2466 5.1738h9.7464L63.6097 12.674z"
+            fill-rule="nonzero"
+          />
+        </svg>
+      </div>
+      <div
+        :class="{
+          'md:tw-flex md:tw-flex-col md:tw-ml-2': useLandscapeTile,
+        }"
+      >
+        <p
+          v-if="!isModal"
+          class="tw-font-bold tw-text-black tw-text-lg tw-mb-2"
+          :class="{ 'md:tw-text-sm md:tw-mb-0': smallLayout }"
+        >
+          Upload your logo
+        </p>
+
+        <p
+          class="tw-text-secondary-600 tw-text-sm"
+          :class="{
+            'tw-mb-0': !isDesignCom,
+            'tw-mb-3': isDesignCom,
+          }"
+        >
+          Drop your file here or
+          <span class="tw-text-info-500">click to upload</span>
+        </p>
+
+        <p
+          v-if="!smallLayout"
+          class="tw-text-sm"
+          :class="{
+            'tw-text-secondary-600': !isDesignCom,
+            'tw-text-secondary-400': isDesignCom,
+          }"
+        >
+          We accept PNG, JPG, SVG or EPS files up to 25MB
+        </p>
+      </div>
+    </div>
+  </dropzone>
+</template>
+
+<script>
+import Dropzone from 'dropzone-vue3';
+import Events, { TRIGGER_TYPE } from '../../constants/event-constants';
+import RegoSource from '../../constants/rego-source-constants';
+
+const ACCEPTED_MIME_TYPES = ['image/jpeg', 'image/png', 'image/svg+xml', 'application/postscript'];
+
+const ACCEPTED_FILE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'svg', 'eps'];
+const UNSUPPORTED_FILE_ERROR_MSG = "You can't upload files of this type.";
+
+export default {
+  components: {
+    Dropzone,
+  },
+  props: {
+    isUserAuthenticated: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    trackingData: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    shouldOpenUploadWhenMounted: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isModal: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    useLandscapeTile: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    smallLayout: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isDesignCom: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    assetType: {
+      type: Number,
+      default: null,
+    },
+    templateTypeFriendlyName: {
+      type: String,
+      default: null,
+    },
+  },
+  data() {
+    const self = this;
+
+    return {
+      options: {
+        url: '#',
+        autoProcessQueue: false,
+        maxFiles: 1,
+        uploadMultiple: false,
+        acceptedFiles: ACCEPTED_MIME_TYPES.join(','),
+        accept(file) {
+          const extension = file.name.split('.').pop();
+
+          if (ACCEPTED_FILE_EXTENSIONS.indexOf(extension) < 0) {
+            self.displayError(UNSUPPORTED_FILE_ERROR_MSG);
+            return;
+          }
+
+          const reader = new FileReader();
+          const dropzone = this;
+
+          reader.addEventListener('loadend', () => {
+            // eslint-disable-next-line no-param-reassign
+            file.status = 'success';
+            dropzone.emit('success', file);
+            dropzone.emit('complete', file);
+          });
+
+          reader.readAsText(file);
+        },
+        init() {
+          const dropzone = this;
+          dropzone.hiddenFileInput.addEventListener('click', (event) => {
+            if (!self.isUserAuthenticated) {
+              event.preventDefault();
+              self.showLoginModal();
+            }
+          });
+        },
+      },
+    };
+  },
+  mounted() {
+    if (window) {
+      if (this.shouldOpenUploadWhenMounted) {
+        if (this.$refs.dropzone && this.$refs.dropzone?.$refs.dropzoneElement) {
+          // eslint-disable-next-line no-unused-expressions
+          this.$refs?.dropzone?.$refs?.dropzoneElement.click();
+        }
+      }
+    }
+  },
+  methods: {
+    pushTrackingData() {
+      if (this.trackingData) {
+        window.dataLayer = window.dataLayer || [];
+        window.dataLayer.push(this.trackingData);
+      }
+    },
+    /**
+     * @function onUploadSuccess
+     * @param {file} File
+     * Fires the event to start the byo logo experience
+     */
+    onUploadSuccess(file) {
+      this.$refs.dropzone.removeAllFiles();
+      this.pushTrackingData();
+      if (!this.isUserAuthenticated) {
+        this.showLoginModal();
+        return;
+      }
+
+      this.$emit('on-upload-success', file);
+    },
+    showLoginModal() {
+      this.$refs.dropzone.removeAllFiles();
+
+      this.$emit('on-login-modal-open', RegoSource.UploadUserLogo);
+
+      window.dispatchEvent(
+        new CustomEvent(Events.ShowLoginModal, {
+          detail: {
+            isSave: true,
+            regoSource: RegoSource.UploadUserLogo,
+            emailCapturedCallback: this.handleEmailCapturedForLogoUpload,
+            shouldReloadPageOnSuccess: false,
+            assetType: this.assetType,
+            templateTypeName: this.templateTypeFriendlyName,
+            userTriggered: TRIGGER_TYPE.Automatic,
+          },
+        }),
+      );
+    },
+    handleEmailCapturedForLogoUpload() {
+      this.$emit('logo-dropzone-login-callback');
+    },
+    /**
+     * @function displayError
+     * @paramm {msg} String
+     * Displays a custom error message in the Dropzone error region
+     */
+    displayError(msg) {
+      if (this.$refs?.dropzone?.$refs?.dropzoneElement) {
+        const $errorContainer = this.$refs.dropzone.$refs.dropzoneElement.querySelector('.dz-error-message');
+        if ($errorContainer) {
+          $errorContainer.innerText = msg;
+        }
+      }
+    },
+  },
+};
+</script>
+<style>
+.c-upload-your-logo .dz-success-mark,
+.c-upload-your-logo .dz-error-mark,
+.c-upload-your-logo .dz-details {
+  display: none;
+}
+
+.c-upload-your-logo .dz-error-message {
+  color: #f21b3f;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+</style>

package/src/experiences/components/UploadYourLogoOnBoarding/LogoBusinessBrandColours.stories.js

@@ -0,0 +1,37 @@
+import LogoBusinessBrandColours from './LogoBusinessBrandColours.vue';
+
+export default {
+  title: 'Components/LogoBusinessBrandColours',
+  component: LogoBusinessBrandColours,
+};
+
+export const Sample = () => {
+  return {
+    components: {
+      LogoBusinessBrandColours,
+    },
+    data() {
+      return {
+        uploadedLogoData: {
+          templateUploadToken: '6bc3885c-7e5c-4c9e-9b54-21dcd06ca647',
+          logoImageUrl:
+            'https://images.unsplash.com/photo-1621745491698-86b18793ce6f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixlib=rb-1.2.1&q=80&w=300',
+          logoImageDetails: {
+            businessText: 'LOGO TEXT HERE',
+            sloganText: 'Slogan Text Here',
+            textColors: ['#EF4444', '#F59E0B', '#10B981', '#991B1B', '#8B5CF6', '#F472B6'],
+            backgroundColors: ['#041444'],
+          },
+        },
+      };
+    },
+    template: `
+      <div>
+        <LogoBusinessBrandColours
+          :logo-data="uploadedLogoData"
+          cropped-logo-image="https://source.unsplash.com/random/300x300"
+        />
+      </div>
+    `,
+  };
+};