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

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

@@ -1,271 +0,0 @@
-<template>
-  <div :class="{ 'tw-mb-8': !hasPurchasedDomains }">
-    <div class="tw-flex tw-items-center tw-mr-2 tw-mb-1" @click="onDomainTypeRadioButtonClick(DOMAIN_TYPES.slug)">
-      <input
-        type="radio"
-        class="tw-w-6 tw-h-8 tw-cursor-pointer tw-mb-0"
-        :style="{ 'accent-color': 'rgb(242 27 63)' }"
-        name="domainTypeValue"
-        :checked="domainTypeValue === DOMAIN_TYPES.slug"
-        :value="domainTypeValue === DOMAIN_TYPES.slug"
-      />
-      <label
-        for="domain-type"
-        class="tw-font-sans tw-w-full tw-text-grayscale-600 tw-text-sm tw-cursor-pointer tw-ml-2"
-      >
-        <span class="tw-inline-block tw-rounded-full">{{ freeDomainLabel }}</span>
-      </label>
-    </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-mt-4">
-      <div
-        class="tw-flex tw-items-center tw-mr-2 tw-mb-1"
-        @click="onDomainTypeRadioButtonClick(DOMAIN_TYPES.purchased)"
-      >
-        <input
-          type="radio"
-          class="tw-w-6 tw-h-8 tw-cursor-pointer tw-mb-0"
-          :style="{ 'accent-color': 'rgb(242 27 63)' }"
-          name="domainTypeValue"
-          :checked="domainTypeValue === DOMAIN_TYPES.purchased"
-          :value="domainTypeValue === DOMAIN_TYPES.purchased"
-        />
-        <label
-          for="domain-type"
-          class="tw-font-sans tw-w-full tw-text-grayscale-600 tw-text-sm tw-cursor-pointer tw-ml-2"
-        >
-          <span class="tw-inline-block tw-rounded-full">{{ purchasedDomainLabel }}</span>
-        </label>
-      </div>
-      <div class="tw-mt-4 domain-dropdown">
-        <Dropdown
-          ref="dropdown"
-          :element-classes="{
-            'tw-h-12': true,
-          }"
-          menu-element-classes="tw-w-full"
-          :disabled="domainTypeValue === DOMAIN_TYPES.slug"
-          :class="{
-            'tw-text-grayscale-600 tw-font-normal': !selectedCustomDomain,
-          }"
-          :title="(selectedCustomDomain && selectedCustomDomain.domainName) || selectDomainDropdownPlaceholder"
-        >
-          <DropdownItem
-            v-for="purchasedDomain of domains"
-            :key="purchasedDomain.domainName"
-            class="tw-font-bold tw-break-all tw-flex tw-gap-2 tw-text-black"
-            @click="onSelectPurchasedDomain(purchasedDomain)"
-          >
-            {{ purchasedDomain.domainName }}
-          </DropdownItem>
-        </Dropdown>
-      </div>
-      <div v-if="errorMessage" class="tw-mt-2 tw-text-sm tw-text-left tw-text-error-500 tw-font-normal">
-        {{ errorMessage }}
-      </div>
-    </div>
-    <div class="tw-font-sans tw-text-center" :style="isMobile ? 'padding-left: 1.5rem; padding-right: 1.5rem;' : ''">
-      <Button
-        :label="publishLabel"
-        :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 Dropdown from '../../../../atoms/components/Dropdown/Dropdown.vue';
-import DropdownItem from '../../../../atoms/components/Dropdown/DropdownItem.vue';
-import Button from '../../../../atoms/components/Button/Button.vue';
-import mediaQueryMixin from '../../../mixins/mediaQueryMixin';
-import { publishBrandPageModalTr } from '../../../../useSharedLibTranslate';
-
-const DOMAIN_TYPES = {
-  slug: 'slug',
-  purchased: 'purchased',
-};
-
-export default {
-  components: {
-    TextInput,
-    Dropdown,
-    DropdownItem,
-    Button,
-  },
-  mixins: [mediaQueryMixin],
-  props: {
-    radioValue: {
-      type: String,
-      required: true,
-      default: DOMAIN_TYPES.slug,
-    },
-    domains: {
-      type: Array,
-      required: true,
-      default: undefined,
-    },
-    brandPageBaseUrl: {
-      type: String,
-      required: true,
-      default: undefined,
-    },
-    brandPageSlug: {
-      type: String,
-      required: true,
-      default: undefined,
-    },
-    customDomain: {
-      type: Object,
-      required: false,
-      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', 'radio-button-changed', 'internal-publish-brand-page', 'on-select-domain', 'on-slug-changed'],
-  setup() {
-    return {
-      publishBrandPageModalTr,
-      slugInputPlaceholderYourNameLabel: publishBrandPageModalTr('slugInputPlaceholderYourNameLabel'),
-      slugInputPlaceholderYourBusinessNameLabel: publishBrandPageModalTr('slugInputPlaceholderYourBusinessNameLabel'),
-      freeDomainLabel: publishBrandPageModalTr('freeDomainLabel'),
-      purchasedDomainLabel: publishBrandPageModalTr('purchasedDomainLabel'),
-      publishLabel: publishBrandPageModalTr('publishLabel'),
-      hasAlreadyPurchasedDomainCloseButtonLabel: publishBrandPageModalTr('hasAlreadyPurchasedDomainCloseButtonLabel'),
-      selectDomainDropdownPlaceholder: publishBrandPageModalTr('selectDomainDropdownPlaceholder'),
-    };
-  },
-  data() {
-    return {
-      DOMAIN_TYPES,
-      domainTypeValue: this.radioValue,
-      internalSlug: this.brandPageSlug,
-      selectedCustomDomain: this.customDomain,
-    };
-  },
-  computed: {
-    brandPageBaseUrlWithoutHttps() {
-      return this.brandPageBaseUrl.replace('https://', '');
-    },
-    allowPublish() {
-      if (this.domainTypeValue === DOMAIN_TYPES.slug) {
-        return this.internalSlug && !this.slugValidationError;
-      }
-      return this.selectedCustomDomain;
-    },
-    hasPurchasedDomains() {
-      return this.domains && this.domains.length > 0;
-    },
-    slugErrorMessage() {
-      return this.slugValidationError ? this.slugValidationError : this.publishErrorMessage;
-    },
-    isInputEnabled() {
-      return this.isPublishing || this.domainTypeValue === DOMAIN_TYPES.purchased;
-    },
-    isPublishingDisabled() {
-      return !this.allowPublish || this.isPublishing;
-    },
-    getPlaceHolder() {
-      return this.brandPageType === 'brandContact'
-        ? this.slugInputPlaceholderYourNameLabel
-        : this.slugInputPlaceholderYourBusinessNameLabel;
-    },
-  },
-  watch: {
-    brandPageSlug(slug) {
-      this.internalSlug = slug;
-    },
-    customDomain(val) {
-      this.selectedCustomDomain = val;
-    },
-  },
-  mounted() {
-    this.internalSlug = this.brandPageSlug;
-  },
-  methods: {
-    onDomainTypeRadioButtonClick(domain) {
-      this.domainTypeValue = domain;
-      this.closePurchasedDomainDropdown();
-      this.$emit('radio-button-changed', domain);
-    },
-    onCloseModal() {
-      this.$emit('close-modal');
-    },
-    onSlugChanged(e) {
-      this.$emit('on-slug-changed', e);
-    },
-    onPublish() {
-      this.$emit('internal-publish-brand-page', this.internalSlug, this.selectedCustomDomain);
-    },
-    onSelectPurchasedDomain(newVal) {
-      this.selectedCustomDomain = newVal;
-      this.$emit('on-select-domain', newVal);
-      this.closePurchasedDomainDropdown();
-    },
-    closePurchasedDomainDropdown() {
-      if (this.$refs.dropdown?.hideMenu) {
-        this.$refs.dropdown.hideMenu();
-      }
-    },
-  },
-};
-</script>

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,150 +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">
-      <div>Publishedview</div>
-      <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>