@designcrowd/fe-shared-lib 1.0.10 → 1.0.11

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

@@ -1,140 +1,140 @@
-<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">Business Name</h2>
-        <p class="tw-mt-0">Enter your logo text or business name</p>
-      </div>
-
-      <div class="tw-pb-8 tw-px-8">
-        <div
-          :class="{
-            'tw-mb-4': logoData.logoImageDetails.sloganText,
-          }"
-        >
-          <input
-            v-model="businessText"
-            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="onBusinessTextKeyUp"
-          />
-        </div>
-
-        <div>
-          <input
-            v-if="logoData.logoImageDetails.sloganText"
-            v-model="sloganText"
-            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="onSloganTextKeyUp"
-          />
-        </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="Back"
-        size="large"
-        variant="outline"
-        container-classes="tw-mx-2"
-        data-test-back-btn
-        @on-click="back"
-      />
-      <Button
-        label="Continue"
-        size="large"
-        variant="primary-with-icon"
-        icon="chevron-right-wide"
-        container-classes="tw-mx-2"
-        data-test-continue-btn
-        @on-click="save"
-      />
-    </div>
-  </div>
-</template>
-<script>
-import Button from '../../../../src/atoms/components/Button/Button.vue';
-import trackEvent from '../../helpers/tracking';
-
-export default {
-  components: {
-    Button,
-  },
-  props: {
-    logoData: {
-      type: Object,
-      required: true,
-      default: null,
-    },
-    savedBusinessText: {
-      type: Object,
-      required: false,
-      default: null,
-    },
-    progressLabel: {
-      type: String,
-      required: true,
-    },
-    eventCategory: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      businessText: null,
-      sloganText: null,
-    };
-  },
-  mounted() {
-    if (this.savedBusinessText) {
-      this.businessText = this.savedBusinessText.businessText;
-    } else {
-      this.businessText = this.logoData.logoImageDetails.businessText;
-    }
-
-    if (this.savedBusinessText) {
-      this.sloganText = this.savedBusinessText.sloganText;
-    } else if (this.logoData.logoImageDetails.sloganText) {
-      this.sloganText = this.logoData.logoImageDetails.sloganText;
-    }
-  },
-  methods: {
-    back() {
-      this.$emit('on-go-back');
-    },
-    onSloganTextKeyUp(e) {
-      if (e.keyCode === 13) {
-        this.save();
-      }
-    },
-    onBusinessTextKeyUp(e) {
-      if (e.keyCode === 13) {
-        this.save();
-      }
-    },
-    save() {
-      const payload = {
-        businessText: this.businessText,
-      };
-
-      if (this.sloganText) {
-        payload.sloganText = this.sloganText;
-      }
-
-      this.$emit('on-save', payload);
-
-      trackEvent({
-        eventCategory: this.eventCategory,
-        eventAction: 'businessName',
-        eventLabel: 'Clicked_Continue',
-        event: 'click',
-      });
-    },
-  },
-};
-</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">Business Name</h2>
+        <p class="tw-mt-0">Enter your logo text or business name</p>
+      </div>
+
+      <div class="tw-pb-8 tw-px-8">
+        <div
+          :class="{
+            'tw-mb-4': logoData.logoImageDetails.sloganText,
+          }"
+        >
+          <input
+            v-model="businessText"
+            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="onBusinessTextKeyUp"
+          />
+        </div>
+
+        <div>
+          <input
+            v-if="logoData.logoImageDetails.sloganText"
+            v-model="sloganText"
+            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="onSloganTextKeyUp"
+          />
+        </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="Back"
+        size="large"
+        variant="outline"
+        container-classes="tw-mx-2"
+        data-test-back-btn
+        @on-click="back"
+      />
+      <Button
+        label="Continue"
+        size="large"
+        variant="primary-with-icon"
+        icon="chevron-right-wide"
+        container-classes="tw-mx-2"
+        data-test-continue-btn
+        @on-click="save"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import Button from '../../../../src/atoms/components/Button/Button.vue';
+import trackEvent from '../../helpers/tracking';
+
+export default {
+  components: {
+    Button,
+  },
+  props: {
+    logoData: {
+      type: Object,
+      required: true,
+      default: null,
+    },
+    savedBusinessText: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    progressLabel: {
+      type: String,
+      required: true,
+    },
+    eventCategory: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      businessText: null,
+      sloganText: null,
+    };
+  },
+  mounted() {
+    if (this.savedBusinessText) {
+      this.businessText = this.savedBusinessText.businessText;
+    } else {
+      this.businessText = this.logoData.logoImageDetails.businessText;
+    }
+
+    if (this.savedBusinessText) {
+      this.sloganText = this.savedBusinessText.sloganText;
+    } else if (this.logoData.logoImageDetails.sloganText) {
+      this.sloganText = this.logoData.logoImageDetails.sloganText;
+    }
+  },
+  methods: {
+    back() {
+      this.$emit('on-go-back');
+    },
+    onSloganTextKeyUp(e) {
+      if (e.keyCode === 13) {
+        this.save();
+      }
+    },
+    onBusinessTextKeyUp(e) {
+      if (e.keyCode === 13) {
+        this.save();
+      }
+    },
+    save() {
+      const payload = {
+        businessText: this.businessText,
+      };
+
+      if (this.sloganText) {
+        payload.sloganText = this.sloganText;
+      }
+
+      this.$emit('on-save', payload);
+
+      trackEvent({
+        eventCategory: this.eventCategory,
+        eventAction: 'businessName',
+        eventLabel: 'Clicked_Continue',
+        event: 'click',
+      });
+    },
+  },
+};
+</script>