@designcrowd/fe-shared-lib 1.7.0 → 1.7.1

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

@@ -1,65 +1,65 @@
-import LogoKeywords from './LogoKeywords.vue';
-
-export default {
-  title: 'Components/LogoKeywords',
-  component: LogoKeywords,
-};
-
-export const Loading = () => {
-  return {
-    components: {
-      LogoKeywords,
-    },
-    template: `
-      <div style="max-width: 500px;">
-        <LogoKeywords
-          progress-label="Step 3 of 5"
-          event-category="BYO-PrePurchase"
-          business-name="My Business"
-          template-type="business card"
-          anti-forgery-token="mock-anti-forgery-token"
-        />
-      </div>
-    `,
-  };
-};
-
-export const Populated = () => {
-  return {
-    components: {
-      LogoKeywords,
-    },
-    template: `
-      <div style="max-width: 500px;">
-        <LogoKeywords
-          progress-label="Step 3 of 5"
-          event-category="BYO-PrePurchase"
-          saved-keywords="modern, professional, creative, bold"
-          business-name="My Business"
-          template-type="business card"
-          anti-forgery-token="mock-anti-forgery-token"
-        />
-      </div>
-    `,
-  };
-};
-
-export const Empty = () => {
-  return {
-    components: {
-      LogoKeywords,
-    },
-    template: `
-      <div style="max-width: 500px;">
-        <LogoKeywords
-          progress-label="Step 3 of 5"
-          event-category="BYO-PrePurchase"
-          saved-keywords=""
-          business-name=""
-          template-type="business card"
-          anti-forgery-token="mock-anti-forgery-token"
-        />
-      </div>
-    `,
-  };
-};
+import LogoKeywords from './LogoKeywords.vue';
+
+export default {
+  title: 'Components/LogoKeywords',
+  component: LogoKeywords,
+};
+
+export const Loading = () => {
+  return {
+    components: {
+      LogoKeywords,
+    },
+    template: `
+      <div style="max-width: 500px;">
+        <LogoKeywords
+          progress-label="Step 3 of 5"
+          event-category="BYO-PrePurchase"
+          business-name="My Business"
+          template-type="business card"
+          anti-forgery-token="mock-anti-forgery-token"
+        />
+      </div>
+    `,
+  };
+};
+
+export const Populated = () => {
+  return {
+    components: {
+      LogoKeywords,
+    },
+    template: `
+      <div style="max-width: 500px;">
+        <LogoKeywords
+          progress-label="Step 3 of 5"
+          event-category="BYO-PrePurchase"
+          saved-keywords="modern, professional, creative, bold"
+          business-name="My Business"
+          template-type="business card"
+          anti-forgery-token="mock-anti-forgery-token"
+        />
+      </div>
+    `,
+  };
+};
+
+export const Empty = () => {
+  return {
+    components: {
+      LogoKeywords,
+    },
+    template: `
+      <div style="max-width: 500px;">
+        <LogoKeywords
+          progress-label="Step 3 of 5"
+          event-category="BYO-PrePurchase"
+          saved-keywords=""
+          business-name=""
+          template-type="business card"
+          anti-forgery-token="mock-anti-forgery-token"
+        />
+      </div>
+    `,
+  };
+};

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

@@ -1,156 +1,156 @@
-<template>
-  <div class="tw-w-full tw-flex tw-flex-col tw-h-full lg:tw-h-auto">
-    <div class="tw-h-full tw-pb-24 lg:tw-pb-0">
-      <div class="tw-pb-8">
-        <p class="tw-text-grayscale-600 tw-font-bold tw-text-xs tw-mb-2 tw-uppercase">
-          {{ progressLabel }}
-        </p>
-        <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">{{ uploadYourLogoTr('keywords') }}</h2>
-        <p class="tw-mt-0">{{ uploadYourLogoTr('keywordsDescription') }}</p>
-      </div>
-
-      <div class="tw-pb-8 tw-px-8">
-        <div class="tw-relative">
-          <input
-            v-model="keywordsText"
-            :disabled="isLoading"
-            class="tw-w-full tw-py-3.5 tw-px-4 tw-rounded tw-box-border tw-border tw-border-solid tw-border-grayscale-500 tw-text-grayscale-600"
-            @keyup="onKeywordsKeyUp"
-          />
-          <div
-            v-if="isLoading"
-            class="tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center tw-bg-white/50 tw-rounded"
-          >
-            <div class="tw-animate-spin tw-h-5 tw-w-5 tw-border-2 tw-border-grayscale-500 tw-border-t-transparent tw-rounded-full" />
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div
-      class="tw-fixed tw-rounded-b tw-bottom-0 tw-left-0 tw-z-10 tw-bg-grayscale-200 lg:tw-static 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 tw-box-border"
-    >
-      <Button
-        :label="uploadYourLogoTr('back')"
-        size="large"
-        variant="outline"
-        container-classes="tw-mx-2"
-        data-test-back-btn
-        @on-click="back"
-      />
-      <Button
-        :label="uploadYourLogoTr('continue')"
-        size="large"
-        variant="primary-with-icon"
-        icon="chevron-right-wide"
-        container-classes="tw-mx-2"
-        data-test-continue-btn
-        :disabled="isLoading"
-        @on-click="save"
-      />
-    </div>
-  </div>
-</template>
-<script>
-import Button from '../../../atoms/components/Button/Button.vue';
-import brandCrowdClient from '../../clients/brand-crowd-api.client';
-import trackEvent from '../../helpers/tracking';
-import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
-
-export default {
-  components: {
-    Button,
-  },
-  props: {
-    progressLabel: {
-      type: String,
-      required: true,
-    },
-    eventCategory: {
-      type: String,
-      required: true,
-    },
-    savedKeywords: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    businessName: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    templateType: {
-      type: String,
-      required: true,
-    },
-    antiForgeryToken: {
-      type: String,
-      required: true,
-    },
-    refreshAntiForgeryToken: {
-      type: Function,
-      required: false,
-      default: null,
-    },
-  },
-  setup() {
-    return {
-      uploadYourLogoTr,
-    };
-  },
-  data() {
-    return {
-      keywordsText: '',
-      isLoading: false,
-    };
-  },
-  async mounted() {
-    if (this.savedKeywords !== null) {
-      this.keywordsText = this.savedKeywords;
-      return;
-    }
-    if (!this.businessName) {
-      return;
-    }
-    this.isLoading = true;
-    try {
-      const token = this.refreshAntiForgeryToken ? await this.refreshAntiForgeryToken() : this.antiForgeryToken;
-      const result = await brandCrowdClient.getKeywordSuggestionsAsync({
-        businessName: this.businessName,
-        templateType: this.templateType,
-        antiForgeryToken: token,
-      });
-      if (result && result.keywords && result.keywords.length > 0) {
-        this.keywordsText = result.keywords.join(', ');
-      }
-    } finally {
-      this.isLoading = false;
-    }
-  },
-  methods: {
-    back() {
-      this.$emit('on-go-back');
-    },
-    save() {
-      if (this.isLoading) return;
-
-      trackEvent({
-        eventCategory: this.eventCategory,
-        eventAction: 'keywords',
-        eventLabel: 'Clicked_Continue',
-        event: 'click',
-      });
-
-      this.$emit('on-save', {
-        keywords: this.keywordsText,
-      });
-    },
-    onKeywordsKeyUp(e) {
-      if (e.key === 'Enter' && !this.isLoading) {
-        this.save();
-      }
-    },
-  },
-};
-</script>
+<template>
+  <div class="tw-w-full tw-flex tw-flex-col tw-h-full lg:tw-h-auto">
+    <div class="tw-h-full tw-pb-24 lg:tw-pb-0">
+      <div class="tw-pb-8">
+        <p class="tw-text-grayscale-600 tw-font-bold tw-text-xs tw-mb-2 tw-uppercase">
+          {{ progressLabel }}
+        </p>
+        <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">{{ uploadYourLogoTr('keywords') }}</h2>
+        <p class="tw-mt-0">{{ uploadYourLogoTr('keywordsDescription') }}</p>
+      </div>
+
+      <div class="tw-pb-8 tw-px-8">
+        <div class="tw-relative">
+          <input
+            v-model="keywordsText"
+            :disabled="isLoading"
+            class="tw-w-full tw-py-3.5 tw-px-4 tw-rounded tw-box-border tw-border tw-border-solid tw-border-grayscale-500 tw-text-grayscale-600"
+            @keyup="onKeywordsKeyUp"
+          />
+          <div
+            v-if="isLoading"
+            class="tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center tw-bg-white/50 tw-rounded"
+          >
+            <div class="tw-animate-spin tw-h-5 tw-w-5 tw-border-2 tw-border-grayscale-500 tw-border-t-transparent tw-rounded-full" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="tw-fixed tw-rounded-b tw-bottom-0 tw-left-0 tw-z-10 tw-bg-grayscale-200 lg:tw-static 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 tw-box-border"
+    >
+      <Button
+        :label="uploadYourLogoTr('back')"
+        size="large"
+        variant="outline"
+        container-classes="tw-mx-2"
+        data-test-back-btn
+        @on-click="back"
+      />
+      <Button
+        :label="uploadYourLogoTr('continue')"
+        size="large"
+        variant="primary-with-icon"
+        icon="chevron-right-wide"
+        container-classes="tw-mx-2"
+        data-test-continue-btn
+        :disabled="isLoading"
+        @on-click="save"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import Button from '../../../atoms/components/Button/Button.vue';
+import brandCrowdClient from '../../clients/brand-crowd-api.client';
+import trackEvent from '../../helpers/tracking';
+import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
+
+export default {
+  components: {
+    Button,
+  },
+  props: {
+    progressLabel: {
+      type: String,
+      required: true,
+    },
+    eventCategory: {
+      type: String,
+      required: true,
+    },
+    savedKeywords: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    businessName: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    templateType: {
+      type: String,
+      required: true,
+    },
+    antiForgeryToken: {
+      type: String,
+      required: true,
+    },
+    refreshAntiForgeryToken: {
+      type: Function,
+      required: false,
+      default: null,
+    },
+  },
+  setup() {
+    return {
+      uploadYourLogoTr,
+    };
+  },
+  data() {
+    return {
+      keywordsText: '',
+      isLoading: false,
+    };
+  },
+  async mounted() {
+    if (this.savedKeywords !== null) {
+      this.keywordsText = this.savedKeywords;
+      return;
+    }
+    if (!this.businessName) {
+      return;
+    }
+    this.isLoading = true;
+    try {
+      const token = this.refreshAntiForgeryToken ? await this.refreshAntiForgeryToken() : this.antiForgeryToken;
+      const result = await brandCrowdClient.getKeywordSuggestionsAsync({
+        businessName: this.businessName,
+        templateType: this.templateType,
+        antiForgeryToken: token,
+      });
+      if (result && result.keywords && result.keywords.length > 0) {
+        this.keywordsText = result.keywords.join(', ');
+      }
+    } finally {
+      this.isLoading = false;
+    }
+  },
+  methods: {
+    back() {
+      this.$emit('on-go-back');
+    },
+    save() {
+      if (this.isLoading) return;
+
+      trackEvent({
+        eventCategory: this.eventCategory,
+        eventAction: 'keywords',
+        eventLabel: 'Clicked_Continue',
+        event: 'click',
+      });
+
+      this.$emit('on-save', {
+        keywords: this.keywordsText,
+      });
+    },
+    onKeywordsKeyUp(e) {
+      if (e.key === 'Enter' && !this.isLoading) {
+        this.save();
+      }
+    },
+  },
+};
+</script>

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

@@ -1,103 +1,103 @@
-<template>
-  <div class="tw-relative tw-w-full tw-h-full lg:tw-h-auto tw-flex tw-flex-col">
-    <div class="tw-h-full tw-pb-24 lg:tw-pb-0">
-      <div class="lg:tw-pb-8">
-        <p class="tw-text-grayscale-600 tw-font-bold tw-text-xs tw-mb-2 tw-uppercase">
-          {{ progressLabel }}
-        </p>
-        <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">{{ uploadYourLogoTr('logoPreview') }}</h2>
-        <p class="tw-mt-0">{{ uploadYourLogoTr('logoPreviewDescription') }}</p>
-      </div>
-
-      <div class="lg:tw-pb-8 lg:tw-px-8">
-        <img
-          v-if="logoData && logoData.logoImageUrl"
-          ref="preview"
-          class="tw-inline tw-max-h-72"
-          :src="logoData.logoImageUrl"
-          alt="preview"
-        />
-      </div>
-    </div>
-
-    <div
-      class="tw-fixed tw-rounded-b tw-bottom-0 tw-left-0 tw-z-10 tw-bg-grayscale-200 lg:tw-static 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 tw-box-border"
-    >
-      <Button
-        :label="uploadYourLogoTr('cancel')"
-        size="large"
-        variant="outline"
-        container-classes="tw-mx-2"
-        data-test-cancel-btn
-        @on-click="cancel"
-      />
-      <Button
-        :label="uploadYourLogoTr('continue')"
-        size="large"
-        variant="primary-with-icon"
-        icon="chevron-right-wide"
-        container-classes="tw-mx-2"
-        data-test-continue-btn
-        @on-click="cropImage"
-      />
-    </div>
-  </div>
-</template>
-<script>
-import Button from '../../../atoms/components/Button/Button.vue';
-import trackEvent from '../../helpers/tracking';
-import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
-
-export default {
-  components: {
-    Button,
-  },
-  props: {
-    logoData: {
-      type: Object,
-      required: true,
-      default: null,
-    },
-    progressLabel: {
-      type: String,
-      required: true,
-    },
-    eventCategory: {
-      type: String,
-      required: true,
-    },
-  },
-  setup() {
-    return {
-      uploadYourLogoTr,
-    };
-  },
-  methods: {
-    cropImage() {
-      if (!this.$refs.preview.complete) return;
-
-      const bounds = {
-        left: 0,
-        top: 0,
-        width: this.$refs.preview.naturalWidth,
-        height: this.$refs.preview.naturalHeight,
-      };
-
-      this.$emit('on-continue', {
-        bounds,
-        dataUrl: this.logoData.logoImageUrl,
-      });
-
-      trackEvent({
-        eventCategory: this.eventCategory,
-        eventAction: 'previewLogo',
-        eventLabel: 'Clicked_Continue',
-        event: 'click',
-      });
-    },
-    cancel() {
-      this.$emit('on-cancel');
-    },
-  },
-};
-</script>
+<template>
+  <div class="tw-relative tw-w-full tw-h-full lg:tw-h-auto tw-flex tw-flex-col">
+    <div class="tw-h-full tw-pb-24 lg:tw-pb-0">
+      <div class="lg:tw-pb-8">
+        <p class="tw-text-grayscale-600 tw-font-bold tw-text-xs tw-mb-2 tw-uppercase">
+          {{ progressLabel }}
+        </p>
+        <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">{{ uploadYourLogoTr('logoPreview') }}</h2>
+        <p class="tw-mt-0">{{ uploadYourLogoTr('logoPreviewDescription') }}</p>
+      </div>
+
+      <div class="lg:tw-pb-8 lg:tw-px-8">
+        <img
+          v-if="logoData && logoData.logoImageUrl"
+          ref="preview"
+          class="tw-inline tw-max-h-72"
+          :src="logoData.logoImageUrl"
+          alt="preview"
+        />
+      </div>
+    </div>
+
+    <div
+      class="tw-fixed tw-rounded-b tw-bottom-0 tw-left-0 tw-z-10 tw-bg-grayscale-200 lg:tw-static 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 tw-box-border"
+    >
+      <Button
+        :label="uploadYourLogoTr('cancel')"
+        size="large"
+        variant="outline"
+        container-classes="tw-mx-2"
+        data-test-cancel-btn
+        @on-click="cancel"
+      />
+      <Button
+        :label="uploadYourLogoTr('continue')"
+        size="large"
+        variant="primary-with-icon"
+        icon="chevron-right-wide"
+        container-classes="tw-mx-2"
+        data-test-continue-btn
+        @on-click="cropImage"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import Button from '../../../atoms/components/Button/Button.vue';
+import trackEvent from '../../helpers/tracking';
+import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
+
+export default {
+  components: {
+    Button,
+  },
+  props: {
+    logoData: {
+      type: Object,
+      required: true,
+      default: null,
+    },
+    progressLabel: {
+      type: String,
+      required: true,
+    },
+    eventCategory: {
+      type: String,
+      required: true,
+    },
+  },
+  setup() {
+    return {
+      uploadYourLogoTr,
+    };
+  },
+  methods: {
+    cropImage() {
+      if (!this.$refs.preview.complete) return;
+
+      const bounds = {
+        left: 0,
+        top: 0,
+        width: this.$refs.preview.naturalWidth,
+        height: this.$refs.preview.naturalHeight,
+      };
+
+      this.$emit('on-continue', {
+        bounds,
+        dataUrl: this.logoData.logoImageUrl,
+      });
+
+      trackEvent({
+        eventCategory: this.eventCategory,
+        eventAction: 'previewLogo',
+        eventLabel: 'Clicked_Continue',
+        event: 'click',
+      });
+    },
+    cancel() {
+      this.$emit('on-cancel');
+    },
+  },
+};
+</script>