@designcrowd/fe-shared-lib 1.4.7-jj-2 → 1.4.7

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

@@ -1,323 +0,0 @@
-<template>
-  <div :class="{ 'tw-mb-8': !hasPurchasedDomains }">
-    <div
-      v-if="!isSlugEditMode"
-      class="tw-flex tw-items-center tw-mr-2 tw-mb-1"
-      @click="onDomainTypeRadioButtonClick(DOMAIN_TYPES.slug)"
-    >
-      <input
-        v-if="showRadioButtons"
-        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
-        v-if="!isPublished && hasPurchasedDomains"
-        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 v-if="isNotPublished || isSlugEditMode" class="tw-mt-4">
-      <div v-if="hasPurchasedDomains">
-        <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 v-if="isNotPublished || !isSlugEditMode" class="tw-mt-4">
-      <div v-if="showRadioButtons">
-        <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
-            v-if="domains"
-            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>
-    <div
-      v-if="hasPurchasedDomains"
-      class="tw-font-sans tw-text-center"
-      :style="isMobile ? 'padding-left: 1.5rem; padding-right: 1.5rem;' : ''"
-    >
-      <Button
-        :label="isSlugEditMode ? setUrlLabel : 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',
-};
-
-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,
-    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,
-    },
-    brandPageDisplayName: {
-      type: String,
-      required: true,
-      default: undefined,
-    },
-    errorMessage: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    publishErrorMessage: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    isPublished: {
-      type: Boolean,
-      required: true,
-    },
-    isPublishing: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-    shouldPublish: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-    isDesignCom: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-    showRadioButtons: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-    isBrandPageSlugEditMode: {
-      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,
-      freePublishCardTitleLabel: publishBrandPageModalTr('freePublishCardTitleLabel'),
-      freePublishCardDescriptionLabel: publishBrandPageModalTr('freePublishCardDescriptionLabel'),
-      slugInputPlaceholderYourNameLabel: publishBrandPageModalTr('slugInputPlaceholderYourNameLabel'),
-      slugInputPlaceholderYourBusinessNameLabel: publishBrandPageModalTr('slugInputPlaceholderYourBusinessNameLabel'),
-      freeDomainLabel: publishBrandPageModalTr('freeDomainLabel'),
-      purchasedDomainLabel: publishBrandPageModalTr('purchasedDomainLabel'),
-      setUrlLabel: publishBrandPageModalTr('setUrlLabel'),
-      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;
-    },
-    isNotPublished() {
-      return !this.isPublished || !this.shouldPublish;
-    },
-    isSlugEditMode() {
-      return this.isPublished && this.shouldPublish && this.isBrandPageSlugEditMode;
-    },
-    iconUrl() {
-      return this.isDesignCom ? DCOM_IMG_FREE : BC_IMG_FREE;
-    },
-    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/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>