@designcrowd/fe-shared-lib 1.5.35 → 1.5.36

package/src/experiences/components/UploadYourLogoOnBoarding/LogoUploadError.vue

@@ -1,75 +1,75 @@
-<template>
-  <div class="tw-w-full">
-    <div class="tw-px-8 tw-pb-8">
-      <h2 class="tw-mb-8 tw-text-4xl tw-font-bold">{{ uploadYourLogoTr('uploadError') }}</h2>
-      <p class="tw-mt-0 tw-text-grayscale-600 tw-text-base tw-text-center">
-        {{ errorMessage }}
-      </p>
-    </div>
-
-    <div
-      class="tw-flex tw-w-full tw-items-center tw-justify-center tw-border-0 tw-border-t tw-border-black/10 tw-border-solid tw-py-4 tw-px-8"
-    >
-      <Button
-        :label="uploadYourLogoTr('cancel')"
-        size="large"
-        variant="outline"
-        container-classes="tw-mx-2"
-        data-test-cancel-btn
-        @on-click="cancel"
-      />
-
-      <input
-        ref="fileInput"
-        class="tw-sr-only"
-        type="file"
-        accept=".jpg,.jpeg,.png,.svg,.eps"
-        @change="onFileInputChange"
-      />
-
-      <Button
-        :label="uploadYourLogoTr('uploadYourLogoText')"
-        size="large"
-        variant="primary-with-icon"
-        icon="chevron-right-wide"
-        container-classes="tw-mx-2"
-        @on-click="openFileSelector"
-      />
-    </div>
-  </div>
-</template>
-<script>
-import Button from '../../../atoms/components/Button/Button.vue';
-import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
-
-export default {
-  components: {
-    Button,
-  },
-  props: {
-    errorMessage: {
-      type: String,
-      required: false,
-      default: null,
-    },
-  },
-  setup() {
-    return {
-      uploadYourLogoTr,
-    };
-  },
-  methods: {
-    cancel() {
-      this.$emit('on-cancel');
-    },
-    openFileSelector() {
-      this.$refs.fileInput.click();
-    },
-    onFileInputChange(e) {
-      if (e.target.files.length) {
-        this.$emit('on-logo-file-change', e.target.files[0]);
-      }
-    },
-  },
-};
-</script>
+<template>
+  <div class="tw-w-full">
+    <div class="tw-px-8 tw-pb-8">
+      <h2 class="tw-mb-8 tw-text-4xl tw-font-bold">{{ uploadYourLogoTr('uploadError') }}</h2>
+      <p class="tw-mt-0 tw-text-grayscale-600 tw-text-base tw-text-center">
+        {{ errorMessage }}
+      </p>
+    </div>
+
+    <div
+      class="tw-flex tw-w-full tw-items-center tw-justify-center tw-border-0 tw-border-t tw-border-black/10 tw-border-solid tw-py-4 tw-px-8"
+    >
+      <Button
+        :label="uploadYourLogoTr('cancel')"
+        size="large"
+        variant="outline"
+        container-classes="tw-mx-2"
+        data-test-cancel-btn
+        @on-click="cancel"
+      />
+
+      <input
+        ref="fileInput"
+        class="tw-sr-only"
+        type="file"
+        accept=".jpg,.jpeg,.png,.svg,.eps"
+        @change="onFileInputChange"
+      />
+
+      <Button
+        :label="uploadYourLogoTr('uploadYourLogoText')"
+        size="large"
+        variant="primary-with-icon"
+        icon="chevron-right-wide"
+        container-classes="tw-mx-2"
+        @on-click="openFileSelector"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import Button from '../../../atoms/components/Button/Button.vue';
+import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
+
+export default {
+  components: {
+    Button,
+  },
+  props: {
+    errorMessage: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  setup() {
+    return {
+      uploadYourLogoTr,
+    };
+  },
+  methods: {
+    cancel() {
+      this.$emit('on-cancel');
+    },
+    openFileSelector() {
+      this.$refs.fileInput.click();
+    },
+    onFileInputChange(e) {
+      if (e.target.files.length) {
+        this.$emit('on-logo-file-change', e.target.files[0]);
+      }
+    },
+  },
+};
+</script>

package/src/experiences/components/UploadYourLogoOnBoarding/LogoUploadExitConfirmation.vue

@@ -1,55 +1,55 @@
-<template>
-  <div class="tw-w-full">
-    <div class="tw-px-8 tw-pb-8">
-      <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">{{ uploadYourLogoTr('exitConfirmationTitle') }}</h2>
-      <p class="tw-mt-0 tw-text-grayscale-600 tw-text-base tw-text-center">
-        {{ uploadYourLogoTr('exitConfirmationDescription') }}
-      </p>
-    </div>
-
-    <div
-      class="tw-flex tw-w-full tw-items-center tw-justify-center tw-border-0 tw-border-t tw-border-black/10 tw-border-solid tw-py-4 tw-px-8"
-    >
-      <Button
-        :label="uploadYourLogoTr('no')"
-        size="large"
-        variant="outline"
-        container-classes="tw-mx-2"
-        data-test-cancel-no-btn
-        @on-click="goBack"
-      />
-      <Button
-        :label="uploadYourLogoTr('yes')"
-        size="large"
-        variant="primary-with-icon"
-        icon="chevron-right-wide"
-        container-classes="tw-mx-2"
-        data-test-cancel-yes-btn
-        @on-click="confirm"
-      />
-    </div>
-  </div>
-</template>
-<script>
-import Button from '../../../atoms/components/Button/Button.vue';
-import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
-
-export default {
-  components: {
-    Button,
-  },
-  setup() {
-    return {
-      uploadYourLogoTr,
-    };
-  },
-  methods: {
-    goBack() {
-      this.$emit('on-go-back');
-    },
-    confirm() {
-      this.$emit('on-confirm');
-    },
-  },
-};
-</script>
+<template>
+  <div class="tw-w-full">
+    <div class="tw-px-8 tw-pb-8">
+      <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">{{ uploadYourLogoTr('exitConfirmationTitle') }}</h2>
+      <p class="tw-mt-0 tw-text-grayscale-600 tw-text-base tw-text-center">
+        {{ uploadYourLogoTr('exitConfirmationDescription') }}
+      </p>
+    </div>
+
+    <div
+      class="tw-flex tw-w-full tw-items-center tw-justify-center tw-border-0 tw-border-t tw-border-black/10 tw-border-solid tw-py-4 tw-px-8"
+    >
+      <Button
+        :label="uploadYourLogoTr('no')"
+        size="large"
+        variant="outline"
+        container-classes="tw-mx-2"
+        data-test-cancel-no-btn
+        @on-click="goBack"
+      />
+      <Button
+        :label="uploadYourLogoTr('yes')"
+        size="large"
+        variant="primary-with-icon"
+        icon="chevron-right-wide"
+        container-classes="tw-mx-2"
+        data-test-cancel-yes-btn
+        @on-click="confirm"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import Button from '../../../atoms/components/Button/Button.vue';
+import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
+
+export default {
+  components: {
+    Button,
+  },
+  setup() {
+    return {
+      uploadYourLogoTr,
+    };
+  },
+  methods: {
+    goBack() {
+      this.$emit('on-go-back');
+    },
+    confirm() {
+      this.$emit('on-confirm');
+    },
+  },
+};
+</script>

package/src/experiences/components/UploadYourLogoOnBoarding/LogoUploadModal.vue

@@ -1,38 +1,38 @@
-<template>
-  <div
-    class="tw-relative tw-h-full lg:tw-h-auto tw-bg-grayscale-200 lg:tw-rounded tw-shadow-md tw-w-full lg:tw-max-w-xl tw-flex-col tw-pt-12"
-  >
-    <button
-      v-if="showCancelButton"
-      class="tw-absolute tw-top-0 tw-right-0 tw-pt-6 tw-pr-6 tw-cursor-pointer tw-border-none tw-bg-transparent"
-      data-test-cancel-btn
-      @click="cancel"
-    >
-      <Icon name="close" size="sm" />
-    </button>
-    <div class="tw-flex tw-items-center tw-justify-center tw-flex-col tw-text-center tw-h-full lg:tw-h-auto">
-      <slot name="content" />
-    </div>
-  </div>
-</template>
-<script>
-import Icon from '../../../atoms/components/Icon/Icon.vue';
-
-export default {
-  components: {
-    Icon,
-  },
-  props: {
-    showCancelButton: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-  },
-  methods: {
-    cancel() {
-      this.$emit('on-cancel');
-    },
-  },
-};
-</script>
+<template>
+  <div
+    class="tw-relative tw-h-full lg:tw-h-auto tw-bg-grayscale-200 lg:tw-rounded tw-shadow-md tw-w-full lg:tw-max-w-xl tw-flex-col tw-pt-12"
+  >
+    <button
+      v-if="showCancelButton"
+      class="tw-absolute tw-top-0 tw-right-0 tw-pt-6 tw-pr-6 tw-cursor-pointer tw-border-none tw-bg-transparent"
+      data-test-cancel-btn
+      @click="cancel"
+    >
+      <Icon name="close" size="sm" />
+    </button>
+    <div class="tw-flex tw-items-center tw-justify-center tw-flex-col tw-text-center tw-h-full lg:tw-h-auto">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+<script>
+import Icon from '../../../atoms/components/Icon/Icon.vue';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    showCancelButton: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  methods: {
+    cancel() {
+      this.$emit('on-cancel');
+    },
+  },
+};
+</script>

package/src/experiences/components/UploadYourLogoOnBoarding/LogoUploader.vue

@@ -1,109 +1,109 @@
-<template>
-  <LogoUploadingLoader
-    :loading-text="uploadYourLogoTr('uploadingAndConverting')"
-    :is-ai-powered="isAiPowered"
-  />
-</template>
-<script>
-import brandCrowdClient from '../../clients/brand-crowd-api.client';
-import LogoUploadingLoader from './LogoUploadingLoader.vue';
-
-import trackEvent from '../../helpers/tracking';
-import hexDiff from '../../helpers/hex-diff';
-import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
-
-export default {
-  components: {
-    LogoUploadingLoader,
-  },
-  props: {
-    logoFile: {
-      type: Object,
-      required: true,
-      default: undefined,
-    },
-    customUploadData: {
-      type: Object,
-      required: false,
-      default: null,
-    },
-    eventCategory: {
-      type: String,
-      required: true,
-    },
-    isAiPowered: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup() {
-    return {
-      uploadYourLogoTr,
-    };
-  },
-  data() {
-    return {
-      isRunning: false,
-    };
-  },
-  mounted() {
-    this.uploadLogo();
-  },
-  methods: {
-    async uploadLogo() {
-      if (this.isRunning) return;
-      this.isRunning = true;
-
-      let duration = 0;
-
-      const start = Date.now();
-
-      const intervalTimer = setInterval(() => {
-        duration = Date.now() - start;
-      }, 1);
-
-      const result = await brandCrowdClient.uploadLogoAndGetDetails(this.logoFile, this.customUploadData);
-
-      clearInterval(intervalTimer);
-      this.isRunning = false;
-
-      if (result.error) {
-        this.$emit('on-upload-error', result.error);
-        return;
-      }
-
-      if (result.success) {
-        this.$emit('on-upload-success', result.response);
-      } else {
-        this.$emit('on-upload-error', result.response);
-      }
-
-      const diff = hexDiff(
-        result.response.data.logoImageDetails.textColors[0],
-        result.response.data.logoImageDetails.backgroundColors[0],
-      );
-
-      trackEvent({
-        eventCategory: this.eventCategory,
-        eventAction: 'timeTakenToUpload',
-        eventLabel: `${duration}`,
-        event: 'byoLogoUpload',
-      });
-
-      trackEvent({
-        eventCategory: this.eventCategory,
-        eventAction: 'logoSize',
-        eventLabel: `${this.logoFile.file.size}`,
-        event: 'byoLogoUpload',
-      });
-
-      trackEvent({
-        eventCategory: this.eventCategory,
-        eventAction: 'colorDifference',
-        eventLabel: `${diff}`,
-        event: 'byoLogoUpload',
-      });
-    },
-  },
-};
-</script>
+<template>
+  <LogoUploadingLoader
+    :loading-text="uploadYourLogoTr('uploadingAndConverting')"
+    :is-ai-powered="isAiPowered"
+  />
+</template>
+<script>
+import brandCrowdClient from '../../clients/brand-crowd-api.client';
+import LogoUploadingLoader from './LogoUploadingLoader.vue';
+
+import trackEvent from '../../helpers/tracking';
+import hexDiff from '../../helpers/hex-diff';
+import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
+
+export default {
+  components: {
+    LogoUploadingLoader,
+  },
+  props: {
+    logoFile: {
+      type: Object,
+      required: true,
+      default: undefined,
+    },
+    customUploadData: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    eventCategory: {
+      type: String,
+      required: true,
+    },
+    isAiPowered: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup() {
+    return {
+      uploadYourLogoTr,
+    };
+  },
+  data() {
+    return {
+      isRunning: false,
+    };
+  },
+  mounted() {
+    this.uploadLogo();
+  },
+  methods: {
+    async uploadLogo() {
+      if (this.isRunning) return;
+      this.isRunning = true;
+
+      let duration = 0;
+
+      const start = Date.now();
+
+      const intervalTimer = setInterval(() => {
+        duration = Date.now() - start;
+      }, 1);
+
+      const result = await brandCrowdClient.uploadLogoAndGetDetails(this.logoFile, this.customUploadData);
+
+      clearInterval(intervalTimer);
+      this.isRunning = false;
+
+      if (result.error) {
+        this.$emit('on-upload-error', result.error);
+        return;
+      }
+
+      if (result.success) {
+        this.$emit('on-upload-success', result.response);
+      } else {
+        this.$emit('on-upload-error', result.response);
+      }
+
+      const diff = hexDiff(
+        result.response.data.logoImageDetails.textColors[0],
+        result.response.data.logoImageDetails.backgroundColors[0],
+      );
+
+      trackEvent({
+        eventCategory: this.eventCategory,
+        eventAction: 'timeTakenToUpload',
+        eventLabel: `${duration}`,
+        event: 'byoLogoUpload',
+      });
+
+      trackEvent({
+        eventCategory: this.eventCategory,
+        eventAction: 'logoSize',
+        eventLabel: `${this.logoFile.file.size}`,
+        event: 'byoLogoUpload',
+      });
+
+      trackEvent({
+        eventCategory: this.eventCategory,
+        eventAction: 'colorDifference',
+        eventLabel: `${diff}`,
+        event: 'byoLogoUpload',
+      });
+    },
+  },
+};
+</script>

package/src/experiences/components/UploadYourLogoOnBoarding/LogoUploadingLoader.vue

@@ -1,39 +1,39 @@
-<template>
-  <div class="tw-pt-12 tw-pb-16 tw-flex tw-flex-col tw-items-center tw-justify-center">
-    <!-- AI-powered sparkle animation -->
-    <div v-if="isAiPowered" class="tw-mb-8">
-      <AiPoweredLoader alt="AI-powered loading" />
-    </div>
-
-    <!-- Traditional GIF loader -->
-    <img
-      v-else
-      src="https://dcstatic.com/images/brandcrowd/on-boarding/loading/preloader-1-d1cc0b885f.gif"
-      alt="Loading"
-      class="tw-block tw-mb-8"
-    />
-
-    <p class="tw-text-black tw-text-2xl tw-font-bold tw-text-center">
-      {{ loadingText }}
-    </p>
-  </div>
-</template>
-<script>
-import AiPoweredLoader from '../../../atoms/components/AiPoweredLoader/AiPoweredLoader.vue';
-
-export default {
-  components: {
-    AiPoweredLoader,
-  },
-  props: {
-    loadingText: {
-      type: String,
-      required: true,
-    },
-    isAiPowered: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>
+<template>
+  <div class="tw-pt-12 tw-pb-16 tw-flex tw-flex-col tw-items-center tw-justify-center">
+    <!-- AI-powered sparkle animation -->
+    <div v-if="isAiPowered" class="tw-mb-8">
+      <AiPoweredLoader alt="AI-powered loading" />
+    </div>
+
+    <!-- Traditional GIF loader -->
+    <img
+      v-else
+      src="https://dcstatic.com/images/brandcrowd/on-boarding/loading/preloader-1-d1cc0b885f.gif"
+      alt="Loading"
+      class="tw-block tw-mb-8"
+    />
+
+    <p class="tw-text-black tw-text-2xl tw-font-bold tw-text-center">
+      {{ loadingText }}
+    </p>
+  </div>
+</template>
+<script>
+import AiPoweredLoader from '../../../atoms/components/AiPoweredLoader/AiPoweredLoader.vue';
+
+export default {
+  components: {
+    AiPoweredLoader,
+  },
+  props: {
+    loadingText: {
+      type: String,
+      required: true,
+    },
+    isAiPowered: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>