@designcrowd/fe-shared-lib 1.5.0-jj-3 → 1.5.0

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

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