@designcrowd/fe-shared-lib 1.5.1 → 1.5.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>