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

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

@@ -0,0 +1,328 @@
+<template>
+  <div class="tw-w-full tw-h-full">
+    <div class="tw-h-full tw-pb-24 lg:tw-pb-0 tw-overflow-scroll lg:tw-overflow-visible">
+      <HelloBar
+        v-if="areColorsTooClose"
+        label=""
+        description="Your text and background colors are too similar. Please choose a more distinct pairing to ensure they create quality designs."
+        variant="warning"
+        class="tw-m-5 tw-mt-3"
+      />
+      <div class="tw-pb-8 tw-px-8 tw-text-center">
+        <p class="tw-text-grayscale-600 tw-font-bold tw-text-xs tw-mb-2 tw-uppercase">
+          Step {{ activeStep.number }} of {{ totalNumSteps }}
+        </p>
+        <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">
+          {{ activeStep.title }}
+        </h2>
+        <p class="tw-mt-0">{{ activeStep.description }}</p>
+      </div>
+
+      <div class="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-pb-8 tw-px-8 tw-text-left">
+        <figure class="tw-flex tw-justify-center tw-items-center tw-max-h-56">
+          <img :src="croppedLogoImage" alt="" class="tw-max-w-full tw-max-h-full" />
+        </figure>
+        <div v-if="activeStep.colourData" class="tw-grid tw-grid-cols-4 tw-gap-3 tw-grid-flow-row tw-auto-rows-max">
+          <button
+            class="tw-relative tw-h-14 tw-w-14 tw-rounded-md tw-border-solid tw-cursor-pointer tw-bg-grayscale-400 tw-text-gray-500"
+          >
+            <input
+              v-if="currentStep === 'textColour'"
+              type="color"
+              class="tw-absolute tw-top-0 tw-left-0 tw-z-10 tw-w-full tw-h-full tw-opacity-0 tw-cursor-pointer"
+              @input.stop="onCustomTextColourChange"
+            />
+            <input
+              v-if="currentStep === 'backgroundColour'"
+              type="color"
+              class="tw-absolute tw-top-0 tw-left-0 tw-z-10 tw-w-full tw-h-full tw-opacity-0 tw-cursor-pointer"
+              @input.stop="onCustomBackgroundColourChange"
+            />
+            <span class="tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full">
+              <Icon name="plus" size="sm" />
+            </span>
+          </button>
+          <button
+            v-for="(colour, index) in activeStep.colours"
+            :key="index"
+            class="tw-relative tw-h-14 tw-w-14 tw-rounded-md tw-border-solid tw-cursor-pointer tw-border-2 tw-border-grayscale-500"
+            :style="{ 'background-color': colour.hex }"
+            @click="setSelectedColour(colour)"
+          >
+            <span
+              v-if="colour.selected"
+              class="tw-bg-white tw-border tw-border-solid tw-border-info-500 tw-mx-auto tw-w-5 tw-h-5 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-info-500"
+            >
+              <Icon name="check" size="xs" />
+            </span>
+            <span class="tw-sr-only">{{ colour.hex }}</span>
+          </button>
+          <button
+            v-if="currentStep === 'textColour' && customTextColour.hex"
+            class="tw-relative tw-h-14 tw-w-14 tw-rounded-md tw-border-solid tw-cursor-pointer tw-border-2 tw-border-grayscale-500"
+            :style="{ 'background-color': customTextColour.hex }"
+            @click="setSelectedColour(customTextColour)"
+          >
+            <span
+              v-if="colour.selected"
+              class="tw-bg-white tw-border tw-border-solid tw-border-info-500 tw-mx-auto tw-w-5 tw-h-5 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-info-500"
+            >
+              <Icon name="check" size="xs" />
+            </span>
+            <span class="tw-sr-only">{{ customTextColour.hex }}</span>
+          </button>
+        </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
+        v-if="activeStep.index === 1"
+        label="Back"
+        size="large"
+        variant="outline"
+        container-classes="tw-mx-2"
+        data-test-back-btn
+        @on-click="back"
+      />
+      <Button
+        v-if="activeStep.index === 2"
+        label="Back"
+        size="large"
+        variant="outline"
+        container-classes="tw-mx-2"
+        data-test-back-btn
+        @on-click="goToStep('textColour')"
+      />
+      <Button
+        v-if="activeStep.index === 1"
+        label="Continue"
+        size="large"
+        variant="primary-with-icon"
+        icon="chevron-right-wide"
+        container-classes="tw-mx-2"
+        data-test-continue-btn
+        @on-click="goToStep('backgroundColour', true)"
+      />
+      <Button
+        v-if="activeStep.index === 2"
+        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>
+/* eslint-disable no-param-reassign */
+import Button from '../../../../src/atoms/components/Button/Button.vue';
+import Icon from '../../../../src/atoms/components/Icon/Icon.vue';
+import HelloBar from '../../../../src/atoms/components/HelloBar/HelloBar.vue';
+import trackEvent from '../../helpers/tracking';
+import hexDiff from '../../helpers/hex-diff';
+
+export default {
+  components: {
+    Button,
+    Icon,
+    HelloBar,
+  },
+  props: {
+    logoData: {
+      type: Object,
+      required: true,
+      default: null,
+    },
+    croppedLogoImage: {
+      type: String,
+      required: true,
+      default: null,
+    },
+    totalNumSteps: {
+      type: Number,
+      required: true,
+    },
+    eventCategory: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      currentStep: null,
+      stepNumber: null,
+      activeStep: {},
+      customTextColour: {
+        hex: null,
+        selected: false,
+      },
+      customBackgroundColour: {
+        hex: null,
+        selected: false,
+      },
+      steps: {
+        textColour: {
+          index: 1,
+          number: this.totalNumSteps - 1,
+          active: false,
+          title: 'Primary text color',
+          description:
+            'Help us setup your logo by confirming the primary text color. Choose from the available colors or click the plus icon to add another.',
+          colourData: this.logoData.logoImageDetails.textColors,
+          colours: [],
+        },
+        backgroundColour: {
+          index: 2,
+          number: this.totalNumSteps,
+          active: false,
+          title: 'Background color',
+          description:
+            'Help us setup your logo by confirming the background color. Choose from the available colors or click the plus icon to add another.',
+          colourData: this.logoData.logoImageDetails.backgroundColors,
+          colours: [],
+        },
+      },
+    };
+  },
+  computed: {
+    areColorsTooClose() {
+      const selectedTextColour = this.steps.textColour?.colours.find((c) => c.selected === true);
+
+      const selectedBackgroundColour = this.steps.backgroundColour?.colours.find((c) => c.selected === true);
+
+      if (!selectedTextColour?.hex || !selectedBackgroundColour?.hex) return false;
+
+      return (
+        this.activeStep.index === 2 && hexDiff(selectedTextColour.hex, selectedBackgroundColour.hex) !== 'Different'
+      );
+    },
+  },
+  mounted() {
+    const keys = Object.keys(this.steps);
+
+    keys.forEach((key) => {
+      const step = this.steps[key];
+
+      step.colourData.forEach((hex, i) => {
+        step.colours.push({
+          hex,
+          selected: i === 0,
+        });
+      });
+    });
+
+    this.goToStep('textColour');
+  },
+  methods: {
+    goToStep(step, shouldTrack = false) {
+      this.currentStep = step;
+      this.activeStep = this.steps[step];
+      this.steps[step].active = true;
+
+      if (shouldTrack && step === 'backgroundColour') {
+        trackEvent({
+          eventCategory: this.eventCategory,
+          eventAction: 'textColor',
+          eventLabel: 'Clicked_Continue',
+          event: 'click',
+        });
+      }
+    },
+    setSelectedColour(selectedColour) {
+      this.activeStep.colours.forEach((colour) => {
+        if (colour !== selectedColour) {
+          colour.selected = false;
+        }
+      });
+
+      selectedColour.selected = true;
+    },
+    deselectAllColours(step) {
+      this.steps[step].colours.forEach((c) => {
+        c.selected = false;
+      });
+    },
+    onCustomTextColourChange(event) {
+      this.deselectAllColours('textColour');
+
+      const colour = {
+        hex: event.target.value,
+        selected: true,
+        custom: true,
+      };
+
+      if (this.steps.textColour.colours[this.steps.textColour.colours.length - 1].custom) {
+        this.steps.textColour.colours[this.steps.textColour.colours.length - 1] = colour;
+      } else {
+        this.steps.textColour.colours.push(colour);
+      }
+    },
+    onCustomBackgroundColourChange(event) {
+      this.deselectAllColours('backgroundColour');
+
+      const colour = {
+        hex: event.target.value,
+        selected: true,
+        custom: true,
+      };
+
+      if (this.steps.backgroundColour.colours[this.steps.backgroundColour.colours.length - 1].custom) {
+        this.steps.backgroundColour.colours[this.steps.backgroundColour.colours.length - 1] = colour;
+      } else {
+        this.steps.backgroundColour.colours.push(colour);
+      }
+    },
+    back() {
+      this.$emit('on-go-back');
+    },
+    save() {
+      let selectedTextColour = this.steps.textColour.colours.find((c) => c.selected === true);
+
+      let selectedBackgroundColour = this.steps.backgroundColour.colours.find((c) => c.selected === true);
+
+      let textColorUserSelected = selectedTextColour?.custom || false;
+
+      if (this.customTextColour.hex && this.customTextColour.selected) {
+        textColorUserSelected = true;
+        selectedTextColour = this.customTextColour;
+      }
+
+      let backgroundColorUserSelected = selectedBackgroundColour?.custom || false;
+
+      if (this.customBackgroundColour.hex && this.customBackgroundColour.selected) {
+        backgroundColorUserSelected = true;
+        selectedBackgroundColour = this.customBackgroundColour;
+      }
+
+      const payload = {
+        textColor: selectedTextColour.hex,
+        backgroundColor: selectedBackgroundColour.hex,
+        textColorUserSelected,
+        backgroundColorUserSelected,
+      };
+
+      this.$emit('on-save', payload);
+
+      trackEvent({
+        eventCategory: this.eventCategory,
+        eventAction: 'backgroundColor',
+        eventLabel: 'Clicked_Continue',
+        event: 'click',
+      });
+    },
+  },
+};
+</script>
+<style scoped>
+.done-btn {
+  box-shadow:
+    0 0 0 1px #d4d4d4,
+    0 8px 16px #d4d4d4;
+}
+</style>

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

@@ -0,0 +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>