@designcrowd/fe-shared-lib 1.5.0-eng-3440-eng-3442 → 1.5.0-jj-2

package/src/experiences/components/PublishBrandPageModal/views/SetUrlView.vue

@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <div class="tw-mt-4">
+      <div>
+        <TextInput
+          v-model="internalSlug"
+          element-classes="tw-mb-0 !tw-rounded-l-none tw-text-lg"
+          :prefix-text="`${brandPageBaseUrlWithoutHttps}/`"
+          :error="!!slugValidationError"
+          :disabled="isInputEnabled"
+          :placeholder="getPlaceHolder"
+          data-test-brand-page-slug-input
+          :attrs="{ 'data-test-set-url-text-field': '' }"
+          @input="onSlugChanged"
+        />
+        <div v-if="slugErrorMessage" class="tw-mt-2 tw-text-sm tw-text-left tw-text-error-500 tw-font-normal">
+          {{ slugErrorMessage }}
+        </div>
+      </div>
+    </div>
+    <div class="tw-font-sans tw-text-center" :style="isMobile ? 'padding-left: 1.5rem; padding-right: 1.5rem;' : ''">
+      <Button
+        :label="setUrlLabel"
+        :variant="isDesignCom ? 'primary' : 'primary-with-icon'"
+        icon="chevron-right-wide"
+        :disabled="isPublishingDisabled"
+        class="tw-my-4"
+        :full-width="isMobile"
+        data-test-brand-page-publish-button
+        @on-click="onPublish"
+      />
+      <Button
+        :label="hasAlreadyPurchasedDomainCloseButtonLabel"
+        variant="no-border"
+        size="large"
+        class="tw-my-4"
+        :full-width="isMobile"
+        @on-click="onCloseModal"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import TextInput from '../../../../atoms/components/TextInput/TextInput.vue';
+import Button from '../../../../atoms/components/Button/Button.vue';
+import mediaQueryMixin from '../../../mixins/mediaQueryMixin';
+import { publishBrandPageModalTr } from '../../../../useSharedLibTranslate';
+
+export default {
+  components: {
+    TextInput,
+    Button,
+  },
+  mixins: [mediaQueryMixin],
+  props: {
+    brandPageBaseUrl: {
+      type: String,
+      required: true,
+      default: undefined,
+    },
+    brandPageSlug: {
+      type: String,
+      required: true,
+      default: undefined,
+    },
+    slugValidationError: {
+      type: String,
+      required: true,
+      default: undefined,
+    },
+    errorMessage: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    publishErrorMessage: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    isPublishing: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    isDesignCom: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    brandPageType: {
+      type: String,
+      required: true,
+      default: '',
+    },
+  },
+  emits: ['close-modal', 'internal-publish-brand-page', 'on-slug-changed'],
+  setup() {
+    return {
+      publishBrandPageModalTr,
+      slugInputPlaceholderYourNameLabel: publishBrandPageModalTr('slugInputPlaceholderYourNameLabel'),
+      slugInputPlaceholderYourBusinessNameLabel: publishBrandPageModalTr('slugInputPlaceholderYourBusinessNameLabel'),
+      setUrlLabel: publishBrandPageModalTr('setUrlLabel'),
+      hasAlreadyPurchasedDomainCloseButtonLabel: publishBrandPageModalTr('hasAlreadyPurchasedDomainCloseButtonLabel'),
+    };
+  },
+  data() {
+    return {
+      domainTypeValue: this.radioValue,
+      internalSlug: this.brandPageSlug,
+    };
+  },
+  computed: {
+    brandPageBaseUrlWithoutHttps() {
+      return this.brandPageBaseUrl.replace('https://', '');
+    },
+    allowPublish() {
+      return this.internalSlug && !this.slugValidationError;
+    },
+    slugErrorMessage() {
+      return this.slugValidationError ? this.slugValidationError : this.publishErrorMessage;
+    },
+    isInputEnabled() {
+      return this.isPublishing;
+    },
+    isPublishingDisabled() {
+      return !this.allowPublish || this.isPublishing;
+    },
+    getPlaceHolder() {
+      return this.brandPageType === 'brandContact'
+        ? this.slugInputPlaceholderYourNameLabel
+        : this.slugInputPlaceholderYourBusinessNameLabel;
+    },
+  },
+  watch: {
+    brandPageSlug(slug) {
+      this.internalSlug = slug;
+    },
+  },
+  mounted() {
+    this.internalSlug = this.brandPageSlug;
+  },
+  methods: {
+    onCloseModal() {
+      this.$emit('close-modal');
+    },
+    onSlugChanged(e) {
+      this.$emit('on-slug-changed', e);
+    },
+    onPublish() {
+      this.$emit('internal-publish-brand-page', this.internalSlug, undefined);
+    },
+  },
+};
+</script>

package/src/atoms/components/Icon/icons/calculator.vue

@@ -1,3 +0,0 @@
-<template>
-  <path d="M13.25 5.2002C13.25 4.62777 13.2498 4.24315 13.2256 3.94727C13.2021 3.66027 13.1594 3.52316 13.1133 3.43262C12.9935 3.19751 12.8025 3.00655 12.5674 2.88672C12.4768 2.84059 12.3397 2.79788 12.0527 2.77442C11.7569 2.75024 11.3722 2.75 10.7998 2.75H5.20019C4.62776 2.75 4.24314 2.75024 3.94726 2.77442C3.66026 2.79788 3.52316 2.84059 3.43261 2.88672C3.1975 3.00655 3.00654 3.19751 2.88672 3.43262C2.84058 3.52316 2.79787 3.66027 2.77441 3.94727C2.75024 4.24315 2.75 4.62777 2.75 5.2002V10.7998C2.75 11.3722 2.75024 11.7569 2.77441 12.0527C2.79787 12.3397 2.84058 12.4768 2.88672 12.5674C3.00654 12.8025 3.1975 12.9935 3.43261 13.1133C3.52316 13.1594 3.66026 13.2021 3.94726 13.2256C4.24314 13.2498 4.62776 13.25 5.20019 13.25H10.7998C11.3722 13.25 11.7569 13.2498 12.0527 13.2256C12.3397 13.2021 12.4768 13.1594 12.5674 13.1133C12.8025 12.9935 12.9935 12.8025 13.1133 12.5674C13.1594 12.4768 13.2021 12.3397 13.2256 12.0527C13.2498 11.7569 13.25 11.3722 13.25 10.7998V5.2002ZM11.1367 3.80274C11.4296 3.51017 11.9045 3.50995 12.1973 3.80274C12.49 4.09552 12.4898 4.57037 12.1973 4.86329L4.86328 12.1973C4.57036 12.4898 4.09552 12.4901 3.80273 12.1973C3.50995 11.9045 3.51016 11.4296 3.80273 11.1367L11.1367 3.80274ZM11.667 9.58301C12.0809 9.58319 12.4168 9.91906 12.417 10.333C12.417 10.7471 12.0811 11.0828 11.667 11.083H9C8.58578 11.083 8.25 10.7472 8.25 10.333C8.25017 9.91895 8.58589 9.58301 9 9.58301H11.667ZM4.91699 7V6.417H4.333C3.91905 6.41682 3.58318 6.08095 3.583 5.667C3.583 5.25289 3.91894 4.91717 4.333 4.917H4.91699V4.33301C4.91716 3.91895 5.25288 3.58301 5.66699 3.58301C6.08094 3.58319 6.41681 3.91906 6.41699 4.33301V4.917H7C7.41421 4.917 7.75 5.25278 7.75 5.667C7.74982 6.08106 7.4141 6.417 7 6.417H6.41699V7C6.41699 7.41411 6.08105 7.74983 5.66699 7.75C5.25278 7.75 4.91699 7.41422 4.91699 7ZM14.75 10.7998C14.75 11.3475 14.751 11.8037 14.7207 12.1748C14.6897 12.5545 14.6219 12.9109 14.4502 13.2481C14.1865 13.7655 13.7655 14.1865 13.248 14.4502C12.9109 14.6219 12.5545 14.6897 12.1748 14.7207C11.8037 14.751 11.3475 14.75 10.7998 14.75H5.20019C4.65251 14.75 4.19632 14.751 3.82519 14.7207C3.44546 14.6897 3.08909 14.6219 2.75195 14.4502C2.2345 14.1865 1.81345 13.7655 1.5498 13.2481C1.37809 12.9109 1.31033 12.5545 1.27929 12.1748C1.24897 11.8037 1.25 11.3475 1.25 10.7998V5.2002C1.25 4.65252 1.24897 4.19633 1.27929 3.8252C1.31033 3.44547 1.37809 3.0891 1.5498 2.75196C1.81345 2.23451 2.2345 1.81346 2.75195 1.54981C3.08909 1.3781 3.44546 1.31033 3.82519 1.2793C4.19632 1.24898 4.65251 1.25 5.20019 1.25H10.7998C11.3475 1.25 11.8037 1.24898 12.1748 1.2793C12.5545 1.31033 12.9109 1.3781 13.248 1.54981C13.7655 1.81346 14.1865 2.23451 14.4502 2.75196C14.6219 3.0891 14.6897 3.44547 14.7207 3.8252C14.751 4.19633 14.75 4.65252 14.75 5.2002V10.7998Z" />
-</template>