@designcrowd/fe-shared-lib 1.5.1 → 1.5.2

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

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

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

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