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

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

@@ -0,0 +1,91 @@
+<template>
+  <LogoUploadingLoader loading-text="Uploading and converting your logo..." />
+</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';
+
+export default {
+  components: {
+    LogoUploadingLoader,
+  },
+  props: {
+    logoFile: {
+      type: Object,
+      required: true,
+      default: undefined,
+    },
+    eventCategory: {
+      type: String,
+      required: true,
+    },
+  },
+  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);
+
+      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

@@ -0,0 +1,22 @@
+<template>
+  <div class="tw-pt-12 tw-pb-16 tw-flex tw-flex-col tw-items-center tw-justify-center">
+    <img
+      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>
+export default {
+  props: {
+    loadingText: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,290 @@
+<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">Upload your logo</h2>
+          <p class="tw-mt-0 tw-pb-8">Please ensure you have the right to use any image you upload.</p>
+          <UploadYourLogoDropzone :is-modal="true" @on-upload-success="onLogoFileChange"> </UploadYourLogoDropzone>
+        </div>
+
+        <LogoUploader
+          v-if="logoFile && !isAttemptingToExit && !hasError && currentStep === 1"
+          :logo-file="logoFile"
+          :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="Generating Designs..." />
+
+        <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 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,
+    },
+  },
+  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 `Step ${currentStepDisplay} of 5`;
+      }
+      return `Step ${this.currentStep - 1} of 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 ? Errors.MAX_BYO_FILE_SIZE_EXCEEDED_MSG : 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 = Errors.GENERIC_BYO_ERROR;
+      }
+      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>

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

@@ -0,0 +1,82 @@
+import UploadedLogoSearchResultCard from './UploadedLogoSearchResultCard.vue';
+import Events from '../../constants/event-constants';
+
+export default {
+  title: 'Components/UploadedLogoSearchResultCard',
+  component: UploadedLogoSearchResultCard,
+};
+
+export const SampleHorizontal = () => {
+  return {
+    components: {
+      UploadedLogoSearchResultCard,
+    },
+    mounted() {
+      window.addEventListener(Events.BeginUploadLogoExperience, () => {
+        alert('begin upload');
+      });
+    },
+    template: `
+      <div class="tw-grid tw-grid-cols-4 tw-gap-4">
+        <UploadedLogoSearchResultCard
+          logoImageUrl="https://dynamic.brandcrowd.com/template/preview/design/36c5c49c-611d-46f5-8f58-d7b686cc0809/2dcb43a1-7a00-4932-ba5c-5d817a80408b?v=4&size=design-preview-3col"
+          aspect-ratio="58.49609375%"
+        />
+      </div>
+    `,
+  };
+};
+
+SampleHorizontal.story = {
+  name: 'Horizontal (16x9)',
+};
+
+export const SampleSquare = () => {
+  return {
+    components: {
+      UploadedLogoSearchResultCard,
+    },
+    mounted() {
+      window.addEventListener(Events.BeginUploadLogoExperience, () => {
+        alert('begin upload');
+      });
+    },
+    template: `
+      <div class="tw-grid tw-grid-cols-4 tw-gap-4">
+        <UploadedLogoSearchResultCard
+          logoImageUrl="https://images.unsplash.com/photo-1636355761620-712e88f86ade?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=235&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYzNjUxMTY5OA&ixlib=rb-1.2.1&q=80&w=325"
+          aspect-ratio="100%"
+        />
+      </div>
+    `,
+  };
+};
+
+SampleSquare.story = {
+  name: 'Square (1:1)',
+};
+
+export const SampleVertical = () => {
+  return {
+    components: {
+      UploadedLogoSearchResultCard,
+    },
+    mounted() {
+      window.addEventListener(Events.BeginUploadLogoExperience, () => {
+        alert('begin upload');
+      });
+    },
+    template: `
+      <div class="tw-grid tw-grid-cols-4 tw-gap-4">
+        <UploadedLogoSearchResultCard
+          logoImageUrl="https://images.unsplash.com/photo-1634737118699-8bbb06e3fa2a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=555&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYzNjUxMjIxMA&ixlib=rb-1.2.1&q=80&w=325"
+          aspect-ratio="170%"
+        />
+      </div>
+    `,
+  };
+};
+
+SampleVertical.story = {
+  name: 'Vertical (65:111)',
+};

package/src/experiences/components/UploadedLogoSearchResultCard/UploadedLogoSearchResultCard.vue

@@ -0,0 +1,201 @@
+<template>
+  <div
+    class="tw-flex tw-flex-col tw-bg-white tw-border tw-border-solid tw-border-grayscale-400 tw-p-4"
+    :class="{
+      'md:tw-grid md:tw-grid-cols-2 md:tw-gap-2 md:tw-items-center md:tw-justify-center md:tw-p-3':
+        useLandscapeTile && !extraWideLandscape,
+      'md:tw-items-center md:tw-justify-center md:tw-p-6': alternativeLayout && !extraWideLandscape,
+      'md:tw-flex md:tw-flex-row md:tw-justify-start md:tw-items-center md:tw-p-2': extraWideLandscape,
+    }"
+  >
+    <div v-if="!alternativeLayout">
+      <figure
+        class="tw-relative tw-overflow-visible tw-h-0 tw-mb-4 tw-pb-0"
+        :style="{ 'padding-bottom': `${aspectRatio}%` }"
+      >
+        <div
+          class="tw-absolute tw-top-0 tw-left-0 tw-object-cover tw-h-full tw-w-full tw-object-top tw-flex tw-justify-center"
+        >
+          <div class="tw-flex tw-items-center tw-justify-center tw-h-full tw-w-full">
+            <img :src="logoImageUrl" class="tw-block tw-max-h-full" alt="logo" />
+          </div>
+        </div>
+      </figure>
+    </div>
+    <div
+      v-else
+      :class="{
+        'md:tw-w-full md:tw-flex md:tw-items-end': alternativeLayout && !useLandscapeTile,
+        'md:tw-flex md:tw-justify-start md:tw-w-auto': extraWideLandscape,
+      }"
+    >
+      <figure
+        class="tw-max-h-full tw-mb-4 tw-pb-0"
+        :class="{
+          'md:tw-h-full md:tw-mb-0': useLandscapeTile,
+          'md:tw-w-full': alternativeLayout && !extraWideLandscape,
+          'md:tw-flex md:tw-items-start md:tw-w-auto': extraWideLandscape,
+        }"
+      >
+        <div class="tw-object-cover" :class="{ 'md:tw-object-contain': extraWideLandscape }">
+          <div
+            class="tw-flex tw-items-center tw-justify-center tw-h-full tw-w-full"
+            :class="{ 'md:tw-h-20': extraWideLandscape }"
+          >
+            <img :src="logoImageUrl" class="tw-block tw-max-h-full" alt="logo" />
+          </div>
+        </div>
+      </figure>
+    </div>
+    <div
+      class="tw-w-full tw-flex tw-items-center tw-justify-center"
+      :class="{
+        'md:tw-items-start': alternativeLayout,
+        'md:tw-justify-start md:tw-ml-4': extraWideLandscape,
+      }"
+    >
+      <label for="replace-logo-file" class="tw-sr-only">
+        Replace logo
+        <input
+          id="replace-logo-file"
+          ref="fileInput"
+          type="file"
+          accept=".jpg,.jpeg,.png,.svg,.eps"
+          @change="onReplaceFileChange"
+        />
+      </label>
+      <div
+        class="tw-flex tw-items-center tw-justify-center"
+        :class="{
+          'md:tw-items-center': useLandscapeTile,
+          'md:tw-flex-col': aspectRatio > 30 && useLandscapeTile,
+          'md:tw-flex-row': aspectRatio <= 30 && useLandscapeTile,
+          'md:tw-flex-row md:tw-items-center': alternativeLayout,
+        }"
+      >
+        <Button
+          variant="outline"
+          size="small"
+          :label="replaceButtonLabel"
+          data-test-replace-logo-btn
+          @on-click="onReplaceButtonClick"
+        />
+        <button
+          class="tw-uppercase tw-ml-6 tw-text-xs tw-text-secondary tw-font-sans tw-font-bold"
+          :class="{
+            'md:tw-mt-3': useLandscapeTile && !extraWideLandscape,
+            'md:tw-ml-0': useLandscapeTile,
+            'md:tw-ml-3': (alternativeLayout && !useLandscapeTile) || extraWideLandscape,
+          }"
+          data-test-delete-logo-btn
+          @click="onDeleteButtonClick"
+        >
+          {{ deleteButtonLabel }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import axios from 'axios';
+import Button from '../../../../src/atoms/components/Button/Button.vue';
+import Events from '../../constants/event-constants';
+import API from '../../constants/api';
+import trackEvent from '../../helpers/tracking';
+
+export default {
+  components: {
+    Button,
+  },
+  props: {
+    logoImageUrl: {
+      type: String,
+      required: true,
+    },
+    aspectRatio: {
+      type: Number,
+      required: true,
+    },
+    eventCategory: {
+      type: String,
+      required: true,
+    },
+    useLandscapeTile: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    alternativeLayout: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      extraWideLandscape: this.useLandscapeTile && this.aspectRatio <= 30,
+    };
+  },
+  computed: {
+    replaceButtonLabel() {
+      return this.alternativeLayout ? 'Replace' : 'Replace Logo';
+    },
+    deleteButtonLabel() {
+      return this.alternativeLayout ? 'Delete' : 'Delete Logo';
+    },
+  },
+  methods: {
+    onDeleteButtonClick() {
+      if (this.isRunning) return;
+      this.isRunning = true;
+
+      trackEvent({
+        eventCategory: this.eventCategory,
+        eventAction: 'deleteLogo',
+        eventLabel: 'Clicked_Delete_Logo_Search',
+        event: 'click',
+      });
+
+      axios({
+        method: 'post',
+        url: API.BYO_LOGO_API_URL + API.BYO_LOGO_API_DELETE_LOGO_ENDPOINT,
+      })
+        .then((res) => {
+          if (res.status === 200) {
+            this.$emit('on-delete-success', res);
+          } else {
+            this.$emit('on-delete-error', res);
+          }
+
+          this.isRunning = false;
+        })
+        .catch((err) => {
+          this.$emit('on-delete-error', err);
+          this.isRunning = false;
+        });
+    },
+    onReplaceButtonClick(e) {
+      e.preventDefault();
+      this.$refs.fileInput.click();
+
+      trackEvent({
+        eventCategory: this.eventCategory,
+        eventAction: 'replaceLogo',
+        eventLabel: 'Clicked_Replace_Logo_Search',
+        event: 'click',
+      });
+    },
+    onReplaceFileChange(event) {
+      if (event.target.files.length) {
+        window.dispatchEvent(
+          new CustomEvent(Events.BeginUploadLogoExperience, {
+            detail: {
+              file: event.target.files[0],
+            },
+          }),
+        );
+      }
+    },
+  },
+};
+</script>

package/src/experiences/constants/api.js

@@ -0,0 +1,8 @@
+export default {
+  BYO_LOGO_API_URL: '/maker/api',
+  BYO_LOGO_API_UPLOAD_LOGO_ENDPOINT: '/user-logos/logo-image',
+  BYO_LOGO_API_SAVE_ENDPOINT: '/user-logos',
+  BYO_LOGO_API_DELETE_LOGO_ENDPOINT: '/user-logos/delete-user-logo',
+  BYO_LOGO_API_LINK_TEMPLATE_ENDPOINT: '/user-logos/link-user-logo-template',
+  DOMAIN_NAME_SEARCH_API_URL: '/maker/api/domain-names/suggest',
+};

package/src/experiences/constants/error-constants.js

@@ -0,0 +1,5 @@
+export default {
+  MAX_BYO_FILE_SIZE: 26214400,
+  MAX_BYO_FILE_SIZE_EXCEEDED_MSG: 'Your file exceeds the maximum size of 25MB. Please choose a smaller file.',
+  GENERIC_BYO_ERROR: 'An unexpected error occured. Please try again.',
+};