@designcrowd/fe-shared-lib 1.4.7-jj-3 → 1.4.8-promocardv0

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

@@ -1,168 +0,0 @@
-<template>
-  <div>
-    <div class="tw-mt-4">
-      <PublishBrandPageCard
-        :img-url="iconUrl"
-        :title="freePublishCardTitleLabel"
-        :description="freePublishCardDescriptionLabel"
-        :is-design-com="isDesignCom"
-        :has-search-button="false"
-      >
-        <template #slug>
-          <div class="tw-flex tw-flex-col md:tw-flex-row tw-justify-between">
-            <div class="tw-grow md:tw-mr-2">
-              <TextInput
-                v-model="internalSlug"
-                element-classes="tw-mb-0 !tw-rounded-l-none tw-text-md"
-                :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>
-            <Button
-              :label="publishLabel"
-              :disabled="isPublishingDisabled"
-              class="tw-flex tw-items-center tw-justify-center tw-mt-2 md:tw-mt-0 tw-font-bold tw-transition-colors tw-duration-300"
-              data-test-brand-page-publish-button
-              variant="primary"
-              size="small-medium"
-              :full-width="isMobile"
-              :class="{
-                'tw-uppercase': !isDesignCom,
-              }"
-              @on-click="onPublish"
-            />
-          </div>
-        </template>
-      </PublishBrandPageCard>
-    </div>
-    <div class="tw-mt-4">
-      <slot name="recommended" />
-    </div>
-  </div>
-</template>
-<script>
-import PublishBrandPageCard from '../PublishBrandPageCard.vue';
-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';
-
-const DCOM_IMG_FREE = 'https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/publish/dcom-free-url.svg';
-const BC_IMG_FREE = 'https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/publish/bc-free-url.svg';
-
-export default {
-  components: {
-    TextInput,
-    Button,
-    PublishBrandPageCard,
-  },
-  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: ['internal-publish-brand-page', 'on-slug-changed'],
-  setup() {
-    return {
-      publishBrandPageModalTr,
-      freePublishCardTitleLabel: publishBrandPageModalTr('freePublishCardTitleLabel'),
-      freePublishCardDescriptionLabel: publishBrandPageModalTr('freePublishCardDescriptionLabel'),
-      slugInputPlaceholderYourNameLabel: publishBrandPageModalTr('slugInputPlaceholderYourNameLabel'),
-      slugInputPlaceholderYourBusinessNameLabel: publishBrandPageModalTr('slugInputPlaceholderYourBusinessNameLabel'),
-      publishLabel: publishBrandPageModalTr('publishLabel'),
-    };
-  },
-  data() {
-    return {
-      internalSlug: this.brandPageSlug,
-    };
-  },
-  computed: {
-    brandPageBaseUrlWithoutHttps() {
-      return this.brandPageBaseUrl.replace('https://', '');
-    },
-    allowPublish() {
-      return this.internalSlug && !this.slugValidationError;
-    },
-    slugErrorMessage() {
-      return this.slugValidationError ? this.slugValidationError : this.publishErrorMessage;
-    },
-    iconUrl() {
-      return this.isDesignCom ? DCOM_IMG_FREE : BC_IMG_FREE;
-    },
-    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: {
-    onSlugChanged(e) {
-      this.$emit('on-slug-changed', e);
-    },
-    onPublish() {
-      this.$emit('internal-publish-brand-page', this.internalSlug);
-    },
-  },
-};
-</script>

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

@@ -1,149 +0,0 @@
-<template>
-  <div class="tw-font-sans">
-    <div v-if="!showUpsellRotationContainer" class="tw-mb-6 tw-text-left">
-      <div class="tw-mb-6">
-        <SellDomainNameSearchWithResults
-          :is-design-com="isDesignCom"
-          :initial-search-term="searchText"
-          :currency="userCurrency"
-          :display-result-limit="4"
-          :domain-search-location="sitePublishedModal"
-          show-view-more-button
-          @on-change-search="onSearchTextChanged"
-          @on-buy-now-click="onBuyNowClick"
-          @on-view-more="onViewMore"
-        />
-      </div>
-    </div>
-    <div class="tw-px-4 tw-text-center" :class="{ 'lg:tw-px-20': hasPurchasedDomains }">
-      <TextCopyField
-        button-variant="secondary"
-        :text="brandPageUrl"
-        :default-copy-button-text="copyLabel"
-        :copied-button-text="copySuccessLabel"
-        data-test-brand-page-copy-input
-        @on-click="onCopyUrlClick"
-      />
-      <Button
-        :label="viewMyWebsiteLabel"
-        :variant="isDesignCom ? 'primary' : 'primary-with-icon'"
-        icon="chevron-right-wide"
-        size="medium"
-        icon-view-box="0 0 24 24"
-        class="tw-my-4"
-        target="_blank"
-        rel="noopener noreferrer"
-        :url="brandPageUrl"
-        :full-width="isMobile"
-        @on-click="onBrandPageUrlClick"
-      />
-    </div>
-    <div v-if="showUpsellRotationContainer" class="tw-border-t tw-border-solid tw-border-grayscale-500 tw-p-5">
-      <slot name="upsellContainer" />
-    </div>
-  </div>
-</template>
-<script>
-import Button from '../../../../atoms/components/Button/Button.vue';
-import TextCopyField from '../../../../atoms/components/TextCopyField/TextCopyField.vue';
-
-import SellDomainNameSearchWithResults from '../../SellDomainNameSearchWithResults/SellDomainNameSearchWithResults.vue';
-import { sitePublishedModal } from '../../../constants/event-constants';
-import mediaQueryMixin from '../../../mixins/mediaQueryMixin';
-import { publishBrandPageModalTr } from '../../../../useSharedLibTranslate';
-
-export default {
-  components: {
-    Button,
-    TextCopyField,
-    SellDomainNameSearchWithResults,
-  },
-  mixins: [mediaQueryMixin],
-  props: {
-    brandPageUrl: {
-      type: String,
-      required: true,
-      default: undefined,
-    },
-    isDesignCom: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-    showUpsellRotation: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-    isSubsequentPublish: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-    searchText: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    brandPageDisplayName: {
-      type: String,
-      required: true,
-      default: undefined,
-    },
-    hasPurchasedDomains: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-    showUpsellRotationContainer: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-    userCurrency: {
-      type: String,
-      required: true,
-      default: undefined,
-    },
-  },
-  emits: [
-    'copy-url-clicked',
-    'on-brand-page-url-click',
-    'on-view-more-domains',
-    'on-buy-now-clicked',
-    'on-search-text-changed',
-  ],
-  setup() {
-    return {
-      sitePublishedModal,
-      publishBrandPageModalTr,
-      copyLabel: publishBrandPageModalTr('copyLabel'),
-      copySuccessLabel: publishBrandPageModalTr('copySuccessLabel'),
-    };
-  },
-  computed: {
-    viewMyWebsiteLabel() {
-      return this.publishBrandPageModalTr('viewMyWebsiteLabel', {
-        brandPageDisplayName: this.brandPageDisplayName,
-      });
-    },
-  },
-  methods: {
-    onCopyUrlClick() {
-      this.$emit('copy-url-clicked');
-    },
-    onBrandPageUrlClick() {
-      this.$emit('on-brand-page-url-click');
-    },
-    onViewMore() {
-      this.$emit('on-view-more-domains');
-    },
-    onSearchTextChanged(val) {
-      this.$emit('on-search-text-changed', val);
-    },
-    onBuyNowClick() {
-      this.$emit('on-buy-now-clicked');
-    },
-  },
-};
-</script>

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>