@designcrowd/fe-shared-lib 1.6.0-eng-4039 → 1.6.1

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

@@ -1,302 +1,311 @@
-<template>
-  <div
-    class="tw-fixed tw-w-full tw-h-full tw-z-50 tw-top-0 tw-left-0 tw-bg-black tw-bg-opacity-80 lg:tw-flex tw-items-start tw-justify-center lg:tw-pt-20"
-  >
-    <LogoUploadModal
-      :show-cancel-button="(currentStep === 0 || currentStep > 1 || hasError) && !isAttemptingToExit"
-      :class="{ 'tw-p-6': currentStep === 0 }"
-      @on-cancel="onCancel"
-    >
-      <template #content>
-        <div v-if="currentStep === 0 && !isAttemptingToExit" class="tw-w-full">
-          <p class="tw-text-grayscale-600 tw-font-bold tw-text-xs tw-mb-2 tw-uppercase">
-            {{ currentStepProgressLabel }}
-          </p>
-          <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">{{ uploadYourLogoTr('uploadYourLogoText') }}</h2>
-          <p class="tw-mt-0 tw-pb-8">{{ uploadYourLogoTr('disclaimerText') }}</p>
-          <UploadYourLogoDropzone :is-modal="true" @on-upload-success="onLogoFileChange"> </UploadYourLogoDropzone>
-        </div>
-
-        <LogoUploader
-          v-if="logoFile && !isAttemptingToExit && !hasError && currentStep === 1"
-          :logo-file="logoFile"
-          :custom-upload-data="customUploadData"
-          :event-category="eventCategory"
-          @on-upload-success="onUploadSuccess"
-          @on-upload-error="onUploadError"
-        />
-
-        <LogoCropper
-          v-if="!isAttemptingToExit && currentStep === 2 && uploadedLogoData && canCropImage"
-          :logo-data="uploadedLogoData"
-          :progress-label="currentStepProgressLabel"
-          :event-category="eventCategory"
-          @on-cancel="onCancel"
-          @on-image-cropped="onImageCropped"
-        />
-
-        <LogoPreview
-          v-if="!isAttemptingToExit && currentStep === 2 && uploadedLogoData && !canCropImage"
-          :logo-data="uploadedLogoData"
-          :progress-label="currentStepProgressLabel"
-          :event-category="eventCategory"
-          @on-cancel="onCancel"
-          @on-continue="onImageCropped"
-        />
-
-        <LogoBusinessText
-          v-if="!isAttemptingToExit && currentStep === 3 && uploadedLogoData"
-          :logo-data="uploadedLogoData"
-          :saved-business-text="savedBusinessText"
-          :progress-label="currentStepProgressLabel"
-          :event-category="eventCategory"
-          @on-go-back="onGoBackToCropper"
-          @on-save="onSaveBusinessText"
-        />
-
-        <LogoBusinessBrandColours
-          v-if="!isAttemptingToExit && currentStep === 4 && uploadedLogoData && !isCurrentlySaving"
-          :logo-data="uploadedLogoData"
-          :cropped-logo-image="croppedImageBoxDataUrl"
-          :total-num-steps="totalNumSteps"
-          :event-category="eventCategory"
-          @on-go-back="onGoBackToBusinessText"
-          @on-save="onBrandColoursSave"
-        />
-
-        <LogoUploadError
-          v-if="hasError && !isAttemptingToExit"
-          :error-message="errorMessage"
-          @on-cancel="onCancel"
-          @on-logo-file-change="onLogoFileChange"
-        />
-
-        <LogoUploadingLoader v-if="isCurrentlySaving" :loading-text="uploadYourLogoTr('generatingDesigns')" />
-
-        <LogoUploadExitConfirmation
-          v-if="isAttemptingToExit && currentStep > 1"
-          @on-confirm="onExitConfirm"
-          @on-go-back="onAbortExitConfirmation"
-        />
-      </template>
-    </LogoUploadModal>
-  </div>
-</template>
-<script>
-import brandCrowdClient from '../../clients/brand-crowd-api.client';
-import Errors from '../../constants/error-constants';
-import trackEvent from '../../helpers/tracking';
-import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
-
-import LogoUploadModal from './LogoUploadModal.vue';
-import UploadYourLogoDropzone from '../UploadYourLogoDropzone/UploadYourLogoDropzone.vue';
-import LogoUploader from './LogoUploader.vue';
-import LogoUploadError from './LogoUploadError.vue';
-import LogoUploadExitConfirmation from './LogoUploadExitConfirmation.vue';
-import LogoCropper from './LogoCropper.vue';
-import LogoPreview from './LogoPreview.vue';
-import LogoBusinessText from './LogoBusinessText.vue';
-import LogoBusinessBrandColours from './LogoBusinessBrandColours.vue';
-import LogoUploadingLoader from './LogoUploadingLoader.vue';
-
-export default {
-  components: {
-    LogoUploadModal,
-    UploadYourLogoDropzone,
-    LogoUploader,
-    LogoUploadError,
-    LogoUploadExitConfirmation,
-    LogoCropper,
-    LogoPreview,
-    LogoBusinessText,
-    LogoBusinessBrandColours,
-    LogoUploadingLoader,
-  },
-  props: {
-    logoFile: {
-      type: Object,
-      required: false,
-      default: undefined,
-    },
-    useDropzone: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isPostPurchaseUserUpload: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    customUploadData: {
-      type: Object,
-      required: false,
-      default: undefined,
-    },
-  },
-  setup() {
-    return {
-      uploadYourLogoTr,
-    };
-  },
-  data() {
-    return {
-      currentStep: this.useDropzone ? 0 : 1,
-      includeDropzoneInModal: this.useDropzone,
-      totalNumSteps: this.useDropzone ? 5 : 4,
-      errorMessage: null,
-      isAttemptingToExit: false,
-      uploadedLogoData: null,
-      croppedImageBoxBounds: null,
-      savedBusinessText: null,
-      brandColourData: null,
-      isCurrentlySaving: false,
-    };
-  },
-  computed: {
-    currentStepProgressLabel() {
-      if (this.includeDropzoneInModal) {
-        const currentStepDisplay = this.currentStep === 0 ? 1 : this.currentStep;
-        return this.uploadYourLogoTr('stepOf', { CURRENT: currentStepDisplay, TOTAL: 5 });
-      }
-      return this.uploadYourLogoTr('stepOf', { CURRENT: this.currentStep - 1, TOTAL: 4 });
-    },
-    hasError() {
-      return !!this.errorMessage;
-    },
-    canCropImage() {
-      return !this.uploadedLogoData.logoImageUrl.split('.').pop().startsWith('svg');
-    },
-    currentStepTrackingLabel() {
-      const stepTwoLabel = this.currentStep === 2 && !this.canCropImage ? 'previewLogo' : 'cropLogo';
-
-      const steps = ['logoUploader', stepTwoLabel, 'businessName', 'brandColors'];
-
-      return steps[this.currentStep - 1];
-    },
-    eventCategory() {
-      if (this.isPostPurchaseUserUpload) {
-        return 'BYO-PostPurchase';
-      }
-      return 'BYO-PrePurchase';
-    },
-  },
-  watch: {
-    logoFile: {
-      immediate: true,
-      handler() {
-        if (this.logoFile) {
-          this.errorMessage =
-            this.logoFile.file.size > Errors.MAX_BYO_FILE_SIZE ? uploadYourLogoTr('maxByoFileErrorMessage') : null;
-        }
-      },
-    },
-  },
-  methods: {
-    onUploadSuccess(res) {
-      this.$emit('on-logo-upload-success');
-      this.uploadedLogoData = res.data;
-      this.currentStep = 2;
-    },
-    onUploadError(err) {
-      this.$emit('on-logo-upload-error');
-      if (typeof err.response?.data?.errorMessage === 'string' && err.response?.data?.errorMessage !== '') {
-        this.errorMessage = err.response.data.errorMessage;
-      } else {
-        this.errorMessage = uploadYourLogoTr('genericByoErrorMessage');
-      }
-      this.currentStep = null;
-    },
-    onImageCropped(payload) {
-      this.$emit('on-image-cropped', { isCropped: payload.isCropped });
-      const { bounds, dataUrl } = payload;
-      this.croppedImageBoxBounds = bounds;
-      this.croppedImageBoxDataUrl = dataUrl;
-      this.currentStep = 3;
-    },
-    onCancel() {
-      this.isAttemptingToExit = true;
-
-      if (this.currentStep === 0 || this.hasError) {
-        this.onExitConfirm();
-      }
-
-      trackEvent({
-        eventCategory: this.eventCategory,
-        eventAction: this.currentStepTrackingLabel,
-        eventLabel: 'Clicked_Cancel',
-        event: 'click',
-      });
-    },
-    onLogoFileChange(logoFile) {
-      this.$emit('on-file-change', logoFile);
-      this.reset();
-    },
-    onExitConfirm() {
-      const { currentStepTrackingLabel } = this;
-      this.reset();
-      this.$emit('on-exit', { currentStepTrackingLabel });
-    },
-    onAbortExitConfirmation() {
-      this.isAttemptingToExit = false;
-    },
-    onGoBackToCropper() {
-      this.$emit('on-back', { currentStepTrackingLabel: this.currentStepTrackingLabel });
-      this.currentStep = 2;
-    },
-    onGoBackToBusinessText() {
-      this.$emit('on-back', { currentStepTrackingLabel: this.currentStepTrackingLabel });
-      this.currentStep = 3;
-    },
-    onSaveBusinessText(payload) {
-      this.$emit('on-save-business-text', { businessText: payload.businessText });
-      this.savedBusinessText = payload;
-      this.currentStep = 4;
-    },
-    onBrandColoursSave(payload) {
-      this.$emit('on-brand-colors-save', {
-        textColorUserSelected: payload.textColorUserSelected,
-        backgroundColorUserSelected: payload.backgroundColorUserSelected,
-      });
-      this.brandColourData = payload;
-      this.save();
-    },
-    async save() {
-      if (this.isCurrentlySaving) return;
-
-      this.isCurrentlySaving = true;
-
-      const payload = {
-        templateUploadToken: this.uploadedLogoData.templateUploadToken,
-        businessText: this.savedBusinessText.businessText,
-        businessSlogin: this.savedBusinessText.sloganText,
-        textColor: this.brandColourData.textColor,
-        backgroundColor: this.brandColourData.backgroundColor,
-        cropBoundingBox: JSON.parse(JSON.stringify(this.croppedImageBoxBounds)),
-        isPostPurchaseUserUpload: this.isPostPurchaseUserUpload,
-      };
-
-      const result = await brandCrowdClient.createUserLogo(payload);
-
-      this.isCurrentlySaving = false;
-
-      if (result.error) {
-        this.onUploadError(result.error);
-        return;
-      }
-
-      this.$emit('on-finish', result.response);
-    },
-    reset() {
-      this.currentStep = 1;
-      this.errorMessage = null;
-      this.isAttemptingToExit = false;
-      this.isCurrentlySaving = false;
-      this.uploadedLogoData = null;
-      this.croppedImageBoxBounds = null;
-      this.savedBusinessText = null;
-      this.brandColourData = null;
-    },
-  },
-};
-</script>
+<template>
+  <div
+    class="tw-fixed tw-w-full tw-h-full tw-z-50 tw-top-0 tw-left-0 tw-bg-black tw-bg-opacity-80 lg:tw-flex tw-items-start tw-justify-center lg:tw-pt-20"
+  >
+    <LogoUploadModal
+      :show-cancel-button="(currentStep === 0 || currentStep > 1 || hasError) && !isAttemptingToExit"
+      :class="{ 'tw-p-6': currentStep === 0 }"
+      @on-cancel="onCancel"
+    >
+      <template #content>
+        <div v-if="currentStep === 0 && !isAttemptingToExit" class="tw-w-full">
+          <p class="tw-text-grayscale-600 tw-font-bold tw-text-xs tw-mb-2 tw-uppercase">
+            {{ currentStepProgressLabel }}
+          </p>
+          <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">{{ uploadYourLogoTr('uploadYourLogoText') }}</h2>
+          <p class="tw-mt-0 tw-pb-8">{{ uploadYourLogoTr('disclaimerText') }}</p>
+          <UploadYourLogoDropzone :is-modal="true" @on-upload-success="onLogoFileChange"> </UploadYourLogoDropzone>
+        </div>
+
+        <LogoUploader
+          v-if="logoFile && !isAttemptingToExit && !hasError && currentStep === 1"
+          :logo-file="logoFile"
+          :custom-upload-data="customUploadData"
+          :event-category="eventCategory"
+          :is-ai-powered="isAiPowered"
+          @on-upload-success="onUploadSuccess"
+          @on-upload-error="onUploadError"
+        />
+
+        <LogoCropper
+          v-if="!isAttemptingToExit && currentStep === 2 && uploadedLogoData && canCropImage"
+          :logo-data="uploadedLogoData"
+          :progress-label="currentStepProgressLabel"
+          :event-category="eventCategory"
+          @on-cancel="onCancel"
+          @on-image-cropped="onImageCropped"
+        />
+
+        <LogoPreview
+          v-if="!isAttemptingToExit && currentStep === 2 && uploadedLogoData && !canCropImage"
+          :logo-data="uploadedLogoData"
+          :progress-label="currentStepProgressLabel"
+          :event-category="eventCategory"
+          @on-cancel="onCancel"
+          @on-continue="onImageCropped"
+        />
+
+        <LogoBusinessText
+          v-if="!isAttemptingToExit && currentStep === 3 && uploadedLogoData"
+          :logo-data="uploadedLogoData"
+          :saved-business-text="savedBusinessText"
+          :progress-label="currentStepProgressLabel"
+          :event-category="eventCategory"
+          @on-go-back="onGoBackToCropper"
+          @on-save="onSaveBusinessText"
+        />
+
+        <LogoBusinessBrandColours
+          v-if="!isAttemptingToExit && currentStep === 4 && uploadedLogoData && !isCurrentlySaving"
+          :logo-data="uploadedLogoData"
+          :cropped-logo-image="croppedImageBoxDataUrl"
+          :total-num-steps="totalNumSteps"
+          :event-category="eventCategory"
+          @on-go-back="onGoBackToBusinessText"
+          @on-save="onBrandColoursSave"
+        />
+
+        <LogoUploadError
+          v-if="hasError && !isAttemptingToExit"
+          :error-message="errorMessage"
+          @on-cancel="onCancel"
+          @on-logo-file-change="onLogoFileChange"
+        />
+
+        <LogoUploadingLoader
+          v-if="isCurrentlySaving"
+          :loading-text="uploadYourLogoTr('generatingDesigns')"
+          :is-ai-powered="isAiPowered"
+        />
+
+        <LogoUploadExitConfirmation
+          v-if="isAttemptingToExit && currentStep > 1"
+          @on-confirm="onExitConfirm"
+          @on-go-back="onAbortExitConfirmation"
+        />
+      </template>
+    </LogoUploadModal>
+  </div>
+</template>
+<script>
+import brandCrowdClient from '../../clients/brand-crowd-api.client';
+import Errors from '../../constants/error-constants';
+import trackEvent from '../../helpers/tracking';
+import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
+
+import LogoUploadModal from './LogoUploadModal.vue';
+import UploadYourLogoDropzone from '../UploadYourLogoDropzone/UploadYourLogoDropzone.vue';
+import LogoUploader from './LogoUploader.vue';
+import LogoUploadError from './LogoUploadError.vue';
+import LogoUploadExitConfirmation from './LogoUploadExitConfirmation.vue';
+import LogoCropper from './LogoCropper.vue';
+import LogoPreview from './LogoPreview.vue';
+import LogoBusinessText from './LogoBusinessText.vue';
+import LogoBusinessBrandColours from './LogoBusinessBrandColours.vue';
+import LogoUploadingLoader from './LogoUploadingLoader.vue';
+
+export default {
+  components: {
+    LogoUploadModal,
+    UploadYourLogoDropzone,
+    LogoUploader,
+    LogoUploadError,
+    LogoUploadExitConfirmation,
+    LogoCropper,
+    LogoPreview,
+    LogoBusinessText,
+    LogoBusinessBrandColours,
+    LogoUploadingLoader,
+  },
+  props: {
+    logoFile: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    useDropzone: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isPostPurchaseUserUpload: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    customUploadData: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    isAiPowered: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup() {
+    return {
+      uploadYourLogoTr,
+    };
+  },
+  data() {
+    return {
+      currentStep: this.useDropzone ? 0 : 1,
+      includeDropzoneInModal: this.useDropzone,
+      totalNumSteps: this.useDropzone ? 5 : 4,
+      errorMessage: null,
+      isAttemptingToExit: false,
+      uploadedLogoData: null,
+      croppedImageBoxBounds: null,
+      savedBusinessText: null,
+      brandColourData: null,
+      isCurrentlySaving: false,
+    };
+  },
+  computed: {
+    currentStepProgressLabel() {
+      if (this.includeDropzoneInModal) {
+        const currentStepDisplay = this.currentStep === 0 ? 1 : this.currentStep;
+        return this.uploadYourLogoTr('stepOf', { CURRENT: currentStepDisplay, TOTAL: 5 });
+      }
+      return this.uploadYourLogoTr('stepOf', { CURRENT: this.currentStep - 1, TOTAL: 4 });
+    },
+    hasError() {
+      return !!this.errorMessage;
+    },
+    canCropImage() {
+      return !this.uploadedLogoData.logoImageUrl.split('.').pop().startsWith('svg');
+    },
+    currentStepTrackingLabel() {
+      const stepTwoLabel = this.currentStep === 2 && !this.canCropImage ? 'previewLogo' : 'cropLogo';
+
+      const steps = ['logoUploader', stepTwoLabel, 'businessName', 'brandColors'];
+
+      return steps[this.currentStep - 1];
+    },
+    eventCategory() {
+      if (this.isPostPurchaseUserUpload) {
+        return 'BYO-PostPurchase';
+      }
+      return 'BYO-PrePurchase';
+    },
+  },
+  watch: {
+    logoFile: {
+      immediate: true,
+      handler() {
+        if (this.logoFile) {
+          this.errorMessage =
+            this.logoFile.file.size > Errors.MAX_BYO_FILE_SIZE ? uploadYourLogoTr('maxByoFileErrorMessage') : null;
+        }
+      },
+    },
+  },
+  methods: {
+    onUploadSuccess(res) {
+      this.$emit('on-logo-upload-success');
+      this.uploadedLogoData = res.data;
+      this.currentStep = 2;
+    },
+    onUploadError(err) {
+      this.$emit('on-logo-upload-error');
+      if (typeof err.response?.data?.errorMessage === 'string' && err.response?.data?.errorMessage !== '') {
+        this.errorMessage = err.response.data.errorMessage;
+      } else {
+        this.errorMessage = uploadYourLogoTr('genericByoErrorMessage');
+      }
+      this.currentStep = null;
+    },
+    onImageCropped(payload) {
+      this.$emit('on-image-cropped', { isCropped: payload.isCropped });
+      const { bounds, dataUrl } = payload;
+      this.croppedImageBoxBounds = bounds;
+      this.croppedImageBoxDataUrl = dataUrl;
+      this.currentStep = 3;
+    },
+    onCancel() {
+      this.isAttemptingToExit = true;
+
+      if (this.currentStep === 0 || this.hasError) {
+        this.onExitConfirm();
+      }
+
+      trackEvent({
+        eventCategory: this.eventCategory,
+        eventAction: this.currentStepTrackingLabel,
+        eventLabel: 'Clicked_Cancel',
+        event: 'click',
+      });
+    },
+    onLogoFileChange(logoFile) {
+      this.$emit('on-file-change', logoFile);
+      this.reset();
+    },
+    onExitConfirm() {
+      const { currentStepTrackingLabel } = this;
+      this.reset();
+      this.$emit('on-exit', { currentStepTrackingLabel });
+    },
+    onAbortExitConfirmation() {
+      this.isAttemptingToExit = false;
+    },
+    onGoBackToCropper() {
+      this.$emit('on-back', { currentStepTrackingLabel: this.currentStepTrackingLabel });
+      this.currentStep = 2;
+    },
+    onGoBackToBusinessText() {
+      this.$emit('on-back', { currentStepTrackingLabel: this.currentStepTrackingLabel });
+      this.currentStep = 3;
+    },
+    onSaveBusinessText(payload) {
+      this.$emit('on-save-business-text', { businessText: payload.businessText });
+      this.savedBusinessText = payload;
+      this.currentStep = 4;
+    },
+    onBrandColoursSave(payload) {
+      this.$emit('on-brand-colors-save', {
+        textColorUserSelected: payload.textColorUserSelected,
+        backgroundColorUserSelected: payload.backgroundColorUserSelected,
+      });
+      this.brandColourData = payload;
+      this.save();
+    },
+    async save() {
+      if (this.isCurrentlySaving) return;
+
+      this.isCurrentlySaving = true;
+
+      const payload = {
+        templateUploadToken: this.uploadedLogoData.templateUploadToken,
+        businessText: this.savedBusinessText.businessText,
+        businessSlogin: this.savedBusinessText.sloganText,
+        textColor: this.brandColourData.textColor,
+        backgroundColor: this.brandColourData.backgroundColor,
+        cropBoundingBox: JSON.parse(JSON.stringify(this.croppedImageBoxBounds)),
+        isPostPurchaseUserUpload: this.isPostPurchaseUserUpload,
+      };
+
+      const result = await brandCrowdClient.createUserLogo(payload);
+
+      this.isCurrentlySaving = false;
+
+      if (result.error) {
+        this.onUploadError(result.error);
+        return;
+      }
+
+      this.$emit('on-finish', result.response);
+    },
+    reset() {
+      this.currentStep = 1;
+      this.errorMessage = null;
+      this.isAttemptingToExit = false;
+      this.isCurrentlySaving = false;
+      this.uploadedLogoData = null;
+      this.croppedImageBoxBounds = null;
+      this.savedBusinessText = null;
+      this.brandColourData = null;
+    },
+  },
+};
+</script>