@designcrowd/fe-shared-lib 1.5.7-eng-3522-1 → 1.5.7

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

@@ -1,205 +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);
-      },
-    },
-  };
-};
+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

@@ -1,133 +1,133 @@
-<template>
-  <div>
-    <UploadYourLogoOnBoarding
-      v-if="active"
-      :logo-file="logoData.logoFile"
-      :custom-upload-data="customUploadData"
-      :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,
-    },
-    customUploadData: {
-      type: Object,
-      required: false,
-      default: null,
-    },
-  },
-  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>
+<template>
+  <div>
+    <UploadYourLogoOnBoarding
+      v-if="active"
+      :logo-file="logoData.logoFile"
+      :custom-upload-data="customUploadData"
+      :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,
+    },
+    customUploadData: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+  },
+  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>